Castro Chapter 3


Published on

Published in: Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Castro Chapter 3

  1. 1. BASIC HTMLSTRUCTUREHTML5 & CSS Visual Quickstart GuideChapter 3
  2. 2. Starting Your Web Page• First, a warning: do NOT copy and paste from this (or any other) PowerPoint! • Some characters will not copy correctly, and will break your HTML • Plus, it’s plagiarism :-P• Begin with a DOCTYPE declaration • <!doctype html>• To begin the HTML portion, type: • <html lang=“language-code”> • language-code is the language code that matches the default language of your page’s content. For instance, <html lang=“en”> for English or <html lang=“fr”> for French.
  3. 3. Creating the Foundation• Web pages divided into two main sections • The head • Defines the title of the page • Provides information about your page to search engines, like Google • Adds style sheets • Defines scripts to be used in the page (such as in JavaScript <head> <title>Title</title> </head> • The title is the only part visible to the audience • The body • After closing </head> tag, type <body> • Leave a few spaces for your content (your text and other parts of the body of your page • Close with </body>
  4. 4. Declaring the Encoding• Encoding tells what character set to use • Yes, there is more than one! • Several versions of Unicode, Chinese, 3 or 4 Japanese codesets, Korean, Simplified Chinese, Traditional Chinese, Western Latin (several varieties), Western Roman, and various Mac- and Windows-specific flavors of Western• If omitted, browser will use default character encoding • windows-1252 for English Windows • x-mac-roman for English Macintosh• Specify in the head section: • <meta http-equiv=“content-type” content=“text/html; charset=utf-8” />
  5. 5. Creating a Title• This is required in XHTML!• Should be short and descriptive• Usually, the Title will appear in the title bar and/or tab• Title used by search indexes like Yahoo, Google, and Bing, as well as in your visitors’ browsers’ history lists and bookmarks • <title>My Web Page</title>• No links, formatting, images, etc.; just text!
  6. 6. Creating Headings• HTML provides for up to six levels of headers in your Web page, to divide your page into manageable chunks• In the body, type <hn> where n is a number from 1 to 6• Type the contents of the header• Type </hn>, where n is the same number • <h1>Biography</h1> • <h4>Personal Life</h4>
  7. 7. Understanding HTML5’s DocumentOutline• Each HTML document has an underlying outline, like a table of contents• HTML5 provides four sectioning content elements that mark distinct sections within a document • article • aside • nav • section• Each sectioning element has its own h1-h6 heirarchy • So you can have more than one h1 in a page• Look at these two examples: • •
  8. 8. Creating a Header• The header element is good for a section of a page with introductory or navigational content• Can have more than one header element! For example, one for the masthead and one for the navigation bar• <header> <nav> <ul> <li><a href=“#gaudi”>Barcelona’s Architect</a></li> <li lang=“es”<a href=“#sagrada-familia”>La Sagrada Familia</a></li> <li><a href=“#park-guell”>Park Guell</a></li> </ul> </nav> </header>
  9. 9. Creating an Article• An article can be used to contain content like a newspaper article, but that’s not all! • In HTML5, “article” is more akin to “item”• Definition of article, according to HTML5 spec: • The article element represents a self-contained composition in a document, page, application, or site and is, in principle, independently distributable or reusable, e.g., in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content• Now, on to creating it! • Use the <article> tag • Type the article’s contents (paragraphs, lists, audio, video, images, figures, etc.) • Close it with the </article> tag
  10. 10. Creating a Section• Sections, usually, aren’t stand-alone the way articles are• We used to use the <div> tag to break our content into chunks • Now, we can use the <section> tag instead, and be more semantically correct• Often, your <article> will contain multiple <sections>, like the chapters in a book• Don’t sweat the “right” or “wrong” of this distinction too much, but if your content is independent, use <article>
  11. 11. Specifying an Aside• Sometimes, section of content is tangentially related to main content, but could stand on its own• Indicate this with an aside • For example, an aside featuring information about Barcelona’s architectural wonders• Indicate this with <aside></aside> tags (content of the aside goes inside the two tags• It’s common to think of an aside as a sidebar, but you can place the element in a variety of places • A box within the main content • In the same column as the main content, but not nested inside it • In a secondary column like a sidebar
  12. 12. Creating a Footer• Usually used like a page footer, but it can be used elsewhere• Represents a footer for the nearest article, aside, etc• When its nearest ancestor is the body, the footer is for the whole page• Excellent place for copyright notice!• Define it with <footer>content</footer>
  13. 13. Creating a generic container• Sometimes, you have content that doesn’t really fit the section, article, aside, header, footer semantic layout• Use <div> for these• <div>content</div>
  14. 14. Starting a New Paragraph• HTML does not recognize returns or other extra white space• Use the <p> tag to start and end your paragraph • <p>Many tourists are drawn to Barcelona to see Antoni Gaudi’s incredible architecture.</p> <p>Barcelona celebrates the 150th anniversary of Gaudi’s birth in 2002.</p>
  15. 15. Naming Elements• Note: This becomes really important when you start formatting your page using CSS!• To name a one-of-a-kind element: id=“name”• To name groups of elements: class=“name”• For example: <h1 id=“gaudi”>Antoni Gaudi</h1> <h2 class=“building”>La Casa Mila</h2> <h2 class=“building”>La Sagrada Familia</h2>
  16. 16. Creating Inline Spans• Allows you to apply formatting to parts of your text, within the same paragraph or other chunk• For example: • <p>Gaudi’s work was essentially useful. La Casa Milo is an apartment building and real people live there.</p> • If we’re applying formatting with CSS, and want “real people” to be formatted differently, we would use an inline span • <p>Gaudi’s work was essentially useful. La Casa Milo is an apartment building and <span class=“emph”>real people</span> live there.</p>• No inherent formatting. It gets its formatting from applying styles to it, usually through its class or id.
  17. 17. Creating a Line Break• If you want to create manual line breaks without using a new div or p element• <br />• Closing slash is only required in XHTML, but it’s good practice• Use multiple br tags to create extra space between lines or paragraphs
  18. 18. Adding Comments• Comments are important to remind yourself (or future editors) what you were trying to do• Comments only appear when document is opened with a text editor, or when source is viewed. Otherwise, they’re invisible.• <!-- This is a comment -->• View your commented page before publishing, to avoid sharing your (possibly) private comments with the public• Remember: anybody who views the page source can view the comments! • No passwords • No information you don’t want the public to have
  19. 19. Labeling Elements in a Web Page• Can use the title attribute to add a tool tip label to parts of your Web page• This is different from the <title> element!• <div id=“toc” title=“Table of Contents”> • Everything within this div will display a tool tip with the text “Table of Contents” when the mouse is placed over it