In this section I will show you alot of commands, so go over this carefully, but I'll explain each completely, so don't get intimidated by this example web page. Once you see it all in action you'll understand alot about making a web page. Example 2:
<html>
<head>
<title>Example for Page
2</title>
</head>
<body bgcolor="white" link="blue" vlink="green"
alink="yellow">
<center><h1>Welcome to my
Page!</h1></center>
<hr>
<p>Welcome to this sample website! I will be showing you how
to:
<ul>
<li>How to use ordered and unordered
lists
<li>What hr tag meansmeans
<li>What center command
does
</ul>
<br>
An ordered list
<ol>
<li>This is an ordered list
<li>See the difference between unordered and ordered.
Just a matter of numbers or
bullets.
</ol>
<p><font size="4" face="arial">This is to show you the different
size fonts and also the different faces you can use on your web
page.</font>
<p>To make a break you would use this command br<br>
A break is just one line down, instead of a paragraph you can just make a
line break<br>
<u>This will underline your
work</u><br>
<i>This will put your words into
italics</i><br>
<b>This is what bold looks
like</b><br>
<blockquote>
Blockquote will set this paragraph off from the other writing, it will indent
the paragraph and all the sentences until you turn off
blockquote.
</blockquote>
<font color="Blue">You can also change Color of the font with the font
color
command</font>
<br>
</body>
</html>
Now there are many commands that you are unfamiliar with that are shown in this example, but let's go through each one and I'm sure you'll start to see how easy html is.
Center command, well, that seems pretty obvious, it centers whatever is placed between the center tags. So if you want to center anything, all you do is put the information between two center tags. <center></center>
Heading tags <h1></h1> there are six tags, ranging from h1 (largest) to h6 (smallest). These are used for titles of pages or of certain areas you want to highlight. Always remember to close the h tags with the same number, so if you do an h1 make sure you close it with an /h1
The <hr> command will create a horizontal rule on the page. There are a few other commands that can be used with the hr command. One is the width command <hr width="300"> Now this will make a horizontal rule of 300 pixel in length, you can also use percentage of the page, like 50% instead of a pixel value like 300. You may also see this command, <hr size="8"> This will create a thicker horizontal rule. One last command is <hr size="8" noshade> This will create the horizontal rule to be shaded with grey. Now you can combine all these commands into one hr tag, like <hr width="300" size="8" noshade>
Ordered lists and unorder list, both appear in the example. Now the tags
used for an ordered list is <ol> then all the items you want to list
begins with <li>. Now with an ordered list, you will get numbers
next to the items that you list, 1, 2, 3, so on. This list that you
happen to be reading is created with the <ol> list command. Now,
if you should want to use roman numerals instead of 1, 2, 3, etc, you would
use this command <ol type="I"> this will create a numbered list that
will use roman numerals, I, II, III, etc. You may also use letters,
<ol type="A"> or <ol type="a"> Each will create a number list,
so to speak, like A, B, C, or in the case of the small a, it would be, a,
b, c, and so on. Be sure to close the </ol> tag, otherwise the
list wouldn't end.
<ul> is considered an unorder list, this just means that it will use
a bullet instead of a number. You start the tag by using <ul>
then you list the items just as you would in a order list, using
<li>. As with the ordered list, you can choose to change the
type of bullet that will be used. If you type <ul type="square">
will create square bullets, and <ul type="circle"> will create a small
circle with no center filled in. The <ul type="disc"> is the
one that the browser will use by default, but you can type it in if you wish.
As with the ordered lists, remember to close the </ul> tag.
<font size="4" face="arial"> is a new tag as well, let's see what this
does. The size can be a number from 1 to 6, 1 being the smallest, 6
being the largest. This allows you to change the size of the text.
The face command allows you to change the style of type. Now
this command is a little useful, but not entirely. You don't have much
choice in the type of font you use. This will tell the brower to use
arial type, which happens to be one font that most computers have, but if
you use a font that is only on your computer, the change will not be seen
by a person that doesn't have that font. The safe fonts are, Arial,
Helvetic are installed on most computers. So if you want to change
the face you can try using either of these. Later in the example I
showed how you can change the font color. You do this using this tag
<font color="blue"> Now this will change the text color to blue.
Once again, you may use the hex value for the color blue. Please
take a look at the color chart included in this website for some of the hex
values of different colors. Now you can combine all these commands
in one tag, <font size="4" color="blue" face="arial"> It doesn't matter
the order in which you use them. Remember to close the font tag with
</font> once you are done changing the section you want.
<br> will create a page break or a space of one on your page. This
is good to use if you want to organize the space of your page a bit. With
the <br> command you don't have to use a terminating tag of
</br> it is assumed and never used!
<u> is the underline command and will underline anything that you put
between the <u></u> tags.
<i> will Italicize anything put between the <i></i> tags.
<b> Will make anything put between the <b></b> tags bold.
<blockquote> Will indent a paragraph until you stop it with the terminating
tag of </blockquote>
Now that you've seen all the new tags, you may want to try some of these yourself. Open notepad, or whatever you may be using at the moment and try the various tags out. Experiment a bit with them and just take the time to learn them and how they work. If you would like to see what the sample html above looks like, click here. Now that you've become familiar with these commands, try them out, and experiment with them.
Once you're done with that try the next lesson, linking objects together.
html, webpage design, web page, web page design, html tutorial, html instruction, hypertext markup language, web site, html, webpage design, html tutorial, html instruction, hypertext markup language, web site