How to Use HTML to Structure a Web Page
Total Page:16
File Type:pdf, Size:1020Kb
Chapter 3 How to use HTML to structure a web page HTML, XHTML, and CSS, C3© 2010, Mike Murach & Associates, Inc. Slide 1 Objectives Applied 1. Code a properly structured HTML web page using any of the elements and attributes that are presented in this chapter. 2. Given the HTML for a web page, code a relative URL that refers to any file in the directory structure for the web site. HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 2 Objectives (continued) Knowledge 1. Describe the use of the DOCTYPE declaration, the title element in the head section, and metadata. 2. Distinguish between a block element and an inline element. 3. Describe the use of these block elements: div, h1, h2, h3, and p. 4. Describe the use of these inline elements: br, i, b, and span. 5. Describe the use of character entities like or ©. 6. Describe the use of these core attributes: id, class, and title. 7. Distinguish between absolute and relative URLs. 8. Describe the use of the a element. 9. Describe two types of lists that you can create with HTML. 10. Describe the use of the img element. HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 3 The three flavors of HTML 4.01 and XHTML 1.0 Strict Transitional Frameset HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 4 Some common DOCTYPE declarations HTML 4.01 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 5 Common DOCTYPE declarations (continued) XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 6 What HTML version we use in this book In this book, we use XHTML 1.0 because we think the stricter syntax helps you write better code. We use the Transitional flavor because it allows some coding flexibility. Even if you use HTML 4.01, we recommend you follow the syntax for XHTML 1.0. The only difference is that you must omit the backslash for a self-closing tag. HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 7 A head section with a title and a linked icon file <head> <title>San Joaquin Valley Town Hall</title> <link rel="shortcut icon" href="favicon.ico" type="favicon/ico" /> </head> A browser that shows the title and icon Internet Explorer note To display a favicon in Internet Explorer, the page must be displayed from the web server, not from your local file system. HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 8 How the text for the title element is used It is displayed in the browser’s title bar. It may be displayed in the tab for the web page and in the Windows taskbar. It may be used as the name of a favorite or bookmark for the page. It may be used as the name for the page in search engine results. HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 9 The attributes of the link element rel href type HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 10 A head section that includes metadata <head> <title>San Joaquin Valley Town Hall</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="description" content="San Joaquin Valley Town Hall speakers for 2009-2010" /> <meta name="keywords" content="san joaquin, town hall, speaker" /> </head> HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 11 Specifying character encoding with Notepad++ HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 12 Three attributes of the <meta> tag name http-equiv content HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 13 Block elements for headings and paragraphs h1 h2 h3 h4 h5 h6 HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 14 HTML that uses the block elements <h1>San Joaquin Valley Town Hall Programs</h1> <h2>Pre-lecture coffee at the Saroyan</h2> <p>Join us for a complimentary coffee hour, 9:15 to 10:15 a.m. on the day of each lecture. The speakers usually attend this very special event. </p> <h2>Post-lecture luncheon at the Saroyan</h2> <p>Extend the excitement of Town Hall by purchasing tickets to the luncheons. This unique opportunity allows you to ask more questions of the speakers--plus spend extra time meeting new Town Hall friends. </p> <p>A limited number of tickets are available. Call (559) 555-1212 for reservations by the Friday preceding the event. </p> HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 15 The block elements in a web browser HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 16 Block elements for special types of text pre blockquote address HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 17 HTML that uses the block elements <p>How to use JavaScript to display the year:</p> <pre> var today = new Date(); document.writeln( today.getFullYear() ); </pre> <p>Ernest Hemingway wrote: <blockquote>"Cowardice, as distinguished from panic, is almost always simply a lack of ability to suspend the functioning of the imagination."</blockquote> </p><br /> <p>How to contact Mike Murach & Associates:</p> <address>1-800-221-5528<br /> <a href="[email protected]"> [email protected]</a> </address> HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 18 The block elements in a web browser HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 19 Common inline elements for formatting and emphasizing text i em b strong code sub sup br HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 20 HTML that uses the inline elements <p>If you don't get 78% on your final, <em>you won't pass the class.</em></p> <p>Save a bundle at our <strong>big yearend sale</strong>.</p> <p>HTML stands for <i>Hypertext Markup Language</i>.</p> <p>Please be sure to boldface <b>Murach</b> in the company logo.</p> <p>You can use <code>strong</code> or <code>em</code> to emphasize text.</p> <p>The chemical symbol for water is H<sub>2</sub>O.</p> <p>Your payment is due on the 4<sup>th</sup> of each month.</p> <p>"To sleep, perchance to dream-<br />ay, there's the rub."</p> HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 21 The inline elements in a web browser HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 22 Common HTML character entities Entity Character & & < < > > © © ® ® ™ ™ ¢ ¢ ° º ± ± ‘ ‘ (opening single quote). ’ ’ (closing single quote or apostrophe). “ “ (opening double quote). HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 23 Common HTML character entities (continued) Entity Character ” ” (closing double quote). A non-breaking space. It will always be displayed. HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 24 Examples of character entities <p>It’s time to start your Christmas shopping!</p> <p>President John F. Kennedy said, “And so, my fellow Americans, ask not what your country can do for you; ask what you can do for your country.”</p> <p> Turning fear into hope, medical futurist Dr. Alan J. Russell will discuss the science of regenerating damaged or diseased human body parts, while offering real hope for the future of human health.</p> <p>© 2009 Mike Murach & Associates, Inc.</p> HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 25 The character entities in a web browser HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 26 A block element for structuring a web page div An inline element for structuring text span HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 27 A page that uses div and span elements <body> <div id="page"> <div id="main"> <h1>San Joaquin Valley Town Hall</h1> <p><span id="welcome">Welcome to San Joaquin Valley Town Hall.</span> We have some amazing speakers in store for you this season!</p> </div> <div id="footer"> <p>© Copyright 2009 San Joaquin Valley Town Hall.</p> </div> </div> </body> HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 28 The page displayed in a web browser HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 29 Core HTML attributes id class title lang xml:lang HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 30 HTML that uses these attributes <div id="main"> <h1>San Joaquin Valley Town Hall</h1> <p class="first">Welcome to San Joaquin Valley Town Hall.</p> <form action="subscribe.php" method="post"> <p>Please enter your e-mail address to subscribe to our newsletter.</p> <p class="first field">E-Mail: <input type="text" name="email" id="email" title="Enter e-mail here." /></p> <p><input type="submit" value="Subscribe"/></p> </form> </div> HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc.