Struktur Halaman HTML
Saya ambil contoh struktur kode HTML5, karna kode terbaru dari HTML. Kodenya sebagai berikut:<!DOCTYPE html>
<html>
<head>
<title>… Judul Website</title>
</head>
<body>
… ISI KONTEN
</body>
</html>- <!DOCTYPE html> adalah type dokumen yaitu HTML. Untuk halaman website versi terbaru diwajibkan mendeklarasikan type dokumen ini.
- Tag <html> ditutup </html> yaitu mendefinisikan atau memberikan maksud dari pada kode tersebut adalah kode HTML. Tag ini wajib ada disetiap halaman HTML atau website.
- Kedua tag <head> ditutup </head> yaitu kode bagian atau elemen atas atau kepala dari pada halaman HTML, yang bisa terdiri dari judul website <title>, tag meta author, deskripsi web, dll <meta>, kode <charset>.
- Ketiga tag <title> </title> yaitu tag yang berfungsi membuat judul website. Yang diletakkan dibagian dalam antara tag <head> dan </head>.
- Keempat tag <body> </body> yaitu bagian atau elemen untuk menampilkan isi/konten dari pada website. Semua isi web berada didalam tag body ini.
Tetapi, tidak semudah itu Anda menguasai PHP atau bahasa pemrograman lainnya, apalagi jika Anda mulai dari 0. Sungguh berat. Untuk menguasai bahasa pemrograman, tidaklah mudah. Butuh teknik khusus agar Anda bisa menguasai bahasa pemrograman.Didalam tag <body> terdapat banyak tag dan elemen yang berfungsi sebagai format teks, seperti dibawah ini:
- <p> berfungsi membuat paragraph baru.
- Heading dari <h1> sampai <h6> berfungsi membuat urutan font size teks, dari <h1> terbesar, sampai <h6> terkecil.
- <b> adalah mencetak tebal suatu teks.
- <i> mencetak miring suatu teks.
- <u> mencetak garis bawah suatu teks.
- <em> membuat penekanan pada teks.
- <small> membuat teks tercetak kecil.
- <strong> membuat teks tercetak penting.
- <sub> membuat teks tercetak sebagai subscript.
- <sup> membuat teks tercetak sebagai superscript/ pangkat.
- <del> membuat teks yang diapit oleh tag <del> akan dicoret seperti dikoreksi.
- <mark> membuat teks yang ditandai (highlighted), efek tulisan diberi “stabilo”.
- <br> adalah ganti baris baru.
- <hr> adalah membuat garis horisontal.
- <form> berfungsi membuat halaman form/formulir.
- <table> berfungsi membuat tabel. Dan masih banyak lagi.
Contoh Program dari HTML
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML Sederhana</title>
</head>
<body>
<h1>Dunia Digital Yang Terus Maju</h1>
<p>Majunya dunia digital yang semakin pesat, dari tahun ke tahun dunia ponsel contohnya selalu bermunculan produk-produk baru, dari produk <b><i>China</i></b>yang sering menguasai pasar-pasar, sampai <b><u>Amerika</u> </b>yang dengan produk nomor wahidnya yaitu ponsel <b>Apple</b> nya, setiap hari selalu bermunculan dengan fitur-fitur yang semakin canggih.</p>
<p>Produk ponsel China yang lagi naik di Negara Indonesia adalah type <strong>XIAOMI,<del> OPPO</del> dan VIVO.</strong></p>
</body>
</html>- Buka Text Editor seperti Notepad++, Sublime Text atau yang lain.
- Salin kode diatas tadi lalu Ketik apa yang anda ingin seperti contoh gambar diatas.
"Untuk penjelasan penulisan sudah di bahas diatas."
- Lalu simpan dengan format “.html” dan beri nama sesuai yang anda inginkan.
- Buka hasil latihan bernama, belajar-html.html dengan browser seperti: Mozila atau Chrome.
- Jika benar akan menghasilkan tampilan dibrowser seperti dibawah ini.
Catatan: Tag-tag HTML tidak case sensitive, jadi tag HTML bisa digunakan dengan teks Kapital <HTML> atau kecil <html>.Keduanya menghasilkan output yang sama. Tetapi didalam etika berprogram, konsistensi kode adalah sangat penting, terutama untuk memberikan kejelasan terhadap kode program tersebut.
Sampai disini pembahasan tentang Struktur Halaman dan Contoh Program HTML, semoga bermanfaat. Bila ada yang mau ditanyakan jangan sungkan-sungkan untuk berkomentar dibawah.
Terimakasih.