Basics of HTML
Part II













In this section I will show you a lot 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 a lot 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 means
      <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.
  1. 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>
  2. 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
  3. 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>
  4. 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.
  5. <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.
  6. <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.
  7. <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!
  8. <u> is the underline command and will underline anything that you put between the <u></u> tags.
  9. <i> will Italicize anything put between the <i></i> tags.
  10. <b> Will make anything put between the <b></b> tags bold.
  11. <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.