logo

Home
About The Artist
Web Design
Web Design 2
HTML Reference
Graphics for the web
Contact Me
Sams Teach Yourself Web Publishing with HTML and XHTML in 21 Days
Sams Teach Yourself Web Publishing with HTML and XHTML in 21 Days
newspot_120x120.gif

Develop your very own custom look and feel using HTML

If you want maximum control of your Web page design you will have to learn how to use HTML. I'm not here to argue that point, nor should this site be considered an in depth study of HTML. There are plenty of books and many Web sites that do just that, however if you are looking for a jumpstart, this is the place. Where you take it from here is entirely up to you.

Basic Elements of Web Page Structure
Web Page Layout

Using HTML 4.0 for page layout gives plenty of control and helps with multiple browser compatibility. Web site designs include multiple page levels, and frame sets that enhance your navigation systems.

Tables can be added to control text and images. The use of forms will enable you to accept input from your visitors.

JavaScript can be used to further enhance form handling and add more interactivity.

And finally my favorite the use of graphics this includes clickable imagemaps, custom navigation buttons, standalone graphics, and much more.

Let's get started

This information is provided as an entry-level introduction to HTML. It is intended to be interactive allowing you to stay online as you go through each exercise. You are free to use the code where specified in blue without any obligation. You should also have the following.

  • A general understanding of how to use your Web browser
  • Windows Notepad for text editor, do not use a word processor (more on this later)
  • You need to know how to store and manipulate files and folders on your PC

Step 1, How to copy and paste HTML

HyperText Markup Language or HTML documents are plain-text files. They are created using a text editor. You can use a word-processor if you save your document as "text only with line breaks" but I recommend Notepad for learning the basics. You should also know that it is the HTML that will format your document. A browser is required to view a Web page, and it will ignore carriage returns and white spaces.

Begin by clicking Start/Programs/Accessories/Notepad, then minimize the Notepad window. This will create a button at the bottom of your screen named Untitled-Notepad. Select the blue code below by holding down the left mouse button and dragging across the text, then right click and copy. Click your Untitled-Notepad, then right click anywhere in the new window and paste. Save your document with a name and extension of .html like this "master.html", and minimize.

<html>
<head>
<title>my first page</title>
</head>
<body>

</body>
</html>

 Web Page Layout

Step 2, Adding content to your documents

Now you have an HTML document. Use it as a template each time you make a new page, it contains the minimal Markup Tags required to display elements in your browser. Here are a few things you need to know about HTML tags.

HTML tags mark the elements for your browser by surrounding the elements they affect, or in other words everything between the opening and closing tag. For example <body>content</body> note the addition of a forward slash that precedes the name on the right tag, this is a closing tag. Most but not all tags require a closing tag. A tag may contain plain text, other nested tags or both, however you must close any nested tag before closing the tag it is nested within.

Let's add some content, currently your page is empty (nothing between the body tags). I left a space so you could copy and paste this code there. The first tag is a Heading, the second a Paragraph, the third a Bulleted List, with the fourth tag for List Items, nested within it. This time after pasting, edit your document by replacing with your text where specified. Be sure to save your changes and then minimize.

<h1>replace with your text</h1>
<p>replace with your text</p>
<ul>
<li>replace with your text</li>
<li>replace with your text</li>
</ul>

Step 3, View your work in your browser

To do this you must know where your document is stored, no problem right? Good, the instructions here are for Internet Explorer but they should be similar if you use a different browser. To open your page, click File/Open/Browse.. find your file, double click it, and then click OK, this should display your document. You can then use the Back button to return here.

Was that simple are what? Now your page is not actually on-line because that would require that you upload it to a server, and I will show you how to do that later. You can use this process to test your documents as you develop your skill, and this technique works off-line as well. If you're hungry for more HTML, check out the HTML Reference or if you're ready I will show you how to use tables to help lay out your Web page Web Design 2

© 2000-2002 ilinkdesigns.com. All rights reserved.