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 Administration Gonzaga University Spokane, WA 99258 [email protected]
84
Embed
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets
Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets. Jason C. H. Chen, Ph.D. Professor of MIS School of Business Administration Gonzaga University Spokane, WA 99258 [email protected]. Chapter Objectives. - PowerPoint PPT Presentation
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
Dr. Chen, Management Information Systems - HTML3
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
Dr. Chen, Management Information Systems - HTML4
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
• 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
Dr. Chen, Management Information Systems - HTML7
• 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
Dr. Chen, Management Information Systems - HTML8
• 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
Dr. Chen, Management Information Systems - HTML9
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
Dr. Chen, Management Information Systems - HTML10
• 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
Dr. Chen, Management Information Systems - HTML11
• 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>
The _____ attribute is used to identify the image file being inserted in a webpage.
a. src b. url c. loc d. load
ANSWER: ________a
Dr. Chen, Management Information Systems - HTML13
• 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
Dr. Chen, Management Information Systems - HTML14
• 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
Dr. Chen, Management Information Systems - HTML15
• 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
Dr. Chen, Management Information Systems - HTML16
Image File Formats (continued 1)
Dr. Chen, Management Information Systems - HTML17
• 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
Dr. Chen, Management Information Systems - HTML18
• <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
• 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?
<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?
Dr. Chen, Management Information Systems - HTML31
• 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:
Adding Headings and Lists (continued 2)
<ol>
</ol>
<li>First item</li><li>Second item</li>
Dr. Chen, Management Information Systems - HTML32
• 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
Adding Headings and Lists (continued 3)
Dr. Chen, Management Information Systems - HTML33
• The following code creates a description list of two terms and definitions:
Adding Headings and Lists (continued 4)
<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
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).
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
Dr. Chen, Management Information Systems - HTML37
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.
Dr. Chen, Management Information Systems - HTML38
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
Dr. Chen, Management Information Systems - HTML39
• 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
Dr. Chen, Management Information Systems - HTML40
– 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)
Dr. Chen, Management Information Systems - HTML
• 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
Dr. Chen, Management Information Systems - HTML42
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
Dr. Chen, Management Information Systems - HTML
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/)
Figure 1. Web Design Directory Structure for html03 Assignment
index.htmlmyself.pptxmyresume.docx
styles-web1.cssstyles-myweb.css
css [folder]
Dr. Chen, Management Information Systems - HTML45
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.
Dr. Chen, Management Information Systems - HTML
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
Dr. Chen, Management Information Systems - HTML47
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
Fig. 3-a. A Complete Version of fitness03.html for exercise<!DOCTYPE html><html lang="en"><!-- This website template was created by: Student's First Name Student's Last Name --><head>
</head><body> <div id="container"> <!-- Use the header area for the website name or logo --> <header> <a href="fitness03.html"><img src="images/ffc_logo.png" alt="Forward Fitness Club logo" height="275" width="845"></a> </header>
Dr. Chen, Management Information Systems - HTML50
<!-- Use the nav area to add hyperlinks to other pages within the website --><nav>
<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.)
Dr. Chen, Management Information Systems - HTML55
<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.)
Dr. Chen, Management Information Systems - HTML56
<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><!-- Use the footer area to add webpage footer content --><footer>
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
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“>
index.htmlmyself.pptxmyresume.docx
styles-web1.cssstyles-myweb.css
css [folder]
../../ images
How to re-use mailbox.gif saved previously for ski03.html? (see next slide)
Dr. Chen, Management Information Systems - HTML66
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?
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?
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
Dr. Chen, Management Information Systems - 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]
Dr. Chen, Management Information Systems - HTML
1. when click
3. Display rental agreement (legal.pdf)
2. when click
2. jump to
3. when click
1. jump to
Dr. Chen, Management Information Systems - HTML71
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.
Dr. Chen, Management Information Systems - HTML72
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)
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?
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]
Dr. Chen, Management Information Systems - HTML
1. when click
3. Display rental agreement (legal.pdf)
2. when click
2. jump to
3. when click
1. jump to
Dr. Chen, Management Information Systems - HTML76
Figure 3. Data file (template) of ski03.html<!DOCTYPE html><!-- ********************************************************** Author: Jason Chen; File name: ski03.html Open this file and further revise for your web assignment and then save into an appropriate file name such as web1.html (note: html not text) Date: 1/25/2017 BMIS235-01 ROW: 1 *************************************************************--><!-- This website template was created by: Student's First Name Student's Last Name --><html lang="en"><head>
<meta charset="utf-8"><title>Snow Fever</title>
</head><body>
Revise <body> to display background color
Dr. Chen, Management Information Systems - HTML
<header><!--Insert an image with a link to http://www.breckenridge.com-->
<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 <!--Insert 4 links to other webpages-->
</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?
Dr. Chen, Management Information Systems - HTML78
<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>
Dr. Chen, Management Information Systems - HTML79
<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> <!--Insert phone link-->E-mail: Write to Kent <!--Insert email link-->
</p></div> <!--end content--><footer>
<p>Our Sponsor: snow.com</p> <!--Insert http://www.snow.com link--><p>Lessons <!--Insert link to content-->
Top <!--Insert link to top-->Rental Agreement <!--Insert link to rental agreement-->
</p></footer>
make telephone link to that number and E-mail link ( see #5,6,7 on p.127)
Dr. Chen, Management Information Systems - HTML
<!-- the following is required for all assignments --><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>
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.