Scribd
Upload
68 views18 pages

CIS131 Tutorial 1 Lecture Notes Summer 2013 (1) 001

This tutorial introduces basic HTML tags to create web pages. It discusses opening a document in Notepad++ and saving it with a .htm extension. The tutorial walks through creating a sample web page with key HTML tags like <html>, <head>, <title>, <body>, and <img> to add and format content. Comments are also inserted using HTML comment tags. The goal is to practice basic page structure and formatting tools needed to display content on a web page.

Uploaded by

anthom
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
68 views18 pages

CIS131 Tutorial 1 Lecture Notes Summer 2013 (1) 001

This tutorial introduces basic HTML tags to create web pages. It discusses opening a document in Notepad++ and saving it with a .htm extension. The tutorial walks through creating a sample web page with key HTML tags like <html>, <head>, <title>, <body>, and <img> to add and format content. Comments are also inserted using HTML comment tags. The goal is to practice basic page structure and formatting tools needed to display content on a web page.

Uploaded by

anthom
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/ 18

CIS 13 1 WEB AP PL IC ATI ON S AN D D EV EL OP ME NT

If you have not already completed the tutorials in the Online Setup folder

Application Setup, which installs an open source program (Portable Apps) to your USB
drive and a text editor (Notepad++)

and

Download Student Data Files, which downloads the files for this textbook to your USB
drive

you should pause the video until you have performed these instructions.

Note: Although this video tutorial will introduce you to the important tutorial concepts,
some students may find it beneficial to complete the book tutorial on pages HTML 1 –
HTML 55.

T U T O R IA L 1 – U S IN G X H T M L T O C R E A T E W E B P A G E S

Web pages are written in Hypertext Markup Language (html). Html 5 applies strict rules
to the code to ensure that web pages are displayed correctly in all browsers and can be
read by screen readers that read aloud to the visually impaired. The World Wide Web
Consortium (W3C) maintains the standards for Web pages.

Pages are typed (scripted) in a text editor (Notepad, TextPad, or Notepad++). The
appearance of the Web page depends on the html code and the Web browser used to
display the page. It is important that the page be rendered correctly in the two most
popular browsers-- in Internet Explorer (IE) and Mozilla Firefox. The ability to display
pages similarly in more than one browser is called cross-browser compatibility.

Tutorial 1 Page 1 of 18 6/18/2013


C RE A T I NG A WE B P AG E W I TH B AS I C H T ML T AG S

This video tutorial will walk you through Case Problem 1 on pages HTML 58 and 59 of the text in
the Notepad++ program that you installed on your Portable Apps Menu on your flash drive. I will
explain the concepts introduced in the Chapter as we walk through this Case together.

IMPORTANT

At the end of the Tutorial, I will be adding additional instructions to teach the concepts that were
introduced in this Tutorial but were not covered in Case 1.

1. Insert your flash drive in the USB port on your computer.

2. Double click the Open folder to view files using Windows Explorer option.

3. Click Start.exe (you may not see the .exe if


you have a different view).

The Portable Apps program opens and an icon


displays on the Task Bar.

4. Click Notepad++ Portable from the Menu options.


Notepad++ displays with a default document title of new 1
Notepad++ and a default document tab of new 1.

Tutorial 1 Page 2 of 18 6/18/2013


Case Problem 1

Data Files needed for this Case Problem: shop.htm, grocerycart.jpg

Food Store The Food Store supermarket is a small grocery store featuring local produce.
Marketing director Janet Ruiz wants your help in creating a Web page that lists the top sale
items.

Tutorial 1 Page 3 of 18 6/18/2013


Instruction 1: Use your text editor to open the file shop.htm from the
tutorial1\case1 folder, and then save the file as shopsolution.htm in the same
folder.

1. Click the Open icon on the Tool Bar and navigate to the Student Data Files
tutorial1\case 1 folder on your flash drive.

Select the shop.htm file and click the Open button.

The shop.htm file displays in the Notepad++ workspace. All Web pages have an
extension of .htm or .html. In this class, you will save all files with an extension of
.htm

shop.htm displays on the Title Bar and on the Notepad++ document tab.

An element tag begins with a less than symbol (<), sometimes referred to as left angle
bracket and ends with greater than symbol (>), sometimes referred to as a right angle
bracket. All html elements are paired, which means that they must have both a start and
end tag. The only difference between a start tag and an end tag is the end tag is preceded
by a forward slash (i.e. </body>).

Click on the start <body> tag and then scroll to the bottom of the document until you can
see the end </body> tag. Notice that it is highlighted as well. When you select an element
tag in Notepad++, its matching tag is also highlighted.

If the tags do not markup (enclose) any content, they are referred to as empty tags, and
contain a forward slash (/) before the right angle bracket. Because empty tags start and
end in the same tag, they are often called self-closing tags.
Tutorial 1 Page 4 of 18 6/18/2013
All html pages contain four paired element tags: (sometimes referred to as a skeleton
because they are the backbone of every Web page).

<!DOCTYPE html>

<html>
<head>
<title></title>
</head>
<body>

</body>
</html>

The first line of the shop.htm code, DTD or Document Type Definition, determines the
Web standard that is applied to the html tags that you type. Html 5 automatically uses
the “Strict 1.0” standard, so all that is required is <!DOCTYPE html>. The “Strict 1.0”
standard does not allow the use any "deprecated" elements – elements that will not be
recognized in future versions of html.

The <html> element is the root element on a Web page. It is a "container" that
"contains" all of the other elements on the Web page.

In Notepad++, element tags are automatically displayed in blue to differentiate them


from content.

Between the start and end <head> element tag, is the start and end <title> element
tag.

What is typed between the start and end <title> element tag does not display in the
body of the Web page when you view it in the browser. It only displays on the Title Bar
of the browser.

2. Select File | Save As from the Menu Bar and save the document in the Student Data Files |
Tutorial 1 | Case 1 folder as shopsolution.htm. This will keep the shop.htm file as an
original in case you make mistakes and need to start over.

Tutorial 1 Page 5 of 18 6/18/2013


The new name shopsolution.htm displays in the Title bar of Notepad++.

Instruction 2: Within the <title> tags, type Food Store Sale Items.

1. Click between the start and end <title> element tags and type Food Store Sale
Items as the title text.

Instruction 3: Within the head section, enter a comment containing your first and last name,
the text Tutorial 1, Case Problem 1, and today’s date.

1. Click after words “Tutorial 1” on line 5, press the space bar and type Case Problem 1.

Highlight the words “your name” on line 6 and replace with “your name”.

Highlight the words “today’s date” on line 7 and replace with “today’s date”.

A comment is additional information that is included on a Web page to explain the code. It
does not display in the browser. Notice a comment begins with <!-- and ends with -->.
In Notepad++, a comment element tag always displays in green. If the text after the end
comment element tag is still green, you will want to check for an error in ending your
Tutorial 1 Page 6 of 18 6/18/2013
comment tag. Comment tags can be placed anywhere in your document to explain the code.

The information between the start and end <head> element tags is informational only and
does not display in the browser. In Notepad++ you can collapse the head section so it does
not display in the text editor while you are working on your <body> section. The <body>
section contains the content that will display on your Web page.

Click the minus sign to the left of the opening <head> tag to collapse the <head> section.

Instruction 4: In the body section, insert an image element to display the image grocerycart.jpg,
which is contained in the images folder. Do not move the file from the images folder. Be sure to
place the image element with a paragraph <p> element. The grocery cart.jpg image is 250 pixels
wide and 245 pixels tall; add appropriate height and width attributes. Using both the alt and
title attributes, add code so when a user hovers the mouse pointer over the image, a Screen Tip
appears that says Food Store Cart.

1. Click on line 13 and insert a start and end <p> tag. Notice that you are
between the start and end <body> element tag as well. Click between the start and end
</p> tags and type the following code to insert an image at the location of the cursor:

<p><img src = "images/grocerycart.jpg" alt = "food store cart"


title = "food store cart" width = "250" height = "245" /></p>

The space before and after the = sign is optional, but it is important to be consistent.

The <p> element tag is a block style element that begins and ends a paragraph. A block
style element displays with a blank line above and below the element tag.

Notice that the image tag is an empty element tag (it begins and ends in the same element
tag and does not mark up any content).

In the script above, you used five attributes with the <img> element tag:

src = “complete pathname of the image file”


alt = “description of the image file” title =
“description of the image file” width =
“width of the image file in pixels”
height = “height of the image file in pixels”

You may be wondering why you need to use both the alt attribute and the title attribute
to describe the image. Firefox doesn’t support the alt image tag, but it does pop up the
text when the title tag is used.

Note that the attribute is in red and the value of the attribute is in purple in Notepad++.
Tutorial 1 Page 7 of 18 6/18/2013
This is important because it will help you to find errors in your code.

Images that display on a Web page should have an extension of .jpg, .gif, or .png.

Instruction 5: In the body section create the code to mark the text Food Store Sales This
Week as an <h1> heading.

1. Click before the text Food Store Sales This Week on line 14. Type a start <h1> tag. Press
the End key on the keyboard to move to the end of the text and type and end </h1> tag.

html supports six predefined font sizes called heading tags (<h1> through <h6> -- with
<h1> being the largest and <h6> being the smallest).

The <h1> tag is also a block style element (which means that when it displays in the
browser, it will contain a blank line before and after the tag). Inline style elements do not
display a blank line before and after the tag.

2. Click the Save icon on the Tool Bar to save the changes to shopsolution.htm.

3. You will want to view your Web page in both Mozilla Firefox and in Internet Explorer to
after each instruction to see if the code you typed displays correctly.

From the Menu Bar, select Run | Launch in Firefox.

The Web page displays in Firefox with the content "Food Store Sale Items" that you typed
between the start and end
<title> tags displaying in the
Title Bar of the browser.

and the content that was typed between the start and end <body> tags displaying in the
browser. Notice that the grocery cart image displays at the top of the Web page and the
content Food Store Sales This Week displays in a larger font and has a blank line before
Tutorial 1 Page 8 of 18 6/18/2013
and after it because it is marked up by the block level element tag <h1>.

Close Mozilla Firefox as you will be able to launch it each time you want to view the results
in the browser.

4. Now you will want to see how this document displays in Internet Explorer.

From the Menu Bar, select Run | Launch in IE.

When you close Internet Explorer, you will be returned to the shopsolution.htm file in
Notepad++.

Tutorial 1 Page 9 of 18 6/18/2013


Instruction 6: Create code to mark the four sales items as an unordered list, with each list item
formatted in bold and italic.

1. Click on line 22 and type a start <ul> tag. Click on line 27 and type an end </ul> tag.

Click before each of the list items in lines 23 through 26 and type a start <li> element.
Click at the end of each list item and type an end </li> element.

Our book defines three types of lists:

Ordered (displays items numbered numerically)


Unordered (displays items with bullets)
Definition (displays with a hanging indent format)

The start and end <li> element tag (which stands for list item) marks up the list content.

2. Click the Save button and view in both browsers.

Instruction 7: In each line in the unordered list, replace the words cents with the code for the cents
symbol using a named character reference.

Sometimes there are characters that you cannot enter from the keyboard. In html, these special
characters are called character entities. You can enter these special characters in your code using
either a "named" or "numeric" reference. When you use a numeric reference, you are referring to
the character's position in the ISO (International Standards Organization) character set. Numeric

Tutorial 1 Page 10 of 18 6/18/2013


references begin with an ampersand (&) and end with a semicolon (;).

One of the most used named character references is the non-breaking space. Since html does not
recognize more than one space, tabs, or a return character, if you want to insert more than one
space in your Web page, you will need to insert a &nbsp; for each additional space you want to
insert.

There is a table of commonly used special characters in Figure 1-19 on page HTML 23 of your text.

1. Replace the word cents with &cent;

2. Save the document and view the Web page in the browser to see if the cent symbol displays
in place of the word “cents”.

Instruction 8: In the last paragraph, mark the words discounts on items as strong.

1. Locate the text discounts on items on line 35 and click before the text. Insert a <strong>
element before the text and an end </strong> element after the text.

A start and end <strong> tag displays the marked up content in a bold font.

A start and end <em> tag displays the marked up content as emphasized text (usually italic
font)

2. Save and test in both browsers.

Instruction #9: Create the code to mark the words Contact Us using the <h3> element.

1. Click before Contact Us on line 38 and insert a start <h3> tag. Click after the text and insert
an end </h3> tag.

Tutorial 1 Page 11 of 18 6/18/2013


2. Save and test in both browsers.

Instruction 10: Add break tags where appropriate so the address appears as shown in Figure 1-
53.

1. Click at the beginning of line 40, 41, and 42 and insert a <br /> tag.

Line breaks are a little different than any of the element tags you have used so far. A line break
ends the line you are on and starts on the next line. Placing a <br /> element tag in your code
is the same as pressing the Enter key in a word processing program. If you wanted to leave a
blank line, you would need to enter two <br /><br /> element tags in the code. Notice that
the <br /> element tag is a self-closing tag that requires the end forward slash.

It is good coding practice to place the <br /> tag at the beginning of a line rather than at the
end of the previous line.

2. Save and test in both browsers.

C O D I N G F O R A C C E S S IB I L I T Y

For us, coding for accessibility basically means that we need to make the code so it can easily be
read by a screen reader that reads aloud to the visually impaired. html 5 has incorporated a large
part of the accessibility code into its basic coding. If we were to have the screen reader read in a
language other than English, we would need to add a lang = “language” attribute in the <DOCTYPE
html> tag as <DOCTYPE lang = “language”>.

There is a start and end <abbr> tag that should mark up any text that is an abbreviation or an
acronym. In shopsolution.htm, on line 43, insert a start <abbr> tag and title attribute before the
Tutorial 1 Page 12 of 18 6/18/2013
state abbreviation and an end </abbr> tag after the state abbreviation.

This instructs the screen reader to read “Colorado” rather than pronounce the CO phonetically.

In Firefox, a dotted line appears below an abbreviation, and when you place your cursor over the
dotted line, a screen tip displays the title text. The screen tip displays in I.E, but the dotted line does
not.

IM P 0 R T A N T V A L I D A T I O N C O D E

The W3C that maintains the standards for Web pages released a new standard on March 26, 2013,
that was not included in our text or notes. This would cause an error when you tried to validate
your code.

To avoid this, I would like you to open shopsolution.htm and click after the ending </title> tag on
line 9 and press the Enter key.

Insert the following line of code on line 10:


<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

You will need to add this line of code to each new document that you create.

T IP S F O R W R IT IN G X H T M L C O D E

Now that you have completed the coding for shopsolution.htm, let’s review a few of the tips for
writing html code.

1) All html tags should be typed in lowercase

2) As much as possible, type tags on a separate line (at the left margin)

3) Use white space (enters, spaces, tabs) to create well-structured html code

4) Type break tags <br /> at the beginning of a line of text – not at end

5) Enter content between start and end html tags

6) Do not use deprecated tags. The W3C Consortium that sets the standards for html coding is
phasing out deprecated (old) tags, which will soon not be supported by most browsers.

Tutorial 1 Page 13 of 18 6/18/2013


7) Since html does not recognize more than one space, you should learn to space only once
after terminal punctuation (period, colon, exclamation point, etc.)

8) When copying and pasting content from a word processing document to a text editor, the
quotation marks are sometimes not copied properly.

Word processing programs use "smart" quotes (which are curly or slanted) and text editors
use "dumb" quotes (which are straight).

Notice in the previous code the difference in the quotes. More importantly, notice that the
value "images/grocerycart.jpg" did not turn purple as all values should. This is because of
the "smart" quotes that are not recognized by the text editor. When a value does not turn
purple, this should be a "heads up" that you have an error in your code.

V A L ID A T IN G T H E C O M P L E T E D F IL E

Now that you have completed the shopsolution.htm file, and displayed it in both Internet
Explorer and Mozilla Firefox, it is time to validate the file to be sure that it meets the html Strict
1.0 standards.

Mozilla Firefox has a Web toolbar that can be added to its browser that will validate the Web
page and also check to see if it is contains the required accessibility code.

1. In Firefox, type

https://addons.mozilla.org/en-
US/firefox/addon/60/?collection_id=a327ab17-31c1-ba19-176e-
0ce08ac132f9

in the Location Bar and press the Enter Key.

2. At the Web Developer page, click the Add to Firefox button

Tutorial 1 Page 14 of 18 6/18/2013


3. At the Software Installation dialog box, click the Install Now button.

4. At the Add ons dialog box, click the Restart Firefox button to complete the process.

5. When you open Firefox again, the new Web Developer tool bar will display below the
Location Bar.
Tutorial 1 Page 15 of 18 6/18/2013
6. From the Web Developer tool bar, click the Tools down arrow and select Validate Local
Html.

7. In a few moments, the W3C validator will display with a validation check.

You will notice that the Validator states “Tentatively passed, 4 warnings”. The validators
are slow to catch up with the new html 5 standards. Warnings are okay.

If the document does not pass the validation, you will receive an error assessment. For
example, in shopsolution.htm, on line 15, I deleted the ending </h1> element and
checked the document again.

Although I only removed one tag, the validator identified 5 Errors

Screenshot of errors found:

Tutorial 1 Page 16 of 18 6/18/2013


Once an ending element tag was missing, none of the other opening and closing tags matched.

I added the </h1> element back in, refreshed the browser, and validated the file again. This
time, I only received the warning messages.

P E R F O R M IN G A N A C C E S S IB IL I T Y C H E C K

1. With shopsolution.htm open in Mozilla Firefox, click the Tools down arrow and select
Validate Section 508 to display a Web Content Accessibility Report.

Note: that there are different levels of compliance, and Cynthia Says™ has no way
Tutorial 1 Page 17 of 18 6/18/2013
of knowing if a letters are an acronym or an abbreviation, for example, so passing
the automated verification me ets one level of validation, but it is important that
the Web developer perform manual checks as well.

D IS P L A Y I N G X H T M L F IL E S O N T H E W E B

In order to make Web pages accessible in a browser, they must be saved on a Web server inside a
folder named www or public_html. Each of you will set up an individual server account.

Please see “Uploading Files to the Server” for instructions.

A D D I T I O N A L A S S IG N M E N TS

Now that you have learned to write basic html code in a text editor (Notepad++), display the
Web page in a browser, and perform validation and accessibility checks, you will complete Case
Problem 1 Food Store on pages HTML 58 - HTML 59 of the text and transfer your completed
code and any images to your server account.

I will be reviewing your graded assignments in Notepad++ and in both Internet Explorer and
Mozilla Firefox; therefore, it is important to check the display in both browsers.

Tutorial 1 Page 18 of 18 6/18/2013

You might also like