HTML 101

HTML 101 - Lesson 2
http://www.suzroot.com

Helpful Books:
HTML Web Magic by Raymond Pirouz
HTML For Dummies by Deborah S. Ray and Eric J. Ray
Webmaster in a Nutshell by Stephen Spainhour and, Robert Eckstein
http://www.bookpool.com Great prices on technical books!

Helpful Sites:
- https://suzroot.tripod.com/myWebHelp/html.htm
- http://www.htmlgoodies.com

Formatting Your Web Pages
You created your sample web page, but it's not what you had in mind. Depending on the browser you're viewing it from, the background could be gray, and the text is the default Times New Roman. It's not what you wanted. Lets start with the page background. In the <body> tag add bgcolor="#FFFFFF" for example <body bgcolor="#FFFFFF">. You just told the HTML to make the page white. There are many other color choices, if you aren't using an editor Like Front Page where you can point and click on the color you like, you may want to visit www.VisiBone.com where you can either purchase a color chart, or use the free online Webmaster's Palette. They give you the specific number to use in your code. Instead of using color you can also use a picture for your background. <body bgcolor="#FFFFFF" background="images/bg.gif"> This will tile the picture across the page.

Text
You want more than Times New Roman? I would suggest sticking with either Times New Roman, Arial, or Verdana on the web. I usually use Arial. Most people have these fonts installed and the pages will show up as you've made them. If you want a specific header to be a different font, then I would suggest making it a graphic, specifically a gif. So back to the font - How do you get the font to show up? Add the tags. These tags surround the words you want to be affected.

Without font tags the text would appear

Hello world! This is my first web page!

Using Arial font i.e. Hello world! This is my first web page!

Hello world! This is my first web page!

Or you can choose the color of the font Hello world! This is my first web page!

Hello world! This is my first web page!

Or you can make the font bold and/or italic Hello world! This is my first web page!

Hello world! This is my first web page!

Or you can center, or right justify, or left justify and choose the size of the font. <center>Hello world! This is my first web page!</center>

Hello world! This is my first web page!

There are also tags like <h4></h4> that affect text:

Hello world! This is my first web page!

You can get a list of HTML tags in books like HTML for Dummies. Whatever tags you use, don't forget that if there's an opening tag there needs to be a closing tag and the tags need to stay in order. For example if you want Arial text that is italic, bold and centered this would be the proper order:

<center>Hello world! This is my first web page!  </center>

Hello world!

Center is applied, then italics, bold, and the font is applied... after the text the font, bold, italic, and the center is turned off. Don't mix up the order of the tags it can break your code.

You don't have to use font tags on everything, if you use CSS... but that's another lesson and there are some great tutorials at: http://www.htmlgoodies.com/beyond/css.html

How Do You Make A Hyperlink?
External Link
<a href="http://www.yahoo.com">yahoo.com</a>

yahoo.com

Internal Link: If the page is on your site
<a href="Lesson1.htm">HTML 101 Lesson 1</a>

HTML 101 Lesson 1

A Picture Is Worth A Thousand Words...
It's easy to add pictures to your web pages. However it's important to take into account that the pictures are on the Internet. Web Art has a different slant than main stream graphics. It's all about getting your page to load quickly and a huge picture will slow it down. I would suggest using either jpg's or gif's. Jpg's for photographic quality images, and gif's for images with less colors, like for text with drop shadow I would save the image as a gif as there are not as many colors needed. Where can you find pictures? Here are some links (to save pictures off the free sites, right click on the image and you can choose 'save picture as' and save the picture to your hard drive.

If you want to use an icon as a bullet point this is the code you would use...

Bullet Point 1

<img border="0" src="images/ladybug.gif" align="left" width="24" height="24" alt="Ladybug Bullet Point">Bullet Point 1

Most of the tags are self explanatory. Border is set at 0, src tells the page where to find the image (it's a good idea to put images into a image folder - it makes life easier.) align pushes the image to the left, right or center, width and height are the size of the image, and alt= is the text that appears when you mouse over an image. The alt tag is important in creating an accessible web page.

Do you have an image that you would like to make a hyperlink? Here's the code:

<a href="http://www.iconarchive.com/"><img border="0" src="images/flower.gif" width="32" height="32" alt="Flower"></a>

Do you want your image to have a border? Here's the code:

<a href="http://www.iconarchive.com/"><img border="1" src="images/flower.gif" width="32" height="32" alt="Flower with border"></a>

Note: As you set up your page you can leave yourself a trail of bread crumbs in the code. You can make notes throughout the HTML to remind yourself what section of the page you're looking at or whatever you need to be reminded of. These notes will remain hidden in the code, and not visible on the page. However if someone visits your page they can see your notes by viewing the source. (ie right click and choosing view source will open your HTML code into a notepad file) Try it with this page, you'll see a note at the top.

Tables
Tables can help you format your page. I have found that if you are using tables for formatting your whole page, 600 - 650 pixels are good to use for the table width if you want your page to be printable, and easy to see by all of the many different screen resolutions... Here's an excellent tutorial on tables http://www.htmlgoodies.com/tutors/tbl.html And here are some examples:

Table With No Border Set To Resize To 100% Of Browser
Note: All empty cells should have a #nbsp; aka a space in them or the cells will collapse. You can copy the text below from <table...> to </table> and paste it into notepad to check out how the table HTML works. Just paste the code anywhere between the <body></body> tags.

This is a table with no borders	suzroot.com

<table border="0" cellpadding="2" cellspacing="0" width="100%">
<tr>
<td>
This is a table with no borders
</td>
<td>
suzroot.com
</td>
</tr>
<tr>
<td bgcolor="#FF0000"> 
</td>
<td bgcolor="#0099CC"> 
</td>
</tr>
</table>

Table With Border Set At 600 Pixels

You can put a note in here... aligned to the top of the table cell.	Text can be in a cell by a picture too...

And a blank line here....
links links links	And you may have a story to tell down here. That you want aligned on the left margin and at the bottom of the table cell.

<div align="center">
<center>
<table border="1" cellpadding="0" cellspacing="0" width="600">
<tr>
<td bgcolor="#FFFF00" valign="top" width="297">
 You can put a note in here... aligned to the top of the table cell.
</td>
<td bgcolor="#C0C0C0" width="297">
 <img border="0" src="../../images/clouds.gif" align="left" width="135" height="90" alt="Clouds">Text can be in a cell by a picture too...
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" colspan="2" width="596">
 <hr color="#0099CC">
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" colspan="2" width="596">
 And a blank line here....
</td>
</tr>
<tr>
<td bgcolor="#0099CC" width="297">
 links
 links
 links
</td>
<td bgcolor="#FFCD9B" width="297" valign="bottom">
 And you may have a story to tell down here. That you want aligned on
 the left margin and at the bottom of the table cell.
</td>
</tr>
</table>
</center>
</div>

Whew! If you got stuck on anything or have questions e-mail me. Please let me know if any of this was confusing so I can make the tutorial easier for you to understand. Keep working on your web pages! Next time we'll talk about finding a web host and getting your site up and running on the Internet. If you want to be removed from this HTML tutorial mailing list, please send an e-mail to nikolaisen@yahoo.com with the subject HTML 101 UNSUBSCRIBE. These lessons will be posted at: https://suzroot.tripod.com/myWebHelp/webDesign.htm

Suzanne