0
MODUL HTML
Posted by Unknown
on
04.12
Belajar ngoding dengan HTML
- Buatlah folder tempat anda menyimpan latihan-latihan pemograman
web ini.
- Buatlah coding/script HTML berikut ini dengan editor notepad
- Gunakan browser untuk melihat hasil tampilan dari coding/script HTML yang telah dibuat dan tangkap (capture) lah dari masing-masing tampilan dan jadikan gambar tampilan laporan anda.
Coding/Script
Dasar HTML untuk latihan
1. 1. Latihan 1 Paragraf dan line break (Simpan dengan nama file:
latihan1.html)
<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>
1. 2. Latihan 2 Background color dan heading (Simpan: latihan2.html)
<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>
1. 3. Latihan 3. Garis horisontal dan komentar
tersembunyi (Simpan:
latihan3.html)
<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>
1. 4. Latihan 4. Pemformatan teks. (Simpan: latihan4.html)
<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>
1. 5. Latihan 5. Teks yang di-preformat. (Simpan: latihan5.html)
<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>
1. 6. Latihan 6. Tag “keluaran komputer”, alamat,
singkatan, dan kependekan.
(Simpan: latihan6.html)
<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>
Fakultas Teknik UNP<br>
Jl. Prof Dr Hamka<br>
Air Tawar<br>
Padang
</address>
<br>
<abbr title="Universitas Negeri Padang">UNP</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>
1. 7. Latihan 7. Arah teks dan quotation. (Simpan: latihan7.html)
<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>
1. 8. Latihan 8. Teks yang terhapus, disisipkan, dan
entitas karakter.
(Simpan: latihan8.html)
<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>
1. 9. Latihan 9. List unordered dan ordered. (Simpan: latihan9.html)
<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>
1. 10. Latihan 10. Jenis-jenis list ordered. (Simpan: latihan10.html)
<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>
1. 11. Latihan 11. Jenis-jenis list unoredered. (Simpan: latihan11.html)
<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>
1. 12. Latihan 12. List bersarang dan list definisi. (Simpan: latihan12.html)
<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>
Posting Komentar