Peramban internet menerima dokumen HTML dari server web atau dari penyimpanan lokal dan membuat dokumen menjadi halaman web multimedia. HTML menggambarkan struktur halaman web secara semantik dan isyarat awal yang disertakan untuk penampilan dokumen.
Apa itu HTML ?
HTML adalah struktur halaman web, termasuk kontennya. Ini seperti struktur dasar sebuah rumah, termasuk pipa ledeng dan kabel listrik. Sebuah situs web dapat ada tanpa CSS, tetapi tidak tanpa HTML. CSS adalah gaya halaman, atau desain / dekorasi interior.
Doctype HTML
DOCTYPE atau document type declaration (DTD) adalah sebuah keterangan yang ditulis untuk memberitahu web browser tentang aturan penulisan dari dokumen yang sedang ditampilkan. Deklarasi Doctype ditulis di awal file HTML.
Deklarasi tersebut perlu dilakukan supaya browser mengetahui tipe dokumen yang akan diproses adalah HTML. Penulisan doctype pada HTML5 jauh lebih sederhana. Cara penulisan doctype untuk HTML5 adalah <!DOCTYPE html>.
Basic Layout HTML
<html>
<head></head>
<body></body>
</html>
C. Meta Tags dan Search Engine
<meta> tag adalah tag html yang digunakan untuk menyimpan metadata suatu dokumen HTML. Metadata tidak akan muncul pada halaman, tetapi dapat dibaca oleh Search Engine. Tag ini mendeskripsikan konten dan karakteristik dari halaman web.
Elemen <meta> biasanya digunakan untuk menyimpan data seperti kata kunci, deskripsi, pengarang suatu artikel, terakhir dimodifikasi, dll. Meta tags biasanya disisipkan diantara kode <head> dan </head>. <meta> tag didukung oleh berbagai browser.
Struktur Meta Tags adalah
<meta name="________" content="__________"> atau
Contoh syntax meta tag :
1. Mendefinisikan kata kunci untuk mesin pencari:
<meta name="keywords" content="HTML, CSS,& DOM">
2. Mendefinisikan deskripsi halaman web:
<meta name="description" content=" Tutorial Pelatihan HTML, CSS,& DOM">
3. Mendefinisikan penulis halaman web:
<meta name="author" content="Kelly Clark">
Penggunaan Paragraph pada HTML
Teks/kode dibawah ini terdiri atas kumpulan paragraf yang saling berkaitan. Kumpulan paragraf ini menjelaskan tentang hal-hal yang berkaitan dengan apa itu paragraf. Paragraf adalah kumpulan dari beberapa kalimat yang saling mendukung. Punya ide pokok sebagai dasar dari paragraf itu sendiri
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tutorial Paragraf di HTML</title>
</head>
<body>
<p>Teks ini terdiri atas kumpulan paragraf yang saling berkaitan. Kumpulan paragraf ini menjeaskan tentang hal-hal yang berkaitan dengan apa itu paragraf.</p>
<p>Paragraf adalah kumpulan dari beberapa kalimat yang saling mendukung. Punya ide pokok sebagai dasar dari paragraf itu sendiri.</p>
</body>
</html>
Typography HTML
Tipografi adalah Suatu teknik untuk memanipulasi huruf untuk membuat kesan tertentu dengan tujuan kenyamanan semaksimal mungkin pada saat dibaca. Pada HTML ada beberapa Tag yang digunakan untuk memanipulasi huruf atau text contohnya Font-face, Font color, dan Format Font.
Typography HTML Font Face
Font-Face digunakan untuk mengganti jenis font.
Penulisan Umum :
<font face=”jenis_font”> Teks Disini </font>
Typography HTML Font Color
Font color berfungsi untuk mewarnai font.
Penulisan Umum :
<font color =”warna dalam bahasa inggris atau kode warna”>Teks Disini </font>
* jika menggunakan kode warna, Selalu di awali dengan tanda pagar
Contoh :
<html>
<head>
<title> Font Color </title>
</head>
<body>
<font color=”red”> Teks Warna merah </font><br/>
<font color=”#00FF00”> Teks Warna Hijau dengan kode warna #00FF00 </font>
</body>
</html>
Hasilnya :
Typography HTML: Format font
Elemen pemformatan dirancang untuk menampilkan jenis teks khusus:
E. Links, Images, dan Attributes di HTML
Links HTML
Link atau Hyperlink adalah elemen HTML yang berfungsi menghubungkan suatu halaman web ke halaman web yang lain. Elemen ini bisa diklik dan nanti akan membuka halaman lain sesuai alamat URL yang diberikan.
Syntax HTML Links :
<a href="url">link text</a>
Penjelasan :
Absolute Link
Link Absolut adalah link yang akan menunjuk ke halaman dari situs web lain. Penulisan alamatnya pun harus ditulis secara lengkap. Contoh penulisan :
Relative Link (Same Level)
Link Relatif adalah link yang tujuannya mengarah ke dokumen-dokumen lain yang masih berada di dalam satu situs web yang sama (komputer yang sama). Penulisan alamat tujuannya pun tidak perlu ditulis secara lengkap, cukup nama dokumennya saja, dan nama direktorinya (jika ada). Html terletak di folder yang sama dengan halaman tempat link ini muncul.
Relative Link (Level Below)
Sama seperti penjelasan sebelumnya tentang relative link namun ada sedikit perbedaan. Dapat dilihat pada contoh Relative Link (Level Below) memiliki perbedaan dimana html yang dituju (about.html) terdapat didalam folder lain (resume).
Namun lokasi penyimpanan folder tersebut masih didalam folder sebelumnya (home) dan folder tersebut (resume) setara dengan halaman html (index.html). Sehingga halaman html link (about.html) memiliki tingkatan di bawah halaman html (index.html).
Relative Link (Different Folder)
Sama seperti penjelasan sebelumnya tentang relative link namun ada sedikit perbedaan. Dapat dilihat pada contoh Relative Link (Different Folder) memiliki perbedaan dimana html yang dituju (about.html) terdapat didalam folder resume dan index.html terdapat didalam folder start namun kedua folder berbeda tersebut masih sama sama berada didalam folder yang sama (folder home).
Email Link
Link yang tujuannya mengarah kepada alamat email
Images HTML
Tag HTML <img> digunakan untuk menyematkan gambar di halaman web. Gambar tidak secara teknis dimasukkan ke dalam halaman web, gambar ditautkan ke halaman web. Tag <img> membuat ruang penahanan untuk gambar yang direferensikan.Tag <img> kosong, hanya berisi atribut, dan tidak memiliki tag penutup.
Syntax images HTML adalah sebagai berikut :
<img src="url" alt="alternatetext">
Tag <img> memiliki dua atribut yang diperlukan:
Attributes HTML
Atribut HTML memberikan informasi tambahan tentang elemen HTML.
Atribut HTML merupakan:
F. List dan Table di HTML
Contoh :
<h3>Before Driving</h3>
<ol>
<li>External Check</li>
<li>Enter and Lock Doors</li>
Ordered List (Roman)
Ordered List Roman (berurutan romawi) dimulai dengan tag <ol type=”1”>. Setiap item daftar dimulai dengan tag <li>. Item daftar akan ditandai dengan angka romawi secara default.
Contoh :
<h3>Roman Emperors</h3>
<ol type="1">
<li>Augustus</li>
<li>Tiberius</li>
<li>Caligula</li>
<li>Claudius</li>
<li>Nero</li>
</ol>
Description List
Description List adalah daftar istilah, dengan deskripsi setiap istilah. Tag <dl> mendefinisikan list deskripsi, tag <dt> mendefinisikan istilah (nama), dan tag <dd> menjelaskan setiap istilah.
Table HTML
Tabel HTML memungkinkan pengembang web untuk mengatur data menjadi baris dan kolom. Tag <table> mendefinisikan tabel HTML. Setiap baris tabel didefinisikan dengan tag <tr>. Setiap header tabel didefinisikan dengan tag <th>. Setiap data tabel / sel didefinisikan dengan tag <td>. Secara default, teks dalam elemen <th> dicetak tebal dan di tengah. Secara default, teks dalam elemen <td> beraturan dan rata kiri.
Table Tags
Tag <table> mendefinisikan tabel HTML.
Table Rows
Tag <tr> mendefinisikan baris tabel HTML.
Table Data
Table Header
Tag <th> mendefinisikan header pada tabel HTML.
G. Form dan Input di HTML
GET vs. POST
Membuat Form Pencarian
Menambahkan Tombol Submit
Contoh :
<form action="http://www.bing.com/search/" method="get">
<label>
Search: <input type="search" name="q" />
<input type="submit" name="submit" value="Submit" />
</label>
</form>
Browser URL
H. Block & Inline Level Element HTML
Setiap elemen HTML memiliki nilai tampilan default, bergantung pada jenis elemennya.Ada dua nilai tampilan:
1. Elemen level blok (block-level)
Selalu dimulai pada baris baru dan menempati lebar penuh yang tersedia (membentang ke kiri dan kanan sejauh mungkin).
Berikut ini adalah beberapa contoh elemen blok yang digunakan:
<div>, <p>, <h1> hingga <h6>, <header> dan <footer>, elemen daftar: <ul>, <ol>, <dl>, <li>, <dl>, <dt>, dan <dd>, <nav>, <form>, <fieldset>, <table>, <figure>, <figcaption>, <video>
2. Elemen level sebaris (inline-level)
Tidak dimulai pada baris baru dan hanya membutuhkan lebar sebanyak yang diperlukan.
Berikut ini beberapa contoh elemen inline yang digunakan:
<span>, <a>, <br>, <label>, <input>, <textarei>, <select>, <img>
I. Divs & Spans, Classes & Ids di HTML
Divs & Spans HTML
Contoh :
Span HTML
<!DOCTYPE html>
<html>
<body>
<h1>Contoh elemen span</h1>
<p> Saya membeli pena <span style="color:blue;fontweight:bold">biru</span> dan penggaris <span style="color:darkolivegreen;font-weight:bold">hijau</span>kemarin.</p>
</body>
</html>
- ID attribute HTML
Digunakan untuk menentukan id unik dan tidak boleh memiliki lebih dari satu elemen dengan id yang sama dalam dokumen HTML. Digunakan untuk menunjuk ke deklarasi style tertentu dalam lembar style (style sheet). Sintaks untuk id adalah: tulis karakter hash (#), diikuti dengan nama id. Kemudian, tentukan properti CSS di dalam kurung kurawal {}.
Ids HTML
Pada contoh terdapat elemen <h1> yang menunjuk ke nama id "myHeader". Elemen <h1> ini akan diberi gaya sesuai dengan definisi gaya #myHeader di bagian head.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
J. HTML Entities
Ketika membuat konten website, terkadang menggunakan karakter khusus seperti simbol copyright (©), ampersand (&), lebih kecil (<), lebih besar (>), titik koma (;) dan sebagainya. Untuk menampilkan simbol-simbol tersebut di HTML, perlu menggunakan entitas karakter (character entities).
Contoh penulisan Entities sebagai berikut :
&entity_name;
OR
&#entity_number;
Penulisan entitas karakter diawali dengan simbol &, kemudian nama atau angka entitas dan diakhiri dengan titik koma (;). Sebagai contoh, untuk menampilkan simbol copyright (©), pada HTML perlu menulis © atau ©.
Contoh HTML Entities :
Apa itu HTML ?
A. Pengertian dan Penjelasan HTML
HTML adalah singkatan dari Hypertext Markup Language. HTML bukan sebuah bahasa pemrograman; HTML adalah bahasa markup yang mendefinisikan struktur konten web. HTML terdiri atas serangkaian elements, yang dapat digunakan untuk menyisipkan atau membungkus konten di dalamnya sehingga mempunyai tampilan tertentu sesuai fungsi elemennya.
Tags penyisip dapat membuat sebuah kata atau gambar hyperlink ke konten lainnya, memiringkan tulisan, memperbesar atau memperkecil font, dan lain-lain. Saat ini versi terbaru dari HTML adalah HTML5. HTML5 berisi beberapa fitur baru, tapi tetap membawa mayoritas fitur dari versi HTML sebelumnya, yakni HTML 4 dan xHTML. File HTML harus dijalankan dari aplikasi web browser.
HTML adalah singkatan dari Hypertext Markup Language. HTML bukan sebuah bahasa pemrograman; HTML adalah bahasa markup yang mendefinisikan struktur konten web. HTML terdiri atas serangkaian elements, yang dapat digunakan untuk menyisipkan atau membungkus konten di dalamnya sehingga mempunyai tampilan tertentu sesuai fungsi elemennya.
Tags penyisip dapat membuat sebuah kata atau gambar hyperlink ke konten lainnya, memiringkan tulisan, memperbesar atau memperkecil font, dan lain-lain. Saat ini versi terbaru dari HTML adalah HTML5. HTML5 berisi beberapa fitur baru, tapi tetap membawa mayoritas fitur dari versi HTML sebelumnya, yakni HTML 4 dan xHTML. File HTML harus dijalankan dari aplikasi web browser.
HTML adalah struktur halaman web, termasuk kontennya. Ini seperti struktur dasar sebuah rumah, termasuk pipa ledeng dan kabel listrik. Sebuah situs web dapat ada tanpa CSS, tetapi tidak tanpa HTML. CSS adalah gaya halaman, atau desain / dekorasi interior.
Sama seperti di rumah, di mana dinding perlu dibangun sebelum mulai memberi warna untuk mengecatnya, perlu membuat struktur laman web dengan HTML sebelum mulai menata atau menghias tampilan situs web.
B. Doctype dan basic layout
B. Doctype dan basic layout
Doctype HTML
DOCTYPE atau document type declaration (DTD) adalah sebuah keterangan yang ditulis untuk memberitahu web browser tentang aturan penulisan dari dokumen yang sedang ditampilkan. Deklarasi Doctype ditulis di awal file HTML.
Deklarasi tersebut perlu dilakukan supaya browser mengetahui tipe dokumen yang akan diproses adalah HTML. Penulisan doctype pada HTML5 jauh lebih sederhana. Cara penulisan doctype untuk HTML5 adalah <!DOCTYPE html>.
Basic Layout HTML
<html>
<head></head>
<body></body>
</html>
C. Meta Tags dan Search Engine
<meta> tag adalah tag html yang digunakan untuk menyimpan metadata suatu dokumen HTML. Metadata tidak akan muncul pada halaman, tetapi dapat dibaca oleh Search Engine. Tag ini mendeskripsikan konten dan karakteristik dari halaman web.
Elemen <meta> biasanya digunakan untuk menyimpan data seperti kata kunci, deskripsi, pengarang suatu artikel, terakhir dimodifikasi, dll. Meta tags biasanya disisipkan diantara kode <head> dan </head>. <meta> tag didukung oleh berbagai browser.
Struktur Meta Tags adalah
<meta name="________" content="__________"> atau
<meta http-equiv="_______" content="______">.
Contoh :
<head>
<meta charset="UTF-8">
<meta name="description" content="Tutorial Pelatihan HTML,CSS,& DOM">
<meta name="keywords" content="HTML, CSS,& DOM">
<meta name="author" content="Kelly Clark">
<meta name="viewport" content="width=device-width, initialscale=1.0">
</head>
Contoh :
<head>
<meta charset="UTF-8">
<meta name="description" content="Tutorial Pelatihan HTML,CSS,& DOM">
<meta name="keywords" content="HTML, CSS,& DOM">
<meta name="author" content="Kelly Clark">
<meta name="viewport" content="width=device-width, initialscale=1.0">
</head>
Contoh syntax meta tag :
1. Mendefinisikan kata kunci untuk mesin pencari:
<meta name="keywords" content="HTML, CSS,& DOM">
2. Mendefinisikan deskripsi halaman web:
<meta name="description" content=" Tutorial Pelatihan HTML, CSS,& DOM">
3. Mendefinisikan penulis halaman web:
<meta name="author" content="Kelly Clark">
4. Refresh dokumen setiap 60 detik:
<meta http-equiv="refresh" content="60">
5. Menyetel area pandang/viewport untuk membuat situs web terlihat bagus di semua perangkat:
<meta name="viewport" content="width=device-width, initialscale=1.0">
D. Headings, Paragraph dan Typography di HTML
Headings HTML
Heading biasanya digunakan untuk membuat judul atau sub judul. Heading pada HTML ada 6 jenis. Penulisan umum heading : <hn> teks disini </hn>. Dimana n terdiri atas angka 1-6. Semakin besar Angka Heading, maka semakin kecil ukuran font nya.
<meta http-equiv="refresh" content="60">
5. Menyetel area pandang/viewport untuk membuat situs web terlihat bagus di semua perangkat:
<meta name="viewport" content="width=device-width, initialscale=1.0">
D. Headings, Paragraph dan Typography di HTML
Headings HTML
Heading biasanya digunakan untuk membuat judul atau sub judul. Heading pada HTML ada 6 jenis. Penulisan umum heading : <hn> teks disini </hn>. Dimana n terdiri atas angka 1-6. Semakin besar Angka Heading, maka semakin kecil ukuran font nya.
Paragraph HTML
Tag paragraf dalam HTML digunakan untuk membuat paragraf dalam sebuah halaman HTML. Struktur penulisan untuk paragraf adalah sebagai berikut:
Tag paragraf dalam HTML digunakan untuk membuat paragraf dalam sebuah halaman HTML. Struktur penulisan untuk paragraf adalah sebagai berikut:
Penggunaan Paragraph pada HTML
Teks/kode dibawah ini terdiri atas kumpulan paragraf yang saling berkaitan. Kumpulan paragraf ini menjelaskan tentang hal-hal yang berkaitan dengan apa itu paragraf. Paragraf adalah kumpulan dari beberapa kalimat yang saling mendukung. Punya ide pokok sebagai dasar dari paragraf itu sendiri
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tutorial Paragraf di HTML</title>
</head>
<body>
<p>Teks ini terdiri atas kumpulan paragraf yang saling berkaitan. Kumpulan paragraf ini menjeaskan tentang hal-hal yang berkaitan dengan apa itu paragraf.</p>
<p>Paragraf adalah kumpulan dari beberapa kalimat yang saling mendukung. Punya ide pokok sebagai dasar dari paragraf itu sendiri.</p>
</body>
</html>
Typography HTML
Tipografi adalah Suatu teknik untuk memanipulasi huruf untuk membuat kesan tertentu dengan tujuan kenyamanan semaksimal mungkin pada saat dibaca. Pada HTML ada beberapa Tag yang digunakan untuk memanipulasi huruf atau text contohnya Font-face, Font color, dan Format Font.
Typography HTML Font Face
Font-Face digunakan untuk mengganti jenis font.
Penulisan Umum :
<font face=”jenis_font”> Teks Disini </font>
Contoh :
<html>
<head>
<title> Font Face </title>
</head>
<body>
<font face = “Calibri”> Font tipe Calibri </font>
<font face = “sans-serif”> Font tipe sans-serif </font>
<font face = “Times New Roman”> Font tipe Times new Roman </font>
</body>
</html>
<html>
<head>
<title> Font Face </title>
</head>
<body>
<font face = “Calibri”> Font tipe Calibri </font>
<font face = “sans-serif”> Font tipe sans-serif </font>
<font face = “Times New Roman”> Font tipe Times new Roman </font>
</body>
</html>
Maka jika dijalankan di browser masing-masing hasilnya teks tersebut akan berubah sesuai jenis font nya.
Typography HTML Font Color
Font color berfungsi untuk mewarnai font.
Penulisan Umum :
<font color =”warna dalam bahasa inggris atau kode warna”>Teks Disini </font>
* jika menggunakan kode warna, Selalu di awali dengan tanda pagar
Contoh :
<html>
<head>
<title> Font Color </title>
</head>
<body>
<font color=”red”> Teks Warna merah </font><br/>
<font color=”#00FF00”> Teks Warna Hijau dengan kode warna #00FF00 </font>
</body>
</html>
Hasilnya :
Typography HTML: Format font
Elemen pemformatan dirancang untuk menampilkan jenis teks khusus:
- <b> - Teks tebal
- <strong> - Teks penting
- <i> - Teks miring
- <em> - Teks yang ditekankan
- <mark> - Teks yang ditandai
- <small> - Teks lebih kecil
- <del> - Teks yang dihapus
- <ins> - Teks yang disisipkan
- <sub> - Teks subskrip
- <sup> - Teks superskrip
Links HTML
Link atau Hyperlink adalah elemen HTML yang berfungsi menghubungkan suatu halaman web ke halaman web yang lain. Elemen ini bisa diklik dan nanti akan membuka halaman lain sesuai alamat URL yang diberikan.
Syntax HTML Links :
<a href="url">link text</a>
Penjelasan :
- <a = tag untuk membuat link
- href= atribut untuk menentukan alamat URL tujuan dari link
- “url”= Alamat URL tujuan yang akan dibuka saat link di klik
- link text= Teks label untuk link
- </a>= Tag penutup
Absolute Link
Link Absolut adalah link yang akan menunjuk ke halaman dari situs web lain. Penulisan alamatnya pun harus ditulis secara lengkap. Contoh penulisan :
Relative Link (Same Level)
Link Relatif adalah link yang tujuannya mengarah ke dokumen-dokumen lain yang masih berada di dalam satu situs web yang sama (komputer yang sama). Penulisan alamat tujuannya pun tidak perlu ditulis secara lengkap, cukup nama dokumennya saja, dan nama direktorinya (jika ada). Html terletak di folder yang sama dengan halaman tempat link ini muncul.
Relative Link (Level Below)
Sama seperti penjelasan sebelumnya tentang relative link namun ada sedikit perbedaan. Dapat dilihat pada contoh Relative Link (Level Below) memiliki perbedaan dimana html yang dituju (about.html) terdapat didalam folder lain (resume).
Namun lokasi penyimpanan folder tersebut masih didalam folder sebelumnya (home) dan folder tersebut (resume) setara dengan halaman html (index.html). Sehingga halaman html link (about.html) memiliki tingkatan di bawah halaman html (index.html).
Relative Link (Level Above)
Sama seperti penjelasan sebelumnya tentang relative link namun ada sedikit perbedaan. Dapat dilihat pada contoh Relative Link (Level Above) memiliki perbedaan dimana html yang dituju (about.html) terdapat didalam folder yang sama (home) dengan folder (start) yang berisi halaman html (index.html). Sehingga halaman html link (about.html) memiliki tingkatan di atas halaman html (index.html).
Sama seperti penjelasan sebelumnya tentang relative link namun ada sedikit perbedaan. Dapat dilihat pada contoh Relative Link (Level Above) memiliki perbedaan dimana html yang dituju (about.html) terdapat didalam folder yang sama (home) dengan folder (start) yang berisi halaman html (index.html). Sehingga halaman html link (about.html) memiliki tingkatan di atas halaman html (index.html).
Relative Link (Different Folder)
Sama seperti penjelasan sebelumnya tentang relative link namun ada sedikit perbedaan. Dapat dilihat pada contoh Relative Link (Different Folder) memiliki perbedaan dimana html yang dituju (about.html) terdapat didalam folder resume dan index.html terdapat didalam folder start namun kedua folder berbeda tersebut masih sama sama berada didalam folder yang sama (folder home).
Email Link
Link yang tujuannya mengarah kepada alamat email
Images HTML
Tag HTML <img> digunakan untuk menyematkan gambar di halaman web. Gambar tidak secara teknis dimasukkan ke dalam halaman web, gambar ditautkan ke halaman web. Tag <img> membuat ruang penahanan untuk gambar yang direferensikan.Tag <img> kosong, hanya berisi atribut, dan tidak memiliki tag penutup.
Syntax images HTML adalah sebagai berikut :
<img src="url" alt="alternatetext">
Tag <img> memiliki dua atribut yang diperlukan:
- src - Menentukan jalur ke gambar
- alt - Menentukan teks alternatif untuk gambar
Attributes HTML
Atribut HTML memberikan informasi tambahan tentang elemen HTML.
Atribut HTML merupakan:
- Semua elemen HTML dapat memiliki atribut
- Atribut memberikan informasi tambahan tentang elemen
- Atribut selalu ditentukan di tag awal
- Atribut biasanya datang dalam pasangan nama / nilai seperti: name = "value"
F. List dan Table di HTML
List HTML
List HTML memungkinkan pengembang web untuk mengelompokkan sekumpulan item terkait dalam daftar.
Contoh :
- unordered HTML list:
● Item
● Item
● Item
● Item
- ordered HTML list:
1. First item
2. Second item
3. Third item
4. Fourth item
Unordered List
Unordered List (tidak berurutan) dimulai dengan tag <ul>. Setiap item daftar dimulai dengan tag <li>. Item daftar akan ditandai dengan peluru (lingkaran hitam kecil) secara default.
Contoh :
<h3>Common Fruits</h3>
<ul>
<li>Pears</li>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
<li>Lemons</li>
</ul>
List HTML memungkinkan pengembang web untuk mengelompokkan sekumpulan item terkait dalam daftar.
Contoh :
- unordered HTML list:
● Item
● Item
● Item
● Item
- ordered HTML list:
1. First item
2. Second item
3. Third item
4. Fourth item
Unordered List
Unordered List (tidak berurutan) dimulai dengan tag <ul>. Setiap item daftar dimulai dengan tag <li>. Item daftar akan ditandai dengan peluru (lingkaran hitam kecil) secara default.
Contoh :
<h3>Common Fruits</h3>
<ul>
<li>Pears</li>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
<li>Lemons</li>
</ul>
Ordered List
Ordered List (berurutan) dimulai dengan tag <ol>. Setiap item daftar dimulai dengan tag <li>. Item daftar akan ditandai dengan angka secara default.
Ordered List (berurutan) dimulai dengan tag <ol>. Setiap item daftar dimulai dengan tag <li>. Item daftar akan ditandai dengan angka secara default.
Contoh :
<h3>Before Driving</h3>
<ol>
<li>External Check</li>
<li>Enter and Lock Doors</li>
<li>Adjust Seats</li>
<li>Adjust Mirrors</li>
<li>Start Engine</li>
</ol>
<li>Adjust Mirrors</li>
<li>Start Engine</li>
</ol>
Ordered List (Roman)
Ordered List Roman (berurutan romawi) dimulai dengan tag <ol type=”1”>. Setiap item daftar dimulai dengan tag <li>. Item daftar akan ditandai dengan angka romawi secara default.
Contoh :
<h3>Roman Emperors</h3>
<ol type="1">
<li>Augustus</li>
<li>Tiberius</li>
<li>Caligula</li>
<li>Claudius</li>
<li>Nero</li>
</ol>
Description List
Description List adalah daftar istilah, dengan deskripsi setiap istilah. Tag <dl> mendefinisikan list deskripsi, tag <dt> mendefinisikan istilah (nama), dan tag <dd> menjelaskan setiap istilah.
Contoh :
<h3>Coffee Drinks</h3>
<dl>
<dt>Latte</dt>
<dd>Espresso and milk</dd>
<dt>Americano</dt>
<dd>Espresso and hot water</dd>
<dt>Marocchino</dt>
<dd>Espresso and cocoa</dd>
</dl>
<h3>Coffee Drinks</h3>
<dl>
<dt>Latte</dt>
<dd>Espresso and milk</dd>
<dt>Americano</dt>
<dd>Espresso and hot water</dd>
<dt>Marocchino</dt>
<dd>Espresso and cocoa</dd>
</dl>
Nested List
Nested List (Daftar bertingkat) adalah list yang muncul sebagai elemen dalam list yang lain.
Nested List (Daftar bertingkat) adalah list yang muncul sebagai elemen dalam list yang lain.
Contoh :
<h3>Restaurants</h3>
<ul>
<li>Bellows College</li>
<ol>
<li>Spaghetti</li>
<li>Chicken Marsala</li>
<li>Pear d'Anjou</li>
</ol>
<li>Fourth Coffee</li>
<ol>
<li>Avocado Toast</li>
<li>Seaweed Salad</li>
<li>Teriyaki Chicken</li>
</ol>
</ul>
<h3>Restaurants</h3>
<ul>
<li>Bellows College</li>
<ol>
<li>Spaghetti</li>
<li>Chicken Marsala</li>
<li>Pear d'Anjou</li>
</ol>
<li>Fourth Coffee</li>
<ol>
<li>Avocado Toast</li>
<li>Seaweed Salad</li>
<li>Teriyaki Chicken</li>
</ol>
</ul>
Table HTML
Tabel HTML memungkinkan pengembang web untuk mengatur data menjadi baris dan kolom. Tag <table> mendefinisikan tabel HTML. Setiap baris tabel didefinisikan dengan tag <tr>. Setiap header tabel didefinisikan dengan tag <th>. Setiap data tabel / sel didefinisikan dengan tag <td>. Secara default, teks dalam elemen <th> dicetak tebal dan di tengah. Secara default, teks dalam elemen <td> beraturan dan rata kiri.
Table Tags
Tag <table> mendefinisikan tabel HTML.
Table Rows
Tag <tr> mendefinisikan baris tabel HTML.
Table Data
Tag <td> mendefinisikan data pada tabel HTML.
Table Header
Tag <th> mendefinisikan header pada tabel HTML.
G. Form dan Input di HTML
Form HTML
Form HTML digunakan untuk mengumpulkan masukan pengguna. Masukan pengguna dikirim ke server untuk diproses. Elemen form membutuhkan atribut tindakan. Nilai atribut tindakan adalah alamat web dari halaman yang akan menerima informasi yang dimasukkan dan dikirim pengguna. Sebagian besar elemen form juga memiliki dua atribut lain: method dan id.
Form HTML digunakan untuk mengumpulkan masukan pengguna. Masukan pengguna dikirim ke server untuk diproses. Elemen form membutuhkan atribut tindakan. Nilai atribut tindakan adalah alamat web dari halaman yang akan menerima informasi yang dimasukkan dan dikirim pengguna. Sebagian besar elemen form juga memiliki dua atribut lain: method dan id.
Ada dua kemungkinan nilai untuk method (GET dan POST), nilai yang digunakan untuk menentukan bagaimana data input dikirimkan.
- Nilai GET mengirimkan data masukan yang ditambahkan ke URL yang disebut dalam atribut tindakan. Seperti saat memasukkan istilah pencarian. Metode GET berguna ketika data masukan pendek dan / atau pengguna hanya mengambil, tidak mengubah, data dalam database. GET adalah nilai default untuk metode.
- Nilai POST mengirimkan data masukan di badan pesan yang dikirim ke server. Oleh karena itu, post method lebih aman dan digunakan untuk informasi yang akan membuat, memperbarui, atau menghapus data dalam database.
GET vs. POST
Form Element HTML
Elemen HTML <form> digunakan untuk membuat formulir HTML untuk input pengguna.
Dengan bentuk :
<form>
.f
orm elements
.</form>
Input Element HTML
Elemen <input> HTML adalah elemen formulir yang paling sering digunakan. Sebuah elemen <input> dapat ditampilkan dengan berbagai cara, bergantung pada atribut type. Berikut beberapa contohnya:
Elemen HTML <form> digunakan untuk membuat formulir HTML untuk input pengguna.
Dengan bentuk :
<form>
.f
orm elements
.</form>
Input Element HTML
Elemen <input> HTML adalah elemen formulir yang paling sering digunakan. Sebuah elemen <input> dapat ditampilkan dengan berbagai cara, bergantung pada atribut type. Berikut beberapa contohnya:
Membuat Form Pencarian
Contoh :
<form action="http://www.bing.com/search/" method="get">
<label>
Search: <input type="search" name="q" />
</label>
</form>
<form action="http://www.bing.com/search/" method="get">
<label>
Search: <input type="search" name="q" />
</label>
</form>
Menambahkan Tombol Submit
Contoh :
<form action="http://www.bing.com/search/" method="get">
<label>
Search: <input type="search" name="q" />
<input type="submit" name="submit" value="Submit" />
</label>
</form>
Browser URL
H. Block & Inline Level Element HTML
Setiap elemen HTML memiliki nilai tampilan default, bergantung pada jenis elemennya.Ada dua nilai tampilan:
1. Elemen level blok (block-level)
Selalu dimulai pada baris baru dan menempati lebar penuh yang tersedia (membentang ke kiri dan kanan sejauh mungkin).
Berikut ini adalah beberapa contoh elemen blok yang digunakan:
<div>, <p>, <h1> hingga <h6>, <header> dan <footer>, elemen daftar: <ul>, <ol>, <dl>, <li>, <dl>, <dt>, dan <dd>, <nav>, <form>, <fieldset>, <table>, <figure>, <figcaption>, <video>
2. Elemen level sebaris (inline-level)
Tidak dimulai pada baris baru dan hanya membutuhkan lebar sebanyak yang diperlukan.
Berikut ini beberapa contoh elemen inline yang digunakan:
<span>, <a>, <br>, <label>, <input>, <textarei>, <select>, <img>
I. Divs & Spans, Classes & Ids di HTML
Divs & Spans HTML
- Divs
Termasuk kedalam elemen level blok (block-level). Elemen <div> sering digunakan sebagai wadah/kontainer untuk elemen HTML lainnya. Saat digunakan bersama dengan CSS, elemen <div> dapat digunakan untuk mengatur style blocks konten.
- Spans
Termasuk kedalam elemen level sebaris (inline-level). Elemen <span> adalah wadah sebaris yang digunakan untuk menandai bagian dari teks, atau bagian dari dokumen. Saat digunakan bersama dengan CSS, elemen <span> dapat digunakan untuk memberi style ataupun tanda pada bagian teks tertentu.
Contoh :
Divs HTML
<!DOCTYPE html>
Termasuk kedalam elemen level blok (block-level). Elemen <div> sering digunakan sebagai wadah/kontainer untuk elemen HTML lainnya. Saat digunakan bersama dengan CSS, elemen <div> dapat digunakan untuk mengatur style blocks konten.
- Spans
Termasuk kedalam elemen level sebaris (inline-level). Elemen <span> adalah wadah sebaris yang digunakan untuk menandai bagian dari teks, atau bagian dari dokumen. Saat digunakan bersama dengan CSS, elemen <span> dapat digunakan untuk memberi style ataupun tanda pada bagian teks tertentu.
Contoh :
Divs HTML
<!DOCTYPE html>
<html>
<body>
<div style="backgroundcolor: black;color:white;padding:20px;">
<h2>Yogyakarta</h2>
<p>Yogyakarta dalah ibu kota dan pusat pemerintahan Provinsi Daerah Istimewa Yogyakarta, Indonesia. </p>
<p>Kota Yogyakarta merupakan salah satu kota terbesar di Indonesia.</p>
</div>
</body>
</html>
<body>
<div style="backgroundcolor: black;color:white;padding:20px;">
<h2>Yogyakarta</h2>
<p>Yogyakarta dalah ibu kota dan pusat pemerintahan Provinsi Daerah Istimewa Yogyakarta, Indonesia. </p>
<p>Kota Yogyakarta merupakan salah satu kota terbesar di Indonesia.</p>
</div>
</body>
</html>
Contoh :
Span HTML
<!DOCTYPE html>
<html>
<body>
<h1>Contoh elemen span</h1>
<p> Saya membeli pena <span style="color:blue;fontweight:bold">biru</span> dan penggaris <span style="color:darkolivegreen;font-weight:bold">hijau</span>kemarin.</p>
</body>
</html>
Classes dan Ids HTML
- Class attribute HTML
Digunakan untuk menentukan class untuk elemen HTML. Beberapa elemen HTML dapat berbagi kelas yang sama.
Digunakan untuk menentukan class untuk elemen HTML. Beberapa elemen HTML dapat berbagi kelas yang sama.
- ID attribute HTML
Digunakan untuk menentukan id unik dan tidak boleh memiliki lebih dari satu elemen dengan id yang sama dalam dokumen HTML. Digunakan untuk menunjuk ke deklarasi style tertentu dalam lembar style (style sheet). Sintaks untuk id adalah: tulis karakter hash (#), diikuti dengan nama id. Kemudian, tentukan properti CSS di dalam kurung kurawal {}.
Classes HTML
Pada contoh terdapat dua <span> elemen dengan atribut class dengan nilai "note". Kedua elemen <span> akan diberi style yang sama sesuai dengan definisi style pada note di bagian head.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
.note {color: red;}
</style>
</head>
<body>
<h1> Kelas <span class="note">Pemrograman</span>tersedia</h1>
<p>Kelas <span class="note">Pemrograman</span>diselenggarakan setiap hari senin.</p>
</body>
</html>
Pada contoh terdapat dua <span> elemen dengan atribut class dengan nilai "note". Kedua elemen <span> akan diberi style yang sama sesuai dengan definisi style pada note di bagian head.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
.note {color: red;}
</style>
</head>
<body>
<h1> Kelas <span class="note">Pemrograman</span>tersedia</h1>
<p>Kelas <span class="note">Pemrograman</span>diselenggarakan setiap hari senin.</p>
</body>
</html>
Ids HTML
Pada contoh terdapat elemen <h1> yang menunjuk ke nama id "myHeader". Elemen <h1> ini akan diberi gaya sesuai dengan definisi gaya #myHeader di bagian head.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightgreen;
color: black;
padding: 40px;
text-align: center;}
</style>
</head>
<body>
<h2>Contoh Atribut Id</h2>
<p>Dibawah ini contoh style elemen dengan id "myHeader":</p>
<h1 id="myHeader">My Header</h1>
</body>
</html>
background-color: lightgreen;
color: black;
padding: 40px;
text-align: center;}
</style>
</head>
<body>
<h2>Contoh Atribut Id</h2>
<p>Dibawah ini contoh style elemen dengan id "myHeader":</p>
<h1 id="myHeader">My Header</h1>
</body>
</html>
Ketika membuat konten website, terkadang menggunakan karakter khusus seperti simbol copyright (©), ampersand (&), lebih kecil (<), lebih besar (>), titik koma (;) dan sebagainya. Untuk menampilkan simbol-simbol tersebut di HTML, perlu menggunakan entitas karakter (character entities).
Contoh penulisan Entities sebagai berikut :
&entity_name;
OR
&#entity_number;
Penulisan entitas karakter diawali dengan simbol &, kemudian nama atau angka entitas dan diakhiri dengan titik koma (;). Sebagai contoh, untuk menampilkan simbol copyright (©), pada HTML perlu menulis © atau ©.
Contoh HTML Entities :
