Pengenalan HTML

 PENGENALAN HTML 

Dasar Pemograman

 

1.1 Apa itu HTML? 

HyperText Markup Language (HTML) adalah bahasa (pemrograman web) berupa tag 

(tanda atau label) yang digunakan untuk membuat sebuah halaman web dan menampilkan

berbagai informasi di dalam browser web. Kata markup dapat diartikan sebagai tag (tanda atau

label) dalam dokumen teks yang menunjukkan hubungan dengan teks lain.

HTML bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia

penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup

Language). HTML menjadi standar yang digunakan secara luas untuk menampilkan halaman

web. HTML saat ini merupakan standar internet yang didefinisikan dan dikendalikan

penggunaannya oleh World Wide Web Consortium (W3C).

HTML berupa kode atau tag yang menginstruksikan browser untuk menghasilkan

tampilan sesuai dengan yang diinginkan. Sebuah file HTML dapat dibuka dengan

menggunakan browser web seperti Mozilla Firefox atau Microsoft Internet Explorer atau

browser web Chome/Chromium. HTML juga dapat dikenali oleh aplikasi pembuka email

ataupun dari PDA dan program lain yang memiliki kemampuan browser.

 

1.2 Aturan Dokumen HTML 

Sebuah halaman HTML pada prinsipnya terdiri dari empat konsep dasar, yaitu:

1) Elements

Seluruh halaman yang ditampilkan pada sebuah browser pada dasarnya dibangun dari

banyak elements (elemen) atau bagian-bagian kecil. Perhatikan contoh gambar halaman web

di bawah ini. 

Dari gambar tersebut, halaman yang ditampilkan berupa susunan dari teks dan gambar,

seperti dokumen pada umumnya. Namun untuk dapat menghasilkan tampilan halaman web,

dibutuhkan bagian-bagian atau elemen yang bekerja manampilkan isi sesuai keinginan.

Sebagai contoh, untuk dapat menampilkan teks dengan ukuran yang besar dibutuhkan sebuah

elemen <h1> teks </h1>. 

2) Penulisan Tags

HTML disusun dari tag-tag atau barisan tags. Tags dan elements dalam HTML sangat

berkaitan dan tak bisa dipisahkan, karena tags adalah penyusun dan penanda sebuah elemen

HTML.

Untuk sebuah elemen, diperlukan dua buah tags, yaitu tags untuk awalan atau pembuka

yang ditulis dengan simbol < dan tags penutup elemen yang ditulis dengan simbol >. Sedang

untuk akhir sebuah blok elemen diakhiri dengan tanda / di depan kode elemen tersebut.

3) Atribut dan Nilai

Atribut adalah hal penting lainnya dalam HTML. Atribut ini digunakan untuk

mendefinisikan karakteristik suatu elemen. Contoh penggunaan atribut adalah untuk

menentukan tinggi sebuah gambar, ukuran dan jenis huruf yang digunakan, warna untuk latar

belakang halaman dan masih banyak lagi. Sedangkan nilai adalah isi dari atribut itu sendiri.

Penulisan nilai atribut dalam HTML dapat berupa apa saja, bisa berupa sebuah bilangan,

kata atau kombinasi keduanya berupa alamat situs atau sebuah path, tergantung jenis atribut

yang akan digunakan atau yang dikenali oleh elemen itu sendiri. Untuk penulisan sebuah nilai

atribut dalam HTML ditulis di dalam tanda “ “.

Berikut ini contoh baris atribut untuk membuat teks memiliki ukuran 11. 

<font size="11">...</font> 

Penulisan bilangan untuk atribut yang berhubungan dengan tinggi dan lebar suatu

elemen memiliki pengertian satuan dalam pixel. Bila bilangan tersebut diikuti dengan tanda

persen (%) maka dimensi yang dihasilkan memiliki ukuran relatif terhadap ukuran layar

monitor. 

4) Pengelompokan

Pengelompokan atau nesting berarti bahwa penulisan tags sebuah elemen dengan elemen

lainnya tidak boleh tercerai berai, dengan kata lain harus tersusun urut sesuai dengan posisi

elemen tersebut.

Misalkan sebuah halaman web terdiri elemen A, B dan C. Element C adalah isi elemen

B, dan elemen B adalah bagian dari A, maka penulisan tags untuk elements tersebut adalah

sebagai berikut: 

<A> <B> <C> </C> </B> </A> 

Atau 

<A>

  <B>

    <C>

    </C>

  </B>

</A> 

Penulisan tags yang tidak beraturan susunannya akan menyebabkan ketidakberaturan 

hasil halaman web yang ditampilkan. 

1.3 Struktur HTML 

Struktur pembentuk sebuah halaman HTML sederhana terdiri dari beberapa bagian 

berikut:

    Bagian informasi, yang berisi versi HTML dan jenis dokumen yang digunakan

    Bagian head, berisi elemen-elemen untuk head.

    Bagian body, inti dari isi halaman yang akan ditampilkan.

    Bagian komentar, bagian yang tidak akan ditampilkan pada browser.

Berikut contoh struktur dokumen HTML: 

 

 

1.4 Header Dokumen 

 Baris judul atau title dimasukkan dalam header dokumen html. Berikut ini contoh tag 

HTML untuk menampilkan judul "JUDUL HOMEPAGE ANDA" pada sebuah halaman web.

Untuk latihan, ikuti beberapa langkah berikut:  

    Buatlah dokumen berupa file teks yang isinya seperti tampilan di atas, misal dengan

nama file utama.html dan disimpan pada folder atau directori komputer Anda.  

    Setelah itu buka dokumen utama.html dengan browser favorit Anda. 

    Cara melihat hasilnya, pada program borwser web klik  File -> Open File. Kalau sudah

dibuka sebelumnya, coba tekan tombol Ctrl+Shift+R atau klik tombol reload. Fungsi

dari kombinasi tombol ini adalah membersihkan memory dari dokumen lama dan

memuat dokumen yang baru. 

   

    Seharusnya Anda melihat adanya perubahan pada baris header browser Anda seperti

gambar berikut ini. 

Teks yang dituliskan di antara tag <title> dan </title> akan ditampilkan di baris header 

browser. Text ini juga akan ditampilkan di bookmark jika halaman homepage kita  dimasukkan

ke bookmark oleh pengunjung.

Di sini yang dipakai sebagai contoh adalah komputer milik penulis dengan nama folder

D:/peTIK/Pemrograman Web Dasar/. Sesuaikan dengan nama folder di komputer Anda.

Perhatikan cara penulisan URL-nya. Jika kita tidak menyebutkan nama filenya maka

defaultnya adalah file dengan nama index.html atau index.htm. 

1.5 Body atau Isi Dokumen 

Teks atau gambar yang dimunculkan pada halaman web adalah yang terletak dalam atau 

di antara tag <body> ... </body>.

 

Berikut ini output yang dihasilkan pada browser web: 

1.6 Komentar 

Komentar (comments) adalah bagian yang bersifat opsional atau pilihan, sehingga 

keberadaannya boleh ditulis, boleh tidak ditulis. Komentar digunakan untuk menjelaskan atau

menandai suatu bagian halaman web yang diperuntukkan si pembuat web. Oleh karena itu

komentar tidak akan ditampilkan dalam halaman web.

Penulisan komentar ditandai dengan tags <!-- dan diakhiri dengan tag -->. Contoh dari

penulisan komentar adalah sebagai berikut: 

Sumber : Modul Dasar Pemograman Web 2019/2020 Pesantren PeTIK Rangkapan Jaya, Depok, Jawa Barat.