HyperText Markup LanguagePendahuluanInternet Explorer (ie), Netscape, Opera adalah beberapa contoh Web Browser yang sering...
Element : adalah teks yang berada diantara < dan >,  contoh :  tags <html>, elementnya adalah html  tags <body>, elementny...
Break(<br>)Tag Break (<br>) digunakan untuk membuat baris baru dari suatu text. Tanpa <br>,beberapa baris teks html akan d...
<h2>Heading   2</h2> <h3>Heading   3</h3> <h4>Heading   4</h4> <h5>Heading   5</h5> <h6>Heading   6</h6></body></html>Tamp...
Font tag<font>Font tag digunakan untuk memberi setting font yang digunakan. Beberapa attribute yangdigunakan:Font attribut...
Unordered List(<ul>)digunakan untuk membuat daftar seperti berikut:                • HTML                • JavaScript     ...
Marquee <marquee>Tulisan berjalan<marquee>Text berjalan</marquee>Atribut                         Keteranagan              ...
Title         TooltipHspace        Jarak horizontalVspace        Jarak vertikalLink dengan imageUntuk membuat sutau link d...
Tag Table Data (<td>)<table> attribute   Keterangan                             Nilaialign               Menentukan posisi...
latihan lab.latihan menggunakan semua komponen form dengan layout yang rapi dengandukungan table.<html><head><title>Regist...
<option value="30">30</option>        <option value="31">31</option>       </select>       <select name="bln">        <opt...
</tr>  <tr>    <td width="142">&nbsp;</td>    <td width="252">     <input type="submit" name="Submit" value="Proses">     ...
Membuat FormulirFormulir (form) digunakan untuk mengisi suatu data (mis. data registrasi). Data ini akandikirim ke server ...
Tag PilihanDigunakan untuk membuat pilihan yang berupa drop down.Contoh:<select name="negara">   <option value="none">none...
Membuat FrameFrame digunakan untuk menampilkan beberapa halaman html dalam satu halaman. Untukmembuat suatu frame anda mem...
sudah mendukung penuh kemampuan frame.Pemberian nama(name) pada frame sangat berguna pada saat mengkombinasikannyadengan l...
Contoh Tampilan Web SederhanaSource Script dan keterangan<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HT...
<TITLE> Mamad Web </TITLE>            Title Web</HEAD><BODY><TABLE width="100%" height="102" cellpadding="0" cellspacing="...
Source Script dan keterangan<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><title>M...
TABLE {       }TD {        font-family : verdana;        font-size : 12px;        }</style><TABLE border="0" cellpadding="...
Upcoming SlideShare
Loading in …5
×

Modul 2a html

2,707 views

Published on

cara belajar html

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,707
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
59
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Modul 2a html

  1. 1. HyperText Markup LanguagePendahuluanInternet Explorer (ie), Netscape, Opera adalah beberapa contoh Web Browser yang seringkita pake saat browsing di Internet. Berbagai dokumen yang akan ditampilkan oleh webbrowser format dengan HyperText Markup Language (HTML). Nantinya kita akanmengenal bahasa lain baik yang bekerja disisi klient maupun disisi server. Kedua jenisbahasa ini juga sangat berkaitan erat dengan format HTML. Karena itu sebelum kita bisamengenal bahasa pemrograman web lebih lanjut, kita harus mengerti HTML terlebihdahulu. Sangat penting untuk menguasai HTML walaupun ada banyak editor sepertiDreamweaver, Ms. Front Page, Home Site dan berbagai aplikasi lain yang mempermudahpembuatan 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 filedengan maksimal extension adalah 3 karakter. Tetapi operating sistem sekarang sudahmampu mendukung lebih dari 3 karakter.Tujuan1. Menguasai dasar-dasar pemrogram web dengan HTML2. Mampu melakukan pengformatan document web dengan element table3. Mengenal kegunaan setiap tags HTML4. Mampu pengkombinasikan penggunaan frame5. Mampu membuat document yang lebih interaktif6. Memberikan tampilan yang lebih halus dan menarikDasar-dasar HTMLDocument 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 dataantara Web Browser(client) dengan Web Server(Server) yang diformat dengan formatHTML. 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 HTMLSebuah 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 informasihanya akan ditampilkan diantara tags<body></body>.Beberap istilah dalam HTMLTags : suatu kesatuan teks yang diawali dengan < dan diakhiri dengan >, dimana tekstersebut diapit diantara < dan >, contoh : <html>, <head>, <body> dll.
  2. 2. Element : adalah teks yang berada diantara < dan >, contoh : tags <html>, elementnya adalah html tags <body>, elementnya adalah bodyAttribute : 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 simpandengan nama file latihan1.html pada direktori c:latihanhtml. Jalankan web browserAnda, kemudian klik menu file > open kemudian cari file latihan1.html.Tampilan di browserSeperti yang saya jelaskan sebelumnya, setiap tags html selalu diikuti dengan penutuptags, dari contoh diatas dapat kita lihat bahwa document diawali dengan tags <html> dankemudian diakhiri dengan tags </html> juga. Kemudian diantara tags <html> terdapattags 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 akanberada diantara tags <body>. Dari contoh diatas adalah tags <br>. Untuk tags-tagstertentu ada pengecualian tidak memiliki tags penutup seperti tags <br>, <hr>, <img>dan <p>. Semua text yang ada diantara tags <body></body> akan ditampilkan olehbrowser. Text/informasi yang tampil di document akan diformat dengan menggunaanberbagai jenis tags html.Tag-tag dasarWarna Background dan teksUntuk mememberi warna pada background html anda digunakan tag body denganattribute 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)
  3. 3. 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 hasilSmart Media Solusindo Smart Media Solusindo IndonesiaIndonesiaSmart Media Solusindo <br> Indonesia Smart Media Solusindo IndonesiaPreformatted 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 pentingdigunakan untuk mensetting garis tersebut adalah<hr> attribute Keterangansize Menentukan tinggi atau ketebalan gariswidth Menentukan tebal gariscolor Menentukan warna garisalign Menentukan alignmentContoh:<hr size=”10” width=”200” color =”red” align=”center”>Heading tagadalah tags yang digunakan untuk membuat heading (Judul atau subjudul) documenthtml. 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 6Latihan 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>
  4. 4. <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6></body></html>Tampilan di browserTag Paragraph<p> Tag paragraf digunakan untuk membuat paragraf.<p></p>contoh: <P>Indonesian International Telecommunications, Media and Information TechnologyConference 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 diIndonesia 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 dasarBeberapa format fornt dasar yaitu:Format font dasar Contoh HasilBold <b> <b>rcec</b> rcecItalic<i> <i>rcec</i> rcecUnderline(<u>) <u>rcec</u> RcecStrong(<Strong>) <strong>Rcec</strong> RcecEmphasis(<em>) <em>Rcec</em> Rcec
  5. 5. Font tag<font>Font tag digunakan untuk memberi setting font yang digunakan. Beberapa attribute yangdigunakan:Font attribute KeteranganSize Mengatur ukuran fontColor Mengatur warna fontFace Menentukan jenis fontContoh:<font size=”+1” color=green face=”arial”>Rcec</font>Superscript dan subscriptUntuk membuat superscript digunakan tag <sup> dan untuk membuat subscriptdigunakan tag <sub>.Contoh 2x<sup>2</sup> xH<sub>2</sub>O H20Karakter khususUntuk membuat karakter khusus seperti @, ®, © digunakan sintak khusus yang dimulaidengan &...;. beberapa karakter khusus dapat dilihat pada table berikut: < = &lt; © = &copy; " = &quot; ¼ = ¼ > = &gt; ® = &reg; = &nbsp; ½ = ½ & = &amp; ¢ = ¢ ° = &deg; ¾ = ¾Tag ListOrdered List(<ol>)digunakan untuk membuat daftar bernomor (numbering) seperti berikut: • HTML • JavaScript • Photoshop • DreamweaverSintak 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> KeteranganattributeType Digunakan untuk menentukan jenis list-nya(huruf atau angka)Start Digunakan untuk menemntukan dari nomer berapa atau huruf ke berapa suatu list dimulai.
  6. 6. Unordered List(<ul>)digunakan untuk membuat daftar seperti berikut: • HTML • JavaScript • Photoshop • DreamweaverSintak dasar:<ul><li>HTML</li><li>JavaScript</li></ul><ul> tidak mempunyai attribute start, tetapi tetap mempunyai attribute type yangmempunyai nilai disc,circle atau square.Nested Listnested list adalah menggabungkan beberapa ordered dan unordered list.Definition Listdigunakan untuk membuat suatu daftar index misalkan:HTML Hyper Text Markup LangaugeXML eXtensible Markup Languagesintax dasar:<dl><dt>HTML</dt><dd>Hyper Text Markup Language</dd></dl>Linkinganchor 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:faizal@smartmediasolusindo.net”>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 linkWarna link dapat ditentukan memalui tag body dengan attribute sebagai berikut:Body Attribute Keteranganlink Warna teks yang digunakan sebagai link, belum pernah dikunjungivlink Visited link, warna teks link yang pernah dikunjungialink Active link, warna teks link yang aktif
  7. 7. 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 <marquee disekitar marquee align=top>text</marquee>Behavior=scrool, slide, Menentukan tampilan text <marqueealternate berjalan behavior=alternate>text bolak balik</marquee>Bgcolor=warna Menentukan lwarna <marquee bgcolor=red>biground latarbelakang marquee merah</marquee>Direction=left, right, up, down Menantukan arah <marquee direction=up> tulisan berjalannya text naik</marquee>*masih beberapa atribut namun ini dulu.Atribut-atribut marquee tersebut bisa juga digabung jadi satuContoh<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 yangsangat menarik, hanya dengan sedikit script diatas akan membuat tampilan website Andamenjadi lebih menawan. Gak percaya coba aja sendiri ☺</marquee>Bekerja dengan GrafisGambar backgroundUntuk memasukkan gambar background digunakan body tag dengan attributebackground.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> KeteranganattributeSrc Menentukan letak (source) gambar yang akan ditampilkan pada dokumen HTMLWidth Lebar gambarHeight Tinggi gambarAlt Menentukan teks yang akan ter-display jika mouse diletakkan di atas gambar (tooltip) atau teks yang terdispaly jika gambar tidak munculBorder Menentukan lebar border
  8. 8. Title TooltipHspace Jarak horizontalVspace Jarak vertikalLink dengan imageUntuk membuat sutau link dengan Image, Anda dapat menggabungkan tag anchordengan image tag.Contoh:<a href=”test.html”><img src=”test.gif”></a>Image MappingImage mapping digunakan untukmembuat link di mana dalam satu gambar kitadalammembuat 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 tableTable 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 Nilaiborder Menentukan tebal garis batas pinggir px,%align Menentukan posisi table dalam dokument left, center, rightwidth Lebar table px,%height Tinggi table px,%background Menentukan gambar background File gambarbordercolor Menentukan warna border Warnabgcolor Menentukan warna background Warnacellpadding Jarak antara isi sel dengan border px,%cellspacing Jarak antar sel px,%Tag Table row (<tr>)<table> attribute Keterangan Nilaialign Menentukan posisi isi sel left, center, rightwidth Lebar px,%height Tinggi px,%bgcolor Menentukan warna background Warnavalign Vertical alignment Top,middle, bottom
  9. 9. Tag Table Data (<td>)<table> attribute Keterangan Nilaialign Menentukan posisi isi dalam dokument left, center, rightwidth Lebar sel px,%height Tinggi sel px,%background Menentukan gambar background File gambarbordercolor Menentukan warna border Warnabgcolor Menentukan warna background Warnavalign Vertical alignment Top,middle, bottomcolspan Span kolom Angkarowspan Span rowLatihan 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
  10. 10. latihan lab.latihan menggunakan semua komponen form dengan layout yang rapi dengandukungan 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>
  11. 11. <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">HackerInfo </td>
  12. 12. </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
  13. 13. Membuat FormulirFormulir (form) digunakan untuk mengisi suatu data (mis. data registrasi). Data ini akandikirim ke server yang nantinya dapat langsung diproses atau disimpan dalam database.Untuk membuat formulir, didahului dengan form tag dan diikuti dengan tag jenisformulirnya misalkan teksbox (teksfields) , drop down menu, radio button dsb yangdiletakkan di dalam form tag.Tag FormTag form digunakan untuk memulai membuat formulir. Sintak umumnya adalah sebagaiberikut:<form name=frm1 action=url method=get|post>action diisi dengan url yang merupakan alamat atau file yang akan dituju darihalaman/document ini setelah menekan/click tombol submit.ada dua jenis method yaitu get dan post. Penggunaan method get akan menampilkansemua attribute/parameter beserta nilai pada address bar web browser, sedangkanpenggunaan method post hanya menampilkan url document tersebut.contoh get :http://www.detik.com/berita.asp?berita=123123123&tgl=12042002contoh post:http://www.detik.com/berita.aspname digunakan sebagai identitas form.jika suatu saat kita ingin mereferensi formtersebut Anda dapat menggunakan nama tersebut.Berikut adalah tag-tag yang diletakkan didalam form tag.Tag TextboxDigunakan untuk mengisi data berupa teks yang panjangnya satu baris.Sintak umum: <input type=”text” name=”username”>Tag PasswordDigunakan untuk mengisi password. <input type=”password” name=”passwd”>Tag CheckboxDigunakan 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-Romhasilnya:Tag RadioDigunakan 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">Perempuantags radio memiliki nilai atribute name yang sama (dua-duanya mempunyainame="jnsKelamin") tetapi mempunya nilai value yang berbeda lk dan pr.Hasilnya:
  14. 14. Tag PilihanDigunakan 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 tagselect.Tag TextareaDigunakan untuk mengisi data teks dengan lebih dari satu baris.Contoh:<textarea cols=”20” rows=”5” name=comment></textarea>cols merupakan banyaknya kolom karakterrows merupakan banyakknya baris teks.Tag HiddenDigunakan untuk mengisi data yang tidak ingin ditampilkan pada user. <input type=Hidden name=MemberId value="m001">Tag TombolsubmitDigunakan untuk mengirim data jika diklik.Contoh:<input type=submit name=btSubmit value="Send">resetdigunakan untuk menghapus isi form.Contoh:<input type=reset name=btReset value="Bantal">ButtonDigunakan untuk menjalankan suatu fungsi Scripting.<input type=button name=btBiasa value="Tombol Biasa">
  15. 15. Membuat FrameFrame digunakan untuk menampilkan beberapa halaman html dalam satu halaman. Untukmembuat suatu frame anda membutuhkan satu halaman frameset untuk mendefinisikanframenya, dan minimal 2 halaman lain untuk mengisi framenya.Berikut contoh penggunaan frameset dan frame.Framesetfile 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.htmldisini kita membagi document menjadi dua kolum(column) dimana kolum pertamadengan lebar(width) 126px. * berarti akan menggunakan sisa ruang yang tersisa. selainmenggunakan pixel dan * juga dapat digunakan tanda persen(%) untuk menunjukkanukuran baik lebar maupun tinggi suatu frame.cols menunjukkan ukuran dan jumlah column, rows menunjukkan ukuran dan jumlahrow(baris).Sebelum anda membuat suatu frame, terlebih dahulu harus disiapkan file-file web pageyang dibutuhkan. Dari contoh diatas anda membutuhkan file kiri.html dan kanan.htmlkemudian frame ini sendiri akan disimpan dengan nama file frame.html.Tags dan text diantara tags <noframes></noframes> akan digunakan jika browser yangdigunakan tidak mendukung kemampuan Frame. Namun rata-rata browser sekarang
  16. 16. sudah mendukung penuh kemampuan frame.Pemberian nama(name) pada frame sangat berguna pada saat mengkombinasikannyadengan 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" sesuaidengan 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 berartihalaman itu sendiri juga._blank : membuka window barunamaframe : sesuai dengan nama frame (eg. leftFrame).Document : Modul Dasar-dasar HTML.Sumber : Internet
  17. 17. Contoh Tampilan Web SederhanaSource Script dan keterangan<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><style type="text/css">.kotak {border-style:solid;background-color:#d7e7ff; Ini adalah CSS untuk memformat tampilanborder-color:#3483fa; web, dari pada memakai table CSS bisaborder-top-width:2px; dipakai berulang-ulang.border-bottom-width:0px;border-left-width:0px; Diawali denganborder-right-width:0px;padding:0; <style type="text/css"> ……………….height: 25px; </style>font-family: "arial";font-size:12px;vertical-align: top;text-align: center;}</style>
  18. 18. <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><font color="#FFFFFF"> Tabel paling atas yang terdapat logo samaCompany Name Company Name</font><h2></TD></TR></TABLE><TABLE width="100%" height="80%"><TR><TD width="200" bgcolor="#d7e7ff" valign="top">Menu</TD><TD width="85%" valign="top"> Tabel tengah untuk menu dan isi webIsi Web</TD></TR></TABLE><div class="kotak"> Disini penggunaan CSSCopy right mamad 2008 <div class="kotak"> =>”kotak” sesuai dg tiap nama CSS</div> ……… </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">
  19. 19. 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; }
  20. 20. 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<PARAM NAME=loop VALUE=false> file flash(swf)<PARAM NAME=quality VALUE=high> Disini letak filenya<PARAM NAME=bgcolor VALUE=#FFFFFF> <PARAM NAME=movie<EMBED src="gambare/top.swf" VALUE="gambare/top.swf">loop=false quality=high bgcolor=#FFFFFFWIDTH="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 Java script untuk membuat halaman web jadi default.onclick="this.style.behavior=url(#default#homepage);this.setHomePage(http://www.geocities.com/nickqin2001);" style="CURSOR: hand"><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>

×