Struktur Dasar HTML
April 08, 2013
Add Comment
•Struktur Dasar HTML•
Hypertext Markup Language (HTML) adalah bahasa yang digunakan untuk menulis halaman web. Ciri utama dokumen HTML adalah adanya tag dan elemen. Elemen dalam dokumen HTML dikategorikan menjadi dua yaitu :
• Elemen <HEAD> yang berfungsi memberikan informasi tentang dokumen tersebut.
• Elemen <BODY> yang menentukan bagaimana isi suatu dokumen ditampilkan oleh browser, seperti
Paragraf, List (daftar), tabel dan lain-lain.
Sedangkan Tag dinyatakan dengan tanda lebih kecil “ < “ ( tag awal ) dan tanda lebih besar “ > “
(tag akhir). Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda "/").
Dokumen HTML mempunyai tiga buah tag utama yang membentuk struktur dari dokumen HTML yaitu HTML,HEAD dan BODY.
• Tag HTML berfungsi untuk menyatakan suatu dokumen HTML,
• Tag HEAD berfungsi untuk memberikan informasi tentang dokumen HTML dan
• Tag BODY berfungsi untuk menyimpan informasi atau data yang akan ditampilkan dalam dokumen
HTML.
•LISTS
Terdapat lima tipe list yang dapat digunakan, yaitu :
• Unordered Lists <UL> :
Untuk membuat daftar item dengan tanda bullet. List entries didefinisikan dengan tag <li>.
Contoh : <ul> <li> item nomer 1 <li> item nomer 2 <li> item nomer 3 </ul>
Hasil dari kode di atas adalah: Item nomer 1 Item nomer 2 Item nomer 3
• Ordered Lists <OL> :
Juga digunakan untuk membuat daftar item, dengan tiap item dapat menggunakan angka arab atau romawi. List entries juga didefinisikan dengan <LI> tag.
Contoh : <ol type=i> <li> item nomer 1 <li> item nomer 2 <li> item nomer 3 </ol>
Hasil dari kode di atas adalah :
1. Item nomer 1
2. Item nomerr 2
3. Item nomerr 3
• Definition Lists <DL> :
Contoh : <dl> <dt> item pertama. <dd> penjelasan tentang item pertama. <dt> item kedua. <dd> penjelasan tentang item kedua </dl>
Hasil dari kode di atas adalah : Item pertama.
Penjelasan tentang item pertama.
Item kedua.
Penjelasan tentang item kedua
Images :
Digunakan untuk menampilkan image atau animasi gif pada halaman web Anda.
Atribut : alt, align=(center, left, right), hspave, vspace, border, width & height
Contoh :
<img src="logo.gif" alt="ini adalah logo halaman pembuka" width=200 height=100> <img src="logo.gif" hspace=10 vspace=5 align=right border=2>
• TABEL
Dalam pembuatan homepage, tabel memiliki fungsi yang tidak kalah penting dengan tag-tag HTML lainnya. Pertama tabel berfungsi untuk menampilkan informasi secara terstruktur, ringkas dan mudah dibaca, kedua berfungsi untuk mengatur tampilan homepage agar lebih menarik.
Tag utama untuk tabel yaitu <TABLE> </TABLE> dan untuk membuat judul tabel tag-nya table header <TH></TH> lalu untuk membuat data tabel atau isi tabel menggunakan tag table Data <TD></TD> dan untuk membuat baris adalah memakai tag Table Rows <TR> </TR>
• FORMForm biasanya digunakan untuk mengumpulkan informasi dari user, sehingga memungkinkan suatu web server untuk menerima informasi dari pemakai melalui sejumlah elemen yang disebut kontrol. Kontrol ini bisa berupa suatu textbox, checkbox, radio button, push button, list menu dan lainnya.
Standart penulisan form :
<form method=”post/get” action=url”>
……..
…….
</form>
Atribut method memiliki dua nilai post dan get. Metode get mengirimkan data pada server dengan cara meletakan data pada bagian akhir URL yang ditunjuk. Metode post mengirimkan datanya secara terpisah. Jika data masukan banyak, lebih disarankan untuk menggunakan metode post. Atribut action berisi URL dari program yang dipanggil oleh form tersebut.
• Textbox
Textbox merupakan salah satu jenis kontrol untuk memasukan data. HTML menyediakan tag <input> dengan atribut type=”text” untuk membuat kotak input. Atribut lain yaitu name untuk memberi nama input, atribut Value untuk memberi nilai suatu input dan atribut size untuk menentukan batas terpanjang sebuah masukan.
Dalam textbox kita juga dapat menyembunyikan masukan yang ditulis user dengan memberi nilai type=”password”. Masukan akan menjadi karakter “*”.
Checkbox
Checkbox digunakan untuk memberi beberapa pilihan kepada user. Dengan checkbox user dapat memilih salah satu, lebih dari satu pilihan atau tidak sama sekali memilih.
• Radio
Pada type Radio, maka user memilih salah satu pilihan yang tersedia, sehingga user tidak bisa memilih kurang atau lebih dari satu pilihan. Atribut Checked memberi tanda bahwa pilihan tersebut sedang diaktifkan.
Submit dan Reset
Setiap form harus memiliki minimal tombol submit dan reset. Untuk membuatnya digunakan atribut type=”submit” dan type=”reset”. Tombol submit digunakan ketika user mengisi formulir dan ingin mengirimkan ke server. Sedangkan reset digunakan ketika user ingin menghapus semua masukan yang ditulis.
• Submit dan Reset Setiap form harus memiliki minimal tombol submit dan reset. Untuk membuatnya digunakan atribut type=”submit” dan type=”reset”. Tombol submit digunakan ketika user mengisi formulir dan ingin mengirimkan ke server. Sedangkan reset digunakan ketika user ingin menghapus semua masukan yang ditulis.
1. Contoh HTML sederhana :
<html>
<head>
<title>struktur dokumen html </title>
</head>
<body>
hello,… selamat belajar membuat home page dengan html
</body>
</html>
• Tulislah kode html tersebut diatas dengan program editor notepad, kemudian simpan kedalam direktori data anda dengan nama file praktik1.html
• Jalankan internet explorer dan buka file praktik1.html
2. Heading dalam HTML :
<html>
<head>
<title> ::heading dokumen html:: </title>
</head>
<body>
<h1>heading tingkat 1 </h1>
<h2>heading tingkat 2 </h2>
<h3>heading tingkat 3 </h3>
<h4>heading tingkat 4 </h4>
<h5>heading tingkat 5 </h5>
<h6>heading tingkat 6 </h6>
</body>
</html>
Tulislah kode html tersebut diatas dengan program editor notepad, kemudian simpan kedalam direktori data anda dengan nama file praktik2.html
Jalankan internet explorer dan buka file praktik2.html
Hypertext Markup Language (HTML) adalah bahasa yang digunakan untuk menulis halaman web. Ciri utama dokumen HTML adalah adanya tag dan elemen. Elemen dalam dokumen HTML dikategorikan menjadi dua yaitu :
• Elemen <HEAD> yang berfungsi memberikan informasi tentang dokumen tersebut.
• Elemen <BODY> yang menentukan bagaimana isi suatu dokumen ditampilkan oleh browser, seperti
Paragraf, List (daftar), tabel dan lain-lain.
Sedangkan Tag dinyatakan dengan tanda lebih kecil “ < “ ( tag awal ) dan tanda lebih besar “ > “
(tag akhir). Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda "/").
Dokumen HTML mempunyai tiga buah tag utama yang membentuk struktur dari dokumen HTML yaitu HTML,HEAD dan BODY.
• Tag HTML berfungsi untuk menyatakan suatu dokumen HTML,
• Tag HEAD berfungsi untuk memberikan informasi tentang dokumen HTML dan
• Tag BODY berfungsi untuk menyimpan informasi atau data yang akan ditampilkan dalam dokumen
HTML.
•LISTS
Terdapat lima tipe list yang dapat digunakan, yaitu :
• Unordered Lists <UL> :
Untuk membuat daftar item dengan tanda bullet. List entries didefinisikan dengan tag <li>.
Contoh : <ul> <li> item nomer 1 <li> item nomer 2 <li> item nomer 3 </ul>
Hasil dari kode di atas adalah: Item nomer 1 Item nomer 2 Item nomer 3
• Ordered Lists <OL> :
Juga digunakan untuk membuat daftar item, dengan tiap item dapat menggunakan angka arab atau romawi. List entries juga didefinisikan dengan <LI> tag.
Contoh : <ol type=i> <li> item nomer 1 <li> item nomer 2 <li> item nomer 3 </ol>
Hasil dari kode di atas adalah :
1. Item nomer 1
2. Item nomerr 2
3. Item nomerr 3
• Definition Lists <DL> :
Contoh : <dl> <dt> item pertama. <dd> penjelasan tentang item pertama. <dt> item kedua. <dd> penjelasan tentang item kedua </dl>
Hasil dari kode di atas adalah : Item pertama.
Penjelasan tentang item pertama.
Item kedua.
Penjelasan tentang item kedua
Images :
Digunakan untuk menampilkan image atau animasi gif pada halaman web Anda.
Atribut : alt, align=(center, left, right), hspave, vspace, border, width & height
Contoh :
<img src="logo.gif" alt="ini adalah logo halaman pembuka" width=200 height=100> <img src="logo.gif" hspace=10 vspace=5 align=right border=2>
• TABEL
Dalam pembuatan homepage, tabel memiliki fungsi yang tidak kalah penting dengan tag-tag HTML lainnya. Pertama tabel berfungsi untuk menampilkan informasi secara terstruktur, ringkas dan mudah dibaca, kedua berfungsi untuk mengatur tampilan homepage agar lebih menarik.
Tag utama untuk tabel yaitu <TABLE> </TABLE> dan untuk membuat judul tabel tag-nya table header <TH></TH> lalu untuk membuat data tabel atau isi tabel menggunakan tag table Data <TD></TD> dan untuk membuat baris adalah memakai tag Table Rows <TR> </TR>
• FORMForm biasanya digunakan untuk mengumpulkan informasi dari user, sehingga memungkinkan suatu web server untuk menerima informasi dari pemakai melalui sejumlah elemen yang disebut kontrol. Kontrol ini bisa berupa suatu textbox, checkbox, radio button, push button, list menu dan lainnya.
Standart penulisan form :
<form method=”post/get” action=url”>
……..
…….
</form>
Atribut method memiliki dua nilai post dan get. Metode get mengirimkan data pada server dengan cara meletakan data pada bagian akhir URL yang ditunjuk. Metode post mengirimkan datanya secara terpisah. Jika data masukan banyak, lebih disarankan untuk menggunakan metode post. Atribut action berisi URL dari program yang dipanggil oleh form tersebut.
• Textbox
Textbox merupakan salah satu jenis kontrol untuk memasukan data. HTML menyediakan tag <input> dengan atribut type=”text” untuk membuat kotak input. Atribut lain yaitu name untuk memberi nama input, atribut Value untuk memberi nilai suatu input dan atribut size untuk menentukan batas terpanjang sebuah masukan.
Dalam textbox kita juga dapat menyembunyikan masukan yang ditulis user dengan memberi nilai type=”password”. Masukan akan menjadi karakter “*”.
Checkbox
Checkbox digunakan untuk memberi beberapa pilihan kepada user. Dengan checkbox user dapat memilih salah satu, lebih dari satu pilihan atau tidak sama sekali memilih.
• Radio
Pada type Radio, maka user memilih salah satu pilihan yang tersedia, sehingga user tidak bisa memilih kurang atau lebih dari satu pilihan. Atribut Checked memberi tanda bahwa pilihan tersebut sedang diaktifkan.
Submit dan Reset
Setiap form harus memiliki minimal tombol submit dan reset. Untuk membuatnya digunakan atribut type=”submit” dan type=”reset”. Tombol submit digunakan ketika user mengisi formulir dan ingin mengirimkan ke server. Sedangkan reset digunakan ketika user ingin menghapus semua masukan yang ditulis.
• Submit dan Reset Setiap form harus memiliki minimal tombol submit dan reset. Untuk membuatnya digunakan atribut type=”submit” dan type=”reset”. Tombol submit digunakan ketika user mengisi formulir dan ingin mengirimkan ke server. Sedangkan reset digunakan ketika user ingin menghapus semua masukan yang ditulis.
1. Contoh HTML sederhana :
<html>
<head>
<title>struktur dokumen html </title>
</head>
<body>
hello,… selamat belajar membuat home page dengan html
</body>
</html>
• Tulislah kode html tersebut diatas dengan program editor notepad, kemudian simpan kedalam direktori data anda dengan nama file praktik1.html
• Jalankan internet explorer dan buka file praktik1.html
2. Heading dalam HTML :
<html>
<head>
<title> ::heading dokumen html:: </title>
</head>
<body>
<h1>heading tingkat 1 </h1>
<h2>heading tingkat 2 </h2>
<h3>heading tingkat 3 </h3>
<h4>heading tingkat 4 </h4>
<h5>heading tingkat 5 </h5>
<h6>heading tingkat 6 </h6>
</body>
</html>
Tulislah kode html tersebut diatas dengan program editor notepad, kemudian simpan kedalam direktori data anda dengan nama file praktik2.html
Jalankan internet explorer dan buka file praktik2.html
0 Response to "Struktur Dasar HTML"
Post a Comment