HTML-CSS-Section

Download Report

Transcript HTML-CSS-Section 

HTML & CSS: an introduction
Section led by Ivan Lee
1
Reachable at ivan period lee at cs period stanford period edu
HTML/CSS Editors
Mac:
 TextEdit
 DashCode
 Komodo Edit
 TextMate
 Coda (editor + FTP + Terminal + CSS editor)
Windows:
 Notepad
 Notepad++ (!!)
 Adobe Dreamweaver
 Microsoft Expression Web
Note: do NOT be using WYSIWYG functionality – we can tell!
Many of the above editors are good for auto-complete though
2
HTML/CSS Resources
w3schools.com
 Firebug
 PixelPerfect

Class
 http://www.piazzza.com/stanford/cs142
Misc:
kuler.adobe.com
3
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>
4
Validation
 http://validator.w3.org/
5
Margins vs. Paddings vs. Borders
6
Source: http://www.iis.sinica.edu.tw/~trc/public/courses/Spring2007/week6/boxdim.png
Tables

<table>


<tr>
Table

<td>
 </td>
 <td>
 </td>
Can have multiple cols/row
 Content generally goes in cols
 But every tag can have a class
 Remember to close tags



7

</tr>
</table>
Must have row to have a col


Tables (cont.) – because they’re tricky

Important attributes to remember:
border-spacing
 width (remember the different units)
 Pay attention to the border, padding, and margin
for the table, tr, and td


8
Note: tr border, padding, margin does not work
td margin does not work
EXAMPLE
9
Pseudo-classes
a:link
 a:visited
 a:hover
 a:active
 a:focus


10
cursor: default | auto | crosshair | text | help…
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

11
display vs. visibility
display:none – as if the object were not there at
all, not merely invisible
 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
visibility:none – object just becomes invisible
EXAMPLE
13
Shorthand properties
padding-top: 10px;
 padding-right: 12px;
 padding-bottom: 5px;
 padding-left: 100px;
=
 padding: 10px 12px 5px 100px;

14
Hints for Project 1 part 2

Table method:









15
%
px
em
ex
in
cm
mm
pt
pc

UL method:

Relative vs. absolute
positioning
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
16
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!

17
<QUESTIONS…? />
18