lab #10

LabCH21.pdf

Home >Computer Science homework help >lab #10

■■ Learn■some■basic■HTML■concepts. ■■ Make■a■simple■webpage.

■Software■needed: ■ 1)■ A■basic■text■editor■(e.g.,■NotePad■on■a■PC■or■TextEdit■on■a■Mac)■to■create■the■webpage.■For■quicker■

development■and■checking,■you■can■use■the■online■HTML■editor■from■the■W3C■as■long■as■it■is■ maintained■on■their■servers.■From■there,■you■can■copy■and■paste■the■text■into■a■text■editor■for■saving■ on■your■local■machine.■Visit■http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic.

■ 2)■ A■web■browser■(e.g.,■Chrome■or■Firefox)■to■view■the■HTML■page.■You’ll■also■need■a■means■of■ saving■your■work,■such■as■a■flash■drive.■Check■with■your■lab■instructor■for■details.

■ ■ Please■note:■For■this■lab,■avoid■using■software■that■automatically■generates■HTML■or■webpages■ (such■as■Microsoft■Word■or■fancier■products).■You■want■to■keep■things■simple■and■just■work■ “under■the■hood”■with■the■actual■HTML■code.

OBJECTIVES

REFERENCES

LABORATORY First Steps in HTML

First Steps in HTML | 235

BACKGROUND Many textbooks discuss the basics of HyperText Markup Language (HTML), as do online resources such as the W3Schools website (http://www.w3schools.com/html). The following Activity section introduces the skills necessary for this lab.

ACTIVITY For this lab, you will create a simple webpage using HTML, the basic language of webpages. The designer of a webpage uses HTML “tags” to describe the general structure of the page. These tags identify various elements of the page (titles, headings, paragraphs, etc.), along with character formatting information (bold, italic, etc.). Once the elements of the page are defined using the tags, a web browser interprets these tags to determine how to display the webpage on a computer screen.

For example, let’s say the browser sees this collection of text and tags in HTML:

<H1>Welcome to My Page!</H1>

Notice the first tag: <H1>. All tags are surrounded by angle brackets in this fashion. This first tag is HTML code for a heading (like a headline). There are six different levels of headings in HTML: H1 through H6. H1 is the largest and most prominent heading.

The <H1> tag “turns on” the heading formatting. All the text following this tag will be in the boldest heading format, until another tag “turns off” the formatting. Immediately following the first tag is the phrase Welcome to My Page! A browser would show that text in a bold and prominent way, due to the <H1> tag.

The text is followed by another tag: </H1>. Notice the slash before the H1. It is used to designate “stop” tags: This is the tag that “turns off” the heading formatting, so that subsequent text will not be formatted as a heading. Most tags function like this, with a “start” tag that designates the beginning of a section, feature, or formatting, and a “stop” tag with a slash in it that designates the end of the section, feature, or formatting.

Here, then, is how <H1>Welcome to My Page!</H1> might be interpreted by a browser:

Welcome to My Page!

As the biggest and boldest heading in HTML, it pretty much screams on the page! To further understand how HTML works, we’ll make a practice page. Start by

launching your text editor, which should bring up a blank page on your screen. If you use the online editor linked in the Background section, you can delete the starting text and replace it with what you see here. Carefully type the following code:

<!DOCTYPE html> <HTML> <HEAD> <TITLE>Practice Page</TITLE> </HEAD> <BODY>

236 | Laboratory 21

These first tags are the basic structural tags that should begin every HTML page. The <!DOCTYPE> and <HTML> tags announce to the browser that the document is in HTML code. The <HEAD> tag is a structural tag for the header of the document. The most common element of the header is the <TITLE> of the document. Notice the text surrounded by the <TITLE> and </TITLE> tags—this text would appear in the title bar at the top of the browser window. Notice how the <TITLE> start and stop tags are nested within the <HEAD> start and stop tags.

The main contents of the page appear after the <BODY> tag. Everything following this tag would appear in the main portion of the browser window.

Your HTML document should end with the following two stop tags—type them in now:

</BODY> </HTML>

Let’s return to the discussion of headings in HTML. To see how your browser handles the various heading tags, open up some space between the <BODY> and </BODY> tags in your document and type the following code:

<H1>This is Heading 1</H1> <H2>This is Heading 2</H2> <H3>This is Heading 3</H3> <H4>This is Heading 4</H4> <H5>This is Heading 5</H5> <H6>This is Heading 6</H6>

We are using our text editor to create our code, but now we want to view our work with a browser, such as Chrome or Firefox, to see what our HTML code looks like when a browser renders it as a webpage. Before you can view your webpage in a browser, though, you need to save it to disk. We’ll do that now: Go to your text editor’s File menu and choose Save. Call this file practice.htm. (If you’re not sure which disk, or which location on the disk, you are to use for saving your file, consult your lab instructor.)

Once you’ve saved your file with your text editor, launch your browser, go to the File menu, and choose Open. Find your way to the saved practice.htm file and open it. You should see the six sizes of headings. They may resemble the screenshot below. (Note that Practice Page shows in the title bar of the browser window; this was the text that was between the start and stop <TITLE> tags.)

First Steps in HTML | 237

(By the way, the exact appearance of an HTML page can vary from browser to browser. While this lack of uniformity drives serious web designers nuts, it ensures that almost any computer, regardless of what fonts are installed on it, will be able to format and display HTML pages.)

Throughout the rest of this lab, you will go back and forth between the text editor, where you’ll edit your HTML page, and the browser, where you’ll view your changes. (Important note: Never try to save your page from the browser itself—your browser may save the page in a format that your text editor can’t open!)

You designate paragraphs in an HTML document with the paragraph tag, <P>. This tag informs the browser to leave some space in front of whatever block of text it precedes. Return to your page in the text editor, and type the following code after the headers and before the </BODY> tag:

<P>This is my first paragraph.</P> <P>This is my second paragraph.</P>

It’s worth noting that tags are not case-sensitive. You can make them lowercase if you’d like. We’re going to keep ours uppercase to make them stand out more in our code, so it is easier to read. Now you’ll view your changes. Save your work in the text editor, return to the browser, and click the Reload or Refresh button (or reopen the file from the browser’s File menu if you closed it). You should see your new paragraphs in the browser window.

Return to your page in the text editor. Now let’s take a quick look at lists in HTML. The two most commonly used lists in HTML are ordered and unordered. Here’s a screenshot of a heading followed by an unordered list:

Here’s the HTML code for the above list:

<H3>My Favorite Jazz Musicians</H3> <UL> <LI>Charles Mingus <LI>Miles Davis <LI>Sonny Rollins <LI>John Coltrane <LI>Thelonious Monk </UL>

Notice from the screenshot that in an unordered list the browser puts a bullet (•) in front of each item in the list.

238 | Laboratory 21

Take a look at how the code for this list works. The <UL> tag announces to the browser that an unordered list (“unordered” meaning “not numbered”) is about to begin. The <LI> tag is used to announce each individual list item. (Important note: <LI> stands for “list item.” Notice that it is the letter “L” and the letter “I,” not the letter “L” and the number “1”!) After all the items in the list have been entered, the unordered list feature is turned off using the </UL> tag. (Notice that the <LI> tag does not have a corresponding “stop” tag; it’s one of only a few HTML instructions that doesn’t require a stop tag.)

What if you want the list to be numbered? You’d simply tell the browser to create an ordered list instead of an unordered list, by replacing the <UL> and </UL> tags with the <OL> and </OL> tags. Note that the <LI> tags remain unchanged. Making that simple change to the preceding code would make the list look like this:

Again, note that the <LI> tags are not changed at all—the browser inserts the numbers 1 through 5 that appear in the list above. These numbers are not actually written in the HTML code.

Add a simple unordered list (list anything you’d like) on your practice page, then save it and view it in your browser. Then go back to your page in the text editor and change the <UL> and </UL> tags to <OL> and </OL>. Save your work, view your page in your browser again, and note the difference.

Finally, we’ll mention some simple text formatting tags, for bold and italic text. Like the heading tags, the text formatting tags must be turned on and then turned off with the appropriate start and stop tags. To create bold or italic text, surround the text to be affected with the appropriate tags. In the case of bold text, here’s a sample line of code:

<B>This text will appear bold.</B>

Here’s how your browser interprets that line of code:

This text will appear bold.

To make italicized text, use the start and stop <I> tags instead:

<I>This text will appear in italics.</I>

Here’s how it will look:

This text will appear in italics.

Experiment with these tags on your practice page.

First Steps in HTML | 239

Name_____________________________________ _ Date_____________________

Section____________________________________

EXERCISE 1

While you’re obviously not ready to become a freelance web designer, you are ready to make a simple webpage. For this lab, you’ll be creating a simple biography webpage.

Your page should include a brief biographical sketch of yourself. Include the following information:

■ Where you’re from ■ What your major is ■ What your plans are after graduation ■ What you hope to be doing 10 years from now

Also include a brief discussion of your hobbies and interests outside of school. Be creative: If you’re an avid hiker or biker, a vegetarian, a world traveler, an expert knitter, a bassoonist, an excellent cook, or a national champion hog caller, tell your story (or stories . . .). And, hey, if there are any oddities about you (“My eyes are two different colors” or “You should see my barbed wire collection” or “I was raised by the Borg”), mention them on your page!

You should also create a couple of lists on your page; some possible topics include:

■ Your favorite musical groups ■ Your favorite foods ■ Your most despised foods ■ Your favorite books ■ Your favorite TV shows

Almost anything that can be put into a list format can be included here.

240 | Laboratory 21

DELIVERABLES When you’re satisfied with your page, view it with the browser and print it from the browser’s File menu. Hand in the printout of your page as it appears in the browser. Your lab instructor might also want you to hand in an electronic copy of your file. Check with your instructor for details.