This tutorial will introduce you to the basic tags used in HTML and several of the attributes that can be used with them. Using a common text editor such as Notepad or Wordpad you will be able to maintain text information in your own HTML pages and create new pages using a template. Since this is very basic HTML, it is recommended that you use a professionally designed template for the general layout of your new pages and insert your new content within them.
We will not cover images in this document since they introduce a more complex set of variables that involve resizing them to fit the layout, compressing them for the web and uploading them to the proper directories. We will cover images in another issue.
In each section below will be the explanation just below that you will see the example of the HTML as seen by the browser in your document. Immediately below it in large green text will be the html code as it appears when editing the page with a text editor.
HTML Basics
Headings
A heading tag will automatically put a space above and below itself. We often start with the h3 heading tag because starting with an h1 would make it too large for our page design. So subsequent heading tags would be h4 and h5.
H1 Heading
<br /> <h1>H1 Heading</h1> <p>
There are several heading tags each a bit smaller than the one preceding it. H1,H2,H3,H4,H5,H6.
H2
<br /> <h2>H2</h2> <p>
H3
<br /> <h3>H3</h3> <p>
H4
<br /> <h4>H4</h4> <p>
Line Breaks
This is a standard paragraph. It is enclosed by paragraph tags on both sides. The text inside will wrap until another paragraph tag is encountered. This is the most common type of element in html. Its not manatory to close the paragraph tag everytime.
<p>A paragraph enclosed by paragraph tags on both sides.</p> <p>
If you want to put a line break or you will need to insert a break tag. It will be single spaced, not double like a paragraph tag.
The text after a break tag will start on the next line, like this line did.
first line <br> next line
Comment Tags
Comment tags…
Lists
When you want to insert a bulleted list you use the following code:
- The ul tag stands for unordered list
- The li tag defines a list item, which will be bulleted
- You can also make ordered lists, which are numbered
</p> <ul> <li>The ul tag stands for unordered list <li>The li tag defines a list item, which will be bulleted <li>You can also make ordered lists, which are numbered </ul> <p>
- This is an item in an ordered list
- It is automatically numbered by the browser
</p> <ol> <li>This is an item in an ordered list <li>It is automatically numbered by the browser </ol> <p>
- This item is the Term in a defined list
- A defined list has a term and a definition.
- This is another term
- This is another definition.
</p> <dl> <dt>This item is the Term in a defined list</p> <dd>A defined list has a term and a definition. </p> <dt>This is another term </p> <dd> This is another definition. </dl> <p>
Colors
Colors are defined as a hex code. They always have 6 characters. There are hundreds of possible colors (depending on the display of the user). Here are some commonly used on our site.
| #ffcc00 = golden yellow | #ffcc00 |
| #000000 = black | #000000 |
| #000080 = navy | #000080 |
| #ff0000 = red | #ff0000 |
| #ffffff = white | #ffffff |
| #0000ff = blue (vivid) | #0000ff |
| #f5f5f5 = off white | #f5f5f5 |
| #e9e9e9 = light gray | #e9e9e9 |
| #dddddd = med gray | #dddddd |
For a full list of web colors see the Visibone Color Lab
Colors can also be applied to fonts within a font tag. Like this in Fuschia.
<font color=”#FF00FF”>Like this in Fuschia.</font>
The horizontal rule tag adds just that:
<hr>
This rule is fancy with several attributes added:
<hr noshade size=”3″ width=”75%”>
This is the code to add an email link:
Send us an email at custserv@domain.com
Send us an email at <a href=”mailto:custserv@domain.com” mce_href=”mailto:custserv@domain.com”>custserv@domain.com</a>
To add a regular hyperlink to your text surround it in the anchor tags. Dont forget to close this tag, its critical.
<a href=”http://domain.com/index.html” mce_href=”http://domain.com/index.html” target=”_top”>Go to Index</a>
The link can be an absolute, where the full URL of the page is used, as above. Or it can be a relative link depending on if the current page is in the same directory as the linked to page. Assuming this page is on the same directory as the linked page the link below can be used.
Go to the index page
<a href=”index.html” mce_href=”index.html” target=”_top”>Go to the index page</a>
Formatting Text
Most newer browsers support the use of the div tag, which allows us to center, align left, align right and justfy our text. The center tag has been used for years and is still used on many pages. A paragraph tag can also be used with the align attribute to align the enclosed text. Here are a few examples:
<br /> <div align=”center”>This text is centered with a division tag.</div> <p>
This text is centered using the old fashioned center tag.
<center>This text is centered using the old fashioned center tag.</center>
This is aligned right with the paragraph tags.
<br /> <p align=”right”>This is aligned right with the paragraph tags.</p> <p>
<br /> <div align=”JUSTIFY”>This is justified using the div tag….</div> <p>
To change the empasis on a piece of text you can bold it as we did above, italicize it or make it larger or change the color.
Any text can be bolded by placing the bold tags around them. Like this for example.
<b>Like this for example.</b>
Italicize by putting the i tags around the text.
<i>Italicize by putting the i tags around the text.</i>
Make text larger by placing a font tag with the size attribute defined. On our site we deal with size in relative terms, meaning that we have define the font as a +1 or -1 or -3. 0 would be the browsers default size for the font. We dont set an attribute to 0 since its default.
You must always enclose your text with opening and closing font tags, otherwise you apply that font to the rest of your page if you leave a tag unclosed.
This font is altered to be +1.
<font size=”+1″>This font is altered to be +1. </font>
This is -1. This is a no brainer, right?
<br /> <font size=”-1″>This is -1. This is a no brainer.</font>
Tables
Tables are a little more complex. Say you want to place a set of text or numbers in a small table in your page. The table below is simple. It has an opening table tag, which can have many attributes optionally added to it. Next is the tr tag which begins a table row.
Within the Table Row tags you see Table Data tags which define the “cells” like in Excel. The table below has 3 cells in each row. The first cell in each row happens to have the letters a and b.
The second cell in the first row has the number 1 and the second cell in the first row has the number 2.
The numbers 3 and 4 are in the second row. All Table Data tags (cells) must be closed or you have a big layout mess. Finally at the end of each Table Row you have a row closing tag and at the end of the entire table you have the table closing tag, these are also critical.
| a | 1 | 2 |
| b | 3 | 4 |
</p> <table> <tr> <td>a</td> <td>1</td> <td>2</td> </tr> <tr> <td>b</td> <td>3</td> <td>4</td> </tr> </table> <p>
The above table has no optional attributes defined so it is diplayed in your browser in its default state. Older browsers will but a border around your table and it will look like a spreadsheet grid. You can control the border by adding that attribute as in the table below. The attribute for border is placed “inside” the opening table tag. A border of 2 is a fatter line border than a 1, obviously.
You can also control the width of the table as a percentage of your screen (whatever it is for the user), or as a fixed number of pixels. This can get complicated when you have alot of data inside your table.
| a | 1 | 2 |
| b | 3 | 4 |
</p> <table border=”1″ width=”50%”> <tr> <td>a</td> <td>1</td> <td>2</td> </tr> <tr> <td>b</td> <td>3</td> <td>4</td> </tr> </table> <p>
You can center the data inside your table by adding the align attribute to the tr (row opening tag) that you want to affect. This will center all the text in that row.
| a | 1 | 2 |
| b | 3 | 4 |
</p> <table border=”1″ width=”50%”> <tr align=center> <td>a</td> <td>1</td> <td>2</td> </tr> <tr align=center> <td>b</td> <td>3</td> <td>4</td> </tr> </table> <p>
You can also add a background color to your table by adding the attribute to the table tag. Adding the bgcolor attribute to the tr (row) you set a background for just that row. The table below has one color for the whole table (silver) and another for the first row (lime). You can do it for one cell by inserting the bgcolor attribute into the td (cell) tag, as we did for cell #4 below (teal).
| a | 1 | 2 |
| b | 3 | 4 |
</p> <table border=”1″ width=”50%” bgcolor=”#c0c0c0″> <tr align=center bgcolor=”#00ff00″ > <td>a</td> <td>1</td> <td>2</td> </tr> <tr align=center> <td>b</td> <td>3</td> <td bgcolor=”#008080″>4</td> </tr> </table> <p>
Template Files
Let us create a set of professionally designed templates for your site. You can edit your own pages from any web browser, when you host with us via our online file manager. Contact us for more information.
