Tutorial Html : Tag Atribut Element
Di tutorial sebelumnya kita sudah mempersiapkan kebutuhan untuk belajar html seperti aplikasi web browser, text editor dan juga mengenal dasar html.
Di tutorial kali ini kita akan mulai menulis kerangka dasar html dan berkenalan dengan tag, atribut dan element.
Doctype
Sebelum kita mulai membuat kerangka dasar halaman html, penting untuk di ketahui apa itu
<!DOCTYPE html>
Penulisan deklarasi doctype ada di awal sebuah halaman html, doctype memberikan informasi kepada browser bahwa halaman menggunakan html5.
Kerangka Dasar Halaman HTML
Halaman html terdiri dari tag tag html hingga membentuk struktur sebuah halaman html, tag tag html mendeskripsikan isi dari content nya.
Mari kita mulai membuat kerangka dasar html
<!DOCTYPE html>
<html>
<head>
<title>Ini Adalah Judul Halaman!</title>
</head>
<body>
<h1>Ini adalah judul paragraf.</h1>
</body>
</html>
Dapat kita lihat, tag html merupakan tag awal yang membungkus tag tag lain di dalamnya.
Tag html ini memberi tahu browser bahwa halaman ini adalah html dan browser harus me render nya.
Selanjutnya di dalam tag html terdapat beberapa tag lainnya seperti tag head dan tag body
Tag Head
Tag head digunakan untuk memberikan metadata yang mendeskripsikan halaman kepada browser.
Metadata adalah data tambahan yang tidak muncul di browser.
Memberikan Judul
Salah satu nya tag title digunakan untuk memberikan judul halaman web.
Isi content dari tag title tidak muncul di halaman web, tetapi muncul pada tab di browser.
<title>Ini Adalah Judul Halaman Web Html</title>
Memberikan Deskripsi
Di dalam tag head kita juga dapat menambahkan metadata description yang berisi data tentang deskripsi halaman tersebut.
<meta name="description" content="Ini deskripsi dari halaman!">
Merubah icon
<link rel="icon" href="/images/favicons/favicon.ico">
Menambahkan metadata author
<meta name="author" content="penulis">
Tag Body
Tag body digunakan untuk menyimpan content yang di tampilkan di halaman web browser.
Content yang akan di tampilkan harus di letakkan di dalam tag body.
Tag
Kebanyakan tag html membutuhkan tag pembuka dan tag penutup. Di antara tag pembuka dan tag penutup adalah isi content nya.
Yang membedakan tag penutup adalah, tag penutup menggunakan “slash” di depannya.
<tagpembuka>isi content</tagpenutup>
Selain itu tag html juga ada yang tidak menggunakan tag penutup biasa di sebut (self-enclosing).
Tag html self-enclosing tidak memiliki content di tengah tag, karena tidak mempunyai tag penutup.
Element
Sekarang kita sudah tau apa itu tag tag di dalam html.
Selanjutnya kita akan bahas apa itu element?
Secara singkat element adalah tag html berserta isi content nya.
Kesatuan dari tag html dan isi content nya itu lah yang di sebut element.
Atribut
Tadi kita sudah mengenal apa itu tag html, sekarang kita akan lanjut ke pembahasan atribut.
Sesuai namanya atribut adalah atribut dari sebuah tag html.
Setiap tag html memiliki atribut nya masing-masing.
<a href="index.html">Home</a>
Contoh di atas adalah tag a yang berfungsi untuk membuat link.
Tag a memiliki beberapa atribut salah satunya atribut href.
Atribut hfref digunakan untuk memberi tahu tujuan dari link tersebut.
Dan tujuan link nya itu adalah halaman index.html
Class
Class merupakan atribut penting dalam html, Hampir semua tag html dapat menggunakan atribut class.
Atribut class sering digunakan untuk menerapkan style css karena atribut class dapat di gunakan di banyak elemen.
<p class="biru">Paragraf Ini Berwarna Biru</p> <p class="merah">Paragraf Ini Berwarna Merah</p>
ID
Atribut ID umumnya digunakan hanya untuk 1 emelent html pada sebuah halaman web. Biasanya atribut ID banyak digunakan pada bahasa pemrograman javascript untuk membuat sebuah website menjadi interaktif.
<p id="biru">Paragraf Ini Berwarna Biru</p> <p id="merah">Paragraf Ini Berwarna Merah</p>
