Modul II
Daftar, Gambar, Tabel dan Link
Tujuan:
- Mahasiswa mampu membuat dokumen HTML dengan daftar, gambar dan
tabel
- Mahasiswa mampu membuat dokumen HTML dengan link
Landasan Teori
List
Dokumen HTML mengenal 5 macam daftar(list):
- Daftar dengan bullet/unordered list
- Daftar dengan penomoran/ordered list
- Daftar direktori
- Daftar definisi
- Daftar Menu
Daftar dengan bullet/unordered list
Bullet adalah sebuah karakter tertentu,
berupa sebuah tanda. Tanda tersebut bisa berebentuk apa saja, misalnya tanda
berbentuk lingkaran, bintang, peluru atau hanya bulatan kecil. Daftar dengan
tanda bullet dapat di-setup dengan tag <UL> (unordered list) untuk
menandai awalnya dan </UL> untuk menutupnya. Setiap item harus didahului
dengan tag <LI> (list item), dan tidak memerlukan tag penutup.
Latihan 1:
1.
Ketiklah halaman HTML di bawah
ini menggunakan notepad dan simpan sebagai list1.html
2.
Upload list1.html anda ke
website anda.
<BODY
BGCOLOR=lightblue>
<FONT
COLOR=red>
<H3>
Daftar Siswa </H3>
</FONT>
<UL>
<LI> Veri
<LI> Kia
<LI> Mawar
</UL>
</BODY>
|
Latihan 2:
1.
Ketiklah halaman HTML di bawah
ini menggunakan notepad dan simpan sebagai list2.html
2.
Upload list2.html anda ke
website anda.
<BODY
BGCOLOR=lightblue>
<FONT
COLOR=red>
<H3>
Daftar Siswa </H3>
</FONT>
<UL type
=”circle”>
<LI> Veri
<LI> Kia
<LI> Mawar
</UL>
</BODY>
|
Daftar dengan penomoran/ordered list
Daftar dengan model ordered list atau
juga disebut numbered list adalah sebuah daftar yang tiap itemnya disertai
dengan nomor urut dari item yang bersangkutan dalam daftar tersebut. Daftar ini
mengikuti aturan yang tepat sama seperti daftar unordered list, kecuali tag-nya
yang berupa <OL> …….. </OL>. Jika tida ditentukan tipenya, maka
dokumen akan mendapat angka default yaitu 1,2,3 dan seterusnya.
Latihan 3:
1.
Ketiklah halaman HTML di bawah
ini menggunakan notepad dan simpan sebagai list3.html
2.
Upload list3.html anda ke
website anda.
<BODY
BGCOLOR=lightblue>
<FONT
COLOR=red>
<H3>
Daftar Makanan </H3>
</FONT>
<OL >
<LI> Nasi Goreng
<LI> Mie Goreng
<LI> Kwee Tiau goreng
</OL>
<FONT
COLOR=red>
<H3>
Daftar Minuman </H3>
</FONT>
<OL type
=a start = 10>
<LI> Juice Alpokat
<LI> Es Jeruk
<LI> Es Teh
</OL>
</BODY>
|
Daftar Definisi (Berketerangan)
Yang dimaksud
dengan daftar berketerangan/definition list adalah sebuah daftar dengan
keterangan dari masing-masing item daftar yang bersangkutan. Sebagai contoh:
Darmawan
Darmawan adalah
seorang mahasiswa
Tag yang digunakan untuk ini adalah:
<DL> ……. </DL> (definition list), di antara kedua tag ini digunakan
tag <DT> (menunjukkan istilah) dan <DD> (menunjukkan
definisi/penjelasan).
Latihan 4:
1.
Ketiklah halaman HTML di bawah
ini menggunakan notepad dan simpan sebagai list4.html
2.
Upload list4.html anda ke
website anda.
<BODY
BGCOLOR=lightblue>
<FONT
COLOR=red>
<H3>
Daftar List HTML </H3>
</FONT>
<DL >
<DT> Bullet/Unordered List
<DD>
Bullet adalah sebuah karakter tertentu, berupa sebuah tanda. Tanda tersebut bisa berebentuk apa saja, misalnya
tanda berbentuk lingkaran, bintang, peluru atau hanya bulatan kecil.
<DT> Ordered List
<DD>
sebuah daftar yang tiap itemnya disertai dengan nomor urut dari item yang
bersangkutan dalam daftar tersebut
<DT> Definition List
<DD>
Daftar dengan keterangan
</DL>
</BODY>
|
Daftar Direktori dan Daftar Menu
Kedua daftar ini
sebenarnya tidak jauh berbeda, yaitu digunakan untuk membuat daftar item yang
pendek-pendek.
Latihan 5:
1.
Ketiklah halaman HTML di bawah
ini menggunakan notepad dan simpan sebagai list5.html
2.
Upload list5.html anda ke
website anda.
<BODY
BGCOLOR=lightblue>
<FONT
COLOR=red>
<H3>
Menu List </H3>
</FONT>
<MENU>
<LI>
<A HREF=”URL”> yahoo.com </A>
<LI>
<A HREF=”URL”> google.com </A>
<LI>
<A HREF=”URL”> lycos.com </A>
</MENU>
<FONT
COLOR=red>
<H3>
Editor HTML </H3>
</FONT>
<DIR>
<LI>
FrontPage
<LI>
Macromedia
</DIR>
</BODY>
|
Gambar/Image
Format gambar
dalam dunia komputer sangat banyak dan beragam seperti, BMP, PCX, EPS, TIFF,
GIF, XBM, JPEG dan berbagai macam format lainnya. Diantara sekian banyak format
gambar tersebut, format standard yang sering dipakai di web adalah format
gamgar GIF dan JPEG.
Penggunaan
gambar dalam web adalah suatu hal yang membuat web menjadi sangat terkenal.
Meskipun demikian ada beberapa hal yang perlu menjadi pertimbangan dalam
penggunaan gambar di web yaitu:
- Pertimbangkanlah ukuran gambar
yang tidak terlalu besar (tidak lebih dari 100KB). Semakin kecil ukuran
file gambar, maka semakin cepat pengiriman dan pemuatannya. Gambar yang
ukuran besar mungkin cepat dimuat oleh komputer mutakhir (prosesor cepat
dan memori besar) namun untuk komputer lama mungkin gambar menjadi
kendala.
- Pertimbangkan untuk menggunakan
suatu link dalam menampilkan gambar-gambar yang tidak harus ditampilkan pada halaman pertama
web.
- Pertimbangkan ukuran lebar gambar
tidak lebih dari 500 pixel, tinggi gambar tidak lebih dari 400 pixel.
Latihan 6:
1.
Ketiklah halaman HTML di bawah
ini menggunakan notepad dan simpan sebagai gambar1.html
2.
Kopi file gambar sunset.jpg
dari sumbernya dan upload ke direktori public_html pda website anda.
3.
Upload gambar1.html anda ke
website anda.
4.
Panggil http://www2.ti.usd/~namauser/gambar1.html
<BODY
BGCOLOR=lightblue>
<FONT
COLOR=red>
<H3>
Graphics </H3>
</FONT>
<IMG
src=”sunset.jpg”>
Teks ini akan
dimulai di sebelah kanan gambar, dan jika melampaui lebar jendela Browser,
akan disambung ke bawah gambar
</BODY>
|
Latihan 7:
1.
Ketiklah halaman HTML di bawah
ini menggunakan notepad dan simpan sebagai gambar2.html
2.
Kopi file gambar sunset.jpg
dari sumbernya dan upload ke direktori public_html pda website anda.
3.
Upload gambar2.html anda ke
website anda.
<BODY
BGCOLOR=lightblue>
<FONT
COLOR=red>
<H3>
Graphics </H3>
</FONT>
<IMG
src=”sunset.jpg” align=left>
Teks ini akan
dimulai di sebelah kanan gambar
</BODY>
|
Tabel
Untuk membuat
tabel dibutuhkan tiga buah tag berpasangan, yaitu:
- <TABLE> …… </TABLE>
untuk mendefinisikan sebuah tabel. Kemudian diantara tag tersebut
digunakan tag
- <TR> ………… </TR> (Table row) untuk membuat
sebuah baris dan di dalam tag <TR> digunakan tag
- <TD> …. <TD> (Table
Data) untuk mendefinisikan kolom dan data.
Ketiga buah tag
tersebut digunakan dengan pola:
<BODY>
<TABLE>
<TR>
<TD>
Tabel Sangat Sederhana </TD>
</TR>
</TABLE>
</BODY>
Latihan 7:
1.
Ketiklah halaman HTML di bawah
ini menggunakan notepad dan simpan sebagai tabel1.html
2.
Upload tabel1.html anda ke website
anda.
<BODY
BGCOLOR=lightblue>
<FONT
COLOR=red>
<H3>
Tabel sangat sederhana</H3>
</FONT>
<TABLE>
<TR>
<TD>
Baris Pertama Kolom Pertama </TD>
<TD>
Baris Pertama Kolom Kedua </TD>
</TR>
<TR>
<TD>
Baris Kedua Kolom Pertama </TD>
<TD>
Baris Kedua Kolom Kedua </TD>
</TR>
</TABLE>
<TABLE
BORDER>
<CAPTION>
<H2> Judul Tabel</H2></CAPTION>
<TR>
<TD>
Baris Pertama Kolom Pertama </TD>
<TD>
Baris Pertama Kolom Kedua </TD>
</TR>
<TR>
<TD>
Baris Kedua Kolom Pertama </TD>
<TD>
Baris Kedua Kolom Kedua </TD>
</TR>
</TABLE>
</BODY>
|
Latihan 8:
1.
Ketiklah halaman HTML di bawah
ini menggunakan notepad dan simpan sebagai tabel2.html
2.
Upload tabel2.html anda ke website
anda.
<BODY
BGCOLOR=lightblue>
<TABLE
BORDER>
<CAPTION>
<H2> Judul Tabel</H2></CAPTION>
<TR>
<TD>
Baris Pertama Kolom Pertama </TD>
<TD>
Baris Pertama Kolom Kedua </TD>
</TR>
<TR>
<TD>
Baris Kedua Kolom Pertama </TD>
<TD>
Baris Kedua Kolom Kedua </TD>
</TR>
</TABLE>
<BR>
<BR>
<TABLE
BORDER>
<CAPTION
align =bottom> <H2> Judul Tabel</H2></CAPTION>
<TR>
<TD><BR></TD>
<TH>
Judul Kolom Pertama </TH>
<TH>
Judul Kolom Kedua </TH>
</TR>
<TR>
<TH>
Judul Baris Pertama </TH>
<TD>
Baris Pertama Kolom Pertama </TD>
<TD>
Baris Pertama Kolom Kedua </TD>
</TR>
<TR>
<TH>
Judul Baris Kedua </TH>
<TD>
Baris Kedua Kolom Pertama </TD>
<TD>
Baris Kedua Kolom Kedua </TD>
</TR>
</TABLE>
</BODY>
|
Link
Sebuah link
diawali dengan tag <A HREF=…..>
dan diakhiri dengan </A>. Namun kata kunci untuk sebuah link ini
sebenarnya adalah HREF (Hypertext REFerence atau referensi hiperteks). Kata ini
akan menunjukkan halaman yang dituju, atau bagian tertentu dari halaman yang
sama. Sedangkan tag <A…….> </A> sendiri adalah tag pengganti untuk
menampilkan teks atau grafik, sehingga ada yang di-klik untuk menampilkan link
tersebut.
Latihan 9:
4.
Ketiklah halaman HTML di bawah
ini menggunakan notepad dan simpan sebagai link1.html
5.
Upload link1.html anda ke
website anda.
<BODY
BGCOLOR=lightblue>
<CENTER><H2>
Link dengan Teks</H2></CENTER>
<HR>
<P>
<A NAME=”Paragraph1”>
<B>PHP </B> </A> adalah bahasa server-side
scripting yang menyatu dengan HTML untuk membuat <BR>
halaman web yang dinamik. Maksud dari server-side
scripting adalah sintaks dan perintah-<BR>
perintah yang kita berikan akan sepenuhnya
dijalankan di server tetapi disertakan pada dokumen <BR>
HTML biasa. Pembuatan web ini merupakan
kombinasi antara PHP sendiri sebagai bahasa <BR> pemrograman dan HTML
sebagai pembangun halaman web. Ketika pengunjung membuka <BR>
halaman web, server akan memproses
perintah PHP dan lalu mengirimkan hasilnya ke browser <BR>
pengunjung tersebut, seperti juga pada ASP atau
ColdFusion. <BR>
Tetapi tidak seperti ASP atau ColdFusion, PHP adalah
merupakan software yang Open Source <BR>
dan mampu lintas platform. PHP mampu berjalan
di Windows NT dan beberapa versi UNIX, dan <BR>
PHP dapat dibangun sebagai modul pada web server Apache
dan sebagai binary yang dapat berjalan sebagai CGI. <BR>
PHP dapat mengirim HTTP header, dapat
mengeset cookies, mengatur authentication dan <BR> redirect users. PHP
menawarkan koneksitas yang baik dengan beberapa basis data antara lain
<BR>
Oracle, Sybase, mSQL, MySQL, Solid, PostgreSQL,
Adabas, FilePro, Velocis, dBase, Unix dbm <BR>
dan tak terkecuali semua database ber-interface ODBC.
Dan juga integrasi dengan beberapa <BR>
library eksternal yang dapat membuat anda melakukan
segalanya dari dokumen PDF hingga <BR>
mem-parse XML. PHP juga mendukung komunikasi
dengan layanan lain melalui protokol <BR>
IMAP, SNMP, NNTP, POP3 atau bahkan HTTP. Bila PHP
berada dalam halaman web anda, <BR>
maka tidak lagi dibutuhkan pengembangan lingkungan
khusus atau direktori khusus. Hampir <BR>
seluruh aplikasi berbasis web dapat dibuat
dengan PHP. Namun kekuatan utama adalah <BR>
konektivitas basis data dengan web. Dengan
kemampuan ini kita akan mempunyai suatu sistem <BR>
basis data yang dapat diakses dari web.
</P>
<UL>
<LI>
<A HREF=”#Paragraph1”> Contoh link bagian dokumen </A>
<LI>
<A HREF=”http://www2.ti.usd/~puspa”> Site yang lain </A>
</UL>
</BODY>
|
Tidak ada komentar:
Posting Komentar