html css basic
TRANSCRIPT
2
HTML
CSS
3
Sublime Text Fire Fox
4<!DOCTYPE html> <html>
<head> <title>SAMPLE PAGE</title>
</head> <body>
<h1>Oh</h1> <h2>Hi</h2> <h3>Yo</h3>
</body> </html>
SAMPLE PAGE
5
<!DOCTYPE html> <html>
<head> <title>SAMPLE PAGE</title>
</head> <body>
<h1>Oh</h1> <h2>Hi</h2> <h3>Yo</h3>
</body> </html>
SAMPLE
.
6
name.cssname.html
<> </>7
<p> </p>
8<!DOCTYPE html> <html>
<head> <title>SAMPLE PAGE</title>
</head> <body>
<h1>Oh</h1> <h2>Hi</h2> <h3>Yo</h3>
</body> </html>
HTML 5
9<!DOCTYPE html> <html>
<head> <title>SAMPLE PAGE</title>
</head> <body>
<h1>Oh</h1> <h2>Hi</h2> <h3>Yo</h3>
</body> </html>
HTML
10<!DOCTYPE html> <html>
<head> <title>SAMPLE PAGE</title>
</head> <body>
<h1>Oh</h1> <h2>Hi</h2> <h3>Yo</h3>
</body> </html>
<title> <link> <meta>
<meta charset="UTF-8">
<title> </title>
<link rel="stylesheet" type="text/css" href="theme.css">
11
12<!DOCTYPE html> <html>
<head> <title>SAMPLE PAGE</title>
</head> <body>
<h1>Oh</h1> <h2>Hi</h2> <h3>Yo</h3>
</body> </html>
13<h1> <div> <p> <span> <ul> <li> <a> <img>…
14
SAMPLE PAGE<h1>Oh</h1>
<h2>Hi</h2>
<h3>Yo</h3>
15
SAMPLE PAGE
<p>See you again</p>
<p>See you again</p>
<p>See</p> <p>you</p> <p>again</p>
See you again
See you again
See
you
again
16
SAMPLE PAGE
<a href=“http://google.com”>See you again</a>
See you again
Click!SAMPLE PAGE
17
SAMPLE PAGE
<img herf=“pet_one_dallor.jpg”></img>
18
SAMPLE PAGE<ol> <li>See</li> <li>you</li> <li>again</li> </ol>
1. See
2. you
3. again
19
SAMPLE PAGE<ul> <li>See</li> <li>you</li> <li>again</li> </ul>
See
you
again
20
SAMPLE PAGE
<div>see</div> <div>you</div> <div>again</div>
see you again
see you again<span>see<span> <span>you</span> <span>again</span>
21
block inline-block
23
index.html theme.css
24
<!DOCTYPE html> <html>
<head> <title>SAMPLE PAGE</title>
<link rel="stylesheet" type="text/css" href="theme.css"> </head> <body>
<h1>Oh</h1> <h2>Hi</h2> <h3>Yo</h3>
</body> </html>
25
SAMPLE PAGE
See you again
See you again
H T M L C S S
<p>See you again</p>
<p class=“style”>See you again</p>
.style{
color: green;
}
26
{
: ;
}
27
<p>See you again</p>
28
id class
<p>See you again</p>
29
<p id=“cat” class=“style”>
p { Tag P }#cat { id cat }.style { class style }
30
31
SAMPLE PAGE
See you again
H T M L C S S
<p class="style"> See you again </p>.style{ color: green; } .style{ color: yellow; } .style{ color: red; } .style{ color: blue; }
32
33
34