• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Castro Chapter 3

Castro Chapter 3






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Castro Chapter 3 Castro Chapter 3 Presentation Transcript

    • BASIC HTMLSTRUCTUREHTML5 & CSS Visual Quickstart GuideChapter 3
    • 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.
    • 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>
    • 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” />
    • 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!
    • 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>
    • 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: • http://www.csis.ysu.edu/~jlbutts/castroch3/outline1.html • http://www.csis.ysu.edu/~jlbutts/castroch3/outline2.html
    • 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>
    • 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
    • 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>
    • 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
    • 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>
    • 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>
    • 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>
    • 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>
    • 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.
    • 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
    • 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
    • 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