Modul 2a html

20
HyperText Markup Language Pendahuluan Internet Explorer (ie), Netscape, Opera adalah beberapa contoh Web Browser yang sering kita pake saat browsing di Internet. Berbagai dokumen yang akan ditampilkan oleh web browser format dengan HyperText Markup Language (HTML). Nantinya kita akan mengenal bahasa lain baik yang bekerja disisi klient maupun disisi server. Kedua jenis bahasa ini juga sangat berkaitan erat dengan format HTML. Karena itu sebelum kita bisa mengenal bahasa pemrograman web lebih lanjut, kita harus mengerti HTML terlebih dahulu. Sangat penting untuk menguasai HTML walaupun ada banyak editor seperti Dreamweaver, Ms. Front Page, Home Site dan berbagai aplikasi lain yang mempermudah pembuatan document HTML. Document html di simpan dengan extension .html atau .htm. Penyimpan dengan extension .html atau .htm adalah sama, penggunaan extension .htm dikarenakan pada awalnya operating sistem hanya mendukung penyimpanan file dengan maksimal extension adalah 3 karakter. Tetapi operating sistem sekarang sudah mampu mendukung lebih dari 3 karakter. Tujuan 1. Menguasai dasar-dasar pemrogram web dengan HTML 2. Mampu melakukan pengformatan document web dengan element table 3. Mengenal kegunaan setiap tags HTML 4. Mampu pengkombinasikan penggunaan frame 5. Mampu membuat document yang lebih interaktif 6. Memberikan tampilan yang lebih halus dan menarik Dasar-dasar HTML Document HTML hanya dapat dijalankan di web browser seperti Internet Explorer (ie), Netscape, dan Opera. Web browser biasanya hanya disebut browser saja. Http (HyperText Transfer Protocol) adalah protocol yang digunakan untuk mentransfer data antara Web Browser(client) dengan Web Server(Server) yang diformat dengan format HTML. Format HTML berupa tags-tags yang selalu berpasangan. contoh : <html></html>, <html> adalah awal suatu tags dan akhir dari tags tersebut adalah </html> dimana pada akhir suatu tags selalu ditambahin '/'. Bentuk dasar / Struktur dasar HTML Sebuah document web minimal memiliki bentuk dasar sepeti : <html> <head> <title>Contoh dasar html</title> </head> <body color="#ffffff"> Selamat, <br> disini adalah bagian yang akan tampil di document web. </body> </html> tags html tidak mengenal perbedaan huruf besar maupun huruf kecil. Penulisan <html> atau <HTML> atau <HTml> akan dianggap sama. semua informasi diantara tags<head></head> tidak akan ditampilkan. Semua informasi hanya akan ditampilkan diantara tags<body></body>. Beberap istilah dalam HTML Tags : suatu kesatuan teks yang diawali dengan < dan diakhiri dengan >, dimana teks tersebut diapit diantara < dan >, contoh : <html>, <head>, <body> dll.

description

cara belajar html

Transcript of Modul 2a html

Page 1: Modul 2a html

HyperText Markup Language Pendahuluan Internet Explorer (ie), Netscape, Opera adalah beberapa contoh Web Browser yang sering kita pake saat browsing di Internet. Berbagai dokumen yang akan ditampilkan oleh web browser format dengan HyperText Markup Language (HTML). Nantinya kita akan mengenal bahasa lain baik yang bekerja disisi klient maupun disisi server. Kedua jenis bahasa ini juga sangat berkaitan erat dengan format HTML. Karena itu sebelum kita bisa mengenal bahasa pemrograman web lebih lanjut, kita harus mengerti HTML terlebih dahulu. Sangat penting untuk menguasai HTML walaupun ada banyak editor seperti Dreamweaver, Ms. Front Page, Home Site dan berbagai aplikasi lain yang mempermudah pembuatan document HTML. Document html di simpan dengan extension .html atau .htm. Penyimpan dengan extension .html atau .htm adalah sama, penggunaan extension .htm dikarenakan pada awalnya operating sistem hanya mendukung penyimpanan file dengan maksimal extension adalah 3 karakter. Tetapi operating sistem sekarang sudah mampu mendukung lebih dari 3 karakter. Tujuan 1. Menguasai dasar-dasar pemrogram web dengan HTML 2. Mampu melakukan pengformatan document web dengan element table 3. Mengenal kegunaan setiap tags HTML 4. Mampu pengkombinasikan penggunaan frame 5. Mampu membuat document yang lebih interaktif 6. Memberikan tampilan yang lebih halus dan menarik Dasar-dasar HTML Document HTML hanya dapat dijalankan di web browser seperti Internet Explorer (ie), Netscape, dan Opera. Web browser biasanya hanya disebut browser saja. Http (HyperText Transfer Protocol) adalah protocol yang digunakan untuk mentransfer data antara Web Browser(client) dengan Web Server(Server) yang diformat dengan format HTML. Format HTML berupa tags-tags yang selalu berpasangan. contoh : <html></html>, <html> adalah awal suatu tags dan akhir dari tags tersebut adalah </html> dimana pada akhir suatu tags selalu ditambahin '/'. Bentuk dasar / Struktur dasar HTML Sebuah document web minimal memiliki bentuk dasar sepeti : <html> <head> <title>Contoh dasar html</title> </head> <body color="#ffffff"> Selamat, <br> disini adalah bagian yang akan tampil di document web. </body> </html> tags html tidak mengenal perbedaan huruf besar maupun huruf kecil. Penulisan <html> atau <HTML> atau <HTml> akan dianggap sama. semua informasi diantara tags<head></head> tidak akan ditampilkan. Semua informasi hanya akan ditampilkan diantara tags<body></body>. Beberap istilah dalam HTML Tags : suatu kesatuan teks yang diawali dengan < dan diakhiri dengan >, dimana teks tersebut diapit diantara < dan >, contoh : <html>, <head>, <body> dll.

Page 2: Modul 2a html

Element : adalah teks yang berada diantara < dan >, contoh : tags <html>, elementnya adalah html tags <body>, elementnya adalah body Attribute : suatu keyword yang merupakan bagian dari suatu element, contoh : <img src="logo.gif" width=20 height=20> dimana yang dimaksud dengan attribute adalah src, width, height. Latihan Lab. coba ketik program diatas dengan menggunakan notepad/wordpad kemudian simpan dengan nama file latihan1.html pada direktori c:\latihan\html\. Jalankan web browser Anda, kemudian klik menu file > open kemudian cari file latihan1.html. Tampilan di browser

Seperti yang saya jelaskan sebelumnya, setiap tags html selalu diikuti dengan penutup tags, dari contoh diatas dapat kita lihat bahwa document diawali dengan tags <html> dan kemudian diakhiri dengan tags </html> juga. Kemudian diantara tags <html> terdapat tags lain seperti <head></head> dan <body></body>, sedangkan tags <title></title> ada diantara tags <head>, disamping tags <title> masih ada tags lain seperti <meta> yang berada diantara tags <head>, sedangkan sisanya adalah tags-tags yang akan berada diantara tags <body>. Dari contoh diatas adalah tags <br>. Untuk tags-tags tertentu ada pengecualian tidak memiliki tags penutup seperti tags <br>, <hr>, <img> dan <p>. Semua text yang ada diantara tags <body></body> akan ditampilkan oleh browser. Text/informasi yang tampil di document akan diformat dengan menggunaan berbagai jenis tags html. Tag-tag dasar Warna Background dan teks Untuk mememberi warna pada background html anda digunakan tag body dengan attribute bgcolor. Dan untuk memberi warna teks digunakan attribute text. Contoh: <body bgcolor=”#ffff00” text=blue> nilai atribute dapat berupa hexadecimal (“#ffff00”) atau warna dasar (red, green, blue, yellow dsb)

Page 3: Modul 2a html

Break(<br>) Tag Break (<br>) digunakan untuk membuat baris baru dari suatu text. Tanpa <br>, beberapa baris teks html akan dibaca oleh browser sebagai satu baris. Contoh: Html sintak hasil Smart Media Solusindo Indonesia

Smart Media Solusindo Indonesia

Smart Media Solusindo <br> Indonesia Smart Media Solusindo Indonesia

Preformatted Text(<pre>) Browser akan mengabaikan spasi, baris baru, dan tabs dalam dokumen html. Agar spasi, baris baru dan tabs tidak diabaikan digunakan preformatted text tag <pre>. Horizontal rule(<hr>) <hr> digunakan untuk membuat garis horizontal. Beberapa attribute yang penting digunakan untuk mensetting garis tersebut adalah <hr> attribute Keterangan size Menentukan tinggi atau ketebalan garis width Menentukan tebal garis color Menentukan warna garis align Menentukan alignment

Contoh: <hr size=”10” width=”200” color =”red” align=”center”> Heading tag adalah tags yang digunakan untuk membuat heading (Judul atau subjudul) document html. Tags output

<h1>Heading 1</h1> Heading 1

<h2>Heading 2</h2> Heading 2 <h3>Heading 3</h3> Heading 3 <h4>Heading 4</h4> Heading 4 <h5>Heading 5</h5> Heading 5 <h6>Heading 6</h6> Heading 6 Latihan Lab. Ketik program dibawah ini kemudian simpan dengan nama latihan2.html <html> <head><title>Latihan Tags Heading</title></head> <body> <h2>Panca Sila</h2> <h3>1. KeTuhanan yang Maha Esa</h3> <h3>2. Kemanusiaan yang adil dan beradab</h3> ... <br> contoh penggunaan tags heading, berikut bentuk detail tags heading yang lain <h1>Heading 1</h1>

Page 4: Modul 2a html

<h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body> </html> Tampilan di browser

Tag Paragraph<p> Tag paragraf digunakan untuk membuat paragraf. <p></p> contoh: <P>Indonesian International Telecommunications, Media and Information Technology Conference and Exhibition (IITELMIT) 2002 digelar di Jakarta Convention Center (JCC) pada 7-10 Mei 2002. </P> <p>Pameran dan konferensi Teknologi Informasi-Telekomunikasi tahunan terbesar di Indonesia ini dibuka secara resmi oleh Meneg Kominfo, Syamsul Mu’arif, Selasa (7/5/2002) pukul 09.30 wib di Ruang Cendrawasih JCC. </p> Center (<center>) Digunakan untuk membuat aligment center pada teks atau object yang lain (gambar, table dsb). Mengatur huruf (font) Format font dasar Beberapa format fornt dasar yaitu: Format font dasar Contoh Hasil Bold <b> <b>rcec</b> rcec Italic<i> <i>rcec</i> rcec Underline(<u>) <u>rcec</u> Rcec Strong(<Strong>) <strong>Rcec</strong> Rcec Emphasis(<em>) <em>Rcec</em> Rcec

Page 5: Modul 2a html

Font tag<font> Font tag digunakan untuk memberi setting font yang digunakan. Beberapa attribute yang digunakan: Font attribute Keterangan Size Mengatur ukuran font Color Mengatur warna font Face Menentukan jenis font

Contoh: <font size=”+1” color=green face=”arial”>Rcec</font> Superscript dan subscript Untuk membuat superscript digunakan tag <sup> dan untuk membuat subscript digunakan tag <sub>. Contoh

x<sup>2</sup> x2

H<sub>2</sub>O H20 Karakter khusus Untuk membuat karakter khusus seperti @, ®, © digunakan sintak khusus yang dimulai dengan &...;. beberapa karakter khusus dapat dilihat pada table berikut:

< = &lt; © = &copy; " = &quot; ¼ = &#188; > = &gt; ® = &reg; = &nbsp; ½ = &#189; & = &amp; ¢ = &#162; ° = &deg; ¾ = &#190;

Tag List Ordered List(<ol>) digunakan untuk membuat daftar bernomor (numbering) seperti berikut:

• HTML • JavaScript • Photoshop • Dreamweaver

Sintak dasar: <ol> <li>HTML</li> <li>JavaScript</li> </ol> <li>(list item) merupakan tag untuk menentukan item yang dimasukkan dalam list. Beberapa attribute yang dimiliki oleh <ol> adalah: <ol> attribute

Keterangan

Type Digunakan untuk menentukan jenis list-nya(huruf atau angka)

Start Digunakan untuk menemntukan dari nomer berapa atau huruf ke berapa suatu list dimulai.

Page 6: Modul 2a html

Unordered List(<ul>) digunakan untuk membuat daftar seperti berikut:

• HTML • JavaScript • Photoshop • Dreamweaver

Sintak dasar: <ul> <li>HTML</li> <li>JavaScript</li> </ul> <ul> tidak mempunyai attribute start, tetapi tetap mempunyai attribute type yang mempunyai nilai disc,circle atau square. Nested List nested list adalah menggabungkan beberapa ordered dan unordered list. Definition List digunakan untuk membuat suatu daftar index misalkan: HTML Hyper Text Markup Langauge XML eXtensible Markup Language sintax dasar: <dl> <dt>HTML</dt> <dd>Hyper Text Markup Language</dd> </dl> Linking anchor tag<a> anchor tag digunakan untuk linking ke dokumen lain. Sintak umum: <a href=”dokumen yang dituju”>Text</a> link ke file lokal <a href=”pertama.html”>pertama</a> jika dokumen terdapat dalam folder tertentu: <a href=”folder/pertama.html”>pertama</a> link ke web site <a href=”http://www.yahoo.com”>yahoo</a> link ke email <a href=”mailto:[email protected]”>contact me</a> link dalam satu dokumen <a name =”top” href=”pertama.html#bottom”>go to bottom</a> ... <a name =”bottom” href=”pertama.html#top”>go to top</a> Warna link Warna link dapat ditentukan memalui tag body dengan attribute sebagai berikut: Body Attribute Keterangan link Warna teks yang digunakan sebagai link, belum pernah dikunjungi

vlink Visited link, warna teks link yang pernah dikunjungi alink Active link, warna teks link yang aktif

Page 7: Modul 2a html

Marquee <marquee> Tulisan berjalan <marquee> Text berjalan </marquee> Atribut Keteranagan Contoh Membuat text berjalan <marquee>Text berjalan

</marquee> Align=top, middle, bottom Menentukan perataan text

disekitar marquee <marquee align=top>text</marquee>

Behavior=scrool, slide, alternate

Menentukan tampilan text berjalan

<marquee behavior=alternate>text bolak balik</marquee>

Bgcolor=warna Menentukan lwarna latarbelakang marquee

<marquee bgcolor=red>biground merah</marquee>

Direction=left, right, up, down Menantukan arah berjalannya text

<marquee direction=up> tulisan naik</marquee>

*masih beberapa atribut namun ini dulu. Atribut-atribut marquee tersebut bisa juga digabung jadi satu Contoh <marquee direction="down" scrollamount="2" scrolldelay="0" style="Filter:Alpha(Opacity=100, FinishOpacity=5, Style=1, StartX=0, StartY=45, FinishX=0, FinishY=0);font-weight:bold;overflow:hidden;width:155px;height:250px;text-align:center;"> Taukah anda hasil tulisan gabungan dari marquee ini akan menghasil kan animasi yang sangat menarik, hanya dengan sedikit script diatas akan membuat tampilan website Anda menjadi lebih menawan. Gak percaya coba aja sendiri ☺ </marquee> Bekerja dengan Grafis Gambar background Untuk memasukkan gambar background digunakan body tag dengan attribute background. Contoh: <body background=”rcec.gif”> Image tag<img> Digunakan untuk memasukkan gambar ke dalam dokumen. Sintak umum: <img src=”nama file image”> beberapa attribute yang digunakan dalam <img>. <img> attribute

Keterangan

Src Menentukan letak (source) gambar yang akan ditampilkan pada dokumen HTML

Width Lebar gambar Height Tinggi gambar Alt Menentukan teks yang akan ter-display jika mouse diletakkan di atas

gambar (tooltip) atau teks yang terdispaly jika gambar tidak muncul

Border Menentukan lebar border

Page 8: Modul 2a html

Title Tooltip Hspace Jarak horizontal Vspace Jarak vertikal

Link dengan image Untuk membuat sutau link dengan Image, Anda dapat menggabungkan tag anchor dengan image tag. Contoh: <a href=”test.html”><img src=”test.gif”></a> Image Mapping Image mapping digunakan untukmembuat link di mana dalam satu gambar kita dalammembuat beberapa link. contoh : <img src="logo.jpg" width="510" height="399" usemap="#logoMap" border="0" alt="mapping image"> <map name="logoMap"> <area shape="rect" coords="55,57,204,185" href=url target="_blank"> <area shape="circle" coords="287,137,55" href=url> <area shape="poly" coords="122,248,225,222,244,272,176,282" href=url> </map> Membuat table Table sangat bermanfaat dalam penentuan layout atau tata design document web. table diawali dengan tags <table> kemudian diantara tags <table> ada tags <tr></tr> yang akan membentuk baris (row) kemudian diantara tags <tr> ada tags <td></td> yang akan membentuk kolom (column). Contoh bentuk dasar dari table : <table> <tr> <td></td> <td></td> </tr> </table> Tag Table <table> attribute Keterangan Nilai

border Menentukan tebal garis batas pinggir px,% align Menentukan posisi table dalam dokument left, center, right width Lebar table px,% height Tinggi table px,% background Menentukan gambar background File gambar bordercolor Menentukan warna border Warna bgcolor Menentukan warna background Warna cellpadding Jarak antara isi sel dengan border px,% cellspacing Jarak antar sel px,%

Tag Table row (<tr>) <table> attribute Keterangan Nilai

align Menentukan posisi isi sel left, center, right width Lebar px,% height Tinggi px,% bgcolor Menentukan warna background Warna valign Vertical alignment Top,middle, bottom

Page 9: Modul 2a html

Tag Table Data (<td>) <table> attribute Keterangan Nilai

align Menentukan posisi isi dalam dokument left, center, right width Lebar sel px,% height Tinggi sel px,% background Menentukan gambar background File gambar bordercolor Menentukan warna border Warna bgcolor Menentukan warna background Warna valign Vertical alignment Top,middle, bottom colspan Span kolom Angka rowspan Span row

Latihan Lab. <table border=1 cellpadding=2 cellspacing=5 width=200 height=300> <tr> <td><b>Nama Barang</b></td> <td><b>Jumlah Barang</b></td> </tr> <tr> <td>Pentium III</td> <td align=left>5 unit</td> </tr> <tr> <td>Printer Cannon</td> <td align=left>15 unit</td> </tr> <tr> <td>Scanner Umax</td> <td align=left>2 unit</td> </tr> </table> Tampilan Layar

Page 10: Modul 2a html

latihan lab. latihan menggunakan semua komponen form dengan layout yang rapi dengan dukungan table. <html> <head> <title>Registrasi form</title> </head> <body bgcolor="#FFFFFF" text="#000000"> <br> <form name="form1" method="post" action="save.asp"> <table width="500" border="1" cellspacing="0" cellpadding="0"> <tr> <td colspan="2"> <font face="Verdana, Arial" size="4"><b>Registration Form</b></font> </td> </tr> <tr> <td width="142">User ID</td> <td width="252"><input type="text" name="userid">* </td> </tr> <tr> <td width="142">Password</td> <td width="252"><input type="password" name="password">* </td> </tr> <tr> <td width="142">Confirm Password</td> <td width="252"><input type="password" name="password2">* </td> </tr> <tr> <td width="142">Name</td> <td width="252"><input type="text" name="name"></td> </tr> <tr> <td width="142">Address</td> <td width="252"><input type="text" name="address" size="40"></td> </tr> <tr> <td width="142">Gender</td> <td width="252"> <input type="radio" name="gender" value="Male" checked>Male <input type="radio" name="gender" value="female">Female</td> </tr> <tr> <td width="142">Date of Birth</td> <td width="252"> <select name="tgl"> <option value="01">01</option> <option value="02">02</option> <option value="03">03</option> <option value="04">04</option> ... <option value="29">29</option>

Page 11: Modul 2a html

<option value="30">30</option> <option value="31">31</option> </select> <select name="bln"> <option value="1">January</option> <option value="2">February</option> <option value="3">Maret</option> ... <option value="11">November</option> <option value="12">December</option> </select> <select name="thn"> <option value="1970">1970</option> <option value="1971">1971</option> <option value="1972">1972</option> <option value="1973">1973</option> <option value="1974">1974</option> </select> </td> </tr> <tr> <td width="142">E-mail</td> <td width="252"> <input type="text" name="email"> </td> </tr> <tr> <td width="142">City</td> <td width="252"> <input type="text" name="city"> </td> </tr> <tr> <td width="142">Country</td> <td width="252"> <select name="country"> <option value="Indonesia">Indonesia</option> <option value="Malaysia">Malaysia</option> <option value="Singapore">Singapore</option> <option value="Thailand">Thailand</option> </select> </td> </tr> <tr> <td width="142">Interest</td> <td width="252"> <input type="checkbox" name="checkbox" value="computer">Computer <input type="checkbox" name="checkbox2" value="software">Software <br> <input type="checkbox" name="checkbox3" value="hardware">Hardware <input type="checkbox" name="checkbox4" value="hacker_info">Hacker Info </td>

Page 12: Modul 2a html

</tr> <tr> <td width="142">&nbsp;</td> <td width="252"> <input type="submit" name="Submit" value="Proses"> <input type="reset" name="batal" value="Batal"> </td> </tr> </table> </form> </body> </html>

Tampilan Layar

Page 13: Modul 2a html

Membuat Formulir Formulir (form) digunakan untuk mengisi suatu data (mis. data registrasi). Data ini akan dikirim ke server yang nantinya dapat langsung diproses atau disimpan dalam database. Untuk membuat formulir, didahului dengan form tag dan diikuti dengan tag jenis formulirnya misalkan teksbox (teksfields) , drop down menu, radio button dsb yang diletakkan di dalam form tag. Tag Form Tag form digunakan untuk memulai membuat formulir. Sintak umumnya adalah sebagai berikut: <form name=frm1 action=url method=get|post> action diisi dengan url yang merupakan alamat atau file yang akan dituju dari halaman/document ini setelah menekan/click tombol submit. ada dua jenis method yaitu get dan post. Penggunaan method get akan menampilkan semua attribute/parameter beserta nilai pada address bar web browser, sedangkan penggunaan method post hanya menampilkan url document tersebut. contoh get : http://www.detik.com/berita.asp?berita=123123123&tgl=12042002 contoh post: http://www.detik.com/berita.asp name digunakan sebagai identitas form.jika suatu saat kita ingin mereferensi form tersebut Anda dapat menggunakan nama tersebut. Berikut adalah tag-tag yang diletakkan didalam form tag. Tag Textbox Digunakan untuk mengisi data berupa teks yang panjangnya satu baris. Sintak umum: <input type=”text” name=”username”> Tag Password Digunakan untuk mengisi password. <input type=”password” name=”passwd”> Tag Checkbox Digunakan untuk mengisi data yang berupa multiple selection. Contoh: <input type=”checkbox” name=”check” value=”computer” checked>Computer <input type=”checkbox” name=”check” value=”printer”>Printer <input type=”checkbox” name=”check” value=”harddisk”>HardDisk <input type=”checkbox” name=”check” value=”cdrom”>CD-Rom hasilnya:

Tag Radio Digunakan untuk membuat pilihan dengan yang bersifat single selection. Contoh: <input type=radio name="jnsKelamin" value="lk">Laki-laki <input type=radio name="jnsKelamin" value="pr">Perempuan tags radio memiliki nilai atribute name yang sama (dua-duanya mempunyai name="jnsKelamin") tetapi mempunya nilai value yang berbeda lk dan pr. Hasilnya:

Page 14: Modul 2a html

Tag Pilihan Digunakan untuk membuat pilihan yang berupa drop down. Contoh: <select name="negara"> <option value="none">none</option> <option value="indonesia">Indonesia</option> <option value="malaysia">Malaysia</option> <option value="singapore">Singapore</option> <option value="other">Other</option> </select> hasil:

untuk membuat pilihan yang berupa list Anda dapat menggunakan attribute size pada tag select. Tag Textarea Digunakan untuk mengisi data teks dengan lebih dari satu baris. Contoh: <textarea cols=”20” rows=”5” name=comment></textarea> cols merupakan banyaknya kolom karakter rows merupakan banyakknya baris teks. Tag Hidden Digunakan untuk mengisi data yang tidak ingin ditampilkan pada user. <input type=Hidden name=MemberId value="m001"> Tag Tombol submit Digunakan untuk mengirim data jika diklik. Contoh: <input type=submit name=btSubmit value="Send"> reset digunakan untuk menghapus isi form. Contoh: <input type=reset name=btReset value="Bantal"> Button Digunakan untuk menjalankan suatu fungsi Scripting. <input type=button name=btBiasa value="Tombol Biasa">

Page 15: Modul 2a html

Membuat Frame Frame digunakan untuk menampilkan beberapa halaman html dalam satu halaman. Untuk membuat suatu frame anda membutuhkan satu halaman frameset untuk mendefinisikan framenya, dan minimal 2 halaman lain untuk mengisi framenya.

Berikut contoh penggunaan frameset dan frame. Frameset file name : frame.html <html> <head> <title>Using Frame</title> </head> <frameset cols="126,*" rows="*" frameborder="NO" border="0" framespacing="0"> <frame name="leftFrame" src="kiri.html" scrolling="NO" noresize > <frame name="mainFrame" src="kanan.html"> </frameset> <noframes> <body bgcolor="#FFFFFF" text="#000000"> This browser do not support frame. </body> </noframes> </html> Rancangan Tampilan Layar frame.html

disini kita membagi document menjadi dua kolum(column) dimana kolum pertama dengan lebar(width) 126px. * berarti akan menggunakan sisa ruang yang tersisa. selain menggunakan pixel dan * juga dapat digunakan tanda persen(%) untuk menunjukkan ukuran baik lebar maupun tinggi suatu frame. cols menunjukkan ukuran dan jumlah column, rows menunjukkan ukuran dan jumlah row(baris). Sebelum anda membuat suatu frame, terlebih dahulu harus disiapkan file-file web page yang dibutuhkan. Dari contoh diatas anda membutuhkan file kiri.html dan kanan.html kemudian frame ini sendiri akan disimpan dengan nama file frame.html. Tags dan text diantara tags <noframes></noframes> akan digunakan jika browser yang digunakan tidak mendukung kemampuan Frame. Namun rata-rata browser sekarang

Page 16: Modul 2a html

sudah mendukung penuh kemampuan frame. Pemberian nama(name) pada frame sangat berguna pada saat mengkombinasikannya dengan link(anchor), contoh: <a href="page2.html" target="mainFrame">Second Page</a> dari contoh diatas, ada dua frame dimana pada frame kedua bernama "mainFrame", pengunaan ini bermanfaat pada saat ingin mengubah isi pada frame "mainFrame" sesuai dengan url yang tertera di href (href="page2.html"). syntaks anchor: <a href=url target="_self|_parent|_blank|namaframe"></a> frame target _self : menuju kehalaman dimana link itu aktif _parent : menuju ke halaman induk/parent dari frame kalau tidak ada frame berarti halaman itu sendiri juga. _blank : membuka window baru namaframe : sesuai dengan nama frame (eg. leftFrame). Document : Modul Dasar-dasar HTML. Sumber : Internet

Page 17: Modul 2a html

Contoh Tampilan Web Sederhana

Source Script dan keterangan <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <style type="text/css"> .kotak { border-style:solid;

Ini adalah CSS untuk memformat tampilan web, dari pada memakai table CSS bisa dipakai berulang-ulang. Diawali dengan <style type="text/css"> ………………. </style>

background-color:#d7e7ff; border-color:#3483fa; border-top-width:2px; border-bottom-width:0px; border-left-width:0px; border-right-width:0px; padding:0; height: 25px; font-family: "arial"; font-size:12px; vertical-align: top; text-align: center; } </style>

Page 18: Modul 2a html

<TITLE> Mamad Web </TITLE> Title Web </HEAD> <BODY> <TABLE width="100%" height="102" cellpadding="0" cellspacing="0" bordercolor="#3483fa"> <TR> <TD bgcolor="#3483fa" width="91" align="right"> <IMG SRC="openbsd.jpg" WIDTH="90" HEIGHT="100" BORDER=0 ALT="Open bsd logo"> </TD> <TD bgcolor="#3483fa" align="center"> <h2>

Tabel paling atas yang terdapat logo sama Company Name

<font color="#FFFFFF"> Company Name </font> <h2> </TD> </TR> </TABLE> <TABLE width="100%" height="80%"> <TR> <TD width="200" bgcolor="#d7e7ff" valign="top"> Menu

Tabel tengah untuk menu dan isi web

</TD> <TD width="85%" valign="top"> Isi Web </TD> </TR> </TABLE>

Disini penggunaan CSS <div class="kotak"> =>”kotak” sesuai dg tiap nama CSS ……… </div>

<div class="kotak"> Copy right mamad 2008 </div> </BODY> </HTML> Nb file css dapat juga diletakan di luar tersendiri dan cara pemanggilanya adalah <link href="filecss.css" rel="stylesheet" type="text/css">

Page 19: Modul 2a html

Source Script dan keterangan <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Mamad Web</title> <base target="contents"> </head> <body > <style type="text/css"> BODY { background : #FFFFFF; font-family : verdana; font-size : x-small;

} H1 { font-style : italic; font-size : 18px;

} H4 { font-size : 12px;

} A { color : #0000FF; } A:HOVER { color : #9999FF; background : white;

}

Page 20: Modul 2a html

TABLE {

} TD { font-family : verdana; font-size : 12px;

} </style> <TABLE border="0" cellpadding="0" cellspacing="0" height="60" width="901"> <TR> <TD width="243" height="44"> <Img src="gambare/nick.gif" align="left" border="0" width="228" height="40">&nbsp</TD> <TD width="658" valign="top" align="center" height="80" valign="TOP"> <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="490" HEIGHT="80" id="1" ALIGN="left" valign="top"> <PARAM NAME=movie VALUE="gambare/top.swf"> Seluruh script iniuntuk menyisipkan

file flash(swf) Disini letak filenya <PARAM NAME=movie VALUE="gambare/top.swf">

<PARAM NAME=loop VALUE=false> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="gambare/top.swf" loop=false quality=high bgcolor=#FFFFFF WIDTH="490" HEIGHT="80" NAME="1" ALIGN="left" valign="top" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"> </EMBED> </OBJECT> &nbsp; <a class="chlnk" href onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.geocities.com/nickqin2001');" style="CURSOR: hand">

Java script untuk membuat halaman web jadi default.

<img src="gambare/home.gif">&nbsp;Jadikan Hompage</a> &nbsp;&nbsp;&nbsp;&nbsp; </TD></TR> <TR> <TD height="16" align ="left" colspan="2" width="100%"> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1" height="22"> <tr> <td width="185" background="gambare/topbg.gif">&nbsp;</td> <td width="79%" background="gambare/topbg.gif"> <p align="right"><a href="index.html">Home</a>&nbsp;|&nbsp;<a href="sitemap.html" target="main">Site Map</a>&nbsp;|&nbsp;<a href="about.html" target="main">About</a>&nbsp;&nbsp;&nbsp;&nbsp;</td> </tr> </table> </TD></TR> </TABLE> </body> </html>