Belajar HTML Jilid 2

Dalam seri belajar HTML dasar ini, sebelumnya telah kita telah bahas soal pengertain HTML secara umum. Sebelum masuk ke aplikasi penerapannya (baca pembelajaran struktul) kita harus mengenal dulu apa itu web browser. Hal ini sangat penting, karena erat kaitannya dengan HTML, tanpa web browser, mustahil hasil editor HTML bisa dinikmati banyak orang.

Banyak yang memulai belajar HTML sangat menyepelekan hal ini. Padahal mempelajari HTML tanpa web browser yang mendukung, sama saja sia-sia, karena hasilnya tidak akan baik. Percaya deh!

Apa Itu Web Browser?

Saya yakin, para blogger pasti sudah mengenal Web Browser. Akan tetapi, setiap orang berbed-beda, jadi tak ada salahnya untuk membahasnya kembali (sebagai penyegaran keilmuan).

Menurut kutipan dari blog Wikipedia, Web Browser (atau biasa disebut browser) merupakan sebuah software aplikasi untuk menerima,  menampilkan, dan menerjemahkan informasi dari world wide web (www). Mungkin www tidak asing lagi bagi Anda, dan salah satu informasi yang ditampilkan itu dibuat dalam format HTML.

Beberapa contoh web browser adalah Mozilla Firefox dan Google Chrome  yang banyak digunakan didunia. Jika di smartphone, varian ini jauh lebih banyak lagi, seperti Opera dan lain-lain.

Mengenal Tag, Elemen dan Atribut

HTML sekali lagi saya katakan bukan bahasa pemprograman, namun  bahasa struktur yang fungsinya untuk menandai bagian-bagian dari sebuah halaman. Karena merupakan bahasa struktur, itu berarti HTML memiliki pola dan susunan yang baku. Susunan ini disebut sebagai Tag, Elemen dan Atribut.

Secara umum, struktur dasar HTML berbentuk seperti ini :

<html>
<head>
<title>Judul Dokumen HTML</title>
</head>
<body>
        Isi Dokumen
</body>
</html>

Dari struktur yang terdapat diatas, kita bisa mengenal Tag, Elemen dan Atribut. Dokumen HTML disimpan dalam format teks reguler dan mengandung tag-tag yang memerintahkan web browser untuk mengeksekusi perintah-perintah yang dispesifikasikan. Agar lebih mudah memahami, penjabarannya akan kita bagi dalam beberapa bagian.

Mengenal Tag HTML

Tag Adalah teks khusus (markup) berupa dua karakter “<” dan “>” (tanpa tanda kutip) yang merupakan cara untuk memberitahu web browser bagaimana suatu text ditampilkan. Hampir semua tag dalam HTML ditulis secara berpasangan (beberapa berupa tag tunggal), tag pembuka dan tag penutup, dimana objek yang dikenai perintah tag berada di antara tag pembuka dan tag penutup.

Sebagai contoh pada script diatas, <body> adalah tag dengan nama body.
Karena ditulis secara berpasangan, maka tag <body> pembuka harus memiliki penutup. Penulisan tag penutup ditambahkan karakter “/” setelah karakter “<“, sebagai contoh <body> ini adalah tag pembuka isi dokumen HTML, dan </body> ini adalah tag penutup isi dokumen HTML.

Mengenal Elemen HTML

Elemen adalah isi dari tag yang berada diantara tag pembuka dan tag penutup. Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Sebagai contoh untuk menampilkan judul dokumen HTML pada web browser digunakan element title.

Merujuk pada contoh script diatas, maka <title> ini adalah tag pembuka judul dokumen HTML. Kata-kata Judul Dokumen HTML merupakan isi judul dokumen HTML dan </title> adalah tag penutup judul dokumen HTML. Penulisan lengkapnya seperti ini <title>Judul Dokumen HTML</title>

Harus diingat, saat menulis elemen HTML jangan sampai saling tumpang tindih. Misal :

<p>
    <b>
        …………….
    </b>
</p>

Jangan sampai ditulis :

<p>
    <b>
        …………….
    </p>
</b>

Lihat barisan elemen <p> yang pertama, pasangan akhirnya adalah <b>. Jika pola yang Anda gunakan seperti itu, maka yakin dan percaya, script yang Anda buat sampai kiamat tidak akan berfungsi.

Mengenal Atribut HTML

Atribut adalah informasi tambahan yang diberikan kepada tag. Informasi ini bisa berupa instruksi untuk warna dari text, besar huruf dari text, dan lain-lain. Setiap atribut juga memiliki pasangan nama dan nilai (value), dan ditulis dengan name=”value”. Value diapit tanda kutip, boleh tanda kutip satu (‘) atau dua (“).

Penulisan harus berada diantara tag pembuka dan penutup, Sebagai contoh, untuk membuat warna teks menjadi kuning dan latarbelakang halaman web menjadi hitam, penulisannya adalah <body bgcolor=”black” text=”yellow”>

Latihan 

Agar lebih mudah dipahami, kita akan membuat contoh script HTML dasar. Seperti yang saya katakan pada postingan belajar HTML sebelumnya, web browser dalam hal ini diperlukan, begitu pula dengan aplikasi editor. Kali ini saya menggunakan Google Chrome sebagai browser dan Notepad ++ sebagai aplikasi editor.

  • Pertama-tama buka Notepad ++ Anda dan tuliskan scrip berikut

 

<html>
<head>
<title>Judul Dokumen HTML</title>
</head>
<body>
<body bgcolor=”black” text=”yellow”>
    Isi Dokumen (Belajar HTML bersama bloGoooblok ~)
</body>
</html>

Tampilannya di Notepad ++

html tutorial

 

  • Setelah itu simpan file dengan format .html
  • Kemudian buka file yang disimpan ke web browser.

 

menu html

 

  • Maka tampilannya akan seperti gambar berikut. Judulnya “Judul Dokumen HTML”, isinya ” Isi Dokumen (Belajar HTML bersama bloGoooblok ~)” dan latar belakang tulisan berwarna hitam, serta tulisannya berbarna kuning.

 

belajar html

Gimana, belajar HTML sangat mudah bukan!. Semoga penjelasan dapat dipahami. Soal Tag, Elemen dan Atribut masih memiliki banyak varian, kita akan mengenalnya nanti. Belajarnya harus setahap demi setahap.Tags: Panduan HTML5, Edit HTML, Element, atribut dalam HTML

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *