» » Struktur HTML

Struktur HTML

By: Unknown - In: - 1 komentar

Kali ini gue akan melanjutkan tentang HTML, ini adalah lanjutan dari post sebelumnya Mengenal HTML.

Sama seperti sebuah surat yng ditulis secara terstruktur mulai dari tanggal,nomor surat,perihal,isi dan lain-lain. Maka begitu pula HTML. Untuk memahami bagaimana cara membuat script, anda harus terlebih dahulu mengetahui struktur script tersebut. Sebuah website yang tampil cantik di jendela browser juga mempunyai script yang terstruktur. Karena jika tidak terstruktur, maka pastinya output yang tercipta dijendela browser tidak memuaskan.
Struktur pertama ketika kita mulai menulis script HTML 5 , yaitu dengan menulias tag satu baris seperti berikut ini :

<!DOCTYPE HTML>

Pastikan anda menulis DOCTYPE menggunakan huruf kapital seluruhnya. Sedangkan untuk tag-tag lain dalam script HTML, tidak perlu harus huruf kapital semua. Nah, tujuan menulis DOCTYPE apa ? dan mengapa harus diawal script ? Tag ini sebenarnya lebih merupakan jaminan bagi anda bahwa tag-tag yang anda buat sepenuhnya berjenis HTML murni, tanpa ada embel-embel tag lain yang mempengaruhi.
Jadi, ketika browser mulai membaca script dan menemukan tag <!DOCTYPE HTML> , maka browser akan mengenali script tersebut sebagai murni 100% HTML.
Itu untuk HTML 5. Untuk versi sebelumnya seperti HTML 4.01, anda harus menulis pelengkapnya seperti dibawah ini:

<!DOCTYPE> HTML PUBLIC “-//W3C/DTD HTML 4.01 Transitional//EN” ”http;//www.w3.org/TR/html4/loose.dtd>

Panjang banget kan ? Di HTML 5 gak perlu lagi panjang kayak begitu, cukup sederhana saja seperti contoh diawal.
Setelah membuat tag DOCTYPE, selanjutnya menyusun struktur yang terdiri dari HTML,Head, dan Body. Tag untuk HTML yaitu <html>...</html> . Tag untuk Head yaitu <head>...</head> dan Tag untuk body yaitu <body>...</body>. Tag tersebut termasuk tag two-sided tag, jadi harus ada pembuka dan penutup. Berbeda dengan tag DOCTYPE yang bersifat tunggal.

Bagian Head yang terdiri dari tag pembuka <head> dan tag penutup </head> yaitu berfungsi untuk mempengaruhi penulisan judul halaman website yang akan muncul di jendela browser bagian atas. Sedangkan Body yang terdiri dari tag pembuka <body> dan tag penutup </body> berfungsi untuk menampilkan isi dari sebuah halaman web.

Selanjutnya untuk menulis sebuah paragraf, kita memerlukan tag <p> ...</p>. Penempatan penulisan paragraf ini yaitu diantara tag <body>...</body>. Tag <p>...</p> juga bersifat two-sided tag.

Sekarang, mari kita praktekkan apa telah gue jelaskan diatas. Bukalah Notepad anda dan tulis script berikut, dan pastikan jangan ada yang salah :

</DOCTYPE HTML>



<html>

<head>

<title>Membuat HTML</title>

</head>

<body>

<h1>Selamat datang di dunia HTML</h1>

<p>Akhirnya gue bisa makan gratis sepuasnya</p>

<p>Di blog ini anda bisa belajar tentang struktur HTML</p>

</body>

</html>

Simpanlah scripy tersebut dengan nama paragraf.html. Uji coba kan pda browser anda dan hasilnya seperti ini :



Setiap kali menulis teks diantara tag <p> dan </p>, teks itu akan dianggap sebagai paragraf baru. Anda pasti tahu kan cara membuat paragraf baru di MS.Word, yaitu dengan memberi spasi antara satu paragraf dengan paragraf berikutnya. Nah, bagaimana jika anda ingin membuat sebuah data, atau suatu poin-poin tertentu, misalnya seperti begini:
Nama: Fachry Hidayat
Hobi  : Main Layang-layang
Alamat : Diatas tanah, dibawah langit.
Jika anda menggunakan tag <p>...</p> untuk memberi jarak spasi , maka akan seperti begini :



Tampak seperti diatas seperti kurang rapi dalam menuliskan poin-poin tersebut. Untuk membuat desain seperti diatas menggunakan script sperti berikut:

</DOCTYPE HTML>



<html>

<head>

<title>Membuat HTML</title>

</head>

<body>

<h1>Selamat datang di dunia HTML</h1>

<p>Akhirnya gue bisa makan gratis sepuasnya</p>

<p>Di blog ini anda bisa belajar tentang struktur HTML, cara-cara mebuat paragraf disuatu website anda. Dan bagaimana cara kerja tag,sehingga mempermudah mendesain suatu web. Bagaimana cara bermain layang-layang, bagaimana cara bermain rubik, dimana anda seharusnya tinggal, dan kenapa tulisan ini semakin ngawur.</p>

<p>Nama: Fachry Hidayat</p>

<p>Hobi: Main Layang-layang</p>

<p>Alamat : Diatas tanah, dibawah langit.</p.>

</body>

</html>

Lantas, bagaimana agar tidak terjadi jarak spasi yang terlalu lebar antar satu teks dengan teks lainnya ? Solusi dari permasalahan tersebut yaitu dengan menggunakan tag <br>. Tag ini berjenis one-sided tag , sehingga cukup saja ditulis seperti berikut :

<p>Nama: Fachry Hidayat<br>

 Hobi: Main Layang-layang<br>

 Alamat : Diatas tanah, dibawah langit.</p>

Pada intinya tag <br> berfungsi untuk menciptakan baris-baris baru. Setiap anda ingin menciptakan baris teks yang beru, gunakanlah tag tersebut. Sehingga menjadi seperti ini :













1 komentar:

Langganan: Posting Komentar (Atom)

Copyright © 2013 Crazy Slot7 and Blogger Templates

Back to Top