LATIHAN
Dalam modul ini Anda 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
<html>
<body>
<p>
Paragraf ini
mengandung banyak spasi dan baris
dalam kode sumbernya,
tetapi browser
akan mengabaikannya.
</p>
<p>
Sedangkan yang ini memiliki spasi panjang.
</p>
<p align=”center”>
Jumlah baris dalam setiap paragraf tergantung pada ukuran window browser Anda. Bila Anda
mengubah ukuran window browser, jumlah baris dalam paragraf akan berubah.
</p>
<p align=”right”>
Untuk memotong <br>baris<br>dalam sebuah<br>paragraf,<br>gunakan tag br.
</p>
</body>
</html>
2. Background color dan heading
<html>
<body>
<body bgcolor="yellow">
<p>
Perhatikan bahwa halaman ini seharusnya berwarna kuning.
</p>
<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>
<h3>Ini adalah heading 3</h3>
<h4>Ini adalah heading 4</h4>
<h5>Ini adalah heading 5</h5>
<h6>Ini adalah heading 6</h6>
<p>Gunakan tag heading hanya untuk membuat heading saja. Jangan menggunakan tag tersebut
hanya untuk membuat tampilan huruf tebal. Gunakan tag lain untuk keperluan itu. </p>
<h1 align="center">Ini adalah heading 1</h1>
<p>Heading di atas telah diposisikan untuk berada di tengah halaman ini. </p>
</body>
</html>
3. Garis horisontal dan komentar tersembunyi
<html>
<body>
<p>Tag hr mendefinisikan sebuah garis horisontal, default-nya adalah rata tengah:</p>
<hr color=”green” >
<p align=”left”>Terdapat paragraf disini</p>
<hr width=”80%” size=”10” align=”left”>
<p align=”right”>Terdapat paragraf disini</p>
<hr width=”400” size=”6” align=”right” color=”red”>
<center>
<p>Terdapat paragraf disini</p>
</center>
<!— Ini adalah komentar yang tidak akan ditampilkan di layar browser -->
</body>
</html>
4. Pemformatan teks
<html>
<body>
<b>Teks ini tebal </b>
<br>
<strong> Teks ini juga tebal </strong>
<br>
<big> Teks ini hurufnya besar </big>
<br>
<em> Teks ini miring </em>
<br>
<i> Teks ini juga miring </i>
<br>
<small> Teks ini hurufnya kecil </small>
<br>
Teks ini berisi <sub> subscript </sub>
<br>
Teks ini berisi <sup> superscript </sup>
</body>
</html>
5. Teks yang di-preformat
<html>
<body>
<pre>
Ini adalah
Teks yang di-preformat.
Preformat akan menampilkan spasi dan
line break apa adanya.
</pre>
<p>Tag pre cocok untuk menampilkan kode komputer di bawah ini:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
6. Tag “keluaran komputer”, alamat, singkatan, dan kependekan
<html>
<body>
<code>Kode Komputer </code>
<br>
<kbd>Masukan dari keyboard</kbd>
<br>
<tt>Teks jenis teletype </tt>
<br>
<samp>Teks contoh</samp>
<br>
<var>Variabel komputer </var>
<br>
<p>
<b>Catatan:</b> Tag-tag tersebut biasanya digunakan untuk menampilkan kode komputer/
pemrograman.
<p>
<address>
FMIPA UAD<br>
Jl. Prof Dr Soepomo<br>
Janturan<br>
Yogyakarta
</address>
<br>
<abbr title="Universitas Ahmad Dahlan">UAD</abbr>
<br>
<acronym title="World Wide Web">WWW</acronym>
<p>Atribut title digunakan untuk menampilkan versi yang dieja ketika pointer mouse berada di atas
kependekan atau singkatan.</p>
<p>Dalam IE 5, hanya elemen acronym yang mau bekerja.</p>
<p>Dalam Navigator 6.2, elemen abbr dan acronym keduanya dapat bekerja.</p>
</body></html>
7. Arah teks dan quotation
<html>
<body>
<p>
Bila browser Anda mendukung kemampuan bi-directional override (bdo), baris berikut ini akan
dituliskan dari kanan ke kiri (rtl):
</p>
<bdo dir="rtl">
Anggap saja ini tulisan bahasa Arab
</bdo>
<br>
Ini adalah contoh quotation panjang:
<blockquote>
Ini adalah quotation panjang. Ini adalah quotation panjang. Ini adalah quotation panjang. Ini adalah
quotation panjang. Ini adalah quotation panjang.
</blockquote>
Ini adalah contoh quotation pendek:
<q>
Ini adalah quotation pendek.
</q>
<p>
Menggunakan elemen blockquote, browser menyisipkan line break dan margin, tetapi elemen q tidak
akan menampilkan apapun yang khusus.
</p>
</body>
</html>
8. Teks yang terhapus, disisipkan, dan entitas karakter
<html>
<body>
<p>
satu dosin adalah
<del>duapuluh</del>
<ins>duabelas</ins>
buah
</p>
<p>
Hampir semua browser akan memberi garis (overstrike) pada teks yang (maksudnya) terhapus dan
teks yang disisipkan akan diberi garis bawah.
</p>
<p>
Tetapi beberapa browser yang lama akan menampilkan teks yang terhapus atau teks disisipkan
sebagai suatu teks biasa (plain text).
</p>
<p>Ini adalah entitas karakter: �</p>
<p>
Coba untuk mengganti 000 dengan suatu angka (misalnya 169), dan muat ulang halaman Anda agar
Anda dapat melihat hasil dari perubahan yang dilakukan.
</p>
</body>
</html>
9. List unordered dan ordered
<html>
<body>
<h4>Sebentuk list unordered:</h4>
<ul>
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ul>
<br>
<h4>Sebentuk list ordered:</h4>
<ol>
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ol>
</body>
</html>
10. Jenis-jenis list ordered
<html>
<body>
<h4>List bernomor:</h4>
<ol>
<li>Apel</li>
<li>Pisang</li>
<li>Lemon</li>
<li>Jeruk</li>
</ol>
<h4>List dengan huruf:</h4>
<ol type="A">
<li>Apel</li>
<li>Pisang</li>
<li>Lemon</li>
<li>Jeruk</li>
</ol>
<h4>List dengan huruf kecil:</h4>
<ol type="a">
<li>Apel</li>
<li>Pisang</li>
<li>Lemon</li>
<li>Jeruk</li>
</ol>
<h4>List dengan angka romawi:</h4>
<ol type="I">
<li>Apel</li>
<li>Pisang</li>
<li>Lemon</li>
<li>Jeruk</li>
</ol>
<h4>List dengan angka romawi kecil:</h4>
<ol type="i">
<li>Apel</li>
<li>Pisang</li>
<li>Lemon</li>
<li>Jeruk</li>
</ol>
</body>
</html>
11. Jenis-jenis list unoredered
<html>
<body>
<h4>List dengan bullet berbentuk disc:</h4>
<ul type="disc">
<li>Apel</li>
<li>Pisang</li>
<li>Lemon</li>
<li>Jeruk</li>
</ul>
<h4>List dengan bullet berbentuk lingkaran:</h4>
<ul type="circle">
<li>Apel</li>
<li>Pisang</li>
<li>Lemon</li>
<li>Jeruk</li>
</ul>
<h4>List dengan bullet berbentuk kotak:</h4>
<ul type="square">
<li>Apel</li>
<li>Pisang</li>
<li>Lemon</li>
<li>Jeruk</li>
</ul>
</body>
</html>
12. List bersarang dan list definisi
<html>
<body>
<h4>Sebuah list bersarang:</h4>
<ul>
<li>Kopi</li>
<li>Teh
<ul>
<li>Teh hitam</li>
<li>Teh Hijau</li>
</ul>
</li>
<li>Susu</li>
</ul>
<br>
<h4>Contoh list definisi:</h4>
<dl>
<dt>Kopi</dt>
<dd>Minuman panas hitam</dd>
<dt>Susu</dt>
<dd>Minuman dingin putih</dd>
</dl>
</body>
</html>
Membuat Web Dengan HTML
![Membuat Web Dengan HTML]()
Reviewed by MORA ID
on
4:56 PM
Rating:
No comments: