1. HTML – Organizing Page Content

2. HTML Images img tag <img> Required attribute: src
<img src=“uwm_logo.gif” alt=“UWM Logo” />

3. HTML Links The anchor <a>…</a> Required attribute: href
<a href= Link to UWM </a>
<a href= src=“uwm_logo.gif”/>UWM</a>

4. Hypertext – Absolute & Relative Links
Absolute Links
<a href=“ 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)

5. HTML Common Elements Block & Inline Elements
Block Elements Ex: <p /> <h1>…</h1> Each block element begins a new line
Have 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>

6. 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 />)

7. HTML Block Level Elements Paragraphs <p>…</p>
Headings <h#>…</h#> (six levels of headings)
provides logical hierarchy
improves accessibility
Block quote <blockquote>…</blockquote>
Preformatted text <pre>…</pre>
preserves white spaces – returns and character spaces
May be needed to convey meaning (code, poetry)
Horizontal Rules <hr />

8. HTML Block 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

9. HTML
Inline 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 style
Examples: <b> keywords or visually emphasized text (bold) Ex: product name, <i> Alternative voice (italics) Ex: phrase, technical term, thought
(please use: <strong> & <em> instead)

10. HTML Special Characters Must use numeric or named character reference
Examples
Character space ( )
& Ampersand (&)
© Copyright symbol (©)
Euro (€)

11. Organizing Page Content
Page layout

12. Generic Elements <div>…</div> Name them using id or class
Used to create a logical grouping of content or elements on the page Can be customized to describe content
<div>…</div>
Generic block-level element
<span>…</span>
Name them using id or class
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

13. CSS for layout
Examples

14. Generic Elements <div>…</div>
Used to create a logical grouping of content or elements on the page Can be customized to describe content
<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>

15. 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”> </span></li> <li> Joe: <span class=“tel”> </span></li> <li> Mary: <span class=“tel”> </span></li> </ul>

16. HTML 5 Elements <section>…</section>
Well supported by current desktop and mobile browsers (known issues with IE 8 and earlier)
<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>

17. HTML 5 Elements <aside>…</aside> <nav>…</nav>
Well supported by current desktop and mobile browsers (known issues with IE 8 and earlier)
<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

18. CSS – Presentation of Information

19. Types of Style Sheets External Embedded Inline
<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>

20. Example of CSS Separate language with its own syntax
Selectors: Selects the element to be affected
Declaration: “declares” a style for a selected element
Declaration block: property & value

21. Types of Selectors Element Type Selectors p {color: blue;}
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