Penulisan Elemen HTML


Dalam artikel ini akan menjelaskan tentang struktur elemen HTML serta bagaimana cara penulisan kode HTML. Sebelum kita memulai menulis code HTML kita harus mempelajari dulu tentang baris code HTML seperti yang telah dijelaskan pada artikel sebelumnya.

Anatomi sebuah elemen HTML :

Anatomi Elemen HTML

Bagian utama dari elemen di atas adalah :

– Tag pembuka: Terdiri dari nama elemen (di atas menggunakan: p), dibungkus dalam kurung buka dan tutup sudut. Ini menyatakan dimana elemen tersebut mulai berlaku dalam tag tersebut sebagai awal paragraph (karena menggunakan tag p).
– Tag penutup: Ini sama saja dengan tag pembuka, kecuali ada tambahan tag lain di dalamnya seperti cetak miring, huruf tebal, dll. Ini menyatakan dimana elemen berakhir (akhir paragraph). Gagal atau lupa menulis / menyertakan tag penutup adalah kesalahan umum bagi pemula, ketika tidak menyertakan tag penutup mungkin hasilnya akan terlihat aneh.
– Konten: Ini adalah isi dari konten elemen, yang dalam hal ini hanyalah sebuah teks.
– Elemen: Tag pembuka ditambah tag penutup serta konten di dalamnya.

Membuat Dokumen HTML

Halaman web dapat dibuat dan dimodifikasi dengan menggunakan software text editor professional seperti : Notepad++, Sublime Text, Visual Studio Code, dan masih banyak lagi. Namun kamu dapat mencoba membuat halaman web hanya dengan text editor bawaan sistem operasi seperti Notepad (Windows) atau TextEdit (MAC). Sebenarnya menggunakan text editor sederhana (bawaan os) maupun text editor professional untuk pemula yang baru belajar HTML, saya menyarankan menggunakan text editor professional atau software tambahan seperti Visual Studio Code. Karena sudah banyak terdapat definisi atau tooltip untuk setiap tag / baris code yang memudahkan kamu untuk mengatasinya bila terjadi error atau kesalahan penulisan. Oke selanjutnya tuliskan kode berikut ke text editor kalian :

<!DOCTYPE html>
<html>
<head>
    <title>Halaman pertama saya</title>
</head>
<body>
    <h1>Ini heading</h1>
    <p>Ini paragraf</p>
</body>
</html>

Lalu simpan  di desktop dengan nama “index.html“. Ekstensi file bisa .htm maupun .html, keduanya sama tidak ada perbedaan. Lalu kalian buka file “index.html” tersebut, maka tampilannya akan seperti ini :

Output Penulisan HTML

Atau kalian bisa mencoba code di atas melalui MACode-Lab (Kode editor online). Kalian bisa mencoba membuat halaman HTML dan menampilkan hasil keluarannya (output) secara realtime.

Catatan :