HTML [email protected]
<HTML>Hypertext Markup Language
http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Sir_Tim_Berners-Lee.jpg/640px-Sir_Tim_Berners-Lee.jpg
Tim Berners-Lee
http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Sir_Tim_Berners-Lee.jpg/640px-Sir_Tim_Berners-Lee.jpg
Tim Berners-Lee
- HTTP
- HTML
- WWW
- Web Browser
- Web Server
- Web Page
World Wide Web Consortiumwww.w3.org
web browser
perkembangan teknologi internetwww.evolutionoftheweb.com
HTML
HTML
CSS
HTML
CSS javascript
HTML
HTML CSS
+
HTML CSS javascript
+ +
www.pw1.if-unpas.org/2014
next?
Let’s code!
<HTML>Hypertext Markup Language
Let’s code!
notepad
namafile.html
<HTML>kerangka
<HTML>tag
<head>bagian
<title></title>- judul halaman
<style></style>
<script></script>- javascript
<meta></meta>- metadata
- CSS
metadata
<body>bagian
- teks <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>, …
- pendukung teks <br>, <hr>, <em>, <strong>, …
- gambar <img>
- hyperlink <a>
- list (bullets & numbering) <ul>, <ol>, <li>, <dl>, <dt>, <dd>
- tabel <table>, <thead>, <tbody>, …
- form <form>, <input>, <select>, <button> …
- script <script>
- object <object>
- grouping <div>, <span>
komentar <!-- ini adalah komentar. -->
tagstruktur
<namatag atribut=“nilai”>
<body bgcolor=“lightblue”>
<body bgcolor=“lightblue”>
nama tag
<body bgcolor=“lightblue”>
nama tag
atribut
<body bgcolor=“lightblue”>
nama tag
atribut
nilai / value
<body bgcolor=“lightblue” id=“myid” class=“myclass”>
globalatribut
accesskey class
id dir
lang style
tabindex title
www.w3school.com/Tagsatribut lengkap
<HTML>paragraf
<p></p>
<br> & <hr>
<b></b>, <i></i> & <u></u>
<b></b>, <i></i> & <u></u>
<strong></strong> & <em></em>
<HTML>heading
<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>
<HTML>list
<ol></ol>, <ul></ul> & <dl></dl>
<ol></ol>ordered list
<ol><li>item 1</li><li>item 2</li>…
</ol>
<ol type=“”></ol>1 A a I i
<ul></ul>unordered list
<ul><li>item 1</li><li>item 2</li>…
</ul>
<ul type=“”></ul>disc
square circle
<dl></dl>definition list
<dl><dt>term 1</dt><dd>description 1</li><dt>term 2</dt><dd>description 2</li>…
</dl>
<HTML>hyperlink
<a></a>anchor
<a href=“”></a>
external link http://www.google.com,
http://twitter.com/sandhikagalih
internal link / relative url product.html,
../admin/index.html
<a href=“”></a>
page anchor #about,
index.html#contact
<a href=“”></a>
<a target=“”></a>_self
_blank _parent
_top
hyperlink + image ?
<HTML>image
<img src=“”>
internal resource logo.png, background.jpg, …
<img src=“”>
<img src=“”>
external resource (hotlink)
https://www.google.com/images/srpr/logo11w.png,http://pw1.if-unpas.org/2014/images/dosen/
sandhika.png
<img src=“”>
external resource (hotlink)
https://www.google.com/images/srpr/logo11w.png,http://pw1.if-unpas.org/2014/images/dosen/
sandhika.png
<img>src alt title
width height
px
%
<img width=“” height=“”>
hyperlink + image ?
<HTML>tabel
struktur tabel
baris 1, kolom 1 baris 2, kolom 2
baris 2, kolom 1 baris 2, kolom 2
}baris
}kolom
cell / data
Nama Depan Nama Belakang
Sandhika Galih
Doddy Ferdiansyah
Nofariza Handayani
}header
}header1 2
1 3 6
2 7 5}header
<table></table>
simple
<table>…
</table>
<table><tr>…
</tr></table>
<table><tr>…
</tr></table>
table row
<table><tr><td>…</td>
</tr></table>
<table><tr><td>…</td>
</tr></table>
table data
<table><tr><td>baris 1, kolom 1</td><td>baris 1, kolom 2</td>
</tr><tr><td>baris 1, kolom 1</td><td>baris 1, kolom 2</td>
</tr>…
</table>
complex
<table><thead>
<tr><th></th><th>Kolom 1</th><th>Kolom 2</th>
</tr></thead><tbody>
<tr><th>Baris 1</th><td>Baris 1, Kolom 1</td><td>Baris 1, Kolom 2</td>
</tr><tr>
<th>Baris 2</th><td>Baris 2, Kolom 1</td><td>Baris 2, Kolom 2</td>
</tr></tbody>
</table>
<table><thead>
<tr><th></th><th>Kolom 1</th><th>Kolom 2</th>
</tr></thead><tbody>
<tr><th>Baris 1</th><td>Baris 1, Kolom 1</td><td>Baris 1, Kolom 2</td>
</tr><tr>
<th>Baris 2</th><td>Baris 2, Kolom 1</td><td>Baris 2, Kolom 2</td>
</tr></tbody>
}header
header
header
<table></table>border
cellspacing cellpadding
colspan rowspan
<table></table>border
cellspacing cellpadding
colspan rowspan
}gunakan css!
<table border=“1”>
<table border=“1” cellspacing=“0”>
<table border=“1” cellspacing=“0” cellpadding=“8”>
<table></table>
colspan rowspan
<table border="1" cellspacing="0" cellpadding="5"><tr>
<td>1,1</td><td>1,2</td><td>1,3</td>
</tr><tr>
<td>2,1</td><td>2,2</td><td>2,3</td>
</tr><tr>
<td>3,1</td><td>3,2</td><td>3,3</td>
</tr></table>
<table border="1" cellspacing="0" cellpadding="5"><tr>
<td>1,1</td><td colspan="2">colspan = 2</td>
</tr><tr>
<td>2,1</td><td>2,2</td><td>2,3</td>
</tr><tr>
<td>3,1</td><td>3,2</td><td>3,3</td>
</tr></table>
<table border="1" cellspacing="0" cellpadding="5"><tr>
<td>1,1</td><td colspan="2">colspan = 2</td>
</tr><tr>
<td>2,1</td><td>2,2</td><td>2,3</td>
</tr><tr>
<td>3,1</td><td>3,2</td><td>3,3</td>
</tr></table>
menggabungkan 2 buah cell (1,2) & (1,3)
<table border="1" cellspacing="0" cellpadding="5"><tr>
<td rowspan="3">rowspan = 3</td><td colspan="2">colspan = 2</td>
</tr><tr>
<td>2,2</td><td>2,3</td>
</tr><tr>
<td>3,2</td><td>3,3</td>
</tr></table>
<table border="1" cellspacing="0" cellpadding="5"><tr>
<td rowspan="3">rowspan = 3</td><td colspan="2">colspan = 2</td>
</tr><tr>
<td>2,2</td><td>2,3</td>
</tr><tr>
<td>3,2</td><td>3,3</td>
</tr></table>
menggabungkan 3 buah cell (1,1), (1,2) & (1,3)
<td> hilang
<td> hilang
latihan
1,1 1,2 1,3 1,4
2,1 ? 2,4
3,1 3,4
4,1 4,2 4,3 4,4
<HTML>form
1
1
2
<form></form>
<form>…
<!-- elemen form -->
…</form>
<form></form>
method
action
<form></form>
method
action}GET
POST
elemen
form
input
textarea
select
button
label
<input type=“”>text
password radio
checkbox submit reset
button …
<button type=“”></button>
submit reset
button
<textarea></textarea>
<select><option> opsi 1 </option><option> opsi 2 </option><option> opsi 3 </option>…
</select>
sekian