Simple HTML Tags
You can use the following simple HTML tags in the center section of your website to enhance the way that it appears on the screen.
- Header:
The Code:
<H2>Header Text</H2> The Result:
A Header is used to apply titles to sections of the page in the same manner that your would use headers in a word processor. There are six sizes represented by the numerals 1 through 6, with 1 being the largest size and 6 the smallest. In our example we are setting the header text to be size 2, the largest header we generally use on our pages.
- Line BReak:
The Code:
<BR> The line break acts as a carriage return, starting anything that follows it on the next line.
- Paragraph:
The Code:
Default (left aligned):
<P>...</P>Center Aligned:
<P align="center">...</P>Right Aligned:
<P align="right">...</P>Justified (aligned left and right):
<P align="justify">...</P>
Originally the paragraph tag acted as a separator, providing a blank line following it, before the start of a new paragraph. This is no longer the case though the result is the same. The paragraph should be treated as a container the same as many other text elements.
- Bold:
The Code:
<B>Sample Text</B>
The Result:
Sample Text
The Bold tag provides a wider, or bolder, version of the text for getting more attention.
- Italic:
The Code:
<I>Sample Text</I>
The Result:
Sample Text
The Italic tag slants, or angles, the text to provide more emphasis.
Underline:
The Code:
<U>Sample Text</U>
The Result:
Sample Text The Underline tag highlights text to set it apart from the rest of the sentence. However, most authors suggest that you avoid the use of the underline tag since it can present some confusion as to whether the text is a hyperlink. It is also suggested that the underlines not be eliminated from the hyperlinks for the same reason. If you are providing a link to another source don't hide or confuse the fact that the link is provided. Hiding the underline then also relies on the link being found by color alone which is an accessibility issue.
- Combining Tags for More Functionality:
The Code:
<B><I>Sample Text</I></B>
The Result:
Sample Text Multiple tags can be applied to the same text. For instance if one desired to both italicize and bold a piece of text as we did in this example. What you must be careful of is the nesting of the tags. When you combine tags together to combine functionality, you must open and close the tags in the proper order. Always close the tags in the reverse order that you opened them. This produces less problems with interpretation of your code, and browsers will more likely display your page the way you intended.
Links & Images
- Links:
The Code:
<A href="http://www.mbsinternet.com">Internet Resource Center</a>
The Result:
Internet Resource Center
A link, simply put, is a reference from one web page to another web page, image, file, or server. The page being linked to can reside on the same server or a different one.In our example, "http://www.mbsinternet.com" is the address to where the link will take the visitor when clicked, and "Internet Resource Center" is the clickable text that will be displayed on the screen.
- Images:
The Code:
<IMG src="http://www.affiliateshowcase.com/as.jpg" width=400 height=
71 align="right" alt="AffiliateShowcase.com">
The Result:
Here, "as.jpg" is the name of the image file that will be displayed on the screen.
To accommodate most web browsers, the type of images used are ".jpg" and ".gif" file formats. The ".jpg" images tend to be much smaller in size than their ".gif" counterparts and are best used with photographs which use large numbers of colors.
However, ".jpg" compression image can cause large solid areas of color to be distorted. For general web graphics where the image has few colors, the ".gif" file format is best suited. Newer graphic editors can even apply image compression on a ".gif" file and they can apply transparencies to parts of the image to make it invisible.
To have your page display as quickly as possible, "ALWAYS" use the image pixel dimensions in the code. Providing the image size allows the browser to set aside that area of the screen and display the page as soon as possible. The dimensions of "as.jpg" are 400 x 71 (width x height), measured in pixels. An images dimensions can be easily determined using most graphics programs.
Another attribute that can be used with images is the ALIGN. Here we have aligned the image to the right in a table. It can also be aligned left, middle (the default if not specified), bottom, or top. The last three options apply to how the text is displayed adjacent to the image. MIDDLE means align the text to the middle of the image, BOTTOM to the bottom of the image, and TOP to the top of the image.
A description of the image was also provided with the ALTernate attribute of the IMG tag. The ALT provides information on the screen so that the content of the image can be known without having to wait for it to download, or if the visitor has image downloading turned off for fast surfing. For accessibility purposes if an image has nothing of value to describe you should use ALT="" for the screen readers.
- DIVision:
The Code:
<DIV align="right">Sample Text</DIV>
The Result:
Notice that the DIV tag is appended around the text like most of the other tags. This will align the text with either "left", "center", "right", or "justify" just as the paragraph tag will. Here we have aligned our text to the right. The difference between the DIV tag and the P tag is this tag is not separated from the other content of the page by white space.
