CS142 Web Applications Discussion 1 HTML & CSS: an introduction
description
Transcript of CS142 Web Applications Discussion 1 HTML & CSS: an introduction
![Page 1: CS142 Web Applications Discussion 1 HTML & CSS: an introduction](https://reader036.fdocuments.us/reader036/viewer/2022062410/568162b3550346895dd33c87/html5/thumbnails/1.jpg)
CS142 Web ApplicationsDiscussion 1HTML & CSS: an introduction
Original Slides by Ivan LeeUpdated for 2012 by Jason Chen, Madiha Mubin, RJ Yates
1
![Page 2: CS142 Web Applications Discussion 1 HTML & CSS: an introduction](https://reader036.fdocuments.us/reader036/viewer/2022062410/568162b3550346895dd33c87/html5/thumbnails/2.jpg)
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
![Page 3: CS142 Web Applications Discussion 1 HTML & CSS: an introduction](https://reader036.fdocuments.us/reader036/viewer/2022062410/568162b3550346895dd33c87/html5/thumbnails/3.jpg)
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
![Page 4: CS142 Web Applications Discussion 1 HTML & CSS: an introduction](https://reader036.fdocuments.us/reader036/viewer/2022062410/568162b3550346895dd33c87/html5/thumbnails/4.jpg)
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.
![Page 5: CS142 Web Applications Discussion 1 HTML & CSS: an introduction](https://reader036.fdocuments.us/reader036/viewer/2022062410/568162b3550346895dd33c87/html5/thumbnails/5.jpg)
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
![Page 6: CS142 Web Applications Discussion 1 HTML & CSS: an introduction](https://reader036.fdocuments.us/reader036/viewer/2022062410/568162b3550346895dd33c87/html5/thumbnails/6.jpg)
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
![Page 7: CS142 Web Applications Discussion 1 HTML & CSS: an introduction](https://reader036.fdocuments.us/reader036/viewer/2022062410/568162b3550346895dd33c87/html5/thumbnails/7.jpg)
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
![Page 8: CS142 Web Applications Discussion 1 HTML & CSS: an introduction](https://reader036.fdocuments.us/reader036/viewer/2022062410/568162b3550346895dd33c87/html5/thumbnails/8.jpg)
Margins vs. Paddings vs. Borders
8Source: http://www.iis.sinica.edu.tw/~trc/public/courses/Spring2007/week6/
boxdim.png
![Page 9: CS142 Web Applications Discussion 1 HTML & CSS: an introduction](https://reader036.fdocuments.us/reader036/viewer/2022062410/568162b3550346895dd33c87/html5/thumbnails/9.jpg)
Pseudo-classes
a:link a:visited a:hover a:active a:focus
cursor: default | auto | crosshair | text | help…
9
![Page 10: CS142 Web Applications Discussion 1 HTML & CSS: an introduction](https://reader036.fdocuments.us/reader036/viewer/2022062410/568162b3550346895dd33c87/html5/thumbnails/10.jpg)
10
CSS Override Rules
What color do you see on hover? body { color: black; } a { color: green; } a:hover { color: red; }
![Page 11: CS142 Web Applications Discussion 1 HTML & CSS: an introduction](https://reader036.fdocuments.us/reader036/viewer/2022062410/568162b3550346895dd33c87/html5/thumbnails/11.jpg)
Example
11
![Page 12: CS142 Web Applications Discussion 1 HTML & CSS: an introduction](https://reader036.fdocuments.us/reader036/viewer/2022062410/568162b3550346895dd33c87/html5/thumbnails/12.jpg)
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
![Page 13: CS142 Web Applications Discussion 1 HTML & CSS: an introduction](https://reader036.fdocuments.us/reader036/viewer/2022062410/568162b3550346895dd33c87/html5/thumbnails/13.jpg)
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?
![Page 14: CS142 Web Applications Discussion 1 HTML & CSS: an introduction](https://reader036.fdocuments.us/reader036/viewer/2022062410/568162b3550346895dd33c87/html5/thumbnails/14.jpg)
Example
14
![Page 15: CS142 Web Applications Discussion 1 HTML & CSS: an introduction](https://reader036.fdocuments.us/reader036/viewer/2022062410/568162b3550346895dd33c87/html5/thumbnails/15.jpg)
Shorthand properties
padding-top: 10px; padding-right: 12px; padding-bottom: 5px; padding-left: 100px;= padding: 10px 12px 5px 100px;
15
![Page 16: CS142 Web Applications Discussion 1 HTML & CSS: an introduction](https://reader036.fdocuments.us/reader036/viewer/2022062410/568162b3550346895dd33c87/html5/thumbnails/16.jpg)
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
![Page 17: CS142 Web Applications Discussion 1 HTML & CSS: an introduction](https://reader036.fdocuments.us/reader036/viewer/2022062410/568162b3550346895dd33c87/html5/thumbnails/17.jpg)
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
![Page 18: CS142 Web Applications Discussion 1 HTML & CSS: an introduction](https://reader036.fdocuments.us/reader036/viewer/2022062410/568162b3550346895dd33c87/html5/thumbnails/18.jpg)
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
![Page 19: CS142 Web Applications Discussion 1 HTML & CSS: an introduction](https://reader036.fdocuments.us/reader036/viewer/2022062410/568162b3550346895dd33c87/html5/thumbnails/19.jpg)
19
Validation Example
Three things wrong with this example.
Can you figure out what they are?
![Page 20: CS142 Web Applications Discussion 1 HTML & CSS: an introduction](https://reader036.fdocuments.us/reader036/viewer/2022062410/568162b3550346895dd33c87/html5/thumbnails/20.jpg)
Example
20
![Page 21: CS142 Web Applications Discussion 1 HTML & CSS: an introduction](https://reader036.fdocuments.us/reader036/viewer/2022062410/568162b3550346895dd33c87/html5/thumbnails/21.jpg)
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
![Page 22: CS142 Web Applications Discussion 1 HTML & CSS: an introduction](https://reader036.fdocuments.us/reader036/viewer/2022062410/568162b3550346895dd33c87/html5/thumbnails/22.jpg)
Example
22
![Page 23: CS142 Web Applications Discussion 1 HTML & CSS: an introduction](https://reader036.fdocuments.us/reader036/viewer/2022062410/568162b3550346895dd33c87/html5/thumbnails/23.jpg)
Submission
23
![Page 24: CS142 Web Applications Discussion 1 HTML & CSS: an introduction](https://reader036.fdocuments.us/reader036/viewer/2022062410/568162b3550346895dd33c87/html5/thumbnails/24.jpg)
<Questions…? />
24