The img element
The <img> element, like most elements, is a container. It is not an image in and of itself, but a receptacle for one.
Just as the p element holds a paragraph, the img element holds an image. However, it does so in a entirely different way. Most notably, the image is a separate file that loads into the space created by the img element.
There are three types of image files used in HTML: .jpg, .gif and .png (also know as JPEGs, GIFs and PINGs); which we will look at next.
Let's first take a look at what I used to display the image below. Note that there is no closing tag. It's one of the few elements that doesn't use them.
<img src="images/tech.jpg" class="flr" alt="tech" width="300" height="300">The img element has a number of what are called attributes: **
The "src" or source attribute tells the browser what image (ie. image file) goes in the tag and where to find it. It is required.
The browser sends instructions to the server to go to the folder named images, get atitlan.jpg and send it back to the client (ie. your computer) and show it in the space reserved by the image tag. The img element can have a "class" attribute just like most elements.
You can position images, add borders, margins and much more with CSS. The "alt" attribute refers to alternative text or text that the W3C calls "fallback content". This too is required.
If for some reason visitors can't see an image the alt attribute explains what the image is. The principal visitors that can't "see" images are the web crawlers sent out by the search engines. As I have said repeatedly throughout the tutorial, sites have two audiences – the crawlers being the second. The alt attributes plays a role in SEO. While the "height" and "width" are not required, they are highly recommended.
Pages don't load all at once. When a new page opens a browser will start to load what it can, when it can and often images finish downloading last. With the height and width attributes set the browser can position (with CSS) and size the img tag before the image file loads.
In the source attribute there are two ways to show what is known as the "path" to the image file: The "absolute path":
<img src="http://www.helphtml5.blogspot.com/images/tech.jpg" ... The "relative path":
<img src="images/tech.jpg" ...
The later being "relative" in the sense that its location on the server is relative to the location of the html file requesting it, which in this case is: image-element.htm – in other words, this page.
On my server is a folder (also called a "directory") named "html-5-tutorial.com" – the "root directory". In the root directory is the file image-element.htm and a folder named images, which in turn holds tech.jpg.
The file system on a server works just like the file system on your computer save for the fact that it can be accessed from internet. Your computer has a firewall (or at least it should) that blocks anything from the outside getting in.
It is essential that you understand how paths work as it applies to all files used on any site. CSS, javascript, PHP – what have you – are all stored in files and to access a file of any type you have to follow a path. Even the URL of this page: http://www.helphtml5.blogspot.com/image-element.htm (or any other page on any site) is just a path. We will work more with paths as we get further along in the tutorial. If you are confused all I can say is not to worry. It might well get worse before it gets better, but it will get better ...eventually.
It was the first time I made a page with photos that I really got hooked on web design. All of a sudden my fledgling efforts actually produced something I could show the world
Just as the p element holds a paragraph, the img element holds an image. However, it does so in a entirely different way. Most notably, the image is a separate file that loads into the space created by the img element.
There are three types of image files used in HTML: .jpg, .gif and .png (also know as JPEGs, GIFs and PINGs); which we will look at next.
Let's first take a look at what I used to display the image below. Note that there is no closing tag. It's one of the few elements that doesn't use them.
<img src="images/tech.jpg" class="flr" alt="tech" width="300" height="300">The img element has a number of what are called attributes: **
The "src" or source attribute tells the browser what image (ie. image file) goes in the tag and where to find it. It is required.
The browser sends instructions to the server to go to the folder named images, get atitlan.jpg and send it back to the client (ie. your computer) and show it in the space reserved by the image tag. The img element can have a "class" attribute just like most elements.
You can position images, add borders, margins and much more with CSS. The "alt" attribute refers to alternative text or text that the W3C calls "fallback content". This too is required.
If for some reason visitors can't see an image the alt attribute explains what the image is. The principal visitors that can't "see" images are the web crawlers sent out by the search engines. As I have said repeatedly throughout the tutorial, sites have two audiences – the crawlers being the second. The alt attributes plays a role in SEO. While the "height" and "width" are not required, they are highly recommended.
Pages don't load all at once. When a new page opens a browser will start to load what it can, when it can and often images finish downloading last. With the height and width attributes set the browser can position (with CSS) and size the img tag before the image file loads.
In the source attribute there are two ways to show what is known as the "path" to the image file: The "absolute path":
<img src="http://www.helphtml5.blogspot.com/images/tech.jpg" ... The "relative path":
<img src="images/tech.jpg" ...
The later being "relative" in the sense that its location on the server is relative to the location of the html file requesting it, which in this case is: image-element.htm – in other words, this page.
On my server is a folder (also called a "directory") named "html-5-tutorial.com" – the "root directory". In the root directory is the file image-element.htm and a folder named images, which in turn holds tech.jpg.
The file system on a server works just like the file system on your computer save for the fact that it can be accessed from internet. Your computer has a firewall (or at least it should) that blocks anything from the outside getting in.
It is essential that you understand how paths work as it applies to all files used on any site. CSS, javascript, PHP – what have you – are all stored in files and to access a file of any type you have to follow a path. Even the URL of this page: http://www.helphtml5.blogspot.com/image-element.htm (or any other page on any site) is just a path. We will work more with paths as we get further along in the tutorial. If you are confused all I can say is not to worry. It might well get worse before it gets better, but it will get better ...eventually.
It was the first time I made a page with photos that I really got hooked on web design. All of a sudden my fledgling efforts actually produced something I could show the world
