Tag-tag Html
May 02, 2014
Tag-Tag Dasar HTML
1 HTML
Merupakan tag dasar yang mendifinisikan bahwa dokumen adalah dokumen html. Tag ini merupakan suatu keharusan bagi pemrogram web untuk menuliskannya sebagai tag pertama dalam dokumen html. Penulisan tag seperti berikut ini : <html> pada awal dokumen dan </html> pada akhir dokumen.
Merupakan tag dasar yang mendifinisikan bahwa dokumen adalah dokumen html. Tag ini merupakan suatu keharusan bagi pemrogram web untuk menuliskannya sebagai tag pertama dalam dokumen html. Penulisan tag seperti berikut ini : <html> pada awal dokumen dan </html> pada akhir dokumen.
2 Head
Bagian Head sebenarnya tidak harus ada pada dokumen HTML, tetapi pemakaian head yang benar akan meningkatkan kegunaan suatu dokumen HTML. Penulisan tag seperti berikut ini : <head> di awal setelah <html> dan </head> di akhir section head. Elemen-elemen pada bagian head akan mengerjakan tugas-tugas sebagai berikut : Menyediakan judul dokumen Menjembatani hubungan antar dokumen Memberitahu browser untuk membuat form pencarian Menyediakan metode untuk mengirim pesan ke tipe browser
Elemen yang mungkin terdapat pada bagian head : Tag <title>, digunakan untuk memberi judul dokumen. Penggunaannya adalah
sebagai berikut : <title>Judul Dokumen</title> Tag <base>, digunakan untuk menentukan basis URL sebuah dokumen. Contoh
penggunaannya adalah sebagai berikut berikut : <base target="_blank" /> Tag <link>, digunakan untuk menunjukkan relasi antar dokumen HTML.
Tag ini mempunyai beberapa atribut :
Bagian Head sebenarnya tidak harus ada pada dokumen HTML, tetapi pemakaian head yang benar akan meningkatkan kegunaan suatu dokumen HTML. Penulisan tag seperti berikut ini : <head> di awal setelah <html> dan </head> di akhir section head. Elemen-elemen pada bagian head akan mengerjakan tugas-tugas sebagai berikut : Menyediakan judul dokumen Menjembatani hubungan antar dokumen Memberitahu browser untuk membuat form pencarian Menyediakan metode untuk mengirim pesan ke tipe browser
Elemen yang mungkin terdapat pada bagian head : Tag <title>, digunakan untuk memberi judul dokumen. Penggunaannya adalah
sebagai berikut : <title>Judul Dokumen</title> Tag <base>, digunakan untuk menentukan basis URL sebuah dokumen. Contoh
penggunaannya adalah sebagai berikut berikut : <base target="_blank" /> Tag <link>, digunakan untuk menunjukkan relasi antar dokumen HTML.
Tag ini mempunyai beberapa atribut :
Contoh penggunaannya adalah sebagai berikut:
<link rel="stylesheet" href="http://situs.com/style.css" type="text/css" /> Tag <meta>.
digunakan untuk mendefinisikan informasi-informasi di luar HTML
Informasi meta dapat digunakan oleh browser untuk menjalankan suatu aktivitas
yang belum didukung oleh HTML. Tag <meta> mempunyai atribut : Untuk lebih memperjelas penggunaan atribut tag <meta> perhatikan contoh berikut ini : <meta http-equiv="refresh" content="50" /> Perintah diatas akan diterjemahkan oleh browser sebagai refresh dokumen setiap “50 detik”, jadi setara dengan mengklik tombol Refresh / Reload pada browser. Penggunaan elemen <meta> yang paling populer adalah penggunaan properti Keyword dan Description. Kedua properti ini sangat berguna untuk membantu kerja search engine. Biasanya search engine akan menggunakan teks yang disebutkan pada properti Keyword untuk mengindeks dokumen dan menggunakan teks yang terdapat pada properti Description untuk mendeskripsikan indeks tersebut.
Informasi meta dapat digunakan oleh browser untuk menjalankan suatu aktivitas
yang belum didukung oleh HTML. Tag <meta> mempunyai atribut : Untuk lebih memperjelas penggunaan atribut tag <meta> perhatikan contoh berikut ini : <meta http-equiv="refresh" content="50" /> Perintah diatas akan diterjemahkan oleh browser sebagai refresh dokumen setiap “50 detik”, jadi setara dengan mengklik tombol Refresh / Reload pada browser. Penggunaan elemen <meta> yang paling populer adalah penggunaan properti Keyword dan Description. Kedua properti ini sangat berguna untuk membantu kerja search engine. Biasanya search engine akan menggunakan teks yang disebutkan pada properti Keyword untuk mengindeks dokumen dan menggunakan teks yang terdapat pada properti Description untuk mendeskripsikan indeks tersebut.
3 BODY
Bagian body merupakan isi dari dokumen HTML. Semua informasi yang akan ditampilkan, mulai dari teks, gambar, sound, dan lain-lain, akan ditempatkan di bagian ini. Seperti telah disebutkan di atas, bagian body diawali oleh tag <body> dan ditutup </body>. Atributnya:
Bagian body merupakan isi dari dokumen HTML. Semua informasi yang akan ditampilkan, mulai dari teks, gambar, sound, dan lain-lain, akan ditempatkan di bagian ini. Seperti telah disebutkan di atas, bagian body diawali oleh tag <body> dan ditutup </body>. Atributnya:
latihan2 .html
<html>
<head>
<title>Contoh Penggunaan BODY</title>
<base target="_blank" />
<meta http-equiv="refresh" content="50"/>
<meta name="keywords" content="Meta, Body, HTML">
<meta name="description" content="Belajar HTML">
</head>
<body bgcolor="#990099" text="white" vlink="#00FFFF"
link="yellow">
Ini adalah contoh penggunaan body.
Dan ini adalah sebuah <a href="">link</a>.
</body>
</html>
<html>
<head>
<title>Contoh Penggunaan BODY</title>
<base target="_blank" />
<meta http-equiv="refresh" content="50"/>
<meta name="keywords" content="Meta, Body, HTML">
<meta name="description" content="Belajar HTML">
</head>
<body bgcolor="#990099" text="white" vlink="#00FFFF"
link="yellow">
Ini adalah contoh penggunaan body.
Dan ini adalah sebuah <a href="">link</a>.
</body>
</html>
kode warna
Heading
Tag heading <hx> digunakan untuk memformat heading (judul dan sub judul ) dari suatu halaman web. Heading ini akan memperbesar ukuran huruf untuk setiap jenis heading.Ada enam buah heading yang dikenal HTML, yaitu dari <h1> sampai dengan <h6>. Tag heading mempunyai atribut: [ left | center | right ] default left.Sebagai latihan, ketiklah latihan berikut dan jalankan dibrowser Anda.
latihan3.html
Tag heading <hx> digunakan untuk memformat heading (judul dan sub judul ) dari suatu halaman web. Heading ini akan memperbesar ukuran huruf untuk setiap jenis heading.Ada enam buah heading yang dikenal HTML, yaitu dari <h1> sampai dengan <h6>. Tag heading mempunyai atribut: [ left | center | right ] default left.Sebagai latihan, ketiklah latihan berikut dan jalankan dibrowser Anda.
latihan3.html
5 Horisontal Ruler
Tag Horisontal ruler <hr> berfungsi untuk menampilkan garis horizontal tiga dimensi didalam halaman web Anda. Tag horizontal ruler juga tidak memerlukan elemen penutup </hr>. Atribut elemen horisontal ruler : align : [ left | center | right ] default center size : pixel ( tebal garis, default 2 ) width : panjang ( lebar garis, pixel atau persen, default 100%) noshade ( garis solid )
latihan4.html
<html>
<head>
<title>Contoh Penggunaan Heading</title>
</head>
<body>
<h1>Ini Heading 1</h1>
<h2>Ini Heading 2</h2>
<h3>Ini Heading 3</h3>
<h4>Ini Heading 4</h4>
<h5>Ini Heading 5</h5>
<h6>Ini Heading 6</h6>
</body>
</html>
<html>
<head>
<title>Contoh Penggunaan HR</title>
</head>
<body bgcolor="#0066FF" text="#FFFFFF" >
<h1>::- TOKO ELEKTRONIK ARDAVA -::</h1>
<hr width="90%" size="5px" align="left">
</body>
</html>
Tag Horisontal ruler <hr> berfungsi untuk menampilkan garis horizontal tiga dimensi didalam halaman web Anda. Tag horizontal ruler juga tidak memerlukan elemen penutup </hr>. Atribut elemen horisontal ruler : align : [ left | center | right ] default center size : pixel ( tebal garis, default 2 ) width : panjang ( lebar garis, pixel atau persen, default 100%) noshade ( garis solid )
latihan4.html
<html>
<head>
<title>Contoh Penggunaan Heading</title>
</head>
<body>
<h1>Ini Heading 1</h1>
<h2>Ini Heading 2</h2>
<h3>Ini Heading 3</h3>
<h4>Ini Heading 4</h4>
<h5>Ini Heading 5</h5>
<h6>Ini Heading 6</h6>
</body>
</html>
<html>
<head>
<title>Contoh Penggunaan HR</title>
</head>
<body bgcolor="#0066FF" text="#FFFFFF" >
<h1>::- TOKO ELEKTRONIK ARDAVA -::</h1>
<hr width="90%" size="5px" align="left">
</body>
</html>
6. Paragraf
Tag paragraph <p> berfungsi layaknya untuk pengaturan antar paragraf dalam halaman web Anda. Dalam elemen paragraf terdapat atribut : align=[ left | center | right ] yang berfungsi sebagai pengatur perataan paragraf, jadi Anda cukup memilih salah satu dari ketiga pilihan tanpa harus memberi kurung buka dan tutup, dan defaultnya adalah left. Anda dapat memilih perataan kiri, tengah dan kanan. Bukalah latihan4.html yang sudah Anda buat, kemudian tambahkan script-script berikut dan simpan dengan nama latihan5.html.
Tag paragraph <p> berfungsi layaknya untuk pengaturan antar paragraf dalam halaman web Anda. Dalam elemen paragraf terdapat atribut : align=[ left | center | right ] yang berfungsi sebagai pengatur perataan paragraf, jadi Anda cukup memilih salah satu dari ketiga pilihan tanpa harus memberi kurung buka dan tutup, dan defaultnya adalah left. Anda dapat memilih perataan kiri, tengah dan kanan. Bukalah latihan4.html yang sudah Anda buat, kemudian tambahkan script-script berikut dan simpan dengan nama latihan5.html.
7. Line Break
Tag Line Break <br> berfungsi untuk memberikan baris baru suatu paragraf dalam halaman web Anda. Tag break tidak memerlukan tag penutup break. Bukalah latihan5.html yang sudah Anda buat, kemudian tambahkan script-script berikut dan simpan dengan nama latihan6.html.
latihan6.html
<html>
<head>
<title>Contoh Penggunaan Paragraf</title>
</head>
<body bgcolor="#0066FF" text="#FFFFFF" >
<h1>::- TOKO ELEKTRONIK ARDAVA -::</h1>
<hr width="90%" size="5px" align="left">
<h3>Kategori :</h3>
<h4>Gadget, HP & Accessories</h4>
<p>Handphone</p>
</body>
</html>
<html>
<head>
<title>Contoh Penggunaan Break</title>
</head>
<body bgcolor="#0066FF" text="#FFFFFF" >
<h1>::- TOKO ELEKTRONIK ARDAVA -::</h1>
<hr width="90%" size="5px" align="left">
<h3>Kategori :</h3>
<h4>Gadget, HP & Accessories</h4>
<p>Handphone<br>Smartphone<br>Tablet<br>Baterai<br>charger</p>
<h4>Electronic & Home App</h4>
<p>Alat Kebersihan<br>Mesin Cuci<br>Freezer<br>Air Conditioner<br>Peralatan Dapur</p>
</body>
</html>
Tag Line Break <br> berfungsi untuk memberikan baris baru suatu paragraf dalam halaman web Anda. Tag break tidak memerlukan tag penutup break. Bukalah latihan5.html yang sudah Anda buat, kemudian tambahkan script-script berikut dan simpan dengan nama latihan6.html.
latihan6.html
<html>
<head>
<title>Contoh Penggunaan Paragraf</title>
</head>
<body bgcolor="#0066FF" text="#FFFFFF" >
<h1>::- TOKO ELEKTRONIK ARDAVA -::</h1>
<hr width="90%" size="5px" align="left">
<h3>Kategori :</h3>
<h4>Gadget, HP & Accessories</h4>
<p>Handphone</p>
</body>
</html>
<html>
<head>
<title>Contoh Penggunaan Break</title>
</head>
<body bgcolor="#0066FF" text="#FFFFFF" >
<h1>::- TOKO ELEKTRONIK ARDAVA -::</h1>
<hr width="90%" size="5px" align="left">
<h3>Kategori :</h3>
<h4>Gadget, HP & Accessories</h4>
<p>Handphone<br>Smartphone<br>Tablet<br>Baterai<br>charger</p>
<h4>Electronic & Home App</h4>
<p>Alat Kebersihan<br>Mesin Cuci<br>Freezer<br>Air Conditioner<br>Peralatan Dapur</p>
</body>
</html>
0 komentar