Scribd
Upload
63 views7 pages

Lab21 Manual

This document provides instructions for creating a basic HTML webpage. It explains some key HTML concepts like tags, headings from H1 to H6, paragraphs, and unordered lists. The steps outlined include opening a text editor, adding structural tags like <HTML> and <BODY> to contain the page content, and then adding sample headings, paragraphs, and an unordered list between the <BODY> tags. It instructs the reader to save the file as practice.htm and view it in a web browser to see the rendered page.

Uploaded by

girliepoplollipop
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
63 views7 pages

Lab21 Manual

This document provides instructions for creating a basic HTML webpage. It explains some key HTML concepts like tags, headings from H1 to H6, paragraphs, and unordered lists. The steps outlined include opening a text editor, adding structural tags like <HTML> and <BODY> to contain the page content, and then adding sample headings, paragraphs, and an unordered list between the <BODY> tags. It instructs the reader to save the file as practice.htm and view it in a web browser to see the rendered page.

Uploaded by

girliepoplollipop
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

© Dmitriy Shironosov/ShutterStock, Inc.

LABORATORY 21
First Steps in HTML

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

REFERENCES
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. © Jones & Bartlett Learning, LLC
NOT FOR SALE OR DISTRIBUTION
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>

© Jones & Bartlett Learning, LLC


NOT FOR SALE OR DISTRIBUTION
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.)

© Jones & Bartlett Learning, LLC


NOT FOR SALE OR DISTRIBUTION
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.

© Jones & Bartlett Learning, LLC


NOT FOR SALE OR DISTRIBUTION
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.

© Jones & Bartlett Learning, LLC


NOT FOR SALE OR DISTRIBUTION
First Steps in HTML | 239

EXERCISE 1
Name_____________________________________ Date_____________________

Section____________________________________

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.

© Jones & Bartlett Learning, LLC


NOT FOR SALE OR DISTRIBUTION
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.

© Jones & Bartlett Learning, LLC


NOT FOR SALE OR DISTRIBUTION

You might also like