Memulai HTML
File HTML hanyalah file teks yang disimpan dengan ekstensi .html atau .htm.
Memulai
Dalam tutorial ini Kalian akan belajar betapa mudahnya membuat dokumen HTML atau halaman web. Untuk memulai coding HTML, Kalian hanya memerlukan dua hal: editor teks sederhana dan browser web.
Baiklah, mari kita mulai membuat halaman HTML pertama Kalian.
Membuat Dokumen HTML Pertama Kalian
Mari kita lakukan melalui langkah-langkah berikut. Di akhir tutorial ini, Kalian akan membuat file HTML yang menampilkan pesan "Hello world" di browser web Kalian.
Langkah 1: Membuat file HTML
Buka editor teks biasa komputer Kalian dan buat file baru.
TIP
Kami menyarankan Kalian untuk menggunakan Notepad (di Windows), TextEdit (di Mac) atau editor teks sederhana lainnya untuk melakukan ini; jangan gunakan Word atau WordPad! Setelah Kalian memahami prinsip-prinsip dasar, Kalian dapat beralih ke alat yang lebih canggih seperti Adobe Dreamweaver.
Langkah 2: Ketik beberapa kode HTML
Mulailah dengan file kosong dan ketik kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Judul Halaman HTML</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
2
3
4
5
6
7
8
9
Langkah 3: Menyimpan file
Sekarang simpan file di desktop Kalian sebagai "coba.html".
CATATAN
Penting bahwa ekstensi .html ditentukan — beberapa editor teks, seperti Notepad, akan secara otomatis menyimpannya sebagai .txt jika tidak.
Untuk membuka file di browser. Arahkan ke file Kalian lalu klik dua kali di atasnya. Ini akan terbuka di browser Web default Kalian. Jika tidak, buka browser Kalian dan seret file ke sana.
Penjelasan kode
Kalian mungkin berpikir untuk apa kode itu. Nah, mari kita cari tahu.
- Baris pertama
<!DOCTYPE html>adalah deklarasi tipe dokumen. Ini menginstruksikan browser web bahwa dokumen ini adalah dokumen HTML5. Ini tidak peka huruf besar-kecil. - Elemen
<head>adalah wadah untuk tag yang menyediakan informasi tentang dokumen, misalnya tag<title>mendefinisikan judul dokumen. - Elemen
<body>berisi konten dokumen yang sebenarnya (paragraf, tautan, gambar, tabel, dan sebagainya) yang dirender di browser web dan ditampilkan kepada pengguna.
Kalian akan belajar tentang elemen HTML yang berbeda secara rinci dalam bab-bab mendatang. Untuk saat ini, fokus saja pada struktur dasar dokumen HTML.
CATATAN
Deklarasi DOCTYPE muncul di bagian atas halaman web sebelum semua elemen lainnya; namun deklarasi doctype itu sendiri bukanlah tag HTML. Setiap dokumen HTML memerlukan deklarasi jenis dokumen untuk memastikan bahwa halaman Kalian ditampilkan dengan benar.
TIP
Tag <html>, <head>, dan <body> membentuk kerangka dasar setiap halaman web. Konten di dalam <head> dan </head> tidak terlihat oleh pengguna dengan satu pengecualian: teks di antara tag <title> dan </title> yang muncul sebagai judul pada tab browser.
Tag dan Elemen HTML
HTML ditulis dalam bentuk elemen HTML yang terdiri dari tag markup. Tag markup ini adalah karakteristik mendasar dari HTML. Setiap tag markup terdiri dari kata kunci, dikelilingi oleh kurung sudut, seperti <html>, <head>, <body>, <title>, <p>, dan seterusnya.
Tag HTML biasanya berpasangan seperti <html> dan </html>. Tag pertama yang berpasangan sering disebut tag pembuka (atau tag awal), dan tag kedua disebut tag penutup (atau tag akhir).
Tag pembuka dan tag penutup adalah identik, kecuali sebuah garis miring (/) setelah kurung sudut pembuka dari tag penutup, untuk memberitahu browser bahwa perintah telah selesai.
Di antara tag awal dan akhir Kalian dapat menempatkan konten yang sesuai. Misalnya, sebuah paragraf, yang diwakili oleh elemen p, akan ditulis sebagai:
<p>Ini Paragraf.</p>
<!-- Paragraf dengan elemen bersarang -->
<p>Ini <b>paragraf</b> lain.</p>
2
3
menjadi seperti ini.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Judul Halaman HTML</title>
</head>
<body>
<p>Hello World!</p>
<p>Ini Paragraf.</p>
<!-- Paragraf dengan elemen bersarang -->
<p>Ini <b>paragraf</b> lain.</p>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
Kalian akan belajar tentang berbagai elemen HTML di bab mendatang.