HTML amp CSS an introduction Original Slides by Ivan Lee Updated for 2012 by Jason Chen Madiha Mubin RJ Yates 1 HTMLCSS Editors Mac TextEdit TextMate Coda editor FTP Terminal CSS editor ID: 779110
Download The PPT/PDF document "CS142 Web Applications Discussion 1" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
CS142 Web ApplicationsDiscussion 1HTML & CSS: an introduction
Original Slides by Ivan LeeUpdated for 2012 by Jason Chen, Madiha Mubin, RJ Yates
1
Slide2HTML/CSS EditorsMac:
TextEditTextMateCoda (editor + FTP + Terminal + CSS editor)Windows:
Notepad
Notepad++
Linux:ViEmacsNote: do NOT be using WYSIWYG functionality – we can tell!Many of the above editors are good for auto-complete though
2
Slide3HTML/CSS ResourcesClass
http://www.piazza.com/stanford/cs142w3schools.com Google Chrome InspectorFirebug
PixelPerfect
-
http://pixelperfectplugin.com/Misc:Color Palettes: kuler.adobe.com
3
Slide4HTML Attributes – id vs. classIds are uniqueId 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.
4
Slide5div vs. spandiv:Logical
divisions within your web pageCan divide it up into sections with their own attributesCan have own class
Covers entire horizontal width of parent,
with line break before and after
span:Just like a div, but without the line breakDoesn’t do any formatting on its ownFormatting applies within the line
5
Slide6Tables<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
Slide7Tables (cont.) – because they’re trickyImportant attributes to remember:cellspacing=“
O”border-spacingwidth (remember the different units)Pay attention to the border, padding, and margin for the table, tr, and tdNotes - For ‘
tr
’: border, padding, margin does not work.
For ‘td’: margin does not work.
7
Slide8Margins vs. Paddings vs. Borders
8
Source: http://www.iis.sinica.edu.tw/~trc/public/courses/Spring2007/week6/boxdim.png
Slide9Pseudo-classesa:linka:visiteda:hover
a:activea:focuscursor: default | auto | crosshair | text | help…
9
Slide10CSS Override RulesWhat color do you see on hover?body { color: black; }a { color: green; }a:hover { color: red; }
10
Slide11Example
11
Slide12display vs. visibilityvisibility:hidden – object just becomes invisible
display:none – as if the object were not there at alldisplay: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
Slide13CSS ExampleTwo paragraphsHow 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?
13
Slide14Example
14
Slide15Shorthand propertiespadding-top: 10px;padding-right: 12px;padding-bottom: 5px;
padding-left: 100px;=padding: 10px 12px 5px 100px;
15
Slide16Assignment 1 pointersPart 1:
Figure out what’s required by HTML in bothThen 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 validateEasy Peasy
16
Slide17Anatomy 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
Slide18Validationhttp://validator.w3.org/#validate_by_upload
XHTML 1.0 Stricthttp://jigsaw.w3.org/css-validator/#validate_by_uploadCSS level 2. CSS level 3 is OK, but all parts are doable with CSS2 which is prefered.
18
Slide19Validation ExampleThree things wrong with this example.Can you figure out what they are?
19
Slide20Example
20
Slide21Steps in reconstructing an HTML Document1.. Create content first - HTML
2.. Begin styling - CSS3.. Test - Firebug/PixelPerfect4.. Repeat...
5.. Validate
6.. Success!
21
Slide22Example
22
Slide23Submission
23
Slide24<Questions…? />
24