HyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet
CONTOH sederhana :
<html>
<head><title>Contoh HTML</title>
</head>
<body>
Contoh Sederhana HTML
</body>
</html>
Menggunakan Tabel
HTML menyediakan tag-tag untuk membuat sebuah tabel, yaitu :
Tag <TABLE> : untuk mendefinisikan sebuah tebel
Tag <TR> : untuk mendefinisikan baris tabel
Tag <TH> : untuk mendefinisikan judul tiap kolom atau baris
Tag <TD> : untuk mendefinisikan isi tiap kolom
Contoh :
Membuat Tabel
<html>
<head><title>Membuat Tabel</title>
</head>
<body>
<table border=1>
<tr><td>kolom 1 baris 1</td><td>kolom 2 baris 1</td></tr>
<tr><td>kolom 1 baris 2</td><td>kolom 2 baris 2</td></tr>
</table>
</body>
</html>
Membuat hyperlink
<html>
<head><title>Membuat Hyperlink</title>
</head>
<body>
<a href=”hal1.htm”>Halaman 1</a> <br>
<a href=”hal2.htm”>Halaman 2</a>
</body>
</html>
Membuat Frame
Untuk membuat frame, kita perlu tag <Frameset> dan <Frame> .
Contoh :
<html>
<head><title>Membuat Frame</title>
</head>
<frameset rows =”80,*” cols=”*” frameborder =”yes” border =”2” framespacing=”0”>
<frame src =”frameAtas.htm” name=”topframe” scrolling =”no” >
<frameset cols =”80,*” frameborder =”yes” border =”2” framespacing=”0”>
<frame src =”frameKiri.htm” name=”leftframe” scrolling =”no” >
<frame src =”frameKanan.htm” name=”rightframe” >
</frameset>
</frameset>
<noframes><body>
</body></noframes>
</html>
Menampilkan Gambar
<html>
<head><title>Membuat Hyperlink</title>
</head>
<body>
<img src=filegambar.jpg width=100% height=100% alt=”ini gambarku”>
</body>
</html>
Memformat Font
<TITLE> Memformat Font </TITLE>
</HEAD>
<BODY>
<PRE>
<FONT FACE=”Arial” SIZE=1 COLOR=#FF0080>
Jenis font ini adalah Arial,berwarna biru,ukurannya 1
</FONT>
<FONT FACE=”Monotype Corsiva” SIZE=5 COLOR=BLUE>
Jenis font ini adalah Arial,berwarna biru,ukurannya 5
</FONT>
</BODY>
</HTML>
Menggunakan Form
Form adalah sebuah daftar isian. Daftar isian ini untuk meminta informasi dari user untuk
kemudian diolah. Umumnya pengolahan form dilakukan pada server dengan menggunakan skrip
yang bersifat server-side.
Untuk membuat sebuah form, tag-tag yang diperlukan adalah :
· Tag <FORM>
· Tag <TEXTAREA>
· Tag <SELECT>
· Tag <INPUT>
Tag <FORM>
Tag <FORM> merupakan tag yang digunakan untuk mendefinisikan sebuah form. Tag ini
mempunyai dua atribut, yaitu METHOD dan ACTION.
Contoh :
<HTML>
<HEAD>
<TITLE>Text Area</TITLE>
</HEAD>
<BODY>
<FORM>
<TEXTAREA NAME=teksarea1 ROWS=10 COLS=40>
Teks ini akan tertulis di dalam textarea
</TEXTAREA>
</FORM>
</BODY>
</HTML>
Tag <SELECT>
Tag <SELECT> digunakan untuk membuat sebuah daftar pilihan. Tag ini memiliki beberapa
atribut, yaitu :
frame.html
file html ini digunakan untuk memanggil komponen2 yang dibutuhkan dalam frame
<HTML>
<HEAD>
<TITLE>index</TITLE>
</HEAD>
<FRAMESET COLS=”150,*”>
<FRAME SRC=”menu.htm” NAME=”frame_menu” NORESIZE>
<FRAMESET ROWS=”90%,10%”>
<FRAME SRC=”pendaftaran.htm” NAME=”frame_isi” >
<FRAME SRC=”about.html” NAME=”frame_kaki” >
</FRAMESET>
</FRAMESET><noframes></noframes>
</HTML>
File2 yang ada di bawah ini merupakan komponen2 yang nantinya akan di panggil dalam file frame.html
1. menu.htm
<HTML>
<HEAD>
<TITLE>latih_a</TITLE>
</HEAD>
<body text=”#0066CC” bgcolor=”#00FFCC”>
<H3>Menu</H3>
<A HREF=pendaftaran.htm TARGET=”frame_isi”>Pendaftaran</A>
<BR>
<A HREF=polling.htm TARGET=”frame_isi”>Polling</A>
<BR>
<A HREF=terimakasih.htm TARGET=”frame_isi”>Terima Kasih</A>
<BR>
</BODY>
</HTML>
2. pendaftaran.htm
<HTML>
<HEAD>
<TITLE>latih_b</TITLE>
</HEAD>
<body text=”#990033″ bgcolor=”#CC9900″>
<H3>Form Pendaftaran Polling </H3>
<p>Nama : <input name=”tfnama” type=”text”> </p>
<p>Email : <input name=”tfnama2″ type=”text”></p>
<INPUT TYPE=SUBMIT VALUE=”Masukkan”>
</BODY>
</HTML>
3. polling.htm
<HTML>
<HEAD>
<TITLE>Polling</TITLE>
</HEAD>
<body text=”#006699″ bgcolor=”#CC9966″>
<H3><center>
<p>Polling Hero Dota Terbaik Saat Ini</p>
</center></H3>
<TABLE BORDER=1>
<TR>
<TD><img src=”gambar/Hmbr[1].gif”></TD>
<TD><img src=”gambar/Stygwyer - Blood Seeker.gif”></TD>
<TD><img src=”gambar/Magina - Anti Mage.gif”></TD>
<TD><img src=”gambar/Netherdrake.gif”></TD>
</TR>
<TR>
<TD>Zeus</TD>
<TD>Bloodseker</TD>
<TD>Magina</TD>
<TD>Viper</TD>
</TR>
</TABLE>
<h2>Pilih</h2>
<INPUT TYPE=CHECKBOX NAME=”magina” >
Magina
<BR>
<INPUT TYPE=CHECKBOX NAME=”bloodsekeer”>
Bloodseeker
<BR>
<INPUT TYPE=CHECKBOX NAME=”zeus” >
Zeus
<BR>
<INPUT TYPE=CHECKBOX NAME=”viper” >
Viper
<P>
<INPUT TYPE=SUBMIT VALUE=”submit”>
</BODY>
</HTML>
4. terimaksih.htm
<HTML>
<HEAD>
<TITLE>latih_d</TITLE>
</HEAD>
<body text=”red” bgcolor=”#00CC33″>
<H3>Terimakasih</H3>
<H3>Terimakasih anda telah mengikuti poling ini sampai selesai, semoga polling ini bermanfaat untuk kita semua.</H3>
</BODY>
</HTML>
5. about.html
<HTML>
<HEAD>
<TITLE>latih_e</TITLE>
</HEAD>
<body text=”#000066″bgcolor=”#99FF00″>
<CENTER>
<h2>chuz.comze.com</h2>
</CENTER>
</BODY>
</HTML>
Tidak ada komentar:
Posting Komentar