Mengenal Tag Element dan Atribut pada HTML Dasar untuk Pemula
Posted by SkyLight Animation on Sabtu, 02 September 2017
Pada kesempatan kali ini saya akan menjelaskan perbedaan antar Tag, Element, dan Atribut pada HTML.
 |  |
-
Tag
Tag pada HTML adalah bahasa markup yang digunakan untuk mengubah tampilan dari suatu teks, pada umumnya teks yang ditampilkan di web browser tampilan nya akan dibedakan berdasarkan tag yang digunakan untuk melengkapi teks tersebut.
<p> </p>Tag yang memberikan efek pada teks dibuat secara berpasangan, jika ada tag pembuka maka ada tag penutup. Ketika anda mendeklarasikan tag jangan lupa menutupnya, Jika source code sudah ribuan dan ada yang tag yang tidak anda tutup kadang akan menyebabkan tata letak website yang anda buat menjadi acak-acakan, dan kadang susah untuk mencari dimana anda harus menutup tag tersebut.
Ada juga tag yang tidak perlu ditutup yaitu :
break <br>, berfungsi untuk membuat baris baru atau berganti baris.
horizontal line <hr>, adalah tag yang digunakan untuk menampilkan garis horizontal.
image <img scr="">, adalah tang yang digunakan untuk menampilkan gambar dari link yang dipanggil.
-
Element
Yang disebut sebagai Element pada HTML adalah tag yang telah diisi. contoh pada gambar diatas adalah tag <span> yang berisi teks berupa "Lorem ipsum dolor sit laborum".
-
Atribut
Atribut adalah suatu perlengkapan yang dimiliki oleh tag atau dapat ditambahkan pada suatu tag, yang berfungsi untuk mendeklarasikan suatu value nilai pada atribut tersebut. Value tersebut akan mempengaruhi hasil tag yang ditampilkan pada web browser. Masing-masing atribut memiliki kegunaan masing-masing, ada yang harus satu paket dengan tagnya (hanya dapat digunakan oleh tag tertentu), ada pula yang dapat dideklarasikan pada semua jenis tag. Contoh :
Hyperlink
<a href=""></a>tag <a> memiliki atribut href="", yang berfungsi sebagai tepat link yang dituju apabila text pada tag <a> tersebut dikilk.
Gambar
<img scr="">tag <img> memliki atribut src="", yang berfungsi untuk link gambar yang akan ditampilkan pada ketika tag <img> diinterpreterkan oleh web browser.
Berikut ini adalah susunan tag yang merupakan source code dasar HTML :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
....
</body>
</html>
Beberapa Contoh Tag pada HTML :
1. html
html adalah tag paling luar dari HTML file yang digunakan untuk membungkus menjadi 1 dari tag-tag dalam satu kesatuan yaitu HTML. Penulisan :
<html></html>2. head
head adalah bagian dimana kita bisa mendeklarasikan metadata suatu website.
Selain metadata tag <head> juga diguankan untuk mendeklarasikan Framework website dapat berupa CSS, JS, font yang bersifat external. Penulisan
<head></head>3. title
tag tittle berisi tentang nama dari halaman yang akan anda buat, ketika file html dibuka di browser maka title akan tampil sebagai site title.
contoh :
Source Code :
<title>Belajar HTML</title>
Hasil :
4. body
<body> adalah bagian dimana dapat mengisikan content atau isi dari web tersebut.
Gambar diatas menjelaskan isi dari tag <body>. didalam tag body terdapat bebrapa tag yang berfungsi untuk menyusun tata letak dari suatu website.
5. heading
heading adalah tag yang diguankan untuk mendeklarasikan judul, sub judul, dan judul-judul yang lain. terdapat 6 buah heading yang dapat digunakan yaitu <h1> sampai dengan <h6>, masing masing heading memiliki size atau ukuran yang berbeda sesuai dengan kebutuhan dalam meletakkan judul. berikut ini adalah contoh sourcecode dan hasilnya :
Source Code:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Hasil :
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
6. paragraf
<p></p> adalah tag yang digunakan untuk mengelompokan bebrapa kalimat yang akan tampil supaya dapat tersusun dalam suatu paragraf. Contoh :
Source Code :
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p>Duis aute irure dolor in reprehenderit sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
Hasil :
Lorem ipsum dolor sit amet, consectetur adipisicing elit, exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
7. bold
bold tag yang digunakan untuk merubah text yang ada di dalam nya menjadi BOLD / cetak Tebal. Contoh :
Source Code :
<b>Cetak Tebal</b>
Hasil :
Cetak Tebal
8. italic
italic adalah tag yang digunakan untuk merubah teks atau karakter yang ada di dalam nya menjadi Italic / cetak miring. Contoh :
Source Code :
<i>Cetak Miring</i>
Hasil :
Cetak Miring
9. underline
underline adalah tag yang digunakan untuk merubah teks atau karakter yang ada di dalam nya menjadi Underline / bergaris bawah. Contoh :
Source Code :
<u>Ditampilkan dengan Underline</u>
Hasil :
Ditampilkan dengan Underline
Ditampilkan dengan Underline
Sumber : Mega Aspada Computer
~Semoga Bermanfaat~
0 komentar:
Please leave some comments