Tutorial ini merupakan lanjutan dari tutorial HTML dasar sebelumnya, bagi anda yang belum sempat membacanya bisa mengaksesnya di sini. Sekarang kita akan berkenalan dengan Elements, Tag dan Atribut yang merupakan struktur dasar dalam penulisan kode HTML. Sebuah struktur kode HTML pasti terdiri dari tiga komponen tersebut, jadi saya harap anda dapat memahaminya dengan jelas karena sebagai dasar dalam membuat sebuah tampilan website.
HTML Element
Element adalah satu bagian utuh yang terdiri dari tag, attribut dan seluruh teks yang berada di antara tag pembuka dan penutup. Anda tidak perlu khawatir tentang apa yang dimaksud dengan tag dan atribut, karena saya nanti juga akan membahas dua komponen HTML tersebut. Adapun format penulisan element adalah :
<tagname>content</tagname>
<p>This is my First HTML</p>
Tulisan diantara tag <p> sampai dengan </p> itulah yang dimaksud dengan element pada HTML. Pengertian element ini sering sekali dipertukarkan dengan tag, ada yang menyebut tag sebagai element contohnya adalah ketika anda membuka situs w3schools, maka disana penjelasan tentang tag secara khusus tidak ada, karena sudah menjadi satu dengan element.
HTML Tag
Tentunya anda sudah mengetahui struktur penulisan kode HTML yang mana biasanya memiliki struktur dasar seperti <html>, <head>, <head>, <body>, </body>, </html>. Jika anda perhatikan struktur kode HTML tersebut maka itulah yang disebut dengan tag pada bahasa markup HTML. Tag pada HTML memiliki fungsi untuk memberi tahu web browser apa dan bagaimana sebuah teks harus ditampilkan. Sebagaimana yang telah kita pelajari file HTML hanyalah sebuah file teks biasa, web browserlah yang akan memproses file tersebut dan menampilkannya. Sebagian tag-tag HTML ditulis secara berpasangan, yang terdiri dari tag pembuka dan tag penutup. Tag pembuka ditulis menggunakan kurung siku seperti <h1>, sedangkan tag penutup ditulis dengan menambahkan tanda garis miring atau slash seperti </h1>. Biasanya sebuah tag memiliki atribut, yaitu informasi tambahan yang akan ditampilkan pada browser, misalkan saya ingin membuat tulisan dengan judul Belajar HTML yang memiliki background warna merah dan teks berada di tengah-tengah, maka penulisan kode htmlnya adalah seperti berikut :
<h1 style="background-color: red" align="center">Belajar HTML</h1>
Jika anda perhatikan kode HTML diatas, maka <h1> dan </h1> dinamakan tag dalam HTML. Masih banyak lagi tag-tag dalam HTML seperti tag <body> yang mana berfungsi untuk menampung seluruh teks ataupun informasi yang nantinya akan ditampilkan pada web browser. Tag <body> memiliki pasangan berupa tag penutup yaitu </body>, sehingga bisa juga dikatakan ini merupakan tag berpasangan. Dalam HTML ada istilah tag kosong, yaitu tag yang tidak memiliki teks (content) seperti tag <br> yang digunakan untuk berpindah ke baris baru atau selanjutnya. Tag <br> ini tidak memiliki konten, dan tidak berpasang alias tidak memiliki tag penutup. Penulisan tag pada HTML tidak case sensitive, artinya tidak ada pengaruhnya ketika anda menuliskan sebuah tag dengan huruf kecil atau huruf besar, tag <h1> sama saja artinya dengan tag<H1>.
HTML Atribut
Sebuah tag dalam HTML biasanya memiliki sebuah atribut atau beberapa atribut tergantung dari kebutuhannya akan tampilan yang di inginkan dari tag itu sendiri. Seperti yang sudah saya singgung di atas, bahwa atribut pada HTML berfungsi untuk memberikan informasi tambahan yang ditulis pada tag pembuka. Fungsi ini bermacam-macam tergantung nilai dan pada tag mana ia ditempatkan. Beberapa atribut bersifat umum dan bisa digunakan pada seluruh tag yang dikenal dengan global atribut, tetapi biasanya hanya berfungsi untuk tag itu sendiri.
atribut terdiri dari nama atribut dan nilai atribut, sebagai contoh jika anda perhatikan pada kode HTML diatas maka atribut dari tag<h1> adalah background-color dan align. Dimana atribut backgorund-color memiliki nilai red, dan atribut align memiliki nilai center. Pada kenyataannya nanti kita akan lebih banyak mengatur tampilan dari tag HTML melalui CSS. Beberapa contoh dari HTML atribut adalah sebagai berikut :
Atribut Lang
Atribut Lang digunakan untuk menjelaskan kepada mesin pencari bahasa apa yang digunakan oleh sebuah website, biasanya penulisan atribut lang ini terletak pada tag pembuka <html>. Contohnya adalah <html lang="en-US"> yang artinya website ini menggunakan bahasa inggris Amerika.
Atribut Title
Untuk membuat paragraf pada HTML di definisikan menggunakan tag <p>, dimana tag <p> ini memiliki atribut judul yaitu title, contohnya adalah sebagai berikut :
<p title="About Paragrap"> Ini adalah pelajar HTML untuk pemula</p>
Atribut href
Jika anda ingin membuat sebuah link dalam HTML di definisikan menggunakan tag <a>, sedangkan untuk alamat dari link itu sendiri di definisikan menggunakan atribut href, sehingga antara tag <a> dengan atribut href ini biasanya selalu berdampingan, karena saling berkaitan. Contoh penggunaannya adalah sebagai berikut :
<a href="http://aplikasivfp.blogspot.com">Belajar HTML</a>
Atribut Size
Ketika anda ingin memasukan atau menyertakan gambar ke dalam sebuah website, maka tag yang digunakan adalah <img> dimana biasanya gambar yang kita masukkan tersebut memiliki ukuran berupa tinggi dan lebar. Sehingga atribut size yang terdiri dari width dan height biasanya digunakan untuk gambar. Contohnya penulisan kodenya adalah seperti berikut :
<img src="aplikasivfp.blogspot.com" width=500" height="300">
Atribut Alt
Atribut ini digunakan sebagai alternatif ketika gambar tidak tampil di layar komputer dalam bentuk tulisan. Sebelum gambar ditampilkan secara utuh biasanya tulisan tentang gambar tersebut yang pertama muncul. Untuk memunculkan tulisan tersebut maka kita definisikan dengan menggunakan atribut alt ini. Atribut ini sangat disarankan ketika anda menginputkan gambar ke dalam website, karena sangat berpengaruh kepada mesin pencari seperti Google yang berefek kepada peningkatan rangking kita di mata Google. Contoh penulisan kodenya adalah seperti berikut :
<img src="aplikasivfp.blogspot.com" alt="gambar aplikasivfp.blogspot.com" width=500" height="300">
Itulah penjelasan singkat tentang pengenalan element, tag dan atribut pada HTML, sebagai penutup agar anda lebih jelas lagi, akan saya berikan kode lengkap html yang terdiri dari ketiga komponen tersebut. Artikel berikutnya saya akan membahas tentang HTML Headings, element heading dan style heading.
<bhtml lang="id">
<head>
<title>Belajar HTML Pemula</title>
</head>
<body>
<h1 style="background-color: Red" align="center">Belajar HTML</h1>
<h2 style="background-color: green" align="left">Belajar HTML</h2>
<h3 style="background-color: blue" align="right">Belajar HTML</h3>
<p title="About Paragrap"> Ini adalah pelajar HTML untuk pemula</p>
<a href="http://aplikasivfp.blogspot.com">Belajar HTML</a>
<img src="aplikasivfp.blogspot.com" alt="gambar aplikasivfp.blogspot.com" width=500" height="300">
</body>
</html>
[Source: view]
0 comments:
Posting Komentar