A Tag HTML Dasar
Setelah itu, Anda akan mempelajari penggunaan dari beberapa tag yang
digunakan dalam melakukan pemformatan tampilan halaman web supaya lebih sesuai
dengan keinginan atau agar lebih rapi dan terstruktur. Perhatikan beberapa daftar tag
di bawah ini, serta kegunaan utamanya dalam sebuah halaman HTML. Beberapa diantaranya telah dihilangkan dari daftar tag HTML standar, namun masih
memungkinkan untuk ditampilkan pada beberapa browser tertentu atau browser lama.
B Tag untuk pemformatan teks dasar
C. Tag untuk tampilan hasil keluaran komputer.
D. Tag untuk Citation, Quotation, dan Definisi
E. Contoh tag untuk Entitas karakter
Ketika Anda menulis suatu dokumen, mungkin terkadang Anda menuliskan kalimat dalam bentuk poin-poin yang menerangkan tentang suatu hal. Dalam suatu halaman web, terkadang Anda juga ingin melakukan hal yang sama. Terdapat tag khusus untuk penulisan dalam format poin-poin, perhatikan daftar di bawah ini.
F. Tag untuk List
2. CONTOH LATIHAN
Dalam modul ini kamu akan berlatih untuk menggunakan berbagai tag dasar
untuk pemrograman web menggunakan HTML. Ketikkan setiap kelompok tag dalam
sebuah file, simpan dalam folder Anda sendiri yang telah ditentukan, kemudian jalankan
di web browser yang telah terinstall. Ketikkan setiap kode sumber apa adanya terlebih
dahulu (termasuk spasi kosong). Perhatikan hasil tampilannya, kemudian belajar untuk
memodifikasi setiap kelompok tag untuk mengetahui maksud dari setiap baris tag
HTML yang Anda ketikkan. Jangan lupa untuk menyimpan setiap modifikasi Anda
sebelum menjalankan ulang di dalam browser.
Silakan mencoba juga tag yang masuk dalam kategori “dihilangkan”, untuk
melihat seperti apa tampilan yang dapat dimunculkan. Untuk entitas karakter, silakan
coba nomor entitas selain yang telah ada pada daftar di atas, untuk melihat entitas
karakter apa saja yang dapat digunakan dalam sebuah halaman web.
Bagian terakhir adalah list. List adalah salah satu komponen yang cukup sering
digunakan dalam suatu halaman Web. Dalam bentuk aslinya, mungkin sudah tidak
terlalu banyak digunakan lagi dan digantikan fungsinya dengan image (gambar), tetapi
ada perlunya juga Anda mengetahui list saat tidak memiliki gambar yang akan dijadikan
bullet.
1) Paragraf dan line break
1. <html>
2. <head>
3. <title>Belajar Web</title>
4. </head>
5. <body>
6. <p>
7. Paragraf ini
8. mengandung banyak spasi dan baris
9. dalam kode sumbernya,
10. tetapi browser
11. akan mengabaikannya.
12. </p>
13. <p>
14. Sedangkan yang ini memiliki spasi panjang.
15. </p>
16. <p align=”center”>
17. Jumlah baris dalam setiap paragraf tergantung pada ukuran window browser An
da. Bila Anda mengubah ukuran window browser, jumlah baris dalam paragraf akan beru
bah.
18. </p>
19. <p align=”right”>
20. Untuk memotong <br>baris<br>dalam sebuah<br>paragraf,<br>gunakan tag br.
21. </p>
22. </body>
23. </html>
2) Background color dan heading
1. <html>
2. <head>
3. <title>Belajar PW</title>
4. </head>
5. <body bgcolor="yellow">
6. <p>
7. Perhatikan bahwa halaman ini seharusnya berwarna kuning.
8. </p>
9. <h1>Ini adalah heading 1</h1>
10. <h2>Ini adalah heading 2</h2>
11. <h3>Ini adalah heading 3</h3>
12. <h4>Ini adalah heading 4</h4>
13. <h5>Ini adalah heading 5</h5>
14. <h6>Ini adalah heading 6</h6>
15. <p>Gunakan tag heading hanya untuk membuat heading saja. Jangan menggunakan tag
tersebut hanya untuk membuat tampilan huruf tebal. Gunakan tag lain untuk keperlua
n itu. </p>
16. <h1 align="center">Ini adalah heading 1</h1>
17. <p>Heading di atas telah diposisikan untuk berada di tengah halaman ini. </p>
18. </body>
19. </html>
3) Garis horisontal dan komentar tersembunyi
1. <html>
2. <head>
3. <title>Belajar PW</title>
4. </head>
5. <body>
6. <p>Tag hr mendefinisikan sebuah garis horisontal, default-
nya adalah rata tengah:</p>
7. <hr color="green" >
8. <p align="left">Terdapat paragraf disini</p>
9. <hr width="80%" size="10" align="left">
10. <p align="right">Terdapat paragraf disini</p>
11. <hr width="400" size="6" align="right" color="red">
12. <center>
13. <p>Terdapat paragraf disini</p>
14. </center>
15. <!— Ini adalah komentar yang tidak akan ditampilkan di layar browser -->
16. </body>
17. </html>
4) Pemformatan teks
1. <html>
2. <head>
3. <title>Belajar PW</title>
4. </head>
5. <body>
6. <b>Teks ini tebal </b>
7. <br>
8. <strong> Teks ini juga tebal </strong>
9. <br>
10. <big> Teks ini hurufnya besar </big>
11. <br>
12. <em> Teks ini miring </em>
13. <br>
14. <i> Teks ini juga miring </i>
15. <br>
16. <small> Teks ini hurufnya kecil </small>
17. <br>
18. Teks ini berisi <sub> subscript </sub>
19. <br>
20. Teks ini berisi <sup> superscript </sup>
21. </body>
22. </html>
5) Teks yang di-preformat
1. <html>
2. <head>
3. <title>Belajar PW</title>
4. </head>
5. <body>
6. <pre>
7. Ini adalah
8. Teks yang di-preformat.
9. Preformat akan menampilkan spasi dan
10. line break apa adanya.
11. </pre>
12. <p>Tag pre cocok untuk menampilkan kode komputer di bawah ini:</p>
13. <pre>
14. for i = 1 to 10
15. print i
16. next i
17. </pre>
18.
19. </body>
20. </html>
6) Arah teks dan quotation
1. <html>
2. <head>
3. <title>Belajar PW</title>
4. </head>
5. <body>
6.
7. <p>
8. Bila browser Anda mendukung kemampuan bi-
directional override (bdo), baris berikut ini akan dituliskan dari kanan ke kiri (r
tl):
9. </p>
10. <bdo dir="rtl">
11. Anggap saja ini tulisan bahasa Arab
12. </bdo>
13. <br>
14. Ini adalah contoh quotation panjang:
15. <blockquote>
16. Ini adalah quotation panjang. Ini adalah quotation panjang. Ini adalah quotatio
n panjang. Ini adalah quotation panjang. Ini adalah quotation panjang.
17. </blockquote>
18. Ini adalah contoh quotation pendek:
19. <q>
20. Ini adalah quotation pendek.
21. </q>
22. <p>
23. Menggunakan elemen blockquote, browser menyisipkan line break dan margin, tetap
i elemen q tidak akan menampilkan apapun yang khusus.
24. </p>
25.
26. </body>
27. </html>
7) List unordered dan ordered
1. <html>
2. <head>
3. <title>Belajar PW</title>
4. </head>
5. <body>
6. <h4>Sebentuk list unordered:</h4>
7. <ul>
8. <li>Kopi</li>
9. <li>Teh</li>
10. <li>Susu</li>
11. </ul>
12. <br>
13. <h4>Sebentuk list ordered:</h4>
14. <ol>
15. <li>Kopi</li>
16. <li>Teh</li>
17. <li>Susu</li>
18. </ol>
19. </body>
20. </html>
8) Jenis-jenis list ordered
1. <html>
2. <head>
3. <title>Belajar PW</title>
4. </head>
5. <body>
6. <h4>List bernomor:</h4>
7. <ol>
8. <li>Apel</li>
9. <li>Pisang</li>
10. <li>Lemon</li>
11. <li>Jeruk</li>
12. </ol>
13. <h4>List dengan huruf:</h4>
14. <ol type
="A"
>
15. <li>Apel</li>
16. <li>Pisang</li>
17. <li>Lemon</li>
18. <li>Jeruk</li>
19. </ol>
20. <h4>List dengan huruf kecil:</h4>
21. <ol type
="a"
>
22. <li>Apel</li>
23. <li>Pisang</li>
24. <li>Lemon</li>
25. <li>Jeruk</li>
26. </ol>
27. <h4>List dengan angka romawi:</h4>
28. <ol type
="I"
>
29. <li>Apel</li>
30. <li>Pisang</li>
31. <li>Lemon</li>
32. <li>Jeruk</li>
33. </ol>
34. <h4>List dengan angka romawi kecil:</h4>
35. <ol type
="i"
>
36. <li>Apel</li>
37. <li>Pisang</li>
38. <li>Lemon</li>
39. <li>Jeruk</li>
40. </ol>
41.
42. </body>
43. </html>
9) Jenis-jenis list unoredered
1. <html>
2. <head>
3. <title>Belajar PW</title>
4. </head>
5. <body>
6. <h4>List dengan bullet berbentuk disc:</h4>
7. <ul type
="disc"
>
8. <li>Apel</li>
9. <li>Pisang</li>
10. <li>Lemon</li>
11. <li>Jeruk</li>
12. </ul>
13. <h4>List dengan bullet berbentuk lingkaran:</h4>
14. <ul type
="circle"
>
15. <li>Apel</li>
16. <li>Pisang</li>
17. <li>Lemon</li>
18. <li>Jeruk</li>
19. </ul>
20. <h4>List dengan bullet berbentuk kotak:</h4>
21. <ul type
="square"
>
22. <li>Apel</li>
23. <li>Pisang</li>
24. <li>Lemon</li>
25. <li>Jeruk</li>
26. </ul>
27. </body>
28. </html>
10) List bersarang dan list definisi
1. <html>
2. <head>
3. <title>Belajar PW</title>
4. </head>
5. <body>
6. <h4>Sebuah list bersarang:</h4>
7. <ul>
8. <li>Kopi</li>
9. <li>Teh
10. <ul>
11. <li>Teh hitam</li>
12. <li>Teh Hijau</li>
13. </ul>
14. </li>
15. <li>Susu</li>
16. </ul>
17. <br>
18. <h4>Contoh list definisi:</h4>
19. <dl>
20. <dt>Kopi</dt>
21. <dd>Minuman panas hitam
</dd>
22. <dt>Susu</dt>
23. <dd>Minuman dingin putih</dd>
24. </dl>
25. </body>
26. </html>
