Personal Homepages Basic HTML Tutorial 2 - Your first web page Part 2

			HOME 	
			ARTICLES 				
			LIST NOW FOR FREE! 
			ABOUT US 
			CONTACT US 
			LOG IN			
		

Basic HTML Tutorial 2 - Your first web page Part 2
This tutorial will cover most of the basics in how to make your very first web page. HTML tags covered:

Go to Web Site

Tags covered in this tutorial: 

Open your index.html file that we started working with from the first tutorial and copy and paste this HTML code into your document:

<head>

<title>My Resume</title>

</head>

<body>

</body>

</html>

This will be our starting point for creating our next web page. Creating a resume is a good way to illustrate how some HTML tags format and style text.

Below is what we will be trying to achieve ...

Jason Rundell

123 URL.biz Drive

www.url.biz, World Wide Web, 216.22.36.55

Tel: 1-123-123-1234 Cell Phone: 123-123-1234 fakeemail@url.biz

PROFILE:	Experience in leadership and supervisory roles
	Attentive, loyal, organized, and self motivated
	Problem solving skills
	Easily adaptive to changing environment
	Experience in systems analysis, programming, server analysis, network installation, and trouble shooting
	Ability to deliver results in a timely and positive manner

Now I'll take you step by step through the tags involved. First let's type the header information into our text document:

<head>

<title>My Resume</title>

</head>

<body>

Jason Rundell

123 URL.biz Drive

www.url.biz, World Wide Web, 216.22.36.55

Tel: 123-123-1234 Cell Phone:123-123-1234 fakeemail@url.biz

</body>

</html>

Save this and then open the index.html file in a browser (preferably Internet Explorer). You'll notice that all of our body text is on one line and that the browser doesn't show the text how we have it in the text file. In order to make paragraphs and line breaks we have to use the and HTML tags.

Since we want all of our header information to be grouped together we will need to put it all in a (paragraph) tag. See below:

<head>

<title>My Resume</title>

</head>

<body>

Jason Rundell

123 URL.biz Drive

www.url.biz, World Wide Web, 216.22.36.55

Tel: 123-123-1234 Cell Phone: 123-123-1234 fakeemail@url.biz

</body>

</html>

When you save and preview your page you won't see any difference in your text, so why even use the tag? You'll see later how a tag puts a line of extra space after you close the tag. Plus, the tag allows use to use the "align" tag property so we can center all of our header information easily and efficiently. Let's do that now:

<head>

<title>My Resume</title>

</head>

<body>

Jason Rundell

123 URL.biz Drive

www.url.biz, World Wide Web, 216.22.36.55

Tel: 123-123-1234 Cell Phone: 123-123-1234 fakeemail@url.biz

</body>

</html>

Now everything within the and tags will be centered. Next, let's put line breaks so we have three lines of text instead of one:

<head>

<title>My Resume</title>

</head>

<body>

Jason Rundell 

123 URL.biz Drive 

www.url.biz, World Wide Web, 216.22.36.55 

Tel: 123-123-1234 Cell Phone: 123-123-1234 fakeemail@url.biz

</body>

</html>

Save your index.html file and now you should see a large difference in our resume web page.

Some browsers will not render the large spaces between our contact numbers and e-mail properly so lets use a special character that is always rendered properly as a full space in browsers, the character:

I used 5 characters for large gaps but you can use however many you like. To change your font size, color, or type you'll have to use the tag and it's properties. These properties are .

You can use any of these value for the size="" property: 1, 2, 3, 4, 5, 6, 7, +1, +2, +3, +4, +5, +6, +7, -1, -2, -3, -4, -5, -6, -7

For the face="" property I suggest using only these combinations:

face="Arial, Helvetica, sans-serif"

face="Times New Roman, Times, serif"

face="Courier New, Courier, mono"

face="Georgia, Times New Roman, Times, serif"

face="Verdana, Arial, Helvetica, sans-serif"

face="Geneva, Arial, Helvetica, sans-serif"

For the color="" property you can use any hex color code you wish. Example

I'll add all of the font tags all at once so you can see how they change our header text:

<head>

<title>My Resume</title>

</head>

<body>

Jason Rundell 

123 URL.biz Drive 

www.url.biz, World Wide Web, 216.22.36.55 

Tel: 123-123-1234 Cell Phone: 123-123-1234 fakeemail@url.biz

</body>

</html>

Save and preview. We're almost done! Now we just need to add bolding, italics, and underlining. This is all achieved with the , , and tags. It's fairly easy to remember: = bold, = italic, and = underline.

Below is the final code with the , , and tags added:

<head>

<title>My Resume</title>

</head>

<body>

Jason Rundell 

123 URL.biz Drive 

www.url.biz, World Wide Web, 216.22.36.55 

Tel: 123-123-1234 Cell Phone: 123-123-1234 fakeemail@url.biz

</body>

</html>

Your resume's header is now complete. Save and preview! That's it for this tutorial kiddies, the next one will be on making tables and we'll finish the second part of our resume - the profile. If you have any questions or comments on this tutorial please go to my web site's Contact (http://www.visexpert.com/contact.php) page and message me.