Tutorial HTML : Mengenal Atribut HTML
Tutorial HTML : Mengenal Atribut HTML
Atribut menentukan tambahan karakteristik atau sifat-sifat unsur 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 tertutup dalam tanda kutip.
Juga, beberapa atribut yang diperlukan untuk elemen-elemen tertentu. Misalnya, sebuah <img> tag harus berisi src dan alt atribut. Mari kita lihat beberapa contoh penggunaan atribut:
<img src="images/smiley.png" width="30" height="30" alt="Smiley">
<a href="https://www.google.com/" title="Search Engine">Google</a>
<abbr title="Hyper Text Markup Language">HTML</abbr>
<input type="text" value="John Doe">
Dalam contoh di atas src di dalam <img> tag atribut dan gambar jalan yang disediakan adalah nilainya. Demikian pula href di dalam <a> tag atribut dan link yang disediakan adalah nilainya, dan sebagainya.
Tips: Kedua tanda kutip tunggal dan ganda dapat digunakan untuk mengutip nilai-nilai atribut. Namun, tanda kutip ganda yang paling umum. Dalam situasi di mana nilai atribut itu sendiri berisi tanda kutip ganda hal ini diperlukan untuk membungkus nilai dalam tanda kutip tunggal, misalnya, value='John "Williams" Jr.'
Ada beberapa atribut dalam HTML5 yang tidak terdiri dari pasangan nama/nilai tetapi hanya terdiri dari nama. Atribut tersebut adalah yang disebut Boolean atribut. Contoh-contoh dari beberapa yang umum digunakan Boolean atribut checked, disabled, readonly, required, dll.
<input type="email" required>
<input type="submit" value="Submit" disabled>
<input type="checkbox" checked>
<input type="text" value="Read only text" readonly>
Catatan: nilai-nilai Atribut pada umumnya kasus-sensitif, kecuali nilai-nilai atribut tertentu, seperti id dan class atribut. Namun, World Wide Web Consortium (W3C) merekomendasikan huruf kecil untuk atribut nilai-nilai dalam spesifikasi.
Tujuan Umum Atribut
Ada beberapa atribut, seperti id, title, class, style, dll. yang dapat anda gunakan pada sebagian besar elemen HTML. Bagian berikut menjelaskan kegunaannya.
Atribut id
Dengan id atribut ini digunakan untuk memberikan nama yang unik atau pengenal untuk sebuah elemen dalam sebuah dokumen. Hal ini membuat lebih mudah untuk memilih elemen menggunakan CSS atau JavaScript.
<input type="text" id="firstName">
<div id="container">Some content</div>
<p id="infoText">This is a paragraph.</p>
Catatan: Bagian id dari suatu unsur harus unik dalam satu dokumen. Ada dua elemen dalam dokumen yang sama dapat diberi nama dengan yang sama id, dan masing-masing elemen dapat memiliki hanya satu id.
Atribut class
Seperti id atribut, class atribut ini juga digunakan untuk mengidentifikasi unsur-unsur. Tapi tidak seperti idini, class atribut tidak harus unik dalam dokumen. Ini berarti anda dapat menerapkan kelas yang sama untuk beberapa elemen dalam sebuah dokumen, seperti yang ditunjukkan dalam contoh berikut:
<input type="text" class="highlight">
<div class="box highlight">Some content</div>
<p class="highlight">This is a paragraph.</p>
Karena class dapat diterapkan untuk beberapa elemen, oleh karena itu gaya apa saja aturan yang tertulis itu class akan diterapkan untuk semua elemen yang memiliki itu class.
Atribut judul
Dengan title atribut ini digunakan untuk memberikan konsultasi teks tentang unsur atau isinya. Cobalah contoh berikut untuk memahami bagaimana hal ini benar-benar bekerja.
<abbr title="World Wide Web Consortium">W3C</abbr>
<a href="images/kites.jpg" title="Click to view a larger image">
<img src="images/kites-thumb.jpg" alt="kites">
</a>
nilai dari title atribut (yaitu teks judul) ditampilkan sebagai tooltip oleh web browser ketika pengguna menempatkan kursor mouse di atas elemen.
Atribut style
Dengan style atribut memungkinkan anda untuk menentukan styling CSS aturan seperti warna, jenis huruf, border, dll. langsung dalam elemen. Mari kita lihat sebuah contoh untuk melihat cara kerjanya:
<p style="color: blue;">This is a paragraph.</p>
<img src="images/sky.jpg" style="width: 300px;" alt="Cloudy Sky">
<div style="border: 1px solid red;">Some content</div>
Atribut yang telah kita bahas di atas juga disebut global atribut. Daftar lengkap atribut untuk masing-masing elemen HTML tercantum dalam HTML5 tag referensi.
HTML Headings
Pengorganisasian Konten dengan Judul
Judul membantu dalam mendefinisikan hirarki dan struktur konten halaman web.
HTML menyediakan enam tingkatan heading tag, <h1> melalui <h6>; semakin rendah menuju tingkat angkanya, semakin besar pentingnya — oleh karena itu <h1> tag mendefinisikan paling penting menuju, sedangkan <h6> tag mendefinisikan paling penting judul dalam dokumen.
Secara default, browser menampilkan judul dalam lebih besar dan lebih berani font dari teks normal. Juga, <h1> judul yang ditampilkan dalam font terbesar, sedangkan <h6> judul yang ditampilkan dalam font terkecil.
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
Setiap kali anda menempatkan tag heading pada halaman web, web browser built-in style sheet secara otomatis membuat beberapa ruang kosong (disebut margin) sebelum dan setelah masing-masing pos. Anda dapat menggunakan CSS margin properti untuk menimpa browser default style sheet.
Anda dapat dengan mudah menyesuaikan tampilan dari pos tag HTML seperti font, ukuran, keberanian, jenis huruf, dll. menggunakan CSS font properties.
Pentingnya Judul
HTML headings memberikan informasi yang berharga dengan menyoroti topik-topik penting dan struktur dokumen, sehingga mengoptimalkan mereka dengan hati-hati untuk meningkatkan keterlibatan pengguna.
Jangan gunakan heading untuk membuat teks anda terlihat lebih BESAR atau bold. Gunakanlah hanya untuk menyoroti judul dari dokumen anda dan untuk menunjukkan struktur dokumen.
Karena mesin pencari, seperti Google, menggunakan judul untuk indeks struktur dan konten dari halaman web jadi gunakan mereka sangat bijak dalam halaman web anda.
Gunakan <h1> judul utama sebagai judul dari halaman web anda, diikuti oleh <h2> judul, maka kurang penting <h3> judul, dan sebagainya.
Gunakan <h1> tag untuk menandai paling penting menuju yang biasanya di bagian atas halaman. Dokumen HTML pada umumnya harus memiliki tepat satu <h1> judul, diikuti oleh tingkat bawah judul seperti <h2>, <h3>, <h4>, dan seterusnya.
HTML Paragraphs
Membuat Paragraf
Ayat elemen ini digunakan untuk mempublikasikan teks pada halaman web.
Paragraf didefinisikan dengan <p> tag. Tag paragraf adalah sangat dasar dan biasanya tag pertama anda akan perlu untuk mempublikasikan teks pada halaman web. Berikut ini sebuah contoh:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Penutupan Paragraf Elemen
Dalam HTML 4 dan versi sebelumnya, itu sudah cukup untuk memulai sebuah paragraf baru dengan menggunakan tag pembuka. Kebanyakan browser akan menampilkan HTML dengan benar bahkan jika anda lupa tag akhir. Misalnya:
<p>This is a paragraph.
<p>This is another paragraph.
Kode HTML dalam contoh di atas akan bekerja di sebagian besar browser web, tetapi tidak bergantung pada itu. Melupakan end tag dapat menghasilkan hasil yang tak terduga atau kesalahan.
Catatan: Untuk keperluan depan-kompatibilitas dan praktek coding yang baik, disarankan untuk menggunakan kedua tag pembuka dan penutup untuk paragraf.
Membuat Garis Istirahat
Dengan <br> tag ini digunakan untuk menyisipkan sebuah baris pada halaman web.
Karena <br> merupakan elemen kosong, sehingga tidak perlu sesuai </br> tag.
<p>This is a paragraph <br> with line break.</p>
<p>This is <br>another paragraph <br> with line breaks.</p>
Catatan: Jangan gunakan ayat kosong yaitu <p></p> untuk menambahkan ruang ekstra di halaman web anda. Browser mungkin mengabaikan paragraf kosong karena itu adalah logis tag. Gunakan CSS margin properti bukan untuk menyesuaikan ruang di sekitar unsur-unsur.
Membuat Horizontal Aturan
Anda dapat menggunakan <hr> tag untuk membuat horizontal aturan atau garis untuk visual memisahkan bagian konten pada halaman web. Seperti <br>, the <hr> tag adalah elemen kosong. Berikut ini sebuah contoh:
<p>This is a paragraph.</p>
<hr>
<p>This is another paragraph.</p>
Mengelola Ruang Putih
Biasanya browser akan menampilkan beberapa ruang yang dibuat di dalam kode HTML dengan menekan tombol spasi tombol atau tombol tab pada keyboard sebagai satu ruang. Beberapa jeda baris yang dibuat di dalam kode HTML melalui menekan tombol enter juga ditampilkan sebagai spasi tunggal.
Paragraf berikut akan ditampilkan dalam satu baris tanpa tambahan ruang:
<p>This paragraph contains multiple spaces in the source code.</p>
<p>
This paragraph
contains multiple tabs and line breaks
in the source code.
</p>
Insert untuk membuat tambahan ruang berturut-turut, sementara menyisipkan <br> tag untuk membuat baris pada halaman web anda, seperti yang ditunjukkan dalam contoh berikut:
<p>This paragraph has multiple spaces.</p>
<p>This paragraph has multiple<br><br>line<br><br><br>breaks.</p>
Mendefinisikan Preformatted Text
Kadang-kadang, menggunakan , <br>, dll. untuk mengelola ruang sangat tidak nyaman. Atau, anda dapat menggunakan <pre> tag untuk menampilkan spasi, tab, baris, dll. persis seperti yang tertulis dalam file HTML. Hal ini sangat membantu dalam menyajikan teks di mana ruang dan line breaks penting seperti puisi atau kode.
Contoh berikut akan menampilkan teks di browser seperti itu di source code:
<pre>
Twinkle, twinkle, little star,
How I wonder what you are!
Up above the world so high,
Like a diamond in the sky.
</pre>
Teks dalam <pre> elemen ini biasanya diberikan oleh browser dalam monospace atau fixed-width font, seperti Kurir, tapi anda bisa mengganti ini dengan menggunakan CSS font properti.
Posting Komentar untuk "Tutorial HTML : Mengenal Atribut HTML"