1 / 30

WRA 210 – SS2013

WRA 210 – SS2013. HTML & CSS overview. * ALMOST. 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*

marge
Download Presentation

WRA 210 – SS2013

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WRA 210 – SS2013 HTML & CSS overview

  2. * ALMOST 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

  3. 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

  4. 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>

  5. 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. Duissuscipit. Phasellusaugue nisi, dignissimeget, scelerisque non, erat. Objects have properties (border, color, font) that can be accessed and manipulated by CSS and JavaScript. What a Browser Sees Browsers only understand “objects” with boundaries:

  6. object object 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>

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

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

  9. 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" />

  10. parent child 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>

  11. 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) Important Parents: “containers”

  12. 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>

  13. 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 &lt; to display > &euro; to display €

  14. 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>

  15. 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>

  16. 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” />

  17. 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>

  18. 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>

  19. 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

  20. 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

  21. Exercise 2 Validate your code: http://validator.w3.org your new best friend

  22. 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

  23. 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

  24. 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>

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

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

  27. 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>

  28. All <p> objects take this style All objects with class “different” take this style <div id=“different”>text</div> <p id=“different”>text</p> Custom Selectors (ID) p { color:#ffffff; background:#000000; } #different { font-weight:bold; }

  29. 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>

  30. 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…

More Related