CS142 Web Applications Discussion 1 HTML & CSS: an introduction

Original Slides by Ivan Lee Updated for 2012 by Jason Chen, MadihaMubin, RJ Yates CS142 Web ApplicationsDiscussion 1HTML & CSS: an introduction

HTML/CSS Editors Mac: • TextEdit • TextMate • Coda (editor + FTP + Terminal + CSS editor) Windows: • Notepad • Notepad++ Linux: • Vi • Emacs Note: do NOT be using WYSIWYG functionality – we can tell! Many of the above editors are good for auto-complete though

HTML/CSS Resources Class • http://www.piazza.com/stanford/cs142 • w3schools.com • Google Chrome Inspector • Firebug • PixelPerfect - http://pixelperfectplugin.com/ Misc: • Color Palettes: kuler.adobe.com

HTML Attributes – id vs. class • Ids are unique • Id attribute: #p20, Example: <p id="p20"> • Classes can be used multiple time in the same document. • Class attribute: .large, Example: <p class="large"> • “There are not any major advantages of IDs over classes” • Browser will display multiple ids.

div vs. span • div: • Logical divisions within your web page • Can divide it up into sections with their own attributes • Can have own class • Covers entire horizontal width of parent, with line break before and after • span: • Just like a div, but without the line break • Doesn’t do any formatting on its own • Formatting applies within the line

Tables • Table • Must have row to have a col • Can have multiple cols/row • Content generally goes in cols • But every tag can have a class • Remember to close tags • <table> • <tr> • <th>…</th> • <th>…</th> • … • </tr> • <tr> • <td>…</td> • <td>…</td> • … • </tr> • … • </table>

Tables (cont.) – because they’re tricky • Important attributes to remember: • cellspacing=“O” • border-spacing • width (remember the different units) • Pay attention to the border, padding, and margin for the table, tr, and td • Notes - For ‘tr’: border, padding, margin does not work. For ‘td’: margin does not work.

Margins vs. Paddings vs. Borders Source: http://www.iis.sinica.edu.tw/~trc/public/courses/Spring2007/week6/boxdim.png

Pseudo-classes • a:link • a:visited • a:hover • a:active • a:focus • cursor: default | auto | crosshair | text | help…

CSS Override Rules • What color do you see on hover? • body { color: black; } • a { color: green; } • a:hover { color: red; }

Example

display vs. visibility • visibility:hidden– object just becomes invisible • display:none – as if the object were not there at all • display:block – the element will be displayed as a block-level element, with a line break before and after the element • display:inline – the element will be displayed as an inline element, with no line break before or after the element

CSS Example • Two paragraphs • How do we make the background color of the second paragraph purple? • How do we make the first paragraph invisible? • How do we make the first paragraph as if it weren’t there?

Example

Shorthand properties • padding-top: 10px; • padding-right: 12px; • padding-bottom: 5px; • padding-left: 100px; = • padding: 10px 12px 5px 100px;

Assignment 1 pointers Part 1: • Figure out what’s required by HTML in both • Then work on CSS and hiding what’s superfluous in each Part 2: • Introduction to images on web pages • (hint: use background images) Part 3: • No need to validate • Easy Peasy

Anatomy of an HTML Document <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Unicorns</title> <link type="text/css" rel="stylesheet" href="prettycolors.css"/> </head> <body> <h1>woooooot</h1> </body> </html>

Validation • http://validator.w3.org/#validate_by_upload • XHTML 1.0 Strict • http://jigsaw.w3.org/css-validator/#validate_by_upload • CSS level 2. CSS level 3 is OK, but all parts are doable with CSS2 which is prefered.

Validation Example • Three things wrong with this example. • Can you figure out what they are?

Example

Steps in reconstructing an HTML Document • 1.. Create content first - HTML • 2.. Begin styling - CSS • 3.. Test - Firebug/PixelPerfect • 4.. Repeat • ... • 5.. Validate • 6.. Success!

Example

Submission

<Questions…? />

CS142 Web Applications Discussion 1 HTML & CSS: an introduction