Part 3 – HTML (Tag, Elemen, Atribut dan Syntak Dasar HTML)

Tag : penanda awalan dan akhiran dari sebuah elemen pada HTML

Elemen : sebuah komponen yang menyusun dokumen HTML

Atribut : kata khusus / informasi tambahan yang berada di dalam tag elemen pembuka (atribut menentukan perilaku dari elemen)

Yang sudah di pelajari sebelumnya HTML sebuah bahasa markup untuk menampilkan sebuah teks, multimedia dan lainnya dengan menggunakan Tag, Elemen dan Atribut pada Syntak HTML.

Sebagian besar tag memiliki tag pembuka dan penutup seperti contoh berikut pembuka <> penutup </> adanya garis miring sebelum nama element, dengan contoh tag elemen bold<b></b>, tetapi ada sebagian tag yang tidak memiliki penutup, seperti tag <hr>, <br>, <img>, <link>, <meta>.

nama elemen di Tag HTML tidak bersifat case sensitive, jadi misal bisa di tulis dengan huruf besar, seperti <B>teks bold</B>, namun ada baiknya agar lebih rapih dan enak dibaca dengan menggunakan huruf kecil.

semua nama elemen membutuhkan tag, di sisi lain hanya beberapa elemen yang membutuhkan atribut.

Atribut pada elemen untuk memberikan informasi tambahan seperti contoh pada tag elemen paragraf berikut :

<p align=”center”>Web Pertamaku</p>

penjelasan:

<> tag pembuka

</>tag penutup

<p> Tag pembuka elemen paragraf

</p> Tag penutup elemen paragraf

align=”center” disebut atribut (align sebagai nama atribut, center sebagai nilai atribut)

hasil praktik dari syntak ketika di jalankan di browser, seperti berikut :

Source Code
hasil di browser

Berikut Tag Elemen HTML yang sering digunakan sampai saat ini:

  • Tag Paragraf <p></p> untuk membuat/menampilkan teks pada halaman web, contoh source code <p>ini adalah paragraf pertamaku</p>
Source code elemen paragraf dan hasil pada browser
  • Tag Images <img> untuk membuat/menampilkan gambar pada halaman web, contoh source code mengambil data dari laptop (offline) <img src=”logo.png”> source code mengambil data dari internet (online) dengan meletakan url gambar pada source <img src=”logo_keluarga_IT.png (272×90) (wp.com)“>
Source code offline dan online pada tag elemen images
  • Tag Heading <h1></h1> untuk membuat judul teks pada halaman web, dengan disediakan h1, h2, h3, h4, h5, h6, <h1> teks tingkat tertinggi/ukuran font paling besar, <h6> teks tingkat terendah/ukuran font paling terendah.
Souce dan hasil pada browser
  • Tag break <br> untuk membuat baris baru pada halaman web
source tag <br> dan hasil output pada browser
  • Tag horizontal rule <hr> digunakan untuk membuat garis lurus secara horizontal
source tag <hr> dan hasil output pada browser
  • Tag Preformatted Text <pre> digunakan untuk mengidentifikasi kumpulan teks yang harus ditampilkan secara utuh apa adanya (sesuai penulisan yang ditulis pada tag elemen body). menggunakan font Monospace atau Courier New (di Windows) seperti gambar berikut :
source tag <pre> dan hasil output pada browser
  • Tag Link (penjelasan dan contoh source bisa di lihat di google)
  • Tag List (penjelasan dan contoh source bisa di lihat di google)
    • <ul>
    • <ol>
  • Tag Tabel <table> (penjelasan dan contoh source bisa di lihat di google)
    • <th>
    • <tr>
    • <td>
  • Tag <abbr> (penjelasan dan contoh source bisa di lihat di google)
  • Tag <acronym> (penjelasan dan contoh source bisa di lihat di google)
  • Tag <address> (penjelasan dan contoh source bisa di lihat di google)
  • Tag <base> (penjelasan dan contoh source bisa di lihat di google)
  • Tag <blockquote> (penjelasan dan contoh source bisa di lihat di google)
  • Tag <button> (penjelasan dan contoh source bisa di lihat di google)
  • Tag <caption> (penjelasan dan contoh source bisa di lihat di google)
  • Tag <cite> (penjelasan dan contoh source bisa di lihat di google)
  • Tag <abbr> (penjelasan dan contoh source bisa di lihat di google)
  • Tag <code> (penjelasan dan contoh source bisa di lihat di google)
  • Tag <col> (penjelasan dan contoh source bisa di lihat di google)
  • Tag <dd> (penjelasan dan contoh source bisa di lihat di google)
  • Tag <del> (penjelasan dan contoh source bisa di lihat di google)
  • Tag <dir> (penjelasan dan contoh source bisa di lihat di google)
  • Tag <abbr> (penjelasan dan contoh source bisa di lihat di google)
  • Tag <dl> (penjelasan dan contoh source bisa di lihat di google)
  • Tag <dt> (penjelasan dan contoh source bisa di lihat di google)
  • Tag <fieldset> (penjelasan dan contoh source bisa di lihat di google)
  • Tag <menu> (penjelasan dan contoh source bisa di lihat di google)
  • Tag <optgroup> (penjelasan dan contoh source bisa di lihat di google)
  • Tag <q> (penjelasan dan contoh source bisa di lihat di google)
  • Tag <option> (penjelasan dan contoh source bisa di lihat di google)
  • Tag <script> (penjelasan dan contoh source bisa di lihat di google)
  • Tag <select> (penjelasan dan contoh source bisa di lihat di google)
  • Tag <span> (penjelasan dan contoh source bisa di lihat di google)
  • Tag <div> (penjelasan dan contoh source bisa di lihat di google)
  • Tag <style> (penjelasan dan contoh source bisa di lihat di google)
  • Tag <textarea> (penjelasan dan contoh source bisa di lihat di google)
  • Tag <big> (penjelasan dan contoh source bisa di lihat di google)
  • Tag <u> (penjelasan dan contoh source bisa di lihat di google)
  • Tag <b> (penjelasan dan contoh source bisa di lihat di google)
  • Tag <i> (penjelasan dan contoh source bisa di lihat di google)
  • Tag <small> (penjelasan dan contoh source bisa di lihat di google)
  • Tag <sup> (penjelasan dan contoh source bisa di lihat di google)
  • Tag <sub> (penjelasan dan contoh source bisa di lihat di google)
  • Tag <marquee> (penjelasan dan contoh source bisa di lihat di google)

Berikut Atribut pada Tag Elemen HTML yang sering digunakan sampai saat ini:

  • atribut text (penjelasan dan contoh source bisa di lihat di google)
  • atribut background (penjelasan dan contoh source bisa di lihat di google)
    • images
    • color
  • atribut Font (penjelasan dan contoh source bisa di lihat di google)
    • size
    • color
    • face
  • atribut style (penjelasan dan contoh source bisa di lihat di google)
  • atribut bgcolor (penjelasan dan contoh source bisa di lihat di google)
  • atribut align(penjelasan dan contoh source bisa di lihat di google)
  • atribut valign(penjelasan dan contoh source bisa di lihat di google)
  • atribut src(penjelasan dan contoh source bisa di lihat di google)
  • atribut marquee (penjelasan dan contoh source bisa di lihat di google)
Summary
Description
Sumber : domainesia.com niagahoster.com petanikode.com

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

© 2024 CatatanKu