Embed Size (px)
Citation preview
HTML – Organizing Page Content
HTMLImages
img tag <img>
Required attribute: src
<img src=“uwm_logo.gif” alt=“UWM Logo” />
http://www.w3schools.com/html/html_images.asp
HTMLLinks
The anchor <a>…</a>
Required attribute: href
<a href=http://www.uwm.edu> Link to UWM </a><a href=http://www.uwm.edu><img src=“uwm_logo.gif”/>UWM</a>
Hypertext – Absolute & Relative LinksAbsolute Links
<a href=“http://www.uwm.edu”> UW-Milwaukee </a>also called an external link
Relative Links
<a href=“admissions.html”> Link to admissions page </a>
Relative links do not require the protocol and domain name
These links are “related” to the current page (The page you want to link to is within the same domain as the document you are linking from)
HTML Common Elements
Block & Inline Elements
Block Elements Ex: <p /> <h1>…</h1>Each block element begins a new lineHave space above and below the element by default
<h1> This is the most important heading </h1>
<p> This is a paragraph </p>
Inline Elements Ex: <em>…</em>Flow within other elements (do not start new line)
<p> This is a paragraph with <em> emphasized text </em> within (inline) the paragraph element </p>
HTML
Empty Tag (Standalone)
Do not have text content
Places an element on the page (provides a directive)
Indicated by single tag
XHTML note: all standalone tags require closing tag (ex: <br> now <br />)
HTMLBlock Level Elements
Paragraphs <p>…</p>
Headings <h#>…</h#> (six levels of headings)provides logical hierarchyimproves accessibility
Block quote <blockquote>…</blockquote>
Preformatted text <pre>…</pre>preserves white spaces – returns and character spacesMay be needed to convey meaning (code, poetry)
Horizontal Rules <hr />
HTMLBlock Level Elements
Unordered Lists <ul>…</ul> & <li>…</li>Default is disc change type: <ul type=“circle”>, “square”
Ordered Lists <ol>…</ol> & <li>…</li>Default is #’s change type: <ol type=“A”> “a”, “I”, “i”
Definition Lists <dl>…</dl> & <dt>…</dt> & <dd>…</dd>
Note: Changing type and start value not supported in “strict” versions of XHTML
http://www.w3schools.com/html/html_lists.asp
HTMLInline Elements
Line Breaks <br />
Semantic inline text elements
Describes the meaning of the text
Examples: <em>for emphasis, <strong> strongly emphasized, <q> short inline quote
Presentational inline text elements
provides descriptions of the elements styleExamples: <b> keywords or visually emphasized text (bold) Ex: product name, <i> Alternative voice (italics) Ex: phrase, technical term, thought(please use: <strong> & <em> instead)
HTMLSpecial Characters
Must use numeric or named character reference
Examples
Character space ( )
& Ampersand (&)
© Copyright symbol (©)
Euro (€)
Organizing Page ContentPage layout
Generic Elements
<div>…</div>Generic block-level element
<span>…</span>Generic block-level element
Name them using id or class
Used to create a logical grouping of content or elements on the pageCan be customized to describe content
Have no inherent presentation qualities of their own, but can use style sheets to format them-allows you to accurately describe content-creates a “hook” for adding style rules
CSS for layout
Exampleshttp://www.shinybytes.com/newcss.html
Generic Elements
<div>…</div>•Generic block-level elements•Used like a container to group content•Gives context to the elements in the grouping
•Use a unique id or class to give it a descriptive name
<div class =“listing”><img src=“type-book-cover.gif” alt=“”><p><cite>The Complete Manual of Type</cite>, John
Doe</p><p>A combination of type history and examples of
good and bad type design.</p></div>
<div id =“news”><h1>This Week</h1><p>We’ve been working on…</p><p>And last but not least…</p>
</div>
Used to create a logical grouping of content or elements on the pageCan be customized to describe content
Generic Elements<span>…</span>
•Generic inline element•Can only contain text and other inline elements•Gives context to the elements in the grouping
•Use a unique id or class to give it a descriptive name
<ul> <li> Andy: <span class=“tel”>123-4567</span></li> <li> Joe: <span class=“tel”>101-0101</span></li>
<li> Mary: <span class=“tel”>255-1212</span></li> </ul>
HTML 5 Elements
<section>…</section>
•May be used to divide pages into major sections | major thematic sections<section>
<h2>Typography Books</h2><ul> <li>…</li></ul>
</section><article>…</article>
•May be used for self-contained works that could stand alone or be reused in a different context
<article><h1>Get To Know Helvetica</h1><section> <h2>History of Helvetica</h2> <p>…</p></section>
</article>
Well supported by current desktop and mobile browsers(known issues with IE 8 and earlier)
HTML 5 Elements
<aside>…</aside>
•Related to the surrounding content
<nav>…</nav>
•Primary navigation links
<header>…</header>
•Introductory material for page, section, or article
<footer>…</footer>
•Footer for page, section, or article
<address>…</address>
•Contact information
Well supported by current desktop and mobile browsers(known issues with IE 8 and earlier)
CSS for layout
Exampleshttp://www.shinybytes.com/newcss.html
CSS – Presentation of Information
Types of Style Sheets
External<link rel = “stylesheet” href=“mystyles.css” type=“text/css”/>
Embedded<style type = “text/css”>
<!--
h1{color:red; font-family: Arial;}
-->
</style>
Inline
<h1 style=“color:red; font-family:arial”> Text is here.
</h1>
Example of CSS
Separate language with its own syntax
1.Selectors: Selects the element to be affected
2.Declaration: “declares” a style for a selected element
Declaration block: property & value
Types of SelectorsElement Type Selectors
•Used to redefine a specific HTML tag• p {color: blue;}• Grouped - h1, h2, p, em, img { border: 1px solid blue; }• Descendant Selectors - Ex: li em { color: silver; }
targets emphasized text only when in a list item (li)
ID Selectors
•Gives an element a unique identifying name• #content { margin-left: 10px; }
Class Selectors
•Used to “classify” elements into a conceptual group•.special { color: orange; }
Pseudo-Class Selectors
