SampelKode - Hai... Hai... Ketemu lagi dengan saya admin dari sampelkode, pada tutorial kemarin saya membahas mengenai whitespace dan tidak whitespace, saya rasa anda sudah mengerti bedanya bukan? jika belum silahkan baca kembali artikel berikut :
Kali ini saya tidak akan lagi membahas mengenai whitespace lagi, sekarang ini saya akan membahas secara detail attribute HTML dan gunanya attribute html untuk apa?
Attribute HTML memiliki kegunaan untuk menentukan link yang akan di tuju, menentukan keterangan pada tulisan, menentukan keterangan pada gambar dan lain-lain.
Attribute HTML ini memiliki 5 attribute yang penting untuk di bahas dan harus dimengerti jika anda berniat untuk menjadi web developer. Berikut 5 Attribute yang akan saya bahas pada tutorial HTML kali ini :
- Lang
- Alt
- Href
- Src
- Title
Oke kita bahas semuanya secara acak gpp ya kan??
Lang
Lang? Apakah itu? Attribute Lang adalah attribute yang digunakan untuk menentukan dokumen html ketika disearch web browser. Biasanya attribute Lang ini digunakan pada website yang memiliki bahasa tersendiri dan ingin diterjemahkan ke bahasa itu sendiri.
Lang dari kata Language yang artinya bahasa, penulisan attribute Lang adalah sebagai berikut ini.
<!DOCTYPE html>
<html lang='en'>
<head>
<title> Tutorial HTML - Attribute HTML </title>
</head>
<body>
<h1>Ini Adalah Header </h1>
<p> Ini Adalah Paragraf </p>
</body>
</html>
<html lang='en'>
<head>
<title> Tutorial HTML - Attribute HTML </title>
</head>
<body>
<h1>Ini Adalah Header </h1>
<p> Ini Adalah Paragraf </p>
</body>
</html>
Bisa Dilihat coding diatas saya menambahkan attribute lang di bagian tag disitu tertulis lang='en' anda dapat mengubah kata 'en' menjadi kode negara, untuk kode negara indonesia sendiri menggunakan kode id. Berikut beberapa kode negara yang dapat kalian coba :
- Indonesia menggunakan "ID"
- Malaysia menggunakan "MY"
- Singapura menggunakan "SG"
- Prancis menggunakan "FR"
Saya harap anda mengerti mengenai attribute lang ini, sebenarnya attribute lang ini tidak perlu di tulis karena sekarang ini web browser sudah dapat menerjemahkan bahasa yang ditulis secara otomatis.
Alt
attribute Alt adalah attribute html yang digunakan untuk mengganti text atau alternatif text, bisa di bilang alt ini attribute yang dibuat untuk mendeskripsikan suatu objek, biasanya attribute alt ini digunakan untuk tag <img> dan biasanya attribute alt diikuti dengan attribute "src", untuk attribute src akan saya bahas setelah attribute alt.
saya jelaskan lagi, untuk penulisan attribute href ini harus ada tanda petik ' atau " karena tanpa ada tanda tersebut attribute href tidak akan dibaca oleh web browser.
berikut contoh penggunakan attribute alt :
<!DOCTYPE html>
<html>
<head>
<title> Tutorial HTML - Attribute HTML </title>
</head>
<body>
<img src='monas.jpg' alt='Monas' />
</body>
</html>
<html>
<head>
<title> Tutorial HTML - Attribute HTML </title>
</head>
<body>
<img src='monas.jpg' alt='Monas' />
</body>
</html>
Pahami dulu coding diatas, jika mengerti berarti daya pikir anda sungguh hebat, saya menambahkan attribute alt setelah attribute src. Di dalam attribute alt saya menulis kata Monas dan di attribute src saya menulis nama gambar dengan format jpg. Bisa disimpulkan bahwa gambar tersebut bertuliskan monas.
Oke mengerti? Mengertilah!! Kita lanjut ke attribute src.
SRC
Src atau Source adalah attribute html yang digunakan untuk mengambil sumber objek, contohnya saya ingin mengambil gambar yang telah saya simpan dengan nama tertentu dan format gambar tertentu, anda hanya perlu menambahkan attribute src di bagian tag <img> untuk mengambil gambar tersebut agar dapat ditambilkan oleh web browser.
saya jelaskan lagi, untuk penulisan attribute href ini harus ada tanda petik ' atau " karena tanpa ada tanda tersebut attribute href tidak akan dibaca oleh web browser.
berikut ini contoh penggunaan attribute src :
<!DOCTYPE html>
<html>
<head>
<title> Tutorial HTML - Attribute HTML </title>
</head>
<body>
<img src='monas.jpg' /> //Tag img yang akan menampilkan gambar monas
<img src='candi.jpg' /> //Tag img yang akan menampilkan gambar candi
<img src='rumah.jpg' /> //Tag img yang akan menampilkan gambar rumah
</body>
</html>
<html>
<head>
<title> Tutorial HTML - Attribute HTML </title>
</head>
<body>
<img src='monas.jpg' /> //Tag img yang akan menampilkan gambar monas
<img src='candi.jpg' /> //Tag img yang akan menampilkan gambar candi
<img src='rumah.jpg' /> //Tag img yang akan menampilkan gambar rumah
</body>
</html>
Perlu diperhatikan juga, penulisan format gambar yang di support oleh web browser juga berbeda-beda. Jadi penulisan format gambar ini juga harus diperhatikan, biasanya web browser sekarang ini sudah support format yang berekstensi seperti : JPG,PNG,GIF dan lain-lain.
Untuk mengganti format tinggal ganti aja belakang formatnya seperti contoh :
JPG ke PNG tinggal ganti monas.png
PNG ke GIF tinggal ganti monas.gif
Cukup mudah bukan? Yosh kita lanjut lagi ke tahap berikutnya!!
Href
Attribute Href adalah attribute html yang digunakan untuk memanggil url web, maksudnya href ini bisa di isi dengan url web seperti contoh : https://www.google.com/, https://www.facebook.com/, https://www.yoursite.com/ dan biasanya penggunakan attribute href ini digunakan untuk tag <a>
saya jelaskan lagi, untuk penulisan attribute href ini harus ada tanda petik ' atau " karena tanpa ada tanda tersebut attribute href tidak akan dibaca oleh web browser.
berikut contoh penggunaan attribute Href
<!DOCTYPE html>
<html>
<head>
<title> Tutorial HTML - Attribute HTML </title>
</head>
<body>
<a href='https://www.facebook.com/'> Facebook </a>
<a href='https://www.twitter.com/'> Twitter </a>
<a href='https://www.yoursite.com/'> Website Anda </a>
</body>
</html>
<html>
<head>
<title> Tutorial HTML - Attribute HTML </title>
</head>
<body>
<a href='https://www.facebook.com/'> Facebook </a>
<a href='https://www.twitter.com/'> Twitter </a>
<a href='https://www.yoursite.com/'> Website Anda </a>
</body>
</html>
Saya harap anda mengerti cara penggunaan attribute href ini, kita akan lanjut ke attribute title.
Title
Attribute title adalah attribute html yang digunakan untuk mendeskripsikan suatu tulisan agar pengguna dapat memahami tulisan tersebut jika dirasa tulisan tersebut kurang jelas, title dalam bahasa indonesia adalah tulisan!!
Atribute title ini biasanya di tulis di tag <h1 sampai h6> <p> <img> <a> dan lain-lain.
contoh penggunaan atribute title sebagai berikut ini :
<!DOCTYPE html>
<html>
<head>
<title> Tutorial HTML - Attribute HTML </title>
</head>
<body>
<h1 title='Ini Header pertama'> Ini Header Pertama </h1>
<p title='Tulisan Ini Hanya Contoh'> Lorem Ipsum Sit Dolor Amit </p>
<a href='https://www.facebook.com/' title='Link Ke Facebook'> Facebook </a>
<img src='monas.jpg' title='Ini Gambar Monas!!'/>
</body>
</html>
<html>
<head>
<title> Tutorial HTML - Attribute HTML </title>
</head>
<body>
<h1 title='Ini Header pertama'> Ini Header Pertama </h1>
<p title='Tulisan Ini Hanya Contoh'> Lorem Ipsum Sit Dolor Amit </p>
<a href='https://www.facebook.com/' title='Link Ke Facebook'> Facebook </a>
<img src='monas.jpg' title='Ini Gambar Monas!!'/>
</body>
</html>
Bisa dimengerti bukan coding diatas? Coba buatlah coding sama persis seperti di atas setelah itu save dan buka, setelah dibuka coba sorot tulisan tersebut, nanti akan ada tulisan kecil yang tulisannya sama seperti tulisan title tersebut. Itulah kegunaan title.
Yah tidak terasa sudah selesai juga penjelasan mengenai attribute html ini, saya sangat senang bila anda memberi masukan jika postingan Tutorial HTML - Attribute HTML ini dirasa kurang banyak, saya akan menerima masukan anda dan akan mencoba mengupdatenya lagi.
Akhir kata, jangan lupa untuk berkomentar dan jangan lewatkan tutorial HTML yang terbaru dari blog SampelKode ya!!!
Perkenalkan!! Nama saya Nilla Lukita sebagai author SampelKode, saya tinggal di kudus. Hobi saya adalah blogging, anime lovers dan gamers, ya meskipun saya sekarang ini masih menekuni dunia blogging dan anime lovers (No Wibu). Saya masih sekolah dan masih kelas 2 SMK jurusan TKJ, saya senang sekali kalau ada masalah mengenai coding, design dan hal yang berhubungan dengan website.
ConversionConversion EmoticonEmoticon