View - Download Basic HTML 1 - University of Delaware

Previous PDF

Next PDF

Basic HTML 1

Information

Technologies

October 2003

Copyright © 2003 University of Delaware. Permission to copy without fee all or part of this material is

granted provided that the copies are not made or distributed for direct commercial advantage or profit

and that the material duplicated is attributed to Information Technologies, University of Delaware. To

copy otherwise or to republish requires specific permission and a fee.

Basic HTML 1

Overview

This class introduces you to HTML (HyperText Markup Language), an easy-to- learn language for creating and formatting documents for the World Wide Web. Web documents can include text, images, animation, sounds, and more.

Prerequisites

To take this class, you must have experience using a browser (e.g., Int ernet Explorer, Netscape) to view documents on the Web. You must also know ho w to create and save text files using a text editor or a word processing pack age and have an active UNIX account. Note: This tutorial is designed to be used at the Pearson Hall Training Cent er (Room 116 Pearson Hall) on PCs running Windows XP. The exercises may n ot work identically elsewhere.

UNIX computer accounts

All University of Delaware faculty, staff, and students can obtain an ac count on the central UNIX server. This account is a privilege granted to you by t he University. You must act responsibly when you use it, or you can lose th is privilege. If you are uncertain about the proper use of computing resour ces, read a copy of the Policy for Responsible Computing on the University's web site

Conventions used in this document

The following conventions are used throughout the exercises in this docu ment:

Document Conventions

Item Convention Example

Keyboard keys UPPERCASE LETTERS ENTER

Text you can replace italicized letters filename

Text you type mixed-case letters gif

(typewriter font) All exercises are labeled as "Exercise" and are set off from the i nstructional text by horizontal rules.

Information Technologies 1

Basic HTML 1

Resources for learning more about WWW and HTML

There are many good online resources with information about preparing documents for the Web, including HTML tutorials, style guides, editors, and other tools. You can find many of them listed at http://www.udel.edu/ide acenter/.

Class objectives

In this class, you will prepare a document for the Web. When you complet e the class, you should: be familiar with the basic structure of HTML.� be able to recognize and identify HTML tags.� be able to create an HTML document that includes the following elements: • basic document-level tags • headings • paragraph and line breaks • lists • styles (bold, italics, etc.) • horizontal rules • images • hyperlinks

�be able to publish your document on a Web server using the SSH Secure Shell File Transfer program.

October 2003 2

Basic HTML 1

Introduction

HyperText Markup Language (HTML) is the language used to create documents for the World Wide Web. A markup language consists of characters or symb ols that you insert in a text file to indicate how the text should look when it is displayed or printed. A Web browser allows others to view your work; bro wsers retrieve Web information and format Web documents. Designing documents for the Web requires a shift in the way you think ab out presenting your material. When you prepare a document for the Web, you concentrate on the content and structure of your information rather than on how the information will look on the page (fonts, etc.). In fact, what you put on the Web may look very different on different computers. On the Web, it is the individual browser and often also the user that co ntrol what font will be used to display headings or text, whether something will be bold or italics, and so forth. So when you write text for the Web, don't worr y about what font you are using. Instead, think about the content of your document an d about the most effective way of structuring your message.

Planning your Web site

Planning your Web site ahead of time will help you stay organized and pr esent your ideas to your audience in the best possible way. It is helpful to s ketch your site on paper so that you have a visual image of how it will look. Each site begins with a home page that can lead to other pages, depending upon how much information you want to convey. Some helpful considerations in planning your site are 1. �What is your purpose for doing a Web page? What type of information do you want to provide for people? How can you best organize that informati on so that people will be able to find it easily? 2. �Who is your audience? How should you present your information for the audience you want to reach? Are they interested in quick facts? In getti ng instructions for registering for classes? In being entertained? Once you've identified your audience, you can decide what type of a W eb page will appeal to them. Is plain text appropriate or will your audienc e expect graphics, sound, and animation? Knowing your purpose and audience ahead of time will guide your decision s about structuring your Web site.

Information Technologies 3

Basic HTML 1

Setting up your Web directory

For people to see a Web site, its files must be placed on a Web server.

At the

University of Delaware, a UNIX Web server named "udel.edu" holds individuals' Web files. The "www.udel.edu" UNIX Web server hold s official University Web files. To allow the "udel.edu" server to find your

Web files, you

must place them in a directory on your account on Copland called "pub lic_html." If you have never created a public_html directory, follow the directions below to do so.

Exercise 1: Setting up a public_html directory

1. �In the Applications folder, double-click the "Secure Shell Client" icon. In the dialog box that appears, type your username and click "Connect." I f you see a question about saving your "host key" to the local database, ans wer "No." In the next dailog box, type your password and click "OK." 2. �Create your public_html directory and give it the permissions necessary to display web pages. At the UNIX (%) prompt, type source /www/htdocs/learn/usered/html-setup 3. �Press the ENTER key. In addition to your public_html directory, you now have two shortcut com mands (type the command at the UNIX % prompt): * webpublish--If you create a subdirectory of your public_html directory, you must make the files it contains available for readers. To do so, log into Copland, change to the new directory using the "cd" command, then type "webpublish" at the UNIX prompt. * webdiskusage--You can find out how much space your files occupy in your home directory by typing this command, then pressing the ENTER key. For information about quotas, read the IT Help Center disk quota information 4. �Click the Minimize (underscore) button at the top right of the window to minimze it.

HTML tags

Before you write an HTML document, decide how you will structure it. Wha t will the major heading be? How many subordinate headings will you have; how much text will you include; will you use lists, and so on. You'll pre sent your structure to your audience through special codes called HTML tags.

October 2003 4

Basic HTML 1

HTML documents consist of text, images, and HTML tags for labeling each element. Tags come in pairs (i.e., a beginning tag and an ending tag) and are enclosed by angle brackets (the "less than" and "greater than" signs). The format for an HTML tag is text Note that the ending tag name is preceded by a slash (/). It is import ant to include the ending tag with its slash character. Otherwise, the rest of your doc ument will have the properties of the tag you forgot to finish.

Preparing an HTML document

In this class, you will prepare an HTML document for viewing on the Web. The procedure for preparing any Web document is 1. �Type your text in a text editor: use Notepad in Windows, TextEdit on the Macintosh, or pico in UNIX. If you use a program like Microsoft Word, yo u must save your file as a text file before you can use it on the Web. (A tex t file contains only text; it does not contain any formatting codes [for l ayout, headings, etc.].) 2. �Save the file as a text file. 3. �View the Web page you've created in your Web browser. In the following exercise, you will begin your HTML file. The same HTML tags are used for every browser.

Exercise 2: Creating an HTML file

1. �To start Notepad, A. �Click the "Start" button. B. �Highlight "All Programs." C. �Highlight "Accessories." D. �Click "Notepad." E. �From the "Edit" menu in NotePad, select "Word Wrap." (If "Word

Wrap" is already checked, you need do nothing.)

Continued on next page

Information Technologies 5

Basic HTML 1

Exercise, continued

2. �Type the following text. Press the ENTER key at the end of each line:

Preparing a Document for the World Wide Web

3. �From the "File" menu, select "Save." When the "Save As" dialog box appears, click the down arrow next to the "Save In:" box. Click (

C:), then

double click "Scratch." Give your file the name index.html 4. �Open the browser. In the Applications folder, double-click the "Netsc ape" icon. 5. �From the File Menu, select "Open File." 6. �Select the drive or folder where your HTML file is located. 7. �Select the name of the file you want to open: index.html 8. �Click "Open." Your HTML file will appear in the browser window. 9. �Return to your text editor (Notepad) by clicking its name in the Taskb ar at the bottom of the screen. Note: As you continue to create the document, check its appearance often. To do this: 1. �Save the changes that you've made. 2. �From the appropriate menu or toolbar in your browser, select "Reload current page" to view the changes. There is no need to close either the editor or the browser as you work.

October 2003 6

Basic HTML 1

The file you have just created contains the essential elements of every HTML file: �Every HTML file name has two parts, separated by a period. The first par t is any name you want to give the file. The second part must be "html." �Every HTML file begins and ends with the and tags. The section of your document contains its title (and may contain other preliminary information). Information in the section is me ant for the browser and is not generally displayed on the screen (except fo r the