Asalamualaikum Wr. Wb.
- Pendahuluan
- Latar Belakang Mengetahui tentang apa saja tag (sintak), atribut dalam html
- Pokok Bahasan Pengertian dan penjelasan tentang tag (sintak) dan atribut yang ada pada html besrta kumpulan tag tag dan atribut yang ada pada html
- Alat Yang Dibutuhkan
- Laptop
- Tujuan Agar mengerti apa saja tag tag dan atribut yang dapat di gunakan pada html tentang apa itu tag dan atribut dalam html
- Isi
- Pembahasan
- Pengertian Tag (Sintak) Tag (sintak) adalah suatu perintah perinntah html yang dapat dibaca oleh browser untuk menampilkan data atau objek pada suatu halaman web berdasarkan dengan tag yang digunakan untuk menampilkan suatu data tersebut. Data tersebut bisa berupa text, gambar, vidio, ataupun gambar. Tag akan bisa dibaca oleh browser jika penggunaan tag tersebut berada diantara dua simbol < dan > (yang bisa disebut tag). Sebuah konten dapat muncul pada halaman web jika ada tag pembuka <nama tag> isi dari konten yang akan ditampilkan dan diakhiri dengan tag penutup </nama tag> dan tag pembuka harus sama dengan tag penutup, misalnya :
- <h1>Apa Itu Tag</h1> Penulisan diatas adalah benar dan hasilnya atau data yang akan di tampilkan akan muncul di halaman web , karena tag pembuka dan tag penutup sama.
- <h1>Apa itu Tag</p> Penulisan diatas adalah salah dan hasilnya tidak akan muncul sesuai yang di inginkan karena tag pembuka dan penutup berbeda.
- Pengertian Atribut
- Kumpulan tag tag pada html
- Kumpulan Atribut pada html
Tetapi ada sebagian tag pada html yang bisa menampilkan data hanya dengan single tag atau tanpa penutup <nama tag /> , Misalnya tag img <img />, tag hr <hr />, dan tag br <br />.
Nama Tag Deskripsi
- <!--...--> Mendefinisikan komentar
<!DOCTYPE> Mendefinisikan tipe atau jenis dokumen
<a> Mendefinisikan hyperlink
<abbr> Mendefinisikan sebuah singkatan atau akronim
<address> Mendefinisikan informasi kontak penulis atau pemilik dokumen
<applet> Mendefinisikan embedded applet tetapi tag ini tidak didukung pada HTML5. Gunakan <embed> atau <object> sebagai penggantinya pada HTML5.
<area> Mendefinisikan sebuah area didalam image-map
<article> Mendefinisikan sebuah artikel
<aside> Mendefinisikan selain dari konten halaman
<audio> Mendefinisikan konten suara
<b> Mendefinisikan teks bold atau cetak tebal
<base> Menentukan basis URL atau target untuk semua URL relatif dalam dokumen
<basefont> Menentukan warna default, ukuran, dan font untuk semua text dalam dokumen. Tetapi tag ini tidak didukung pada HTML5. Gunakan CSS sebagai penggantinya pada HTML5
<bdi> Isolat bagian teks yang mungkin diformat dalam arah yang berbeda dari teks lain di luar itu sendiri
<bdo> Menganti arah teks saat ini
<big> Mendefinisikan teks besar dalam artikel
<blockquote> Mendefinisikan bagian yang dikutip dari sumber lain
<body> Mendefinisikan tubuh atau isi suatu dokumen
<br> Mendefinisikan satu baris baru atau sama dengan fungsi tombol enter
<button> Mendefinisikan sebuah tombol
<canvas> Digunakan untuk mengambar grafik, dengan cepat melalui scripting (javascript)
<caption> Mendefinisikan sebuah caption dari sebuah tabel
<center> Mendefinisikan teks berposisi di tengah, tetapi tag ini tidak didukung pada HTML5. Gunakan css sebagai gantinya pada html5
<cite>
<code>
<col>
<colgroup>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1>sampai<h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<keygen>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<menu>
<menuitem>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>
Elemen, Tag dan atribut pada HTML sebenarnya saling berkaitan, hanya saja disini atribut memiliki tugas khusus untuk memberikan informasi atau sifat tambahan yang akan diberikan kepada tag dan elemen yang mengandung atribut tersebut.
Bagaimana Cara menggunakan Atribut pada Tag HTML?
Penulisan Atribut selalu diletakan dalam
<tag_pembuka> setelah nama tag, sebagai contoh: <tag_pembuka name="value">. Dari tag dan atribut tersebut yang dimaksud dengan atribut adalah name="value". Informasi ini berupa instruksi tambahan yang tersusun dari dua bagian yaitu atribut Name dan atribut Value dalam penulisannya atribut valueharus ditulis diantara tanda kutip ganda atau tanda kutip tunggal.
Apa yang dimaksud dengan atribut Name dan atribut Value?
Atribut Name adalah nama informasi atau nama sifat apa yang akan di tambahkan kepada tag dan elemen yang mengandung atribut tersebut. Sedangkan Atribut Value adalah Nilai dari sebuah informasi atau nilai sifat apa yang akan di berikan kepada tag dan elemen yang mengandung atribut tersebut.
Kapan kita harus menggunakan tanda kutip tunggal atau tanda kutip ganda?
Dalam penggunaanya tanda kutip tunggal dan ganda sama saja tergantung kepada programmernya mau pilih yang mana asal konsisten, namun ada aturan pembungkusan tanda kutip dalam beberapa kondisi ketika value dalam atribut itu harus bernilai tanda kutip , proses pembungkusan tersebut dapat ditulis seperti berikut ini:
<p title='isi "konten" CodePolitan'> Atau <p title="isi 'konten' CodePolitan">
Contoh Menambahkan Atribut dalam Tag pada HTML yang SALAH
Code :
<img src="https://www.codepolitan.com/wp-content/uploads/2016/05/Tag-dan-Atribut-pada-HTML-1.png" width="300 height=200">
Tampilan :
Perhatikan tag yang digunakan adalah tag IMG, "SRC" disana merupakan atribut name dan "https://www.codepolitan.com/wp-content/uploads/2016/05/Tag-dan-Atribut-pada-HTML-1.png" adalah atribut valueyang sudah ditulis dengan benar. Lalu letak salahnya dimana? perhatikan penulisan atribut width pada code diatas
width="300 height=200", dengan cara penulisan seperti itu informasi tambahan yang diberikan melalui atribut tersebut tidak dapat dibaca oleh web browser sehingga tampil pada web browser tidak ada perubahan atau merupakan tampilan dari ukuran yang sebenarnya.
Contoh Menambahkan Atribut dalam Tag pada HTML yang BENAR
Code :
<img src="https://www.codepolitan.com/wp-content/uploads/2016/05/Tag-dan-Atribut-pada-HTML-1.png" width="300" height="200">
Tampilan :
Perhatikan tag yang digunakan adalah tag IMG, "SRC" disana merupakan atribut name dan "https://www.codepolitan.com/wp-content/uploads/2016/05/Tag-dan-Atribut-pada-HTML-1.png" adalah atribut value yang sudah ditulis dengan benar. Perhatikan penulisan atribut width pada code diatas
width="300" height="200", dengan cara penulisan seperti ini informasi tambahan yang diberikan melalui atribut tersebut dapat dibaca oleh web browser sehingga tampil pada web browser berubah sesuai dengan atribut name dan atribut value yang diberikan.
Oke, Pembahasan Tag dan Atribut pada HTML sudah selesai, kita akan sambung belajar HTMLnya pada kesempatan berikutnya, sampai ketemu lagi keep watch and learn at CodePolitan.
Kumpulan Atribut pada HTML yang sering digunakan
| Atribut | Penjelasan |
|---|---|
| alt | Menentukan teks alternatif untuk gambar, ketika gambar tidak dapat ditampilkan |
| disable | Menentukan bahwa elemen input harus dinonaktifkan |
| href | enentukan URL (Alamat web) untuk link |
| id | Menentukan ID link untuk elemen |
| src | Menentukan URL (Alamat web) untuk gambar |
| style | menentukan style CSS inline untuk suatu elemen |
| title | Menampilkan tool tip tentang informasi tambahan pada elemen |
sebenarnya masih banyak lagi atribut yang bisa digunakan pada HTML, namun tergantung kepada tag apa yang digunakan, karena beberapa tag memiliki atribut khususnya masing- masing.
