How to add images in html notepad? Web design course free for dummies
In the previous post, I wrote paragraphs, used headings, and created links on my webpage. I also talked of nesting.
I use notepad and chrome to write HTML code. Here’s how.
I will use the img tag to insert images in my webpage.
I have the image saved in my computer by the name ‘Untitled design(9).png’.
I have saved my html page in the desktop. So, I had to save my image in the desktop too. In whichever location you have saved your notepad file with ‘.html’ extension, you have to save your image at that location. Only then will the webpage display the image.
Here is the webpage and here is the html code. If you are wondering from where I got the rest of the content then I coded for that in my previous blog.
How to add images in HTML?
You can see the image appear.
Here is the HTML code for the entire webpage. I highlighted the img tag in pink and the rest of the code in blue.
<html>
<head>
<title> Hey there! I am Subarna Creative. </title>
</head>
<body>
<h1> Why did I start web development? </h1>
<p>I followed the method by Feynman. Feynman was a great physicist. He said that the best way to learn is to teach.
<br> I decided to get started in computer science somewhere. So, I decided to pick up right where I started. <br>
I decided to start from html which I had learned in high school. </p>
<img src = "SubCre.png">
<h1> What do I mean by web development? </h1>
<p> By web development, I mean creating cool websites. I have used blogger and wordpress
to write blogs.<br> I have also used google sites. <br>
All this made me enamored with website building from the scratch.</p>
<h2> Which languages do we need for web design? </h2>
<p>You need to learn languages like HTML, CSS, JavaScript, etc. to do web design.</p>
<h3>Why should we learn Javascript if we already know HTML and CSS?</h3>
<p>JavaScript is the most important for game developers. There are interactive elements. <br>
There are animations and graphics which act like buttons. </p>
<h4>Will I create animation in the future?</h4>
<p>If sky is the limit, why just touch it? Let's rule over it. <br>
Yes, I am excited with the posstiblities that modern technology can give us.</p>
<h5>What is modern technology?</h5>
<p>Whatever comes in the latest era, we call it modern. <br>
I think the products of digital electronics are modern technology</p>
<h6>Why am I writing all this?</h6>
<p>I had to show you the use of heading tags from h1 to h6 :-)</p>
<h1> Is web development a dying career? </h1>
<p> To create a website is a creative process. <br>
<a href="http://www.subarnacreative.blogspot.com"> This is my website. </a>
<br>To say that artificial intelligence will
take over wevb development is wrong. <br> AI may make average websites. <br> To make
the best websites, you still need human designers. </p>
</body>
</html>
In case you are wondering why we write ‘src’, it is the attribute of the ‘img’ tag. ‘Src’ means you specify where to find the image.
How do you resize images in HTML?/ How do you make images smaller in HTML?
We can adjust the height or width or both of the images. Here’s how.
How to change image width in HTML?
I will show you that in the code, I specified only the width. The image also changed its height according to its original ratio.
What did I write?
<img src = "SubCre.png" width='100'>
So, what if I specify the height only?
<img src = "SubCre.png" height='100'>
The image looks the same. It is because the image was square.
Now, I will make the image fit into a rectangle. I will specify A different height and width. Here’s how.
The image got rectangular. The code is:
<img src = "SubCre.png" width='150' height='100'>
So we have seen how to resize images in HTML.
Adding alt text to images in HTML
Why do we use alt attribute in img tag?
If the webpage takes too long to load then the visitor cannot see the image. If you put an alt tag then it will show when the image does not show. The alt tag will act as a placeholder.
Alt stands for alternative text.
Images HTML alt tag
Here’s how we code for the alternative text.
<img src = "SubCre.png" alt='Subarna Creative logo' width='150' height='100'>
You could write alt equal to anything in the img tag.
Why is image broken in HTML?
The webpage loads images from the server. If the image location is not proper then you get a broken image link and the alt text. Here’s an example.
Fixing broken images in HTML
There may be many reasons why an image is broken. The most common are:
The image you specified in your img tag does not exist.
You made a mistake while spelling the image.
There was a mistake when you specified the image path.
Let me see why I got a broken link.
I will right-click on the image>>
I will click on ‘open image in a new tab’.
It says that ‘You image could not be accessed. It may have been moved, renamed, or deleted.’
I know why it happened. The image is still in my computer but I removed it from my desktop. I have saved my HTML file in my desktop. I can rectify this error if I move the image to the desktop again.
If I define a file path to my downloads, even then I can rectify the error.
Later in this course, we will learn much more about relative and absolute file paths. Then we will get into further details.
We will also learn
how to change the image alignment
How to align three images vertically or horizontally
How to add images as buttons
And much more when we also learn CSS later.
Conclusion
When there are so many HTML tutorials, why did we need a new one? The reason is, going through them is like reading a textbook. They tell you what to do but will not show you the real-life experience.
Web design is a creative process. So, I decided to show you what it really looks like.
If you liked my initiative then visit my website.
Email me at subarnacreative@gmail.com.
Comments
Post a Comment