SlideShare a Scribd company logo
BASIC
: mypstom@gmail.com
1
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.css
name.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
: mypstom@gmail.com
22
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

More Related Content

What's hot (12)

PDF
문돌이가 가르치는 웹 프론트엔드 기초 2차시
동현 조
 
TXT
Sigueme
Maxi Grey Laurie
 
DOCX
Menu
Esteban Jimenez
 
PDF
Html5
Elcio Ferreira
 
DOCX
Primera página web
MarySolNf
 
TXT
Cbi frame
ramakrishnanr
 
PPTX
Membuat CV dengan HTML
EkkyPratama1
 
PPTX
Membuat CV dengan HTML
Dasufianti
 
PPTX
Mengenal HTML
Yulef Dian
 
PPTX
Foredrag om HTML5 og CSS3
Tobias Thorstensen
 
PPTX
Tjejer kodar 100 - Dag 2 - HTML & CSS
Emil Stenström
 
문돌이가 가르치는 웹 프론트엔드 기초 2차시
동현 조
 
Primera página web
MarySolNf
 
Cbi frame
ramakrishnanr
 
Membuat CV dengan HTML
EkkyPratama1
 
Membuat CV dengan HTML
Dasufianti
 
Mengenal HTML
Yulef Dian
 
Foredrag om HTML5 og CSS3
Tobias Thorstensen
 
Tjejer kodar 100 - Dag 2 - HTML & CSS
Emil Stenström
 

Viewers also liked (9)

PDF
Miami media-party-html-css
Rachel Schallom
 
PDF
[Basic HTML/CSS] 0. introduction
Hyejin Oh
 
PPTX
Fundamentos de programacion
Luis Alonso
 
PPTX
Sublime Text 2 Tips & Tricks
Rhys Wynne
 
PDF
Apuntes: SublimeText 3
Francisco Javier Arce Anguiano
 
PPT
HTML & CSS Workshop Notes
Pamela Fox
 
PPTX
Introduction to HTML and CSS
Ferdous Mahmud Shaon
 
PPSX
Introduction to Html5
www.netgains.org
 
PPT
Introduction to HTML
MayaLisa
 
Miami media-party-html-css
Rachel Schallom
 
[Basic HTML/CSS] 0. introduction
Hyejin Oh
 
Fundamentos de programacion
Luis Alonso
 
Sublime Text 2 Tips & Tricks
Rhys Wynne
 
Apuntes: SublimeText 3
Francisco Javier Arce Anguiano
 
HTML & CSS Workshop Notes
Pamela Fox
 
Introduction to HTML and CSS
Ferdous Mahmud Shaon
 
Introduction to Html5
www.netgains.org
 
Introduction to HTML
MayaLisa
 
Ad

Html css basic