0
HTML Lanjut
Posted by Unknown
on
04.25
Coding/Script HTML lanjutan untuk latihan pada, sebagai
berikut.
- 1. Link
biasa, link gambar, link ke window baru, dan link internal (Simpan dengan nama file: latihan2-1.html)
<html>
<body>
<p>
<a href="halaman.htm">
Teks ini</a> adalah sebuah link ke suatu halaman
dalam situs Web.
</p>
<p>
<a href="http://www.google.com">
Teks ini</a> adalah sebuah link ke halaman awal
Situs google di World Wide Web.
</p>
<p>
<a href="#C4">
Melompat ke bagian lain dalam halaman ini.
</a>
</p>
<p>
Anda dapat juga menggunakan gambar sebagai sebuah link:
<a href="linkgambar.htm">
<img border="0" src="tombol.gif"
width="65" height="38">
</a>
</p>
<a href="baru.htm"
target="_blank">halaman Berikutnya</a>
<p>
Bila Anda memberikan atribut target sebuah link menjadi
"_blank",
Link tersebut akan membuka sebuah window browser baru.
</p>
<p>
<p> Ada tulisan disini (lakukan copy dan paste baris ini
untuk baris berikutnya) </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<a name="C4"><h2> Disinilah tujuan lompatan
link internal anda </h2></a>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
<p> Ada tulisan disini </p>
</body>
</html>
- 2. Link ke
e-mail (Simpan
dengan nama file: latihan2-2.html)
<html>
<body>
<p>
Ini adalah link ke e-mail:
<a href="mailto:saya@gmail.com?Subject=Halo%20lagi">
Kirim e-mail</a>
</p>
<p>
<b>Catatan:</b> Spasi di antara setiap kata sebaiknya
digantikan dengan tanda %20 untuk <b>memastikan</b> bahwa browser
akan menampilkan teks Anda dengan benar.
</p>
<p>
Ini juga contoh link ke e-mail:
<a href="mailto:anda@gmail.com?cc=dia@gmail.com&bcc=kamu@gmail.com&subject=Summer%20Party&body=Apakah%20Anda%20mau%20diundang%20ke%20pesta%20malam%20minggu?">Kirim
e-mail!</a>
</p>
</body>
</html>
- 3. Frameset
(horisontal dan vertikal) (Simpan
dengan nama file: latihan2-3.html)
<html>
<frameset rows="50%,50%">
<frame src="frame1.htm">
<frameset cols="25%,75%">
<frame src="frame2.htm">
<frame src="frame3.htm">
</frameset>
</frameset>
</html>
- 4. Frameset
dengan atribut no-resize = “true” (Simpan dengan nama file: latihan2-4.html)
<html>
<frameset rows="50%,50%">
<frame noresize="true" src="frame1.htm">
<frameset cols="25%,75%">
<frame noresize="true" src="frame2.htm">
<frame noresize="true" src="frame3.htm">
</frameset>
</frameset>
</html>
- 5. Frame inline
(Simpan
dengan nama file: latihan2-5.html)
<html>
<body>
<iframe src ="default.htm">
</iframe>
<p>Beberapa browser lama tidak mendukung iframe.</p>
<p>Bila browser yang Anda pakai sekarang tidak mendukung,
iframe tak akan terlihat.</p>
</body>
</html>
6.
Membuat tabel (Simpan dengan nama file: latihan2-6.html)
<html>
<body>
<p>
Setiap tabel dimulai dengan tag table.
Setiap baris tabel dimulai dengan tag tr.
Setiap data dalam tabel dimulai dengan tag td.
</p>
<h4>Satu baris satu kolom dengan border normal:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>Satu baris dan tiga kolom dengan border
tebal:</h4>
<table border="8">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>Dua baris dan tiga kolom dengan border sangat
tebal:</h4>
<table border="15">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>Tabel ini tidak memiliki border:</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
</body>
</html>
- 7. Sel kosong dalam tabel (Simpan dengan
nama file: latihan2-7.html)
<html>
<body>
<table border="1">
<tr>
<td>Teks</td>
<td>Teks</td>
</tr>
<tr>
<td></td>
<td>Teks</td>
</tr>
</table>
<p>
Seperti yang Anda lihat, salah satu sel tidak memiliki border. Itu
terjadi karena sel tersebut kosong. Cobalah untuk menyisipkan sebuah spasi ke
dalam sel tersebut. Ternyata tetap saja tidak memiliki border.
</p>
<p>
Cara yang benar adalah dengan menyisipkan spasi non-breaking di
dalam sel.
</p>
<p>Spasi non-breaking adalah sebuah entitas karakter. Bila
Anda tidak mengetahui apa yang disebut karakter entitas, baca kembali materi
kuliah tentang hal tersebut.
</p>
<p>Entitas spasi non-breaking dimulai dengan tanda ampersand
("&"),
kemudian karakter-karakter "nbsp", dan diakhiri dengan
semicolon (";")
</p>
<p>
</p>
</body>
</html>
- 8. Sel tabel
yang diperlebar (Simpan
dengan nama file: latihan2-8.html)
<html>
<body>
<h4>Sel yang melebar dua kolom:</h4>
<table border="1">
<tr>
<th>Nama</th>
<th colspan="2">Telepon</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Sel yang melebar dua baris:</h4>
<table border="1">
<tr>
<th>Nama depan:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telepon:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
- 9. Menambahkan
latar belakang ke tabel (Simpan
dengan nama file: latihan2-9.html)
<html>
<body>
<h4>Dengan warna latar belakang:</h4>
<table border="1" bgcolor="red">
<tr>
<td>Pertama</td>
<td>Baris</td>
</tr>
<tr>
<td>Kedua</td>
<td>Baris</td>
</tr>
</table>
<h4>Dengan latar belakang gambar:</h4>
<table border="1"
background="../bg.jpg">
<tr>
<td>Pertama</td>
<td>Baris</td>
</tr>
<tr>
<td>Kedua</td>
<td>Baris</td>
</tr>
</table>
<h4>Latar belakang pada sel:</h4>
<table border="1">
<tr>
<td bgcolor="red">Pertama</td>
<td>Baris</td>
</tr>
<tr>
<td background="../bg.jpg">
Kedua</td>
<td>Baris</td>
</tr>
</table>
</body>
</html>
Posting Komentar