Pengantar PhP
(Lanjutan)
1. LISTS
Daftar/list adalah
merupakan kumpulan teks yang disusun sedemikian rupa sehingga item-item yang
ada memiliki nomor urut atau bisa juga berupa tanda-tanda khusus/symbol.
Terdapat tiga tipe list
yang dapat digunakan, yaitu:
þ Unordered
Lists: <UL> Untuk membuat daftar item dengan tanda bullet (tidak bernomor).
List entries didefinisikan dengan tag <LI>. Pada jenis ini tidak
memerlukan pengurutan data.
Bentuk item tanda pada Unordered List dapat
diubah dengan menggunakan atribut TYPE kedalam tag <UL> dengan
nilai “circle” untuk bentuk lingkaran tengahnya putih, “square” untuk
bentuk kotak padat hitam dan “disc” bentuk lingkaran pada warna hitam.
contoh1_1.html
<html>
<head>
<title>::: Undordered List:::</title>
</head>
<body>
<b><font size=3 Face=tahoma color=blue>
Hobi saya adalah: </b>
<hr size=2 width=150 align=left>
<ul type=circle>
<li>Olahraga
</ul>
<ul type=square>
<li>Shurfing
</ul>
<ul type=disc>
<li>Makan Bakso
</ul>
</font>
</body>
</html>
Hasil dari kode di atas adalah .... ?
Ordered
Lists: <OL> Juga digunakan untuk membuat daftar item bernomor, dengan tiap
item dapat menggunakan angka arab atau romawi. List entries juga didefinisikan
dengan <LI> tag. Atribut yang ada pada Ordered List adalah TYPE dan
START.
contoh1_2.html
<html>
<head>
<title>::: Ordered List:::</title>
</head>
<body>
<b><font size=2 Face=tahoma color=black>
Pendidikan
saya adalah: </b>
<hr size=2 width=150 align=left>
<ol type=1>
<li>Sekolah Dasar : SD Cendrawasih
<li>Sekolah Lanjutan Pertama : SMP N 5 Cirebon
<li>Sekolah Lanjutan Atas : SMU 4 Cirebon
</ol>
<hr size=3 width=500>
<ol start=4>
<li>Universitas Widyatama Bandung
<li>Universitas Swadaya Gunung Jati (Unswagati) Cirebon
</ol>
</font>
</body>
</html>
Hasil dari kode di atas adalah .....?
Untuk attribut TYPE,
dapat juga menggunakan:
1
Default numbers, 1, 2, 3, etc.
2
A- Huruf besar. A, B, C, etc.
3
a- Huruf kecil. a, b, c, etc.
4 I- Romawi huruf besar.
5 I, II, III, etc.
6
i- Romawi huruf kecil , i, ii, iii, etc.
Definition
Lists: <DL>, digunakan untuk menjelaskan istilah-istilah. Definition List
dinyatakan dengan tag <DL> dan diantara tag tersebut ditambahkan tag
<DT> Definition Term yaitu bagian istilah yang dijabarkan dan tag <DD>
Definition Data yang merupakan penjabaran dari istilah.
contoh1_3.html<html>
<head>
<title>::: definition List:::</title>
</head>
<body>
<dl>
<dt> Bagian Pertama.
<dd> Sub Bagian Pertama.
<dt> Bagian Kedua.
<dd> Sub Bagian Kedua
</dl>
</body>
</html>
Hasil dari kode di atas adalah: ....?
Preformatted Text: <PRE>. Digunakan untuk mengatur format tampilan agar sesuai dengan
aslinya.
contoh1_4.html <html>
<head>
<title>the <pre> tag</title>
</head>
<body>
<h3>without the <pre> tag:</h3>
here's
some ditty
specially done
to lay it out all
formatted and pretty.
unfortunately, that is all
this junk really means
because i admit i
couldn't scrawl
poetry for
beans.
<p><h3>with the <pre> tag:</h3>
<pre>
here's
some ditty
specially done
to lay it out all
formatted and pretty.
unfortunately, that is all
this junk really means
because i admit i
couldn't scrawl
poetry for
beans.
</pre>
</body>
</html>
Hasil dari kode di atas adalah:.......?
Extended Quotations: <BLOCKQUOTE>, digunakan untuk membuat kutipan panjang, sehingga hasilnya menjorok ke dalam.
contoh1_5.html
<html>
<head>
<title>::: Blockquote:::</title> </head>
<body>
<h3>2. Pengaturan Teks</h3>
<blockqoute>
Untuk mendapatkan halaman web yang baik Anda harus melakukan pengaturan terhadap teks seperti memilih jenis dan ukuran huruf, perataan, dll.
</blockqoute>
</body>
</html>
Hasil dari kode di atas adalah : .....?
3. Hypertext LinkDigunakan untuk membuat link/penghubung antara suatu halaman dengan halaman lain, ke URL lain, juga digunakan dalam satu halaman untuk berpindah ke sub judul yang lain atau ke lokasi tertentu dalam satu halaman yang sama.
Sintak tag link adalah sebagai berikut:
<a href=url_tujuan>nama_link</a>
url_tujuan bernilai lokasi atau nama file yang akan dituju. Sedangkan nama_link adalah nilai yang akan ditampilkan di browser sebagai teks link atau tombol penghubung. Tulisan yang terletak antara <A> dan </A> akan terdapat garis bawah dan atribut warnanya dapat diatur dalam tag <body>. Adapun macam-macam link adalah sebagai berikut:
Link ke Dokumen Lain
Untuk
membuat link/penghubung dengan target ke dokumen/halaman yang berbeda, anda
harus membuat dokumen yang dituju/target dan disimpan dalam direktori tertentu,
baik pada direktori yang sama atau berbeda dengan dokumen yang aktif sekarang.
Untuk mencoba membuat link, silahkan buat script berikut dan beri nama dengan link_dokumen_lain.html.
<html>
<head>
<title>::: Latihan Membuat Link Ke Dokumen Lain:::</title>
</head>
<body bgcolor=#ffffcc>
<font face=arial size=6 color=maroon>
<b>.::: SMK Negeri 1 Cirebon:::. <br>
<font face=arial size=4 color=blue>
<i>Success By Discipline</i>
<font face=arial size=1 color=maroon>
<hr>
| <a href=link_dokumen_lain.html>H o m e</a>
| <a href=proli.html>Program Keahlian</a>
| <a href=ekstra.html>Ekstra Kurikuler</a> |
<hr><p><font face=verdana size=4 color=purple>
Selamat datang di web kami ...
</body>
</html>
Buat lagi file berikut dan beri nama dengan proli.html<html>
<head>
<title>::: Link Dokumen Lain:::</title>
</head>
<body bgcolor=#ffffcc>
<font face=arial size=6 color=maroon>
<b>.::: SMK Negeri 1 cirebon:::. <br>
<font face=arial size=4 color=blue>
<i>Success By Discipline</i>
<font face=arial size=1 color=maroon>
<hr>
| <a href=link_dokumen_lain.html>H o m e</a>
| <a href=proli.html>Program Keahlian</a>
| <a href=ekstra.html>Ekstra Kurikuler</a> |
<hr><p><font face=verdana size=4 color=blue>
Program Keahlian:<br>
<font size=1>
<ul type=circle><li>Rekayasa Perangkat Lunak
<li>Teknik Elektronika Industri
<li>Teknik Komputer dan Jaringan
<li>Teknik Kendaraan Ringan
<li>Teknik Pendingin dan tata udara
<li>Teknik Pemesinan
<li>Teknik Listrik</ul>
</body>
</html>
Untuk melengkapi latihan kali ini, buat juga file berikut dan beri nama ekstra.html
<html>
<head>
<title>::: Link Dokumen Lain:::</title>
</head>
<body bgcolor=#ffffcc>
<font face=arial size=6 color=maroon>
<b>.::: SMK Negeri 1 Cirebon:::. <br>
<font face=arial size=4 color=blue>
<i>Success By Discipline</i>
<font face=arial size=1 color=maroon>
<hr>
| <a href=link_dokumen_lain.html>H o m e</a>
| <a href=proli.html>Program Keahlian</a>
| <a href=ekstra.html>Ekstra Kurikuler</a> |
<hr><p>
<font face=verdana size=4 color=blue>
Ekstra Kurikuler:<br>
<font size=1>
<ul type=circle>
<li>Seni Bela Diri
<li>Keagamaan
<li>Sepak Bola
<li>Bola Basket
<li>Paskibra
</ul>
</body>
</html>
Hasil dari kode-kode diatas adalah sebagai berikut:….?
Jika link-link tersebut di-klik, maka hasilnya adalah sebagai berikut:.....?
Link ke bagian tertentu dalam dokumen yang sama
Untuk membuat link ke bagian tertentu dalam dokumen yang sama, harus diberikan nama anchor. Perbedaan dengan link yang berbeda dokumen adalah tujuan/target link, jika dalam dokumen yang sama yang dituju adalah nama anchor tetapi kalau dokumen yang beda yang dituju adalah nama file/dokumen yang bersangkutan.
Untuk memberi nama anchor, atribut yang dipakai adalah NAME pada tag anchor <A> dan untuk membuat link cukup memberikan tanda # setelah nama file dalam URL. Misal:
<a href=”#php”> Bab 1 </a>
atau dapat ditulis lengkap:
<a href=”belajar_php.html#php”> Bab 1 </a>
dan untuk nama anchornya:
<a name=”php”>Ada apa dengan PHP?</a>
Link ke alamat URL atau Website
Untuk membuat link ke alamat URL adalah dengan menambahkan:
http://nama_URL.
Contoh:
<a href=”http://www.dikti.org”>www.dikti.org</a>
<a href=”http://www.smkn1-cirebon.sch.id”>www.smkn1-cirebon.sch.id </a>
Link ke Alamat Email
Link email adalah membuat link pada teks, jika teks tersebut diklik maka akan menampilkan program pengiriman email yang terdapat pada komputer yang dipakai untuk mengakses data atau teks tersebut secara otomatis.
Untuk membuat link ke alamat email hanya menambahkan atribut mailto:alamat_email ke dalam tag <A HREF>
Misalnya:
<A HREF="mailto:webmaster@smkn1-cirebon.sch.id">Kirim email</a>
Link File yang akan didownload
Link file dalam hal ini adalah apabila dikik pada teks tersebut maka proses selanjutnya adalah mendownload file yang tercantum pada dokumen
tersebut. Format penulisannya adalah <a href=nama_file>
Misal:
<a href=”antivirus.zip”>Download anti virus</a>
<a href=”latih.doc”>Download latihan Html</a>
<a href=”mysql.exe”>Download MYSQL</a>
4. Menyisipkan Gambar/Images
Digunakan untuk menampilkan image atau animasi gif pada halaman web Anda. Tag yang digunakan adalah
<img src=”nama file gambar”>
Attribut yang dimiliki tag <img> adalah: alt, align=(center, left, right), hspace, vspace, border, width dan height. Jika attribut ukuran gambar tidak dituliskan, maka gambar ditampilkan sesuai dengan ukuran asllinya. Untuk mengatur ukuran gambar, menggunakan attribut width daan height. Attribut align digunakan untuk perataan posisi gambar. Attribut border, digunakan untuk memberi bingkai pada gambar. Sedangkan alt, digunakan untuk memberi keterangan pada gambar jika mouse berada diatasnya. Untuk mengatur letak gambar dapat menggunakan attribut hspace daan vspace.
contoh1_6.html
<html>
<head>
<title>::: menampilkan images:::</title>
</head>
<body>
<b><font size=2 Face=tahoma color=black>
<img src="gedung.jpg" alt="Halaman SMK Negeri 1 Cirebon">
<img src="ekstra.jpg" hspace=10 vspace=5 width=200 height =254
align="right" border=2>
</font>
</body>
</html>
Tampilan dari contoh diatas adalah sebagai berikut: .....?