DAFTAR ISI
1. 2. 3. 4. 5. 6. 7. 8. 9.
PENDAHULUAN ........................................................................................................ 1 KUMPULAN TAG HTML .......................................................................................... 2 STRUKTUR DASAR HTML ..................................................................................... 3 MEMBUAT DOKUMEN HTML ................................................................................ 4 RANCANGAN STRUKTURAL TEXT ..................................................................... 5 LATAR BELAKANG DAN WARNA........................................................................ 5 MEMBUAT SEBUAH LINK ..................................................................................... 5 MEMASUKKAN SEBUAH IMAGE (GAMBAR) .................................................. 7 MEMBUAT DAFTAR (BULLETS AND NUMBERING) ..................................... 7
PENDAHULUAN
World wide web (www) mendapat perhatian publik yang sangat besar yang tidak dapat disamai oleh aplikasi internet lainnya. Pada tahun 1995, www menggantikan FTP(File Transfer Protocol) sebagai aplikasi internet yang bertanggung jawab atas sebagian besar lalu lintas internet. Web telah menjadi sedemikian terkenalnya sehingga kadang dicampuradukkan dengan istilah internet itu sendiri meskipun pengertian "di Web" dan "di Inetrnet" sebenarnya tidaklah sama. Web adalah sistem pengiriman dokumen tersebar yang berjalan di internet. Web dikembangkan di CERN (European Center for Nuclear Research), suatu lembaga bagi penelitian fisika energi tinggi di Geneva, Swiss. Tujuan semula dari lembaga ini adalah untuk membantu para fisikawan di berbagai lokasi yang berbeda dalam bekerja sama dan berbagi material penelitian. Web dengan cepat berkembang ke luar lingkup masyarakat fisika energi tinggi. Pada tahun 1993, terdapat 130 server web di internet. Setahun kemudian jumlahnya meningkat menjadi 2.738, dan pada bulan Juni 1995 terdapat 23.500 server web. Sekarang ini web telah memiliki pemirsa dalam jumlah yang sangat besar di luar lingkup akademis : kurang lebih 30% dari server web yang tengah beroperasi saat ini berada di komputer dalam domain komersial, dan di sebagian industri, di mana keberadaaan perusahaan web sama pentingnya dengan memiliki telpon atau faks bagi tujuan komunikasi bisnis. Web sekarang telah menjadi media yang sangat penting bagi periklanan dan alamat web sekarang sudah umum dijumpai pada majalah, surat kabar, dan iklan televisi. Artinya pembuatan-pembuatan halaman web yang berkualitas sangat dibutuhkan pada jaman sekarang ini. Untuk dapat dinikmati, web menggunakan suatu protocol yang berfungsi sebagai penerjemah. Protocol ini lah yang dimiliki oleh browser-browser Internet seperti Internet Explorer maupun Opera dan yang lain. Protocol itu disebut dengan HTTP (Hypertext Markup Transfer Protocol). Dokumen pada Web dibuat dalam bentuk kode-kode yang mengatur bagaimana browser menampilkan informasi yang ada pada halam tersebut. Kode tersebut dikenal dengan nama HyperText Markup Language (HTML). Walaupun suatu dokumen HTML berisi set perintah, namun HTML bukanlah bahasa pemrograman karena dia hanya mengatur tampilan. Pada awalnya HTML dikembangkan sebagai subset SGML (Standard Generalized
Mark-up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media Internet, maka HTML relatif lebih sederhana daripada SGML yang lebih ditekankan pada format dokumen yang berorientasi pada aplikasi Hasil olahan HTML harus dilihat pada Browser. Tidak seperti Microsoft Word yang hasilnya langsung dapat Anda lihat pada aplikasi yang sama. Anda dapat juga mencoba membuat dokumen html melalui Notepad.
<a href> <a name> <applet> <area> <b> <basefont> <bgsound> <big> <blink> <body> <br> <caption> <center> <comment> <dd> <div> <embed> <fn> <font> <form> <frame> <frameset> <h1> ... <h6> <head> <hr> <html> <i> <img> <input> <li> <map> <marquee> <nobr> <noframes> <ol> <p> <pre> <script> <table> <td> <title> <tr> <u> <ul>
<BODY> Di dalam tag ini bisa diletakkan berbagai page attribute seperti warna latar belakang, warna teks, warna link, warna visited link, warna active link dan lainlain. Atribut :
BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK, LEFTMARGIN & TOPMARGIN.
Contoh :
<BODY bgcolor="#000000" background="images/pcb.gif" text="#FFFFFF" link="#FF0000" vlink="FFFF00" alink="#0000FF">
3. Simpan pada folder kerja Anda dengan nama: Index.htm (bukan *.txt) 4. Buka Internet Explorer 5. Klik menu File Open 6. Klik Browse 7. Kemudian arahkan ke folder kerja Anda 8. Klik file Index (atau Index.htm) 9. Klik Open 10. Maka semestinya hasilnya seperti di bawah ini , jangan tutup Notepad Anda
11. Perhatikan pada title bar, itu adalah hasil dari tag <TITLE>. 12. Teks Tekhnologi Internet ditampilkan dengan format Heading 1 (<H1>)
<a name> : adalah Membuat nama bagian yang didefinisikan pada link pada halaman yang sama. Kalau di Ms Word itu sama artinya dengan bookmark. OK!! kita buat dulu yang <a href> : Dan tampilannya akan seperti ini :
<HTML> <HEAD> <TITLE>Insert Picture</TITLE> </HEAD> <BODY bgcolor="#000000"> <h1><a href="zapotec.bmp">Hyperlink</a></h1> </BODY> </HTML>
Pada kata hyperlink tersebut terdapat sebuah link (hubungan) yang menghubungkan file zapotec.bmp pada folder yang sama.
Dan hasilnya :
Jadi
pada
tulisan
band
favorit
akan
menghubungkan pada sebuah bookmark yang bernama gorillaz yang berisi teks gorillaz.
Kalau soal perataan, ada statement sendiri yaitu dengan sub perintah align. Contoh :
<IMG SRC="constru1.gif" ALIGN=TOP> align = bottom : berarti objek tersebut kita letakkan pada posisi bawah. align = middle : berarti objek tersebut kita letakkan pada posisi tengah. align = top : berarti objek tersebut kita letakkan pada posisi teratas. align = left : berarti objek tersebut kita letakkan pada posisi kiri. align = right : berarti objek tersebut kita letakkan pada posisi kanan.
Contoh : <UL><LI></UL>
Contoh : <OL><LI></OL>
<h1>Hari SENIN :</h1> <h3><UL type=circle> <LI>Upacara <LI>Matematika <LI>Bahasa Indonesia <LI>Sejarah </UL> </h3>
<h1>Hari SENIN :</h1> <h3><OL type=I> <LI>Upacara <LI>Matematika <LI>Bahasa Indonesia <LI>Sejarah </OL> </h3>
Hasilnya :
Dan hasilnya :
MEMBUAT FRAME
Untuk membuat sebuah frame kita dapat menggunakan TAG sbb :
Jenis Tag Dokumen dalam frame Tinggi baris frame Lebar kolom frame Lebar garis batas Warna garis batas Rancangan frame Tampilan dokumen frame Nama frame Lebar batas Tinggi batas Scrollbar Ukuran frame tak bisa diubah Batas frame Warna garis batas
<TAG> <FRAMESET></FRAMESET> <FRAMESET ROWS=#></FRAMESET> <FRAMESET COLS=#></FRAMESET> <FRAMESET BORDER=#></FRAMESET> <FRAMESET BORDERCOLOR=#$$$$$$></FRAMESET> <FRAME > <FRAME SCR=URL <FRAME NAME=***|_Blank|_Self|_Parent|_Top> <FRAME MARGINWIDTH=#> <FRAME MARGINHEIGHT=#> <FRAME SCROLLING=YES|NO> <FRAME NORESIZE> <FRAME FRAMEBORDER=YES|NO> <FRAME BORDERCOLOR=#$$$$$$>
Keterangan Sebagai pengganti <BODY> Dalam satuan pixel / % Dalam satuan pixel / %
Batas kiri dan kanan Batas atas dan bawah Memungkinkan scrolling
1 <FRAMESET cols="*,140"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="menu.htm" NAME="Frame2"> </FRAMESET> 2 <FRAMESET cols="100,*"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="menu.htm" NAME="Frame2"> </FRAMESET> 3 <FRAMESET rows="100,*"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="menu.htm" NAME="Frame2"> </FRAMESET> 4 <FRAMESET rows="*,60"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="menu.htm" NAME="Frame2"> </FRAMESET> 5 <FRAMESET rows="*,60"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAMESET cols="50%,50%"> <FRAME SRC="menu.htm" NAME="Frame2"> <FRAME SRC="menu2.htm" NAME="Frame3"> </FRAMESET></FRAMESET> 6 <FRAMESET cols="*,50%"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAMESET rows="15%,15%,70%"> <FRAME SRC="menu.htm" NAME="Frame2"> <FRAME SRC="menu2.htm" NAME="Frame3"> <FRAME SRC="menu3.htm" NAME="Frame4"> </FRAMESET></FRAMESET> 7 <FRAMESET cols="50%,50%"> <FRAMESET rows="50%,50%"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="homepage2.htm" NAME="Frame2"> </FRAMESET> <FRAMESET rows="50%,50%"> <FRAME SRC="menu.htm" NAME="Frame3"> <FRAME SRC="menu2.htm" NAME="Frame4"> </FRAMESET></FRAMESET> 8 <FRAMESET rows="15%,70%,15%"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAMESET cols="15%,70%,15%"> <FRAME SRC="menu.htm" NAME="Frame2"> <FRAME SRC="menu2.htm" NAME="Frame3"> <FRAME SRC="menu3.htm" NAME="Frame4"> </FRAMESET> <FRAME SRC="homepage.htm" NAME="BIG"> </FRAMESET></FRAMESET>
Jadi
contoh
diatas
Frame1
menghubungkan
ke
halaman
lain
yaitu
untuk Frame3 menghubungkan ke halaman menu.htm, dan untuk Frame4 menghubungkan ke halaman menu2.htm. Hasil jadinya seperti di bawah ini :
MEMBUAT TABLE
Jenis Tag Rancangan table Garis batas table Celah sel Penyangga sel Lebar table Baris dalam table Penataan letak baris Sel dalam table Penataan letak sel Tanpa ganti baris Rentang kolom Rentang baris Lebar sel Warna sel Kepala table Penataan letak kepala table Tanpa baris baru Rentang kolom Rentang baris Lebar kepala table Warna kepala table Keterangan table Penataan keterangan <TAG> <TABLE></TABLE> <TABLE BORDER=#></TABLE> <TABLE CELLSPACING=#> <TABLE CELLPADDING=#> <TABLE WIDTH=#> <TR></TR> <TR ALIGN=LEFT|CENTER|MIDDLE|BOTTOM VALIGN=TOP|BOTTOM|MIDDLE> <TD></TD> <TD ALIGN=LEFT|CENTER|MIDDLE|BOTTOM VALIGN=TOP|BOTTOM|MIDDLE> <TD NOWRAP> <TD COLSPAN=#> <TD ROWSPAN=#> <TD WIDTH=#> <TD BGCOLOR=#$$$$$$> <TH></TH> <TH ALIGN=LEFT|CENTER|MIDDLE|BOTTOM VALIGN=TOP|BOTTOM|MIDDLE> <TH NOWRAP> <TH COLSPAN=#> <TH ROWSPAN=#> <TH WIDTH=#> <TH BGCOLOR=#$$$$$$> <CAPTION></CAPTION> <CAPTION ALIGN=TOP|BOTTOM> Table Header # : boleh diisi dengan angka atau present Keterangan
10
<table width="100" border="1" cellspacing="2" cellpadding="2"> <tr> <td bgcolor="#0000FF"> </td> <td bgcolor="#FFFF66"> </td> <td rowspan="2" bgcolor="#FF3366"> </td> </tr> <tr> <td colspan="2" bgcolor="#33CC66"> </td> </tr> <tr> <td colspan="3" bgcolor="#FFCC99"> </td> </tr> </table> <table width="100" border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#0000FF"> </td> <td bgcolor="#FFFF66"> </td> <td rowspan="2" bgcolor="#FF3366"> </td> </tr> <tr> <td colspan="2" bgcolor="#33CC66"> </td> </tr> <tr> <td colspan="3" bgcolor="#FFCC99"> </td> </tr> </table>
Hasilnya :
11
12