A smattering of basic HTML tags

the most commonly used tags are

Paragraphs <p>
to create a paragraph and align it you use the <p> or paragraph tag.
<p align=center> will align everything until the end of paragraph tag is encountered </p>

Headings come in various sizes and are vertically spaced away from other text on the page to make them stand out. Headings can be aligned same as a paragraph.

 <h1> is the largest</h1> and

<h6 align = center> heading size 6 is the smallest</h6>
Pictures: images are placed on the page, and aligned using the <img> tag, which is a one-sided tag.
<img src=mydog.gif> will place mydog on the page. As with the paragraph tag, the image can be aligned, with the additional feature that if an image is aligned to the left or right, the text will wrap around it on the screen.

Links are placed on the page with the "anchor a hypertext reference" tag or < a href> tag.
to place a link on the page that says: visit the dog store which will take your visitor to the dogstore.com website when they click on the link, you would write:
<a href=dogstore.com>visit the dog store</a>
an image can also become a link, so that when you click on the picture, you link to somewhere else like this:
<a href=http://www.dogstore.com><img src=mydog.gif></a>
links can also be sent to email using a special format like this:
<a href=mailto:info@nazarethacademyhs.org>send email to Nazareth</a>

Horizontal Rules

The following HTML code:

<html>
<head><title>CMST 385 Example</title></head>
<body>
Section 1
<hr>
Section 2
<hr>
Section 3
</body>
</html>

is displayed in your browser as:

 

Section 1
Section 2
Section 3

If you don't want the horizontal rule to go all the way across the page you can set a width in percentage or pixels:
<hr width=100> is 100 pixels wide
<hr width=10%> will fill 10% of the width of the screen, however big the screen is.

Text Tags
Surrounding text in your HTML document with the <b> tag outputs the text as bold. If you use the <i> tag, the enclosed text is italicized.

The following HTML code:

<html>
<head><title>CMST 385 Example</title></head>
<body>
<ul>
  <li><b>CMST 385</b></li>
  <li><b>CMST 386</b></li>
  <li><b>CMST 430</b></li>
  <li><i>CMST 450</i></li>
  <li><b>CMST 498F</b></li>
</ul>
</body>
</html>

is displayed in your browser as:

 

  • CMST 385
  • CMST 386
  • CMST 430
  • CMST 450
  • CMST 498F

Notice that the example above is also an example of nesting tags within other tags.

Text Size, Typeface, and Color 

We have seen how to format the content of an HTML document to display a particular way in a browser, such as using unordered lists and bolding. We have even seen how to change the size of the text by using the header tags. However, the header tags will only display text in a particular size, typeface, and color, which are the default settings for your browser.

If you want more flexibility on how your output is displayed, you can use the <font> tag. The <font> tag allows you to change the size, typeface, and/or color of selected text in your HTML document. To do this, you need to use three attributes with the <font> tag:

You can use these attributes alone or in combination with others.

Size: The size of the text can be expressed in seven sizes: 1-7. Seven is the largest and one is the smallest, which is the opposite of the header tags.

Face: The typeface is the style and shape of your text. You can specify any typeface in your HTML document as long as the person who is viewing the document has the typeface loaded on his or her computer.

Color: There are two ways to specify color, with a name and with a hexadecimal equivalent. You will learn about hexadecimal in CMST 386.

The following HTML code:

<html>
<head><title>CMST 385 Example</title></head>
<body>
<font size = "1" face = "arial" color = "red">CMST 385</font></br>
<font size = "2" face = "courier new" color = "blue">CMST 386</br>
<font size = "4" face = "vernada" color = "yellow">CMST 430</br>
<font size = "6" face = "helvetica" color = "green">CMST 450</br>
<font size = "7" face = "times new roman" color = "brown">CMST 498F
</body>
</html>

is displayed in the browser as:

CMST 385 
CMST 386
CMST 430 
CMST 450
CMST 498F

You can change the background color of you page by adding the bgcolor option to the body tag of your webpage like this: <body bgcolor=green> or any other common color name