WRA 210 – SS2013 HTML & CSS overview

Benefits of Web Standards Consistent rendering across browsers* Better Internet Archives Universal support of CSS Separation of content from presentation* Texts that can transform for different audiences Universal support of JavaScript* Advanced interaction between reader and document AJAX – real-time web activity * ALMOST

Document Object Model (DOM) Creates a consistent, standard way of parsing HTML A model – any number of metaphors Implemented in the browser – nobody ever “uses” the DOM Maps out a document – defines document structure and objects Without it, docs are just a collection of code that could mean anything and be interpreted in any number of ways Structure – creates relationships between tags (parent-child) Objects – each element (tag) is related in some way but exists independently and can be manipulated (ie styled, hidden, transformed via CSS or JS) Enables texts to transform (more later) Not completely adopted, and certainly not magical

What a Human Sees We call them “tags:” Maecenas aliquam venenatis enim. Nulla purus urna, ultricies non, vestibulum sed, viverra eu, magna. Fusce mi urna, eleifend sit amet, elementum a, dictum quis, justo. Duis suscipit. Phasellus augue nisi, dignissim et, feugiat eget, scelerisque non, erat. Nullam diam lorem, adipiscing id, tincidunt a, iaculis vitae, ante. Nullam sed pede. Ut porta enim vitae orci. Sed ut felis. Duis suscipit. Phasellus augue nisi, dignissim et, feugiat eget, scelerisque non, erat.

What a Browser Sees Browsers only understand “objects” with boundaries: Maecenas aliquam venenatis enim. Nulla purus urna, ultricies non, vestibulum sed, viverra eu, magna. Fusce mi urna, eleifend sit amet, elementum a, dictum quis, justo. Duis suscipit. Phasellus augue nisi, dignissim et, feugiat eget, scelerisque non, erat. Nullam diam lorem, adipiscing id, tincidunt a, iaculis vitae, ante. Nullam sed pede. Ut porta enim vitae orci. Sed ut felis. Duis suscipit. Phasellus augue nisi, dignissim eget, scelerisque non, erat. Objects have properties (border, color, font) that can be accessed and manipulated by CSS and JavaScript.

Basic HTML Structure Untitled Document content goes here object

Basic HTML Structure Standards – defined before and in the HEAD head - contains descriptive and functional information about the document, including: CSS JavaScript META tags body - where all objects rendered for the user go (text, images, forms, etc)

Standards - DOCTYPE Why - gives the browser a set of standards by which to validate your HTML Type - “transitional” allows room for grandfathered practices Cheat - use Dreamweaver or other software to auto- generate your declaration, or copy/paste Example:

Standards – Content Type Why – defines the “alphabet” or “character set” of the page you’ve created Content – almost always “text/html” Charset – “UTF-8” is standard for most English-language pages Cheat - copy-and-paste Example:

Parent-Child Relationships Also called nested tags – establishes boundaries between objects, essential for page structure Example: content goes here The and are both objects, but the paragraph is a child of the container DIV is the parent of all tags Block-level tags cannot be the children of non-blocks this is NOT allowed list items can’t have paragraphs inside parent child

Important Parents: “containers” In-line content SPANs Links Images Types of containers Body DIVs Paragraphs Lists and List items Headers (h1 to h6)

HTML Rules: Tags (objects) Also called nested tags – establishes boundaries between objects, essential for page structure Example: content goes here The and are both objects, but the paragraph is a child of the container DIV is the parent of all tags Block-level tags cannot be the children of non-blocks this is NOT allowed list items can’t have paragraphs inside

HTML Rules: Tags (objects) All tags in lower case not All attributes quoted MSU All tags closed, even “empty” tags or Special characters < to display > € to display €

Common Tags: Used for denoting paragraphs or chunks of text Maecenas aliquam venenatis enim. Nulla purus urna, ultricies non, vestibulum sed, viverra eu, magna. Fusce mi urna, eleifend sit amet, elementum a, dictum quis, justo. Duis suscipit. Phasellus augue nisi, dignissim et, feugiat eget, scelerisque non, erat. Nullam diam lorem, adipiscing id, tincidunt a, iaculis vitae, ante. Nullam sed pede. Ut porta enim vitae orci. Sed ut felis. Duis suscipit. Phasellus augue nisi, dignissim et, feugiat eget, scelerisque non, erat.

Common Tags: Used for linking within and outside documents Attributes: href - a local or external file Examples: Home Page Download Resume MSU

Common Tags: Used for inserting images into documents Attributes: src - defines the location of the image (local or online) (required) alt - text to display if user can’t see images (required) width - fixes the width of the image (not recommended) height - fixes the height of the image (not recommended) Example:

Common Tags: lists and Used for creating ordered and unordered lists List items created using nested tags Can be used for many purposes, including navigation Example: This is the first bullet This is the second bullet

Deprecated (dying) tags bold text (use ) italicized text (use ) text with custom colors, size, etc don’t even think about it

HTML is for structure, not looks OLD WAY (bad even then): text Structural Markup: text All presentation should come from CSS - XHTML defines the structure of the document

Exercise 1 Open a text editor Notepad (or TextEdit on a Mac) Wordpad Dreamweaver Create a standards-compliant HTML document containing the following: 3 external links (websites) 4 paragrahs ( 1list Save to your LOCAL computer (preferably your desktop) for use later

Exercise 2 Validate your code: your new best friend

CSS – style through DOM CSS could not exist without the DOM CSS manipulates the objects in a document; no objects, no style Tags are what humans see; the DOM sees objects Because the DOM sees objects (not tags), CSS can: Style all instances of a particular tag Style all instances of objects with a particular class Style the children of a parent object Style specifics objects based on names

Methods of Implementing CSS External CSS resides in a separate file Use a link in the to associate style sheet Embedded CSS in the of an HTML document Can only be used internally by that one document Inline CSS embedded inside an HTML tag Order of inheritance (or priority) by the browser: External > Embedded > Inline

Embedding CSS in HTML Code goes between the tags Untitled Document STYLE RULES HERE

Anatomy of a CSS Rule p { color:#ffffff; background:#000000; } Selector: p Declarations (or ‘attributes’): color, background

Common Declarations color background margin margin-left: 10px; padding padding-top: 5px; width height border border: thin dashed #000000;

ID Selectors “id” creates an identity for a specific object (not reusable) Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse malesuada lacus eget augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Curabitur feugiat rutrum massa. Morbi tempus, elit vitae tincidunt malesuada, neque mi vulputate lacus, ac pulvinar ipsum dui vel justo. In eu. Enim lectus, molestie vel, semper a. Suspendisse potenti. Donec pulvinar eleifend commodo. Duis lacinia metus vel nibh pellentesque viverra. Pellentesque eget risus id nisl egestas condimentum in sit amet ligula. Vestibulum sollicitudin odio libero, ut commodo.

Custom Selectors (ID) p { color:#ffffff; background:#000000; } #different { font-weight:bold; } All objects take this style All objects with class “different” take this style text

Inline Styling “style” attribute used to style tags inside HTML tags Not Recommended – must separate style from presentation! Morbi tempus, elit vitae tincidunt malesuada, neque mi vulputate lacus, ac pulvinar ipsum dui vel justo. In eu mi. Nulla enim lectus, molestie vel, semper a, egestas id, elit. Fusce consectetur viverra mauris. Suspendisse congue. Aliquam commodo sollicitudin nibh. Suspendisse potenti. Curabitur sed turpis. Aenean rutrum pede faucibus sapien. Nam sit amet metus.

Exercise 3 Use embedded CSS styles to modify the following elements in your HTML document: Make all paragraphs blue Make all links red Put a border around the list Use inline styles to make one of your links, paragraphs, and bulleted items stand out High five somebody when you are done! Save the file for later…