www.WarungProgram.com

Tempat Belajar Bahasa Pemrograman Dari Dasar


Tutorial Html : Tag, Atribut dan Element

Penulis : Zulfikar Kategori : Belajar HTML

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>

< Tutorial HTML Sebelumnya

Tutorial HTML Selanjutnya >


 

*
*


Dapatkan Tutorial Terbaru Dari WarungProgram.com

Tutorial Lainnya