File HTML hanyalah file teks yang disimpan dengan ekstensi .html atau .htm.
Dalam tutorial ini kalian akan belajar betapa mudahnya membuat dokumen HTML atau halaman web. Untuk mulai coding HTML, kalian hanya perlu dua hal yaitu editor teks sederhana dan browser web.
Baiklah, mari kita mulai dengan membuat halaman HTML pertama kalian.
Membuat Dokumen HTML Pertama
Mari kita ikuti langkah-langkahnya. Di akhir tutorial ini, kalian akan membuat file HTML yang menampilkan pesan “Hello world” pada browser web kalian.
Langkah 1: Membuat file HTML
Buka editor teks di komputer kalian dan buat file baru.
Tips: 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 dasarnya, kalian dapat beralih ke program yang lebih canggih seperti Adobe Dreamweaver.
Langkah 2: Ketikkan beberapa kode HTML
Mulai dengan window baru dan ketikkan kode berikut :
<!DOCTYPE html>
<html>
<head>
<title>A simple HTML document</title>
</head>
<body>
<p>Hello World!<p>
</body>
</html>
Langkah 3: Menyimpan file
Sekarang simpan file di desktop kalian dengan nama “myfirstpage.html”.
Catatan: Penting untuk menyimpannya menggunakan ekstensi .html – karena jika tidak beberapa teks editor, seperti Notepad, akan secara otomatis menyimpannya sebagai .txt.
Untuk membuka file di browser. Arahkan ke file kalian lalu klik dua kali maka akan otomatis terbuka di browser Web default kalian. Jika tidak, buka browser kalian dan drag file nya.
Penjelasan Kode
Kalian mungkin berpikir tentang apa kode tersebut. Baiklah, mari kita cari tahu.
- Baris pertama <! DOCTYPE html> adalah deklarasi tipe dokumen. Ini menginstruksikan browser web bahwa dokumen ini adalah dokumen HTML5. Tidak masalah tulisannya besar/kecil.
- Elemen <head> adalah wadah untuk tag yang memberikan informasi tentang dokumen, misalnya, tag <title> dimana tag ini untuk judul dokumen.
- Elemen <body> berisi konten aktual dokumen (paragraf, tautan, gambar, tabel, dan sebagainya) yang dirender di browser web dan ditampilkan kepada pengguna.
Kalian akan belajar tentang berbagai elemen HTML secara rinci di bab-bab selanjutnya. Untuk saat ini, kita fokus pada struktur dasar dokumen HTML.
Catatan: Deklarasi DOCTYPE muncul di bagian atas halaman web sebelum elemen-elemen lainnya; namun deklarasi DOCTYPE itu sendiri bukan merupakan tag HTML. Setiap dokumen HTML memerlukan deklarasi DOCTYPE untuk memastikan bahwa halaman kalian akan ditampilkan dengan benar.
Tips: Tag <html>, <head>, dan <body> membentuk kerangka dasar setiap halaman web. Konten di dalam tag <head> dan </head> tidak akan terlihat oleh pengguna dengan satu pengecualian: teks di tulis di antara tag <title> dan </title> yang muncul sebagai judul pada tab browser.
Tag HTML dan Elemen
HTML ditulis dalam bentuk elemen HTML yang terdiri dari tag markup. Tag markup ini adalah karakteristik dasar dari HTML. Setiap tag markup terdiri dari kata kunci, diawali dan ditutup oleh tanda kurung sudut, seperti , , , , <p>, dan sebagainya.
Tag HTML biasanya berpasangan seperti <html> dan </html>. Tag pertama sering disebut tag pembuka <html>, dan tag kedua disebut tag penutup </html>.
Tag pembuka dan tag penutup identik, kecuali slash (/) setelah sudut pembuka tag penutup, untuk memberi tahu browser bahwa perintah telah selesai.
Di antara tag awal dan akhir kalian dapat menempatkan konten yang sesuai. Misalnya, paragraf, yang diwakili oleh elemen p, akan ditulis :
<p>This is a paragraph.</p>
<!-- Paragraph with nested element -->
<p>
This is <b>another</b> paragraph.
</p>
Kalian akan mempelajari berbagai macam variasi elemen HTML pada bab selanjutnya.