Introduction to HTML

Objectives

This document teaches you to:

• Understand the basic structure of an HTML document.
• Create an HTML file and save it to your student storage space or other media.
• Display your HTML file using a web browser.
• Modify the file using a text editor.
• Save and display the modified file.
• Send the file as an e-mail attachment.

What is HTML?

HTML is a computer language used to tell a web browser what to display. A document written in HTML is a web page. “HTML” stands for HyperText Markup Language. “Hypertext” is text referring to other text. In an HTML document, it is a link in one document that leads to another document. “Markup” is information in an HTML document that tells a web browser how to display its content.

We will address links in HTML in due course. Right now we will explore creating an HTML document that displays text with minimal formatting.

Some Background about Web Pages

Web addresses

Web pages are usually documents accessed over the World Wide Web. The documents reside on computers known as servers throughout the world, and are accessed by their Universal Resource Locator (URL), or web address. The URL consists of a domain name followed by a path.

Deconstructing URL’s

The domain name, which ends in “.com,” “.edu,” “.org,” “.net,” etc., is a registered identifier referring to a specific web location. The path part of the URL specifies the folders and subfolders at that location that contain the documents that make up the web site. For example, the main page for this tutorial is located at the domain “barransclass.com” inside the folder “htmlsn”. The name of the main page is “lessons.html;” hence its URL is “http://www.barransclass.com/htmlsn/lessons.html.” The file you are reading now is in the same folder, but its file name is “introtext.html”. Its URL, consequently, is “http://www.barransclass.com/htmlsn/introtext.html.”

About HTML Documents

Viewing web pages

Although an HTML document can have sophisticated formatting when displayed by a web browser, the file itself is plain text. You can create your own HTML document, or modify an existing document, using a simple text editor.

When you access a web page, your computer downloads a copy of the page from the remote server and stores the copy in its own memory. Your web browser then follows the HTML instructions in the page to display its content. If you edit the web page, only the copy on your computer is changed. The document on the remote server is not affected. Special passwords and protocols are needed to upload and edit documents on remote servers.

Viewing HTML source code

You can examine the text of any HTML file by using the “View Source” option of any web browser. In Internet Explorer, click the “Page” tab on the menu bar and select the “View Source” menu option. The browser opens a new window in which the plain text of the HTML document is displayed. (Try it right now!)

What’s in HTML Source Code

HTML files contain two basic classes of information:

1. Text to be displayed by the web browser, and
2. Commands telling the browser how to display text, access information, and navigate to other files.

Text consists of the basic characters: letters, numerals, and some symbols. Some special characters and symbols that are reserved for HTML commands can be displayed by web browsers specified by character strings, known as entities, beginning with the “&” symbol and ending with a semicolon “;”. For instance, the multiplication symbol “×” is specified by the entity “×”.

Commands are in the form of tags: text enclosed by angled brackets “<>”. Tags are often, but not always, specified in pairs: one tag to begin some particular condition, and one to end it. For example, the tag “<p>” is used to begin a paragraph, and the tag “</p>” is used to end a paragraph. So, the text “<p>This is a paragraph.</p>” is displayed by a web browser as

This is a paragraph.

Tags are used for most commands in HTML, including text formatting, identifying specific types of information, and specifying hypertext. We will address the most significant uses in due course.

Creating and editing HTML code

If your browser displays the HTML text in a window from which it cannot be directly edited, you can simply copy the text from that window and paste it into any plain text editor. (Microsoft Word can be inconvenient for this purpose, as it tends to add formatting to its files. You don’t want an HTML file to be anything but plain text.) More detailed instructions on how to do this appear later in this document.

Web Pages Off-Line

Any HTML document located on your computer can be interpreted and displayed by a browser, just like any web file. It merely is not on the Web for worldwide access by other computers.

Make Your Web Page

With that introduction, it’s time for you to experience the thrill of making your very own HTML document. Follow these directions to begin your web authoring career.

Download an HTML document shell for editing

Right-click on this link to a blank HTML file and select “Open in New Window” to access a very simple web page. The page is so simple that it looks completely blank. This is a good thing, because it will be easy for you to place your own text into the file. From the new blank window, select the “Page” button, then from the resulting drop-down menu, select “View Source.” The window that then comes up displays the actual HTML text of the file.

Previous versions of Explorer opened this file with the application “Notepad,” which was able to directly edit the text. The version of Explorer now installed on the student lab computers may simply display the file without letting you do anything with it. You can work around that minor inconvenience, however. Here’s how.

1. Place your cursor at the top left of the text in the file and drag down to the bottom right of the text. This selects the entire text of the file.
2. Hit CTRL+C or drag Edit → Copy to copy the text to your “clipboard.”
3. Create a new text file to receive the text. To begin, open a plain text editor. If you are using the student lab computers, I recommend “Notepad.” If you are using another computer, find the most bare-bones “plain vanilla” text editing program you can. To open Notepad on the student lab computers, click on the four-part Microsoft icon at the bottom left of the screen, then select All Programs → Accessories → Notepad. (If that does not work, ask the lab attendant how to find a plain text editor, because your evil science teacher wants you to use Notepad.) Opening the editor should create a blank text editing window.
4. Position your cursor in the new text editing window and paste the copied text by hitting CTRL+V or dragging Edit → Paste. The HTML text should now appear in the new text editing window. I will hereafter refer to this window as the source window.
5. Name and save your new file. To do this, drag File → Save As…. Navigate the save window to the location you desire: on your student file space, or on your own portable medium (such as a jump stick). You may need to click on the “browse folders” icon to see where you are going. For the file name, choose something like your name; make its extension “.html”. (My assistant might choose to name his file “Albert.html”.) In the “Save as type” field, select All Files.
6. Leaving the source window open, close the blank browser window. Also close the “original source” window from which you copied the source code. (I tell you to do this because the browser window is still displaying the on-line version of the file. When you edit the version you have saved, changes will not be seen there.)
7. You are now ready to edit the source file!

Enter some text

Your file, whose text is displayed in the source window, already contains a little formatting information. Note that there are empty lines between the <body> and </body> tags; this is the “body” of the file, where text to be displayed in the browser window belongs. You will create a paragraph in this space.

To tell the browser to create a paragraph, type “<p>.” Then type “Hello, World, this is ” and your name. Follow this by “</p>” to tell it to close the paragraph. So, your file should contain the line

<p>Hello, World, this is [your name].</p>

Title the file

Between the <head> and</head> tags is the “head” of the file, which contains information about the file. In this section is the pair of tags “<title></title>.” Between these two tags, type a title for your file (your name, for example). For example, my assistant’s file would contain the line

<title>Albert's first HTML file</title>

This title will normally be displayed by a web browser at the top of its display window, or in its tab label.

Save your new file

Save the file by File → Save or CTRL+S. This records the changes you made to it.

View your file

Open your student account space or your private storage device to find the file you saved. Double-click on its icon, and it will open in your web browser.

The changes you made to the file should display in the browser window. The paragraph you wrote should be in the window itself, and the title should be at the top. You are looking at the HTML file you created!

Modify the file

Add or delete some text within the paragraph in your source window. Save it. Refresh the browser window. The browser window display will update to reflect the modification you made to the HTML file.

Add another paragraph to your HTML file. (Enclose the paragraph text between <p> and </p> tags.) Save it and refresh your browser window again to display your new paragraph.

Send Me Your Web Page

Probably the best way to do this is to upload your file to the Sakai drop box. From the course site on Sakai, click on the “Drop Box” link in the “Course Tools” box in the left margin of the page. This opens the drop box page. Select the “Add” menu and choose “Upload Files.” Select the HTML file you just saved, and a copy will be loaded to the drop box for me to see.