HTML Tutorial

Getting Started
  This tutorial will guide you how to write your own web pages by using HTML. You do not need any exceptional what-you-see-is-what-you-get (WYSIWYG) HTML editor to use this guide, any old text editor will do just fine (i.e: notepad)

 

By learning HTML, you will have much more control over how your web pages look, and you’ll more easily learn ways to make your web pages look even better. HTML is platform independent, which means that it can be written and viewed on any type of computer (Windows, Mac, UNIX/Linux, and any other!)

 

Because HTML is platform independent, you’ll need to save your HTML files in standard text format, sometimes known as ASCII. The easiest way to do this is use a program like notepad.exe in Windows, pico in Linux, and the like.

 

If you’d prefer to use a word processor like MS Word or WordPerfect to write your HTML code, you can do so, but you need to save your files as "Text" or "Text Only or "Plain Text"" You’ll see this option in a drop down box in your "Save As…" screen.

 

If you use a word processor and forget to save it as Text format, you’ll see only disjointed data when you try to view your page with a web browser.

 
index.html, the most important HTML file

 

When you hit www.nazcarpine.com, and your browser reads http://nazcarpine.com/, what file is loading? On almost all web servers, this file is index.html. When the web server sees "/" and no filename, it automatically looks for index.html. When no index.html is present, the browser will view all the files listed in the home directory.

 

Imagine a situation where you are making a web site of three HTML pages, the opening page (index.html), an about me page (aboutme.html) and a links page (links.html).

 
The Two Copy Rule

 

When you write your web site, you’ll need two copies:

  • One on your web host
  • One on your hard drive

 

There are two reasons:

  1. You need a backup (this is the obvious one).
  2. When you’re working on your site, you don’t work on it live! Imagine how silly it would look if a page changed every two minutes while you worked on it! But in some cases, if you are testing scripts you need to do it online.

 

When you work on the copy of your HTML pages on your hard disk, it’s called "editing the local copy." The copy on the web host is called the "remote copy." (Kind of like a remote control, controls something far away!)

 
The Most Common Mistake
One of the most common mistakes for new web designers is the urge to put the c: in links and images.  When you’re on the web, there is no c: to the rest of the world. When you start out, keep all your HTML files and images in one folder, and don’t use c: at all.

Quick example:

<img> loads an image into a web page. If you have a file called image.jpg, use the code <img src="image.jpg"> or <img src="folder/image.jpg"> (or in what directory it is located, use standard formatting to call the path) to load it, not <img src="c:My Documentswebsiteimage.jpg">

 

 

Click topic to view:

Getting Started

Working on Tags

Working on Headings

Working on Paragraphs

Working on Links and Images

More on Tags

Clean Code, Escape Codes and Comments

Working on Lists

Fonts and Colors

Tables

Adding Sounds

Frames

Meta Tags

Comments are closed.