cs142 web applications discussion 1 html & css: an introduction
DESCRIPTION
Original Slides by Ivan Lee Updated for 2012 by Jason Chen, Madiha Mubin , RJ Yates. CS142 Web Applications Discussion 1 HTML & CSS: an introduction. HTML/CSS Editors. Mac: TextEdit TextMate Coda (editor + FTP + Terminal + CSS editor) Windows: Notepad Notepad++ Linux: Vi Emacs - PowerPoint PPT PresentationTRANSCRIPT
CS142 Web ApplicationsDiscussion 1HTML & CSS: an introduction
Original Slides by Ivan LeeUpdated for 2012 by Jason Chen, Madiha Mubin, RJ Yates
1
HTML/CSS EditorsMac: TextEdit TextMate Coda (editor + FTP + Terminal + CSS editor)Windows: Notepad Notepad++Linux: Vi EmacsNote: do NOT be using WYSIWYG functionality – we can tell!Many of the above editors are good for auto-complete though
2
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
3
4
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
5
Tables <table>
<tr>▪ <th>…</th>▪ <th>…</th>▪ …
</tr> <tr>▪ <td>…</td>▪ <td>…</td>▪ …
</tr> …
</table>
6
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
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.
7
Margins vs. Paddings vs. Borders
8Source: 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…
9
10
CSS Override Rules
What color do you see on hover? body { color: black; } a { color: green; } a:hover { color: red; }
Example
11
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
12
13
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
14
Shorthand properties
padding-top: 10px; padding-right: 12px; padding-bottom: 5px; padding-left: 100px;= padding: 10px 12px 5px 100px;
15
Assignment 1 pointersPart 1: Figure out what’s required by HTML in both Then work on CSS and hiding what’s
superfluous in eachPart 2: Introduction to images on web pages (hint: use background images)Part 3: No need to validate Easy Peasy
16
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>
17
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.
18
19
Validation Example
Three things wrong with this example.
Can you figure out what they are?
Example
20
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!
21
Example
22
Submission
23
<Questions…? />
24