Pada penulisan script HTML akan bertemu dengan yang namanya Tag, Elemen, dan Atribut. Lalu apa maksud dari ke 3 hal tersebut ? Dalam postingan kali ini akan memberi tahu apa itu Tag, Elemen, Atribut serta struktur dasar HTML. Oke langsung saja ya ..
TAG
Tag adalah Suatu teks khusus yang memberi tahu web browser bagaimana teks atau objek yang kita buat akan ditampilkan. Hampir semua tag html itu ditulis secara berpasangan, maksudnya ada tag pembuka dan tag penutup. Tag selalu di apit oleh symbol “<” dan “>”.
Sintaks : <tag_pembuka> Teks atau objek yang akan kita tampilkan </tag_penutup>
Contoh :
<p> Belajar HTML </p>
Penjelasan :
- <p> adalah tag pembuka nya
- Belajar HTML : teks yang akan ditampilkan
-</p> adalah tag penutupnya.
Tetapi ada juga tag yang tidak selalu berpasangan, contoh :
- <br/> : break line artinya digunakan untuk pindah kebaris selanjutnya.
- <hr/> : horizontal artinya digunakan untuk membuat garis secara horizontal
- <link /> : biasanya digunakan untuk memanggil file-file eksternal
ELEMENT
Element adalah teks atau objek yang berada diantara tag pembuka dan tag penutup.
Contoh : <p> Belajar HTML </p>
Penjelasan : “Belajar HTML” adalah elemen dari tag <p>.
Elemen tidak hanya berisi teks atau objek tetapi juga bisa berisi tag lainnya.
Contoh : <p> <b> Belajar HTML </b> </p>
Penjelasan : “<b> Belajar HTML </b>” adalah elemen dari tag <p>.
ATRIBUT
Atribut adalah informasi tambahan yang diberikan kepada tag. Informasi ini dapat berupa
intruksi atau perintah untuk merubah warna background, merubah warna teks, dll. Atribut
Sintaks : <tag_pembuka nama_atribut = “nilai_atribut”> teks atau objek </tag_penutup>
Contoh : <p color=”blue”> Belajar HTML </p>
Penjelasan : color adalah nama dari atibutnya, sedangkan “blue” adalah nilai dari atributnya.
* nilai atribut selalu di apit oleh tanda petik satu (‘) atau petik dua (“).
Struktur HTML:
<html>
<head>
</head>
<body>
.
. ( Isi Konten )
.
</body>
</html>
Penjelasan :
1. Tag <html> adalah awal dimana document HTML dibuat dan tag </html> adalah penutup nya.
2. isi Tag <head> </head> bisa seperti judul atau pun memasukkan CSS eksternal dan CSS internal dan lain-lain.
Contoh:
- Membuat Judul (Title)
<head>
<title> Belajar HTML </title>
</head>
Fungsi dari tag <title></title> adalah membuat judul suatu halaman. Bukan berarti judul suatu kontent atau artikel yang anda buat.
- Memasukkan link CSS eksternal
<head>
<link href=”style.css” type=”text/css” rel=”stylesheet” />
</head>
3. Tag <body> </body>, nah disinilah kalian isi dengan content yang akan kalian buat, entah itu video, gambar, teks, dll.
mari kita mencoba menerapkannya. Tools yang dibutuhkan :
1. Web Browser ( Contohnya : Mozilla Firefrox, Google Chorme, Safari, dan lain-lain ).
2. Text Editor ( Contohnya : Notepad, Notepad++, Sublime Text, dan lain-lain).
Coba ketikan script berikut pada text editor anda :
<html>
<head>
<title> Belajar HTML </title>
</head>
<body>
Belajar HTML itu Mudah !
</body>
</html>
lalu jalankan pada web browser, Hasil nya:
* Ingat !! pada HTML selalu ada Tag Pembuka dan Tag Penutup. Misalkan, tag pembukanya <html> berarti penutupnya </html> atau misalkan tag pembukanya <p> berarti tag penutupnya yaitu </p>, Tag penutup selalu diawali dengan “ / “ (tanpa tanda petik).
* Tata letak tag-tag nya pun harus diperhatikan :
Maksud dari gambar diatas ialah tag terakhir yang dipakai harus di tutup pertama.
Nahh,, Sekian dulu saya berbagi ilmu mengenai HTML. jika masih ada yang kebingungan silahkan tinggalkan komentar di kolom komentar ...
0 komentar:
Posting Komentar