HTML Tutorial

HTML Basics

HTML (Hyper-text Markup Language) is the simple programming language created for the World Wide Web. It is written in and read from plain text files (.txt) differing only in that it uses a .html extension instead of .txt. The basic form of HTML com mands are as follows:

<center> Some text here </center>

 This text, when typed into an .html file and read by a Web browser such as Netscape, would have the effect of centering the text, "Some text here" on the screen. Note how the commands are enclosed in brackets and the closing command is pre ceded by a slash. Commands can be in lower or upper case.

As mentioned earlier, HTML files are text files. They can be created with a text editor such as the Unix editor, Pico, or Microsoft Notepad or with special Web authoring software. Either way, HTML files are straight unformatted text files and must have a .html extension.

We will first learn how to create a Web page with a text editor, Pico. After we're comfortable with the HTML commands, we'll look at how to create Web pages automagically with Word 97.

The basic form of the code for an HTML document is as follows:

<HTML>

<HEAD></HEAD>

<BODY></BODY>

</HTML>

The <HEAD> tags surround html code and text which effect the window and icon titles. The <BODY> tags surround the commands and text that will be displayed on the Web page itself.

 

Exercise 1: Beginning HTML

<HTML>

<!--

Practice Web Page

Created by (your name) (today's date)

-->

<HEAD>

<TITLE>(your name)'s Practice Web Page</TITLE>

</HEAD>

 

<BODY>

This page is under construction!

</BODY>

 

</HTML>

 

 

An Explanation of the Commands

Lets look at the HTML commands that you typed in practive.html and see what they do.

 

HTML Command HTML Command's Effect
<HTML> </HTML> Tells the Web Browser that everything in between is HTML code.
<!-- --> Surround's text which acts as comments and not actual HTML code. Provided to give information to people examining the HTML source code.
<HEAD> </HEAD> Identifies the heading portion of the code. The heading code is not viewable in the Web page itself but acts as labels.
<TITLE> </TITLE> Identifies the label to be placed in the title bar of the Browser window and other browser identifiers such as icons.
<BODY> </BODY> Identifies the part of code that makes up the body of the document - the part you can see in the browser window.

 

Viewing Your Web Page

Now we can view your HTML document using Netscape. Your URL is http://www.cs.fsu.edu/~your-user-name. The ~ (tilde) symbol tells the browser to look in your home directory for public_html/index.ht ml. Check out your new Web page.

Note how Netscape interprets what you wrote in index.html.

 

Viewing Source Code Using Netscape

Your HTML code will be displayed. Everyone has access to your HTML code through this menu item. The bonus is that you have access to everyone else's HTML code. This is what makes learning HTML so easy and creating Web pages such a popular pastime. All you need to do to make your Web Page look like other interesting Web pages that you find, is copy the HTML code from other peoples HTML source code.

Often times people will begin the creation of their Web page by finding a page with a style they like and saving the page (using File, Save As) to their own computer. Once saved, the file can be edited to represent its new o wner.

We'll discuss other forms of "borrowing" later. Now we'd better get back to work. Open index.html with Pico and let's add some more HTML commands.

 

Exercise 2: HTML Text Formatting Commands

<BR> No Heading

<H1> Heading 1: The Largest, Boldest Font </H1>

<H2> Heading 2: 2nd Largest Heading Style </H2>

<H3> Heading 3: 3rd Largest Heading Style </H3>

<H4> Heading 4: 4th Largest Heading Style </H4>

<H5> Heading 5: 5th Largest Heading Style </H5>

<CENTER><H1><I>

This Heading Is Centered and Italicized

</I></H1></CENTER>

 

HTML Command HTML Command's Effect
<H1> </H1> The biggest boldest font.
<H5> </H5> A much smaller font
<CENTER> </CENTER> Centers the text in the window
<I> </I> Italicizes the text.

 

Let's try out some paragraph formatting.

 

Exercise 3: HTML Paragraph Formats

HTML automatically wraps lines of text to fit the width of the Web Browser window. HTML ignores all space, tabs and carriage returns.

Here is an example of how HTML ignores all spacing and carriage returns:

Here is the first item in a list

This is the second item

This is the last item in the list

Written by Me

In 1997

At FSU

<PRE>

Here is an example of how HTML ignores all spacing and carriage returns:

Here is the first item in a list

This is the second item

This is the last item in the list

Written by Me

In 1997

At FSU

</PRE>

 

HTML Command HTML Command's Effect
<PRE> </PRE> Indicates that the text is preformatted and should be displayed in the browser window exactly as it looks in the .html file - spacing included.

 

<P>

Here is an example of how HTML ignores all spacing and carriage returns:

</P>

<OL>

<LI>Here is the first item in a list</LI>

<LI>This is the second item</LI>

<LI>This is the last item in the list</LI>

</OL>

<P>

Written by Me<BR>

In 1997<BR>

At FSU<BR>

</P>

 

HTML Command HTML Command's Effect
<OL> </OL> Creates a numbered ordered list.
<UL> </UL> Creates a bulleted unordered list.
<LI> </LI> Indicates a list item.
<P> </P> Indicates a new paragraph - inserts a blank line.
<BR> Break - same effect as hitting the Enter key to go to the next line. Does not require a closing command, </BR>.

 

A natural question at this point would be "Why use all of those HTML formatting commands when you can accomplish the same effect with PRE?" The answer is this: People view Web documents on a variety of different disp lays. Some use higher resolution than others. Others like a larger font size. Some like the browser window to fill the entire screen. Otheres like to use a smaller window size. When you write HTML code that uses PRE, your Web page is displayed identically in every browser window no matter what its size or settings. The main problem with this is that a smaller browser window size and/or larger font size will create the problem of your text being too wide to fit i n t he window - requiring the user to scroll right to view it. Also, PRE formatted text does not take advantage of larger windows and/or smaller font size.

It's best to use PRE only when you can't get the same preformatted effect by using HTML commands. This way you'll be taking full advantage of the power of HTML code - and your Web page will look better!

Let's add some color!

 

Exercise 4: Adding Colors

Your Web page should now have a yellow background with blue text. If your web page had text that acted as a link to other Web pages, it would appear in red.

Here's an explanation of each of these color object names:

The colors are indicated by hexadecimal numbers. To see what colors they represent check out http://fas-www.harvard.edu/~mabaker/colours.

Exercise 5: Adding Links

A Link is underlined, bold text on a Web page that, when clicked on, causes the browser to display some other local or remote file. Here's how to add a link from your page to some other Web page or local file.

<A HREF="http://www.fsu.edu">Click here to go to FSU's Homepage</A>

A local link will look in the current local folder for the specified file and open it. You can use local links to call up other .html files that you have created. For example, if you created a file named resume.html you could add the following l ink to it in index.html:

<A HREF="resume.html">Click here to see my resume</A>

Links can also be to other types of files:

<A HREF="mypicture.gif">Click here to see my picture</A>

Since you don't have resume.html or mypicture.gif, we will not add these links to index.html.

Exercise 6: Wrapping It Up

 

For a great guide to basic HTML commands check out http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

Also see: Netscapes Main Menu for creating Net sites

 

Next lesson ....

Adding Pictures!!