Basic HTML Guide

 

To create a web page you will need to know basic HTML programming.

HTML programming is quite easy once you learn some simple rules and tools. This is a guide to the basics of HTML and some basic code to create things such as links and show pictures on your page.

Files:

A webpage can have several different file extensions, this guide will only cover the .html extension. There are several programs that are designed to create web pages, but for this guide we will show you how to work with just plain text coding. All that is needed for this is a plain text editor.

The plain text editor described in this guide is Notepad. Notepad comes with Windows and can be found by clicking on Start > Accessories > Notepad. However any plain text editor on any type of computer will work.

Basic Code Rules:

There are several basic rules when coding in HTML. The file names are case-sensitive.  This means that a "P" is different than a "p" and so on.  So when writing your code you will need to pay specific attention to the case.  Most web programmers only use lower case for everything to save on confusion.

All HTML commands are wrapped in < >signs.  This helps the HTML interpreter distinguish the code from actual text on your page.

All "open" commands must be followed with a closed command.  The item in between the command is what the command will manipulate.  The actual closed command is preceded with a/  this keeps the HTML interpreter from thinking it's another open command.

Examples of basic HTML code:

Code: Explanation: Example:
<html> This code needs to be at the top of each of your pages.  The closed version will be the very last tag on your page.

NA

<head> This code tells the web browser that the information contained in it is part of the page, but not for display.  Special commands for the page such as JavaScript are placed in the <head> command.

NA

<title> This code adjusts the text that is displayed in the title bar of the visitors web browser.  This line of code is placed in the <head> code. <title>Welcome to my page</title>
<body> This code tells the web browser that everything within it is to be placed on the body of the page to be displayed for the user.

NA

<p> This creates a single page break.  No closed version of this is needed. This is some text.<p>
<a href=" "> This code creates a clickable link to another page or image on your website.  Specify the destination of the file you are linking to between the quote marks. <a href="http://www.google.com">
Click Here to visit Google</a>
<img src=" "> This code will display a picture on your web page.  This code does not need a closed tag.  Specify the exact file location between the quote marks. <img scr="http://support.airstreamcomm.net
/images/flag.gif">
<a href="mailto: "> This code will create a link on your website that when clicked it will open their e-mail with the address you specify.  To create a link to e-mail you, specify your e-mail address after mailto:and before the last quote mark. <a href="mailto:help@airstreamcomm.net">
Click Here to E-mail Airstream Communications Support</a>
*Remember all Commands have to be followed with the closed version of the command.  The closed command has a/in front of them.  See the previous section for more help with this.

Basic Syntax for common Code:

Following are examples of pieces of code to use on a web page, a brief explanation of what they do and an example.

Open/Closed:

<title>This is my page title !</title>

<title> This is the Title command.  It is "Open" now.
This is my page title ! This is the text the Title command will manipulate.
</title> This is the Title command in it's "Closed" state which means anything after this will not be considered part of the Title.

Basic Website:

 Below is an example of a basic webpage for you to try.

Open up your plain text editor, such as notepad, copy and paste the information below into the program and save the file as index.html on your desktop. Then upload it to your account via FTP.

Once there you can view your website by opening your web browser and typing the following address: http://www.airstreamcomm.net/~username(where username = your username).

Copy the following into your text editor:


<html>
<head>
<title>Welcome to my first web page !</title>
</head>
<body>

Welcome to my very first website.<p>

<a href="http://www.google.com">Click here to visit Google.com, it's a great search engine.</a><p>

Now that I know the basics of web coding, I will be updating this page in the near future, please stop back.

</body>
</html>