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)

문돌이가 가르치는 웹 프론트엔드 기초 2차시
문돌이가 가르치는 웹 프론트엔드 기초 2차시문돌이가 가르치는 웹 프론트엔드 기초 2차시
문돌이가 가르치는 웹 프론트엔드 기초 2차시
동현 조
 
Primera página web
Primera página webPrimera página web
Primera página web
MarySolNf
 
Membuat CV dengan HTML
Membuat CV dengan HTMLMembuat CV dengan HTML
Membuat CV dengan HTML
EkkyPratama1
 
Membuat CV dengan HTML
Membuat CV dengan HTMLMembuat CV dengan HTML
Membuat CV dengan HTML
Dasufianti
 
Mengenal HTML
Mengenal HTMLMengenal HTML
Mengenal HTML
Yulef Dian
 
Foredrag om HTML5 og CSS3
Foredrag om HTML5 og CSS3 Foredrag om HTML5 og CSS3
Foredrag om HTML5 og CSS3
Tobias Thorstensen
 
Tjejer kodar 100 - Dag 2 - HTML & CSS
Tjejer kodar 100 - Dag 2 - HTML & CSSTjejer kodar 100 - Dag 2 - HTML & CSS
Tjejer kodar 100 - Dag 2 - HTML & CSS
Emil Stenström
 
문돌이가 가르치는 웹 프론트엔드 기초 2차시
문돌이가 가르치는 웹 프론트엔드 기초 2차시문돌이가 가르치는 웹 프론트엔드 기초 2차시
문돌이가 가르치는 웹 프론트엔드 기초 2차시
동현 조
 
Primera página web
Primera página webPrimera página web
Primera página web
MarySolNf
 
Membuat CV dengan HTML
Membuat CV dengan HTMLMembuat CV dengan HTML
Membuat CV dengan HTML
EkkyPratama1
 
Membuat CV dengan HTML
Membuat CV dengan HTMLMembuat CV dengan HTML
Membuat CV dengan HTML
Dasufianti
 
Tjejer kodar 100 - Dag 2 - HTML & CSS
Tjejer kodar 100 - Dag 2 - HTML & CSSTjejer kodar 100 - Dag 2 - HTML & CSS
Tjejer kodar 100 - Dag 2 - HTML & CSS
Emil Stenström
 

Viewers also liked (9)

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

Html css basic