Tag-tag Dasar HTML
Html
Merupakan tag dasar yang mendefinisikan bahwa
dokumen ini adalah dokumen HTML. Tag ini merupakan satu keharusan bagi
pemmrograman web untuk menuliskannya sebagai tag pertama dalam okumen HTML.
Head
Merupakan tag berikutnya setelah <html>
untuk menuliskan keterangan tentang dokumen web yang akan ditampilkan.
Title
Merupakan tag di dalam head yang harus dituliskan
untuk memberikan judul/informasi pada caption browser web tentang topik atau
judul dari dokumen yang ditampilkan dalam browser.
Body
Merupakan section utama dalam dokumen web. Pada
section ini semua dokumen yang akan ditampilkan di dalam browser harus
dituliskan.
Paragraf
Informasi yang disajikan dalam dokumen harus
mengikuti kaidah-kaidah dalam penulisan. Misalnya pikiran utama disimpan dalam
satu paragraf.
Setiap paragraf harus dimulai dengan memberi tag
<p>. Di akhir paragraf tidak diharuskan menuliskan </p> sebagai
akhir paragraf. Setiap pergantian paragraf harus dimulai dengan <p>
kembali.
Listing 2.1
Coba_minimum
<!--coba_minimum.html-->
<html>
<head>
<title>Sebuah
contoh HTML sederhana</title>
</head>
<body>
<p>HTML
mudah dibuat.
Selamat
datang di dunia HTML.
</body>
</html>
Contoh coba_minimum.html diatas menunjukan dokumen
HTML sederhana yang hanya mempunyai informasi dalam sebuah paragraf.
Pada browser diperlihatkan setiap paragraf akan
ditampilkan dengan loncat satu baris. Jika text yang akan ditampilkan melebihi
lebar window, maka secara otomatis text yang tidak cukup akan ditampilkan pada
baris berikutnya.
Listing 2.2
Coba_paragraf
<!--coba_paragraf.html-->
<html>
<head>
<title>Contoh
penggunaan tag paragraf</title>
</head>
<body>
<p>Ini
adalah paragraf.
<p>Ini
adalah paragraf.
<p>Ini
adalah paragraf.
<p>Elemen
paragraf ditandai dengan menggunakan tag p.
</body>
</html>
Pada browser diperlihatkan setiap paragraf akan
ditampilkan dengan loncat satu baris. Jika text yang akan ditampilkan melebihi
lebar window, maka secara otomatis text yang tidak cukup akan ditampilkan pada
baris berikutnya.
Listing 2.3
Coba_paragraf2
<!--coba_paragraf2.html-->
<html>
<head>
<title>Contoh
tidak menggunakan tag paragraf</title>
</head>
<body>Ini
text pertama dari paragraf.
Yang ini
baris kedua.
Ini baris
ketiga.
Dan yang
ini baris keempat, tapi
panjang,
supaya bisa dilihat apakah bisa pindah sendiri????
</body>
</html>
Yang menjadi catatan disini adalah jika ingin
mendefinisikan paragraf baru, maka kita harus menuliskan secara eksplisit tag
<p>-nya. Tidak ada pengaruh kita melakukan “enter” beberapa kali pun
didalam editor, karena semuanya akan dianggap satu paragraf dengan sebelumnya.
Line Break
Listing 2.4
Coba_gantibaris
<!--coba_gantibaris.html-->
<html>
<head>
<title>Contoh
ganti baris</title>
</head>
<body>Memotong
<br>baris <br>dalam suatu
<br>paragraf,
<br>gunakan tag br.
</body>
</html>
Kita dapat memaksakan ganti baris pada dukumen
web. Ganti baris disini dimaksudkan hanya menyajikan informasi pada bris
sendiri tetapi tidak berganti paragraf.
Heading
Text dalam dokumen umumnya mempunyai judul topik,
pada dokumen HTML judul ini dissebut heading. Heading tulisan akan ditampilkan
dengan huruf yang lebih besar atau ditebalkan. Heading juga dimanfaatkan untuk
menunjukkan tingkat keberartian dari text yang dituliskan.
Ada 6 tingkat heading dalam HTML, dinomori dari 1
sampai 6. nomor 1 merupakan heading yang tebesar.
Listing 2.5
Coba_heading
<!--coba_heading.html-->
<html>
<head>
<title>Contoh
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>
<p>
Gunakan tag heading hanya untuk heading.
Jangan gunakan tag ini hanya
sekedar untuk membuat suatu text menjadi lebih besar.
</body>
</html>
Mengatur Letak Heading
Tag heading mempunyai atribut yang digunakan untuk
mengatur letak grading dalam baris – align. Alignment Heading:
·
Kiri – left
·
Tengah – center
·
Kanan – right
Listing 2.6
Coba_heading2
<!--coba_heading2.html-->
<html>
<head>
<title>Contoh
Heading dengan alignment</title>
</head>
<body>
<h1
align="center">Heading 1 di tengah</h1>
<p>
Heading di atas diposisikan tengah baris.
Heading di
atas diposisikan tengah baris.
Heading di
atas diposisikan tengah baris.
Heading di
atas diposisikan tengah baris.
<h1
align="right">Heading 1 di kanan</h1>
<p>
Heading di atas diposisikan kanan baris.
Heading di
atas diposisikan kanan baris.
Heading di
atas diposisikan kanan baris.
Heading di
atas diposisikan kanan baris.
</body>
</html>
Penggaris Mendatar
Sebuah garis dapat disisipkan dalam dokumen web,
umumnya digunakan sebagai pemisah antar bagian atau paragraf.
Tag <hr> disisipkan pada tempat garis akan
disisipkan dalam dokumen.
Listing 2.7
Coba_garis
<!--coba_garis.html-->
<html>
<head>
<title>Contoh
Garis Mendatar</title>
</head>
<body>
<p>Tag
hr digunakan untuk mendefinisikan garis:
<hr>
<p>Yang
ini paragraf.
<hr>
<p>Yang
ini paragraf.
<hr>
<p>Yang
ini paragraf.
</body>
</html>
Komentar
Dalam suatu komentar informasi ada sebagian text
dalam dokumen yang berfungsi sebagai catatan atau komentar terhadap dokumen itu
sendiri. Catatan/komentar dalam dokumen ini tidak dapat ditampilkan dalam
browser.
Tag komentar dapat digunakanuntuk menyembunyikan
sebagai dokumen web. Bisa jadi karena belum adanya kepastian dari isi dokumen
yang akan dipublikasikan.
Text yang berfungsi sebagai komentar disimpan
dalam dokumen ditandai dengan tag <!—sebagai awal, kemudian diisi text
komentar, dan tag --> sebagai tag akhir.
Khusus tag komentar ini, tag penutup tidak diawali
tanda garis miring.
Listing 2.8
Coba_komentar
<!--coba_komentar.html-->
<html>
<head>
<title>Contoh
Penggunaan Komentar</title>
</head>
<body>
<!--
Komentar ini tidak akan ditampilkan -->
<p>Ini
normal paragraf.
</body>
</html>
0 komentar:
Posting Komentar