Web Design/Advanced HTML Tutorial
|
Web Design → Advanced HTML Tutorial
|
Now that you have completed your first HTML page lets move on to some advanced HTML. Lets start off with Headers.
|
Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 |
Headers are text that is formatted in the style of headers just like you would find in a report. There are six levels of header with <h1> being the biggest and <h6> being the smallest. To create headers simply surround an area of text with a begining and ending header tag. Header tags are very useful. However, if you want normal text then you should use a paragraph tag <p>. Paragraph tags again do exactly as their name suggests. They format your text as a paragraph. To use them all you have to do is surround an area of text with a <p> and a </p>. Ok so you have lots of nicely formatted text, but you want some images. Well let's do that then. |
To add images to your web documents you need to use the image tag. Unlike other tags however, the image tag has no end tag (But you should end it with /> as per standard rules). In order to use the image tag we will have to go over attributes. Attributes are subsections that get added to a beginning tag to add functionality. Attributes DO NOT get added to end tags.
Insert the <img> tag where you want your image to go. Now in the tag add the "src" attribute and specify the path to the image file on the server (or local directory) that your document is on. Eg. <img src="images/image.gif/>. True HTML 4.01 requires that the image tag also have height, width, and alt, attributes. But what do these do?
The height and width attributes specify the size of your image. Most browsers will determine this on their own but specifying them allows for faster download times. You can also change the values to something other than the original dimensions of the image. This, however, will NOT change the size of the file. You can even distort images by only changing 1 dimension.
The alt attribute specifies the alternative text that comes up if the image can't be displayed. You would be surprised how often this is needed. If an image get corrupted, deleted, or moved without changing the path a graphical browser can't display it and instead will attempt to use alternative text. There are many text-only browsers that can ONLY display alternative text for images as well. A common example is Lynx. Alternative text should either say the text on an image or describe the image. E.g. An image that links to a downloads page says "Downloads" the alternative text should say "downloads" as well. E.g.(2) An image of a cat has no text should have alternative text that describes the cat.
Rami Reddy multimedia designer