castro chapter 3
TRANSCRIPT
BASIC HTML
STRUCTUREHTML5 & CSS Visual Quickstart Guide
Chapter 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 Document
Outline• 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