HTML Tingkat Dasar
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"
<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
| 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.
- 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"
<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 :
*.:｡✿ Don't forget to come back again ✿.｡.:*
Visit Wahyudi Blog !
Tidak ada komentar:
Posting Komentar
Plisss...
Jangan nyepam (spam), jangan promosi (apapun itu), jangan SARA, jangan OOT...
Mohon kerja samanya, berikan komentar yang berbobot dan bermanfaat bagi semua... ^^