HTML Tingkat Dasar
Latihan Membuat Web Untuk Pemula
Latihan Membuat Web Untuk Pemula
► Font
Untuk mengatur penggunaan font pada sebuah halaman web, beberapa atribut dalam elemen font yaitu face (jenis huruf), color (warna), dan size (ukuran, dimulai dari 1-7).
Untuk latihan ketikkan script berikut dan simpan dengan nama "font.html"
Untuk latihan ketikkan script berikut dan simpan dengan nama "font.html"
<html>
<head>
<title>Font</title>
</head>
<body>
<p>
<font face="arial" color="blue" size="3">
Tulisan ini arial berwarna biru dan berukuran 3
</p>
<p>
<font face="verdana" color="red">
Tulisan ini verdana dan berwarna merah
</p>
</body>
</html>
<head>
<title>Font</title>
</head>
<body>
<p>
<font face="arial" color="blue" size="3">
Tulisan ini arial berwarna biru dan berukuran 3
</p>
<p>
<font face="verdana" color="red">
Tulisan ini verdana dan berwarna merah
</p>
</body>
</html>
Hasil dari script di atas :
font.html
► Begin row (br)
Untuk memulai baris baru pada sebuah halaman web tanpa memberi baris kosong di bawahnya (sama dengan tombol enter pada keyboard).
Untuk latihan ketikkan script berikut dan simpan dengan nama "begin_row.html"
Untuk latihan ketikkan script berikut dan simpan dengan nama "begin_row.html"
<html>
<head>
<title>Begin Row</title>
</head>
<body>
<p>
Contoh <br />penggunaan tag br <br />untuk memotong <br />baris dalam <br /> suatu paragraph
</p>
</body>
</html>
<head>
<title>Begin Row</title>
</head>
<body>
<p>
Contoh <br />penggunaan tag br <br />untuk memotong <br />baris dalam <br /> suatu paragraph
</p>
</body>
</html>
Hasil dari script di atas :
► Horizontal rule (hr)
Untuk menggambar garis horizontal pada sebuah halaman web. Elemen <hr /> memiliki beberapa atribut seperti size (ukuran), width (lebar), color (warna), dan lain lain.
tabel atribut horizontal rule
tabel atribut horizontal rule
| Atribut | Deskripsi |
| size | Untuk menentukan tebal dari <hr /> dalam pixel |
| position | Untuk menentukan posisi dari <hr /> |
| width | Untuk menentukan panjang <hr /> |
| noshade | Menampilkan garis horizontal tanpa bayang bayang 3D |
| color | Memberi warna pada garis horizontal |
Untuk latihan ketikkan script berikut dan simpan dengan nama "horizontal rule.html"
<html>
<head>
<title>Horizontal Rule</title>
</head>
<body>
<p>
Horizontal Rule <hr />
Horizontal Rule 10 pixel <hr size="10px" />
Horizontal Rule warna merah <hr color="red" />
</p>
</body>
</html>
<head>
<title>Horizontal Rule</title>
</head>
<body>
<p>
Horizontal Rule <hr />
Horizontal Rule 10 pixel <hr size="10px" />
Horizontal Rule warna merah <hr color="red" />
</p>
</body>
</html>
Hasil dari script di atas :
► Preformatted text (pre)
Untuk menampilkan teks sesuai dengan format aslinya atau seperti yang diketikkan di dalam dokumen HTML.
Untuk latihan ketikkan script berikut dan simpan dengan nama "preformatted text.html"
Untuk latihan ketikkan script berikut dan simpan dengan nama "preformatted text.html"
<html>
<head>
<title>Preformatted text</title>
</head>
<body>
<pre>
ini contoh
text yang menggunakan
Preformatted text </pre>
</body>
</html>
<head>
<title>Preformatted text</title>
</head>
<body>
<pre>
ini contoh
text yang menggunakan
Preformatted text </pre>
</body>
</html>
Hasil dari script di atas :
► Komentar
Untuk memberikan sebuah komentar dalam HTML maka menggunakan tag <!-- isi komentar -->. Isis komentar yang berada di dalam tag tersebut tidak akan ditampilkan ke browser.
Untuk latihan ketikkan script berikut dan simpan dengan nama "komentar.html"
Untuk latihan ketikkan script berikut dan simpan dengan nama "komentar.html"
<html>
<head>
<title>komentar</title>
</head>
<body>
<p><!-- Ini hanya komentar, tidak tampil di browser -->
Ini adalah contoh penggunaan komentar dalam HTML. <br />
Tulisan yang berada dalam tag komentar tidak akan ditampilkan di browser.
</p>
</body>
</html>
<head>
<title>komentar</title>
</head>
<body>
<p><!-- Ini hanya komentar, tidak tampil di browser -->
Ini adalah contoh penggunaan komentar dalam HTML. <br />
Tulisan yang berada dalam tag komentar tidak akan ditampilkan di browser.
</p>
</body>
</html>
Hasil dari script di atas :
► Blockquote
Untuk membuat indentasi paragraph. Dengan <blockquote> ini browser akan menampilkan teks menjorok ke dalam.
Untuk latihan ketikkan script berikut dan simpan dengan nama "blockquote.html"
Untuk latihan ketikkan script berikut dan simpan dengan nama "blockquote.html"
<html>
<head>
<title>Blockquote</title>
</head>
<body>
<p>
<blockquote>
ini adalah contoh text yang menggunakan blockquote
</blockquote>
ini adalah text yang tidak menggunakan blockquote
</p>
</body>
</html>
<head>
<title>Blockquote</title>
</head>
<body>
<p>
<blockquote>
ini adalah contoh text yang menggunakan blockquote
</blockquote>
ini adalah text yang tidak menggunakan blockquote
</p>
</body>
</html>
Hasil dari script di atas :
0 komentar:
Posting Komentar