Post on 29-Dec-2015
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 * ALM
OS
T
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:”
<p>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.</p>
<p>Duis suscipit. Phasellus augue nisi, dignissim et, feugiat eget, scelerisque non, erat. </p>
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Untitled Document</title>
</head>
<body><p>content goes here</p>
</body></html>
•
object
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:
<!DOCTYPE html>
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:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Parent-Child Relationships
• Also called nested tags – establishes boundaries between objects, essential for page structure
• Example:
<div>
<p>content goes here</p>
</div>
The <div> and <p> are both objects, but the paragraph is a child of the container DIV
• <body> is the parent of all tags
• Block-level tags cannot be the children of non-blocks• <a href=“link.html”>this is <p>NOT</p> allowed</a>• <li>list items can’t have <p>paragraphs</p> inside</a>
parentchild
Important Parents: “containers”
In-line content
• SPANs <span>
• Links <a>
• Images <img />
Types of containers
• Body <body>
• DIVs <div>
• Paragraphs <p>
• Lists <ul> and <ol>
• List items <li>
• Headers (h1 to h6)
HTML Rules: Tags (objects)
• Also called nested tags – establishes boundaries between objects, essential for page structure
• Example:
<div>
<p>content goes here</p>
</div>
The <div> and <p> are both objects, but the paragraph is a child of the container DIV
• <body> is the parent of all tags
• Block-level tags cannot be the children of non-blocks• <a href=“link.html”>this is <p>NOT</p> allowed</a>• <li>list items can’t have <p>paragraphs</p> inside</a>
HTML Rules: Tags (objects)
• All tags in lower case
<title> not <TITLE>• All attributes quoted
<a href=“http://www.msu.edu”>MSU</a>• All tags closed, even “empty” tags
<br /> or <img src=“test.gif” />• Special characters
< to display >€ to display €
Common Tags: <p></p>
Used for denoting paragraphs or chunks of text
<p>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.</p>
<p>Duis suscipit. Phasellus augue nisi, dignissim et, feugiat eget, scelerisque non, erat. </p>
Common Tags: <a></a>
• Used for linking within and outside documents
• Attributes:
• href - a local or external file
• Examples:
• <a href=“index.html”>Home Page</a>• <a href=“resume.pdf”>Download Resume</a>• <a href=“http://www.msu.edu”>MSU</a>
Common Tags: <img />
• 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:• <img src=“frown.jpg” alt=“frowny face” />
Common Tags: lists <ol> and <ul>
• Used for creating ordered and unordered lists
• List items created using nested <li></li> tags
• Can be used for many purposes, including navigation
• Example:
<ol><li>This is the first bullet</li><li>This is the second bullet</li>
</ol>
Deprecated (dying) tags
• <b>bold text</b> (use <strong>)
• <i>italicized text</i> (use <em>)
• <font>text with custom colors, size, etc</font>
• <blink>don’t even think about it</blink>
HTML is for structure, not looks
• OLD WAY (bad even then):
<font size='2' color='red'>text</font>
• Structural Markup: <p>text</p>
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 (www.lipsum.com)• 1list
• Save to your LOCAL computer (preferably your desktop) for use later
Exercise 2
• Validate your code: http://validator.w3.org• 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 <head> to associate style sheet
• Embedded• CSS in the <head> 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 <head> tags
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Untitled Document</title><style type="text/css">
STYLE RULES HERE</style>
</head>
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)
<p id=“first”>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. </p>
<p id=“header” class=“different”>Morbi tempus, elit vitae tincidunt malesuada, neque mi vulputate lacus, ac pulvinar ipsum dui vel justo. In eu. Enim lectus, molestie vel, semper a. </p>
<p class=“different”>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.</p>
Custom Selectors (ID)
p {color:#ffffff;background:#000000;
}
#different {font-weight:bold;
}
All <p> objects take this style
All objects with class “different” take this style<div id=“different”>text</div><p id=“different”>text</p>
Inline Styling
“style” attribute used to style tags inside HTML tags
Not Recommended – must separate style from presentation!
<p style=“color:green;”>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. </p>
<p style=“font-weight:bold;”>Fusce consectetur viverra mauris. Suspendisse congue. Aliquam commodo sollicitudin nibh. Suspendisse potenti. Curabitur sed turpis. Aenean rutrum pede faucibus sapien. Nam sit amet metus. </p>
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…