Writing on the Web

A look at Hypertext Markup Language (HTML)

Part 5

 

Basic Text Formatting, Images and Links:

Review:

Okay, what does our page look like?

<html> This opens the HTML document. It is the last thing that we will close on our web page.

<head>This section contains information that isn't displayed on your web page, such as the title and Javascript. The header tag is closed only after all the information is included. In most cases, that will be after the <title> tag.

<title>This section contains the information that will be put up at the top of the window, rather than on the page itself.</title></head>

<body>This command tells the browser that the following information is the web page itself. This tag is the second last tag to be closed.

<p> This tag opens a new paragraph. It is not necessary to close this tag, but closing all tags is a good habit to develop. Paragraphs can be aligned <p align="left"><p align="center"><p align+"right"> Paragraphs are aligned left by default.</p>

<font>This tag changes the appearance of the text on your page, using the attributes "color", "face", and "size". The font attributes can be put in one tag, leaving a space between each attribute and the next, or they can be put into separate tags and closed individually.</font>

<font color="blue"><font color="OOOOFF">The colours of the fonts can be defined using either plain language or hexadecimal values.</font>

<font face="Arial"><font face="serif"> The face or typeface can be defined by either a specific font (Arial, Times, TimesNewRoman, OldEnglishTextMT, etc.), or by a generic font name (serif, sans serif, fantasy). Remember that not all computers have the same fonts installed, so the font you may wish to have appear on the screen, may not work on some computers/browsers.</font>

<font size="4"><font size="+1">Font sizes are changed by either specifying a particular size(1-7), or by indicating a change in size from the current ("-7" to "+7"). The default font size is "3".</font>

<b>This tag makes the text between it and the closing tag bold.</b>

<i>This tag makes the text Italic.</i>

<u>This underlines the text. Underlined text is usually reserved for links.</u>

<s>This tag creates strikethrough text. It can be rather difficult to read.</s>

<h1>This creates the style Header Size 1, the largest available.</h1>

<h6>This creates the style Header Size 6, the smallest available.</h6>

<blockquote>This indents the paragraph on both sides, setting the text off. It is handy for quotations and other such information.</blockquote>

The <br> <br>
tag ends <br>
the line <br>
without<br>
ending the <br>
paragraph<br>
or adding<br>
an extra<br>
linespace. Break tags are not closed.

<hr> This tag adds a horizontal rule to the page. It can be changed by adjusting the width <hr width="#"> (to specify a number of pixels), or <hr width="#%"> (to specify a certain percentage of the page width. The height, or size of the rule is changed by specifying a definite number of pixels in the <hr size="#"> tag. You can remove the default shadow on the rule by adding the tag <hr noshade>. All the attributes can be enclosed in one tag, and it is not necessary to close this tag. <hr width="75%" size ="10" noshade>


<img src="filename.gif"><img src="filename.jpg"> These tags display images from either the current site or another site. Images can be changed in a couple of ways. Image tags do not need to be closed.

<img border="#"> changes the size of the border surrounding the image, and is measured in pixels.

<img height="#"> and <img width="#"> will change the height and width of an image but it doesn't change the overall size of the image. A 128k image will still take quite a while to load, whether its size is set at 72x72 pixels (1"x1" on most browsers) or at its full size of 8"x8" (or whatever.)

<img align="left"><img align="center"><img align="right"><img align="top"><img align="middle"><img align="bottom">Images can be aligned, too. The first three align the image to the page, the second three align the image to the surrounding text.

There are several types of link tags.

<a name="anchorname">creates an anchor to which another link may refer. For those of you just joining us temporarily, this link will get you back to the proper page.</a>

<a href="#anchorname"> will take you to a specified anchor on either the current page, or a different one.</a>

<a href="http://www.yourpage.com"> or <a href="mypage.com"> are links to take you to another page on the Web, or another page on the site. You can make the link become a new page by adding the attribute, "target="_blank, as in <a href="http://www.yourpage.com" target="_blank"></a>

<a href="mailto:[email protected]"> creates an email link from the site.</a>

</body>tells the browser that the page is now complete. Below this and before the </html> tag are the image maps and other such information.

</html> tells the browser that the HTML document is complete.

Back
The Best Reference Around - www.webmonkey.com
Return
Next - Tips