![Page 1: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/1.jpg)
HTMLHipertext Markup Language
![Page 2: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/2.jpg)
HTML
HTML?
Sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser.
HTML berupa kode - kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan.
HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).
![Page 3: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/3.jpg)
• HTML 2.0
(RFC1866) disetujui sebagai standard pada 22 September 1995
• HTML 3.2
14 Januari 1996
• HTML 4.0
18 Desember 1997
• ISO/IEC 15445:2000 “ISO HTML”
berdasar padaHTML 4.01 Strict – 15 Mei 2000
Sejarah HTML
![Page 4: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/4.jpg)
• XHTML 1.0 → gabungan HTML & XML
24 Januari 2000
• XHTML 1.1
16 February 2007
Sejarah HTML
![Page 5: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/5.jpg)
• Ekstensi file berupa .htm atau .html
• Non case sensitive.
• Terdiri atas tag - tag pembuka dan penutup (walaupun ada beberapa tag
yang tidak memiliki penutup).
• Tag - tag saling berpasangan & bersarang.
Ciri – ciri Dokumen HTML
![Page 6: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/6.jpg)
• Document Information<html></html>
• Document Header<head></head>
• Document Body<body></body>
Struktur HTML
![Page 7: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/7.jpg)
Struktur Standar Dokumen HTML
<html><head>
............</head><body>
....... Tuliskan tag html lain di sini ........</body>
</html>
![Page 8: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/8.jpg)
contoh.html
Contoh Dokumen HTML
![Page 9: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/9.jpg)
• Page TitleJudul dari halaman web
contoh : <title></title>
• ScriptingTempat client ‐side script yang disertakan (javascript,vbscript, jscript)
contoh : <script></script>
Document Header
![Page 10: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/10.jpg)
• StyleDipergunakan untuk mengatur bagaimana sebuah halaman web dengan berbagai komponennya hendak ditampilkan ke dalam browsercontoh : <style></style>
• MetaMeta tags, descriptions & keywords untuk mempermudahsearch engine dalam melakukan indexing.contoh : <meta></meta>
Document Header
![Page 11: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/11.jpg)
Contoh Document Header
![Page 12: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/12.jpg)
Bagian dari dokumen web yang akan ditampilkan ke usercontoh : <body></body>
Bagian ini memuat :• Teks & gambar• Link• Server Side Script (PHP, ASP, JSP)• Multimedia and Special Programmed Events (Shockwave, SWFs, Java
Applets, online video)
Document Body
![Page 13: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/13.jpg)
Tag HTML
Bagian 1
![Page 14: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/14.jpg)
<body bgcolor = “blue”>tag attribute attribute value
element
Tag, Atribut, Elemen
![Page 15: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/15.jpg)
Penulisan Tag
Tag pembuka < >
Tag penutup </ >
Contoh : <p>Ini paragraf</p>
Single Tag < />
Contoh : <br />, <hr />, <input />, <img />
![Page 16: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/16.jpg)
Berfungsi untuk menuliskan judul & sub-judul
Tag Heading
![Page 17: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/17.jpg)
Untuk membuat paragraf baru, membuat text berada dalam sebuah paragraf.
Tag paragraf bisa memiliki tag penutup, bisa juga tidak.
<p>isi paragraf</p>
contoh :<p>Ini adalah tulisan yang berada dalam paragraf. Dengan tag
ini maka tampilan dalam web akan menjadi lebih rapi</p>
<br /> : break-line (untuk berpindah ke baris selanjutnya)
<hr /> : Horizontal-line (untuk menambahkan garis
horizontal)
Tag Paragraf, HR, dan BR
![Page 18: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/18.jpg)
Untuk mengatur penggunaan tulisan dalam halaman web (jenis tulisan, ukuran, warna, dll)
contoh :
<font color=blue size=7 face=“arial”>Test</font>
Tag lain untuk manipulasi Font:
• <b> tulisan tebal </b>
• <i> tulisan miring </i>
• <u> tulisan bergaris bawah </u>
• <sub> subscript </sub>
• <sup> superscript </sup>
Font Tag
![Page 19: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/19.jpg)
Font Tag
![Page 20: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/20.jpg)
Untuk memuat gambar ke dalam halaman web.
contoh :<img src=“logo-loyola.jpg”/>
Tag image memiliki beberapa attribute antara lain :• src → lokasi gambar yang akan ditampilkan• width → ukuran lebar gambar• height → ukuran tinggi gambar• alt → deskripsi tentang gambar• title → judul gambar
Image Tag
![Page 21: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/21.jpg)
Image Tag
<img src="logo-loyola.jpg" width="100" height="108" alt="kolese loyola" title="loyola"/><hr><font size="6"><b>SMA Kolese Loyola</b></font><br><font size="6"><b>Jl.Karanganyar 37</b></font><br><font size="4"><b>Semarang</b></font>
![Page 22: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/22.jpg)
Dipergunakan untuk menghubungkan (linking) text dan image ke halaman lain atau bagian tertentu dari halaman yang sama dalam satu website atau website yang lain.
cth :
• Link ke halaman website lain
<a href=“http://loyola-smg.sch.id”>website</a>
• Link ke file lain dalam satu website
<a href=“halaman2.html”>Halaman 2</a>
Anchor / Hyperlink Tag
![Page 23: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/23.jpg)
Untuk mengakses bagian tertentu dalam sebuah halaman website, maka bagian halaman tersebut harus diberi penanda.
cth :
• Penanda pada bagian halaman<a id=“atas”>ini adalah alinea pertama</a>
• Link ke file yang sama<a href=“#atas”>Kembali ke Atas</a>
Anchor / Hyperlink Tag
![Page 24: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/24.jpg)
Berfungsi sebagai pembungkus dokumen HTML atau komentar,
agar tidak terbaca oleh browser.
<!-- komentar -->
contoh :
<!-- Ini adalah contoh paragraf -->
<p> paragraf pertama ini menjelaskan tentang… </p>
Tag Komentar
![Page 25: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/25.jpg)
Tag HTML
Bagian 2
![Page 26: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/26.jpg)
List
Digunakan untuk membuat daftar.
Terdiri dari : Ordered List
Unordered List
Definition List
![Page 27: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/27.jpg)
List – Ordered List
Digunakan untuk membuat daftar dimana tiap bagiannya memiliki nomor secara terurut.
Tag : <ol> .......... </ol> Contoh :
<ol>
<li>Pemrograman Web</li>
<li>Teknologi Informasi</li>
<li>Perangkat Lunak</li>
</ol>
![Page 28: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/28.jpg)
List – Unordered List
Digunakan untuk membuat daftar dimana tiap bagiannya ditandai dengan sebuah simbol.
Tag : <ul> ......... </ul> Contoh :
<ul>
<li>Pemrograman Pascal</li>
<li>Pemrograman Web</li>
<li>Desain Grafis</li>
<li>Sistem Operasi</li>
</ul>
![Page 29: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/29.jpg)
List – Definition List Digunakan untuk membuat daftar dimana tiap daftar tersebut
memiliki penjelasan (sub-bagian). Contoh :
<dl><dt>FT</dt>
<dd>Merah</dd><dd>Jingga</dd><dd>Kuning</dd><dd>Hijau</dd><dd>Biru</dd><dd>Nila dan Ungu</dd>
</dl>
![Page 30: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/30.jpg)
Atribut pada List
List Atribut Value HasilOrdered List type I I,II,III,IV,…
i i,ii,iii,iv,…
A A,B,C,D,…
a a,b,c,d,…
start 1/2/3/4/.. nilai awal list
Unordered List type square
disc
circle
![Page 31: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/31.jpg)
Contoh List
![Page 32: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/32.jpg)
Tabel Digunakan untuk menyajikan data dalam bentuk kolom dan baris, tujuannya agar informasi
dapat ditampilkan secara lebih terstruktur dan tabular.
row
column cell
table
![Page 33: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/33.jpg)
Elemen pada TabelElemen Penjelasan
<table> … </table> Mendefinisikan sebuah tabel dalam dokumen HTML.
Atribut : border, cellpadding, cellspacing
<th> … </th> Membuat judul kolom
<tr> … </tr> Mendefinisikan baris dalam tabel.
Atribut : align (left, center, right), valign (top, middle, bottom)
<td> … </td> Mendefinisikan kolom tabel.
Atribut : align (left, center, right), valign (top, middle, bottom), colspan, rowspan.
![Page 34: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/34.jpg)
Contoh Tabel
<table border=‘1’>
<tr>
<td>baris1 kolom1</td>
<td>baris1 kolom2</td>
</tr>
<tr>
<td>baris2 kolom1</td>
<td>baris2 kolom2</td>
</tr>
</table>
Baris 1Kolom 1
Baris 1Kolom 2
Baris 2Kolom 1
Baris 2Kolom 2
![Page 35: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/35.jpg)
Colspan & Rowspan
Colspan Menggabungkan beberapa cell (column) dalam satu baris.
Rowspan Menggabungkan beberapa cell (row) dalam satu kolom.
rowspan= 5
colspan = 2
![Page 36: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/36.jpg)
Contoh
![Page 37: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/37.jpg)
Contoh
![Page 38: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/38.jpg)
Cellspacing & Cellpadding
Cellspacing Jarak antara satu cell dengan cell yang lain.
Cellpadding Jarak antara tepi cell dengan isi cell.
![Page 39: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/39.jpg)
Div Tag
Digunakan untuk membungkus tag-tag lain agar memiliki perilaku yang sama.
<div style:”color:red”>
<h3>Pemrograman Web</h3>
<p>ini adalah pelajaran pemrograman web</p>
</div>
![Page 40: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/40.jpg)
Div Tag
Digunakan sebagai sistem blok untuk membuat lapisan layout pada halaman.
<div id=”header”> ...
</div><div id=”content”>
...</div><div id=”footer”>
...</div>
![Page 41: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/41.jpg)
HTML FORM
Bagian 3
![Page 42: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/42.jpg)
HTML Form Elemen HTML yang digunakan untuk menerima bermacam-macam
masukan (input) dari pengguna web. Contoh :
![Page 43: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/43.jpg)
Form Tag
Sebuah tag yang membungkus elemen-elemen input di dalamnya dan berfungsi mengirim data input ke server.
<form>.elemen input.
</form>
![Page 44: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/44.jpg)
Elemen Input Form
Macam-macam komponen input : Textfield Password Checkbox Radio button Listbox Combobox Text Area File
![Page 45: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/45.jpg)
Elemen Input : Text Field Digunakan untuk memasukan huruf, angka, karakter, dll ke dalam sebuah
form.
Contoh tag :
Contoh hasil :
![Page 46: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/46.jpg)
Elemen Input : Password Digunakan untuk menyembunyikan karakter masukan.
Contoh tag :
Contoh hasil :
![Page 47: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/47.jpg)
Elemen Input : Radio Button Digunakan untuk melakukan satu pemilihan diantara 2 atau lebih data.
Contoh tag :
Contoh hasil :
![Page 48: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/48.jpg)
Elemen Input : Checkbox Digunakan untuk melakukan satu atau lebih dari banyak pemilihan data.
Contoh tag : Contoh hasil :
![Page 49: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/49.jpg)
Elemen Input : Combo box Digunakan untuk melakukan satu pemilihan diantara 2 atau lebih data
menggunakan drop-down.Contoh tag :
Contoh hasil :
![Page 50: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/50.jpg)
Elemen Input : Listbox Digunakan untuk melakukan satu atau lebih pemilihan diantara 2 atau
lebih data menggunakan listbox.
Contoh hasil :
Contoh tag :
![Page 51: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/51.jpg)
Elemen Text Area Sebuah area yang dapat menampung teks yang tidak terbatas ukurannya.
Contoh tag :
Contoh hasil :
![Page 52: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/52.jpg)
Elemen Input : File Digunakan untuk memilih atau membuka file.
Contoh tag :
Contoh hasil :
![Page 53: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/53.jpg)
Atribut Form
Atribut Form : Action : Lokasi script yang memproses data dari form. Enctype : Mendefinsikan cara encoding data sebelum dikirimkan.
Biasanya digunakan jika ingin meng-upload file. Method : Metode pengiriman data.
GET : Data dikirimkan bersama URL. POST : Data dikirimkan terpisah dari URL.
<form action="proses.php" method="post">...
</form>
![Page 54: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/54.jpg)
Elemen Tombol : Submit Tombol yang berfungsi secara otomatis mengirim data yang di-input-kan
di dalam form ke halaman ‘action’.
Contoh tag :
Contoh hasil :
![Page 55: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/55.jpg)
Elemen Tombol : Reset Tombol yang berfungsi mengembalikan “value” dari semua elemen di
form ke “value” semula saat halaman dibuka.
Contoh tag :
Contoh hasil :
![Page 56: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/56.jpg)
Tugas
Buatlah halaman registrasi suatu website.
Data yang harus dimasukkan pengguna, minimal : Nama depan, nama
belakang, alamat, tanggal lahir, jenis kelamin, username, password
![Page 57: Hipertext Markup Language - tiklc.files.wordpress.com · HTML HTML? Sebuah ... contoh.html Contoh Dokumen HTML • Page Title. Judul dari halaman web. contoh :](https://reader030.vdocuments.site/reader030/viewer/2022021505/5ae2c8197f8b9a90138cb932/html5/thumbnails/57.jpg)
TERIMA KASIH