<!DOCTYPE html>
<html>
<head>
<title>Percobaan</title>
<style type="text/css">
table,tr,td {
border-style: solid;
border-width: 1px;
}
</style>
</head>
<body>
<h1>Halaman Web</h1>
<h2>Ini adalah </h2>
<p>Halaman web sederhana. <em>Ini adalah tulisan miring.</em> Halaman web sederhana. Halaman web sederhana. Halaman web sederhana. Halaman web sederhana.
Halaman web sederhana. Halaman web sederhana.</p>
<h2>Kegunaan Kode HTML</h2>
<ul>
<li>To learn merancang website</li>
<li>
Hal lain yang diperlukan dalam merancang website
<ol>
<li>CSS</li>
<li>Javascript</li>
<li>Dan lain-lain</li>
<li>Belajar merancang website sangat menarik</li>
</ol>
</li>
<li>Cara saya mencintai komputer saya.</li>
</ul>
<h2>Dimana bisa belajar HTML </h2>
<p><a href="http://www.jockerdt.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDJDawAefuWN_F2KcvvMlU3e7k_cv1NZrM-Cn4OzNiwWMVJ0DdmatDRkhzwBeJK_iP4cBprRzxOU6Kxf5XwHQeYgBR3oGaxCZbIbDvK_b94ZoYZpWXM8FkBVlWb0BpsDz7RIs4P3mx9zQ/s400/Hasil+akhir.jpg" width="120" height="120" alt="jocker DT"></a></p>
<h3>Contoh membuat tabel dengan HTML</h3>
<table>
<tr>
<td>Baris 1, kolom 1</td>
<td>Baris 1, kolom 2</td>
<td>Baris 1, kolom 3</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td>
<td>Baris 2, kolom 2</td>
<td>Baris 2, kolom 3</td>
</tr>
<tr>
<td>Baris 3, kolom 1</td>
<td>Baris 3, kolom 2</td>
<td>Baris 3, kolom 3</td>
</tr>
<tr>
<td>Baris 4, kolom 1</td>
<td>Baris 4, kolom 2</td>
<td>Baris 4, kolom 3</td>
</tr>
</table>
<h3>Contoh form</h3>
<p>Nama:</p>
<p><input name="nama" value="Nama anda"></p>
<p>Comments: </p>
<p><textarea rows="10" cols="20" name="comments">Komentar kamu</textarea></p>
<p>Jenis kelamin:</p>
<p><input type="radio" name="Jenis kelamin" value="Pria"> Pria</p>
<p><input type="radio" name="Jenis kelamin" value="Wanita"> Wanita</p>
<p><input type="radio" name="Jenis kelamin" value="hermaphrodite"> Punya dua jenis kelamin</p>
<p><input type="radio" name="Jenis kelamin" value="asexual" checked> Tidak punya kelamin</p>
<p><input type="submit"></p>
</body>
</html>
Ketik atau copy kode-kode yang bikin mata capek di atas, lalu simpan dengan format html.
Ini penjelasan kode-kode di atas :
<!DOCTYPE html>
Ini adalah deklarasi dari tipe dokumen dan versi dari HTML yang digunakan. Contoh penggunaan yang sering kita jumpai :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
Elemen ini juga menyatakan bahwa dokumen ini merupakan dokumen HTML.
Elemen ini digunakan sebagai batasan dokumen HMTL yang diawali dengan <html> dan diakhiri dengan </html>
Elemen htmt minimal memiliki elemen head dan body.
<title>
Elemen ini menyataka judul dari dokumen html yang kita buat. Elemen ini adalah bagian dari elemen head.
<h1>
Ini adalah elemen yang berguna sebagai header. header ada 6 jenis yaitu: h1, h2, ...s/d h6.
Untuk mengetahui perbedaan keenam elemen header ini, bisa dicoba contoh ini:
<html>
<head>
<title>Header</title>
</head>
<body>
<h1>Header Pertama <h1>
<h2>Header Kedua<h2>
<h3>Header Ketiga<h3>
<h4>Header Keempat<h4>
<h5>Header Kelima<h5>
<h6>Header Keenam<h6>
</body>
</html>
Simpan sebagai file html, lalu buka dengan browser anda.
<p>
Paragraf
<ul>, <li>, <ol>
Digunakan untuk menyatakan daftar item.
<table>
Digunakan untuk membuat tabel. Elemen yang digunakna menyatak barisnya adalah <tr>, sedangkan untuk menyatakan kolom adalah <td>
Untuk contoh diatas, kita bisa memperjelasnya dengan menambahkan garis dengan cara menambahkan kode CSS.
Caranya buka lagi percobaan pertama kita dengan notepad, tambahkan kode ini pada elemen head setelah tag title.
<style type="text/css">
table,tr,td {
border-style: solid;
border-width: 1px;
}
</style>
simpan, lalu coba buka lagi dengna browser.
Kelihatan toh ?
<input>
Elemen yang digunakan untuk mengumpulkan informasi dari pembaca.
- <input type="text">
Pembaca akan memasukkan informasi delam bentuk teks biasa.
- <input type="password">
Pembaca akan memasukkan password yang tidak terlihat dalam bentuk text.
- <input type="radio">
Biasa input type ini dibuat lebih dari satu, karena input tipe ini biasa digunakan untuk memberi pilihan kepada pembaca.
Jadi pembaca akan memilih salah satu dari bebrapa pilihan.
- <input type="submit">
Input yang satu ini biasa digunakan untuk memberikan pilihan juga, tapi pembaca bisa memilih lebih dari satu jika pilihannya lebih dari satu.
0 komentar:
Posting Komentar