Struktur Halaman dan Contoh Program HTML

Struktur Halaman dan Contoh Program HTML

Struktur Halaman dan Contoh Program HTML
Struktur dan Program HTML - Hi Guys! Anda pasti sudah apa itu HTML. Bila belum tau, Saya sarankan baca Apa itu HTML? Saya akan  menjelaskan tentang struktur halaman dan contoh program HTML. Langsung saja ke pembahasannya.

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>
Maksud dari  struktur kode 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.
Mudah kan? Iya, belajar HTML memang mudah. Tetapi jika Anda ingin membuat website yang besar, yang menarik banyak orang, HTML saja tidak cukup. Anda harus menguasai bahasa pemrograman lainnya seperti PHP.
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

tutorial program HTML
Contoh penulisannya saya mengambil yang sederhana saja, karna kalau sudah tingkat atas nanti ribet dan takut susah dipahami oleh anda. Ini contohnya, seperti berikut:
<!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>
Cara menuliskan atau membuat kode 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.
Hasilnya:
hasil program HTML
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.

Anda mungkin menyukai postingan ini