HTML dasar

hyperlink

HTML (Hypertext Markup Language) adalah kode yang digunakan untuk mengatur tata letak tampilan halaman web dan isinya. Contohnya, konten dapat disusun dalam bentuk sebuah paragraf, penomoran berbentuk titik, atau menampilkan gambar dan tabel. Seperti judulnya, artikel ini akan memberi kamu pemahaman mendasar tentang HTML dan fungsinya.

Jadi sebenarnya apa itu HTML?

HTML bukan sebuah bahasa pemrograman; HTML adalah bahasa markup yang mendefinisikan struktur konten kamu. HTML terdiri atas serangkaian elements, yang dapat kamu gunakan untuk menyisipkan atau membungkus konten di dalamnya sehingga mempunyai tampilan tertentu sesuai fungsi elemennya. tags penyisip dapat membuat sebuah kata atau gambar hyperlink ke konten lainnya, memiringkan tulisan, memperbesar atau memperkecil font, dan lain-lain. Lihat contoh konten dibawah ini:

My cat is very grumpy

Kalau kita ingin baris ini berdiri sendiri, kita bisa bilang bahwa ini adalah satu paragraf dengan menaruhnya di antara tag paragraf:

<p>My cat is very grumpy</p>

Anatomi elemen HTML

Mari kita jelajahi elemen paragraf ini lebih jauh.

Bagian utama dari elemen kita adalah:

  1. Tag pembuka: Terdiri dari nama elemen (contoh di sini menggunakan p), yang ada di antara kurung sudut pembuka dan penutup. Ini menandakan awal elemen atau di mana elemen mulai bekerja — dalam hal ini dimana paragraf dimulai.
  2. Tag penutup: Mirip dengan tag pembuka, bedanya di tag penutup ada garis miring di depan nama elemen. Ini meandakan di mana akhir elemen — dalam hal ini di mana paragraf berakhir. Kebiasaan lupa menulis tag penutup meruapakan suatu kesalahan yang biasa dilakukan pemula yang bisa menyebabkan hasil menjadi ngawur.
  3. Konten: Konten elemen yang dalam hal ini hanya teks.
  4. Elemen: Tag pembuka dan tag penutup serta konten.

Elemen juga boleh memiliki atribut, yang terlihat seperti berikut:

Atribut mengandung informasi ekstra tentang elemen. Atribut tidak tampil di konten aktual. Disini, class adalah nama atribut, dan editor-note adalah nilainya. Atribut class berfungsi memberikan penanda (identifier) pada elemen yang nantinya bisa kamu gunakan untuk diberikan informasi gaya dan lain-lain.

Sebuah atribut harus mempunyai:

  1. Jarak antara atribut dan nama elemen (atau atribut sebelumnya, kalau elemen sudah mempunyai atribut).
  2. Nama atribut, diikuti tanda sama dengan.
  3. Petik pembuka dan penutup diantara nilai atribut.        

Elemen Bersarang

Kamu bisa menempatkan satu elemen ke dalam elemen lain — istilah ini disebut nesting (persarangan). Kalau kita ingin buat penekanan bahwa kucing kita "very grumpy", kita bisa membungkus kata "very" ke dalam elemen <strong> untuk penekanan.

<p>My cat is <strong>very</strong> grumpy.</p>

Tapi kamu harus yakin bahwa elemen kamu benar-benar bersarang: contoh di atas kita buka elemen <p> dulu, lalu elemen <strong>, lalu kita tutup elemen <strong>, lalu elemen <p>. Contoh berikut ini tidak benar:

<p>My cat is <strong>very grumpy.</p></strong>

Elemen harus terbuka dan tertutup dengan benar sehingga mereka jelas berada di mana dari elemen lain. Kalau mereka tumpang-tindih seperti di atas, maka web browser kamu akan membuat tebakan terbaiknya pada apa yang ingin kamu utarakan, yang menyebabkan hasil ngawur. Jadi jangan begitu!

Elemen kosong

Beberapa elemen tidak punya konten, dan disebut elemen kosong. Ambil elemen <img> yang sudah kita punya di HTML kita:

<img src="images/firefox-icon.png" alt="My test image">

Elemen ini mengandung 2 attribut, tapi tidak punya tag </img>, dan tidak punya konten. Ini karena elemen image tidak membungkus konten apapun. Tujuannya adalah mengembed image ke dalam halaman HTML di tempat di berada.

Anatomi dari dokumen HTML

Sekarang kita akan lihat bagaimana elemen individu digabung membentuk satu halaman HTML utuh. Ayo kunjungi lagi kode di mana kita menaruh contoh index.html kita (yang kita temui dalam artikel Dealing with files):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

Di sini kita punya:

  • <!DOCTYPE html> — doctype. Zaman dulu, ketika HTML masih muda (sekitar 1991/2), doctypes berfungsi sebagai penghubung ke satu set aturan yang wajib diikuti halaman HTML supaya disebut halaman HTML yang baik, yang berarti error checking otomatis dan hal berfaedah lainnya. Tapi sekarang ini mereka sudah tidak terlau berguna dan hanya berfungsi sebagai penanda bahwa dokumen kamu bekerja dengan baik.
  • <html></html> — elemen <html>. Membungkus semua konten pada satu halaman utuh dan kadang disebut sebagai elemen root.
  • <head></head> — elemen <head>. Berguna sebagai wadah bagi semua hal yang kamu inginkan ke dalam halaman HTML yang bukan konten yang ditampilkan ke pengguna. Ini termasuk hal-hal semacam keywords dan deskripsi halaman yang akan kamu tampilkan dalam hasil pencarian, CSS untuk menggayakan konten kamu, deklarasi karakter set, dan lain sebagainya.
  • <meta charset="utf-8"> — elemen ini mengeset karakter set. Dokumen kamu sebaiknya mengguakan UTF-8 karena berisi karakter paling banyak dari seluruh bahasa di dunia. Prinsipnya dia bisa mengatasi konten tekstual apa saja di dalamnya. Tidak ada alasan untuk tidak menggunakan ini, dan dia bisa mencegah masalah lain yang timbul kemudian.
  • <title></title> — elemen <title>. Mengeset judul halaman kamu, yang tampil di browser tab di mana halaman ini diload. Juga digunakan untuk mendeskripsikan halaman ketika kamu membookmark/memfavoritkan halaman.
  • <body></body> — elemen <body>. Mengandung semua konten yang ingin kamu tunjukkan ke user, berupa teks, image, video, games, audio track, atau apapunlah.

Image

Coba lihat elemen <img> ini lagi:

<img src="images/firefox-icon.png" alt="My test image">

Seperti dikatakan sebelumnya, dia mengembed image ke dalam halaman sesuai posisinya via artibut src, yang berisi path ke file image kita.

Kita juga telah memasukkan artibut alt (alternative). Dalam atribut ini, kamu menentukan teks deskriptif bagi user yang tidak bisa melihat image, yang mungkin karena:

  1. User tunanetra. Mereka sering menggunakan tools pembaca screen untuk membaca semua semua alt text.
  2. Sesuatu terjadi yang mengakibatkan image tidak tampil. Contohnya, coba sengaja ganti path di dalam atribut src menjadi salah. Kalau kamu simpan dan reload halaman, kamu akan melihat sesuatu seperti ini:

Kata kunci ini mengandung semua "teks deskriptif". Teks alternatif yang kamu tulis sebaiknya menyediakan cukup informasi kepada pembaca tentang image tersebut. Di contoh ini, teks kita "My test image" tidak bagus. Alternatif lain yang jauh lebih baik untuk logo Firefox kita adalah "The Firefox logo: a flaming fox surrounding the Earth."

Coba gunakan teks alternatif yang lebih baik untuk image kamu.

Catatan: Cari tahu lebih tentang aksesbilitas di Aksesbilitas landing page MDN.

Menandai teks

Bagian ini mengkover elemen HTML penting yang kamu gunakan untuk menandai teks.

Headings

Elemen heading berfungsi menentukan bahwa bagian tertentu konten kamu berupa heading — atau subheading — dari konten kamu. Sama seperti buku yang punya judul utama, judul bab, dan subjudul, dokumen HTML juga begitu. HTML berisi 6 heading level, <h1><h6> meskipun kamu hanya menggunakan paling banyak 3–4:

<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>

Sekarang coba tambahkan judul yang pas ke halaman HTML di atas elemen <img> kamu.

Paragraf

Seperti dijelaskan sebelumnya, elemen <p> berguna untuk wadah paragraf teks; kamu akan sering menggunakan ini ketika menandai konten teks reguler:

<p>This is a single paragraph</p>

Tambahkan sampel teks kamu (kamu pasti sudah punya dari What should your website look like?) ke dalam satu atau lebih paragraf, taruh langsung di bawah elemen <img> kamu.

List

Kebanyakan konten web adalah lists, dan HTML punya special elemen untuk ini. Penandaan list selalu mengandung paling sedikit 2 elemen. Tipe list paling umum adalah terurut and tak-terurut:

  1. List tak-terurut ialah list yang urutan itemnya tidak penting, seperti daftar belanja. Ini dibungkus dalam elemen <ul>.
  2. List terurut ialah list yang urutan itemnya penting, seperti resep. Ini dibungkus dalam elemen <ol>.

Tiap item dalam list ditaruh di dalam elemen <li> (item list).

Contohnya, kalau kita ingin mengubah bagian dari fragmen paragraf berikut menjadi list:

<p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p>

Kita bisa memodifikasi markup ini menjadi:

<p>At Mozilla, we’re a global community of</p>
    
<ul> 
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>

<p>working together ... </p>

Coba tambahkan suatu list terurut atau tak-terurut ke halaman contoh kamu.

Link sangat penting — mereka yang membuat web terlihat seperti web! Untuk menambahkan link, kita harus menggunakan elemen sederhana — <a> — "a" singkatan dari "anchor". Untuk membuat teks menjadi link di paragraf kamu, ikuti langkah ini:

  1. Pilih teks berikut. Kita pilih teks "Mozilla Manifesto".
  2. Bungkus teks ke dalam elemen <a>, seperti ini:
    <a>Mozilla Manifesto</a>
  3. Berikan elemen <a> atribut href, seperti ini:
    <a href="">Mozilla Manifesto</a>
  4. Isi nilai atribut ini dengan alamat web yang ingin kamu link:
    <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>

Kamu mungkin memperoleh hasil tak terduga jika kamu buang bagian https:// atau http://, disebut protocol, di awal alamat web. Setelah membuat link, klik untuk meyakinkan itu bekerja sebagaimana mestinya.

href mungkin terlihat seperti pilihan yang abu-abu untuk nama atribut. Selalu ingat bahwa dia singkatan dari hypertext reference.

Tambahkan link ke halaman kamu sekarang kalau belum.

Kesimpulan

Jika kamu ikuti semua instruksi di artikel ini, kamu akan melihat halaman seperti berikut (kamu juga bisa melihat itu di sini):

A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text

Kalau kamu buntu, kamu bisa bandingkan kerjaanmu dengan contoh code yang sudah selesai punya kita di GitHub.

Di sini, kita telah menyentuh hanya lapisan luar HTML. Untuk lebih lanjut, pergi ke HTML Learning topic kita.

 

Dalam modul ini