Mengenal Stuktur Tag HTML

logo tag html

Pengenalan Tag HTML

Ingat, pada posting yang lalu kita sudah membahas HTML. HTML adalah bahasa markup bahasa inggris hanya bisa digunakan untuk me-markup suatu dokumen. Dengan penyederhanaan kita analogikan dengan pembuatan dokumen di Microsoft Word atau aplikasi Word Processing lainnya.

Saat membuat kata dokumen, biasanya kita melakukan format pada teks. Seperti menebalkan teks, memiringkan, memberi garis bawah , membuat Penjudulan (Heading), buat daftar (daftar) dan lain sebagainya. Pada HTML, format ini bisa kita sebut dengan Proses Markup dan akan dilakukan dengan menggunakan Tag HTML.

Misalnya, untuk mem-format suatu teks menjadi miring kita tambah tag <em> atau <i>. Edit file sebelumnya, menjadi seperti berikut:

Website <em> pertama </em> saya

Saat dibuka pada browser, anda bisa melihat kata “pertama” menjadi miring.

Website pertama saya

<Em> .. </ em> disebut dengan Tag HTML, yang digunakan untuk me-markup (memformat) dokumen HTML. Sama seperti seperti <i> … </ i>.

Struktur Format HTML

Semua tag punya tag dengan tag penutupnya . Artinya hanya teks yang berada di dalam tag tersebut yang akan diberi format miring. Tag penutup dengan menambahkan tanda slash (/) sebelum nama tagnya. Berikut ini adalah anatomi dari tag HTML:

<namatag atribut = 'at Atribut'> Isi atau Konten </namatag>

Setiap tag HTML bisa menjadi “isi” dari tag HTML lainnya, untuk membuat sebuah hierarki dari dokumen HTML.

Dalam setiap tag HTML bisa disol berbagai atribut yang berfungsi untuk menampung informasi-informasi tertentu , contoh atribut id dan kelas yang berfungsi untuk memberi nama suatu tag sebagai referensi CSS atau javascript nanti.

Sekarang bagaimana jika teks yang dimiringkan itu ingin kita tebalkan? Untuk menebalkan teks anda bisa menggunakan tag <strong> atau <b> , menjadi seperti berikut:

Website <strong> <em> pertama </em> </strong> saya

tag html miring tebal

Struktur file HTML

Suatu dokumen HTML juga memiliki aturan dalam penulisannya, ada beberapa tag yang harus anda tuliskan dan sudah menjadi ketentuan. Jika kita perbaiki latihan kita sebelumnya menjadi dokumen HTML yang benar maka kodenya menjadi seperti berikut:

<!DOCTYPE html> 

 <HTML> 

  <head> 

   <title> Judul File HTML </title> 

  </head> 



    <body> 

     Situs web <strong> <em> pertama </em> </strong> saya 

    </body> 

 </HTML>

<! DOCTYPE HTML>

Doctype HTML Merupakan Tag awal dari setiap dokumen HTML, tag ini berfungsi untuk menginformasikan pada browser yang sedang terbuka adalah dokumen HTML . Tag ini perlu dicantumkan dokumen dokumen disetiap dokumen HTML yang akan anda buat.

<HTML> … </HTML>

Tag HTML adalah Awal dari isi dokumen HTML dimulai dari sini, semua kode HTML yang akan anda buat akan ditulis dalam tag ini, perhatikan juga setiap tag harus memiliki tag penutup.

<Head> … </head>

Tag Head akan digunakan untuk menyimpan berbagai informasi tentang dokumen HTML, lebih detailnya akan kita temui pada penjelasan selanjutnya. Apa yang ada di dalam tag ini, tidak akan langsung di browser web.

<Title> … </title>

Salah satu contoh informasi yang ada di dalam tag Head adalah judul. Judul akan menampilkan teks pada judul browser atau pada tab browser.

tag html title

<Body> … </body>

Tag body merupakan tag pembuka dari badan dokumen HTML yang akan menampikan isi yang ditulis pada browser.

Mudah bukan? Lalu apakah tag tag-tag HTML harus seperti contoh di atas? Seperti tabingan / indentasi pada setiap tag? Sebenarnya anda bisa memposting kode HTML seperti ini:

 

<!DOCTYPE html> </HTML> <head> <title> Judul File HTML </title> 
</head> <body> Situs web <i> pertama </i> saya </body> </HTML>

 

Yang akan anda dapatkan dalam browserpun sama, namun anda akan susah membaca dokumen HTML tersebut. Kalau saja dokumen HTML yang anda buat hanya 10 baris mungkin hal ini tidak akan menjadi masalah, namun bagaimana jika 1000 baris? Anda akan kesulitan nanti dalam membacanya juga nanti.

Untuk itu kita menambahkan indentasi, setiap isi (konten) dari suatu tag. Misalnya:

<Head> 

  <title> Judul File HTML </title> 

</head>

Ini menandakan judul tag berada di dalam tag head. Selain itu kita juga bisa mengendalikan, apakah suatu tag sudah ditutup atau belum.

Baiklah pada bagian ini kita sudah mendapatkan struktur html dan tag-tagnya. Bagian selanjutnya kita akan membahas tentang bagaimana memuat gambar pada HTML.

Tinggalkan Balasan

%d blogger menyukai ini: