HTML – Organizing Page Content

HTML Images img tag Required attribute: src

HTML Links The anchor … Required attribute: href Link to UWM UWM

Hypertext – Absolute & Relative Links Absolute Links UW-Milwaukee “ also called an external link Relative Links Link to admissions page 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: … Each block element begins a new line Have space above and below the element by default This is the most important heading This is a paragraph Inline Elements Ex: … Flow within other elements (do not start new line) This is a paragraph with emphasized text within (inline) the paragraph element

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: now )

HTML Block Level Elements Paragraphs … Headings … (six levels of headings) provides logical hierarchy improves accessibility Block quote … Preformatted text … preserves white spaces – returns and character spaces May be needed to convey meaning (code, poetry) Horizontal Rules

HTML Block Level Elements Unordered Lists … & … Default is disc change type:, “square” Ordered Lists … & … Default is #’s change type: “a”, “I”, “i” Definition Lists … & … & … Note: Changing type and start value not supported in “strict” versions of XHTML

HTML Inline Elements Line Breaks Semantic inline text elements Describes the meaning of the text Examples: for emphasis, strongly emphasized, short inline quote Presentational inline text elements provides descriptions of the elements style Examples: keywords or visually emphasized text (bold) Ex: product name, Alternative voice (italics) Ex: phrase, technical term, thought (please use: & instead)

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

CSS – Presentation of Information

Types of Style Sheets External Embedded <!-- h1{color:red; font-family: Arial;} --> Inline Text is here.

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 Selectors Element 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

Organizing Page Content Page layout

Generic Elements … Generic block-level element … Generic block-level element 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 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 Examples

Generic Elements … 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 The Complete Manual of Type, John Doe A combination of type history and examples of good and bad type design. This Week We’ve been working on… And last but not least… Used to create a logical grouping of content or elements on the page Can be customized to describe content

Generic Elements … 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 Andy: Joe: Mary:

HTML 5 Elements … May be used to divide pages into major sections | major thematic sections Typography Books … … May be used for self-contained works that could stand alone or be reused in a different context Get To Know Helvetica History of Helvetica … Well supported by current desktop and mobile browsers (known issues with IE 8 and earlier)

HTML 5 Elements … Related to the surrounding content … Primary navigation links … Introductory material for page, section, or article … Footer for page, section, or article … Contact information Well supported by current desktop and mobile browsers (known issues with IE 8 and earlier)

CSS for layout Examples