Create a Site with HTML

Basic HTML Page

Tag Structure

All HTML tags use the same basic structure. All tags are made up of words inside of brackets like these: < and >.

Almost all HTML tags come in sets of two.
There is an open tag and a close tag. The close tag always contains a forward slash: <tag></tag>
There are very few exceptions to the two tag rule.

Case

HTML code is not case sensitive.
<TAG></TAG>
<tag></tag>
<Tag></Tag>

All of these code examples would produce the same result.

Basic Page Code

The basic code for a web page is shown below.
<html> <head></head> <body></body> </html>

The head section of a document is defined between these two tags. <head></head> The head section provides information for browsers and search engines.

I'm going to cover the head section of a web document in a later lesson. For now I'll concentrate on the body section of the web page.

The body section of the document is defined between these two HTML tags: <body></body>

This is where the code is placed that makes the text and pictures of your web page appear in the browser.

Copy this block of code and paste it into your text editor:
<html> <head></head> <body></body> </html>

Save the page in your htdocs folder as firstpage.html.
Be sure to use the 'Save As' function and save it with the .html extension.
Be sure to save it in your htdocs folder.

Now open your browser. Use the File function and navigate or browse to your htdocs folder. Open firstpage.html in your browser.

You should see a blank screen. If you see code, you saved the page with a txt extension. Go back and open the page and resave it with the .html extension.

If you got the blank screen, you are almost ready to proceed to the next lesson.

Note: After you look at your web page in the browser, don't close it , just minimize it. When you save your next change, bring the browser up by clicking its tab on the bottom of the desktop. Right click inside the browser window and click Refresh or Reload to see your changes. You don't need to open and close the browser every time.

Doctype

The doctype is placed at the very top of the page before the opening HTML tag. I won't go into detail about what is does, it's just too technical for this little tutor. It does need to be there for W3C compliance.
Here's the one we'll use. There are others that you can use but this one will suffice for this little site.

Copy this code and paste it into the very top of the web page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Then save your changes.

Take a short quiz on the information you just learned.

Now, let's add some columns

Free Business Web Hosting

If you are building a website for a business or organization, you can put it online for free at Microsoft® Office Live Small Business. You can create your website with HTML and upload it or use their tools and build it online. Take your business online with Microsoft® Office Live Small Business. Get started for FREE! Take the TOUR!

Create Web Sites without Learning Code

Create web sites online without learning any code using Yahoo's simple but powerful Site Solution builder.
Try the Site Solution Demo

Sitebuilder 2.6 is even better than previous versions of Yahoo's downloadable builder. Download it to your PC and create a web site with all the bells and whistles.

Start today and SAVE 25% on your first 3 months.

Get everything you need for a great web site with Yahoo! Web Hosting - 25% off

Property of
Net Success 2000 Plus Inc
Po Box 1508
Somerset KY 42502
Last Modified: September 13, 2008

Home

HTML Tutor
Beginner
HTML Basics
Add a Heading
Add a Paragraph

Intermediate
Phase I
Getting Started
Basic HTML Page
Creating Columns
CSS
Color
Headings
Images
Paragraphs
Site Heading
Linking

Advanced
Phase II
Start Phase II
Editing Pages
Change Appearance
Summary

Helps
Tag Glossary
Finished Code
Image Download
Color Tool
Hex Code Chart
Free Web Templates
Free Heading Graphic
Free Backgrounds
Put It on the Web
Quizzes
Your Questions

HTML Editors
Overview
NoteTab Light
Webbuilder

Online Builder Tutorials
Soholaunch
SiteReptile
SiteSTUDIO

Other Helps
Flash Web Sites