Tutorial belajar HTML dasar ini kita tutup dengan sebuah halaman web dengan seluruh tag dan atribut yang telah kita pelajari dari tutorial part 1 sampai 14. Tag disini mencakup tag paragraf, heading, list, link, image (gambar), komentar, tabel dan form.
Berikut adalah rangkuman kode program sebuah halaman HTML. Ketiklah kode berikut dan save sebagai finish.html
Contoh rangkuman tag dasar html:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html>
<head>
<title>Summary HTML Dasar</title>
</head>
<body>
<!-- Akhirnya... Sebuah Halaman HTML Lengkap -->
<h1>Belajar HTML Dasar</h1>
<p> Ini <strong>adalah</strong> sebuah <em>paragraf</em> </p>
<!-- tag link -->
<p>Saya sedang belajar HTML dari
<a href="http://www.duniailkom.com" target="_blank">Duniailkom</a>
dan akan terbuka pada tab baru</p>
<!-- tag image -->
<img alt="gambar koala" src="koala.jpg" />
<!-- tag list -->
<h2>Daftar Belanjaan</h2>
<ol>
<li>Minyak Goreng</li>
<li>Sabun Mandi</li>
<li>Deterjen</li>
<li>Shampoo</li>
<li>Obat Nyamuk</li>
</ol>
<!-- tag table -->
<table border="1">
<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>
<br/>
<!-- tag form -->
<form action="finish.html" method="get">
Nama: <input type="text" name="nama" value="Nama Kamu" />
<br />
Password: <input type="password" name="password" />
<br />
Jenis Kelamin :
<input type="radio" name="jenis_kelamin" value="laki-laki" checked/>
Laki - Laki
<input type="radio" name="jenis_kelamin" value="perempuan" />
Perempuan
<br />
Hobi:
<input type="checkbox" name="hobi_baca" /> Membaca Buku
<input type="checkbox" name="hobi_nulis" checked /> Menulis
<input type="checkbox" name="hobi_mancing" /> Memancing
<br />
Asal Kota:
<select name="asal_kota" >
<option value="Kota Jakarta"> Jakarta</option>
<option>Bandung</option>
<option value="Kota Semarang" checked>Semarang</option>
</select>
<br />
Komentar Anda:
<textarea name="komentar" rows="5" cols="20">
Silahkan katakan isi hati anda</textarea>
<br />
<input type="submit" value="Mulai Proses!" >
</body>
</html>
Post kali ini saya akan share Kode HTML, kayaknya sudah banyak yang tahu kode-kode HTML, jadi post ini bukan untuk para master namun untuk newbie yang nyasar kemari.
Saya hanya menampilkan kode HTML yang support di MyWapBlog saja, berikut kode-kodenya;
Membuat baris baru
Membuat paragraf baru
Teks tebal
<b>Teks disini</b>
Teks ketik
Teks bercoret
Teks garis bawah
Teks sup atas
Teks sub bawah
Teks rata kiri
Teks rata kanan
Teks rata kanan kiri
Teks berada di tengah
Teks baris pertama menjorok ke dalam
Teks menjorok ke dalam semua
Teks berwarna
Teks stabilo
Membuat textarea
<textarea cols="20" rows="2">teks disini</textarea>
Textarea huruf warna
Textarea dengan bingkai
Textarea dengan bingkai dan huruf berwarna
Textarea dengan background
Textarea dengan background dan bingkai
Textarea dengan background dan bingkai serta huruf berwarna
Textarea dashed
Textarea dotted
Membuat garis
Membuat garis warna
Mengatur ukuran garis
Garis sebelah kiri
Garis sebelah kanan
Membuat garis dengan background
Garis titik-titik
Garis putus-putus
Membuat daftar
- Daftar 1
- Daftar 2
- Daftar 3
Menampilkan Link dengan teks
Menampilkan gambar 
Menampilkan URL gambar dengan Teks
Menampilkan link dengan gambar
Menampilkan gambar di samping post sebelah kiri
Menampilkan gambar di samping post sebelah kanan
Membuat bingkai pada gambar
untuk mengganti bingkai, "solid" ganti dengan; ridge, groove, double, dashed, dotted, inset, outset
Merubah warna background
Membuat background dengan bingkai
Posisi di kanan
Posisi di tengah
Posisi di kiri
.
HTML file
Nama Anda;
Nama depan
HTML radio
Jenis Kelamin;
HTML checkbox
Hoby;
HTML password
Masukkan password
Tombol bottom
Membuat tabel
teks teks teks teks
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
| <!DOCTYPE html><html><head> <title>Summary HTML Dasar</title></head><body><!-- Akhirnya... Sebuah Halaman HTML Lengkap --><h1>Belajar HTML Dasar</h1><p> Ini <strong>adalah</strong> sebuah <em>paragraf</em> </p><!-- tag link --><p>Saya sedang belajar HTML dari <a href="http://www.duniailkom.com" target="_blank">Duniailkom</a> dan akan terbuka pada tab baru</p><!-- tag image --><img alt="gambar koala" src="koala.jpg" /><!-- tag list --><h2>Daftar Belanjaan</h2><ol> <li>Minyak Goreng</li> <li>Sabun Mandi</li> <li>Deterjen</li> <li>Shampoo</li> <li>Obat Nyamuk</li></ol><!-- tag table --><table border="1"><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><br/><!-- tag form --><form action="finish.html" method="get"> Nama: <input type="text" name="nama" value="Nama Kamu" /> <br /> Password: <input type="password" name="password" /> <br /> Jenis Kelamin : <input type="radio" name="jenis_kelamin" value="laki-laki" checked/> Laki - Laki <input type="radio" name="jenis_kelamin" value="perempuan" /> Perempuan <br /> Hobi: <input type="checkbox" name="hobi_baca" /> Membaca Buku <input type="checkbox" name="hobi_nulis" checked /> Menulis <input type="checkbox" name="hobi_mancing" /> Memancing <br /> Asal Kota: <select name="asal_kota" > <option value="Kota Jakarta"> Jakarta</option> <option>Bandung</option> <option value="Kota Semarang" checked>Semarang</option> </select> <br /> Komentar Anda: <textarea name="komentar" rows="5" cols="20"> Silahkan katakan isi hati anda</textarea> <br /> <input type="submit" value="Mulai Proses!" ></body></html>
Post kali ini saya akan share Kode HTML, kayaknya sudah banyak yang tahu kode-kode HTML, jadi post ini bukan untuk para master namun untuk newbie yang nyasar kemari.
Saya hanya menampilkan kode HTML yang support di MyWapBlog saja, berikut kode-kodenya;
Membuat baris baru
Membuat paragraf baru
Teks tebal
<b>Teks disini</b>
Teks ketik
Teks garis bawah
Teks sup atas
Teks sub bawah
Teks rata kiri
Teks rata kanan
Teks rata kanan kiri
Teks berada di tengah
Teks baris pertama menjorok ke dalam
Teks menjorok ke dalam semua
Teks berwarna
Teks stabilo
Membuat textarea
<textarea cols="20" rows="2">teks disini</textarea>
Textarea huruf warna
Textarea dengan bingkai
Textarea dengan bingkai dan huruf berwarna
Textarea dengan background
Textarea dengan background dan bingkai
Textarea dengan background dan bingkai serta huruf berwarna
Textarea dashed
Textarea dotted
Membuat garis
Membuat garis warna
Mengatur ukuran garis
Garis sebelah kiri
Garis sebelah kanan
Membuat garis dengan background
Garis titik-titik
Garis putus-putus
Membuat daftar
Menampilkan Link dengan teks
Menampilkan gambar
Menampilkan URL gambar dengan Teks
Menampilkan link dengan gambar
Menampilkan gambar di samping post sebelah kiriMenampilkan gambar di samping post sebelah kanan
Membuat bingkai pada gambar
untuk mengganti bingkai, "solid" ganti dengan; ridge, groove, double, dashed, dotted, inset, outset
Merubah warna background
Membuat background dengan bingkai
Posisi di kanan
Posisi di tengah
Posisi di kiri
.Nama depan
 |
beri raring
My Iklan:
WELCOME TO MY WEBSITE
ARYA DWI MAHENDRA
Tidak ada komentar:
Posting Komentar