6.
148
HTML / CSS
Victor Hung
HTML
Hypertext Markup Language
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>
Basic HTML Elements
<html>
Root of HTML Document
<body>
Document Body
<head>
Information about the doc
<h1>, <h2>, <h3>
Header Tags
<p>
Paragraph Tags
<img>
Image
<a>
Hyperlink
<div>
Section in a Document
<span>
Section in a Document (text)
Basic HTML Elements
<ul>
unordered list
Basic HTML Elements
<ul>
<li>
unordered list
list item
Basic HTML Elements
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
unordered list
list item
Basic HTML Elements
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
unordered list
list item
item 1
item 2
HTML Attributes
<a>Google</a>
HTML Attributes
<a href="http://google.com">Google</a>
HTML Attributes
<a href="http://google.com">Google</a>
Google
HTML Attributes
<a href=http://google.com>Google</a>
Google
<div>Some text</div>
HTML Attributes
<a href=http://google.com>Google</a>
Google
<div class=warning>Some text</div>
HTML Attributes
<a href=http://google.com>Google</a>
Google
<div class=warning>Some text</div>
<tag name=value">content</tag>
HTML Attributes
<a href=http://google.com>Google</a>
Google
<div class=warning>Some text</div>
<tag name=value">content</tag>
HTML Void Elements
<img src=cutecat.jpg>
<input type=text>
From IDEA to HTML
CSS
Cascading Style Sheets
CSS
A series of rules that dictate
the styling of your page
p {
color: red;
font-size: 20pt;
}
Selector
p {
color: red;
font-size: 20pt;
}
Selector
Declaration
p {
color: red;
font-size: 20pt;
}
Property
p {
color: red;
font-size: 20pt;
}
Property
Value
p {
color: red;
font-size: 20pt;
}
Property
Value
Semicolon
p {
color: red;
font-size: 20pt;
}
p {
color: red;
font-size: 20pt;
}
<p>This here is a lovely paragraph,
full of good news and bad.</p>
<p>I write very short paragraphs</p>
.intro {
color: red;
font-size: 20pt;
}
<p class=intro>This here is a lovely
paragraph, full of good news and
bad.</p>
<p>I write very short paragraphs</p>
#id {
color: red;
font-size: 20pt;
}
<p id=intro>This here is a lovely
paragraph, full of good news and
bad.</p>
<p>I write very short paragraphs</p>
ID #intro
IDs are Unique! Each ID should only be
used once in the document
An Element can only have one ID
CLASS .intro
Use the same class on multiple elements
Use multiple classes on one element
<div class=alert good>DONE</div>
CSS Font & Text Properties
div {
color: #FF0000;
font-family: Times, Georgia, Serif;
font-size: 50pt;
font-weight: bold; /* normal */
text-align: center;
text-decoration: underline;
text-transform: capitalize;
}
what does this css look like?
WHAT DOES THIS CSS LOOK LIKE?
CSS Display Properties
hello
<div>world</div>
div {
background-color: red;
}
CSS Display Properties
hello
<div>world</div>
div {
background-color: red;
display: block;
}
CSS Display Properties
hello
<div>world</div>
div {
background-color: red;
display: inline;
}
CSS Display Properties
hello
<div>world</div>
div {
background-color: red;
display: inline;
width: 100px;
height: 50px;
}
CSS Display Properties
hello
<div>world</div>
div {
background-color: red;
display: inline-block;
width: 100px;
height: 50px;
}
CSS Display Properties
CONTENT
CONTENT
CSS Display Properties
CONTENT
CONTENT
CSS Box Model
<div>best box</div>
div {
border: 1px solid red;
}
CSS Box Model
<div>best box</div>
div {
border-style: solid;
border-color: red;
border-width: 1px;
}
CSS Box Model
<div>best box</div>
div {
border-style: solid;
border-color: red;
border-width: 1px 3px;
}
CSS Box Model
<div>best box</div>
div {
border-style: solid;
border-color: red;
border-width: 1px 3px;
}
TOP & BOTTOM, RIGHT & LEFT
CSS Box Model
<div>best box</div>
div {
border-style: solid;
border-color: red;
border-width: 1px 3px 1px 3px;
}
TOP, RIGHT, BOTTOM, LEFT
CSS Box Model
<div>best box</div>
div {
border-bottom: 1px solid red;
}
CSS Box Model
<div>best box</div>
div {
margin: 10px;
border: 1px solid red;
}
CSS Box Model
<div>best box</div>
div {
padding: 10px;
border: 1px solid red;
}
CSS Box Model
CSS Positioning
<body>
<div>here is some text</div>
<div class=content>bloop!</div>
</body>
body {
position: relative;
}
.content {
position: relative;
}
CSS Positioning
<body>
<div>here is some text</div>
<div class=content>bloop!</div>
</body>
body {
position: relative;
}
.content {
position: relative;
top: 20px;
}
CSS Positioning
<body>
<div>here is some text</div>
<div class=content>bloop!</div>
</body>
body {
position: relative;
}
.content {
position: absolute;
top: 10px;
}
CSS Positioning
<body>
<div>here is some text</div>
<div class=content>bloop!</div>
</body>
body {
position: relative;
}
.content {
position: fixed;
top: 20px;
}
CSS Positioning
header
content
CSS Positioning
RELATIVE, 10px
header
content
CSS Positioning
ABSOLUTE (to parent), 10px
header
content
CSS Positioning
FIXED (to window), 10px
header
content
Lets add some css
After Lunch!
JavaScript & Nodejs
After Lunch!
JavaScript & Nodejs
Try out some HTML/CSS
http://bit.ly/6148htmlcss
