HTML Tingkat Dasar
Latihan Membuat Web Untuk Pemula
Latihan Membuat Web Untuk Pemula
► Grouping elemen
Untuk mengelompokkan elemen elemen HTML. Elemen <div> digunakan untuk mengumpulkan sejumlah baris teks yang memiliki karakteristik yang sama, sedangkan <span> biasanya digunakan hanya pada sekumpulan teks yang pendek dan tidak mengandung elemen lain di dalamnya.
Untuk latihan ketikkan script berikut dan simpan dengan nama "grouping_elemen.html"
Untuk latihan ketikkan script berikut dan simpan dengan nama "grouping_elemen.html"
<html>
<head>
<title>Grouping Elemen</title>
</head>
<body>
<div style="background-color:green">
<span style="font-family:Arial; color:black;
font-size:20px">Taufik Hidayat
</span><br />
<span style="font-style:italic;
color:yellow">Pebulutangkis Indonesia
</span>
</div><br />
<div style="background-color:blue">
<span style="font-family:Arial; color:red;
font-size:20px">Bambang Pamungkas
</span><br />
<span style="font-style:italic;
color:yellow">Pesepakbola Indonesia
</span>
</div>
</body>
</html>
<head>
<title>Grouping Elemen</title>
</head>
<body>
<div style="background-color:green">
<span style="font-family:Arial; color:black;
font-size:20px">Taufik Hidayat
</span><br />
<span style="font-style:italic;
color:yellow">Pebulutangkis Indonesia
</span>
</div><br />
<div style="background-color:blue">
<span style="font-family:Arial; color:red;
font-size:20px">Bambang Pamungkas
</span><br />
<span style="font-style:italic;
color:yellow">Pesepakbola Indonesia
</span>
</div>
</body>
</html>
Hasil dari script di atas :
► Gambar / image
Untuk menampilkan sebuah gambar ke dalam sebuah halaman web. Hal ini dapat digunakan sebagai daya tarik bagi orang lain untuk mengunjungi website yang kita miliki.
tabel atribut gambar/image
tabel atribut gambar/image
| Atribut | Deskripsi |
| src | Untuk menentukan letak file gambar berada |
| alt | Untuk memberikan keterangan tentang gambar |
| width | Untuk menentukan panjang gambar |
| height | Untuk menentukan tinggi gambar |
| align | Untuk menentukan letak gambar, di kiri (left), kanan (right), atau tengah (center) |
Untuk latihan ketikkan script berikut dan simpan dengan nama "gambar.html"
<html>
<head>
<title>Gambar</title>
</head>
<body>
<p>
gambar yang diperkecil<br />
<img src="file:///C:/img36.jpg"
width="200px" height="125px" />
<br />
gambar asli<br />
<img src="file:///C:/img36.jpg"
alt="gambar asli" />
</p>
</body>
</html>
<head>
<title>Gambar</title>
</head>
<body>
<p>
gambar yang diperkecil<br />
<img src="file:///C:/img36.jpg"
width="200px" height="125px" />
<br />
gambar asli<br />
<img src="file:///C:/img36.jpg"
alt="gambar asli" />
</p>
</body>
</html>
Hasil dari script di atas :
Sebagai contoh, gambar "img36.jpg" tadi saya letakkan di drive "C:/"
► Hyperlink
Untuk memberikan link dari suatu teks atau gambar menuju dokumen atau bagian tertentu dalam dokumen. HTML menggunakan perintah anchor atau <a> yang memiliki atribut href untuk mendefinisikan lokasi link.
Terdapat dua jenis link, yaitu link ke halaman lain dan link ke dalam halaman yang sama.
Terdapat dua jenis link, yaitu link ke halaman lain dan link ke dalam halaman yang sama.
- link ke halaman lain dibuat dengan tag:
<a href="nama_file_yang_dituju"> Teks yang ditampilkan </a> - link ke halaman yang sama dibuat dengan pasangan tag:
<a href="#nama_anchor"> Teks yang ditampilkan </a>
Kemudian bagian yang dituju diberi tag anchor-nya:
<a name="nama_anchornya"> ... </a>
Untuk latihan ketikkan script berikut dan simpan dengan nama "hyperlink.html"
<html>
<head>
<title>Hyperlink</title>
</head>
<body>
<p>
<a href="font.html">Teks ini akan
berpindah ke halaman font.html</a><br />
<a href="#identifier">Teks ini akan
tetap di halaman ini.</a><br />
<a name="identifier">Tetap di sini</a>
</p>
</body>
</html>
<head>
<title>Hyperlink</title>
</head>
<body>
<p>
<a href="font.html">Teks ini akan
berpindah ke halaman font.html</a><br />
<a href="#identifier">Teks ini akan
tetap di halaman ini.</a><br />
<a name="identifier">Tetap di sini</a>
</p>
</body>
</html>
Hasil dari script di atas :
► Frame
Untuk membangun sebuah halaman web yang memungkinkan penampilkan beberapa halaman web dalam satu window browser.
Untuk latihan ketikkan script berikut dan simpan dengan nama "frame.html"
Untuk latihan ketikkan script berikut dan simpan dengan nama "frame.html"
<html>
<head>
<title>Frame</title>
</head>
<frameset rows="50%,50%">
<frame src="font.html" />
<frameset cols="25%,75%">
<frame src="blockquote.html" />
<frame src="hyperlink.html" />
</frameset>
</frameset>
</html>
<head>
<title>Frame</title>
</head>
<frameset rows="50%,50%">
<frame src="font.html" />
<frameset cols="25%,75%">
<frame src="blockquote.html" />
<frame src="hyperlink.html" />
</frameset>
</frameset>
</html>
Hasil dari script di atas :
0 komentar:
Posting Komentar