chapter 3: creating web pages with links, images, and embedded style sheets

Dr. Chen, Management Information Systems - HTML

Chapter 3:Enhancing a Website with

Links and Images[Learning by Doing]

Jason C. H. Chen, Ph.D.Professor of MIS

School of Business AdministrationGonzaga UniversitySpokane, WA [email protected]

Dr. Chen, Management Information Systems - HTML2

• Describe types of hyperlinks• Create relative links, absolute links, email links, and telephone

links• Describe image file formats• Describe the image tag and its attributes• Add images to a website• Explain div elements and attributes• Use a div element to mark a page division• Define the class attribute• Describe and use HTML heading tags• Describe the types of lists in an HTML document• Create an unordered list (ul) and a description list (dl)• Test and validate links on a webpage

Chapter Objectives


Web Page Assignments in HTML Text

• Starting from html02 it is required that all of you should complete the following two tasks for each chapter:

• 1. example described in the text book, it is referred to as: ‘exercise’

• 2. hw assigned and you need to upload to the Bb for grading, it is referred as ‘hw’– Assignments may be assigned from one of the following

that is illustrated at the end of each chapter: – a) Extend Your Knowledge (Extend YK) or– b) Lab


Type the following URLs

For exercisehttp://barney.gonzaga.edu/~chenta/html03/exercise/fitness03.htmlhttp://barney.gonzaga.edu/~chenta/html03/exercise/fitness03.html

For hwhttp://barney.gonzaga.edu/~chenta/html03/hw/ski03.htmlhttp://barney.gonzaga.edu/~chenta/html03/hw/ski03.html

http://barney.gonzaga.edu/~chenta/html03/hw/ski03-v2.htmlhttp://barney.gonzaga.edu/~chenta/html03/hw/ski03-v2.html

http://barney.gonzaga.edu/~chenta/html03/exercise/fitness03.html


http://barney.gonzaga.edu/~chenta/html03/hw/ski03.html



http://barney.gonzaga.edu/~chenta/html03/hw/ski03-v2.html




fitness03.html

about.html contact.html

Three major web pages for html03 ‘exercise’

Click on the image, it jumps to ‘Home’ page


• Hyperlink – It is a link on a webpage that allows users to navigate a website and move from one page to another

• Link – It is text, an image, or other webpage content that visitors tap or click to instruct the browser to go to a location in a file

• Text link – When text is coded as a hyperlink, it appears as underlined text in a color different from the rest of the webpage text

• Text link is also known as hypertext link• Image link – It is used to indicate an image as a link

and some websites display a border around the image

Adding Links to a Webpage


• It is used to create a hyperlink on a webpage• The <a> and </a> are the start and the end tags• Include the href attribute in the starting anchor

tag to identify the webpage, email address, file, telephone number, or other content to access

• The value of the href attribute is the content for a link

Anchor element


• It is a hyperlink that links to other webpages within the _______ website

• It is created by using an anchor tag with an href attribute that designates the file name of the webpage or the path and the file name of the webpage

• The Figure 3-2 shows an example of a relative link

Relative link

<a href="fitness03.html">Home</a>

replaced by (why?)

same


Revisions should be done in html03 ‘exercise’

• index.html in html03 exercise files should be replaced by fitness03.html to make it work using template file

• Three html files: – fitness03.html,– about.html– contact.html


• It is a hyperlink that links to other webpages ________ of a website

• It is created using an anchor element with an href attribute that designates a website URL

Absolute link

outside


• Images can be used to link to another page within the site, another website, an email address, or a telephone number

Image link

<a href="fitness03.html"><img src="images/ffc_logo.png" alt="Forward Fitness Club logo" height="275" width="845"></a>

http://barney.gonzaga.edu/~chenta/html03/exercise/fitness03.html http://barney.gonzaga.edu/~chenta/html03/exercise/fitness03.html

fitness03.html “images/ffc_logo.png”





The _____ attribute is used to identify the image file being inserted in a webpage.

a. src b. url c. loc d. load

ANSWER: ________a


• It is a hyperlink that links to an email address

• Use anchor elements to link to an email address by including the href attribute followed by "mailto:" and then the email address

Email link


• The Figure 3-5 shows an example of an email link

Email link (continued)

Re-use the previous one and background color (how?) Relative path - will be illustrated.

Phone link


• It is a hyperlink that links to a telephone number• Use an anchor element to link to a telephone

number by including the href attribute, followed by "tel:+1number" where +1 is the international dialing prefix and number is the phone number

Telephone link

• The Figure 3-7 shows an example of a telephone link


Image File Formats (continued 1)


• Pixel – It is the smallest element of light or color on a device displaying images

• The common resolution for laptops is 1366 x 768 pixels

• The disadvantage of an image with a high resolution is that it also has a large file size

• Use graphic or photo editors to optimize an image with a large file size to reduce its file size and load time

Image Dimensions and File Size


• <img> – The image tag is an empty HTML tag used to add an image to a webpage

• The image tag includes attributes such as:– src : It identifies the image file being inserted– alt : It specifies alternate text in case the image cannot

be displayed in a browser– height : It defines the height of an image in pixels– width : It defines the width of an image in pixels

Image Tag and Its Attributes

<a href="http://www.breckenridge.com"><img src=“______/ski.jpg" alt="happy skiers" height="343" width="514"></a>

http://barney.gonzaga.edu/~chenta/html03/hw/ski03.htmlhttp://barney.gonzaga.edu/~chenta/html03/hw/ski03.html

what’s problem?why no ski.jpg?

images




<a href="http://www.breckenridge.com"><img src="images/ski.jpg" alt="happy skiers" height="343" width="514"></a>

what’s problem?

http://barney.gonzaga.edu/~chenta/html03/hw/ski03.htmlhttp://barney.gonzaga.edu/~chenta/html03/hw/ski03.html


if image file not found








• Div element defines an area or a division in a webpage

• It uses the <div> and </div> tags• It can be used within the main element to

further divide the primary content area into separate sections

Div element


_____ is a starting div tag with an id attribute that has a value of menu.

a. <div “id”=menu> b. <html div id=”menu”> c. <div “menu”=id> d. <div id="menu">

ANSWER: ________d

<div id="navigation"> …</div>

<nav> …</nav>


Div element (continued)

• The Figure 3-41 shows a wireframe with four div elements inside the main element

• Div elements have attributes that provide information about the element• The id is a div attribute which identifies a unique area on a webpage and

distinguishes it from other page divisions


Div attributes (continued)

• The Figure 3-43 shows the revised wireframe with the div element and id attribute value defined as container

img src …

<p><p><p>

© Copyright


• A class attribute name can be applied to more than one div or other HTML element on a webpage• for the purpose naming the div, e.g., ‘equip’ for equipment

and it can be used for many times• The Figure 3-48 shows an example of a class attribute used

within an image tag

Class Attributes

Do you use any ‘class’ in the previous assignments?

In Web2 (See next slide)

<div class="bookmark"><img src="images/book.gif" alt="Book logo" style="width:118px; height:80px;" > </div>

/* styles-myweb.css */.bookmark {

text-align: right; }

Aligned RightHow/Why?


In the context of exploring div elements, any word can be used as a(n) _____, as long as it does not contain spaces.

a. header element b. footer tag c. id attribute value d. class name

ANSWER: _______d


• Heading elements – They provide a title or heading before a paragraph of text or section of a page

• Heading levels – There are 6 levels of headings, with level 1 being the most important and level 6 the least

Adding Headings and Lists

<header> <h1>Snow Fever Ski and Board School</h1> <h2>Let it snow, let it snow, let it snow</h2></header>


• List – It structures text into an itemized format• The different types of lists are:

– Unordered list (in about.html file)It displays each item of information in no

specific sequenceThe <ul> and </ul> are the start and end tags

for an unordered list<li> and </li> are the start and end list item tags

Adding Headings and Lists (continued)


• The following code creates a bulleted list of two items:

Adding Headings and Lists (continued 1)

<ul>

</ul>

<li>First item</li><li>Second item</li>

Have you done this?

<ul><li>Dumbbells</li><li>Kettle bells</li><li>Barbells</li>

</ul>


<nav> <ul>

<li><a href="myself.pptx"> Know more about me with PowerPoint presentation </a> </li> <li><a href="myresume.docx"> Visit my resume (MS-WORD format) </a> </li>

</ul></nav>

In personal web page assignments (web1 and web2):

/* in styles-myweb.css (web2) */nav ul { list-style-type: circle;

text-indent: 20pt;margin-left: auto; }

Why ‘circle?


• Ordered list – It displays information in a series using numbers or letters– The <ol> and </ol> are the start and end tags for an ordered list– <li> and </li> are the start and end list item tags – The following code creates a numbered list of two items:


<ol>

</ol>

<li>First item</li><li>Second item</li>


• A description list contains terms and descriptions

• The <dl> and </dl> are the start and end tags for a description list

• Each term is marked within a pair of <dt> and </dt> tags

• Each description or definition is marked between a pair of <dd> and </dd> tags



• The following code creates a description list of two terms and definitions:


<dl>

</dl>

<dt>First term</dt> <dd>First definition</dd>

<dt>Second term</dt><dd>Second definition – part 1</dd><dd>Second definition – part 2</dd>

Available at html03/class_demo/dldtdd-v1.htmlhttp://barney.gonzaga.edu/~chenta/html03/class_demo/dldtdd-v1.htmlhttp://barney.gonzaga.edu/~chenta/html03/class_demo/dldtdd-v1.html

http://barney.gonzaga.edu/~chenta/html03/class_demo/dldtdd-v1.html



dl, dt, ddDefinition and UsageThe <dl> tag defines a description list.The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes a definition in a dt).

<!DOCTYPE html><!– dldtdd.html --><html><body><dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd></dl></body></html>

Result:Coffee

Black hot drinkMilkWhite cold drink

Available at html03/class_demo/dldtdd-v2.htmlhttp://barney.gonzaga.edu/~chenta/html03/class_demo/dldtdd-v2.html




dl, dt, dd in about.html (About Us page)


For a description list, each description or definition should be marked between a pair of _____ tags.

a. <dl> and </dl> b. <dd> and </dd> c. <dt> and </dt> d. <ld> and </ld>

ANSWER: _______ b


Creating Element Ids for Linking Documents

• One way to identify elements in an HTML document is to use the id attribute

• Id names must be unique• Id names are not case sensitive

In web2

<a id =“top">

…

<a href="#top"><span style="font-size: small">Go to the Top of the Page! </span></a>

<span> …</span> tags create a container into which a user can add an inline style. It provides a finer level of control for styles. Whereas, <div> </div> tags define block-level structure or division in the HTML document.


Adding Links to a Target at the Top of the Page

• Type <header id="top"> as the tag that will create a target at the top of the Web page named top

• Type <a href="#top">Top</a> <div id="content">……<a href="#content">Lessons</a>

when click

jump to

when click

jump tolook for

look for


• Perform the following steps to validate an HTML document:– Open a browser and type http://validator.w3.org/ in the address bar to display the W3C validator page

– Tap or click the Validate by File Upload tab to display the Validate by File Upload tab information

– Tap or click the Check button to send the document through the validator and display the validation results page.

– (see pp.67-69, 123, 241, 294; and a validating HTML code document on the Bb)

To Validate Webpages


– Correct the errors if any, save the changes, and run the file through the validator again to revalidate the page

– Perform the above steps to validate HTML pages and correct any errors

– Close the browser, and then close the HTML text editor

To Validate Webpages (continued)


• Create a folder of html03 under mis235-0x-public_html on c: (d:)• Create a folder of exercise under html03 • Create a folder of images under html03/exercise/• Next create the following folders for hw• Create a folder of hw under html03• Create a folder of images under html03/hw/

Steps before downloading web resources


Your turn … ‘exercise’(Create a Webpage Template Document)

1. Create the following new folders: a folder of html03 under public_html directory. Further create two folders under html03: exercise and hw and two images folders under each one separatelya) exercise folder and the associated images folder will be used for text book exercise (e.g., fitness03.html and others)b) Hw folder and the associated images folder will be used for your homework assignment (e.g., ski03.html and others)Therefore, the Web Design Directory Structure for html03 shall be: public_html/html03/exercise (for fitness03.html) and public_html/html03/hw (for ski03.html) plus an images folder under each one. Your Web Page directory structure should be organized as in Figure 2


2. Download the following (7) data files, fitness03.html, about.html, contact.html and four image from Bb (available under Assignments Web Assignments and Resources) to your PC. Save three *.html files in /html03/exercise/ folder and four image files in /html03/exercise/images/ folder.3. Open the fitness03.html by right clicking the file then select “Open with” finally choose Notepad++ or simply select “Edit with Notepad++”. 4. Modify the three *.html files as follows (and read the text book - pp. 84-123):a) modify three *.html files as shown in Figure 3-a, 3-b, 3-c respectively. b) upload/save *.html files to the right folder (i.e., public_html/html03/exercise/ c) upload/save the four image files to the right folder (public_html/html03/exercise/images/)

Your turn … ‘exercise’ (cont.)


public_html [web folder]

hw(new folder)

images [folder]

html03[folder for HTML#3]

For html03

exercise(new folder)

fitness03.htmlabout.htmlcontact.html

images [folder]ski03.html

legal.pdf

images [images folder]

book.gif, events.gifgcan.gif, wall.gifmailbox.gif, worm.gif

ffc_logo.pngequipment1.jpgequipment2.jpgequipment3.jpg

ski.jpg

Figure 1. Web Design Directory Structure for html03 Assignment

index.htmlmyself.pptxmyresume.docx

styles-web1.cssstyles-myweb.css

css [folder]


Your turn … ‘exercise’

• Complete three html files (pp. 84-123)• 1. fitness03.html• 2. about.html• 3. contact.html

Please note that you are required to complete and upload fitness03.html (about.html & contact.html) by this Sunday.


8. What/How you should turn in: Fail to provide me with ALL information, you will lose major points:Notifying your instructor by uploading HTML#3 message (ski03.html) to the Blackboard (not via email). See detailed instruction on the document of “Instruction_Web_Assignments_Bb” available on the Bb. Please note that you should click “Write Submission” to enable the text editor box. Enter the following information in the “2. Assignment Submission” window: Dr. Chen, Here is my HTML#3 (fitness03.html) assignment. http://barney.gonzaga.edu/~your_userID/html03/exercise/fitness03.html

<Your Full Name> bmis235-02 (or bmis235-03 or bmis235-05)

so that I can record/grade your homework directly on the Bb.

Make the URL linkable


Type the following URLs

For exercisehttp://barney.gonzaga.edu/~chenta/html03/exercise/fitness03.htmlhttp://barney.gonzaga.edu/~chenta/html03/exercise/fitness03.html

For hwhttp://barney.gonzaga.edu/~chenta/html03/hw/ski03.htmlhttp://barney.gonzaga.edu/~chenta/html03/hw/ski03.html











public_html [web folder] |

html02[folder for HTML#2] …

…



All other *.jpg image files

All other *.html files


For html03

fitness02.html


hw(new folder)




hw(new folder)


ski03.htmllegal.pdf




ski.jpg

Web Design Directory Structure for All HTML Assignments

images[images folder]


css[folder]



Your Personal Web Page

Fig. 3-a. A Complete Version of fitness03.html for exercise<!DOCTYPE html><html lang="en"><head>

<title>Forward Fitness Club</title><meta charset="utf-8">

</head><body> <div id="container">  <header> <a href="fitness03.html"><img src="images/ffc_logo.png" alt="Forward Fitness Club logo" height="275" width="845"></a> </header>

<nav>

<a href="fitness03.html">Home</a> <a href="about.html">About Us</a> <a href="class.html">Classes</a> <a href="nutrition.html">Nutrition</a> <a href="contact.html">Contact Us</a>

</nav>

<main><p>Welcome to Forward Fitness Club. Our mission is to help

our clients meet their fitness and nutrition goals.</p> ……

</main>

<footer>

© Copyright 2015. All Rights Reserved.<br><a

href="mailto:[email protected]">[email protected]</a></footer></div>

<br/> <br /><i> This document was last updated on:<script type="text/javascript">

document.write(document.lastModified);</script> by Jason Chen (replaced by Your Name)</i>

</body></html>

<!DOCTYPE html><html lang="en"><head>


</head><body>

<div id="container"><header> <a href="fitness03.html"><img src="images/ffc_logo.png"

alt="Forward Fitness Club logo" height="275" width="845"></a></header>

Figure 3b. about.html

</nav>

<main><h1>Weights</h1><img class="equip" src="images/equipment1.jpg" alt="Weight

Equipment" height="195" width="260"><p>Our facility includes a weight training area with several weight

options. Build lean muscle with weights and improve your core with weight training.</p> <ul>

<li>Dumbbells</li><li>Kettle bells</li><li>Barbells</li>

</ul><br> about.html (cont.)


<h1>Cardio</h1><img class="equip" src="images/equipment2.jpg" alt="Cardio

Equipment" height="195" width="260"><p>Burn fat through cardio workouts. If you need to lose 20 lbs or more,

include at least 30 minutes of cardio each day. We have several equipment choices for your workout.</p>

<ul><li>Treadmills</li><li>Elliptical Machines</li><li>Exercise Bikes</li>

</ul><br><h1>Personal Training</h1>

<img class="equip" src="images/equipment3.jpg" alt="Personal Training" height="195" width="260">

<p>Our certified personal trainers work with you one on one to help you obtain your fitness goals. Our personal trainers keep you motivated and push you farther than you would push yourself. When you feel like you cannot do one more rep, they tell you that you can. Personal training has many benefits.</p>

about.html (cont.)


<ul><li>Accountability</li><li>Personalized Program</li><li>Consistent Support and Motivation</li>

</ul><br><h1>Common Exercises</h1>

<p>The following are common exercises that we encourage our clients to do as part of their daily exercise routine.</p><dl>

<dt>Burpee</dt><dd>Burpees are a great, full body exercise to increase your strength and

endurance. Begin in a standing position, drop into a squat and extend your hands forward, kick your feet back and then forward again quickly, and then jump up from a squatted position.

<br></dd><dt>Plank</dt><dd>Planks build your core strength. To perform a plank, get in a push up

position and rest your forearms on the floor. Hold the position as long as you can.<br></dd>

about.html (cont.)

<dt>Mountain Climber</dt><dd>Mountain climbers are a good cardio exercise. Place your hands

on the floor in a push up position, then bring one knee up to your chest and then switch as quickly as you can (as though you are climbing a mountain).

<br></dd></dl>

<p>For more information about how to stay active, visit <a href="http://www.fitness.gov/be-active/ways-to-be-active/">fitness.gov</a>.</p></main><footer>

© Copyright 2015. All Rights Reserved.<br><a href="mailto:[email protected]">[email protected]</a></footer></div></body></html>

about.html (cont.)

<!DOCTYPE html><html lang="en"><head>


</head><body>

<div id="container"><header>

<a href="fitness03.html"><img src="images/ffc_logo.png" alt="Forward Fitness Club logo" height="275" width="845"></a>

</header>

Figure 3c. contact.html




</nav>

contact.html (cont.)

<main>

<h2>Ready to get started? Contact us today.</h2> <p>We are located at:<br>

25743 Bloom Court<br>Locket, GA 85524</p>

<p>Phone Number<br><a class="mobile" href="tel:8145559608">(814)

555-9608</a>(814) 555-9608</p><p>Email Address<br><a

href="mailto:[email protected]">[email protected]</a></p><br><br></main>


PART II

VideoYour turn … ‘hw’


HW- HTML#3HTML#3 assigned HW(type the following URL)http://barney.gonzaga.edu/~chenta/html03/hw/ski03.htmlhttp://barney.gonzaga.edu/~chenta/html03/hw/ski03.html

http://barney.gonzaga.edu/~chenta/html03/ski03-v2.htmlhttp://barney.gonzaga.edu/~chenta/html03/hw/ski03-v2.html

Follow the steps stated on pp. 127-129 (Extend Your Knowledge) in the html text.

Please note that the file name should be ski03.html







Background image.

skio03.html of html03 ‘hw’ (it is required to use of Relative Path to

retrieve/re-use)[to be studied in the ‘second half’

of the html03]


Relative Paths• A relative path specifies a file’s location in relation to the

location of the current document• If you want to go one level up the folder tree, you start the

relative path with a double period (/../) then provide the name of the file.

• Q: • A: • To specify a different folder on the same level, known as a

sibling folder, you move up the folder tree using the double period (..) and then down the tree using the name of the sibling folder

• You should almost always use relative paths in your links

a two double periods _________how to move “two” levels” up?

../../



hw(new folder)

images [folder]


For html03




legal.pdf




ski.jpg

Relative Paths (cont.)How can ski03.html access mailbox.gif and wall.gif image files from the “images” folder under public_html (which is your personal web page?

<body background = “____________/wall.gif“>



css [folder]

../../ images

How to re-use mailbox.gif saved previously for ski03.html? (see next slide)


Adding a Subject to an E-Mail Link and Background color using “images” and “Relative Path”

web2: In css file (styles-myweb.css) that we will learn in html04<body background: url("../../images/wall.gif“)>

Please note that you need to figure out how to add “mailbox.gif” and background color in this hw with “relative path”. How?

<img src="../../images/mailbox.gif“ height="36" width="36" alt="Mailbox logo”



hw(new folder)

images [folder]


For html03




legal.pdf




ski.jpg


<body background = “____________/wall.gif">



css [folder]

../../ images

<img src="../../images/mailbox.gif" height="36" width="36" alt="Mailbox logo"/>


Hyperlinks that link to other webpages within the same website are known as _____.

a. relative links b. image links c. absolute links d. email links

ANSWER: ________a


Background image.



of the html03]


1. when click

3. Display rental agreement (legal.pdf)

2. when click

2. jump to

3. when click

1. jump to


html03 - hwWhat you need to do in addition to described in the text (p.127)1. Create the following new two folders:a) exercise folder and the associated images folder will be used for text book exercise (e.g., fitness03.html and others)b) hw folder and the associated images folder will be used for your homework assignment (e.g., ski03.html and others)your Web Page directory structure should be shown in Figure 22. Download three data files, ski03.html, legal.pdf and ski.jpg, from Bb (available under Assignments Web Assignments and Resources) to your PC. Save ski03.html and legal.pdf in public_html/html03/hw/ folder and ski.jpg in public_html/html03/hw/images/ folder respectively.3. Open the ski03.html by right clicking the file then select “Open with” finally choose Notepad++. A sample template of ski03.html is shown in Figure3.


4. Modify the ski03.html with instructions listed on pages 127-129 and the follows:a) Displays the background color and Mail box picture (mailbox.gif) as shown in Web2. Use “Relative Path” to retrieve the image files (i.e., public_html/images/) created in Web2. b) Display (retrieve) the ski.jpg file from the image folder (i.e., public_html/html03/hw/images/)c) You may add <ul> … </ul>5. When done, test ski03.html by entering your URL (http://barney.gonzaga.edu/~your_userID/html03/hw/ski03.html) on the Web Browser. You also can check the result of your program with my URL http://barney.gonzaga.edu/~chenta/html03/hw/ski03.html6. A sample Web Page (ski03.html) is shown in Figure 4 (also on p.128 – Figure 3-68 of the text)



hw(new folder)

images [folder]


For html03




legal.pdf




ski.jpg


<body background = “____________/wall.gif">



css [folder]

../../ images

<img src="../../images/mailbox.gif" height="36" width="36" alt="Mailbox logo"/>


Background image.



of the html03]


1. when click

3. Display rental agreement (legal.pdf)

2. when click

2. jump to

3. when click

1. jump to

Figure 3. Data file (template) of ski03.html<!DOCTYPE html><html lang="en"><head>

<meta charset="utf-8"><title>Snow Fever</title>

</head><body>

Revise <body> to display background color

<header>

<h1>Snow Fever Ski and Board School</h1><h2>Let it snow, let it snow, let it snow</h2>

</header>

<nav>Events | Lessons | Snow Reports | Employment 

</nav><div id="content">

<h3>Children's Lessons</h3><p>Children's full-day lessons meet from 10 am through 3:30

pm and include lift access, rentals (ski or snowboard), and lunch. All children (ages 4-12) are welcome regardless of ability or prior experience. Our expert ski and snowboard instructors provide special care and attention to teach children the correct way to ski and ride, from the basics of carving turns to safety instruction to advanced lessons and multi-week programs. We focus on having fun in a safe and responsible way!</p>

Revise <nav> … </nav> to link to other page ( see #4 on p.127)

HOW?


<h3>Terrain Park Lessons</h3><p>Our terrain park lessons meet from 12:30 pm to 4 pm at the

base of the Powder Keg Terrain Park and include lift access, rentals (ski or snowboard), and an afternoon snack. We start with the basics and progress through all skill levels. Learn how to ride the rails, half pipe, and jumps. Must be 13 years old. Our proven techniques will teach you how to maneuver through any terrain park in a fun and safe way! </p>

<h3>Adult Lessons</h3><p>Adult full-day lessons from 9 am through 3 pm include lift

access, rentals (ski or snowboard), and lunch. Adults are divided by ability and experience. We have expert instructors for all levels!</p>

<h3>Cost</h3><p>All of our lessons are $100/day. If you prepay for three full

days, you will receive a free season pass to keep practicing your skiing or snowboarding skills for the rest of the season! </p>

<h3>Registration</h3><p>Call or email our Ski School Manager: Kent Hoiberg<br>

1001 West Main Street<br>Breckenridge, Colorado 80425<br><br>Phone: 1-800-555-4SKI<br> E-mail: Write to Kent 

</p></div> <footer>

<p>Our Sponsor: snow.com</p> <p>Lessons 

Top Rental Agreement 

</p></footer>

make telephone link to that number and E-mail link ( see #5,6,7 on p.127)

<br/> <br /><i> This document was last updated on:<script type="text/javascript"> document.write(document.lastModified);</script> by Jason Chen (replaced by your name)</i>

</body></html>

This is required for all HTML

HWs


Test the HTML and View the Source Code

http://barney.gonzaga.edu/~chenta/html03/ski03.htmlhttp://barney.gonzaga.edu/~chenta/html03/hw/ski03.html

http://barney.gonzaga.edu/~chenta/html03/ski03-v2.htmlhttp://barney.gonzaga.edu/~chenta/html03/hw/ski03-v2.html

Use Validator to validate your html file (w errors)

http://barney.gonzaga.edu/~your_ID/html03/hw/ski03.html









7. It is required to “Validate” and “View” your HTML code and debug/correct the code before you submit the assignment (see HTML pp.67-69, 123, 241, 294 or validating document on the Bb for details)8. What/How you should turn in: Fail to provide me with ALL information, you will lose major points

UPLOAD HTML#3 (ski03.html) to the Blackboard. See detailed instruction on the document of “Instruction_Web_Assignments_Bb” available on the Bb. Please note that you should click “Write Submission” to enable the text editor box. Enter the following information in the “2. Assignment Submission” window: Dr. Chen, Here is my HTML#3 (ski03.html) assignment. http://barney.gonzaga.edu/~your_userID/html03/hw/ski03.html <Your Full Name> bmis235-03 (or bmis235-04 or bmis235-05) so that I can record/grade your homework directly on the Bb.

Make the URL linkable


Web Design Directory Structure for html03



hw(new folder)

images [folder]


For html03




legal.pdf




ski.jpg

css[css folder]



public_html [web folder] |

html02[folder for HTML#2] …

…



All other *.jpg image files

All other *.html files


For html03

fitness02.html


hw(new folder)




hw(new folder)


ski03.htmllegal.pdf




ski.jpg

Web Design Directory Structure for All HTML Assignments

images[images folder]


css[folder]



chapter 3: creating web pages with links, images, and embedded style sheets

Documents

file text link

webpage content

webpage texttext link

email links

webpage chapter objectives

absolute links

imageadding links

link anchor element