Hypertext Markup Language (HTML)

selamat membaca
kelas 9J

HTML Dasar
berkenalan dengan dunia web kita akn mengenal yg namanya html (bahasa pemprogam)

HTML merupakan bahasa penanda yang digunakan untuk memberikan konten (teks) struktur dan makna semantik.

Contoh sederhananya, sebuah paragraf teks direpresentasikan dengan penanda {p} pada HTML. Memberikan penanda {p} pada konten dalam HTML berarti menandakan konten tersebut berada di dalam sebuah paragraf. CSS kemudian digunakan untuk menentukan ukuran teks, warna teks, spasi, dan berbagai gaya tampilan dari paragraf tersebut.
konsep dasar HTML membuat dokumen HTML :

Elemen, Tag, dan Atribut

Sebelum masuk lebih jauh, kita akan melihat tiga istilah utama yang harus diketahui ketika menulis HTML. Ketiga istilah tersebut ialah elemen, tag, dan atribut.

Elemen

Elemen HTML merupakan komponen yang menetapkan peran sebuah objek dalam dokumen, termasuk struktur dan konten dari objek tersebut. Contoh dari sebuah elemen HTML ialah p ataupun b yang telah dicontohkan pada bagian-bagian sebelumnya. Elemen-elemen populer lain dalam HTML misalnya a, h1, div, span, em, ataupun strong.
Kode di bawah menunjukkan contoh dari elemen a yang digunakan untuk membuat hyperlink ke halaman lain:

<a>

Tag

Sebuah elemen biasanya direpresentasikan oleh tag. Tag pembuka menandakan elemen tersebut dimulai, dan tag penutup menandakan akhir dari sebuah elemen. Tag pembuka direpresentasikan dengan nama elemen yang diapit simbol “<>”, contohnya <a>. Tag penutup dituliskan dengan menambahkan garis miring (“/”) setelah simbol “<”. Misalnya, tag penutup untuk elemen a adalah </a>.
Berikut adalah contoh pengunaan tag a untuk membuat sebuah link:

<a>Ini adalah sebuah link</a>

Atribut

Atribut merupakan informasi tambahan yang dapat kita berikan untuk sebuah elemen. Setiap elemen memiliki atribut yang berbeda-beda, meskipun terdapat beberapa atribut standar yang dapat digunakan oleh semua elemen.
Atribut khusus elemen dibuat ketika nilai atribut tersebut memang hanya pantas digunakan untuk elemen tersebut. Misalnya, untuk elemen img yang digunakan untuk menampilkan gambar, terdapat atribut untuk menentukan di mana sumber gambar yang akan ditampilkan di simpan. Atribut ini tentunya tidak akan berguna untuk elemen p, yang hanya menampilkan teks.
Atribut standar yang dimiliki oleh semua elemen sendiri merupakan atribut yang umumnya dapat diimplementasikan oleh semua elemen, misalnya atribut “id” untuk identifikasi elemen, atau “class” untuk klasifikasi elemen.
Kode di bawah menunjukkan contoh elemen a yang digunakan dengan atribut wajib elemen tersebut (href):

<a href=``http://www.bertzzie.com''>Ini adalah sebuah link</a>

Kode di atas memberikan contoh atribut href yang dimiliki oleh elemen a. Atribut ini berguna untuk memberikan referensi hyperlink dari sebuah elemen (karenanya namanya “href” - hyperlink reference). Atribut-atribut yang dimiliki oleh tiap-tiap elemen akan dibahas lebih lanjut ketika pembahasan dari sebuah elemen dilakukan.

Struktur Dokumen HTML

Sebuah dokumen HTML memiliki struktur tertentu yang harus dipatuhi. Struktur minimal yang harus dimiliki sebuah dokumen HTML dapat dilihat pada kode di bawah:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>...</title>
  </head>
  <body>
    ...
  </body>
</html>

Apa arti dari struktur tersebut? Mari kita lihat satu per satu.

Elemen DOCTYPE: Digunakan untuk memberikan informasi kepada browser mengenai versi HTML yang digunakan oleh dokumen. Pada listing~ref{code:struktur-html}, versi HTML yang digunakan adalah HTML5.
Elemen HTML: Elemen ini mengandung keseluruhan dokumen HTML, yang berarti tag pembuka elemen HTML merupakan tanda awal dokumen HTML, dan tag penutup adalah tanda akhir dokumen.
Elemen head: Elemen head pada dokumen digunakan untuk menguraikan berbagai meta data (informasi yang berkaitan dengan dokumen), judul dokumen, dan tautan dokumen ke berkas-berkas eksternal. Berbagai data yang ada di dalam elemen head tidak akan nampak pada halaman web hasil tampilan browser.
Elemen title: Memberikan judul dokumen.
Elemen body: Elemen ini merupakan penampung dari isi konten dokumen yang akan ditampilkan kepada pengguna.

Untuk lebih jelasnya, buat sebuah file dengan nama pengenalan-html.html yang berisi kode berikut:

 
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pengenalan HTML</title>
  </head>
  <body>
    <h1>Berita Utama</h1>
    <p>
        Elemen h1 digunakan untuk menandakan sebuah header dari teks
        (h1 == header 1). Konten teks ini sendiri berada di dalam
        sebuah paragraf, yang ditandai oleh elemen p.
    </p>
    <p>
        Paragraf kedua.
    </p>
  </body>
</html>

Buka file tersebut pada browser (dapat dilakukan dengan klik dua kali, ataupun melalui menu File -> Open... pada browser).

Pemetaan Kode pengenalan-html.html dengan Hasil Tampilan

Gambar Pemetaan Kode pengenalan-html.html dengan Hasil Tampilan menunjukkan hasil tampilan dari kode pada pengenalan-html.html, beserta dengan pemetaan antara elemen HTML dengan tampilan hasil olahan browser.
Pada gambar Pemetaan Kode pengenalan-html.html dengan Hasil Tampilan dapat dilihat bahwa elemen title ditampilkan pada bagian atas browser, dan isi dari body ditampilkan seluruhnya oleh browser. Perhatikan juga bahwa terdapat jarak spasi antara elemen p pertama dengan elemen p kedua, sebagai pemisah antar paragraf. Secara otomatis browser dapat membaca bahwa terdapat dua paragraf, dan biasanya dua paragraf yang berbeda akan memiliki jarak. Seperti yang telah dijelaskan pada bagian Browser dan Kode Klien, jarak antar paragraf ini akan berbeda-beda, tergantung dengan browser yang digunakan. Perhatikan juga bahwa jarak antar p berbeda dengan jarak antara h1 dengan p. Hal ini dikarenakan elemen h1, sebagai kepala teks, dianggap memiliki makna khusus, sehingga harus ditonjolkan (dengan menebalkan dan memperbesar huruf, serta memberi jarak yang lebar antara elemen h1 dengan elemen-elemen lainnya).

Cari Blog Ini

MUHAMMAD ROBBI S