Saat artikel ini ditulis, HTML edisi paling mutakhir (HTML 5) telah dirilis. Tetapi, kita tidak perlu khawatir bahwa apa yang akan kita pelajari ini akan kompatibel dengan HTML 5 atau tidak. Sebab, setiap rilis HTML terbaru tidak menon-aktifkan elemen-elemen yang umum digunakan pada HTML edisi sebelumnya. Namun, hanya menambahkan elemen-elemen dan atribut baru. Let us start!
1. Di bawah ini adalah coding HTML untuk membuat header. Copy ke dalam notepad dan simpan sebagai file HTML pada folder yang anda inginkan, tanda double quote ("") pada awal dan akhir kode jangan ikut dicopy. Lalu, double-klik (bukalah) file html tersebut Bila anda belum mengetahui caranya, anda mungkin harus kembali ke Dasar-Dasar
""<!DOCTYPE>
<html>
<body>
<div id="container" style="width:1000px">
<div id="header" style="background-color:#F0E68C;width:1000px;height:200px">
<h1 style="margin-bottom:0;text-align:center;font-family:verdana; color:#DC143C;">Ini Adalah Judul Blog Anda</h1>
<h2 style="text-align:center; font-family:arial color:#DC143C;">Ini deskripsi blog anda</h2></div>
</body>
</html>""
Maka pada halaman akan tampil header seperti di bawah ini:
* Anda bisa merubah warna, ukuran dan tulisan pada header tersebut seperti yang anda inginkan
** Setiap penulisan dokumen HTML diawali dengan "<!DOCTYPE>", "<html>" dan diakhiri dengan "</html>". Pada tutorial ini saya mengakhiri setiap coding-nya dengan "</html>" sebab metode tutorial ini menampilkan bagian per bagian dari sebuah halaman website. Pada prakteknya "</html>" hanya ditulis bila seluruh coding yang membangun sebuah halaman website telah selesai ditulis.
2. Di bawah ini adalah coding HTML untuk membuat tombol-tombol navigasi dengan menggunakan elemen "table". Copy ke dalam notepad dan simpan sebagai file HTML pada folder yang anda inginkan, tanda double quote ("") pada awal dan akhir kode jangan ikut dicopy. Lalu, double-klik (bukalah) file html tersebut.
""<!DOCTYPE>
<html>
<body>
<table border="1">
<tbody>
<tr>
<th><a href="http://buzzingyourbizz.blogspot.com/">Home</a></th>
<th><a href="http://buzzingyourbizz.blogspot.com/p/registrasi.html/">Bisnis</a></th>
<th><a href="http://buzzingyourbizz.blogspot.com/p/web-making.html/">Bikin Web</a></th>
<th><a href="http://buzzingyourbizz.blogspot.com/p/free-downloads.html/">Download Gratis</a></th>
<th><a href="http://buzzingyourbizz.blogspot.com/p/jokes.html/">Humor</a></th>
</tr>
</tbody>
</table>
</body>
</html>""
Maka akan terbangun tombol-tombol navigasi seperti di bawah ini:
| Home | Bisnis | Bikin Web | Download Gratis | Humor |
|---|
tentu saja anda bisa merubah "menu" dan alamat URL di atas seperti yang anda inginkan. Untuk membuktikan bahwa "navigation bar" di atas berfungsi, cobalah klik menu-menu yang ada.
3. Di bawah ini adalah beberapa elemen HTML lainnya. Copy ke dalam notepad dan simpan sebagai file HTML pada folder yang anda inginkan, tanda double quote ("") pada awal dan akhir kode jangan ikut dicopy. Lalu, double-klik (bukalah) file html tersebut.
""<!DOCTYPE>
<html>
<body>
<div id="menu" style="background-color:#FFE4C4;height:1500px;width:150px;float:left;">
<p> (p)adalah paragraf, anda bisa menuliskan apapun dalam elemen ini</p>
<b> (b)Untuk membuat tulisan bold</b><br>
<i> (i)untuk membuat tulisan italic</i><br>
<p> (br) untuk membuat baris atau alinea baru</p><br>
<hr>
<p> (hr) untuk membuat garis horizontal</p>
</div>
</body>
</html>""
Maka anda akan mendapatkan tampilan seperti di bawah ini:
Tentu saja anda bisa merubah tulisan atau warnanya seperti yang anda inginkan.
3. Di bawah ini adalah beberapa elemen HTML lainnya. Copy ke dalam notepad dan simpan sebagai file HTML pada folder yang anda inginkan, tanda double quote ("") pada awal dan akhir kode jangan ikut dicopy. Lalu, double-klik (bukalah) file html tersebut.
""<!DOCTYPE>
<html>
<body>
<div id="ads" style="background-color:#FFE4C4;height:1500px;width:150px;float:right;">
<b>kategori</b><br>
<ul>
<li>Bag</li>
<li>Shoes</li>
</ul>
<hr/>
<ol>
<li>Bag</li>
<li>Shoes</li>
</ol>
<hr/>
<dl>
<dt>Bag</dt>
<dd>-Gucci</dd>
<dt>Shoes</dt>
<dd>-Nike</dd>
</dl>
</div>
</body>
</html>""
Maka akan didapat tampilan seperti di bawah ini:
Tentu saja anda bisa merubah warna, ukuran atau tulisan seperti yang anda inginkan.
4. Di bawah ini coding HTML untuk membuat table. Copy ke dalam notepad dan simpan sebagai file HTML pada folder yang anda inginkan, tanda double quote ("") pada awal dan akhir kode jangan ikut dicopy. Lalu, double-klik (bukalah) file html tersebut.
""<!DOCTYPE>
<html>
<body>
<table border="1">
<tbody><tr>
<th>Bag</th>
<th>Shoes</th>
<th>Netbook</th>
</tr>
<tr>
<td>Gucci</td>
<td>Nike</td>
<td>Zyrex</td>
</tr>
<tr>
<td>Prada</td>
<td>Eagle</td>
<td><a href="http://buzzingyourbizz.blogspot.com/">This is a link</a></td><td>
</td></tr>
</tbody></table>
</body>
</html>""
Maka akan dihasilkan tampilan seperti di bawah ini:
5. Di bawah ini coding HTML untuk membuat text fields. Copy ke dalam notepad dan simpan sebagai file HTML pada folder yang anda inginkan, tanda double quote ("") pada awal dan akhir kode jangan ikut dicopy. Lalu, double-klik (bukalah) file html tersebut.
""<!DOCTYPE>
<html>
<body>
<form>
First name:<input name="firstname" type="text"><br>
Last name:<input name="lastname" type="text">
</form>
</body>
</html>""
Maka akan dihasilkan tampilan seperti di bawah ini:
6. Di bawah ini coding HTML untuk membuat kolom password. Copy ke dalam notepad dan simpan sebagai file HTML pada folder yang anda inginkan, tanda double quote ("") pada awal dan akhir kode jangan ikut dicopy. Lalu, double-klik (bukalah) file html tersebut.
""<!DOCTYPE>
<html>
<body>
<form>
password:<input name="pwd" type="password">
</form>
</body>
</html>""
Maka akan dihasilkan tampilan seperti di bawah ini:
""<!DOCTYPE>
<html>
<body>
<form>
<input name="sex" value="male" type="radio">Male<br>
<input name="sex" value="female" type="radio">Female
</form>
</body>
</html>""
Maka akan dihasilkan tampilan seperti di bawah ini:
""<!DOCTYPE>
<html>
<body>
<form>
<input name="vehicle" value="bike" type="checkbox">I have a bike<br>
<input name="vehicle" value="Car" type="checkbox">I have a car
</form>
</body>
</html>""
Maka akan dihasilkan tampilan seperti di bawah ini:
9. Di bawah ini coding HTML untuk membuat "drop down list". Copy ke dalam notepad dan simpan sebagai file HTML pada folder yang anda inginkan, tanda double quote ("") pada awal dan akhir kode jangan ikut dicopy. Lalu, double-klik (bukalah) file html tersebut.
""<!DOCTYPE>
<html>
<body>
<form action="">
<select name="cars">
<option value="Mercedez">Mercedez</option>
<option value="Audi">Audi</option>
<option value="Fiat">Fiat</option>
</select>
</form>
</body>
</html>""
Maka akan dihasilkan tampilan seperti di bawah ini:
10. Di bawah ini coding HTML untuk membuat "text area". Copy ke dalam notepad dan simpan sebagai file HTML pada folder yang anda inginkan, tanda double quote ("") pada awal dan akhir kode jangan ikut dicopy. Lalu, double-klik (bukalah) file html tersebut.
""<!DOCTYPE>
<html>
<body>
<textarea rows="10" cols="30">Yang baca lagi serius
</textarea>
</body>
</html>""
Maka akan dihasilkan tampilan seperti di bawah ini:
Pembaca dapat menuliskan komentar mereka pada kolom di atas.
11. Di bawah ini coding HTML untuk membuat "button / tombol". Copy ke dalam notepad dan simpan sebagai file HTML pada folder yang anda inginkan, tanda double quote ("") pada awal dan akhir kode jangan ikut dicopy. Lalu, double-klik (bukalah) file html tersebut.
""<!DOCTYPE>
<html>
<body>
<form action="">
<input value="Tekan" type="button">
</form>
</body>
</html>""
Maka akan dihasilkan tampilan seperti di bawah ini:
12. Di bawah ini coding HTML untuk membuat "tombol submit". Copy ke dalam notepad dan simpan sebagai file HTML pada folder yang anda inginkan, tanda double quote ("") pada awal dan akhir kode jangan ikut dicopy. Lalu, double-klik (bukalah) file html tersebut.
""<!DOCTYPE>
<html>
<body>
<form name="input" action="html_form_action.asp" method="get">
Username:<input name="user" type="text">
<input value="submit" type="submit">
</form>
</body>
</html>""
Maka akan dihasilkan tampilan seperti di bawah ini:
13. Di bawah ini coding HTML untuk memberikan "styles" pada tulisan. Copy ke dalam notepad dan simpan sebagai file HTML pada folder yang anda inginkan, tanda double quote ("") pada awal dan akhir kode jangan ikut dicopy. Lalu, double-klik (bukalah) file html tersebut.
""<!DOCTYPE>
<html>
<body>
<p style="font-family:mistral;color:#DC143C;font-size:25px;">This is a sample to style the text</p>
</body>
</html>""
Maka akan dihasilkan tampilan seperti di bawah ini:
This is a sample to style the text
"font family" adalah tipe/jenis tulisan
"color" adalah warna
"font size" adalah ukuran tulisan
14. Di bawah ini coding HTML untuk membuat link/tautan pada halaman website. Copy ke dalam notepad dan simpan sebagai file HTML pada folder yang anda inginkan, tanda double quote ("") pada awal dan akhir kode jangan ikut dicopy. Lalu, double-klik (bukalah) file html tersebut.
Di bawah ini coding untuk membuat link yang apabila di-klik akan membuka pada jendela yang sama:
""<!DOCTYPE>
<html>
<body>
<a href="http://www.buzzingyourbizz.blogspot.com/">klik di sini</a>
</body>
</html>""
Maka akan dihasilkan link seperti di bawah ini:
klik di sini
Di bawah ini adalah coding untuk membuat link yang apabila di-klik akan membuka pada jendela baru:
""<!DOCTYPE>
<html>
<body>
<a target="_blank" href="http://www.google.com/">Click Here!</a>
</body>
</html>""
Maka akan dihasilkan link seperti di bawah ini:
Click Here!
15. berikut ini adalah cara untuk meng-upload gambar ke dalam sebuah halaman website. Ada dua cara untuk melakukannya; "external source" dan "internal source". external source dilakukan bila gambarnya berada di website lain dan internal source dilakukan bila gambarnya berada pada komputer kita. Di sini kita akan melakukannya dengan cara "internal source" sebab cara "external source" terkadang menghadapi beberapa kendala teknis. Hasilnya akan sama saja sebab, sekalipun gambar yang ingin kita upload berada pada website lain kita bisa men-download terlebih dahulu. Caranya:
-misalkan anda akan menyimpan file HTML pada folder bernama "belajar1"
-pada folder "belajar1", buatlah folder baru dengan nama (misalkan; images)
-copy gambar yang ingin anda masukkan ke halaman website dan tempatkan pada folder "images"
-misalkan nama gambar tersebut adalah "img01" dan tipe gambarnya adalah JPEG, maka inilah codingnya:
""<!DOCTYPE>
<html>
<body>
<img src="images/img01.jpg" width="100" height="50" alt="my angel">
</body>
</html>""
-alt maksudnya adalah bila gambar tidak dapat muncul (karena kendala tertentu) maka tulisan "my angel" akan muncul sebagai gantinya.
Di bawah ini adalah contoh gambar dengan ukuran width="100" dan height="50"
16. Di bawah ini coding HTML untuk membuat "iframe". iframe dimaksudkan bila kita ingin memasukan sebuah halaman website di dalam halaman website lainnya. Coding untuk membuat iframe:
""<!DOCTYPE>
<html>
<body>
<iframe src="masukkan URL di sini(jgn lupa di akhir URL berikah tanda slash (/)" width="850" height="600"></iframe>
</body>
</html>""
Berikut ini adalah contoh dari iframe (www.buzzingyourbizz.blogspot.com di-iframe ke dalam http://www.zenithaweb.blogspot .com) dengan nilai "width=500" dan "height=660
"
"width" adalah lebar iframe dan "height" adalah panjang iframe (keduanya dalam satuan pixel). anda bisa merubah ukurannya seperti yang anda inginkan.
17. Di bawah ini coding HTML untuk membuat "footer". Copy ke dalam notepad dan simpan sebagai file HTML pada folder yang anda inginkan, tanda double quote ("") pada awal dan akhir kode jangan ikut dicopy. Lalu, double-klik (bukalah) file html tersebut.
""<!DOCTYPE>
<html>
<body>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright 20:01 PM 5/25/2013@buzzingyourbizz.blogspot.com (this is footer)</div>
</body>
</html>""
Maka akan dihasilkan tampilan seperti di bawah ini:
18. Langkah terakhir dalam sesi ini adalah kita akan merangkai semua coding di atas menjadi sebuah halaman website. Apabila semua coding di atas di rangkai maka akan menjadi sebuah halaman website seperti di bawah ini:
Dan inilah coding HTML yang telah dirangkai menjadi satu:
bila anda ingin meng-copynya, ingat tanda double quote ("") pada awal dan akhir kode jangan ikut dicopy
""<!DOCTYPE>
<html>
<body>
<div id="container" style="width:1000px">
<div id="header" style="background-color:#F0E68C;width:1000px;height:200px">
<h1 style="margin-bottom:0;text-align:center;font-family:verdana; color:#DC143C;">Ini Adalah Judul Blog Anda</h1>
<h2 style="text-align:center; font-family:arial color:#DC143C;">Ini deskripsi blog anda</h2></div>
<table border="1">
<tbody>
<tr>
<th><a href="http://buzzingyourbizz.blogspot.com/">Home</a></th>
<th><a href="http://buzzingyourbizz.blogspot.com/p/registrasi.html/">Bisnis</a></th>
<th><a href="http://buzzingyourbizz.blogspot.com/p/web-making.html/">Bikin Web</a></th>
<th><a href="http://buzzingyourbizz.blogspot.com/p/free-downloads.html/">Download Gratis</a></th>
<th><a href="http://buzzingyourbizz.blogspot.com/p/jokes.html/">Humor</a></th>
</tr>
</tbody>
</table>
<div id="menu" style="background-color:#FFE4C4;height:1500px;width:150px;float:left;">
<p> (p)adalah paragraf, anda bisa menuliskan apapun dalam elemen ini</p>
<b> (b)Untuk membuat tulisan bold</b><br>
<i> (i)untuk membuat tulisan italic</i><br>
<p> (br) untuk membuat baris atau alinea baru</p><br>
<hr>
<p> (hr) untuk membuat garis horizontal</p>
</div>
<body>
<div id="ads" style="background-color:#FFE4C4;height:1500px;width:150px;float:right;">
<b>kategori</b><br>
<ul>
<li>Bag</li>
<li>Shoes</li>
</ul>
<hr/>
<ol>
<li>Bag</li>
<li>Shoes</li>
</ol>
<hr/>
<dl>
<dt>Bag</dt>
<dd>-Gucci</dd>
<dt>Shoes</dt>
<dd>-Nike</dd>
</dl>
</div>
<table border="1">
<tbody><tr>
<th>Bag</th>
<th>Shoes</th>
<th>Netbook</th>
</tr>
<tr>
<td>Gucci</td>
<td>Nike</td>
<td>Zyrex</td>
</tr>
<tr>
<td>Prada</td>
<td>Eagle</td>
<td><a href="http://buzzingyourbizz.blogspot.com/">This is a link</a></td><td>
</td></tr>
</tbody></table>
<form>
First name:<input name="firstname" type="text"><br>
Last name:<input name="lastname" type="text">
</form>
<form>
password:<input name="pwd" type="password">
</form>
<form>
<input name="sex" value="male" type="radio">Male<br>
<input name="sex" value="female" type="radio">Female
</form>
<form>
<input name="vehicle" value="bike" type="checkbox">I have a bike<br>
<input name="vehicle" value="Car" type="checkbox">I have a car
</form>
<form action="">
<select name="cars">
<option value="Mercedez">Mercedez</option>
<option value="Audi">Audi</option>
<option value="Fiat">Fiat</option>
</select>
</form>
<textarea rows="10" cols="30">Yang baca lagi serius
</textarea>
<form action="">
<input value="Tekan" type="button">
</form>
<form name="input" action="html_form_action.asp" method="get">
Username:<input name="user" type="text">
<input value="submit" type="submit">
</form>
<p style="font-family:mistral;color:#DC143C;font-size:25px;">This is a sample to style the text</p>
<a href="http://www.buzzingyourbizz.blogspot.com/">klik di sini</a>
<a target="_blank" href="http://www.google.com/">Click Here!</a>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright 20:01 PM 5/25/2013@buzzingyourbizz.blogspot.com (this is footer)</div>
</body>
</html>""
No comments:
Post a Comment