Webpage Structure
Below is the basic structure of a html webpage. The words contained between the < > are called tags. All html pages have these tags at the very least. Tags follow this structure Title Of Your Website Here
Body Of The Page Here
There are more tags you can use to make your page look better. If you just use the above and filled the body with content it would be very hard to read.
Below is the same page but filled out a bit with background color, a table and a header added. Background color is contained within the opening body tag . Table structure is as follows
. The tag
is for table row and the tag
is for table data. You can then add in the table alignment eg. Left, center or right, any background color you want the table to have and the border and cell padding values. Play around with this to see how different values change things.
Title Of Your Website Here
is optional, unlike the end tags for elements like headings. For example:
This is the first paragraph.
This is the second paragraph.
Adding Lists To Your Pages
You can create several types of lists with html.
The first type is a bulleted list, often called an unordered list. It uses the
and
tags, for example:
list item number one
list item number two
list item number three
You always need to end the list with the
end tag, but that the is optional.
The second type of list is a numbered list, often called an ordered list. It uses the and
tags. For example:
list item number one
list item number two
list item number three
Like bulleted lists, you always need to end the list with the
end tag, but the end tag is optional.
The third type of list is the definition list. This permits you to list terms and their definitions. This type of list starts with a
tag and ends with
Each term starts with a
tag and each definition starts with a
. For example:
the first term
its definition
the second term
its definition
the third term
its definition
The end tags and
are optional.
Lists can also be nested, one within another. For example:
list item number one
list item number two
first nested item
second nested item
list item number three
The fourth type of list is a Directory list For example:
[dir]
• red
• blue
• green
[/dir]
Other HTML
To add emphasis use or bolding
- Strong emphasis does the same as bold.
or Creates a line break.
Because the tag has no end tag (or closing tag), it breaks one of the rules for future HTML (the XML based XHTML), namely that all elements must be closed. Often you will see the tag written like this:
- Long quotes.
- Form Block.
- Creates a box to enter text. Example of Textarea:
[form][textarea]Write here.[/textarea][/form]
- Creates a scrolling menu.
- Creates items to select.
Example of "Select and Option":
[form][select][option]red[/option][option]blue[/option][option]green[/option][/select][/form]
- Menu list.
- Change the font to Italic
Conclusion
So, here ends this Fireball Basic Web Skills Course. I hope you are better educated in the technical aspect of this internet marketing business. These skills that we have covered here are very basic, but they may be all you will ever need to know. Of course, once you have mastered these skills you will probably find that other skills are easier to learn.
Example of Clickable Image Links:
Example of PHP Redirect Link:
Change the information in red to your own and type the code below into a blank new file and name with a php extension.
Example of HTML Redirect Link:
Change the information in red to your own and type the code below into a blank new file and name with a html extension