Ditulis oleh
HTML singkatan dari Hyper Text Markup Language adalah bahasa standar pemrograman untuk membuat halaman web. Adapun struktur html dalam pembuatan halaman web dibentuk oleh elemen-elemen html, dimana setiap elemen html dibentuk oleh tag pembuka dan tag penutup yang punya nama tag dan fungsinya tersendiri, misalnya elemen paragraf <p>Paragraf</p> dengan p adalah nama tag, tag dibentuk oleh tanda < dan tanda >, <p> disebut tag pembuka dan </p> disebut tag penutup, fungsinya untuk membentuk paragraf.
Contoh struktur html adalah sebagai berikut:
Contoh struktur html adalah sebagai berikut:
<html>
<head>
<title>Judul Artikel</title>
</head>
<body>
<h1>Judul Artikel</h1>
<p>Isi Artikel</p>
</body>
</html>
Untuk menuliskan kode html membutuhkan text editor misalnya notepad atau notepad++, selanjutnya file disimpan dengan akhiran .html misalnya latihan.hml. Kalau sudah disimpan, cobalah untuk mengetesnya dengan mengakses file latihan.html tersebut di web browser.
Berikut ini beberapa elemen penting yang sering digunakan untuk membuat halaman web, diantaranya:
- <!DOCTYPE html>, merupakan deklarator yang menyatakan dokumen html5.
- <html>..</html>, merupakan elemen inti dalam pembuatah halaman web, seluruh elemen harus berada dalam elemen html ini.
- <head>…</head>, merupakan elemen yang menyimpan informasi meta dan tidak ditampilkan di browser.
- <title>…</title>, merupakan elemen untuk memberikan judul terhadap dokumen html ditempatkan diantara elemen <head>…</head>
- <body>..</body>, merupakan elemen tempat dimana elemen-elemen yang membentuk isi halaman web untuk ditampilkan di browser. Jadi, di dalam tag body inilah konten yang ingin ditampikan misalnya artikel, gambar, video, dll. tempatkan semuanya di sini.
- <hx>…</hx>, merupakan elemen untuk membuat judul artikel dengan x diisi dengan angka dari 1-6 yang akan menentukan ukuran judulnya. Misalnya h1, h2, h3, h4, h5 dan h6.
- <p>…</p>, merupakan elemen yang membentuk paragraf.
- <br>, merupakan tag untuk membuat pindah baris.
- <pre>…</pre>, merupakan elemen pre-formatted yang akan menampikan data apa adanya.
- <hr>, merupakan tag untuk membuat garis horizontal.
- <b>…</b> atau <strong>…</strong>, merupakan elemen untuk mempertebal atau memberikan penekanan. Contoh <b>bold</b> hasil: bold.
- <i>…</i> atau <em>…</em>, merupakan elemen untuk memiringkan isi elemen. Contoh <em>italic</em> hasil: italic.
- <u>…</u> atau <ins>…</ins>, merupakan elemen untuk memberi garis bawah pada isi elemen. Contoh <ins>underline</ins> hasil: underline.
- <del>…</del>, merupakan elemen untuk memberikan coretan pada isi elemen. Contoh <del>Delete</del> hasil : Delete.
- <small>…</small>, merupakan elemen untuk membuat isi elemen menjadi lebih kecil. Contoh Normal <small>Small</small> Normal hasil: Normal Small Normal
- <mark>…</mark>, merupakan elemen untuk memberi highlight atau backgroud pada isi elemen. Contoh <mark>Hasil Mark</mark> hasil: Hasil Mark.
- <sub>…</sub>, merupakan elemen untuk membuat isi elemen berada di bawah lainnya. Contoh O<sub>2</sub> hasil: O2.
- <sup>…</sup>, merupakan elemen untuk membuat isi elemen berada di atas lainnya. Contoh X<sup>2</sup> hasil: X2.
- <q>…</q>, merupakan elemen untuk memberikan quote pendek. Contoh <q>Ini quote pendek</q> hasil : Ini quote pendek.
- <blockquote>…</blockquote>, merupakan elemen untuk membuat blockquote berupa isi elemen menjorok ke dalam dari lainnya.
- <abbr>…<abbr>, merupakan elemen untuk memberikan abbreviation atau acronym. Contoh The <abbr title=”World Health Organization”>WHO</abbr> hasil: The WHO. Silahkan coba arahkan kursor ke kata WHO.
- <address>…</address>, merupakan elemen untuk memformat informasi alamat dalam dokumen tersebut.
- <a href=”…url..”>…</a>, merupakan elemen untuk membuat link/hyperlink.
- <img src=”..url source..”>, merupakan tag untuk menampilkan gambar dalam halaman web
Terkadang diperlukan untuk memberikan komentar kedalam baris sintak yang ditulis tapi tidak akan diterjemahkan oleh browser sehingga tidak akan tampil saat halaman web diakses. Untuk memberikan komentar gunakan seperti contoh berikut ini: <!– This is a comment –>
Posting Komentar