Sabtu, 20 Oktober 2018

Belajar Tag HTML

By  at 16.00    No comments

Hallo guys kali ini Padil akan membahas pertanyaan seputar tag dan atribut pada html, dimulai dari pertanyaan apa yang dimaksud dengan tag dan atribut pada HTML? apa saja kumpulan tag pada HTML? bagaimana penggunaan dan penulisan tag dan atribut yang baik pada html? dari beberapa pertanyaan tersebut kita akan kupas satu persatu, sebelum kita membahas tentang tag dan atribut perlu di ingat kembali bahwa dokumen HTML ini disusun oleh tag- tag markup dan setiap tag pada HTML menjelaskan perintah isi dokumen yang berbeda- beda.

Ø Apa itu Tag? Apa yang dimaksud dengan Tag pada HTML?
Tag adalah suatu penanda untuk menandai elemen-elemen dalam suatu dokumen HTML dan Fungsi Tag adalah untuk memberikan instruksi atau memberitahu kepada browser bagaimana suatu objek di tampilkan berdasarkan Tag yang di gunakan, objek disini bisa berupa teks, video, audio dan gambar.

Ø  Tag pada HTMLBagaimana Cara menggunakan Tag pada HTML?
Penggunaan Tag itu berada diantara dua karakter < dan > dengan demikian perintah tersebut dapat dikenali oleh browser dan memberitahu web browser bagaimana suatu objek ditampilkan. Secara umum penggunaan tag pada HTML itu berpasang- pasangan dimulai dengan <tag_pembuka> Isi dari konten  </tag_penutup>, namun ada juga tag yang dalam penulisannya berdiri sendiri seperti <nama_tag/> tag tersebut disebut dengan Void Element.

Contoh Menggunakan Tag pada HTML :

<h1> Isi Konten </h1> Belajar HTML sangat asyik

Tampilan :Perhatikan tag pembuka di atas adalah H1 dan tag penutupnya adalah H1, penulisan seperti itu merupakan contoh yang BENAR, karena tag pembuka H1 memiliki tag penutup H1 sehingga penulisan yang terkena dampak H1 hanyalah tulisan yang berada pada elemen H1 saja.
Kalian tidak boleh menggunakan tag HTML seperti ini ya :

<h1> Isi Konten </p> Belajar HTML sangat asyik

Tampilan :Perhatikan tag pembuka di atas adalah H1 dan tag penutupnya adalah P, penulisan seperti itu merupakan contoh yang SALAH, karena tag pembuka H1 menjadi tidak memiliki tag penutup sehingga semua tulisan yang masuk dikategorikan sebagai dokumen H1.

Ø  Kumpulan Tag pada HTML
Karena banyak sekali Tag dan atribut pada HTML, padil akan bantu untuk mendefinisikan kegunaan Macam- macam Tag secara satu persatu, pada tabel dibawah ini:

Tag
Penjelasan
<!--...-->
Mendefinisikan Komentar
<!DOCTYPE>
Mendefinisikan tipe atau jenis dokumen
<a>
Mendefinisikan hyperlink
<abbr>
Mendefinisikan sebuah singkatan atau akronim
<acronym>
Tag ini tidak didukung pada HTML5. Gunakan <abbr> sebagai penggantinya pada HTML5. Mendefinisikan akronim
<address>
Mendefinisikan informasi kontak penulis atau pemilik dokumen
<applet>
Tag ini tidak didukung pada HTML5. Gunakan <embed> atau <object> sebagai penggantinya pada HTML5. Mendefinisikan embedded applet
<area>
Mendefinisikan sebuah area didalam image-map
<article>
Logo HTML5 : Mendefinisikan sebuah artikel
<aside>
Logo HTML5 :  Mendefinisikan selain dari konten halaman
<audio>
Logo HTML5 : Mendefinisikan konten suara
<b>
Mendefinisikan teks bold atau cetak tebal
<base>
Menentukan basis URL atau target untuk semua URL relatif dalam dokumen
<basefont>
Tag ini tidak didukung pada HTML5. Gunakan CSS sebagai penggantinya pada HTML5. Menentukan warna default, ukuran, dan font untuk semua teks dalam dokumen
<bdi>
Logo HTML5 :  Isolat bagian teks yang mungkin diformat dalam arah yang berbeda dari teks lain di luar itu sendiri
<bdo>
Mengganti arah teks saat ini
<big>
Tag ini tidak didukung pada HTML5. Gunakan CSS sebagai penggantinya pada HTML5. Mendefinisikan teks besar
<blockquote>
Mendefinisikan bagian yang dikutip dari sumber lain
<body>
Mendefinisikan tubuh atau badan dokumen
<br>
Mendefinisikan satu baris tunggal atau sama dengan fungsi enter
<button>
Mendefinisikan sebuah tombol
<canvas>
Logo HTML5 : Digunakan untuk menggambar grafik, dengan cepat, melalui scripting (biasanya JavaScript)
<caption>
Mendefinisikan caption dari sebuah tabel
<center>
Tag ini tidak didukung pada HTML5. Gunakan CSS sebagai penggantinya pada HTML5. Mendefinisikan teks yang posisinya berada ditengah
<cite>
Mendefinisikan Judul karya
<code>
Mendefinisikan bagian dari code pada komputer
<col>
Menentukan sifat kolom untuk setiap kolom dalam <colgroup> element
<colgroup>
Menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk memformat
<datalist>
Logo HTML5 : Menentukan daftar pilihan yang telah ditentukan untuk kontrol input
<dd>
Mendefinisikan deskripsi / nilai istilah dalam daftar deskripsi
<del>
Mendefinisikan teks yang telah dihapus dari dokumen
<details>
Logo HTML5 : Mendefinisikan rincian tambahan bahwa pengguna dapat melihat atau menyembunyikan
<dfn>
Merupakan contoh mendefinisikan istilah
<dialog>
Logo HTML5 : Mendefinisikan sebuah kotak dialog atau jendela
<dir>
Tag ini tidak didukung pada HTML5. Gunakan <ul> sebagai penggantinya pada HTML5. Mendefinisikan daftar direktori
<div>
Mendefinisikan sebuah bagian dalam sebuah dokumen
<dl>
Mendefinisikan daftar deskripsi
<dt>
Mendefinisikan istilah / nama dalam daftar deskripsi
<em>
Mendefinisikan menekankan teks
<embed>
Logo HTML5 : Mendefinisikan sebuah wadah untuk eksternal (non-HTML) aplikasi
<fieldset>
Sebauh Grup untuk pengelompokan dalam form
<figcaption>
Logo HTML5 : Mendefinisikan sebuah caption untuk <figure> element
<figure>
Logo HTML5 : Menentukan konten mandiri
<font>
Tag ini tidak didukung pada HTML5. Gunakan CSS sebagai penggantinya pada HTML5. Mendefinisikan font, warna, dan ukuran dari sebuah teks
<footer>
Logo HTML5 : Mendefinisikan sebuah footer dari sebuah dokumen atau section
<form>
Mendefinisikan sebuah form HTML untuk input pengguna
<frame>
Tag ini tidak didukung pada HTML5. Mendefinisikan sebuah jendela (frame) dalam sebuah frameset
<frameset>
Tag ini tidak didukung pada HTML5. Mendefinisikan sebuah satu set frames
<h1> sampai <h6>
Mendefinisikan headings pada HTML
<head>
Mendefinisikan informasi tentang dokumen
<header>
Logo HTML5 : Mendefinisikan sebuah header untuk dokumen atau bagian dokumen
<hr>
Mendefinisikan perubahan tematik dalam konten atau memberikan garis pada dokumen
<html>
Mendefinisikan root dari sebuah dokumen HTML
<i>
Mendefinisikan sebuah bagian dari teks dengan suara alternatif atau suasana hati
<iframe>
Mendefinisikan sebuah frame inline
<img>
Mendefinisikan sebuah image
<input>
Mendefinisikan sebuah input control
<ins>
Mendefinisikan teks yang telah dimasukkan ke dalam dokumen
<kbd>
Mendefinisikan input keyboard
<keygen>
Logo HTML5 : Mendefinisikan sebuah key-pair generator field (for forms)
<label>
Mendefinisikan sebuah label dari sebuah <input> element
><legend>
Mendefinisikan sebuah caption dari sebuah <fieldset> element
<li>
Mendefinisikan sebuah daftar item
<link>
Mendefinisikan hubungan antara dokumen dengan sumber daya eksternal (digunakan untuk link ke style sheet)
<main>
Logo HTML5 : Menentukan konten utama dari dokumen
<map>
Mendefinisikan client-side image-map
<mark>
Logo HTML5 : Mendefinisikan ditandai / teks yang disorot
<menu>
Mendefinisikan daftar / menu perintah
<menuitem>
Mendefinisikan item perintah / menu bahwa pengguna dapat memanggil dari menu popup
<meta>
Mendefinisikan metadata tentang sebuah dokumen HTML
<meter>
Logo HTML5 : Mendefinisikan pengukuran skalar dalam kisaran dikenal (gauge)
<nav>
Logo HTML5 : Mendefinisikan navigasi untuk links
<noframes>
Tag ini tidak didukung pada HTML5. Mendefinisikan sebuah konten alternatif untuk pengguna yang tidak mendukung frame
<noscript>
Mendefinisikan sebuah konten alternatif untuk pengguna yang tidak mendukung script sisi klien
<object>
Mendefinisikan sebuah embedded objek
<ol>
Mendefinisikan sebuah daftar tersusun
<optgroup>
Mendefinisikan sekelompok opsi terkait dalam daftar drop-down
<option>
Mendefinisikan sebuah option dari sebuah daftar drop-down
<output>
Logo HTML5 : Mendefinisikan hasil dari sebuah perhitungan
<p>
Mendefinisikan sebuah paragraph
<param>
Mendefinisikan sebuah parameter untuk sebuah object
<pre>
Mendefinisikan teks preformatted
<progress>
Menggambarkan kemajuan tugas
<q>
Mendefinisikan sebuah kutipan singkat
<rp>
Logo HTML5 : Mendefinisikan apa yang harus ditampilkan di browser yang tidak mendukung penjelasan ruby
<rt>
Logo HTML5 : Mendefinisikan sebuah penjelasan / pengucapan karakter (untuk tipografi Asia Timur)
<ruby>
Logo HTML5 : Mendefinisikan sebuah penjelasan ruby (untuk tipografi Asia Timur)
<s>
Mendefinisikan teks yang sudah tidak benar
<samp>               
Mendefinisikan contoh output dari program komputer
<script>               
Mendefinisikan sebuah script dari sisi klien
<section>
Logo HTML5 : Mendefinisikan sebuah section didalam sebuah dokumen
<select>
Mendefinisikan sebuah daftar drop-down
<small>
                Mendefinisikan teks kecil
<source>
Logo HTML5 : Mendefinisikan lebih dari satu sumber media untuk elemen media seperti (<video> dan <audio>)
<span>
Mendefinisikan sebuah section didalam sebuah dokumen
<strike>
Tag ini tidak didukung pada HTML5. Gunakan <del> atau <s> sebagai penggantinya pada HTML5. Mendefinisikan teks strikethrough
<strong>
Mendefinisikan teks yang penting
<style>
Mendefinisikan informasi style untuk sebuah dokumen
<sub>
Mendefinisikan teks subscripted
<summary>
Logo HTML5 : Mendefinisikan sebuah judul yang terlihat dalam sebuah <details> element
<sup>
Mendefinisikan teks superscripted
<tabel>
Mendefinisikan sebuah tabel
<tbody>
Grup isi tubuh dalam sebuah tabel
<td>
Mendefinisikan sebuah cell didalam sebuah tabel
<teksarea>
Mendefinisikan sebuah input control multiline atau teks area
<tfoot>
Grup isi footer dalam sebuah tabel
<th>
Mendefinisikan sebuah header cell didalam sebuah tabel
<thead>
Grup header dalam sebuah tabel
<time>
Logo HTML5 : Mendefinisikan sebuah tanggal atau waktu
<title>
Mendefinisikan sebuah title untuk dokumen
<tr>
Mendefinisikan sebuah row didalam sebuah tabel
<track>
                Logo HTML5 : Mendefinisikan trek teks untuk elemen media yang (<video> dan <audio>)
<tt>
Logo HTML5 : Tag ini tidak didukung pada HTML5. Gunakan CSS sebagai penggantinya pada HTML5. Mendefinisikan teletype teks
<u>
Mendefinisikan teks yang harus berbeda dari teks biasa
<ul>
Mendefinisikan sebuah unordered list
<var>
Mendefinisikan sebuah variable
<video>
Logo HTML5 : Mendefinisikan sebuah video atau movie
<wbr>
Logo HTML5 : Mendefinisikan sebuah kemungkinan line-break

Ø  Apa itu Atribut? Apa yang dimaksud dengan Atribut pada Tag HTML?
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 value harus 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" DilsBlog'> Atau <p title="isi 'konten' DilsBlog">

Contoh Menambahkan Atribut dalam Tag pada HTML :
<img src="https://static.cdn-cdpl.com/wp-images/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://static.cdn-cdpl.com/wp-images/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.
Kalian tidak boleh menggunakan tag HTML seperti ini ya :

<img src="https://static.cdn-cdpl.com/wp-images/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://static.cdn-cdpl.com/wp-images/2016/05/Tag-dan-Atribut-pada-HTML-1.png" adalah atribut value yang 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.
Oke, Pembahasan Tag dan Atribut pada HTML sudah selesai, kita akan sambung belajar HTMLnya pada kesempatan berikutnya, sampai ketemu lagi keep watch and learn my blog.

Ø  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.