Post on 08-Jun-2020
HTML sandhikagalih@unpas.ac.idpendahuluan
<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
+ +
Let’s code!
<HTML>Hypertext Markup Language
<HTML>Hypertext Markup Language
Let’s code!
notepad
namafile.html
<HTML>kerangka
<HTML>paragraf
<p></p>
<br> & <hr>
<b></b>, <i></i> & <u></u>
<b></b>, <i></i> & <u></u>
<strong></strong> & <em></em>
<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>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>form
<form></form>
<form>…
<!-- elemen form -->
…</form>
<form></form>
method
action
<form></form>
method
action}GET
POST
1
1
2
elemen form
input
textarea
select
button
label
<input type=“”>text
password radio
checkbox submit reset
button …
<textarea></textarea>
<select><option> opsi 1 </option><option> opsi 2 </option><option> opsi 3 </option>…
</select>
<button type=“”></button>
submit reset
button
<HTML>tabel
<table></table>
simple
<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><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 / judul
header / judul
header / judul
<table></table>
border align
cellspacing cellpadding
colspan rowspan
<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
<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 ?