Subscribe to DeepL Pro to translate larger documents.

Visit www.DeepL.com/pro for more information.

 Panduan Pemula untuk HTML
oleh Michael Gabriel
1. Memulai: Apa yang Perlu Anda Lakukan untuk Memulai dan Membuat
Halaman HTML Pertama Anda
1.1 Apa itu HTML?
1.2 Mengapa belajar HTML?
1.3 Apa yang perlu Anda ketahui tentang HTML untuk memulai
2. Tag, Atribut, dan Elemen
2.1 Apa perbedaannya?
2.2 Elemen HTML
2.3 Tips
2.4 Atribut
3. Judul. Judul. Paragraf.
3.1 Tag judul
3.2 Judul
3.3 Paragraf
4. Daftar Tidak Bernomor, Bernomor, Definisi, dan Bersarang
4.1 Daftar yang dipesan
4.2 Daftar yang tidak diurutkan
4.3 Daftar deskripsi
4.4 Daftar bersarang
5.Cara Membuat Tautan ke Halaman Lain dan Tempat Lain
5.1 Tautan biasa atau teks
5.2 Tautan gambar
5.3 Tautan ke alamat email
5.4 Tautan jangkar
5.5 Pertimbangan lain saat membuat tautan
6. Cara Bekerja dengan Gambar
6.1 Atribut alt
6.2 Atribut lebar dan tinggi
6.3 Sejajarkan gambar Anda
6.4 Menambahkan tautan ke gambar Anda
7. Cara Menggunakan Data Tabular
7.1 Kapan menggunakan tabel dan kapan tidak
7.2 Membuat tabel
7.3 Lebih lanjut mengenai atribut perbatasan
7.4 Memberi keterangan pada tabel
7.5 Bekerja dengan sel yang terdiri dari dua baris atau dua kolom
7.6 Membuat data lebih mudah dibaca
7.7 Tabel HTML sangat fleksibel
8. Kotak Teks dan Masukan Pengguna Lainnya "Thingamajigs"
8.1 Bidang formulir
8.2 Bidang teks
8.3 Kata sandi
8.4 Kotak centang
8.5 Tombol radio
8.6 Kirim
8.7 Tombol reset
8.8 Menu tarik-turun
8.9 Area teks
9. HTML untuk Pemula: CSS
9.1 Manfaat menggunakan CSS
9.2 Sejarah singkat tentang CSS
9.3 Cara menggunakan CSS dengan dokumen HTML Anda
9.4 Apa yang harus Anda ketahui tentang lembar gaya bertingkat?
10. Menyatukan Semuanya
10.1 Mulailah dengan membuat halaman web sederhana
10.2 Mengapa HTML harus mudah
10.3 Menyederhanakan HTML dan CSS
10.4 Hal-hal lain yang perlu Anda ketahui saat belajar HTML
10.5 Sumber-sumber pembelajaran
1. Memulai: Apa yang Perlu Anda Lakukan untuk Memulai dan Membuat
Halaman HTML Pertama Anda

Jika Anda selalu ingin membuat halaman Web Anda sendiri, tetapi Anda merasa
bahwa itu akan sangat sulit, maka seharusnya tidak ada masalah. Untuk membuat
halaman Web Anda sendiri, yang Anda perlukan hanyalah pemahaman menyeluruh
tentang HTML. Dan HTML tidak terlalu sulit untuk dipelajari.

1.1 Apa itu HTML?

HTML sebenarnya merupakan singkatan dari Hypertext Markup Language. HTML

adalah bahasa halaman Web yang memberi tahu browser cara menampilkan elemen
tertentu, seperti teks dan gambar melalui penggunaan kode dan simbol.

HTML adalah standar untuk membuat halaman Web. Konsorsium World Wide Web,
atau W3C merekomendasikannya. Karena itu, sebagian besar browser
mengimplementasikan HTML untuk membantu menampilkan halaman Web yang
kurang lebih seragam.
HTML adalah gagasan dari Tim BernersLee. Pada tahun 1990, BernersLee
membutuhkan sesuatu yang dapat membantu para ilmuwan yang berasal dari
berbagai perguruan tinggi dan universitas untuk mengakses dokumen dan penelitian
dari para ilmuwan lain. Masalah tersebut membuat BernersLee menciptakan World
Wide Web, protokol transfer hypertext atau HTTP, dan HTML.

1.2 Mengapa belajar HTML?

Saat ini, berkembangnya sistem manajemen konten seperti WordPress dan juga
editor HTML dapat membantu Anda membuat halaman Web tanpa harus mengetahui
HTML.

Tetapi bahkan dengan alat bantu ini, mengetahui cara kerja HTML ditambah dengan
mengetahui tag dasar saja sudah sangat membantu.

Sebagai contoh, akan lebih mudah bagi Anda jika Anda tahu cara bekerja dengan
HTML untuk memperbaiki kekurangan desain. Misalnya, jika instalasi WordPress
Anda menggunakan aturan CSS yang menampilkan gambar yang salah, Anda dapat
melihat sumbernya dan memperbaiki tampilan gambar Anda
ditampilkan jika Anda mengetahui HTML.

Selain itu, HTML sangat sederhana dan mudah dipelajari. Benar-benar tidak masuk
akal mengapa Anda tidak perlu meluangkan waktu untuk mempelajarinya!

1.3 Apa yang perlu Anda ketahui tentang HTML untuk memulai

Ini adalah kabar baik lainnya: ketika Anda belajar HTML, Anda tidak membutuhkan
banyak hal.

Anda dapat memulai dengan menggunakan Notepad, editor teks yang disertakan
dalam instalasi Windows Anda. Jika Anda tidak menggunakan Windows, atau jika
Anda lebih memilih editor teks lain, ada banyak perangkat lunak gratis yang dapat
Anda unduh dari Internet.

Atau Anda bisa menggunakan salah satu editor HTML atau WYSIWYG. WYSIWYG
adalah singkatan dari "apa yang Anda lihat adalah apa yang Anda dapatkan." Anggap
saja sebagai alat tata letak yang memungkinkan Anda membuat halaman HTML
dengan mudah dan memformatnya tanpa perlu repot-repot dengan tag dan elemen.

Jadi, kami merekomendasikan hardcoding jika Anda masih belajar. Hardcoding berarti
menulis HTML menggunakan editor teks. Ada dua hal yang perlu Anda ketahui untuk
memulai dengan HTML:

1. Tag dan elemen dasar.

2. Struktur halaman HTML.

1. Tag dan elemen dasar

HTML adalah sebuah bahasa markup. Dengan demikian, Anda perlu mengetahui
berbagai tag dan elemen yang digunakannya.
Tag biasanya datang berpasangan. Tag pembuka akan menandakan bahwa browser
harus memperlakukan teks berikutnya dengan menggunakan properti tag tersebut dan
tag penutup akan mengakhirinya.

Sebagai contoh, tag <strong> pembuka dan tag <strong> penutup yang sesuai akan
membuat semua teks di antaranya dicetak tebal. yaitu,

"Nama saya <strong>Clark Kent</strong>" akan ditampilkan

sebagai: Nama saya Clark Kent.

Dan kemudian ada apa yang kita sebut sebagai "elemen kosong" atau elemen yang
bekerja tanpa tag penutup atau pembuka. Elemen kosong sering digambarkan sebagai
tag yang menutup sendiri.

Terdapat beberapa elemen yang kosong, misalnya:

● area
● dasar
● basefont
● br
● col
● bingkai
● hr
● img
● masukan
● isindex
● tautan
● meta
● param

Semua ini dapat berdiri sendiri. Sebagai contoh, jeda baris dalam dokumen HTML
sering dilambangkan dengan <br />.

2. Struktur halaman HTML

HTML sangat sederhana dan logis. Browser akan mulai membaca halaman HTML dari
atas ke bawah, dari kiri ke kanan.

Ini memang mengikuti struktur dasar. Pertama, Anda harus mendeklarasikan bahwa
dokumen tersebut adalah dokumen HTML. Anda dapat melakukan ini dengan
menggunakan tag <html>.

Kemudian ada dua bagian lain yang disebut <head> dan <body> dokumen Anda.

<head> adalah tempat Anda memasukkan semua informasi yang ingin Anda sertakan
tentang dokumen Anda.

<body> pada dasarnya adalah isi dari dokumen HTML Anda.

Dengan kata lain, bagian <body> adalah apa yang dilihat orang ketika mereka melihat
dokumen HTML Anda.
Ingat bagaimana Anda harus menutup tag dalam HTML? Anda juga perlu menutup
<html>, <head> dan <body>, sehingga dokumen HTML dasar akan terlihat seperti ini:

<html>
<head>
</head>
<body>
</body>
</html

Sekarang Anda telah memiliki dasar-dasar untuk membuat halaman HTML pertama
Anda!

2. Tag, Atribut, dan Elemen

Ketika belajar tentang HTML, Anda akan menemukan berbagai sumber daya yang
mungkin menggunakan elemen dan tag HTML secara bergantian. Kemungkinan
besar, itu karena mereka ingin
menyederhanakan semuanya dan membuatnya lebih mudah untuk Anda pahami.
Namun, ada perbedaan ketika Anda mengacu pada elemen HTML dan tag HTML.

2.1 Apa perbedaannya?

Secara teknis, dokumen HTML hanya berisi tag. Ketika diakses pada browser,
dokumen HTML kemudian diuraikan sehingga dapat ditampilkan menggunakan
Document Object Model (DOM). Tag-tag tersebut ada di dalam dokumen HTML,
tetapi elemen HTML hanya muncul setelah dokumen diuraikan.

Namun, mari kita tidak membahas hal-hal teknis dan menyederhanakan hidup kita
dengan menggunakan apa yang umum dipahami. Sederhananya, tag HTML adalah
bahasa markup yang Anda gunakan dalam HTML. Tag-tag ini umumnya adalah tag
awal atau pembuka dan tag penutup atau penutup. Tag diapit oleh tanda kurung siku
<>.
Elemen HTML, di sisi lain, mencakup konten.

Jadi, perhatikan ini: <p>Ini adalah perbedaan antara elemen HTML dan tag. <p>. Tag
di sini adalah <p> dan </p> <p> , sedangkan semuanya disebut elemen HTML.

2.2 Elemen HTML

Sekarang setelah kita mengetahui hal itu, mari kita lihat elemen HTML.
Elemen HTML memiliki sintaks berikut ini:
1. Elemen HTML dimulai dengan tag pembuka atau tag awal, yaitu <p>.
2. Elemen HTML diakhiri dengan tag penutup atau tag akhir, yaitu </p> <p>.
3. Properti konten HTML diapit oleh tag awal dan tag akhir, yaitu,
<p>Ini adalah konten elemennya.</p> <p>.
4. Mungkin juga berisi atribut.

1. Elemen Kosong

Beberapa elemen HTML memang memiliki konten dan disebut elemen kosong. Elemen-
elemen ini
diakhiri atau ditutup dengan tag pembuka, yaitu <br/>.

2. Elemen-elemen yang Tersimpan

Lalu ada juga yang disebut "elemen yang bersarang". Elemen yang terletak di dalam
adalah elemen HTML yang ditemukan di dalam elemen HTML lainnya. Sebagai
contoh, ini adalah elemen yang bersarang:
<p>Saya tidak tahu <strong>apa itu</strong>.</p>
Terakhir, elemen HTML dapat berisi atribut, yang akan kita bahas nanti.

3. Beberapa Tag HTML yang Umum Digunakan Termasuk:

<a> yang menunjukkan hyperlink

<b> yang menampilkan teks bercetak tebal
<br> yang memasukkan jeda baris ke dalam paragraf
<div> yang memperkenalkan bagian dari dokumen
<em> yang menunjukkan penekanan
<h1>, <h2>, <h3>, hingga <h6> menampilkan judul HTML
<hr> yang menyisipkan aturan horizontal
<p> yang memperkenalkan sebuah paragraf
<tabel> yang memperkenalkan sebuah tabel

4. Penggunaan elemen HTML

Elemen-elemen HTML memiliki berbagai tujuan:

1. Elemen HTML dapat menggambarkan tujuan teks, serta memberikan struktur.
Contoh yang baik dari jenis elemen HTML ini adalah <h1>, <h2> dan header HTML
lainnya. Sebagai contoh, <h1>Pendahuluan</h1> mengomunikasikan bahwa
"Pendahuluan" adalah judul tingkat pertama. Perhatikan bahwa elemen HTML
struktural hanya menyediakan struktur dan tidak memiliki standar khusus untuk
tampilan. Namun, sebuah browser dapat memiliki tampilan default untuk jenis elemen
ini, oleh karena itu Anda sering melihat tag header lebih besar daripada teks normal
pada browser Anda.
2. Elemen HTML dapat menentukan bagaimana konten tertentu akan muncul. Sebagai
contoh, menggunakan
<b> akan merender teks dengan huruf tebal, sementara menggunakan <i> akan
menampilkan teks dalam huruf miring.

3. Elemen HTML yang menautkan dokumen HTML Anda ke dokumen lain. Misalnya,
Anda dapat menggunakan <a> untuk menautkan dokumen Anda ke dokumen lain.

2.3 Tips

1. Selalu masukkan tag penutup.

Ada beberapa elemen HTML yang bukan merupakan elemen kosong tetapi dapat
ditulis tanpa tag penutup. Karena browser dapat mengenalinya, maka hal ini tidak
menimbulkan masalah. Sebagai contoh, elemen <p>, yang memulai paragraf, sering
kali tidak ditutup.
<p>Inilah yang sedang kita bicarakan.
Namun, tetap merupakan praktik terbaik untuk menutup elemen HTML.

Sebagian besar browser Web akan menganggap tag penutup untuk <p> opsional dan
paragraf akan ditampilkan dengan benar. Namun, hal ini tidak berlaku untuk semua
browser Web. Yang pasti, selalu letakkan tag penutup di bagian akhir.

Apa bedanya kasus ini dengan elemen kosong? Elemen kosong adalah elemen yang
tidak memerlukan tag penutup. Selain itu, tidak ada tag penutup yang ada atau
diizinkan dalam elemen kosong. Misalnya, <br> tidak memiliki tag penutup yang
sesuai: </br> tidak ada dalam HTML.

Sedangkan, secara teknis, Anda perlu menutup elemen HTML di atas dengan
menggunakan </p>.

2. Gunakan huruf kecil saat menulis elemen.

Tag HTML tidak peka terhadap huruf besar atau kecil. Ini berarti Anda dapat menulis
<p>, <P> atau bahkan
</p> atau </p>.
Namun, standar dan rekomendasi dari World Wide Web Consortium atau W3C
merekomendasikan penggunaan huruf kecil untuk elemen HTML di HTML4 dan
mewajibkannya di XHTML. Jadi, sebaiknya Anda mulai melatih diri Anda dalam
menulis elemen HTML dalam huruf kecil.

2.4 Atribut

Istilah lain yang perlu Anda ketahui terkait elemen HTML adalah atribut. Atribut
memodifikasi tag di mana tag tersebut muncul. Atribut adalah pasangan nama dan
nilai, yang dipisahkan dengan tanda sama dengan.

Elemen HTML <a href="nextofkin.html">Next of kin</a> berisi atribut

href="nextofkin.html". Atribut biasanya menggunakan sintaks berikut ini:

<tag atribut = "nilai atribut">konten</tag>

Banyak orang yang mengacaukan atribut alt sebagai tag. Sebenarnya tidak. Atribut alt
memodifikasi atribut
Tag <img>, <are>, <input>, dan <applet>, yang membuatnya menjadi sebuah atribut.

Beberapa atribut yang paling sering digunakan, selain href dan alt termasuk:
● menyelaraskan
● bgcolor
● src
● tinggi
● lebar
● nilai
● href
● hspace
● id
● kelas
● gaya
● judul
● dir
● lang
Ini adalah dasar-dasar yang perlu Anda ketahui tentang tag, atribut, dan elemen.

3. Judul. Judul Paragraf

Salah satu hal yang harus Anda sadari ketika bekerja dengan HTML adalah bahwa
HTML bukan hanya sebuah bahasa markup yang perlu Anda gunakan untuk
membuat halaman Web. HTML sangat mudah dibaca dan dimengerti, meskipun Anda
hanya melihat kodenya. Untuk sebagian besar, Anda akan melihat bagaimana
semuanya terstruktur hanya dengan melihat kodenya.

Jadi dengan melihat kode sumber, Anda akan dapat melihat dokumen HTML dan
memahami bagaimana sebuah halaman akan terlihat.
Dengan mengingat hal tersebut, Anda seharusnya bisa bekerja dengan cukup baik
dengan judul, paragraf dan tajuk.
3.1 Tag Judul

Seperti halnya buku, artikel, atau karya cetak lainnya, dokumen HTML Anda harus
memiliki judul.

Judul diperlukan untuk semua dokumen HTML dan dilengkapi dengan manfaat lainnya:
● Ini akan mengidentifikasi tentang apa dokumen Anda.
● Judul juga muncul di jendela atau tab browser, sehingga memudahkan orang
untuk mengidentifikasi tab mana yang harus diklik untuk mengakses halaman
Web Anda jika mereka memiliki banyak tab yang terbuka pada saat yang
bersamaan.
● Ini adalah salah satu hal yang dilihat oleh mesin pencari untuk menentukan
konten halaman Anda. Halaman hasil mesin pencari (SERP) akan
menampilkan judul dokumen Anda sebagai judul utama hasil pencarian.
Pada akhirnya, ini akan membantu Anda mendapatkan peringkat yang lebih tinggi di
mesin pencari jika Anda menulis judul dengan benar.
● Ini dapat digunakan oleh sistem lain seperti pencarian WAIS dan sistem
pengarsipan dokumen untuk mengidentifikasi dokumen Anda.
● Tag judul juga digunakan untuk bookmark. Jadi, jika Anda memiliki kebiasaan
menandai halaman, tag judul akan memberikan cara yang baik untuk
mengidentifikasi halaman di kemudian hari.
Cara yang benar untuk menulis judul Anda adalah dengan menggunakan sintaks
berikut:
<title> Tuliskan Judul Dokumen Anda di sini.</title>

Anda harus menempatkan elemen judul Anda di dalam bagian <head> pada dokumen
HTML Anda.

Ketika Anda telah memiliki <title>, Anda sekarang dapat mulai menulis konten yang
terlihat
kepada manusia. Ini adalah konten yang Anda letakkan di dalam bagian <body> pada
dokumen HTML Anda.

Mari kita mulai dengan judul dan paragraf.

3.2 Judul

Judul penting untuk digunakan dalam dokumen Anda. Mereka memberikan struktur.
HTML memungkinkan Anda untuk memiliki enam judul yang berbeda: <h1>, <h2>,
<h3>, <h4>, <h5>, dan <h6>.

Judul mengikuti sintaks berikut ini:

<h1>Teks untuk Judul 1 ada di sini</h1>
<h2>Teks untuk Judul 2 ada di sini</h2>
<h3>Teks untuk Judul 3 ada di sini</h3>
<h4>Teks untuk Judul 4 ada di sini</h4>
<h5>Teks untuk Judul 5 ada di sini</h5>
<h6>Teks untuk Judul 6 ada di sini</h6>

Anda dapat menggunakan judul sesuai dengan tingkat kepentingannya. Misalnya,

Anda dapat menggunakan <h1> untuk judul yang paling penting dan <h2> hingga
<h6> untuk judul yang kurang penting.
Anda juga dapat menggunakan judul untuk mengelompokkan dan mengatur konten
Anda sehingga <h1> menjadi judul bagian utama Anda, sementara <h2> akan
memperkenalkan subbagian di dalam bagian utama Anda dan <h3> akan
memperkenalkan subbagian lebih lanjut di dalam subbagian <h2>. Jika halaman Anda
menyertakan judul, Anda mungkin ingin menggunakan <h1> untuk judul, dan <h2>
untuk bagian utama, dan melalui <h3> untuk subbagian.

Oleh karena itu, sangat penting untuk menggunakan judul untuk:

● Jadikan dokumen Anda lebih mudah dibaca.
● Buatlah dokumen Anda mudah dibaca dengan cepat. Dengan melihat judul,
pembaca akan dapat mengetahui isi halaman Anda, bagian utama dan
subbagian.
 ● Judul juga dapat membantu halaman Anda menjadi lebih ramah mesin pencari
(SEO).

Ketika Anda memiliki judul dalam dokumen Anda, gunakan tag judul. Ada tag lain
yang dapat Anda gunakan untuk mendapatkan format yang sama dengan judul, tetapi
jangan gunakan tag tersebut.

Sebagai
contoh:
<big>Ini Adalah Judul</big>
dapat ditampilkan dengan cara
yang sama seperti
<h1>Ini Adalah Judul </h1>

Namun, jika Anda melihat kode sumbernya, akan lebih mudah untuk mengetahui bahwa
<h1> adalah judul utama dibandingkan jika Anda menggunakan <big> dan tag serupa
lainnya.

Perhatikan bahwa judul bukanlah tag pemformatan dan tidak memberi tahu browser
cara menampilkan konten dengan cara tertentu. Kebetulan sebagian besar browser
mengenali judul dan mereka memiliki cara sendiri untuk menampilkannya.
Pemformatan yang berbeda yang Anda lihat untuk <h1>, <h2> hingga <h6> akan
bergantung pada browser yang Anda gunakan.

Namun, Anda dapat memformat judul Anda untuk ditampilkan dengan menggunakan
lembar gaya bertingkat.

3.3 Paragraf

Saat bekerja dengan dokumen HTML, Anda perlu menggunakan tag paragraf <p>
untuk menyisipkan spasi di antara dua paragraf.

Anda dapat menggunakan sintaks berikut ini saat menulis paragraf untuk dokumen
HTML Anda:
<p>Paragraf 1 dimulai di sini</p> <p>.
 </p> <p>Paragraf kedua akan menyusul di sini.</p> <p>
Penting untuk diingat bahwa Anda perlu menambahkan tag penutup </p> <p>setelah
Anda menulis setiap paragraf, karena paragraf bukanlah elemen kosong.

Anda dapat melewatkan penambahan </p> di akhir, dan sebagian besar browser akan
mengabaikannya dan menampilkan paragraf Anda dengan benar. Namun beberapa
browser mungkin akan mengembalikan kesalahan ketika Anda tidak meletakkan
</p> <p>Dan itulah semua yang perlu Anda ketahui terlebih dahulu tentang judul,
heading, dan paragraf dalam HTML.

4. Daftar Tidak Bernomor, Bernomor, Definisi, dan Bersarang (Bagian 4)

Ada dua daftar yang paling umum digunakan dalam HTML, yaitu:
● Daftar pesanan.
● Daftar yang tidak diurutkan.
4.1 Daftar Pesanan

Anda menggunakan daftar berurutan jika urutan item Anda penting. Daftar berurutan
menyebutkan berbagai item pada daftar Anda pada baris terpisah. Daftar ini akan
memiliki lebih sedikit ruang di antara item, tidak seperti ketika Anda menggunakan tag
paragraf. Terakhir, daftar berurutan biasanya menjorok ke dalam. Sintaks yang biasa
digunakan untuk daftar berurutan adalah sebagai berikut:
<ol>
<li>Ini adalah item pertama dalam daftar.</li>
<li>Ini adalah item kedua dalam daftar.</li>
<li>Ini adalah item ketiga dalam daftar.</li>
</ol>

Ini akan ditampilkan sebagai:

1. Ini adalah item pertama dalam daftar.
2. Ini adalah item kedua dalam daftar.
3. Ini adalah item ketiga dalam daftar.

Atribut yang dapat Anda gunakan dengan daftar yang dipesan

Seperti halnya tag lain, Anda dapat mengubah tampilan daftar yang diurutkan dengan
menambahkan atribut. Dua atribut yang paling sering digunakan adalah type dan
start.

1. Jenis

Selain angka, Anda juga dapat menggunakan huruf dan angka Romawi. Jenis dan
sintaks yang sesuai adalah sebagai berikut:
<ol type="a"> akan menampilkan a, b, c
<ol type="A"> akan menampilkan A, B, C
<ol type="i"> akan menampilkan i, ii, iii
<ol type="I"> akan menampilkan I, II, III
2. Mulai

Anda dapat membuat daftar pesanan Anda dimulai dengan nomor berapa pun yang
Anda inginkan. Sebagai contoh:

<ol start="3">
Daftar yang dihasilkan akan dimulai dengan 3 yang menyertai item pertama.
<ol start="3">
<li>Ini adalah item pertama dalam daftar.</li>
<li>Ini adalah item kedua dalam daftar.</li>
<li>Ini adalah item ketiga dalam daftar.</li>
</ol>

Ini akan ditampilkan sebagai:

1. Ini adalah item pertama dalam daftar.
2. Ini adalah item kedua dalam daftar.
3. Ini adalah item ketiga dalam
daftar. 4.
Hal ini sangat berguna jika Anda harus menyela daftar Anda untuk menjelaskan
sesuatu. Anda dapat memulai dari tempat daftar sebelumnya berakhir.

4.2 Daftar yang Tidak Terurut

Daftar yang tidak diurutkan juga disebut daftar berpoin dan, tidak seperti daftar yang
diurutkan, urutan item tidak penting dalam jenis daftar ini.
Mirip dengan daftar terurut, setiap item dalam daftar Anda disajikan pada baris
terpisah, yang diperkenalkan oleh sebuah peluru. Daftar yang tidak diurutkan juga
menjorok ke dalam.

Anda dapat membuat daftar yang tidak berurutan dengan menggunakan sintaks berikut:
<ul>
<li>Ini adalah item # 1.</li>
<li>Ini adalah item # 2.</li>
<li>Ini adalah item # 3.</li>
</ul>

Ini akan ditampilkan sebagai:

● Ini adalah item #1.
● Ini adalah item #2.
● Ini adalah item #3.
●
Selanjutnya, jika Anda menggunakan versi HTML yang lebih awal dari HTML 4, Anda
dapat mengubah bullet dengan menentukan jenisnya.
Misalnya, menggunakan:
<ul type="square"> akan menampilkan sebuah bullet yang berisi kotak.
<ul type="circle"> akan menampilkan sebuah bullet lingkaran yang tidak terisi.

Meskipun daftar terurut dan tidak terurut merupakan bentuk dasar dari daftar, Anda
mungkin perlu menggunakan daftar yang memiliki lebih banyak informasi selain hanya
item daftar. HTML juga dapat menangani hal tersebut. Mari kita lihat daftar deskripsi
dan daftar bersarang.

4.3 Daftar deskripsi

Daftar deskripsi memungkinkan Anda untuk memiliki deskripsi untuk setiap item pada
daftar Anda. Tidak seperti <ol> dan <ul>, Anda tidak akan menggunakan <li> untuk
item daftar. Sebaliknya, tag <dl> membutuhkan <dt> untuk item daftar dan <dd> untuk
deskripsi. Daftar deskripsi juga dikenal sebagai daftar definisi.

Sintaks yang benar adalah:

<dl>
<dt>Ini adalah item nomor 1.</dt>
<dd> Ini adalah deskripsi dari item # 1</dd>
<dt>Ini adalah item nomor 2.</dt>
<dd> Ini adalah deskripsi dari item #2</dd>
</dl> </dl

Browser akan menampilkan ini sebagai:

Ini adalah item #1.
- Ini adalah deskripsi dari item
#1 Ini adalah item #2.
- Ini adalah deskripsi dari item #2
Seperti yang bisa Anda lihat, hanya deskripsinya saja yang menjorok ke dalam.

4.4 Daftar bersarang

Daftar bersarang dapat berupa daftar yang tidak berurutan atau daftar berurutan di
mana Anda dapat memiliki sublist untuk item apa pun yang Anda inginkan. Ini bagus
jika Anda memiliki daftar yang rumit di mana Anda mungkin perlu menghitung daftar
lain untuk item dalam daftar asli Anda. Mungkin cara paling sederhana untuk
menggambarkan daftar bersarang adalah bahwa ini adalah daftar di dalam daftar.

Sintaks yang benar untuk daftar bersarang adalah:

<ul>
<li>Ini adalah item # 1.</li>
<li>Ini adalah item nomor 2.
<ul>
<li>Ini adalah item nomor 2 (a).</li>
<li>Ini adalah item nomor 2 (b).</li>
</ul>
</li> <li>
<li>Ini adalah item # 3.</li>
</ul>

Ini akan ditampilkan sebagai:

● Ini adalah item #1.
● Ini adalah item #2.
○ Ini adalah item nomor 2 (a).
○ Ini adalah item nomor 2 (b).
● Ini adalah item #3.

Jika Anda perlu menggunakan daftar terurut, Anda dapat mengganti <ul> dengan <ol>.
Sebagai contoh:
<ol>
<li>Jeans</li>
<li>Kemeja
<ul>
<li>Biru tua.</li>
<li>Putih polos.</li>
</ul>
</li> <li>
<li>Ini adalah item # 3.</li>
</ol>
Akan ditampilkan sebagai:
1. Jeans
2. Kemeja
● Biru laut.
● Putih polos.
3. Ini adalah item
#3.

Dan begitulah cara Anda membuat daftar untuk kode HTML Anda. Tangkapan layar
yang menunjukkan penggunaan berbagai gaya daftar HTML:
5. HTML untuk Pemula: Cara Membuat Tautan ke Halaman Lain dan Tempat Lain

Seperti yang sudah Anda ketahui, tautan adalah bagian penting dari halaman Web.
Tautan memungkinkan Anda berpindah dengan lancar dari satu halaman ke halaman
lainnya. Hal ini memungkinkan Anda untuk menavigasi dari satu halaman ke halaman
lainnya. Ini juga memungkinkan Anda untuk mendapatkan lebih banyak informasi
tentang topik tertentu.

Dengan demikian, ada banyak jenis tautan yang harus Anda ketahui ketika belajar
HTML. Pertama-tama, mari kita berkonsentrasi pada tubuh dokumen HTML Anda.
Apa saja jenis-jenis tautan yang harus Anda ketahui?
● Tautan biasa atau teks
● Tautan gambar
● Tautan ke alamat email
● Tautan penampung atau jangkar
5.1 Tautan Biasa atau Teks

Jenis tautan yang paling umum adalah tautan teks. Tautan ini merupakan teks yang
biasanya ditampilkan dengan garis bawah dan berwarna biru, dan memungkinkan Anda
untuk mengunjungi sumber daya yang ditautkan.
Untuk membuat tautan teks sederhana, gunakan tag <a> dengan mengikuti sintaksis
berikut:

<a href="URL halaman yang ingin Anda tautkan">tautan teks</a>

Apa maksud dari sintaks ini?

● Tag <a> membuka elemen tautan.
● Atribut href akan memberi tahu Anda tujuan tautan.
● "Teks tautan" dapat berupa apa saja, mulai dari deskripsi sederhana tentang
halaman yang ditautkan hingga sesuatu seperti "klik di sini" atau "kunjungi halaman."
● Tag </a> menutup elemen.

Sebagai contoh:
<a href="http://www.google.com">Google It!</a>
Akan ditampilkan
sebagai: Google It!

Mengklik tautan tersebut akan membawa Anda ke http://www.google.com. Perhatikan

bahwa URL tujuan tidak harus berupa halaman HTML atau halaman Web. Tautan
dapat membawa Anda ke file gambar, dokumen Word, file PDF, atau bahkan file
audio, video, dan file multimedia lainnya.

5.2 Tautan Gambar

Terkadang, Anda ingin menggunakan gambar sebagai pengganti tautan teks. Hal ini
juga dimungkinkan. Untuk menggunakan gambar sebagai tautan Anda, gunakan
sintaks berikut ini:
<a href="URL">
<img src="image.jpg" alt="alt teks gambar"></a>

Pada halaman Anda, gambar bernama image.jpg akan ditautkan ke URL apa pun yang
Anda miliki.

5.3 Tautan ke Alamat eMail

Alih-alih URL, gambar atau video, dan file serupa lainnya, Anda dapat membuat
tautan email. Tautan email akan membuka klien email default pengguna (Gmail,
Outlook, Apple Mail, dll) dan memulai pesan baru dengan alamat email tertentu yang
sudah diisi ke dalam bidang TO:. Jika Anda juga sudah menentukan subjek, baris
subjek juga akan terisi secara otomatis.

Bagaimana Anda melakukan ini? Gunakan sintaks berikut ini:

<a href="mailto:[email protected]?Subject=Creating tautan email!"> Kirimi saya

email!</a>
Pada halaman Anda, ini akan muncul sebagai
"Kirimkan saya email!"

Ketika Anda mengklik tautan tersebut, maka akan membuka klien email Anda untuk
membuat jendela pesan baru. Pada kolom TO, Anda akan melihat
[email protected] sudah dimasukkan dan baris subjek akan berbunyi "Membuat
tautan email!".

5.4 Tautan Jangkar

Ada kalanya Anda perlu membuat tautan ke berbagai bagian dokumen Anda. Sebagai
contoh, halaman FAQ biasanya memiliki semua pertanyaan di bagian atas halaman
dan kemudian jawaban untuk pertanyaan-pertanyaan ini mengikuti di bawahnya.

Cara yang baik untuk membuat tautan yang akan membawa pengguna Anda ke tempat
tertentu yang sama
adalah dengan membuat tautan jangkar. Untuk melakukan ini, Anda harus terlebih
dahulu membuat penanda menggunakan atribut "id".

Sebagai contoh, jawaban dari pertanyaan nomor 10 adalah "10. Ya, kami bisa
menangani hal itu." Lihatlah kode sumber Anda, temukan baris yang sesuai dan
tambahkan penanda seperti ini:
<a id="AnswerTen">10. Ya, kami bisa menangani hal itu.</a>
Di bagian atas halaman Anda, buat tautan ke penanda tersebut, yaitu:
<a href="#JawabanSepuluh">Pertanyaan 10: Apakah Anda menangani tutorial
HTML?</a>
Pada halaman Anda, Pertanyaan 10 akan disorot dan ketika Anda mengekliknya, Anda
akan langsung dibawa ke jawaban yang telah ditandai di bawah ini. Jangan lupa
untuk menambahkan tanda # sebelum nama penanda saat menautkan.

5.5 Pertimbangan lain saat membuat tautan:

1. Perhatikan bahwa Anda dapat menentukan di mana sumber daya yang ditautkan
akan dibuka. Ini bisa berupa
● dibuka di halaman yang sama (default).
● dibuka di jendela baru, dalam hal ini Anda perlu menambahkan atribut
target="_blank" ke elemen tautan Anda.
Jika Anda bekerja dengan bingkai, ada juga atribut yang memungkinkan Anda
menentukan pada bingkai mana tautan akan terbuka.
● target="_self" akan membuka tautan di bingkai yang sama dengan tempat Anda
mengekliknya.
● target="_parent" akan membuka halaman yang ditautkan dalam bingkai induk.
● target="_xyz" akan membuka halaman yang ditautkan di dalam bingkai bernama
"xyz".
2. Menggunakan URL absolut atau relatif.
URL absolut menentukan URL lengkap, misalnya http://www.you.com/me.html. Ini
biasanya digunakan ketika Anda menautkan ke situs Web lain di domain lain.
Sebaliknya, URL relatif tidak akan memiliki bagian domain, melainkan akan ditulis
sebagai me.html. Ini biasanya digunakan ketika Anda menautkan ke halaman dalam
domain Anda sendiri.
6. HTML untuk Pemula: Gambar

Gambar adalah bagian penting dari setiap halaman Web. Gambar membantu
menyampaikan maksud Anda dan membantu menarik perhatian pengunjung situs

Anda. Bagaimana cara memasukkan gambar ke dalam halaman Anda?

Anda harus menggunakan kode ini:

<img src="imagefile.jpg" alt="gambar di situs Anda" width="100" height="100">

Tag <img> memperkenalkan sebuah gambar, atribut src atau sumber memungkinkan
Anda untuk menunjuk ke file gambar Anda. Atribut alt adalah singkatan dari teks
alternatif. Inilah yang muncul ketika gambar tidak dapat ditampilkan karena suatu
alasan (koneksi internet lambat atau server tidak merespons). Atribut lebar dan tinggi
menentukan dimensi gambar.

Perhatikan bahwa Anda harus menggunakan URL lengkap gambar jika gambar
tersebut tidak di-host pada direktori yang sama dengan dokumen HTML Anda.
Sebagai contoh:
<img src="http://www.whereisyourimage.net/imagefile.jpg" alt="gambar di situs lain"
width="100" height="100">

6.1 Atribut alt

Sangatlah penting bagi Anda untuk mengisi atribut alt. Paling tidak, ini akan
memberikan gambaran kepada orang lain mengenai gambar tersebut, meskipun
mereka tidak dapat melihatnya.

Namun, atribut alt, yang paling sering disalahartikan sebagai tag alt, juga memiliki
tujuan lain.

Sebagai contoh:
1. Seorang tunanetra yang mengakses situs Web Anda melalui pembaca layar
akan mendengar atribut alt, yang memungkinkannya untuk "melihat" gambar yang
telah Anda sertakan di halaman Anda.
2. Peramban berbasis teks dan spider mesin pencari akan dapat membaca atribut
alt.
Berbicara tentang mesin pencari, atribut alt juga dapat membantu membuat halaman
Anda atau setidaknya gambar Anda mendapat peringkat lebih tinggi di halaman hasil
mesin pencari. Bahkan ada spekulasi di antara para profesional SEO bahwa
meletakkan kata kunci Anda dalam teks alt sebenarnya memiliki bobot lebih besar
daripada meletakkan kata kunci Anda dalam tag judul atau header. Selain itu, layanan
pencarian gambar, seperti Google Images, Yahoo Image Search, dan Bing Images,
menggunakan atribut alt.

6.2 Atribut lebar dan tinggi

Saat menyisipkan gambar, sebaiknya tentukan lebar dan tinggi gambar. Dengan cara
ini, browser akan mengetahui berapa banyak ruang yang tersisa untuk gambar Anda.
Ini berarti bahwa meskipun gambar Anda tidak langsung dimuat, halaman akan tetap
ditata dengan baik seolah-olah gambar telah dimuat sepenuhnya.

Juga penting untuk menggunakan proporsi yang tepat supaya gambar Anda tidak
terlihat
terdistorsi. Sebagai contoh, jika Anda memiliki gambar dengan lebar 200 piksel dan
tinggi 200 piksel, menentukan lebar dan tinggi masing-masing 200 piksel dan 100
piksel akan menghasilkan halaman yang menampilkan gambar yang berubah bentuk.

6.3 Sejajarkan gambar Anda

Juga penting untuk menyelaraskan gambar Anda. Contohnya, Anda bisa

menampilkan gambar di tengah paragraf, atau bisa juga memiringkannya ke kanan.

Anda dapat melakukan ini dengan menggunakan atribut align.

● Untuk menyelaraskan gambar Anda ke kiri, gunakan <img align="left">
● Untuk menyelaraskan gambar Anda ke kanan, gunakan <img align="right">
● Untuk menyelaraskan gambar Anda ke tengah, gunakan <img align="tengah">
● Untuk menyelaraskan gambar Anda ke atas, gunakan <img align="top">
● Untuk menyelaraskan gambar Anda ke bagian bawah, gunakan <img
align="bottom">

Atribut align untuk tag <img>, bagaimanapun, sudah tidak digunakan lagi pada HTML
4.01, dan jika Anda menggunakan HTML 5, atribut ini tidak didukung lagi.
Namun, Anda masih dapat menggunakan CSS untuk menyelaraskan gambar Anda
dengan menggunakan sintaks berikut:
<img style="float:right"> untuk menyelaraskan gambar Anda ke kanan.

6.4 Menambahkan tautan ke gambar Anda

Terkadang, Anda ingin menggunakan gambar untuk menautkan ke konten lain. Ini
bisa berupa halaman lain atau mungkin Anda ingin memberikan tampilan yang lebih
besar kepada orang lain dari gambar yang Anda gunakan untuk halaman Anda.

Anda dapat menambahkan tautan ke gambar Anda dengan menggunakan sintaks ini:
<a href="page.html"><img src="image.jpg" alt="gambar dengan tautan" width="100"
height="100"></a>
Kedengarannya cukup sederhana. Tetapi bagaimana jika Anda perlu menambahkan
dua atau lebih tautan ke satu gambar? Bagaimana Anda melakukannya?

Meskipun agak ketinggalan jaman, setidaknya Anda ingin tahu tentang bagaimana
Anda bisa menciptakan hal-hal seperti itu. Peta gambar adalah apa yang Anda sebut
sebagai gambar tunggal yang memiliki banyak area yang saling terhubung. Sebagai
contoh, jika Anda memiliki gambar wajah dan Anda ingin menautkan mata ke
halaman yang Anda sebut eye.html dan bibir ke lip.html, Anda perlu membuat peta
gambar.

Untuk membuat peta gambar, Anda perlu mendapatkan koordinat titik panas Anda.
Titik panas adalah area yang dapat diklik di dalam gambar Anda. Untuk mendapatkan
koordinat, Anda dapat menggunakan perangkat lunak pengolah gambar atau alat
online seperti Poor Person's Image Mapper.

Setelah Anda mengetahui koordinatnya, sekarang Anda dapat menyisipkan peta

gambar ke dalam halaman Anda. Anda dapat menggunakan sintaks berikut ini:

<img src="face.jpg" usemap = #face>

<nama peta = wajah>
<area shape = koordinat lurus = 0,0,129,129 href = "mata.html">
<area shape = koordinat lurus = 130,130,159,159 href = "lip.html"
</p> <p>Peta

Pada peta gambar ini, area persegi panjang dalam koordinat (0, 0) dan (129, 129)
dapat diklik dan ditautkan ke halaman eye.html. Demikian pula, area persegi panjang
di dalam koordinat (130, 130) dan (159, 159) juga dapat diklik, tetapi kali ini terhubung
ke halaman lip.html. Ada bentuk-bentuk lain yang dapat Anda gunakan:

<area shape=circle coords=0,0,129,129 href="url">

dan
<area shape=polygon coords= 0,0,129,129 ..., xn,yn Href="url">

Jadi begitulah cara Anda menambahkan gambar ke situs Anda.

7. HTML untuk Pemula: Cara Menggunakan Data Tabular

Tabel memungkinkan Anda menyajikan data dan informasi dengan mudah

sedemikian rupa sehingga mudah dibaca dan dipahami.

Tabel hanyalah kumpulan sel. Atau lebih tepatnya, tabel hanyalah kolom dan baris sel
yang berisi informasi seperti teks, angka, tautan, tabel lain, gambar, dan konten
lainnya.

Kami tidak akan membuat Anda berpikir bahwa membuat tabel sangat mudah dalam
HTML. Ketika Anda memiliki lebih banyak sel, kolom, dan baris, Anda akan
menemukan bahwa kode yang harus Anda tulis juga menjadi sedikit lebih berat.

Namun demikian, mengetahui dasar-dasarnya dan berlatih akan memungkinkan Anda

untuk membuat tabel dengan benar.

7.1 Kapan Menggunakan Tabel dan Kapan Tidak

Pertama, mari kita perjelas bahwa tabel tidak boleh digunakan untuk tata letak,
pemformatan, dan pemosisian. Sebagai contoh, jika Anda perlu memiliki kutipan blok,
atau spasi di sekitar gambar, jangan gunakan tabel untuk itu, Anda bisa mendapatkan
hasil yang sama dengan menggunakan tag HTML lainnya.

Anda sebaiknya hanya menggunakan tabel jika Anda harus menyajikan data. Jika
konten Anda masuk akal ketika Anda menggunakan spreadsheet untuk
menyajikannya, maka Anda harus menggunakan tabel untuk menaruhnya pada
dokumen HTML.
7.2 Membuat Tabel

Tag <tabel> mendefinisikan semua tabel dalam dokumen HTML. Untuk memudahkan
Anda dalam melakukan hardcode pada tabel Anda, Anda harus selalu ingat bahwa
tabel HTML bekerja pertama kali dengan baris (ditentukan oleh tag <tr>), kemudian
kolom (ditentukan oleh tag <td>).

Mari kita mulai dengan satu sel saja. Untuk melakukan ini, gunakan kode berikut:

<table border="1">
<tr>
<td>satu sel</td>
</tr>
</tabel>

Ini akan muncul sebagai:

sat
u
sel

Atribut batas menunjukkan garis kisi untuk tabel Anda. Selanjutnya, cobalah untuk
membuat tabel dengan hanya satu baris, tetapi tiga kolom yang berbeda.

<h4>Satu baris, banyak kolom:</h4>

<table border="1">
<tr>
<td>kolom 1</td>
<td>kolom 2</td>
<td>kolom 3</td>
</tr>
</tabel>

Jika Anda ingin memiliki empat kolom, tambahkan saja <td> yang lain. Jumlah baris
<td> akan sesuai dengan jumlah kolom yang Anda miliki dalam tabel Anda.

Ini akan muncul sebagai:

kolom 1 kolom 2 kolom 3

Sekarang untuk sesuatu yang sedikit lebih menantang, mengapa tidak mencoba
memiliki tabel dengan dua baris dan tiga kolom?

<table border="1">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</tabel>

Seperti yang dapat Anda lihat, ada dua set yang berbeda untuk <tr>, yang berarti tabel
akan memiliki dua baris. Tiga tag <td> untuk setiap set <tr> akan berarti bahwa setiap
baris memiliki
tiga kolom.
Kode ini akan ditampilkan sebagai:

Baris 1, Kolom 1 Baris 1, Kolom 2 Baris 1, Kolom 3

Baris 2, Kolom 1 Baris 2, Kolom 2 Baris 2, Kolom 3

7.3 Lebih lanjut tentang Atribut Perbatasan

Kami telah menjelaskan bahwa atribut border akan menampilkan garis kisi atau batas
tabel Anda. Jika Anda tidak menginginkan garis tepi pada tabel Anda, Anda dapat
menghilangkan atribut border atau mengatur nilainya menjadi nol. Sebaliknya, jika
Anda menginginkan garis tepi yang lebih tebal pada tabel Anda, Anda dapat
memasukkan nilai yang lebih tinggi untuk atribut border, yaitu,
<table border="10">
Header Tabel HTML

Jika Anda perlu menyertakan header dalam tabel Anda, Anda perlu menggunakan tag
<th> alih-alih tag <td> dalam set <tr> pertama Anda.

Misalnya, untuk membuat tabel berikut ini:

Header 1 Header 2 Header 3

Baris 1, Kolom 1 Baris 1, Kolom 2 Baris 1, Kolom 3

Anda perlu menulis kode HTML berikut ini:

<table border="1">
<tr>
<th>Kepala 1</th>
<th>Header 2</th>
<th>Kepala 3</th>
</tr>
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
</tabel>

7.4 Memberi Keterangan pada Tabel

Keterangan dapat berupa judul tabel atau deskripsi singkat. Anda dapat
menambahkannya di bagian atas atau bawah tabel, namun di dalam tag <tabel>.

Untuk menambahkan keterangan, gunakan sintaks ini:

<caption>Judul Tabel Anda</caption>

7.5 Bekerja dengan sel yang menggunakan dua baris atau dua kolom

Ada kalanya Anda perlu memiliki header atau sel yang merentang dua atau lebih baris
atau kolom. Anda dapat melakukannya dengan menggunakan colspan atau rowspan.

Contohnya, untuk membuat jenis tabel ini:

Kategori Contoh

Buah- Apel Jeruk Anggur

buahan
Anda akan menulis kode HTML ini:

<table border="1">
<tr>
<th>Kategori</th>
<th colspan="3">Contoh</th>
</tr>
<tr>
<td>Buah-buahan</td>
<td>Apel</td>
<td>Jeruk</td>
<td>Anggur</td>
</tr>
</tabel>
Perhatikan bahwa header kedua Anda, memiliki atribut colspan. Sebaliknya, tulis kode
ini:

<table border="1">
<tr>
<th>Departemen:</th>
<td>Akuntansi</td>
</tr>
<tr>
<th rowspan="2">Narahubung:</th>
<td>Freya Olsen</td>
</tr>
<tr>
<td>Maita Cot</td>
</tr>
</tabel>

akan memungkinkan Anda untuk memiliki sel yang memiliki dua baris. Perhatikan
bahwa tajuk untuk Contact Person memiliki atribut rowspan.

Departemen: Akuntansi

Narahubung: Freya
Olsen

Maita Cot

7.6 Membuat Data Lebih Mudah Dibaca

Kadang-kadang, apabila Anda bekerja dengan blok data, sulit untuk membacanya,
karena data ditampilkan terlalu dekat ke batas. Di sinilah atribut "cellpadding" menjadi
sangat berguna.

<table border="1"
cellpadding="10"
<tr>
<td>Sel ini diberi bantalan.</td>
<td>Sel ini juga diberi bantalan. </td>
</tr>
<tr>
<td>Dunia ini bulat.</td>
<td>Langit berwarna abu-abu.</td>
</tr>
</tabel>
Tabel yang dihasilkan akan menampilkan teks Anda dengan ruang putih yang cukup di
sekelilingnya.

A B

C D

Alih-alih terlihat seperti ini:

A B

C D

7.7 Tabel HTML Sangat Fleksibel

Seperti yang Anda lihat, tabel HTML sangat fleksibel. Selain memungkinkan Anda
untuk memiliki sel, baris, dan kolom yang Anda butuhkan, Anda juga dapat
memasukkan data apa pun yang Anda inginkan. Sebagai contoh, Anda dapat memiliki
kata, paragraf, daftar berpoin, dan bahkan tabel lain di dalam tabel.

8. Kotak Teks dan Masukan Pengguna Lainnya "Thingamajigs"

Formulir HTML menyediakan cara yang bagus untuk mengambil data dari situs web
Anda. Formulir dalam halaman HTML dapat digunakan untuk mengirimkan data ke
server untuk diproses lebih lanjut.
Setiap formulir HTML diperkenalkan oleh tag <form>, dan terdiri dari berbagai elemen
input. Tag <form> memiliki beberapa atribut yang akan memberi tahu browser apa
yang harus dilakukan dengan informasi yang dimasukkan dalam berbagai bidang.
Atribut-atribut tersebut adalah:
● tindakan
● metode
Atribut action memberi tahu browser Anda lokasi skrip cgi yang akan Anda gunakan
untuk memproses formulir. Di sisi lain, atribut metode memiliki dua nilai yang mungkin,
method=get atau method=post, yang keduanya menentukan metode pengiriman data
ke skrip yang telah Anda tentukan di atribut tindakan.

8.1 Bidang Formulir

Formulir HTML apa pun dapat berisi bidang-bidang berikut. Pertama, Anda memiliki
elemen masukan:

Teks Kata
Sandi
Kotak
centang
Radio
Kirim
Ulang File
Tombol
Gambar
Tersembu
nyi

Ada juga metode input lain yang dapat digunakan dalam formulir HTML, termasuk
daftar dropdown, tombol radio, kotak centang, area teks, dan lainnya.
Mari kita lihat bagaimana masing-masing elemen teks ini digunakan dalam bentuk
HTML.

8.2 Bidang Teks

Bidang teks hanyalah sebuah bidang dalam formulir Anda di mana pengguna dapat
memasukkan baris teks. Ini ideal untuk nama, negara bagian, kode pos, dan informasi
serupa lainnya yang tidak membutuhkan terlalu banyak ruang.

Sintaks untuk bidang teks adalah sebagai berikut:

<input type="text" name="shortnameforfield">
Sebagai contoh:
Sekolah: <input type="text" name="nama sekolah">

8.3 Kata sandi

Sangat mirip dengan kolom teks, tetapi yang satu ini khusus diperuntukkan untuk kata
sandi dan data sensitif lainnya. Apa pun yang Anda masukkan ke dalam bidang kata
sandi akan disembunyikan.
Sintaks untuk bidang kata sandi adalah sebagai berikut:
<input type="password" name="passwd">

8.4 Kotak centang

Kotak centang digunakan jika Anda memiliki daftar pilihan, daftar yang Anda inginkan
agar pengunjung memilih sebanyak mungkin pilihan atau membiarkan mereka tidak
memilih satu pun dari pilihan yang Anda sediakan.

<input type="checkbox" name="warna" value="ya">

Ya, saya tertarik!
<input type="checkbox" name="color" value="no">Tidak, jangan hubungi saya.

Jika Anda ingin salah satu opsi di kotak centang sudah dicentang (dicentang secara
default), Anda dapat menggunakan atribut yang dicentang untuk opsi tersebut. Sebagai
contoh:

<input type="checkbox" name="color" value="yes" selected>

Ya, saya tertarik!</input type="checkbox" name="color"
value="yes" selected> Ya, saya tertarik!
<input type="checkbox" name="color" value="no">Tidak, jangan hubungi saya.
8.5 Tombol Radio

Tombol radio digunakan ketika Anda memiliki sejumlah pilihan dan Anda hanya ingin
pengunjung situs Anda memilih salah satu dari pilihan tersebut.
<input type="radio" name="reply" value="yay">
Yup<br>
<input type="radio" name="reply" value="tidak" >Tidak

8.6 Kirim

Tombol kirim memungkinkan pengunjung Anda untuk mengirimkan

masukan mereka ke server. Sintaks yang benar untuk tombol kirim
adalah:
<input type="submit" value="Submit">
Anda dapat menggunakan gambar untuk tombol kirim, atau hanya tombol gambar.
<input type="image" src="image.gif" name="image">

8.7 Tombol Atur Ulang

Jika tombol kirim mengirim semua input ke server, tombol reset memungkinkan
pengguna Anda untuk menghapus formulir atau mengembalikannya ke keadaan
semula.
Sintaks yang benar untuk tombol reset adalah
<input type="reset" value="Reset">

8.8 Menu Dropdown

Menu dropdown memungkinkan Anda untuk memberikan pengunjung Anda sejumlah

opsi untuk dipilih. Menu dropdown dapat berfungsi seperti kotak centang di mana
Anda dapat memilih lebih dari satu opsi. Menu ini juga dapat berfungsi seperti tombol
radio di mana Anda dipaksa untuk memilih hanya satu opsi.

Selain itu, menu tarik-turun cenderung menggunakan lebih sedikit ruang daripada
kotak centang dan tombol radio karena Anda tidak perlu meletakkan semuanya.
Misalnya, dengan radio
tombol dan kotak centang, Anda harus mengalokasikan lima baris untuk lima opsi,
tetapi dengan kotak dropdown Anda hanya perlu mengalokasikan satu baris.

Jadi, jika Anda memiliki sebuah bidang di mana Anda tidak ingin orang melihat
semua pilihan sekaligus, menu dropdown adalah ide yang bagus. Kode umum untuk
kotak dropdown adalah:

<pilih nama = "huruf"

<option value="a">A</option>
<option value="b">B</option>
<option value = "c" yang dipilih>C</option>
<option value="d">D</option>
</select>

Memiliki atribut "dipilih" akan berarti bahwa ketika kotak dropdown pertama kali
ditampilkan pada halaman, itu akan menampilkan opsi "C" sebagai nilai yang dipilih
(dipilih secara default).

Kode HTML ini akan memaksa pengunjung Anda untuk memilih hanya satu opsi. Jika
Anda ingin mengizinkan pengunjung memilih lebih dari satu opsi, Anda cukup
menambahkan atribut multiple ke atribut
<pilih> tag, seperti ini:
<pilih beberapa nama = "huruf"

8.9 Area Teks

Area teks berfungsi seperti bidang teks, hanya saja Anda memiliki lebih banyak ruang
daripada hanya satu baris. Area teks tidak ditentukan oleh tag <input>, tetapi oleh tag
seperti:

<textare>
Masukkan teks
di sini
</textarea
Ini akan menampilkan kotak teks dengan tulisan "Masukkan teks di sini". Anda juga
dapat menentukan jumlah baris dan kolom untuk mengontrol ukuran kotak teks Anda,
misalnya, <textarea rows = "15" cols = "20"
Berikut ini adalah berbagai bidang formulir yang dapat Anda gunakan dalam formulir
HTML.

9. HTML untuk Pemula: CSS

Cascading style sheet atau CSS mengontrol bagaimana tampilan situs Web. Ada
banyak cara untuk menata gaya halaman Web tertentu, tetapi CSS adalah salah satu
yang direkomendasikan oleh World Wide Web Consortium.

Menggunakan CSS dapat membantu Anda memisahkan konten dari gaya. Artinya,
Anda akan menghabiskan lebih sedikit waktu untuk mempertahankan tampilan
keseluruhan situs Anda. Jika Anda perlu mengubah tampilan elemen tertentu, Anda
tidak perlu membuka setiap halaman untuk melakukannya; Anda hanya perlu
mengubah CSS Anda.

9.1 Manfaat Menggunakan CSS

CSS membantu Anda menghemat bandwidth. Lembar gaya Anda di-cache setelah
Anda memuatnya
untuk pertama kalinya. Menempatkan seluruh markup presentasi Anda dalam satu file
CSS dapat secara signifikan membantu memangkas kebutuhan bandwidth Anda.

Karena Anda dapat menghemat bandwidth, halaman Anda dimuat lebih cepat. Hal ini
menguntungkan pengunjung sehingga mereka dapat mengakses informasi yang
mereka butuhkan dengan cepat dan mudah.

Tanpa markup presentasi di halaman Anda, Anda dapat dengan mudah meng-porting
konten yang Anda miliki ke RSS feed dan cara lain yang serupa untuk menggunakan
kembali konten Anda.

Untuk lebih jelasnya, CSS adalah bahasa yang berbeda dengan HTML, tetapi
keduanya saling melengkapi. Namun, dalam banyak kasus, CSS digunakan dengan
XML, HTML, dan XHTML.

9.2 Sejarah Singkat CSS

CSS bukanlah hal yang benar-benar baru. Kumpulan standar pertama untuk CSS
pertama kali direkomendasikan oleh W3C pada tahun 1996. Pada saat itu, sebagian
besar masih sangat sederhana yang memungkinkan Anda untuk mengontrol tipografi
(spasi, margin, daftar, perataan, dan jenis huruf), kotak, garis tepi, dan tidak banyak
lagi.

Pada tahun 1998, CSS2 keluar dengan banyak sekali fitur baru yang diperkenalkan.
Namun, para desainer mengalami beberapa kesulitan dalam mengimplementasikan
CSS2 sehingga harus direvisi. CSS2.1 menjadi standar CSS kedua yang
diimplementasikan oleh browser.

Saat ini, CSS3 sudah diimplementasikan.

9.3 Cara Menggunakan CSS dengan Dokumen HTML Anda

Ada tiga cara berbeda untuk menautkan lembar gaya bertingkat ke dokumen HTML
Anda:

1. Gunakan style sheet eksternal dan rujuk ke dalam dokumen HTML dengan
menggunakan tag <link
elemen atau aturan @import.

Anda dapat menggunakan kode berikut untuk melakukan ini:

<link rel="stylesheet" type="text/css" href="/style.css">

Letakkan kode ini di bagian <head> pada halaman Anda. Selain itu, Anda dapat
menggunakan aturan @import untuk stylesheet Anda:

<style type="text/css">

@import url(/https/id.scribd.com/style.css).

</style>

2. Gunakan lembar gaya sebaris yang diperkenalkan oleh atribut style.

3. Gunakan lembar gaya yang terpisah namun internal, yang diperkenalkan oleh tag
gaya. Ini harus ditempatkan di bagian <head> pada halaman Web Anda. Gunakan
sintaks berikut ini:

<style type="text/css">

(daftar aturan CSS di sini)

</style>

9.4 Apa yang harus Anda ketahui tentang lembar gaya bertingkat?
1. Dapatkan persyaratan yang tepat.

CSS adalah bahasa yang sama sekali berbeda, jadi lebih baik perhatikan istilah-
istilah berbeda yang kemungkinan besar akan Anda temui saat mempelajari CSS. Apa
sajakah itu?

Komentar.

Komentar bukanlah markup. Namun, komentar memberikan informasi tentang CSS

yang membuatnya lebih mudah untuk dikelola. Hal ini sangat membantu ketika dua
atau lebih pengembang mengkodekan file CSS yang sama.
Buat komentar CSS dengan menggunakan sintaksis berikut:

/* Ini adalah contoh komentar. Anda dapat memasukkan apa pun yang Anda inginkan di
sini. */

Atrules.

Atrules, seperti namanya, dimulai dengan tanda @. Biasanya menandakan instruksi

kepada pengurai CSS untuk melakukan berbagai fungsi. Atrules yang umum adalah:

● @charset: menentukan pengkodean karakter dari CSS eksternal

● @import: memungkinkan Anda menggunakan atau mengimpor satu CSS ke
dalam CSS lain
● @media: memungkinkan Anda untuk menetapkan aturan CSS ke jenis media
tertentu
● @page: memungkinkan Anda untuk menunjukkan margin untuk apa pun yang
memiliki halaman di dalamnya
● @fontface: memungkinkan Anda menentukan font yang disesuaikan

Kumpulan aturan.

Kumpulan aturan adalah apa yang Anda gunakan untuk menetapkan markup presentasi
ke tag tertentu. Sebagai contoh:

h1 {warna: #333;}

Kumpulan aturan memiliki pemilih (dalam hal ini, pemilihnya adalah h1) dan blok
deklarasi (warna: #333;).

Pernyataan.
CSS hanyalah sebuah kumpulan pernyataan. Atrules dan kumpulan aturan adalah
contoh pernyataan.

2. Bagaimana browser mengetahui deklarasi apa yang harus digunakan jika

elemen yang sama memiliki dua atau lebih deklarasi yang kontras?

Secara sederhana, browser akan memberikan bobot pada setiap deklarasi elemen.
Untuk melakukan hal ini, dibutuhkan pertimbangan faktor-faktor berikut:

● pentingnya
● asal
● kekhususan
● pesanan sumber

3. Peretasan dan Solusi

CSS sama sekali tidak sempurna. Salah satu masalah terbesar saat menggunakan
CSS adalah beberapa bagiannya mungkin tidak kompatibel dengan browser tertentu.
Bagaimana CSS Anda digunakan untuk menampilkan halaman Web Anda sebagian
besar tergantung pada browser. Ada kalanya halaman ditampilkan dengan tidak
benar, dan ada kalanya CSS diketahui menyebabkan browser menjadi hang.

Ada beberapa solusi untuk hal ini. Pertama, ada peretasan yang memungkinkan Anda
untuk mengeksploitasi fitur-fitur buggy dalam CSS sehingga Anda dapat menentukan
gaya yang berbeda untuk peramban tertentu yang bermasalah.

Yang kedua disebut filter. Filter biasanya menggunakan fitur CSS tingkat lanjut
sehingga jika Anda menggunakan fitur yang lebih baru yang tidak kompatibel dengan
browser yang lebih lama, filter
dapat mengecualikan browser ini.

Apa perbedaan antara peretasan dan filter? Peretasan bekerja di sisi peramban
sehingga halaman Anda tetap dapat dibaca meskipun ada masalah kompatibilitas
dengan CSS Anda, sedangkan filter berorientasi pada CSS.

Ini adalah hal-hal dasar yang harus Anda ketahui tentang CSS.

10. HTML untuk Pemula: Menyatukan Semuanya

Belajar HTML mungkin tampak menakutkan pada awalnya. Hal ini terutama terjadi
jika Anda tidak memiliki pengalaman bekerja dengan HTML sama sekali.

Tetapi bukan berarti Anda harus melupakannya begitu saja. Sebaliknya, Anda harus
terus maju dan mengambil risiko. Cara terbaik untuk belajar HTML adalah dengan
melakukannya.

10.1 Mulailah dengan Membuat Halaman Web Sederhana

Ketika belajar HTML, selalu mulai dengan halaman Web yang sederhana, mudah
dipelajari, dan dasar.

Dalam seri ini, kami telah memberikan Anda daftar hal-hal yang perlu Anda ketahui
untuk memulai, serta mengetahui istilah-istilah (tag, elemen, atribut, dan lain-lain).

Kami juga memberi Anda ikhtisar elemen paling dasar yang akan Anda gunakan saat
membuat halaman Web. Ini termasuk daftar, paragraf, judul, gambar, tabel, dan
formulir.

Tidak hanya itu, Anda juga diberikan sintaks yang tepat untuk masing-masing tag ini,
serta
atribut yang digunakan secara luas untuk masing-masing.

Mulailah dengan halaman Web yang sederhana terlebih dahulu. Pastikan Anda memiliki
tag utama, lalu mulai menambahkan elemen.

Pelajari tag satu per satu. Sebagai contoh, Anda dapat mempelajari <ul> hari ini dan
kemudian beralih ke <ol> besok.

Jika Anda menemui hambatan, cobalah untuk melihat apa yang dilakukan orang lain.
Tag apa yang digunakan orang lain dan bagaimana Anda menulis tag ini?

Selanjutnya, lihat atribut apa saja yang valid untuk tag-tag ini untuk melihat bagaimana
Anda dapat menyesuaikan halaman Web Anda.

Atau, lebih baik lagi, lihat beberapa tutorial online untuk membantu Anda.
10.2 Mengapa HTML Seharusnya Mudah

Hal terbaik tentang HTML adalah mudah dibaca oleh manusia. Anda dapat melihat
kode sumber dokumen HTML dan mengetahui mana yang merupakan paragraf, mana
yang merupakan judul, dan mana yang merupakan sel tabel dan header tabel.

Tag juga sangat mudah diingat. Seringkali, tag HTML mengambil huruf pertama atau
dua huruf pertama dari apa yang seharusnya dilakukan. Sebagai contoh, <p> adalah
untuk paragraf,
<em> untuk penekanan, <th> untuk judul tabel, dan seterusnya.

10.3 Menyederhanakan HTML dan CSS

Anda harus selalu ingat bahwa halaman Web memiliki dua bagian yang sangat
berbeda: konten dan presentasi.
Konten adalah informasi yang Anda taruh di halaman Web Anda. Ini bisa berupa blok
teks atau angka dan statistik yang telah Anda tabulasi dan hitung.

Presentasi, di sisi lain, akan mencakup setiap elemen yang akan menentukan
bagaimana Anda menyajikan konten Anda kepada pembaca. Ini termasuk tata letak,
warna, font, dan bahkan pemformatan yang Anda gunakan untuk setiap elemen di
halaman Web Anda.

HTML menangani bagaimana Anda menyusun konten di situs Anda, sementara CSS
menangani bagaimana Anda menyajikan konten Anda.

Anggap saja seperti menggunakan pengolah kata untuk mengetik dokumen. Pertama-
tama, Anda menulis judul, subjudul, dan paragraf. Anda dapat menggunakan daftar
dan tabel untuk membuat informasi Anda lebih mudah dibaca dan dipahami. Inilah
yang dilakukan oleh HTML.

Setelah mengetik semuanya, Anda dapat mempercantik atau meningkatkan dokumen

Anda dengan memberikan properti yang berbeda pada judul, mengubah warna font
untuk judul, mengubah font paragraf dari Times New Roman ke Verdana. Inilah yang
dilakukan oleh CSS.
10.4 Hal-hal Lain yang Perlu Anda Ketahui Saat Belajar HTML

Selain mempelajari HTML itu sendiri, bersama dengan tag, atribut, dan sintaks yang
tepat, Anda juga harus mengetahui hal-hal berikut ini:

● Anda dapat dengan mudah menulis dokumen HTML selama Anda memiliki
editor teks seperti Notepad. Anda juga dapat menggunakan program seperti Microsoft
Word selama Anda ingat untuk menyimpannya dalam bentuk teks biasa. Selalu
gunakan tipe file .html saat menyimpan.
● Anda dapat memeriksa dokumen HTML Anda menggunakan browser apa pun
yang Anda miliki.
● Bagaimana cara memeriksa kode sumber halaman HTML? Saat mempelajari
HTML, penting bagi Anda untuk mengetahui cara melihat kode sumber halaman Web.
Dengan cara ini, Anda dapat menentukan dan mengikuti bagaimana tag dan atribut
HTML berfungsi. Browser yang berbeda memiliki cara yang berbeda untuk melakukan
hal ini. Di Firefox dan Chrome, Anda dapat mengklik kanan pada halaman yang Anda
ingin melihat kode sumbernya dan pilih Lihat Sumber Halaman pada menu yang
keluar.

10.5 Sumber Belajar

Ada juga beberapa sumber daya yang dapat membantu Anda mempelajari HTML dan
CSS.

Kelas online. Ada berbagai kelas HTML online yang memungkinkan Anda untuk
belajar dengan kecepatan Anda sendiri dan dapat mengajarkan Anda tentang apa
pun yang berhubungan dengan HTML. Ada juga kelas online yang mengirimi Anda
pelajaran harian atau mingguan melalui email.

Tutorial online. Tidak seperti kelas online di mana Anda mendapatkan pelajaran yang
berkelanjutan dan berkesinambungan, tutorial online ada untuk membantu Anda
belajar tentang HTML dengan cepat. Misalnya, jika Anda perlu membuat tabel HTML,
Anda dapat mencari tutorial online yang mengajarkan Anda cara melakukannya.
Buku panduan HTML. Jika Anda ingin belajar HTML bahkan tanpa koneksi Internet,
buku desain Web adalah ide yang bagus. Ada beberapa buku bagus tentang HTML
dan desain Web di luar sana.

Sebagai permulaan, lihatlah HTML for the World Wide Web oleh Elizabeth Castro,
Learning Web Design 4th Edition oleh Jennifer Niederst atau HTML Goodies oleh Joe
Burns. HTML Goodies juga merupakan sumber daya online yang sangat baik untuk
pemula HTML. Anda dapat mengunjungi situs web mereka di sini. Jika dana terbatas,
Anda mungkin bisa meminjam buku desain Web dari perpustakaan lokal.
Belajar dari orang lain.

Jika Anda menemukan situs yang Anda sukai, cobalah untuk memeriksa kode
sumbernya dan lihat tag apa yang mereka gunakan. Anda kemudian dapat meneliti
tag-tag ini dan mempelajari bagaimana tag-tag tersebut digunakan. Latihan akan
menjadi sempurna!