{"id":29,"date":"2019-07-12T11:00:10","date_gmt":"2019-07-12T11:00:10","guid":{"rendered":"https:\/\/www.webhozz.com\/code\/?p=29"},"modified":"2019-09-03T11:57:22","modified_gmt":"2019-09-03T11:57:22","slug":"atribut-html","status":"publish","type":"post","link":"https:\/\/www.webhozz.com\/code\/atribut-html\/","title":{"rendered":"HTML : Atribut"},"content":{"rendered":"\n

Atribut mendefinisikan karakteristik tambahan atau properti elemen seperti lebar dan tinggi gambar. Atribut selalu ditentukan dalam tag awal (atau tag pembuka) dan biasanya terdiri dari pasangan nama \/ nilai seperti name = “value”. Nilai atribut harus selalu dilampirkan dalam tanda kutip.<\/p>\n\n\n\n

Beberapa atribut diperlukan untuk elemen tertentu. Misalnya, tag <img> harus mengandung atribut src dan alt. Mari kita lihat beberapa contoh penggunaan atribut di bawah ini :<\/p>\n\n\n

\n<img src="images\/smiley.png" width="30" height="30" alt="Smiley">\n<a href="https:\/\/www.google.com\/" title="Search Engine">Google<\/a>\n<abbr title="Hyper Text Markup Language">HTML<\/abbr>\n<input type="text" value="John Doe">\n<\/pre><\/div>\n\n\n
Dalam contoh di atas src yang berada di dalam tag <img> adalah atribut dan image menjelaskan nilainya. Demikian pula href di dalam tag <a> adalah atribut dan tautan yang ada adalah nilainya, dan sebagainya.<\/p>\n\n\n\n
Ada beberapa atribut dalam HTML5 yang tidak terdiri dari pasangan nama \/ nilai tetapi terdiri dari hanya nama. Atribut semacam itu disebut atribut Boolean. Contoh beberapa atribut Boolean yang umum digunakan checked<\/code>, disabled<\/code>, readonly<\/code>, required<\/code>, etc. <\/p>\n\n\n
\n<input type="email" required>\n<input type="submit" value="Submit" disabled>\n<input type="checkbox" checked>\n<input type="text" value="Read only text" readonly>\n<\/pre><\/div>\n\n\n
Atribut Umum Yang Dipergunakan<\/h3>\n\n\n\n
Ada beberapa atribut seperti id<\/code>, title<\/code>, class<\/code>, style<\/code>. Yang dapat kalian gunakan pada sebagian besar elemen HTML. Berikut penjelasan penggunaannya.<\/p>\n\n\n\n
Atribut id<\/strong><\/em><\/p>\n\n\n\n
Atribut ID digunakan untuk penamaan elemen HTML yang memiliki karakteristik unik\/berbeda. Tidak boleh ada dua atau lebih elemen yang mempunyai ID yang sama. Perhatikan contoh berikut : <\/p>\n\n\n
\n<div id='menu'>\n<ul id='menu'>\n      <li>Beranda<\/li>\n      <li>Tutorial<\/li>\n<\/ul>\n<\/div>\n<\/pre><\/div>\n\n\n
Catatan: Id suatu elemen dalam sebuah file harus memiliki penamaan yang unik. Tidak ada dua elemen dalam satu file yang sama yang dapat dinamai dengan id yang sama, dan setiap elemen hanya dapat memiliki satu id.<\/p>\n\n\n\n
Atribut Class<\/em><\/strong><\/p>\n\n\n\n
Seperti atribut id, atribut kelas juga digunakan untuk mengidentifikasi suatu elemen. Tetapi tidak seperti id, atribut class tidak harus memiliki penamaan yang unik dalam sebuah file. Ini berarti kalian bisa menerapkan class yang sama ke beberapa elemen dalam sebuah file, seperti yang ditunjukkan pada contoh berikut:<\/p>\n\n\n
\n<input type="text" class="highlight">\n<div class="box highlight">Some content<\/div>\n<p class="highlight">This is a paragraph.<\/p>\n<\/pre><\/div>\n\n\n
Tips:<\/strong> Karena class dapat diterapkan ke banyak elemen, oleh karena itu penamaan apa pun yang ditulis ke kelas tersebut akan diterapkan ke semua elemen yang memiliki class tersebut.<\/p>\n\n\n\n
Atribut Title<\/em><\/strong><\/p>\n\n\n\n
Atribut title memungkinkan kalian untuk memberikan informasi tambahan tentang link. Ini sering muncul sebagai teks tooltip ketika mouse bergerak di atas link (hover). Cobalah contoh berikut untuk memahami bagaimana atribut ini bekerja :<\/p>\n\n\n
\n<abbr title="World Wide Web Consortium">W3C<\/abbr>\n<a href="images\/kites.jpg" title="Click to view a larger image">\n    <img src="images\/kites-thumb.jpg" alt="kites">\n<\/a>\n<\/pre><\/div>\n\n\n
Atribut Style <\/em><\/strong><\/p>\n\n\n\n
Atribut style memungkinkan kalian menentukan gaya CSS seperti warna, font, batas, dll. Langsung di dalam elemen. Berikut contohnya :<\/p>\n\n\n
\n<p style="color: blue;">This is a paragraph.<\/p>\n<img src="images\/sky.jpg" style="width: 300px;" alt="Cloudy Sky">\n<div style="border: 1px solid red;">Some content<\/div>\n<\/pre><\/div>\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Atribut mendefinisikan karakteristik tambahan atau properti elemen seperti lebar dan tinggi gambar. Atribut selalu ditentukan dalam tag awal (atau tag pembuka) dan biasanya terdiri dari<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-29","post","type-post","status-publish","format-standard","hentry","category-html"],"yoast_head":"\nBelajar HTML : Atribut - WebHozz Code<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webhozz.com\/code\/atribut-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Belajar HTML : Atribut - WebHozz Code\" \/>\n<meta property=\"og:description\" content=\"Atribut mendefinisikan karakteristik tambahan atau properti elemen seperti lebar dan tinggi gambar. Atribut selalu ditentukan dalam tag awal (atau tag pembuka) dan biasanya terdiri dari\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhozz.com\/code\/atribut-html\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHozz Code\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-12T11:00:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-09-03T11:57:22+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/atribut-html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/atribut-html\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\"},\"headline\":\"HTML : Atribut\",\"datePublished\":\"2019-07-12T11:00:10+00:00\",\"dateModified\":\"2019-09-03T11:57:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/atribut-html\\\/\"},\"wordCount\":358,\"articleSection\":[\"HTML\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/atribut-html\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/atribut-html\\\/\",\"name\":\"Belajar HTML : Atribut - WebHozz Code\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#website\"},\"datePublished\":\"2019-07-12T11:00:10+00:00\",\"dateModified\":\"2019-09-03T11:57:22+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/atribut-html\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webhozz.com\\\/code\\\/atribut-html\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/atribut-html\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML : Atribut\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#website\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/\",\"name\":\"WebHozz Code\",\"description\":\"Tutorial Web & Pemrograman Indonesia\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/author\\\/dody\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Belajar HTML : Atribut - WebHozz Code","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webhozz.com\/code\/atribut-html\/","og_locale":"en_US","og_type":"article","og_title":"Belajar HTML : Atribut - WebHozz Code","og_description":"Atribut mendefinisikan karakteristik tambahan atau properti elemen seperti lebar dan tinggi gambar. Atribut selalu ditentukan dalam tag awal (atau tag pembuka) dan biasanya terdiri dari","og_url":"https:\/\/www.webhozz.com\/code\/atribut-html\/","og_site_name":"WebHozz Code","article_published_time":"2019-07-12T11:00:10+00:00","article_modified_time":"2019-09-03T11:57:22+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webhozz.com\/code\/atribut-html\/#article","isPartOf":{"@id":"https:\/\/www.webhozz.com\/code\/atribut-html\/"},"author":{"name":"admin","@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1"},"headline":"HTML : Atribut","datePublished":"2019-07-12T11:00:10+00:00","dateModified":"2019-09-03T11:57:22+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhozz.com\/code\/atribut-html\/"},"wordCount":358,"articleSection":["HTML"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.webhozz.com\/code\/atribut-html\/","url":"https:\/\/www.webhozz.com\/code\/atribut-html\/","name":"Belajar HTML : Atribut - WebHozz Code","isPartOf":{"@id":"https:\/\/www.webhozz.com\/code\/#website"},"datePublished":"2019-07-12T11:00:10+00:00","dateModified":"2019-09-03T11:57:22+00:00","author":{"@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1"},"breadcrumb":{"@id":"https:\/\/www.webhozz.com\/code\/atribut-html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhozz.com\/code\/atribut-html\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.webhozz.com\/code\/atribut-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhozz.com\/code\/"},{"@type":"ListItem","position":2,"name":"HTML : Atribut"}]},{"@type":"WebSite","@id":"https:\/\/www.webhozz.com\/code\/#website","url":"https:\/\/www.webhozz.com\/code\/","name":"WebHozz Code","description":"Tutorial Web & Pemrograman Indonesia","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webhozz.com\/code\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/www.webhozz.com\/code\/author\/dody\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/29","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/comments?post=29"}],"version-history":[{"count":3,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/29\/revisions"}],"predecessor-version":[{"id":401,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/29\/revisions\/401"}],"wp:attachment":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/media?parent=29"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/categories?post=29"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/tags?post=29"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}