Pemrograman Berbasis Web Pertemuan 3
Download
Report
Transcript Pemrograman Berbasis Web Pertemuan 3
HTML
Tabel dan Layout
Tentang HTML
HTML : format standar untuk membuat dokumen web
Spesifikasi HTML standar (HTML 4.01 ) :
http://www.w3.org/TR/html4
HTML merupakan bahasa bertanda, menggunakan rangkaian teks
tertentu (tag) untuk menandai teks yang mempunyai interpretasi
khusus
File HTML berupa file teks (plain text file), bukan binary file,
sehingga dapat dibuat menggunakan editor teks biasa
Tag Tabel (Table) - data
<table> definisi tabel </table>
Menampilkan data dalam bentuk tabel
Tabel didefinisikan dengan cara menyatakan baris-baris dan kolom-kolom.
Tag untuk penanda baris adalah <tr> definisi baris </tr>
Tag untuk penanda kolom adalah <td>data</td>
<table border="1">
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
<tr>
<td>ddd</td><td>eee</td><td>fff</td>
</tr>
</table>
Tag Tabel (Table) - layout
Untuk menata letak (layout) isi dokumen
<table border="1" width="500">
<tr>
<td>Header kiri</td>
<td align="center" width="50%">Header tengah</td>
<td align="right">Header kanan</td>
</tr>
<tr>
<td valign="top" rowspan="2">Menu kiri</td>
<td align="center" colspan="2" height="200">Bagian
Isi</td>
</tr>
<tr>
<td align="center">Footer tengah</td>
<td align="right">Footer kanan</td>
</tr>
</table>
Desain/Layout Halaman
Logo
Navigasi
Navigasi
Logo
Navigasi
Navigasi
Navigasi
Tag Gambar (Image)
<img src="NamaFileGambar">
NamaFileGambar = file gambar yang mempunyai ekstensi .GIF, .JPG, atau .PNG.
Untuk menampilkan sebuah file gambar.
Bentuk penulisan lain yang dianjurkan (XML style) :
<img src="NamaFileGambar" />
<img src="cover.jpg" align="left"
/> Perkenalkan, nama saya ... Ini
adalah homepage pertama saya,
karena saya baru belajar tentang
cara membuat homepage.
Homepage ini masih dalam tahap
pengembangan, oleh karena itu
tampilannya masih terlalu <img
src="logo.gif" alt="Logo" />
sederhana. Saya akan berusaha
untuk terus memperbaiki homepage
saya ini, sehingga semakin lama
semakin menarik untuk dilihat.
Perkenalkan, nama saya ... Ini adalah
homepage pertama saya, karena saya
baru belajar tentang cara membuat
homepage. Homepage ini masih dalam tahap
pengembangan, oleh karena itu tampilannya
masih terlalu
sederhana. Saya akan
berusaha untuk terus memperbaiki homepage
saya ini, sehingga semakin lama semakin menarik
untuk dilihat.
Tag Link (Anchor)
<a href="Link">Kata yang di-click</a>
<a name="#Acuan">Kata yang dituju</a>
Link = Alamat URL atau nama file dan/atau acuan yang dituju
Acuan = Kata sembarang sebagai penanda (bookmark)
membentuk link ke URL/file/bagian dokumen lain.
Saya ingin melihat <a href="hal2.html">halaman selanjutnya</a>. Saya
ingin
langsung menuju ke <a href="#akhir">bagian akhir</a>. Saya ingin
menuju ke
<a href="hal2.html#bawah">bagian bawah pada halaman
selanjutnya</a>.<br />
<a href="http://www.detik.com"><img src="gambar.gif" /></a> Homepage
detik.com.<br />Ini bagian tengah.<br /><a name="#akhir">Ini bagian
akhir.</a>
hal1.html
Struktur Link
frame & frameset
Lebih dari satu dokumen dapat ditampilkan secara bersamaan dalam satu tampilan
Setiap dokumen ditampilkan dalam sebuah frame
Sebuah frameset menentukan tata letak, ukuran, dan banyaknya frame yang akan ditampilkan
Di dalam frameset boleh ada frameset lain (beranak)
Dibutuhkan satu dokumen tersendiri yang berisi definisi frameset. Dokumen tersebut tidak
mempunyai isi dokumen (tidak ada <body> </body>)
Skema dasar dokumen frameset :
<html>
<head>
<title>Judul dokumen</title>
</head>
<frameset>
<frame src="namafile1">
<frame src="namafile2">
...dst (atau frameset yang lain)
<noframes>
bagian ini ditampilkan jika browser tidak mendukung frame
</noframes>
</frameset>
</html>
Contoh Dokumen Frameset
<html>
<head>
<title>Document Frameset</title>
</head>
<frameset cols="33%,43%,23%" frameborder="1">
<frameset rows="*,200">
<frame src="page1.html" name="satu" scrolling="no"
frameborder="0">
<frame src="page2.html" name="dua" scrolling="yes" noresize>
</frameset>
<frame src="page3.html" name="tiga" frameborder="0">
<frame src="page4.html" name="empat" frameborder="1">
<noframes>
Ada 4 halaman :
<ol>
<li><a href="page1.html">Halaman 1</a></li>
<li><a href="page2.html">Halaman 2</a></li>
<li><a href="page3.html">Halaman 3</a></li>
<li><a href="page4.html">Halaman 4</a></li>
</ol>
</noframes>
</frameset>
</html>
iframe (inline frame)
Di dalam sebuah dokumen (induk) dapat ditampilkan satu atau beberapa dokumen lain (anak)
Setiap dokumen (anak) yang disisipkan diletakkan dalam sebuah iframe
Dokumen induk merupakan dokumen biasa yang mempunyai isi dokumen
Skema dasar dokumen dengan iframe :
<html>
<head>
<title>Judul dokumen</title>
</head>
<body>
…isi dokumen…
<iframe src="namafile">
bagian ini ditampilkan jika browser tidak mendukung frame
</iframe>
…isi dokumen…
</body>
</html>
Contoh inline frame
<html>
<head>
<title>Kisah Sekolah</title>
</head>
<body>
<h1>Kisah-kisah di sekolah</h1>
Masa sekolah adalah masa yang menyenangkan bagiku. Sebagian besar waktu hidupku
sampai
saat ini dihabiskan untuk sekolah, dan aku sangat menikmati saat-saat itu.
Inilah
sebagian kisah-kisahku di sekolah.<p>
<iframe width='200' height='179'
src='sd.html'>
<a href="sd.html">Kisah SD</a>
</iframe>
<iframe width='200' height='179'
src='smp.html' frameborder='0'>
<a href="smp.html">Kisah SMP</a>
</iframe>
<iframe width='200' height='179'
src='smu.html' scrolling='no'>
<a href="smu.html">Kisah SMU</a>
</iframe>
<p>Semua pengalaman dan teman-teman
yang kudapat sungguh sangat mewarnai
hidupku dan memberikan pengaruh besar
terhadap diriku.
</body>
</html>
Link pada bidang gambar
Link dapat didefinisikan pada satu atau beberapa area pada sebuah bidang gambar
Skema :
<img src="gambar" usemap="#peta">
<map name="peta">
<area shape="bentuk1" coords="koordinat1" href="url1" alt="teks1">
<area shape="bentuk2" coords="koordinat2" href="url2" alt="teks2">
...
</map>
src : nama file gambar
usemap : nama definisi peta yang digunakan
shape : default, rect, circle, poly
coords : koordinat, dengan format :
default : x1,y1,x2,y2
rect : x1,y1,x2,y2
circle : x,y,r
poly : x1,y1,x2,y2,x3,y3,…,xn,yn
href : URL yang dituju bila area di-klik
Contoh penggunaan map
Klik pada wajah untuk melihat biodata<br>
<img src="aadc.jpg" usemap="#aadc" border="0">
<map name="aadc">
<area shape="circle" coords="131,82,37" href="titi.html" alt="Titi Kamal">
<area shape="rect" coords="172,52,238,129" href="adinia.html" alt="Adinia">
<area shape="poly"
coords="300,85,311,103,308,137,306,172,295,198,219,259,224,239,210,224,213,161,248,127,273,86,273,86
"
href="dian.html" alt="Dian Sastro">
<area shape="rect" coords="314,105,355,170" href="ladya" alt="Ladya Cheryl">
<area shape="circle" coords="387,134,30" href="sissy.html" alt="Sissy Priscillia">
<area shape="default" nohref>
</map>
Klik pada wajah untuk melihat biodata
Pengelompokan elemen dokumen
Beberapa elemen dokumen (teks, paragraf, gambar, tabel, dll) dapat dikelompokkan untuk menambahkan
struktur lojik pada dokumen
Pengelompokkan ada dua jenis :
inline (alur, flow) : <span> </span>
block (blok) : <div> </div>
<span> dan <div> biasanya digunakan dengan parameter id dan class
Struktur lojik ini dapat digunakan untuk :
mempermudah menginterpretasi isi dokumen
memberikan tampilan sesuai struktur lojik dengan memanfaatkan CSS
Contoh :
<div id="mhs01" class="mhs">
<span class="nama">Adrian Marzuki</span><br>
<span class="alamat">Jl. Tubagus Ismail XI/5</span>
</div>
<div id="mhs02" class="mhs">
<span class="nama">Dewi Purnama</span><br>
<span class="alamat">Jl. Cisitu Lama 24</span>
</div>
<style type="text/css">
.mhs {border: black solid 1; margin-bottom: 10;
padding: 10}
.nama {font: bold 20 Arial}
.alamat {font-style: italic}
</style>
<div id="mhs01" class="mhs">
<span class="nama">Adrian Marzuki</span><br>
...
Thanks……..