Lab Exercise 8 Web Pages Using HTML to Create a Simple Web ...

[Pages:5]Pdf - print version - Click here

Lab Exercise 8 Web Pages Using HTML to Create a Simple Web Page

Purpose: to learn the basics of making webpages by creating a simple webpage with HTML (HyperText Markup Language)

Before you begin Lab8, read thoroughly the Information Page for Labs 8 & 9. You will not use your lab book for these last two labs.

Introduction to HTML:

Hypertext Markup Language or HTML is used to create webpages. It describes the structure and the content of the webpage. Pieces of content in a webpage document are set off using Markup Tags. Early on, there were wide variations of tags used by differing browsers. Now the W3C ? World Wide Web Consortium has established standards followed by most software companies that produce browsers. Although some browsers allow deviations from the standards, by using the standards your webpage should display well in all browsers.

A webpage document starts with the `root' tag HTML, followed by a heading and then a body, both nested inside of the

HTML tag. The name of the tag is contained inside angle brackets, with the closing tag differentiated from the opening

tag by having an additional forward slash. The basic outline of a webpage document looks like the following:

some content, including a title

additional content

More tags can be nested inside of the head or body to create paragraphs or blocks of content and add styles such as underlining, italics, etc. Nesting of tags inside of other tags allows complex webpages to be built. Some opening tags include additional attributes. The syntax for that style of tag would look like this: . An example for a paragraph tag with one attribute might look like this.

content material Another style of tag, called a one-sided tag (also called empty elements because they contain no content materials) has only an opening tag without an ending tag. The proper syntax for a one-sided tag is . Examples of that style are a line break or the tag for inserting a horizontal line .

A third type of tag is a comment tag. A comment is used to add notes to your HTML code, but does not show on your webpage. The syntax for a comment looks like this: .

You will use all of the above tag styles in your webpage. Finally, HTML tags are not case sensitive. You may use either upper or lower case letters in the tags.

Step 1.____ Starting Lab8: In this lab you will create a web page similar to the one illustrated below. The choice of

title, text, graphics, and hypertext links is yours, but your page must have at least the following elements in order to satisfy the assignment:

An opening HTML Comment that documents your name, the date, and the lab number Title (which shows in the blue bar in your browser at the very top of the screen) Headings of 3 different levels (there are 6 altogether) Some text about the topic of the page. Some text in Bold and some in Italic. At least one Graphic. In this sample a graphic called "Snowman.GIF" is referenced. You need to find your own graphic. (some suggested sites for locating graphics are provided). Active Hypertext links to at least two other sites on the Web that work when clicked on.

1

Your name as the webpage author, and a "last modified" date.

The mechanics of carrying out the assignment. You may work "on-line"- connected to the Internet, for this assignment, but it is not necessary except for the work involved in downloading a graphic image. To work "off-line" see the notes on the Lab8-9 Intro page. DO NOT USE any other application (such as your word processor) to generate a web page. This also means DO NOT edit and save your webpage within your Browser application.

Step 2.____ Activate the Browser: Open your web browser (FireFox, Internet Explorer, etc.) by clicking the appropriate

desktop shortcut or by clicking Start/Programs and then finding the proper browser reference.

Step 3.____ Activate the text editor: Open Notepad (Click Start/Programs/Accessories/Notepad). From the file menu

click Save As and name your file lab8.htm - be sure to change the option for selected file types from "Text" to "All Files *.*" or Notepad may change the name of your file to lab8.htm.txt. (Web pages can also have the extension .html )

Step 4.____ Working between the editor and the browser:

a. ____Now, immediately switch over to your Internet browser (using the Taskbar), and click on the File menu. Under File there can be a slight difference depending on the version of the Browser you are using. In some you will click on 'Open' and in others, 'Open File'. Then another window will open that allows you to either Browse for the file or type in it's name.

b. ____Using the 'Browse for file' option, navigate to the location of your file lab8.htm, and Open it. Right now the page is empty, but you will be ready to bring up your page's contents as you create them.

c. ____On the task bar, switch back to Notepad. You will be typing in the text and HTML tags that produced the sample page as shown below. Start by typing in the first tag at the top of your NotePad file, then create several empty lines with the ENTER key, and end the page with the tag. Save your Notepad file. Most everything else will go between those tags. Inside those tags there is a section for headings followed by a section for the body of the webpage. The headings start with the and end with the tags. The main body of the page goes between the and tags.

d. ____Next, right after the tag, type in the heading section as show below, from through . Save your lab8.htm in Notepad, then switch over to your browser (using the Taskbar). In the browser click on the Reload or Refresh button and the beginning of your webpage will appear.

e. ____Using the task bar, now return to Notepad and you will create a comment. HTML comments begin with the . Comments will not appear on your webpage under the browser, but only when you view it with a text editor. The purpose is to record internally, information about the webpage. On the topmost line enter the comment as it appears in the Sample Page. Now start entering the rest of the sample webpage. To monitor your progress, periodically Save your file in Notepad, then switch over and Reload or Refresh. You have to save the file in Notepad and reload in your browser every time you want to see a change. DO NOT USE THE SAVE FILE UNDER YOUR BROWSER.

f. ____When you finish, Save your file in Notepad, then switch over to your browser and click Reload or Refresh. With the exception of the graphic, the page should look like the sample below.

Step 5.____ Changing your web page:

a. ____Return to your file in Notepad. Go to the topmost comment line (it starts with the --comment, not displayed on screen. -- starts the header section of the page The Title of Your Page Goes Here

-- sets up title which goes on top bar of the browser --end of header --start of the main text area --center everything until the end-center code, . --reference to a graphic image This is a Level 1 Heading -- there are 6 sizes of headers This is a Level 3 heading This is a Level 5 heading --end of centering --start new paragraph with blank line before it This is plain text -- is like carriage-return - starts a new line This is bold text This is italic text This text is big and

4

 --draws a line across the screen ("horizontal rule") Links to other sites A series of Graphics collections --reference to a linked URL, followed by the text that will appear on-screen. The actual start tag is and the end tag is Another Graphics Collection A Tutorial on Writing HTML Page created by your name Last Modified: today's date -end of main text area -end of whole page

5

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download