Embed Size (px)
Citation preview
FRAME HTML
Elemen dalam HTML digunakan untuk membangun web page yang memungkinkan penampilan beberapa web pgae ditampilkan dalam satu window browser . window dalam browser dibagi menjadi beberapa windows yang disebut frame .
Model ini sering digunakan untuk lebih memperjelas penyajian informasi, dengan menu sajian selalu ditampilkan .
Fasilitas ini hanya dapat dijalankan pada browser web internet explorer 3.0 keatas dan netscape navigator 2.0 keatas .
Syntax :<frameset border =# { [rows|cols] } = { #, [ # [ , . . ] ] } >
Frame src =”url” name = “namaFrame”></frameset>
Target FRAME
Nama frame predefined : _self, _top, _parent, _blank, sering digunakan untuk menunjukan target penampulan dari suatu link .
Nama Frame Kegunaan
_self
_top
_parent
_blank
Digunakan apabila target frame adalah frame tempat link berada
Digunakan apabila target frame adalah windows tempat frame berada . Dengan menggunakan _top sebagai target maka definisi frame yang ada pada windows browser akan hilang, diganti dengan definisi frame yang baru jika ada
Target frame adalah setingkat diatas frame link berada . akibat dari target frame _parent akan sama jika tempat frame link berada hanya satu level dibawah definisi frame windows
Target _blank digunakan untuk membuka window baru
Atribut NAME merupakan atribut wajib, jika frame yang bersangkutan akan dijadikan sebagai tempat untuk menampilkan url suatu link
1
IFRAME
Pada browser internet explorer versi 3.0 dan selanjutnya dikembangkan sebuah model FRAME yang disebut iFRAME, memungkinkan pemrogram web untuk membuat frame windows yang mengambang, frame ini berlaku mirip seperti suatu text box , jika browser melakukan scroll maka frame ini juga turut terscroll .
Syntax :<iframe name=”nama_frame” src =”url” rows=# cols=#><iframe>
Atribut name dalam iFrame wajib diisikan jika dalam web page yang akan menampilkan lebih dari satu frame mengambang jika tidak maka akan hanya ada satu frame yang ditampilkan dalam browser .
Contoh-contoh Untuk dapat mencoba setiap contoh maka harus disiapkan terlebih dahulu
dokumen-dokumen HTML yang akan di tampilkan dalam suatu frame .
FRAME KOLOM
Contoh ini mendemonstrasikan bagaimana membuat frameset vertical (menyamping) untuk tiga dokumen yang berbeda .
<!—coba_framecols.html--><html><frameset cols =”25% , 50% , 25%” >
<frame src =”sayaganteng.html”><frame src =”sayatampan.html”><frame src =”sayakeren.html”>
</frameset></html>
FRAME BARIS
Contoh ini mendemonstrasikan bagaimana membuat frameset horizontal (atas – bawah) untuk tiga dokumen yang berbeda .
<--coba_linkrows.html--><html><frameset rows =”25% , 50% , 25%” >
<frame src=”sayaganteng.html”><frame src=”sayatampan.html”><frame src=”sayakeren.html”>
</frameset></html>
2
FRAME CAMPURAN
Frame ini mendemonstrasikan bagaimana untuk membuat frame set untuk tiga dokumen, dan bagaimana untuk menampilkan nya dalam baris dan kolom .
<-- framemix.html--><html><frameset rows =”50% , 50%”>
<Frame src =”sayaganteng.html”><Frameset cols =”25% , 75%”> <frame src =”sayatampan.html”> <frame src =”sayakeren.html”></frameset>
</frameset></html>
Gambar framemix
FRAME NAVIGASI
Contoh ini mendemonstrasikan bagaimana membuat suatu frame nagivasi . Nagivasi frame berisi sebuah daftar link dengan frame yang kedua sebagai target . frame yang kedua menampilkan dokumen yang di-link .
<!—coba_framenav--><html><frameset cols=”120 , *” frameborder=”1”><frame src=”sayaganteng.html”><frame src=”sayatampan.html”> name=”showframe”></frameset> </html>
3
TABEL HTML
Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris . umum nya setiap kolom menunjukkan data yang sejenis, dan setiap baris yang terdiri atas kolom-kolom menunjukan kelompok data dalam satu kesatuan .
Anggap informasi kolom anda secara sederhana digambarkan seperti dibawah ini . sebuah table mempunyai judul, tempat anda menjelaskan kolom/baris yang dilibatkan, baris untuk informasi, dan sel untuk setiap itemnya . pada table berikut, kolom pertama berisi informasi header , setiap baris menjelaskan sebuah tag tabel HTML, dan setiap sel berisi sebuah pasangan tag atau penjelasan dari fungsi tag .
Elemen-elemen table
Elemen Penjelasan
<table>..</table>
<caption>..</caption>
<tr>..</tr>
<th>..</th>
<td>..</td>
Mendefinisikan sebuah table dalam HTML . jika atribut border dituliskan, maka browser akan menampilkan table dengan border
Mendefinisikan tulisan untuk judul table . posisi default dari judul adalah ditengah pada bagian paling atas table. Atribut align=”bottom’ dapat digunakan untuk menempatkan judul pada bagian bawah tableCatatan : judul dapat diberi tag apa saja
Menspesifikasikan sebuah baris table dalam table. Anda dapat mendefinisikan atribut untuk seluruh baris: align(left,center,right) dan/atau valign(top,middle,bottom)
Mendefinisikan sel header table . secara default teks dalam sel ini ditebalkan dan ditampilkan ditengah .
Mendefinisikan sebuah sel data table . secara default teks dalam sel ini ditampilkan rata kiri, dan ditengah secara vertical . sel data table dapat berisi atribut untuk mendefinisikan karakteristik dari sel dan isi nya .
4
Atribut table
Catatan: atribut yang di definisikan dalam <th>..</th> atau <td>..</td> akan menggantikan alignment default yang difenisikan dalam <tr>..</tr>
Elemen Penjelasan
Align={left|center|right}
Valing={top|middle|bottom}
Colspan=n
Rowspan=n
Nowrap
Alignment horizontal untuk sel
Definisi alignment vertical dalam sel
Jumlah n kolom sel diperbesar
Jumlah n baris sel diperbesar
Matikan wrapping dalam sel
TAG di Dalam Suatu Tabel
Berikut adalah printscreen contoh dari tag di dalam suatu tabel
5
<!--coba_tabeltag.html--><html><body><table border="1"><tr><td><p>This is a paragraph</p><p>This is a another paragraph</p></td><td>This cell contains a table:<table border="1"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table></td></tr><tr><td>this cell contains a list<ul><li>apples</li><li>bananas</li><li>pinapple</li>
6
</ul></td><td><font size="4" color="grey">APA PUN BAB NYA , SAYA GANTENG !! HAHAHA </font></td></tr></table></body></html>
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML. Walaupun demikian, bahasanya sendiri dapat dipergunakan untuk semua jenis dokumen XML termasuk SVG dan XUL. Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C).
CSS digunakan oleh penulis maupun pembaca halaman web untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen. CSS digunakan terutama untuk memisahkan antara isi dokumen (yang ditulis dengan HTML atau bahasa markup lainnya) dengan presentasi dokumen (yang ditulis dengan CSS). Pemisahan ini dapat meningkatkan aksesibilitas isi, memberikan lebih banyak keleluasaan dan kontrol terhadap tampilan, dan mengurangi kompleksitas serta pengulangan pada stuktur isi.
CSS memungkinkan halaman yang sama untuk ditampilkan dengan cara yang berbeda untuk metode presentasi yang berbeda, seperti melalui layar, cetak, suara (sewaktu dibacakan oleh browser basis-suara atau pembaca layar), dan juga alat pembaca braille. Halaman HTML atau XML yang sama juga dapat ditampilkan secara berbeda, baik dari segi gaya tampilan atau skema warna dengan menggunakan CSS.
CSS ada dua jenis , yaitu eksternal dan internal . CSS internah adalah kode CSS yg ditulis dialam file HTML langsung . sedangkan CSS eksternal adalah kode CSS yg ditulis terpisah dengan file HTML , lalu pada file HTML disisipkan link dari file CSS eksternal tersebut .
7
Aturan penggunaan CSS
Secara umum disusun oleh tiga bagian yaitu, selector ( elemen yang akan di definisikan), property ( atribut yang akan diubah ) dan nilai sebagaimana berikut
Selector {property : value}
Antara property dan nilai dipisahkan dengan titik-dua (colon) seperti contoh dibawah inibody {color:black}
Jika nilai berupa beberapa kata, gunakan tanda petik gandaP {font-family: “sans serif” }
Jika lebih dari satu property pisahkan dengan titik-koma (semi colon)P {text-align: center; color: red}
Jika ingin lebih mudah dibaca sebagaimana berikutP{Text-align: center;Color: black ;Font-family: arial}
Jika selector dikelompokkanH1, H2, H3, H4, H5, H6{Color: green ;}
Jika menggunakan atribut class ( dalam definisi CSS )P.kanan {text-align : right}P.kiri {text-align : center}
Berikut ini sintaks yang ditulis dalam dokumen html menggunakan definisi diatas .<P class = “kanan” > this paragraph will be right aligned </p><P class = “kiri” > this paragraph will be center aligned </p>
Style Sheet External
Berikut ini contoh menggunakan style sheet yang didefinisikan secara external, dimana ex.css digunakan oleh coba_cssex1.html . ingat dalam pendefinisian external tidak diperlukan tag html. Dan extension filenya harus disimpan dalam “*.css” .
8
Tulis sintaks dibawah ini dan simpan file dengan nama “ex1.css”
Body {background-color: yellow}H1 {font-size: 36pt}H2 {color: blue}P {margin-left: 50px}
Tulis sintaks dibawah ini dan simpan dengan nama “coba_cssex1.html”
<!—coba_cssex1.html--><html><head><link rel=”stylesheet” type=”text/css” href=”ex1.css”></head><body><h1> this header is 36 pt </h1><h2> this header is blue </h2><p> this paragraph has a left margin of 50 pixels </p></body></html>
Font Attributes
Attribute Example PurposeSize = “number”Size = “+number”Size = “-number”Face = “face-name”Color = “color-value”Color = “color-name”
Size = “2”Size= “+1”Size= “-1”Face= “times”Color= “#eeff00”Color= “red”
Defines the font sizeIncrease the font sizeDecreases the font sizeDefines the font-nameDefines the font colorDefines the font color
Background Properties
Properties Values NN IE W3C
Background
Background-attachment
Background-color
BackGround-ColorBackground-attachmentBackground-imageBackground-positionBackground-repeat
ScrollFixed
Color-rgbColor-hex
4.0
6.0
4.0
4.0
4.0
4.0
Css1
Css1
9
Background-image
Background-position
Background-repeat
Color-nameTransparent
urlNone
Top leftTop centerTop rightCenter leftCenter centerCenter rightBottom leftBottom centerBottom rightx-% y-%x-pos y-pos
repeatrepeat-xrepeat-yno-repeat
4.0
6.0
6.0
4.0
4.0
4.0
Css1
Css1
Css1
Css1
Text Properties
Properties Values NN IE W3CColorLetter-spacing
Text-align
Text-decoration
Text-indent
Text-Transform
ColorNormalLength
LeftRightCenterJustify
NoneUnderlineOverlineLine-throughBlink
Length%
None
4.06.0
4.0
4.0
4.0
4.0
4.04.0
4.0
4.0
4.0
4.0
Css1Css1
Css1
Css1
Css1
Css1
10
White-Space
Word-spacing
CapitalizeUppercaseLowercase
NormalPreNowrap
NormalLength
4.0
6.0
5.5Css1
Css1
KESIMPULAN
Frame HTML , Table HTML , dan CSS memiliki kesamaan , yaitu untuk mengatur tata letak dan tampilan sebuah dokumen HTML .
FRAME hanya menampilkan beberapa dokumen HTML didalam frame yg telah dibuat , dan tidak ada perubahan jenis font ukurang font dan lain sebagainya.
TABLE , memiliki fungsi yang sama seperti FRAME yaitu mengatur tata letak tampilan suatu dokumen HTML , namun penggunaan TABEL lebih leluasa ketimbang FRAME . TABLE dapat merubah jenis font ukuran font sebuah dokumen yg akan ditampilkan dalam satu proses walaupun melalui cara yg rumit .
Berbeda dengan CSS yang memiliki keleluasaan dalam perubahan sebuah tampilan dokumen HTML , yang dimana mereka dapat mengatur
11
tata letak , ukuran font dan jenis font dalam satu file CSS yang nanti akan diselipkan dalam file HTML. namun CSS memiliki bahasa sendiri yang agak sedikit berbeda dengan penggunaan TABEL dan FRAME .
Daftar Pustaka
- Wikipedia Indonesia , http://id.wikipedia.org- Pemrograman web dengan HTML , penerbit : INFORMATIKA
12
