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 HTML 4.01 Transitional XHTML 1.0 Strict
HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 5 Common DOCTYPE declarations (continued) XHTML 1.0 Transitional XHTML 1.1
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
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
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 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
San Joaquin Valley Town Hall Programs
Pre-lecture coffee at the Saroyan
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.
Post-lecture luncheon at the Saroyan
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.
A limited number of tickets are available. Call (559) 555-1212 for reservations by the Friday preceding the event.
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
How to use JavaScript to display the year:
var today = new Date(); document.writeln( today.getFullYear() );
Ernest Hemingway wrote:
"Cowardice, as distinguished from panic, is almost always simply a lack of ability to suspend the functioning of the imagination."
How to contact Mike Murach & Associates:
1-800-221-5528[email protected]
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
If you don't get 78% on your final, you won't pass the class.
Save a bundle at our big yearend sale.
HTML stands for Hypertext Markup Language.
Please be sure to boldface Murach in the company logo.
You can use strong
or em
to emphasize text.
The chemical symbol for water is H2O.
Your payment is due on the 4th of each month.
"To sleep, perchance to dream-
ay, there's the rub."
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
It’s time to start your Christmas shopping!
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.”
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.
© 2009 Mike Murach & Associates, Inc.
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
San Joaquin Valley Town Hall
Welcome to San Joaquin Valley Town Hall. We have some amazing speakers in store for you this season!
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
San Joaquin Valley Town Hall
Welcome to San Joaquin Valley Town Hall.
HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 31 HTML in a web browser with a tooltip displayed
HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 32 A simple web site directory structure
HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 33 Examples of absolute and relative URLs Absolute URLs http://www.murach.com/index.html http://www.murach.com/books/javascript/toc.html
Relative URLs that are based on the root\books directory index.html (refers to root\books\index.html) javascript/overview.html (refers to root\books\javascript\overview.html)
HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 34 Examples of absolute and relative URLs (cont.) Relative URLs that navigate up from root\books\javascript ../index.html (refers to root\books\index.html) ../../index.html (refers to root\index.html) /login.html (refers to root\login.html) /images/murachlogo.gif (refers to root\images\murachlogo.gif)
HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 35 Basic attribute of the tag href A link to a web page in the same directory Go view our product list. Read about the services we provide.
HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 36 A link to a web page based on the root directory
View your shopping cart.
A link to a web page at another web siteTo learn more about JavaScript, visit the official JavaScript web site.
HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 37 The links in a web browser
HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 38 Elements that create ordered and unordered lists ul ol li
HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 39 HTML that creates two lists
We have books on a variety of languages, including
- Java
- JavaScript
- Visual Basic
- C#
- C++
You will need to complete the following steps:
- Enter your billing information.
- Enter your shipping information.
- Confirm your order.
HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 40 The lists in a web browser
HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 41 Attributes of the tag src alt longdesc height width An img element
Mike Murach & Associates, Inc.
HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 42 The image in a web browser
HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 43 Common image formats JPEG (Joint Photographic Experts Group) GIF (Graphic Interchange Format) PNG (Portable Network Graphics)
HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 44 A web page
HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 45 The HTML file for the web page
San Joaquin Valley Town Hall
Bringing cutting-edge speakers to the valley
HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 46 The HTML file for the web page (continued)
2009-2010 guest speakers
- October 14, 2009: Dr. Alan J. Russell
- November 18, 2009: Dr. Edward Diener
- January 20, 2010: David Brancaccio
- February 17, 2010: Robert Fitzpatrick
- March 17, 2010: Juan Williams
- April 21, 2010: Steve Coll
HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 47 The HTML file for the web page (continued)
Contact us by phone at (559) 555-1212 for ticket information.
HTML, XHTML, and CSS, C3 © 2010, Mike Murach & Associates, Inc. Slide 48