Chapter 2 Building a Webpage Template with HTML

Chapter 2: Building a Webpage Template with HTML 5 [Learning by Doing] Jason C. H. Chen, Ph. D. Professor of MIS School of Business Administration Gonzaga University Spokane, WA 99258 chen@gonzaga. edu Dr. Chen, Management Information Systems - HTML

Objectives • Explain how to manage website files • Describe and use HTML 5 semantic elements • Determine the elements to use when setting the structure of a webpage • Design and build a semantic wireframe • Create a webpage template • Insert comments in an HTML document Dr. Chen, Management Information Systems - HTML 2

Objectives (continued) • Add static content to a webpage template • Insert symbol codes and other character entities • Describe the benefits of validating web documents • Validate an HTML template • Create a home page from an HTML template • Add unique content to a webpage Dr. Chen, Management Information Systems - HTML 3

Web Design Directory Structure for html 02 public_html [web folder] index. html css [folder] images [images folder] myself. pptx myresume. docx styles-web 1. css book. gif, events. gif styles-myweb. css gcan. gif, wall. gif mailbox. gif, worm. gif html 02 [folder for HTML#2] exercise (new folder) fitness 02. html What’s new here? How do you create it? Dr. Chen, Management Information Systems - HTML hw (new folder) ski 02. html For html 02

Web Page Assignments in HTML Text • Starting from html 02 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 - HTML 5

Type the following URLs For web 2 http: //barney. gonzaga. edu/~chenta 2 What’s the difference on those URLs? For exercise http: //barney. gonzaga. edu/~chenta/html 02/exercise/fitness 02. html For hw http: //barney. gonzaga. edu/~chenta/html 02/hw/ski 02. html Dr. Chen, Management Information Systems - HTML 6

fitness 02. html (shall be linkable in the later chapters) Dr. Chen, Management Information Systems - HTML

ski 02. html (shall be linkable in the later chapters) Dr. Chen, Management Information Systems - HTML

Designing a Website • Designing a website includes the following: – Planning – Articulating the website’s purpose – Identifying the target audience – Creating a site map and wireframe (storyboard) – Selecting graphics and colors to use in the site – Determining whether to design for an optimal viewing experience across a range of devices Dr. Chen, Management Information Systems - HTML 9

Site Map • Site map indicates how the pages in a website relate to each other • For example, the webpages of the Forward Fitness Club website will include the following content: – Home page: Introduces the fitness center and its mission statement – About Us page: Showcases the facility’s equipment and services Dr. Chen, Management Information Systems - HTML 10

Site Map (continued 1) – Classes page: Includes a schedule of available group training and fitness classes – Nutrition page: Provides nutrition tips and simple meal plans – Contact Us page: Provides a phone number, email address, physical address, and form for potential clients to request additional information about the fitness center’s services Dr. Chen, Management Information Systems - HTML 11

Site Map (continued 2) Dr. Chen, Management Information Systems - HTML 12

Dr. Chen, Management Information Systems - HTML

Wireframe (Storyboard) • Wireframe depicts the layout of a webpage, including its major content areas Dr. Chen, Management Information Systems - HTML 14

File Management • Websites use several types of files, including HTML files, image files, media such as audio and video files, and CSS files • Each site must follow a systematic method to organize its files • The main folder, also called the root folder, contains all files and other folders for the website Dr. Chen, Management Information Systems - HTML 15

File Management (continued) Dr. Chen, Management Information Systems - HTML 16

Web Design Structure (web 2) public_html [web folder] index. html myself. pptx myresume. docx Dr. Chen, Management Information Systems - HTML css [css folder] styles-web 1. css styles-myweb. css images [images folder] gook. gif, events. gif gcan. gif, wall. gif mailbox. gif, worm. gif

Web Design Directory Structure for html 02 public_html [web folder] index. html css [folder] images [images folder] myself. pptx myresume. docx styles-web 1. css book. gif, events. gif styles-myweb. css gcan. gif, wall. gif mailbox. gif, worm. gif html 02 [folder for HTML#2] exercise (new folder) fitness 02. html What’s new here? How do you create it? Dr. Chen, Management Information Systems - HTML hw (new folder) ski 02. html For html 02

Web Design Directory Structure for All HTML Assignments public_html [web folder] | css index. html images [folder] [images folder] myself. pptx myresume. docx html 02 [folder for HTML#2] html 04 [folder for HTML#4] … html 08 [folder for HTML#8] … styles-web 1. css styles-myweb. css book. gif, events. gif exercise gcan. gif, wall. gif (new folder) mailbox. gif, worm. gif fitness 02. html hw (new folder) ski 02. html Your Personal Web Page Dr. Chen, Management Information Systems - HTML … exercise (new folder) fitness 034 html about. html contact. html images css [images [folder] styles. css ffc_logo. png equipment 1. jpg equipment 2. jpg equipment 3. jpg hw (new folder) … All other *. html files images [images folder] css ski 04. html images [folder] legal. pdf [images folder] styles 04. css All other *. jpg image files ski. jpg 19

Four Basic HTML 5 Semantic Elements div id=“container” header nav main footer Dr. Chen, Management Information Systems - HTML provides new tools for improving/structuring webpage design, including semantic elements for specific types of content

Using HTML 5 Semantic Elements Dr. Chen, Management Information Systems - HTML 21

The _____ tags contain the primary content of a webpage. a. <head> and </head> b. <page> and </page> c. <nav> and </nav> d. <main> and </main> D ANSWER: _______ Dr. Chen, Management Information Systems - HTML

Four basic HTML 5 Semantic Elements and Ten basic structure of the Source Code in HTML 5 Dr. Chen, Management Information Systems - HTML 23

Q: A _____ element contains hyperlinks to other webpages within a website. a) head b) title c) nav d) footer c Answer: _______ Dr. Chen, Management Information Systems - HTML

<!DOCTYPE html>  <html lang="en“> <head> <meta charset="utf-8"> <title> … </title> </head> <body>  <header> … </header>  <nav> … </nav>  <main> … </main> or <div id="content". . </div>)  <footer> … </footer>  <br/> <i> This document was last updated on: <script type="text/javascript"> document. write(document. last. Modified); </script> by Jason Chen (replaced by Your Name)</i> </body> </html> Dr. Chen, Management Information Systems - HTML

Using Symbol Entities • Symbols can be added to an HTML webpage by typing its HTML entity name _____ or entity _____ number • Inserting an HTML character entity in the code displays a reserved HTML character on the webpage • Entity name is an abbreviated name • Entity number is a combination of the pound sign (#) and a numeric code Dr. Chen, Management Information Systems - HTML 26

Using Symbol Entities (continued) Also see Table E-1: Commonly Used Characters (APP 37) http: //websemantics. co. uk/resources/common_symbols/ Dr. Chen, Management Information Systems - HTML 27

The entity number for the copyright symbol is _____. a. b. c. d. &169#; 169#&; © #169&; C ANSWER: _______ Dr. Chen, Management Information Systems - HTML

Validating HTML Documents (pp. 67 -69) • After the creation of an HTML file, the document is validated to verify the validity of the HTML code • A validator checks for errors, indicates where they are located, and suggests corrections • If the validator detects an error in an HTML code, it displays a warning in the header bar • A Result line below the header bar shows the number of errors in the document Dr. Chen, Management Information Systems - HTML 29

To Validate Webpages • Perform the following steps to validate an HTML document: – Open a browser and type http: //validator. w 3. org/ in the address bar to display the W 3 C 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) Dr. Chen, Management Information Systems - HTML 30

Dr. Chen, Management Information Systems - HTML

Your turn … ‘exercise’ (Create a Webpage Template Document) Dr. Chen, Management Information Systems - HTML 32

Steps before downloading web resources • Create a folder of html 02 under mis 235 -0 x-public_html on c: (or d: ) drive • Create a folder of exercise under html 02 • Create a folder of hw under html 02 • When all done upload them to your web folder (public_html) Dr. Chen, Management Information Systems - HTML

Your turn … ‘exercise’ (Create a Webpage Template Document) 0. File name to be changed: index. html (p. 70) should be changed to fitness 02. html (why? ) 1. Create the following new folders: a folder of html 02 under public_html directory Therefore, the Web Design Directory Structure for html 02 shall be: public_html/html 02/ Further create two folders under html 02: exercise and hw. Note that: a) exercise folder will be used for text book exercise (e. g. , public_html/html 02/exercise /fitness 02. html and others) b) hw folder will be used for your homework assignment (e. g. , public_html/html 02/hw/ski 02. html and others) your Web Page directory structure should be organized as in Figure 1 Dr. Chen, Management Information Systems - HTML 34

html 02 -exercise (cont. ) 2. Download two (2) data files from Bb for html 02: fitness 02. html (for chapter exercise) and ski 02. html (for chapter hw) to your PC (available under Assignments Web Assignments and Resources) and save them in public_html/html 02/exercise/ and public_html/html 02/hw/ folders respectively. 3 a. Open fitness 02. html using Notepad++ 3 b. Follow all steps on pp. 59 -63 and 70 -72 to create and check the webpage. (You should be PATIENT to learn) 4. Modify the fitness 02. html as shown in Figure 3 (and read the text book). Upload fitness 02. html to public_html/html 02/exercise/ 35 Dr. Chen, Management Information Systems - HTML

Web Design Directory Structure for html 02 public_html [web folder] index. html css [folder] images [images folder] myself. pptx myresume. docx styles-web 1. css book. gif, events. gif styles-myweb. css gcan. gif, wall. gif mailbox. gif, worm. gif html 02 [folder for HTML#2] exercise (new folder) fitness 02. html What’s new here? How do you create it? Dr. Chen, Management Information Systems - HTML hw (new folder) ski 02. html For html 02

<!DOCTYPE html>  <html lang="en“> <head> <meta charset="utf-8"> <title> … </title> </head> <body>  <header> … </header>  <nav> … </nav>  <main> … </main> or <div id="content". . </div>)  <footer> … </footer>  <br/> <i> This document was last updated on: <script type="text/javascript"> document. write(document. last. Modified); </script> by Jason Chen (replaced by Your Name)</i> </body> </html> Dr. Chen, Management Information Systems - HTML

Add Content to the Webpage • Follow all steps on pp. 63 -66 to create a webpage template • Name it as: fitness 02. html (not index. html – why? ) • The webpage is displayed as follows: Dr. Chen, Management Information Systems - HTML 38

<!DOCTYPE html>  <html lang="en"> <head> <title>Forward Fitness Club</title> <meta charset="utf-8"> </head> <body>  <header> Forward Fitness Club </header> Dr. Chen, Management Information Systems - HTML 39

<nav> Home About Us Classes Nutrition Contact Us </nav>  <main> <p>Welcome to Forward Fitness Club. Our mission is to help our clients meet their fitness and nutrition goals. </p> … (to be completed) … </main> Dr. Chen, Management Information Systems - HTML 40

<footer> © Copyright 2017. All Rights Reserved. forwardfitness@club. net </footer>  <br/> <i> This document was last updated on: <script type="text/javascript"> document. write(document. last. Modified); </script> This is by Jason Chen (replaced by Your Name) required for all HTML </i> HWs </body> </html> Dr. Chen, Management Information Systems - HTML 41

html 02 -exercise (cont. ) • 5. When modification is done, test fitness 02. html on local drive and then copy it (upload) to your H: drive (your url). Further, test it on a browser by entering your URL: (the exercise is not required to upload to the Bb) (http: //barney. gonzaga. edu/~your_user. ID/html 02/exerci se/fitness 02. html) on a Web Browser. • You also can check the result of your program on the following URL http: //barney. gonzaga. edu/~chenta/html 02/exercise/fitn ess 02. html • When you completed exercise (fitness 02. html), repeat steps 4 and 5 for hw (ski 02. html) Dr. Chen, Management Information Systems - HTML 42

Exercise practice • Create fitness 02. html • A Complete Version of fitness 02. html for ‘exercise’ is available in Figure 3 Dr. Chen, Management Information Systems - HTML 43

Figure 6: Web Design Directory Structure for All HTML Assignments public_html [web folder] | css index. html images [folder] [images folder] myself. pptx myresume. docx html 02 [folder for HTML#2] html 04 [folder for HTML#4] … html 08 [folder for HTML#8] … styles-web 1. css styles-myweb. css book. gif, events. gif exercise gcan. gif, wall. gif (new folder) mailbox. gif, worm. gif fitness 02. html hw (new folder) ski 02. html Your Personal Web Page Dr. Chen, Management Information Systems - HTML … exercise (new folder) fitness 034 html about. html contact. html images css [images [folder] styles. css ffc_logo. png equipment 1. jpg equipment 2. jpg equipment 3. jpg hw (new folder) … All other *. html files images [images folder] css ski 04. html images [folder] legal. pdf [images folder] styles 04. css All other *. jpg image files ski. jpg 44

Part II • html 02 -hw (ski 02. html) Dr. Chen, Management Information Systems - HTML 45

What you should do for html 02 ski 02. html) (Extend YK: pp. 75 -76) 0. File name to be changed: index. html (p. 70) should be changed to fitness 02. html (why? ) DONE 1. Create the following new folders: a folder of html 02 under public_html directory Therefore, the Web Design Directory Structure for html 02 shall be: public_html/html 02/ Further create two folders under html 02: exercise and hw. Note that: a) exercise folder will be used for text book exercise (e. g. , public_html/html 02/exercise /fitness 02. html and others) b) hw folder will be used for your homework assignment (e. g. , public_html/html 02/hw/ski 02. html and others) your Web Page directory structure should be organized as in Figure 1 Dr. Chen, Management Information Systems - HTML 46

Web Design Directory Structure for html 02 public_html [web folder] index. html css [folder] images [images folder] myself. pptx myresume. docx styles-web 1. css book. gif, events. gif styles-myweb. css gcan. gif, wall. gif mailbox. gif, worm. gif html 02 [folder for HTML#2] exercise (new folder) fitness 02. html hw (new folder) ski 02. html For html 02 Dr. Chen, Management Information Systems - HTML

html 02 -hw (cont. ) DONE 2. Download two (2) data files from Bb for html 02: fitness 02. html (for chapter exercise) and ski 02. html (for chapter hw) to your PC (available under Assignments Web Assignments and Resources) 3. Open the ski 02. html. A sample template of ski 02. html is shown in Figure 4. … 6. Modify the ski 02. html with instructions listed on page 75 -76 (be patient and use your intelligence). Dr. Chen, Management Information Systems - HTML 48

<!DOCTYPE html  <html lang=“en”> <head> <title> Snow Fever Ski and Board School (by Jason Chen) <meta charset="utf-8"> </title> </head> <body>. . . <i> This document was last updated on: <script type="text/javascript"> document. write(document. last. Modified); </script> by (Your Name here) </i>. . . </body> </html> Dr. Chen, Management Information Systems - HTML

<!DOCTYPE html>  <html lang=“en”> <head> <meta charset="utf-8"> <title>Snow Fever</title> </head> Header for a section <body> or page (How? ) <div id="header"> (see next slide for detailed instruction) </div> (HTML 5) Dr. Chen, Management Information Systems - HTML

<head> <meta charset="utf-8"> <title>Snow Fever</title> </head> <body> Header for a section or page (HTML 5) <div id="header"> </div> <div id=“name”>. . </div> <header> <h 1>Snow Fever Ski … </h 1> <h 2>Let it snow, let … </h 2> </header> <div id="navigation"> main: specifies the main content area of the page (HTML 5) Q 1(b) on page 75: How to replace the <nav> … </nav> </div> <div id=“main"> </div> <div id="footer"> </div> Dr. Chen, Management Information Systems - HTML How about id= “main”? <main> <p>… </p> </main> <footer> … </footer>

Follow step 1 on p. 75 (HTML 5 text): Modify code in ski 02. html to update it to semantic HTML 5 as show in Figure below (Fig 2 -34): Dr. Chen, Management Information Systems - HTML

Paragraph, automatically inserts a blank line between text <main> <p>Our ski and snowboard lessons will be starting soon. </p> <p>We provide group classes and private lessons. </p> <p>Ski Instructor: Kent Hoiberg main: specifies the 1001 West Main Street main Breckenridge, Colorado 80425 content area of the page </p> (HTML 5) <p>Phone: 1 -800 -555 -4 SKI E-mail: kent@ilovesnow. com </p> </main> Dr. Chen, Management Information Systems - HTML

<br/> <i> This document was last updated on: <script type="text/javascript"> document. write(document. last. Modified); </script> by Jason Chen (replaced by your name) </i> </body> </html> Dr. Chen, Management Information Systems - HTML This is required for all HTML HWs

A Sample Web Page for ski 02. html Required for all HTML HWs Dr. Chen, Management Information Systems - HTML

html 02 -hw (cont. ) 6. When done, test ski 02. html by entering your URL: • (http: //barney. gonzaga. edu/~your_user. ID/html 02/hw/ski 02. html) on the Web Browser. You also can check the result of your program on the following URL http: //barney. gonzaga. edu/~chenta/html 02/hw/ski 02. ht ml 7. A sample Web Page (ski 02. html) is shown in Figure 3 (also on p. 75 – Figure 2 -34 of the text) 8. 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) Dr. Chen, Management Information Systems - HTML 56

9. What/How you should turn in: Fail to provide me with ALL information, you will lose major points UPLOAD HTML#2 (ski 02. 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: Make the URL linkable Dr. Chen, Here is my HTML#2 (ski 02. html) assignment. http: //barney. gonzaga. edu/~your_user. ID/html 02/hw/ski 02. html <Your Full Name> bmis 235 -03 (or bmis 235 -04 or bmis 235 -05) so that I can record/grade your homework directly on the Bb. Dr. Chen, Management Information Systems - HTML 57

HTML 5 & CSS 3 8 th Edition Chapter 2 Complete Dr. Chen, Management Information Systems - HTML