Dasar HTML

HTML, CSS, JavaScript, Tiga Serangkai Perakit Front End Website), HTML (Hypertext Markup Language) bukan sebuah bahasa pemrograman. Hanya sebuah bahasa markah. Karana bukan sebuah bahasa pemrograman, html tidak akan bisa memproses sesuatu dan mengembalikan hasil. HTML hanya sekumpulan kode-kode yang mendiskripsikan blok-blok, informasi-informasi, dan menyusun kerangka dari halaman. Oh iya, artikel ini adalah bagian dari seri Pelatihan Pengembangan Web yang saya tulis ketika ada waktu luang, untuk sekedar berbagi dan mengisi blog ini. Sebelim kita memasuki intinya, mari kita kenali HTML terlebih dahulu. HTML dibuat pertama kali pada 1989/1990. Tujuan awal dari html ini adalah untuk penulisan naskah ilmiah dan dokumen teknis agar lebih mudah dimengerti. Bagaimana maksudnya? Bayangkan kalian sedang menulis sebuah laporan penelitian di komputer, dan hanya menggunakan teks biasa, tak ada bold, tak ada italic,tak ada underscore, tak ada judul, dll. Akan sulit bagi penerima untuk memahami isi dari laporan tersebut. semua kata terlihat sama. Maka munculah HTML. Sebuah format penulisan yang akan memberikan style-style kepada teks sehingga tampil menjadi seperti diinginkan. Dengan adanya format penulisan ini, berkirim naskah ilmiah atau dokumen teknis menjadi dapat dilakukan melalui internet. Jadi bagaimana penulisan HTML sehingga dapat memudahkan membedakan bagian-bagian dari tulisan tersebut? Caranya cukup mudah, cukup masukan teks yang ingin di masukan kedalam bagian itu didalam sebuah tag. Tag dalam HTML adalah seperti dibawah ini.

<namaTag>Ini tulisan yang ditampilkan</namaTag>
Sebuah tag HTML memiliki pembuka dan penutup. Dalam contoh diatas, pembukanya adalah <namaTag> dan penutupnya </namaTag>. Penggunaannya dalam keadaan aslinya seperti contoh di bawah ini. Dalam contoh ini, ada sebuah dokumen yang harus menggunakan format yang telah disediakan. Ada judul, sub judul dan keterangan didalam subjudulnya. Versi tanpa pemformatannya  di bawah ini,
Hal yang Diperlukan dalam Mengakses Internet
Koneksi internet
Ya koneksi internet sangat dibutuhkan untuk mengakses internet
Sebuah Komputer/Smartphone
Ada internet tapi tanpa komputer? bagaimana mengaksesnya
Jika ditampilkan begitu saja hasilnya dalah seperti dibawah ini,
Hal yang Diperlukan dalam Mengakses Internet Koneksi internet Ya koneksi internet sangat dibutuhkan untuk mengakses internet Sebuah Komputer/Smartphone Ada internet tapi tanpa komputer? bagaimana mengaksesnya
Bingung bukan? mana judulnya, mana subjudulnya, mana keterangannya. Dengan HTML kebingungan ini dapat diperjelas.
<h1>Hal yang Diperlukan dalam Mengakses Internet<h1>
<h2>Koneksi internet</h2>
<p>Ya koneksi internet sangat dibutuhkan untuk mengakses internet</p>
<h2>Sebuah Komputer/Smartphone</h2>
<p>Ada internet tapi tanpa komputer? bagaimana mengaksesnya</p>
Yang apabila ditamilkan, hasilnya adalah seperti di bawah ini

Hal yang Diperlukan dalam Mengakses Internet

Koneksi internet

Ya koneksi internet sangat dibutuhkan untuk mengakses internet

Sebuah Komputer/Smartphone

Ada internet tapi tanpa komputer? bagaimana mengaksesnya
Pada tahap ini, kalian tidak perlu paham dengan apa yang tag itu lakukan. Kalian hanya perlu mengerti cara memakai HTML, yaitu cukup masukan suatu bagian ke dalam tag HTML. Pada penggunaan di praktiknya. HTML memiliki sebuah boilerplate standar, sebuah kerangka dasar dari halaman. Yaitu seperti dibawah ini.
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
</body>
</html>
Di awal ada <!DOCTYPE html>, yaitu memberikan informasi bahwa ini adalah HTML. kemudian ada tag pembuka <html>, artinya halaman HTML dimulai. Kemudian didalam tag <html> ada tag <head> yang nantinya berisi informasi-informasi halaman yang tidak ditampilkan di halaman seperti judul dan meta tag lainnya. Contoh dari informasi ini adalah judul halaman. Judul halaman ditulis didalam tag <title>. Jadi misalkan kamu akan memberi judul halamannya “Halo Dunia”, maka didalam tag <head>, isi dengan <title>Halo Dunia</title>. Setelah tag <head>, ada tag <body>. Semua al yang ingin ditampilkan di halaman, ditulis didalam tag <body> ini. Dalam membuat sesuatu, mungkin kita ingin menandai/ memberi catatan pada kode-kode tertentu, namun tidak ingin catatan itu terlihat ketika ditampilkan. Caranya adalah dengan menggunakan komentar. Contoh menulis komentar ada dibawah ini,
<!-- Komentar seperti ini tidak akan tampil di web -->
Jika kita gunakan contoh yang tadi, dan memasukannya kedalam boilerplate dan menambahkan komentar agar menjadi halaman HTML yang valid, maka hasilnya adalah seperti dibawah ini.
<!DOCTYPE html>
<html>
<head>
  <!-- ini menampilkan judul halaman -->
  <title>Halo Dunia</title>
</head>
<body>
  <!-- ini judul utamanya -->
  <h1>Hal yang Diperlukan dalam Mengakses Internet<h1>
  <!-- ini sub judul -->
  <h2>Koneksi internet</h2>
  <!-- ini keterangan -->
  <p>Ya koneksi internet sangat dibutuhkan untuk mengakses internet</p>
  <h2>Sebuah Komputer/Smartphone</h2>
  <p>Ada internet tapi tanpa komputer? bagaimana mengaksesnya</p>
</body>
</html>
Ketika halaman dibuka, hasilnya akan terlihat seperti dibawah ini. ]]>

About: totop275


2 thoughts on “Dasar HTML”

Leave a Reply

Your email address will not be published. Required fields are marked *