Memahami Dasar-Dasar HTML


Apakah HTML itu?

HTML (HyperText Markup Language) merupakan sebuah metode yang membawa konsep hypertext untuk membuat sebuah halaman website dan menampilkan segala informasi dalam sebuah web browser. HTML ini merupakan hasil pengembangan dari standar pemformatan dokumen teks SGML (Standard Generalized Markup Language) yang dirancang untuk tidak tergantung oleh jenis sistem operasi. HTML pertama kali dibuat oleh Tim Barners-Lee ketika masih bekerja di CERN. Sejak saat itu, HTML mengalami perkembangan yang pesat dengan terus melakukan penambahan kemampuan dan fasilitas yang lebih baik tanpa merubah cara kerja HTML.

Tim-Barners-Lee
Cikal Bakal diciptakannya HTML (Tim Barners-Lee)

Dengan memahami kata perkata, dapat Kita peroleh makna dari istilah HTML adalah sebagai berikut:

  • Hypertext

Kata ini menunjukkan adanya tautan-tautan/hubungan-hubungan yang terbentuk antara sebuah dokumen dengan dokumen lainnya dalam sebuah atau beberapa kelompok dokumen. Dengan adanya hubungan-hubungan ini akan mempermudah kita berpindah-pindah dari satu dokumen ke dokumen lainnya atau sebaliknya. Istilah ini pertama kali dibuat oleh Ted Nelson pada tahun 1965 untuk menggambarkan dokumen yang disajikan oleh komputer yang menyatakan struktur nonlinear dari gagasan-gagasan sebagai lawan dari format linear pada sebuah buku. Pada penerapannya dalam sebuah halaman website (dokumen html), tautan-tautan/hubungan-hubungan ini disebut sebagai link (hyperlink).

  • Markup

Dalam konteks ini, markup menunjukkan bahwa pada file HTML berisi instruksi-instruksi yang dapat memberikan tanda-tanda tertentu sehingga terbentuk suatu pemformatan dalam hasil dokumen yang akan ditampilkan pada web browser.

  • Language

Kata language menunjukkan bahwa dalam file HTML terdapat sekumpulan perintah-perintah yang menggerakkan dan mengatur tingkah laku sebuah halaman website.

Meskipun mengandung kata language, HTML sebenarnya bukan merupakan sebuah bahasa pemrograman. Dapat Kita ketahui bahwa pengertian dari bahasa pemrograman (programming language) adalah “bahasa buatan yang dapat dipakai untuk menentukan urutan instruksi yang akhirnya dapat diproses dan dilaksanakan oleh komputer – dari kode sumber yang dinyatakan dengan programming language menjadi kode mesin yang dipakai mesin untuk bekerja – diotomatisasi oleh program lain seperti kompiler atau interpreter”.

Dari definisi “programming language” di atas, dapat Kita ketahui bahwa pada bahasa pemrograman diperlukan sebuah kompiler atau interpreter untuk menghasilkan program sehingga kita dapat dijalankn. Sedangkan pada HTML, kita hanya memerlukan sebuah text editor sederhana untuk mebuatnya dan web browser untuk menjalankannya. Selain itu, dilihat dari kata Markup Language dapat dikatakan bahwa HTML adalah bahasa markup (penandaan). Dikatakan demikian karena sifatnya yang hanya memberikan tanda (marking up) pada sebuah naskah teks sehingga diperoleh sebuah halaman website sebagai hasil dari penandaan, dan bukan sebagai program.

Apa Saja yang Diperlukan untuk Membuat Dokumen HTML?

Seperti yang telah disinggung sebelumnya, untuk membuat sebuah halaman website dengan HTML tidak membutuhkan perangkat-perangkat hardware atau software yang terlalu berlebih-lebihan. Tidak perlu sistem operasi yang muluk-muluk seperti Windows 7 atau Windows Vista, dengan Linux pun Anda juga dapat melakukannya karena HTML tidak tergantung oleh sistem operasi tertentu.

Sebagai editor HTML, Anda cukup menggunakan text editor sederhana yang sudah termasuk dalam paket instalasi sistem operasi milik Anda. Apabila Anda menggunakan sistem operasi Windows, maka Anda dapat menggunakan Notepad, dan WordPad. Sedangkan untuk sistem operasi Linux atau Macintosh, Anda dapat menggunakan nano, vi, jo, gedit, leafpad, dan text editor lainnya. Namun bagi Anda yang sudah dapat memahami dengan baik konsep dan perintah HTML, untuk tujuan kemudahan dan efisiensi kerja, Kita dapat menggunakan software-software berbasiskan GUI (Graphic User Interface) seperti Macromedia Dreamweaver dan Microsoft Frontpage pada sistem operasi Windows, dan menggunakan Nvu, Quanta +, serta Bluefish pada  sistem operasi Linux.

Dengan menggunakan perangkat-perangkat inilah nantinya Anda akan mengetikkan perintah-perintah HTML beserta isinya dan kemudian menyimpannya dalam format html atau htm. Sangat disarankan untuk menggunakan text editor sederhana sebagai langkah awal untuk mempelajari HTML daripada menggunakan software berbasis GUI yang akan mempersulit pemahaman Anda terhadap konsep dan perintah-perintah pada HTML. Namun apabila Anda merasa dapat memahami HTML dengan lebih baik menggunakan software berbasis GUI tersebut, maka tidak ada larangan untuk melakukannya, karena hal itu juga bukan merupakan langkah yang salah untuk mengawali perkenalan Anda dengan HTML.

HTML
HTML (Hypertext Markup Language)

Aturan-Aturan Penulisan Tag

Perintah-perintah dalam sebuah dokumen HTML dituliskan dalam bentuk tag. Tag merupakan aturan penulisan kode-kode dalam HTML yang diawali dengan tanda kurang dari dan diakhiri dengan tanda lebih dari (<tag>).

Adapun aturan-aturan penulisan kode-kode yang berbentuk tag tersebut adalah sebagai berikut:

  • Setiap tag memiliki nama yang spesifik, dan pada beberapa nama tag diikuti oleh atribut-atribut yang menentukan opsi-opsi dengan memberikan nilainya.

Contoh:

<font size=5 color=”blue”>HTML</font>

Pada contoh di atas, tagnya adalah <font>, sedangkan atributnya adalah size dan color. Sehingga dapat diketahui bahwa tag dan atribut beserta nilai atribut harus ditulis dalam tanda <…>.

  • Sebagian besar tag memiliki pasangan yang berfungsi sebagai pembuka perintah dan penutup perintah. Hal ini dilakukan untuk memberikan tanda bahwa perintah berlaku pada teks yang berada di antara tag pembuka dan penutup. Penulisan kedua tag yang saling berpasangan tersebut adalah <namatag>…</namatag>.

Contoh:

<b>Pengertian HTML</b>

Sebaris source code tersebut menandakan bahwa instruksi dalam tag <b> hanya akan menginstruksikan teks “Pengertian HTML” yang berada di antara <b> dan </b>. Tag <b> sebagai tag awal/pembuka dan tag </b> sebagai tag akhir/penutup.

  • Nama tag dan atributnya tidak bersifat case-sensitive. Sehingga apabila kita menuliskan <body bgcolor=”green”>Isi HTML< /body> akan memberi hasil yang sama dengan Kita menuliskan <BODY BgColor=”green”>Isi HTML</BODY>. Sehingga dengan istilah lain dapat dikatakan bahwa penulisan nama tag dan atributnya tidak dipengaruhi oleh bentuk kapital atau tidaknya.
  • Atribut suatu tag dituliskan setelah nama tag dan dipisahkan dengan spasi. Apabila terdapat lebih dari satu atribut, maka antar atribut cukup dipisahkan dengan spasi, adapun urutan penulisan atribut tidak berpengaruh.

Contoh:

<a href=”index.html” title=”Kembali ke Halaman Utama”>Back to Home</a>

  • Nilai dari sebuah atribut dituliskan dengan memberi tanda sama dengan (=).

Contoh:

<p align=”right”>Paragraf Pertama Rata Kanan</p>

Pada contoh ini menunjukkan bahwa tag <p> berartribut align dengan nilai “right”.

  • Apabila nilai sebuah atribut hanya terdiri dari satu huruf, maka Kita dapat langsung menuliskan nilainya. Namun apabila terdapat lebih dari satu huruf pada nilai atribut, maka Kita menuliskannya dengan menggunkan tanda ‘nilaiatribut’ atau “nilaiatribut”.

Contoh:

<font size=3 face=”Times New Roman”>Teks dengan font Times New Roman</font>

Pada contoh ini, karena nilai dari atribut size hanya terdiri dari huruf tunggal, maka dapat langsung kita tuliskan setelah tanda sama dengan (=). Sedangkan nilai dari atribut face ditulis “Times New Roman” karena terdiri dari banyak huruf.

Struktur Umum

Secara umum, struktur HTML terdiri dari 2 bagian, yaitu Headar dan Body.

——————————————Contoh Sederhana Dokumen HTML——————————————

<html>

<head>

<title>

Latihan Membuat Tabel

</title>

</head>

<body>

<center>

<font color=”blue” size=4 face=”Verdana”>

HTML, dalam Waktu singkat Aku Akan Berhasil Menaklukkanmu!

</font>

</center>

</body>

</html>

——————————————Contoh Sederhana Dokumen HTML——————————————

Dapat Kita lihat pada contoh sederhana dokumen HTML di atas bahwa teks yang berwarna biru sebagai bagian Header, sedangkan teks yang berwarna hijau adalah bagian Body. Dan teks yang berwarna hitam merupakan tag pembuka dan penutup dokumen HTML.

  • Header

Bagian ini berisi segala informasi dan berbagai macam keterangan mengenai sebuah dokumen HTML. Termasuk juga judul dokumen (bukan judul teks/naskah) berada dalam bagian ini. Isi dari bagian Header yang ditandai dengan tag <head>…</head> ini tidak akan ditampilkan pada browser kecuali judul dokumen yang akan ditampilkan pada bagian title browser. Dalam tag ini Kita dapat menambahkan tag lain seperti tag title yang berfungsi untuk memberi judul dokumen, tag link untuk membuat tautan atau relasi dengan file-file lain, dan tag meta yang berisi berbagai macam keterangan tentang dokumen tersebut.

  • Body

Pada bagian inilah Kita meletakkan apa saja yang akan ditampilkan pada browser. Bagian ini diawali dengan tag <body> dan ditutup dengan tag </body>. Berbeda dengan tag <head> yang tidak dapat ditambahkan atribut-atribut, dalam tag <body> Kita dapat menambahkan atribut-atribut seperti bgcolor atau background untuk memberi latar belakang pada sebuah halaman web, baik dengan warna tertentu atau gambar tertentu. Semua yang berada di antara tag ini disebut dengan body content yang dapat diisi dengan teks terformat, tabel, animasi, gambar, dan bahkan Kita dapat menambahkan file audio sebagai background, serta menampilkan file-file video dalam format tertentu.

Dengan memahami konsep-konsep dasar HTML ini, Kami harap dapat mempermudah Anda untuk lebih mendalami HTML. Untuk selanjutnya mungkin Anda dapat menyimak postingan-postingan Kami berikutnya tentang HTML. Terima Kasih.

by: 4lwayzmil3

One thought on “Memahami Dasar-Dasar HTML

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s