1. TextBox, Inputan Pasword, Tombol submit dan reset
<html>
<body>
<form>
Nama Lengkap : <input type="text" size="30" maxlength="10" name="fieldNama"value=""/>
</br></br>
Alamat : <input type="text" size="30" maxlength="10" name="fieldAlamat" value=""/>
</br></br>
Password : <input type="password" size="30" maxlength="10" name="fieldpass" value=""/>
</br></br>
<input type="submit" value="Save" />
<input type="reset" value="Clear" />
</form>
</body>
</html>
2. CheckBox, Radio Button, Text Area
<html>
<form>
Daftar Hobby </br>
<input type="checkbox" name="hoby" value="membaca"/>Membaca
<input type="checkbox" name="hoby" value="memancing"/>Memancing
<input type="checkbox" name="hoby" value="renang" checked/>Renang
<input type="checkbox" name="hoby" value="memancing"/>Sepak Bola
</br></br>
Jenis Kelamin</br>
<input type="radio" name="jk" value="Laki"/>Pria
<input type="radio" name="jk" value="Perempuan"/>Wanita</br></br>
Komentar :
</br>
<textarea name="Komentar" rows="5" cols="25"></textarea></br></br>
</form>
</html>
3. Perbedaan ComboBox dan List Box
<html>
Membuat combobox</br></br>
Tingkat Pendidikan</br>
<select name="pend">
<option value="sd">SD</option>
<option value="smp">SMP</option>
<option value="sma">SMA</option>
<option value="pt">Perguruaan Tinggi</option>
</select>
</br></br></br></br>
Membuat Listbox</br></br>
Tingkat Pendidikan</br>
<select name="pend"multiple/>
<option value="sd">SD</option>
<option value="smp">SMP</option>
<option value="sma">SMA</option>
<option value="pt">Perguruaan Tinggi</option>
</select>
</html>
1. Membuat Frame 1
Cara membuat frame adalah dengan mengunakan lebih dari 1 halaman, langkahnya :
* Pertama Kita buat dahulu isi dari frame kita buat 2 halaman, halaman pertama bernama halaman_a.html yang kedua halaman_b.html
----halaman_a.html-----
<html>
<head>
<title>halaman a</title>
</head>
<body>
<h1>ini halaman A</h1>
</body>
</html>
----halaman_b.html-----
<html>
<head>
<title>halaman b</title>
</head>
<body>
<h1>ini halaman B</h1>
</body>
</html>
* Kedua kita buat halaman framenya, kita beri nama frame1.html
-----frame1.html-----
<html>
<head>
<title>latihan frame</title>
</head>
<frameset cols="40%,*">
<frame src="halaman_a.html"/>
<frame src="halaman_b.html"/>
</frameset>
</html>
2. Membuat Frame 2
----halaman_a.html-----
<html>
<head>
<title>halaman a</title>
</head>
<body>
<h1>ini halaman A</h1>
</body>
</html>
----halaman_b.html-----
<html>
<head>
<title>halaman b</title>
</head>
<body>
<h1>ini halaman B</h1>
</body>
</html>
----frame2.html----
<html>
<head>
<title>latihan frame</title>
</head>
<frameset rows="30%,*">
<frame src="halaman_a.html">
<frameset cols="40%,*">
<frame src="halaman_b.html"/>
<frame src="halaman_b.html"/>
</frameset>
</frameset>
</html>
3. Membuat frame tanpa border
* Gunakan halaman_a.html dan halaman_b.html yang tadi untuk membuat ini
<html>
<frameset cols="40%,*" border="0">
<frame src="halaman_a.html">
<frame src="halaman_b.html">
</frameset>
</html>
4. Membuat Frame dengan Link
* Gunakan halaman_a.html dan halaman_b.html yang tadi untuk membuat ini
* Buat lagi halaman baru seperti halaman_a.html kita beri nama halaman_c.html
----frame4.html-----
<html>
<frameset cols="40%,*">
<frame name="kiri" src="halaman_a.html"/>
<frame name="kanan" src="halaman_c.html"/>
</frameset>
</html>
5. Membuat iFrame
<html>
<body>
Mencoba IFrame<br/>
<iframe src="halaman_a.html"
width="200"
height="100"
align"=right"/>
</body>
</html>
1. Membuat Table
<html>
<body>
<table>
<caption> Tabel Keahlian</caption>
<tr><th>Name</th><th>Keahlian</th></tr>
<tr><td>Superman</td><td>Bisa Terbang</td></tr>
<tr><td>Spiderman</td><td>Nempel Dinding</td></tr>
</table>
</body>
</html>
ket.
- tag untuk judul
- tag untuk isi table
- tag untuk isi table headline(nama kolom)
- tag untuk isi-isi tabel
2. Membuat table dengan background color dan border
<html>
<body>
<table bgcolor="yellow" border="5">
<caption> Tabel Keahlian</caption>
<tr><th>Name</th><th>Keahlian</th></tr>
<tr><td>Superman</td><td>Bisa Terbang</td></tr>
<tr><td>Spiderman</td><td>Nempel Dinding</td></tr>
</table>
</body>
</html>
3. Membuat table dengan jarak dan menentukan jarak table
<html>
<body>
<table border="10" cellpadding="10" cellspacing="20">
<caption> Tabel Keahlian</caption>
<tr><th>Name</th><th>Keahlian</th></tr>
<tr><td>Superman</td><td>Bisa Terbang</td></tr>
<tr><td>Spiderman</td><td>Nempel Dinding</td></tr>
</tabel>
</body>
</html>
ket.
- tag untuk memberi jarak antar tabel
- tag untuk memberi jarak spasi antar table
4. Membuat table dengan ukuran yang diinginkan
<html>
<body>
<table border="1" width="300 height="600" align="center">
<caption> Tabel Keahlian</caption>
<tr><th>Name</th><th>Keahlian</th></tr>
<tr><td valign="top">Superman</td><td>Bisa Terbang</td></tr>
<tr><td valign="middle">Spiderman</td><td>Nempel Dinding</td></tr>
</body>
</html>
5. Contoh table lainnya
<html>
<body>
<table border="1">
<caption>DAta Mamalia</caption>
<tr>
<th rowspan="2" colspan="2"> Mamalia <th colspan="3">Jenis Mamalia</th>
</tr>
<tr>
<th> Orang<br/>Utan </th><th>Gajah</th><th>Zebra</th>
</tr>
<tr>
<th rowspan="2">Jenis<br/>Kelamin</th>
<th>Jantan</th>
<td>15</td><td>5</td><td>8</td>
</tr>
<tr>
<th>Betina</th>
<td>25</td><td>7</td><td>10</td>
</tr>
</table>
</body>
</html>
1.Membuat List
<html>
<body>
BAB 1 dengan UL
<ul>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
BAB 2 dengan OL
<ol>
<li>hai</li>
<li>hai</li>
<li>hai</li>
</ol>
</body>
</html>
Ket.
- tag <ul> adalah unorderlist digunakan untuk membuat list berupa bullets
- tag <ol> adalah orderlist digunakan untuk membuat list berupa number
- tag<li> sebagai isi
2. List dengan atribut
<html>
<body>
Klarifikasi Hewan dengan UL Circle
<UL type="circle">
<li>mamalia</li>
<li>reptil</li>
<li>amfibi</li>
</UL>
Klarifikasi Hewan dengan UL Square
<UL type="square">
<li>mamalia</li>
<li>reptil</li>
<li>amfibi</li>
</UL>
Klarifikasi Hewan dengan UL Disc
<UL type="disc">
<li>mamalia</li>
<li>reptil</li>
<li>amfibi</li>
</UL>
Klarifikasi Hewan dengan OL type "a"
<OL type="a" start="1">
<li>mamalia</li>
<li>reptil</li>
<li>amfibi</li>
</OL>
Klarifikasi Hewan dengan OL type "A"
<OL type="A" start="4">
<li>mamalia</li>
<li>reptil</li>
<li>amfibi</li>
</OL>
Klarifikasi Hewan dengan OL type romawi "i"
<OL type="i" start="8">
<li>mamalia</li>
<li>reptil</li>
<li>amfibi</li>
</OL>
Klarifikasi Hewan dengan OL type romawi "I"
<OL type="I" start="12">
<li>mamalia</li>
<li>reptil</li>
<li>amfibi</li>
</OL>
Klarifikasi Hewan dengan OL type angka "1"
<OL type="1" start="16">
<li>mamalia</li>
<li>reptil</li>
<li>amfibi</li>
</OL>
</body>
</html>
ket.
- atribut pada tag <ul> hanya type dan berisi square(kotak), circle(lingkaran), disc (bulat penuh)
- atribut pada tag <ol> bertype type(type number apa yang akan kita pakai) dan start(dari angka berapa kita akan mulai)
3. Link and Hyperlink
<html>
<body>
Hyperlink ke halaman web <br/>
<a href = "Biodata.html"> Go to Biodata </a><br/><br/>
Link ke email<br/>
<a href = "mailto:m.rhyadh@gmail.com">
Send a email
</a><br/><br/>
Situs web<br/>
<a href = "http://www.google.com">Go to Google </a><br/><br/>
</body>
</html>
1. Kerangka Utama Dokumen XHTML
<html>
<head>
<title> Judul Dokumen</title>
</head>
<body>
Isi Dokumen ditulis disini
</body>
</html>
2. Cara Mengganti Warna Latar
<html>
<head>
<title> Judul</title>
</head>
<body bgcolor=”aqua”>
Isi Tulisan
</body>
</head>
</html>
3. Cara Menambah Komentar
<html>
<head>
<title> Judul</title>
</head>
<body bgcolor=”aqua”>
<!–ini komentarnya–>
Isi Tulisan
</body>
</head>
4. Mengenal Berbagai macam Tag
<html>
<head>
<title> Judul</title>
</head>
<p align=”center”>
Hallo Semua<br/>
</p>
<hr/>
<b>Nama Saya Rhyadh</b><br/>
<i>nrp 0972167</i>
<small>asal cimahi</small>
<big>hobby bermain bola</big>
<hr width= “5%” size=”20” align=”center noshade/>
Ini Tanpa efek font apapun<br/>
<font face=”arial” size=”5” color=”red”>
Ini dengan efek FONT
</font>
<pre>
Belajar tag pre
Ini berfungsi untuk melakukan preformat
Jadi tidak usah memkain tag br untuk melakukan enter
</pre>
Ayo Belajar <acronym title=”Hyper Text Markup Language”>HTML</acronym>
</body>
</head>
Ket.
- Tag <br/> berfungsi sebgai enter
- Tag <p></p> digunakan untuk mengelompokan suatu text ke dalam suatu paragraf
- Tag<b><i><u> berfungsi sebagai bold, italic, dan underline
- Tag<big>dan<small> berfungsi untuk memperbesar dan memperkecil tulisan
- Tag <hr/> digunakan untuk membuat suatu garis mendatar/ horisontal
- Tag <font> digunakan untuk melakukan pengaturan huruf
- Tag <pre></pre> digunakan untuk melakukan preformat, kita tidak usah melakukan tag <br> untuk melakukan enter
- Tag <acronym> digunakan untuk memberi keterangan tambahan terhadap suatu istilah ataupun singkatan
5. Mengenal Tag Heading
<html>
<head>
<title> Judul</title>
</head>
<body >
<h1 align=”center”>heading 1 </h1>
<h2 align=”right”>heading 2</h2>
<h3 align=”left”>heading 3 </h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
</body>
</head>
Ket.
- Terdapat 6 ukuran heading mulai <h1> sampai dengan <h6> , <h1> huruf paling besar dan <h6> paling kecil
6. Mengenal Spesial Character
<html>
<head>
<title> Judul</title>
</head>
<body >
©
®
&
×
÷
<
>
½
</body>
</head>
Ket.
- Digunakan untuk menulis Spesial Character di HTML
7. Mengenal tag <sup>, <sub>, <tt>, dan <del>
<html>
<body>
Percobaan yang <del>salah</del><br/>
<tt>Senyawa dan Satuan</tt><br/>
H<sub>2</sub>SO<sub>4</sub><br/>
Satuan Luas adalah meter<sup>2</sup><br/>
</body>
</html>
Ket.
- tag <del> digunakan untuk membuat efek coretan
- tag <tt> digunakan untuk membuat efek mesin tik
- tag <sub> digunakan untuk efeksubscript
- tag <sup> digunakan untuk efeksuperscript
8. Memberi Gambar Pada Latar dan tag <img>
<html>
<head>
<title> Judul</title>
</head>
<body >
<body background=”merapi.jpg”>
<img src=”pic1.jpg”/>
<img src=”water lilies.jpg”
Align= “middle”
Alt=”bunga lili”
Width=”200”
Height=”300”/>
Ini Bunga Lili
</body>
</head>
Ket.
- Atribut background pada tag<body> dilakukan untuk mengatur gambarnya dan file gambar dan filexhtml harus berada di satu lokasi yang sama
- Tag <img> digunakan untuk menambahkan gambar pada suatu halaman web, tag ini pun gambarnya harus berada di dalaman satu lokasi file yang sama
- Atribut yang berada dalam tag <img> berfungsi untuk mengatur ukuran, posisi, dan keterangan.
9. Mengenal Tag <marquee>
<html>
<head>
<title> Judul</title>
</head>
<body >
<font size=”7” color= “grey”>
<marquee direction=”right”>
</marquee>
</font>
</body>
</head>
Ket.
- Tag <marquee> digunakan untuk membuat animasi sederhana dan atribut direction untuk mengatur arah gerakan
10. Menambahakan Lagu
<html>
<head>
<title> Memutar Lagu </title>
</head>
<body >
<bgsound src=”lagu.mp3” loop=”2”/>
<h2>Mencoba lagu</h2>
</body>
</head>
Ket.
- Tag bgsound digunakan untuk menambahkan lagu
- Atribut src adalah file lagu
- Atribut loop adalah berapa kali memutar lagu
11. Menambahkan Video
<html>
<head>
<title> Memutar Video</title>
</head>
<body >
<h2>Mencoba Video</h2>
<embed src=”video.mpg”
Width=”300”
Height=”200”
Loop=”true”
Autostart=”false”/>
</body>
</head>
welcome to my blog,this is my frist blog...please enjoy it
student of maranatha cristian university 2009
Name : M Luqman Hakim
NRP : 0972183
