Untuk memberitahu perintah apa yang harus di eksekusi atau dijalankan oleh sebuah browser, dibutuhkan tanda atau kode khusus untuk setiap perintah dalam dokumen HTML. Ada tiga istilah yang sering digunakan untuk menyebut tanda-tanda tersebut.
TAG HTML
Tag HTML berisi nama untuk sebuah element HTML yang diantarai oleh tanda <>. Contoh tag untuk elemen paragraf adalah <p> . Selain sebagai nama, juga merupakan kode yang harus dijalankan untuk element tersebut.
Tag ditulis dengan format <nama tag> untuk tag pembuka dan </nama tag> untuk tag penutup. Tag pembuka dan tag penutup biasanya ditulis secara beriringan. Contohnya element HTML selalu di awali dengan tag <html> dan diakhiri dengan tag </html>. Namun, ada juga tag yang tidak memiliki tag penutup contohnya tag <br> (line break) untuk membuat baris baru pada paragraf.
ELEMENT HTML
Element menunjukkan sebuah struktur dari dokumen HTML. Sebuah element biasanya terdiri dari <tag pembuka>, </tag penutup>, dan konten diantara kedua tag tersebut.
Element yang memiliki konten biasa disebut dengan Nested Element. Contohnya element HTML berisi semua konten dokumen HTML.
<!DOCTYPE html> <html> <head> <tittle>Maszeke</tittle> </head> <body> <p>Ini Adalah Paragraf</p> <h1>Ini Adalah Heading</h1> </body> </html>
Di dalam element HTLM berisi konten berupa element lain yaitu body.
<body> <p>Ini Adalah Paragraf</p> <h1>Ini Adalah Heading</h1> </body>
Di dalam element body terdapat element paragraf dan heading. Element paragraf berisi konten: Ini Adalah Paragraf.
<p>Ini Adalah Paragraf</p>
Element heading berisi konten: Ini Adalah Heading.
<h1>Ini Adalah Heading</h1>
Konten sebuah element dapat berupa beberapa element
<p> Ini Adalah Tag <br> Yang Tidak Berisi Konten <p>
Tag <br> berfungsi untuk membuat baris baru dalam teks. Untuk menutup tag tersebut, kamu dapat menambahkan slash pada tag pembuka seperti ini : <br /> .
HTML5 tidak menyarankan untuk menutup tag tersebut. Kecuali jika kamu ingin membuatnya terbaca dengan XML maka kamu harus menutup semua element pada HTML dokument yang kamu buat.
ATTRIBUT HTML
Attribut pada HTML berfungsi untuk memberikan informasi tambahan atau perintah yang lebih spesifik untuk sebuah element HTML. Attribut diletakkan di dalam tag pembuka.
Format Penulisan Attribut
<nama tag nama attribut="value">
Contoh Attribut Links
<a href="www.maszeke.blogspot.com>Maszeke</a>
Nama tag : a
Nama attribut : href
Value : www.maszeke.blogspot.com
Attribut links digunakan untuk membuat teks atau button yang ketika diklik akan menuju halaman web yang diinginkan.
Untuk membuat sebuah attribut, kalian bisa menggunakan format Uppercase atau Lowercase. Kami sarankan untuk konsisten menggunakan salah satunya agar lebih mudah ketika membaca codenya. Contohnya untuk membedakan antara huruf i uppercase " I " dengan L lowercae " l ". MasZeke menyarankan untuk menggunakan format lowercase dalam tutorial ini.
Selain itu, Maszeke juga menyarankan untuk selalu menggunakan Quotation (") untuk setiap value dalam attribut. Sebenarnya bisa saja tidak menggunakan tanda petik (") dengan syarat value yang dibuat terdiri satu kata. Namun, jika valuenya terdiri dari dua atau lebih kata maka kata kedua dan seterusnya akan dianggap sebagai value yang berbeda.
Contoh :
Salah
<p title=About Maszeke>
Benar
<p title="About Maszeke">
Untuk itu kami sarankan untuk tetap menggunakan quotation baik ketika valuenya hanya satu kata ataupun lebih. Setiap tag memiliki attributnya masing-masing. Tidak hanya satu value, tetapi dapat berisi beberapa value untuk setiap pemanggilan satu attribut.
STRUKTUR DASAR HTML
Nah sekarang kita akan membahas struktur dasar dari sebuah file HTML. Kenapa disebut dasar? Karena minimal dengan struktur ini kalian sudah bisa menjalankan sebuah dokumen HTML di browser kalian.
Dalam penulisan sebuah file HTML, harus selalu di awali dengan deklarasi <!DOCTYPE>. Deklarasi tersebut berfungsi untuk memberitahu browser tipe file HTML yang kita gunakan. Deklarasi ini diletakkan pada bagian paling atas dokumen. Deklarasi yang digunakan untuk tipe HTML5 adalah <!DOCTYPE html>.
Selanjutnya untuk bagian isinya sendiri, HTML selalu dimulai dengan tag <html> dan diakhiri dengan tag </html>. Diantara tag <html> dan </html> berisi elemen-elemen yang akan di eksekusi oleh browser. Salah satu elemen yang berada dalam tag tersebut adalah elemen body dan elemen head. elemen body diawali dengan tag <body> yang diakhiri dengan tag </body>. Semua elemen yang berada diantara tag tersebut akan ditampilkan oleh browser. Sedangkan elemen head, diawali dengan tag <head> dan diakhiri dengan tag </head>. Tag ini berisi informasi-informasi mengenai halamam web yang kita buat dan tidak ditampilkan pada browser.
Dalam penulisan sebuah file HTML, harus selalu di awali dengan deklarasi <!DOCTYPE>. Deklarasi tersebut berfungsi untuk memberitahu browser tipe file HTML yang kita gunakan. Deklarasi ini diletakkan pada bagian paling atas dokumen. Deklarasi yang digunakan untuk tipe HTML5 adalah <!DOCTYPE html>.
Selanjutnya untuk bagian isinya sendiri, HTML selalu dimulai dengan tag <html> dan diakhiri dengan tag </html>. Diantara tag <html> dan </html> berisi elemen-elemen yang akan di eksekusi oleh browser. Salah satu elemen yang berada dalam tag tersebut adalah elemen body dan elemen head. elemen body diawali dengan tag <body> yang diakhiri dengan tag </body>. Semua elemen yang berada diantara tag tersebut akan ditampilkan oleh browser. Sedangkan elemen head, diawali dengan tag <head> dan diakhiri dengan tag </head>. Tag ini berisi informasi-informasi mengenai halamam web yang kita buat dan tidak ditampilkan pada browser.
Berikut adalah gambaran struktur dasar HTML :
<!DOCTYPE html>
<html>
<html>
<head>
<title>Page title</title>
</head>
<body>
</body>
</html>
<h1>My First Heading</h1>
<p>My First paragraph.</p>
Dan pada Browser akan ditampilkan seperti ini
NOTE :
<!DOCTIPE html > : Mendeklarasikan tipe HTML5
<html>...</html> : Bagian isi halaman web
<head>...</head> : Berisi informasi web, tidak ditampilakan pada browser
<title>...</title> : Judul halaman
<body>...</body> : Berisi informasi yang akan ditampilkan oleh browser
<h1>...</h1> : Heading h1
<p>...</p> : Paragraf
Kesimpulannya, terdapat 3 istilah yang sering dugunakan untuk menggambarkan bagian-bagian HTML yaitu tag, element, dan attribut. Untuk membuat desain web kamu harus tau struktur dasarnya yaitu deklarasi <!DOCTYPE> dan bagian element HTML. Dibagian HTML terdapat element head yang berisi informasi tentang web dan tidak ditampilkan pada browser, dan juga element body yang berisi element-element atau konten yang akan ditampilkan pada browser.
Sekian untuk tutorial kali ini, selanjutnya kita akan membahas tentang element Heading, paragraf, dan Horizontal Rules pada HTML.
Belum ada tanggapan untuk "Tutorial HTML Part 3 - Mengenal Tag, Element, dan Attribut Serta Struktur Dasar Document HTML"
Post a Comment