Scribd
Unggah
35 tayangan26 halaman

Dasar HTML

Diunggah oleh

ferrysusilo48
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
35 tayangan26 halaman

Dasar HTML

Diunggah oleh

ferrysusilo48
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd

1

BAB 1
HTML

1.1 MEMBUAT HALAMAN DASAR DENGAN HTML


HyperText Markup Language (HTML) adalah bahasa web. Saat kita membuka halaman
web di browser web seperti Internet Explorer, Firefox, atau Safari, browser akan mengunduh
dan menampilkan HTML. Pada intinya, HTML hanyalah sebuah dokumen, sama seperti
dokumen yang dibuat di word. Program seperti Microsoft Word digunakan untuk melihat
dokumen pengolah kata karena microsoft word tahu cara membaca dan menampilkan teks.
Demikian juga dengan web, browser web adalah program yang mengetahui cara membaca
dan menampilkan dokumen yang dibuat dengan HTML.
Dokumen Word Process dapat dibuat dan dibaca dengan satu program. Di sisi lain,
dokumen HTML membutuhkan program yang berbeda untuk pembuatan dan pembacaan;
Kita tidak dapat membuat dokumen HTML menggunakan browser. Untuk membuat dokumen
HTML kita membutuhkan program yang disebut editor. Editor ini bisa sesederhana program
Notepad yang disertakan dengan Microsoft Windows atau serumit Eclipse dan Microsoft
Visual Studio. Umumnya kita dapat menggunakan program yang sama untuk membuat
dokumen HTML yang digunakan untuk membuat program PHP.

1.2 MEMAHAMI BLOK BANGUNAN HTML


Dokumen HTML dapat disimpan di folder Documents dalam komputer. Namun jika
dibuka, hanya kita saja yang bisa melihat isinya. Untuk menyiasati hal ini, kita memerlukan
lebih banyak sumber daya, sebut saja sebagai server web. Menyimpan dokumen di server web
memungkinkan orang lain untuk dapat melihat dokumen kita. Server web adalah komputer
yang menjalankan perangkat lunak khusus yang mengetahui cara mengirim (atau menyajikan)
halaman web ke banyak orang pada saat yang bersamaan. Dokumen HTML diatur dalam
urutan tertentu, dengan bagian-bagian tertentu. Mereka terstruktur sedemikian rupa agar
browser web dapat membaca dan menampilkannya. Karena hal tersebut, ketika kita membuat
dokumen HTML, kita harus mengikuti strukturnya dan menyiapkan dokumen agar browser
dapat membacanya.

1.3 JENIS DOKUMEN


Browser web dapat menampilkan beberapa jenis dokumen, tidak hanya HTML, jadi
saat membuat dokumen web, hal pertama yang harus lakukan adalah memberi tahu browser
tentang jenis dokumen apa yang akan digunakan. Kita karus menetapkan jenis dokumen
dengan baris khusus HTML di bagian atas dokumen. Dalam istilah teknis, tipe dokumen
disebut Document Text Declaration, atau disingkat DTD. Dalam versi HTML sebelumnya,
developer terus-menerus menyalin dan menempelkan jenis dokumen ke dalam dokumen
karena panjang dan rumit. Dengan dirilisnya versi terbaru HTML, yang disebut HTML5, jenis
dokumen menjadi sangat disederhanakan. Jenis dokumen untuk HTML5 adalah:

<!doctype html>

Ini akan menjadi baris pertama dari setiap dokumen HTML yang kita buat, sebelum membuat
dokumen lainnya. Setiap kali, kita perlu menampilkan HTML dan menyertakan jenis
dokumennya yang kadang-kadang disebut doctype.
Bisa jadi kita akan tergoda untuk menggunakan <!doctype html5>, tetapi tidak ada
nomor versi yang terkait dengan jenis dokumen HTML5. Karena ketika versi HTML berikutnya
HTML, CSS, & JAVASCRIPT (Muhammad Sholikhan, [Link]., [Link].)
2

keluar, kita tidak perlu lalgu memperbarui atau mengubah semua jenis dokumen yang telah
kita buat pada HTML sebelumnya ke versi HTML6. Ada berbagai jenis dokumen lain yang lebih
lama, diantaranya adalah:

HTML 4.01 Strict <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”


“[Link]

HTML 4.01 Transitional<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”


“[Link]

XHTML 1.0 Strict <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“[Link]

XHTML 1.1 DTD <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”


“[Link]

Jenis dokumen lain selain diatas juga ada, dan kebanyakan sama-sama rumit dan sulit untuk
diingat. Jika kita melihat jenis dokumen ini di halaman web, kita akan tahu bahwa halaman
tersebut mungkin menggunakan sintaks yang sedikit berbeda untuk membuat dokumen
HTML-nya. Dokumen HTML terdiri dari huruf dan kata yang diapit tanda kurung siku,
terkadang disebut tanda kurang dari atau lebih besar dari:

<>

Ini adalah elemen utama dalam dokumen HTML dan disebut sebagai elemen root:

<html>

Biasanya, elemen HTML memiliki tag pembuka < dan penutup >. Elemen ditutup dengan garis
miring di depan nama elemen. Melihat <html> dalam dokumen berarti nantinya dokumen
tersebut akan memiliki </html> untuk menutup elemen tersebut. Fungsi pembukaan <html>
dan penutup </html> ini untuk membentuk dokumen yang dibungkus di dalam elemen-
elemen tersebut.
Bagian dari Dokumen HTML
Selanjutnya, kita akan melihat tiga bagian utama dari dokumen HTML, kita juga akan
melihat perbedaan antara dokumen HTML dan halaman HTML?. Kedua istilah tersebut dapat
dipertukarkan. Daftar dibawah ini menunjukkan seluruh dokumen HTML.

Contoh 1 Daftar Halaman Web Dasar


<!doctype html>
<html>
<head>
<title>My First Document</title>
</head>
<body>
<div>My Web Page</div>
</body>
</html>

HTML, CSS, & JAVASCRIPT (Muhammad Sholikhan, [Link]., [Link].)


3

Teks HTML ini akan muncul di browser web seperti berikut ini:

My Web Page

Halaman memiiki judul di title bar atau tab bar browser dan teks yang menyatakan isi dari
dokumen HTML tersebut. Bagian selanjutnya dalam bab ini menjelaskan cara
menyempurnakan halaman ini dengan lebih banyak elemen HTML dan teks.
Elemen root
Meskipun bukan bagian dari dokumen HTML, elemen root adalah yang membungkus
seluruh dokumen, muncul sebagai hal pertama setelah doctype dan hal terakhir dalam
dokumen.
Elemen root dibuka dengan:

<html>

Elemen root ditutup dengan:

</html>

Bagian head dan elemen judul


Bagian head dokumen berisi informasi tentang dokumen itu sendiri. Bagian head
dibuka dengan:

<head>

Bagian head ditutup dengan:

</head>

Bagian head tidak boleh disamakan dengan menu pada halaman itu sendiri. Bagian head
adalah elemen di balik layar halaman, ini dapat berisi banyak informasi tentang halaman.
Informasi tersebut mencakup hal-hal seperti judul halaman, bahasa halaman (Inggris,
Indonesia, dan sebagainya), jenis informasi yang disajkan, dan hal-hal lain yang umum pada
halaman tersebut. Elemen deskriptif di bagian head ini terkadang disebut elemen meta.
Disetiap bagian head harus selalu memiki elemen judul. Elemen judul adalah elemen yang
akan muncul di title bar browser web atau sebagai judul tab di browser web, ini ditunjukkan
oleh gambar dibawah ini.

Gambar 1.1 Elemen judul muncul di tab atau title bar browser web.

Bagian body
Bagian body merupakan jantung dari halaman web. Ini adalah tempat untuk
menempatkan semua teks dan gambar sebuah halaman, sebut saja ini adalah isi dari web.
Bagian body dibuka dengan:

<body>

HTML, CSS, & JAVASCRIPT (Muhammad Sholikhan, [Link]., [Link].)


4

Bagian body ditutup dengan:

</body>

Sama seperti bagian head yang berisi elemen lain seperti judul dan informasi meta, bagian
body juga dapat berisi beberapa elemen HTML. Misalnya, di dalam bagian body ini dapat
ditemukan semua tautan dan elemen gambar bersama dengan paragraf, tabel, dan apa pun
yang diperlukan untuk menampilkan halaman.

1.4 MEMBUAT HTML YANG BAIK


Halaman web yang baik disusun dalam urutan yang logis. Ini berarti elemen-elemen
harus ditempatkan diberbagai urutan tertentu agar dapat dibaca dengan benar oleh browser
web. Ketika aturan, ketika membuka setiap elemen maka harus menutup elemen tersbeut
juga menggunakan tag tertentu yang digunakan dnegan tanda kurung siku dan garis miring..
Menggunakan elemen yang sesuai
Halaman web menggunakan beberapa elemen halaman yang juga disebut sebagai tag.
Beberapa elemen tersebut disajikan pada tabel dibawah ini:

Tabel 1.1 berbagai jenis elemen dan penggunaanya


Elemen Deskripsi Jenis penggunaan
<a> Anchor Membuat link ke halaman lain atau bagian dari
dokumen yang sama.
<br> Jeda baris Memasuki jeda baris atau karakter kembali.
<div> Bagian dari Membuat area keseluruhan atau pembagian logis
halaman pada halaman, seperti bagian heading/menu, area
konten, atau footer.
<form> Form web Membuat formulir web untuk menerima input
pengguna.
<h1> hingga <h6> Heading Membuat wadah untuk judul, seperti teks judul.
<hr> Hard rule Membuat garis horizontal.
<img> Image Wadah untuk gambar.
<input> Input Elemen untuk menerima input pengguna.
<link> Link sumber Tautan ke sumber daya untuk halaman tersebut;
jangan bingung dengan elemen Anchor
<p> Paragraf dalam Membuat paragraf tekstual atau area dan wadah
halaman lain untuk teks.
<script> Tag skrip Menunjukkan skrip web atau program. Juga sering
ditemukan di bagian kepala.
<span> Span Membuat wadah untuk elemen. Sering digunakan
bersama dengan informasi gaya.

Markup semantik merupakan istilah dalam penggunaan berbagai jenis elemen pada waktu
yang tepat, ini berkaitan dengan konsep struktur dan layout elemen. Pertimbangkan manfaat
markup semantik ini:
• Meningkatkan hasil pencarian. Manfaat utama markup semantik adalah pengunjung
dan search engine sama-sama dapat menemukan informasi yang mereka butuhkan.
• Menyederhanakan pemeliharaan. Manfaat sekunder dari markup semantik adalah
memudahkan pemeliharaan di kemudian hari.

HTML, CSS, & JAVASCRIPT (Muhammad Sholikhan, [Link]., [Link].)


5

Ketika sebuah halaman secara semantik benar dan HTML yang valid, maka akan terbentuk
dengan baik.

1.5 PERBEDAAN ANTARA ELEMEN DIV DAN SPAN


Elemen <div> dan <span> keduanya adalah jenis wadah, tetapi dengan beberapa
kualitas yang berbeda. Secara default, elemen <div> memiliki lebar tak terbatas (setidaknya
ke tepi browser), yang dapat kita lihat dengan menerapkan batas ke salah satunya, seperti ini:

<div style="border:1px solid green;">Hello</div>

Namun, elemen <span> hanya selebar teks yang dikandungnya. Oleh karena itu, baris HTML
berikut membuat batas hanya di sekitar kata Hello, yang tidak meluas ke tepi kanan browser

<span style="border:1px solid green;">Hello</span>

Juga, elemen <span> mengikuti teks atau objek lain saat mereka membungkusnya, dan karena
itu dapat memiliki batas yang rumit. Misalnya, pada contoh koding html dibawah, saya
menggunakan CSS untuk membuat latar belakang semua elemen <div> menjadi yellow, untuk
membuat semua elemen <span> menjadi cyan, dan untuk menambahkan batas pada
keduanya, sebelum kemudian membuat beberapa contoh <span> dan <div> bagian.

Contoh 2 div dan span


<!DOCTYPE html>
<html>
<head>
<title>Div and span example</title>
<style>
div, span { border :1px solid black; }
div { background-color:yellow; }
span { background-color:cyan; }
</style>
</head>
<body>
<div>This text is within a div tag</div>
This isn't. <div>And this is again.</div><br>
<span>This text is inside a span tag.</span>
This isn't. <span>And this is again.</span><br><br>
<div>This is a larger amount of text in a div that wraps around
to the next line of the browser</div><br>
<span>This is a larger amount of text in a span that wraps around
to the next line of the browser</span>
</body>
</html>

Gambar 1.2 menunjukkan seperti apa contoh ini di browser web. Meskipun hanya
dicetak dalam nuansa abu-abu dalam buku ini, gambar tersebut dengan jelas menunjukkan
HTML, CSS, & JAVASCRIPT (Muhammad Sholikhan, [Link]., [Link].)
6

bagaimana elemen <div> meluas ke tepi kanan browser, dan memaksa konten berikut untuk
muncul di awal posisi pertama yang tersedia di bawahnya.

Gambar 1.2 Berbagai elemen dengan lebar berbeda

Gambar tersebut juga menunjukkan bagaimana elemen <span> menjaga dirinya


sendiri dan hanya menggunakan ruang yang diperlukan untuk menyimpan kontennya, tanpa
memaksa konten berikutnya muncul di bawahnya. Misalnya, di dua contoh gambar di bawah,
kita juga dapat melihat bahwa ketika elemen <div> membungkus tepi layar, elemen tersebut
mempertahankan bentuk persegi panjang, sedangkan elemen <span> hanya mengikuti alur
teks (atau konten lainnya) mereka mengandung.
Catatan: Karena tag <div> hanya bisa berbentuk persegi panjang, tag ini lebih cocok untuk
memuat objek seperti gambar, kotak, kutipan, dan sebagainya, sedangkan tag <span> pal ing
baik digunakan untuk menyimpan teks atau atribut lain yang ditempatkan satu demi satu
inline lain, dan yang harus mengalir dari kiri ke kanan (atau kanan ke kiri dalam beberapa
bahasa)
Menempatkan teks pada halaman
Ada banyak cara untuk menyisipkan teks ke dalam halaman web dan banyak elemen
yang sesuai untuk menyimpan teks. Elemen heading seperti <h1>, <h2>, hingga <h6>, adalah
tempat yang tepat untuk meletakkan heading, sedangkan <p>, <span>, dan <div> adalah
wadah yang sesuai untuk teks bentuk yang lebih panjang, seperti paragraf. Daftar kode HTML
dibawah ini menunjukkan halaman web sederhana dengan dua judul dan beberapa paragraf.

Contoh 3 Daftar Halaman Web dengan Judul dan Paragraf


<!doctype html>
<html>
<head>
<title>My First Document</title>
</head>
<body>
HTML, CSS, & JAVASCRIPT (Muhammad Sholikhan, [Link]., [Link].)
7

<h1>My Web Page</h1>


<p>Selamat datang dihalaman Web Saya. Disini kita dapat mendapatkan semua informasi
tentang saya.</p>
<h2>Buku Saya</h2>
<p>Anda dapat menemukan buku saya disini.</p>
</body>
</html>

Saat dilihat di web browser, halaman ini muncul seperti gambar di bawah ini.

Gambar 1.3 Halaman web sederhana dengan judul dan paragraf.

Seperti yang kita lihat dari gambar diatas, informasi pada halaman menyertakan
elemen <h1> yang diikuti dengan paragraf, elemennya adalah <p>. Paragraf ditutup dengan
elemen </p> dan heading menggunakan elemenen <h2>. Judul keuda ditutup dengan elemen
</h2>.
Buat Halaman Pertama Anda
Untuk membuat HTML kita harus menggunakan text editor bukan pengolah kata
seperti Microsoft Word. Microsoft Word atau program serupa seperti Pages di Mac
menambahkan segala macam informasi pemformatan tambahan yang menghalangi
pembuatan HTML, gunakan program seperti Notepad. Semakin sederhana bentuk HTML maka
akan semakin baik. Mac menyertakan program bernama TextEdit yang dapat digunakan untuk
membuat dokumen teks biasa — tetapi hati-hati: Program TextEdit akan mencoba
menyimpan file dalam Rich Text Format (RTF) secara default. Saat membuat atau menyimpan
file dengan TextEdit, pilih Usual Text dari menu Format File drop-down.
Untuk membuat halaman pertama Anda, ikuti langkah-langkah berikut ini:
1. Buka Text editor
2. Di text editor, masukkan HTML berikut.

<!doctype html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>My web page!</h1>
<p>Hello world, welcome to my web site</p>
</body>
</html>
HTML, CSS, & JAVASCRIPT (Muhammad Sholikhan, [Link]., [Link].)
8

3. Simpan file dengan nama [Link]


Simpan file persis seperti namanya, menggunakan huruf kecil di seluruh nama. Apache,
server web yang digunakan untuk mengirim file ke browser Anda, peka huruf
besar/kecil untuk nama file, jadi tetap menggunakan huruf kecil akan menghemat
banyak masalah. Pastikan ekstensinya adalah .html dan bukan .txt atau ekstensi
lainnya. Simpan file ke root dokumen Anda. Lokasi root dokumen tergantung pada
bagaimana kita menginstal Apache dan pada jenis sistem yang kita gunakan. Jika kita
menggunakan penyedia hosting, maka ini adalah titik di mana kita mengunggah file ke
sistem mereka.
4. Buka browser web untuk load page
Di browser web, arahkan ke [Link] Setelah itu, kita akan
melihat halaman seperti gambar dibawah ini.

Gambar 1.4 halaman pertama kita yang ditampilkan oleh browser

Memilih elemen level blok atau sebaris


Ketika mempertimbangkan jenis elemen mana yang akan ditambahkan ke halaman,
pikirkan terlebih dahulu, apakah kita menginginkan elemen tersebut diperluas ke seluruh
lebar halaman atau tidak.
• Elemen level blok: Elemen <div> dan <p> keduanya dikenal sebagai elemen level blok.
Elemen tingkat blok ditampilkan di seluruh lebar halaman; tidak ada yang bisa muncul
di samping atau di samping elemen level blok. Pada dasarnya, anggap elemen level
blok memiliki carriage return setelahnya.
• Elemen sebaris: Elemen tertentu, terutama elemen <span>, dianggap sebagai elemen
sebaris, yang berarti elemen lain dapat muncul di sebelahnya. Dengan kata lain,
elemen sebaris tidak memiliki carriage return setelahnya
Memasukkan jeda baris dan spasi
Dalam pembuatan halaman, ada kalanya untuk menyisipkan jeda baris. Untuk
melakukan tindakan ini dalam pengolah kata, cukup menekan tombol Enter atau Return pada
keyboard. Hal-hal yang tidak begitu sederhana dalam HTML. Tidak peduli berapa kali tombol
Enter ditekan dalam dokumen HTML, teks akan tetap ditampilkan pada baris yang sama di
browser web. Perhatikan kode pada daftar dibawah ini.

HTML, CSS, & JAVASCRIPT (Muhammad Sholikhan, [Link]., [Link].)


9

Contoh 4 DaftarMencoba Memasukkan Carriage Returns ke dalam HTML


<!doctype html>
<html>
<head>
<title>My First Document</title>
</head>
<body>
<h1>My Web Page</h1>
<p>Selamat datang dihalaman Web Saya. Disini kita dapat mendapatkan semua informasi
tentang saya.</p>

<h2>Buku Saya</h2>
<p>Anda dapat menemukan buku saya disini.</p>
</body>
</html>

Jika dilihat melalui web browser, outputnya sama seperti Gambar 1.5 pada bab sebelumnya.
kita tidak melihat baris kosong antara paragraf pertama dan judul kedua. Hal yang sama terjadi
pada spasi tambahan di HTML. Tidak peduli berapa kali spasi pada keyboard di dokumen web
ditekan, maka outputnya pada html web adalah 1 spasi. Tag <br> digunakan untuk
menyisipkan jeda baris ke halaman web. Lihat kode daftar dibawah ini. Daripada
menggunakan tombol Enter (atau Return di Mac) akan jauh lebih baik untuk menggunakan
tag <br> untuk menambahkan carriage return:

Contoh 5 Menggunakan <br> untuk Line Breaks


<!doctype html>
<html>
<head>
<title>My First Document</title>
</head>
<body>
<h1>My Web Page</h1>
<p>Selamat datang dihalaman Web Saya. Disini kita dapat mendapatkan semua informasi
tentang saya.</p>
<br>
<br>
<br>
<br>
<br>
<h2>Buku Saya</h2>
<p>Anda dapat menemukan buku saya disini.</p>
</body>
</html>

Saat dilihat di browser, efek yang diinginkan akan ditampilkan, seperti yang diilustrasikan pada
gambar di bawah ini.

HTML, CSS, & JAVASCRIPT (Muhammad Sholikhan, [Link]., [Link].)


10

Gambar 1.5 menggunakan tag <br> untuk memasukkan carriage returns.

Terkadang kita akan melihat garis miring tambahan di beberapa tag seperti <br>
sehingga akan ditulis sebagai <br />. Ini adalah peninggalan dari XHTML tetapi tidak diperlukan
untuk HTML5. Kita harus melihat bahwa <br> tidak memiliki mitra penutup, seperti </br>. Kita
dapat menggunakan <br> apa adanya, tanpa khawatir harus menutupnya. Menambahkan
spasi ke HTML dilakukan dengan &nbsp; entitas terkadang ditulis sebagai &#160;. Namun, ada
cara yang lebih baik untuk mencapai spasi dalam HTML, terutama melalui penggunaan
Cascading Style Sheets (CSS). Oleh karena itu, penggunaan &nbsp; entitas tidak akan dibahas
demi metode yang lebih umum dan didukung lebih luas melalui CSS.
Membuat dokumen lebih mudah dirawat
Developer sering menggunakan comment untuk mencatat informasi di balik layar
tentang halaman atau tentang kode mereka, dan comment tidak ditampilkan di halaman web.
Misalnya, komentar di halaman web mungkin seperti “Saya menambahkan ini pada
19/10/2012” atau “Ditambahkan untuk mendukung inisiatif penjualan kami.” Jika kita
mengunjungi halaman web, kita dapat melihat komentar tersebut hanya dengan melihat file
HTML halaman tersebut.
Comment HTML dibuka dengan sintaks ini:

<!--

Comment HTML ditutup dengan sintaks ini:

-->

Segala sesuatu yang muncul dari awal <!-- hingga bagian pertama --> dianggap sebagai bagian
dari komentar. Daftar dibawah ini berisi contoh dokumen HTML dengan komentar.

Contoh 6 Menambahkan Komentar HTML


<!doctype html>
<html>

HTML, CSS, & JAVASCRIPT (Muhammad Sholikhan, [Link]., [Link].)


11

<head>
<title>My First Document</title>
</head>
<body>
<h1>My Web Page</h1>
<p>Selamat datang dihalaman Web Saya. Disini kita dapat mendapatkan semua informasi
tentang saya.</p>
<!—Menambahkan informasi tentang bukuk saya 10/1/2022 -->
<h2>Buku Saya</h2>
<p>Anda dapat menemukan buku saya disini.</p>
</body>
</html>

Contoh 6a Multi-line comment


<!doctype html>
<html>
<head>
<title>My First Document</title>
</head>
<body>
<h1>My Web Page</h1>
<p>Selamat datang dihalaman Web Saya. Disini kita dapat mendapatkan semua informasi
tentang saya.</p>
<!—
Menambahkan informasi tentang bukuk saya
10/1/2012
-->
<h2>Buku Saya</h2>
<p>Anda dapat menemukan buku saya disini.</p>
</body>
</html>

Dalam komentar ini, kita dapat melihat bahwa teks sebenarnya dari komentar tersebut
diindentasi, yang memunculkan poin penting lainnya: Menggunakan lekukan saat membuat
dokumen akan sangat membantu. Dokumen lebih mudah dibaca dan dipelihara nanti ketika
elemen diindentasi, sehingga kita dapat melihat dengan jelas secara visual elemen mana yang
"di dalam" elemen lainnya.
Menambahkan daftar dan tabel
Daftar dan tabel membantu untuk mewakili jenis informasi tertentu. Misalnya, daftar
pohon di halaman kampus paling baik diwakili dengan daftar seperti ini:
Pinus
Beringin
Palm
Tetapi jika ingin memasukkan lebih banyak informasi tentang pohon, tabel adalah format yang
lebih baik:
Jenis Pohon Deskripsi
Pinus Pohon umum di lapangan
Beringin Ada beberapa pohon beringin halaman kampus
Palm Ada 5 pohon palm di halaman kampus dekat gazebo

HTML, CSS, & JAVASCRIPT (Muhammad Sholikhan, [Link]., [Link].)


12

HTML memiliki tag untuk membuat daftar dan tabel. Tabel 1.2 menjelaskan berbagai elemen
tersebut.

Tabel 1.2 Daftar Umum dan Elemen Tabel dalam HTML


Eleemn Jenis Deskripsi
<li> List Item Digunakan bersama dengan <ul> atau <ol> untuk
membuat daftar informasi.
<ol> Order List Daftar informasi yang diurutkan, digunakan bersama
dengan <li>.
<table> Tabel Digunakan dengan <tr>, <td>, dan elemen lain untuk
membuat tabel untuk menyajikan informasi.
<td> Sel Tabel Membuat sel di baris tabel
<th> Header Tabel Sel tabel yang merupakan heading.
<tr> Row Tabel Membuat deretan tabel.
<ul> Unorder List Terkait dengan <ol> dan <li> untuk membuat daftar
informasi

Saat membuat daftar, kita memiliki dua pilihan jenis daftar yang akan dibuat: daftar
yang diurutkan atau daftar yang tidak diurutkan. Daftar berurut digunakan untuk hal -hal
seperti membuat garis besar, sementara daftar yang tidak berurutan membuat hampir semua
jenis daftar lainnya. Daftar berikut menunjukkan HTML yang digunakan untuk membuat daftar
unordered standar.

Contoh 7 Membuat Daftar Unordered


<!doctype html>
<html>
<head>
<title>An unordered list</title>
</head>
<body>
<ul>
<li>Pine</li>
<li>Oak</li>
<li>Elm</li>
</ul>
</body>
</html>

Jika dilihat di browser, HTML ini menghasilkan halaman seperti pada gambar dibawah ini.

HTML, CSS, & JAVASCRIPT (Muhammad Sholikhan, [Link]., [Link].)


13

Gambar 1.6 Daftar tidak berurutan

Daftar tidak berurutan menggunakan gaya default untuk daftar, yang menambahkan
poin di samping setiap item. Gaya peluru ini dapat diubah, atau bisa juga tidak di ikut sertakan
dalam CSS. Membuat daftar terurut berarti cukup mengubah elemen <ul> menjadi <ol>.
Prosesnya akan terlihat seperti ini:

<ol>
<li>Pine</li>
<li>Oak</li>
<li>Elm</li>
</ol>

Saat dilihat di browser, poin dari contoh sebelumnya diganti dengan angka, seperti pada
gambar dibawah ini.

Gambar 1.7 Daftar yang dipesan


HTML, CSS, & JAVASCRIPT (Muhammad Sholikhan, [Link]., [Link].)
14

1.6 BERLATIH MEMBUAT TABEL


Untuk membuat tabel ikuti langkah berikut ini:
1. Buka text editor
2. Buat new text document pada text editor.
Sebagian besar text editor akan terbuka dengan dokumen kosong. Jika terdapat
sesuatu dalam dokumen, maka hapus terlebih dahulu sebelum melanjutkan.
3. Masukkan HTML berikut:

<!doctype html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>My Table</h1>
<table>
<tr>
<th>Airport Code</th>
<th>Common Name/City</th>
</tr>
<tr>
<td>CWA</td>
<td>Central Semarang Airport</td>
</tr>
<tr>
<td>ORD</td>
<td>Chicago O’Hare</td>
</tr>
<tr>
<td>LHR</td>
<td>London Heathrow</td>
</tr>
</table>
</body>
</html>

4. Simpan file sebagai [Link].


Simpan file dengan ekstensi .html. File harus disimpan di root dokumen.
5. Lihat file di browser Anda.
Buka browser web kita dan ketik [Link] ke dalam bilah alamat.
Prosesnya akan terlihat seperti gambar dibawah ini.

HTML, CSS, & JAVASCRIPT (Muhammad Sholikhan, [Link]., [Link].)


15

Gambar 1.8 Tabel latihan.

Perhatikan bahwa tabel tidak memiliki batas di sekitarnya. Jika ingin menambahkan
batas, terus lakukan latihan ini. Jika tidak, lanjutkan ke bagian berikutnya.
6. Buka [Link] di text editor.
Jika kita menutup text editor, buka lagi dan muat [Link].
7. Ubah kode di [Link] menjadi berikut:

<!doctype html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>My Table</h1>
<table border=”1”>
<tr>
<th>Airport Code</th>
<th>Common Name/City</th>
</tr>
<tr>
<td>CGK</td>
<td>Bandara International Soekarno-Hatta/Tangerang</td>
</tr>
<tr>
<td>SRG</td>
<td>Bandara Internasional Jendral Ahmad Yani/Semarang</td>
</tr>
<tr>
HTML, CSS, & JAVASCRIPT (Muhammad Sholikhan, [Link]., [Link].)
16

<td>JOG</td>
<td>Bandara Internasional Adi Sucipto/Yogyakarta</td>
</tr>
</table>
</body>
</html>

Perhatikan bahwa satu-satunya perubahan adalah menambahkan spasi dan kemudian


border="1" di dalam elemen <table>.
8. Refresh [Link] di browser Anda.
Jika kita menutup browser, buka kembali dan buka [Link] Jika
browser kita masih terbuka, tekan Ctrl+R untuk merefresh halaman (Command+R di
Mac). Selanjutnya, hasil dari tabel adalah sebagai berikut.

Gambar 1.9 Tabel dengan batas di sekitar setiap sel

Saat menambahkan border="1" ke elemen <table>, ini disebut atribut. Atribut


membantu untuk mendeskripsikan atau mendefinisikan elemen lebih lanjut atau memberikan
detail tambahan tentang bagaimana elemen tersebut harus berperilaku.

1.7 MENYERTAKAN TAUTAN DAN GAMBAR DI HALAMAN WEB ANDA


Apa jadinya web tanpa tautan — dan juga gambar? Tidak banyak web sama sekali.
Tautan adalah item yang kita klik di dalam halaman web untuk terhubung atau memuat
halaman lain, dan ketika kita berbicara tentang gambar, yang kita maksud adalah ilustrasi dan
foto. Bagian ini membahas cara menambahkan tautan dan juga gambar ke halaman web Anda
Menambahkan tautan
Tautan ditambahkan dengan <a>, atau elemen anchor. Atribut href memberi tahu
elemen anchor tujuan tautan. Tautan itu sendiri dapat ditambahkan ke apa saja di halaman.

HTML, CSS, & JAVASCRIPT (Muhammad Sholikhan, [Link]., [Link].)


17

Misalnya, kita dapat menautkan setiap pohon yang disebutkan di bagian sebelumnya ke
artikel tentang masing-masing jenis pohon tersebut. Ketika sesuatu ditautkan, browser akan
memberikan umpan balik visual bahwa ada tautan dengan menyorot dan menggarisbawahi
area yang ditautkan. Seperti elemen HTML lainnya, elemen <a> memiliki tag penutup </a>
yang sesuai yang digunakan untuk memberi tahu browser kapan harus berhenti menyorot dan
menggarisbawahi tautan.
Menautkan ke halaman lain
Menautkan ke halaman lain, baik di situs yang sama atau di situs yang berbeda,
dilakukan dengan cara yang sama. Sebagai contoh, lihat HTML berikut:

<p>Here’s a link to <a href=”[Link] universitas stekom</a></p>

Baris ini menggunakan elemen paragraf <p> untuk membuat kalimat, “Ini tautan ke web
universitas stekom.” Ini adalah web, kita memutuskan untuk benar-benar memberikan tautan
sehingga pengunjung dapat mengklik kata-kata tertentu dan dibawa ke halaman itu. kita
melakukannya dengan elemen <a> bersama dengan atribut href. Dalam hal ini, elemen <a>
terlihat seperti ini:

<a href=” [Link]

Atribut href menunjuk ke URL [Link] dan diapit oleh tanda kutip. Teks yang
akan disorot kemudian muncul, diikuti dengan tag penutup </a>. Berikut adalah latihan untuk
menerapkan tautan ini.
1. Buka text editor.
2. Tempatkan HTML berikut pada text editor Anda:

<!doctype html>
<html>
<head>
<title>Link</title>
</head>
<body>
<p>Here’s a link to <a href=”[Link]
org”>Steve Suehring’s site</a></p>
</body>
</html>

3. Simpan file sebagai [Link].


File harus disimpan ke root dokumen kita dengan nama [Link].
4. Buka browser kita dan lihat halamannya.
Buka browser web kita dan arahkan ke [Link] dengan memasukkan
URL tersebut ke bilah alamat. kita akan melihat halaman seperti itu pada gambar
dibawah ini.

HTML, CSS, & JAVASCRIPT (Muhammad Sholikhan, [Link]., [Link].)


18

Gambar 1.10 Halaman dengan tautan

Selalu tutup elemen <a> dengan tag penutup </a> yang sesuai. Kesalahan yang sering
terjadi adalah membiarkan elemen <a> terbuka, sehingga semua teks berikutnya disorot
sebagai tautan. Contoh dan latihan menunjukkan cara menautkan ke halaman di situs web
yang berbeda. Membuat tautan ke halaman di situs yang sama dilakukan dengan cara yang
sama, tetapi alih-alih menyertakan skema Uniform Resource Identifier (URI) dan nama host
(bagian [Link] dari contoh ini), kita hanya dapat menautkan ke halaman
itu sendiri. Jika kita telah mengikuti latihan sebelumnya, maka kita harus memiliki halaman
bernama [Link]. Berikut HTML untuk membuat tautan ke [Link]. HTML latihan
sebelumnya disertakan sehingga kita dapat melihat keseluruhan konteks untuk tautan:

<!doctype html>
<html>
<head>
<title>Link</title>
</head>
<body>
<p>link ke <a href=”[Link]”>contoh tabel</a></p>
</body>
</html>

Seperti sebelumnya, tautan terdapat di dalam elemen <p> tetapi perhatikan bahwa atribut
href sekarang hanya menunjuk ke [Link].
Memahami tautan absolut versus relatif
Tautan yang ditunjukkan pada contoh sebelumnya disebut tautan relatif karena tidak
dimulai dengan skema Uniform Resource Identifier (URI) ([Link] atau garis miring awal (/).
Tautan relatif mengasumsikan bahwa target ([Link] dalam contoh) berada di di rektori
atau folder yang sama dengan dokumen atau halaman yang ditautkan. Dalam kasus contoh,
tautan relatif berfungsi karena halaman saat ini, [Link], dan halaman yang ditautkan,
[Link], keduanya ada di root dokumen.
Jika kedua halaman tidak berada di direktori yang sama (dengan kata lain, jika
[Link] berada di folder bernama tabel di root dokumen dan file [Link] ada di folder
HTML, CSS, & JAVASCRIPT (Muhammad Sholikhan, [Link]., [Link].)
19

bernama link di root dokumen), maka kita perlu untuk membuat tautan absolut. Tautan
absolut memberi tahu server di mana tepatnya mencari untuk menemukan target. Misalnya,
tautan absolut mungkin terlihat seperti /tables/[Link]. Tautan ini memberi tahu server
bahwa ia perlu mulai mencari di root dokumennya untuk direktori yang disebut tabel dan
kemudian harus menemukan file bernama [Link] di direktori tabel.
Gunakan tautan absolut ketika kita perlu memberikan referensi yang tepat atau
absolut ke target yang ditautkan. Gunakan tautan relatif ketika sumber daya yang ditautkan
akan selalu ditemukan di tempat yang sama dengan halaman yang menautkannya. Jika lokasi
halaman atau target berubah, maka tautan relatif akan berhenti berfungsi.
Menautkan dalam satu halaman
Terkadang kita ingin menautkan dalam halaman yang sama. kita dapat melakukan ini
pada halaman yang sangat panjang, di mana kita memiliki daftar isi di bagian atas dan
kemudian artikel lengkap di bagian bawah halaman. Membuat tautan dalam halaman
menggunakan elemen <a> yang sama dengan yang kita lihat, kali ini dengan atribut nama.
Daftar dibawah menunjukkan HTML untuk membuat anchor dalam halaman.

Contoh 8 Anchor Dalam Halaman


<!doctype html>
<html>
<head>
<title>Link</title>
</head>
<body>
<ul>
<li><a href=”#pine”>Pine</a></li>
<li><a href=”#oak”>Oak</a></li>
<li><a href=”#elm”>Elm</a></li>
</ul>
<p><a name=”pine”> Ada pohon pinus di halaman.</a><p>
<p><a name=”oak”> Ada beberapa pohon beringin halaman kampus.</a><p>
<p><a name=”elm”> Ada 5 pohon palm di halaman kampus dekat gazebo.</a><p>
</body>
</html>

Pada daftar kode diatas, tag href yang ditambahkan ke setiap item daftar
menggunakan tanda pound atau hash (#). Ini adalah kunci yang digunakan untuk memberi
tahu browser bahwa sumber daya akan ditemukan di halaman yang sama. Kemudian di HTML
kita melihat elemen <a>lainnya, kali ini menggunakan atribut name. Atribut name itu sesuai
dengan masing-masing atribut href dari halaman sebelumnya. Jadi, tidak ada lagi yang perlu
ditambahkan untuk menambahkan tautan dalam halaman. Hanya perlu menggunakan tanda
pound untuk menunjukkan bahwa sumber daya ditemukan kemudian di halaman dan
kemudian menggunakan atribut name untuk membuat elemen lain cocok dengan itu.
Membuka tautan di jendela baru
Terkadang kita ingin membuat tautan terbuka di tab baru atau jendela baru. Saat
pengunjung mengeklik tautan yang ditentukan sedemikian rupa, browser akan membuka tab
baru dan memuat sumber daya tertaut di tab baru itu. Situs yang ada akan tetap terbuka di
browser pengunjung juga. Jangan membuat setiap tautan terbuka di jendela baru. kita harus
melakukannya hanya jika masuk akal, seperti yang mungkin terjadi ketika pengunjung berada
di tengah-tengah proses yang panjang di situs web kita dan perlu menautkan ke referensi

HTML, CSS, & JAVASCRIPT (Muhammad Sholikhan, [Link]., [Link].)


20

sumber daya atau situs lain, seperti direktori kode ZIP atau persyaratan perjanjian layanan.
Juga, apakah tautan terbuka di tab baru atau jendela baru tergantung pada browser; kita tidak
dapat mengontrolnya.
Ini dapat dilakukan dengan menambahkan atribut target ke elemen <a> kita dengan
nilai khusus, _blank. Misalnya, contoh sebelumnya menunjukkan cara membuat tautan ke
situs web universitas stekom, [Link]. Ingatlah bahwa tautannya terlihat seperti
ini:

<a href=”[Link] universitas stekom</a>

Untuk membuat tautan ini terbuka di jendela baru, kita menambahkan target="_blank"
atribut/nilai pasangan ke elemen, sehingga terlihat seperti ini:

<a href=”[Link] target=”_blank”>web Universitas stekom</a>

Anda dapat mencobanya dengan membuka file [Link] dari latihan sebelumnya dan
menambahkan target="_blank" seperti yang ditunjukkan. Perhatikan penggunaan garis
bawah sebelum kata kosong. Saat kita menyimpan file dan memuat ulang halaman itu (Ctrl+R
atau Command+R), tautannya tidak akan terlihat berbeda. Namun, mengklik tautan akan
membuka tab baru (atau jendela baru, tergantung pada browser dan konfigurasi Anda).
Menambahkan gambar
Gambar, seperti foto atau grafik, meningkatkan daya tarik visual halaman web.
Gambar biasanya disematkan di halaman, seperti yang ditunjukkan pada contoh gambar
dibawah ini, di mana foto sampul buku Sarwo Nugroho, ditampilkan.

Gambar 1.11 pada halaman web.

HTML, CSS, & JAVASCRIPT (Muhammad Sholikhan, [Link]., [Link].)


21

Dalam penyematan gambar, ada hal yang perlu di perhatikan ketika menyertakan
gambar. Kita dapat menyematkan gambar appaun dalam website milik kita, dengan sayarat
itu adalah hak milik sendiri, atau jka gambar tersebut memiliki hak cipta maka kita harus
mendapatkan izin dari pencipta gambar tersebut sebelum menguploadnya ke website kita.
Dalam pembuatan website, gambar biasanya dijadikan sebegai pelengkap, atau bahkan objek
utama, ada juga yang digunakan sebagai latar belakang, ini tergantung pada kebutuhan kita
dalam membuat website.
Referensi lokasi gambar
Gambar ditambahkan dengan elemen <img>. Sama seperti elemen <a>, elemen <img>
menggunakan atribut untuk memberi tahu browser lebih banyak informasi tentang dirinya
sendiri. Atribut src digunakan untuk memberi tahu browser di mana menemukan gambar.
Sebelumnya, pada gambar dibawah atas. HTML membawa gambar tersebut ke halaman
website dengan bentuk coding seperti ini:

<img src=”images/books_sarwonugroho.gif”>

Seperti yang kita lihat, elemen <img> menambahkan atribut src, yang kemudian merujuk ke
lokasi gambar di server web. Elemen <img> tidak memiliki tag penutup </img> karena elemen
ini tidak memiliki kontennya sendiri, berbeda dengan elemen <p>dan <a> — yang keduanya
membutuhkan konten untuk masuk ke dalamnya dan oleh karena itu harus ditutup.
Terkadang kita mungkin melihat elemen seperti <img> ditutup dengan /> alih-alih hanya >,
seperti pada contoh. Keduanya adalah cara yang dapat diterima dan valid untuk menutup
elemen jenis ini.
Elemen <img> harus selalu memiliki atribut alt. Atribut alt memberi tahu seach engine
dan teknologi bantu tentang gambar yang digunakan. Saat digunakan dengan elemen <img>,
atribut alt terlihat seperti ini:

<img src=” books_sarwonugroho” alt=”potret diri”>

Anda harus menggunakan deskripsi singkat sebagai isi dari atribut alt. Menggunakan
sesuatu seperti "MySQL Bible adalah buku yang bagus dan semua orang harus membelinya"
tidak menggambarkan gambarnya, tetapi "MySQL Bible" menggambarkannya.
Memilih gambar web yang bagus
Ketika memilih gambar untuk website, Kita perlu memastikan bahwa foto tidak blur
saat foto tersebut diambil. Kita juga harus mempertimbangkan ukuran dari foto dan format
foto. Web browser dapat melihat gambar berbagai format termasuk JPG, GIF, PNG dan
beberapa lainnya. Ukuran file merupakan salah satu aspek terpenting untuk dipertimbangkan
ketika memilih gambar. Saat menyertakan gambar dengan ukuran besar, seperti yang diambil
pada pengaturan raw yang berukuran besat dengan kamera digital Anda, pengunjung harus
mengunduh file tersebut terlebih dahulu sebelum dapat melihat gambar tersebut, dan
tentunya ini lumayan memakan waktu, tergantung pada kecepatan koneksi pengunjung.
Untuk menyiasati hal ini, ketika menggunggah gambar kita harus mengubah ukuran
gambar gambar terlebih dahulu agar gambar hanya berukuran kurang dari 100 KB. Aspek
penting lainnya yang perlu dipertimbangkan adalah jumlah semua gambar pada halaman.
Misalnya, dalam website kita membutuhkan sekitar 10 atau 15 gambar, jika ukurannya
masing-masing adalah 100kb maka total semuanya adalah 1.5mb dan ini masih lumayan berat,
saran saya akan lebih baik jika gambar yang akan digunakan dalam website memiki ukuran
lebih kecil dari 100kb agar pemuatan gambar pada web yang diakses pengunjung lebih cepat.

HTML, CSS, & JAVASCRIPT (Muhammad Sholikhan, [Link]., [Link].)


22

Ketika memilih gambar, Kita juga perlu menyamakan semua format gambar agar lebih
mudah diakses oleh pengunjung. Setidaknya, pastikan agar para pengunjung web kita tak
perlu berpindah menggunakan aplikasi lainnya hanya untuk melihat gambar tersebut.
Kenyamanan penjgunjung website kita sangat perlu untuk difikirkan. Ingatlah jumlah semua
gambar saat menentukan ukuran gambar untuk halaman halaman web kita agar halaman
yang bergambar tersebut lebih cepat diunduh oleh pengunjung.
Membuat halaman dengan gambar
Saatnya membuat halaman dengan gambar sehingga kita dapat melihat bagaimana
dan di mana gambar cocok dengan keseluruhan halaman HTML yang lebih besar. Ikuti langkah
ini.
1. Buka Text editor
Lihat pembahasan sebelumnya tentang text editor.
2. Masukkan HTML berikut:

<!doctype html>
<html>
<head>
<title>Gambar matahari terbit diakhir bulan agustus</title>
</head>
<body>
<h1>SALJU MONOKROM</h1>
<p><img src=”[Link]” alt=”Akhir DESEMBER 2022”></p>
</body>
</html>

Saat kita membuat HTML ini, kita perlu menggunakan foto atau gambar lain milik kita
sendiri atau kita dapat menggunakan file [Link]. Terlepas dari gambar yang kita
pilih, kita perlu menempatkan file di root dokumen server web. Pastikan bahwa huruf
besar dan kecil untuk nama file cocok dengan apa yang kita masukkan ke dalam atribut
src. Dengan kata lain, jika gambar kita bernama Akhir DESEMBER, harus beratribut src
harus “Akhir DESEMBER”.
3. Simpan file sebagai [Link].
Simpan file persis seperti namanya, menggunakan huruf kecil di seluruh nama. File
harus disimpan ke root dokumen Anda. Lokasi root dokumen tergantung pada
bagaimana kita menginstal Apache dan pada jenis sistem yang kita gunakan. Jika kita
menggunakan hostinger, maka kita hanya perlu mengunggah file ke sistem hosting
tersebut.
4. Buka browser web kita untuk memuat halaman.
Di browser web, arahkan ke [Link]

HTML, CSS, & JAVASCRIPT (Muhammad Sholikhan, [Link]., [Link].)


23

Gambar 1.12 Menambahkan gambar ke halaman.

HTML ini menggunakan elemen <img> untuk memuat foto bernama [Link] dari
direktori saat ini. Dengan kata lain, [Link] berada di direktori yang sama dengan halaman
[Link] di server web. Hindari spasi dalam nama file gambar. Ingat juga bahwa URL, file,
dan gambar peka huruf besar/kecil.

1.8 MENULIS HTML VALID


Saat kita membuat halaman web dengan HTML, ada aturan tertentu yang harus diikuti
untuk memastikan bahwa browser web dapat membaca dan menampilkan halaman dengan
benar. Versi saat ini dari spesifikasi HTML adalah HTML versi 5, yang hanya dikenal sebagai
HTML5. Proses memvalidasi halaman berarti bahwa situs web khusus memeriksa kode HTML
yang kita tulis dan bandingkan dengan spesifikasi untuk versi HTML tersebut. Situs web yang
digunakan untuk memvalidasi HTML disebut W3C Markup Validation Service (sering disebut
Validator W3C) dan dioperasikan oleh World Wide Web Consortium (W3C). Validator W3C
dapat ditemukan di [Link] dan gratis untuk digunakan.

HTML, CSS, & JAVASCRIPT (Muhammad Sholikhan, [Link]., [Link].)


24

Gambar 1.13 W3C

Layanan Validasi Markup, terkadang hanya disebut Validator.


Validasi HTML kita dengan salah satu dari tiga cara:
• Menyediakan URL: kita dapat memasukkan URL ke Validator dan secara otomatis akan
mengambil HTML di URL tersebut dan mencoba memvalidasinya. Agar Validator dapat
mengambil HTML kita menggunakan metode ini, halaman harus tersedia untuk umum.
Ini biasanya tidak terjadi ketika kita menginstal server web di komputer Anda. Jika kita
menggunakan hostinger eksternal, maka situs dan halaman kita mungkin tersedia di
Internet. Dalam hal ini, kita dapat memasukkan URL di kotak alamat “Validate by URI”.
• Mengunggah file: kita dapat mengunggah file menggunakan opsi “Validate by File
Upload”. Dengan menggunakan metode ini, kita memilih file di komputer Anda. File
itu kemudian diunggah ke Validator.
• Menempelkan HTML ke dalam Validator: Ini berarti menyalin HTML dari text editor
dan menempelkannya ke tab “Validate by Direct Input” di Validator. Opsi ini biasanya
merupakan metode tercepat dan termudah dan itulah yang kami tunjukkan di bagian
ini.
Validasi HTML
Jika kita telah mengikuti latihan di bab ini, maka kita telah membuat beberapa HTML.
Latihan selanjutnya menggunakan W3C Validator untuk memastikan bahwa HTML yang kita
tulis valid sesuai dengan spesifikasi HTML5. Ikuti langkah ini:
1. Buka [Link] menggunakan text editor
Halaman ini adalah halaman pertama yang kita buat di bab ini. Namun, jika kita
melewatkan latihan itu, buka salah satu file HTML yang kita buat di bab ini.
2. Sorot/pilih semua HTML di file yang terbuka.
Gunakan mouse atau perangkat penunjuk untuk menyorot semua HTML atau tekan
Ctrl+A di Windows atau Command+A di Mac.
HTML, CSS, & JAVASCRIPT (Muhammad Sholikhan, [Link]., [Link].)
25

3. Salin HTML ke clipboard Anda.


Pilih Salin (ditemukan di menu Edit di sebagian besar text editor) atau tekan Ctrl+C di
Windows atau Command+C di Mac untuk menyalin HTML yang disorot ke clipboard.
4. Buka browser web kita dan navigasikan ke W3C Validator.
Dengan browser terbuka, ketik [Link] di bilah alamat atau lokasi di
browser dan tekan Enter untuk membuka Validator.
5. Pilih Validate Direct Input
Tab Validasi dengan Input Langsung akan digunakan untuk menempelkan kode di
papan klip Anda.
6. Tempelkan HTML ke dalam Validator.
Tekan Ctrl+V di Windows atau Command+V di Mac untuk menempelkan HTML dari
clipboard ke kotak Enter the Markup to Validate di halaman Validator. Jika kita
menggunakan HTML dari [Link], layar kita akan terlihat seperti pada Gambar
dibawah ini.

Gambar 1.14 Menempelkan HTML ke dalam Validator

7. Klik Check
Klik tombol Check pada halaman Validator untuk menjalankan validasi HTML Anda

HTML, CSS, & JAVASCRIPT (Muhammad Sholikhan, [Link]., [Link].)


26

Gambar 1.15 Dokumen HTML yang valid melewati Validator.

Perhatikan tiga peringatan dalam validasi ini. Menggulir ke bawah mengungkapkan


bahwa salah satu peringatannya adalah bahwa validator HTML5 sebenarnya eksperimental
saat ini, meskipun itu dapat berubah pada saat kita membaca ini. Dua peringatan lainnya
terkait dengan pengaturan bahasa. Sebaiknya sertakan pengkodean karakter, yang membantu
browser menentukan cara membaca dokumen, termasuk bahasa apa yang digunakan untuk
HTML dan halaman. Lihat [Link]
enc/#Slide0250 untuk informasi lebih lanjut tentang pengkodean karakter.

HTML, CSS, & JAVASCRIPT (Muhammad Sholikhan, [Link]., [Link].)

Anda mungkin juga menyukai