Setelah sebelumnya admin membahas tentang Pengenalan HTML dan Text Editor, kini pudingers akan memasuki pengenalan dan penggunaan Tag, Element
dan Atribut dalam HTML. Ketiga pembahasan ini merupakan dasar dalam penulisan
kode HTML atau dasar dari seluruh tampilan halaman web yang ada di internet.
TAG HTML
Tag merupakan kode yang digunakan untuk memperkenalkan pada web browser untuk
apa text HTML yang ditulis. HTML membutuhkan cara memperkenalkan text yang
ditulis didalamnya kepada web browser, baik text itu berupa list, paragraf,
link dan sebagainya.
Dalam penulisan tag, hampir semua menggunakan pembuka dan penutup tag, dimana
objek yang di maksudkan berada diantara pembuka dan penutup tag. Berikut
penulisan tag yang digunakan dalam HTML:
| <tag> Objek yang diisi </tag> |
Perbedaan antara tag pembuka dan tag penutup yaitu, pada tag pembuka diawali
kurung sudut pembuka dan di akhiri dengan kurung sudut penutup (< >).
Sedangkan pada tag penutup, diawali dengan kurung sudut pembuka, backslash,
dan diakhiri dengan penutup kurung sudut (</ >).
Berikut beberapa jenis tag yang sering digunakan dalam HTML kalau di web
programing:
| Tag | Fungsi |
|---|---|
| <!– ….–> | Digunakan untuk memberi sebuah komentar atau keterangan |
| <!DOCTYPE html> | Digunakan untuk Mendefinisikan tipe document HTML5 |
| <a>link</a> | Mendefinisikan sebuah anchor, digunakan untuk saling menautkan antara satu dokumen HTML ke dokumen HTML yang lain (membuat link) |
| <b> .. </b> | Membuat teks menjadi tebal |
| <p> .. </p> | Membuat paragraf |
| <h1> .. </h1> | Membuat heading satu |
| <h2> .. </h2> | Membuat heading dua |
| <body> | Mendefinisikan body/isi dokument HTML |
| <head> | Mendefinisikan bagian kepala dokumen HTML |
| <title> | Mendefinisikan judul halaman |
| <div> | Mendefinisikan halaman |
| <link> | Mendefinisikan hubungan antar dokumen |
| <script> | Mendefinisikan client-side script |
| <table> | Mendefinisikan table |
| <th> | Mendefinisikan sel header di dalam sebuah table |
| <td> | Mendefinisikan sel di dalam sebuah table |
| <tr> | Membuat baris di dalam sebuah table |
| <ul> | Mendefinisikan daftar dalam format bullet |
| <li> | Mendefinisikan list |
ELEMENT HTML
Element pada HTML merupakan isi atau objek yang berada pada tag. Maksudnya,
isi yang ada diantara tag pembuka dan tag penutup di sebut dengan elemen.
Misalkan:
| !DOCTYPE html> <html> <head> <title></title> </head> <body> <strong><h2>Pengenalalan atribut HTML</h2></strong> </body> </html> |
Pada contoh diatas <h2> merupakan element h2 dan isinya ini adalah
heading dua. Dalam element ini bisa berupa text ataupun tag lain, seperti
<link> dan sebagainya.
ATRIBUT HTML
Atribut merupakan informasi tambahan yang digunakan di dalam tag pembuka.
Informasi ini bisa berupa instruksi untuk memberikan efek warna, ketebalan,
dll.
Atribut bisanya memiliki 2 bagian yaitu nama dan nilai, dapat ditulis dengan
( name=”value” ). Penulisan value diapit oleh dua tanda kutip (bisa
digunakan kutip satu atau kutip dua).
Penulisan atribut pada HTML diawali dengan penulisan tag, didalam tag
berikan atribut dan element dari tag itu sendiri, misalnya:
| !DOCTYPE html> <html> <head> <title></title> </head> <body> <h2 align="center">Pengenalalan atribut HTML</h2> </body> </html> |
Perhatikan pada syntax di atas:
- <h2> adalah tag heading 2
- align adalah nama dari atribut
- center adalah nilai/value dari atribut
- “Pengenalan atribut HTML” adalah element dari tag h2
Tidak semua tag ini membutuhkan atribut di dalamnya, namun bagi pudingers
yang bergelut di web programing akan sering menjumpai tag yang didalamnya
terdapat atribut.
PENUTUP
Jadi kesimpulannya, tag digunakan untuk memberitahu web beowser untuk apa text HTML itu dibuat. Ada dua tag, yaitu tag pembuka (< >) dan tag penutup (</ >). Objek atau isi yang ada diantara kedua tag disebut dengan element. Menambahakn informasi di dalam tag pembuka yang bisa berupa efek warna, ketebalan, font, dll. disebut dengan Atribut.
Oke pudingers! Materinya cukup disini aja. Kalau pudingers ada tambahan
tentang materi ini atau mau bertanya, silakan tulis di kolom
komentar. Insyaallah admin bakal menjawab pertanyaan pudingers.
Terimakasih sudah membaca 🤗
Klik <Next> untuk melanjutkan.
0 komentar:
Posting Komentar