IT - 1
Free of Charge – IT 1 / HTML
Overview Tujuan Akhir Materi Kuliah IT-1
Pada akhir Semester 1 (Mata kuliah IT-1) ini diharapkan mahasiswa dapat : 1.
Mendefinisikan pengertian file HTML (HyperText Mark up Language) 2. Memahami konsep hypertext 3. Menjelaskan struktur dasar suatu file HTML 4. Mengetahui beberapa tag HTML dasar yang sering digunakan 5. Membuat web page sederhana 6. Memahami penggunaan fasilitas link dan penyisipan citra pada file HTML.
Pengenalan HTML
HTML (HyperText Mark up Language) merupakan suatu metoda untuk
mengimplementasikan konsep hypertext dalam suatu naskah atau dokumen.
HTML sendiri bukan tergolong pada suatu bahasa pemrograman karena sifatnya
yang hanya memberikan tanda (marking up) pada suatu naskah teks dan bukan
sebagai program. Berdasarkan kata-kata penyusunnya HTML dapat diartikan lebih dalam lagi menjadi :Hypertext
Link hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu
naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau
frase untuk mengikuti link ini maka web browser akan memindahkan tampilan
pada bagian lain dari naskah atau dokumen yang kita tuju.Markup
Pada pengertiannya di sini markup menunjukkan bahwa pada file HTML berisi
suatu intruksi tertentu yang dapat memberikan suatu format pada dokumen
yang akan ditampilkan pada World Wide Web.Language
Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan
kumpulan dari beberapa instruksi yang dapat digunakan untuk mengubah-ubah
format suatu naskah atau dokumen.
Pada awalnya HTML dikembangkan sebagai subset SGML (Standard
Generalized Mark-up Language). Karena HTML didedikasikan untukditransmisikan melalui media Internet, maka HTML relatif lebih sederhana
daripada SGML yang lebih ditekankan pada format dokumen yang berorientasi
pada aplikasi.Free of Charge – IT 1 / HTML Notes :
- HTML dikembangkan dari konsep SGML
- HTML bukan merupakan bahasa pemrograman
- Konsep HyperText untuk memudahkan mencari informasi
Apa yang dapat dilakukan dengan HTML ? Memodifikasi format teks
- Menentukan Format Suatu Teks • Membuat List Tentang Sekelompok Hal
• Membuat Link ke Dokumen Lain atau Bagian lain dari
>Menyisipkan Citra Atau Gambar - Menampilkan Informasi Dalam Bentuk Tabel
Penggunaan HTML memungkinkan kita untuk memodifikasi tampilan atau format dokumen yang akan kita transmisikan melalui media Internet. Beberapa hal yang dapat dilakukan dalam menentukan format dokumen ini adalah :
Kita dapat menampilkan suatu kelompok kata dalam beberapa ukuran
yang dapat digunakan untuk judul, heading dan sebagainya. Kita dapat menampilkan teks dalam bentuk cetakan tebal Kita dapat menampilkan sekelompok kata dalam bentuk miring Kita dapat menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan mesin ketikKita dapat mengubah-ubah ukuran font untuk suatu karakter tertentu.
Menampilkan daftar sesuatu dalam bentuk point-point (item) Dengan HTML kita dapat menampilkan daftar atau deretan informasi dalam bentuk point-point sehingga lebih mudah dibaca dan dipahami
Membuat link Konsep hypertext pada HTML memungkinkan kita untuk membuat link pada suatu kelompok kata atau frase untuk menuju ke bagian manapun dalam World Wide Web. Ada tiga macam link yang dapat kita gunakan :
Link menuju bagian lain dari page Link menuju page lain dalam satu web site
Dokumen Yang Sama
Free of Charge – IT 1 / HTML Menyisipkan citra
Dengan menyisipkan citra maka tampilan page kita akan lebih menarik,
interaktif dan informatif untuk mendukung data-data lainnya dalam bentuk
teks.Menampilkan informasi dalam bentuk tabel
Penampilan informasi dalam bentuk tabel ini akan mempermudah pembaca
untuk memahami informasi yang kita tawarkan. Penggunaan tabel ini juga
dapat dilakukan untuk menambah nilai estetika dari page yang akan kita
rancang.Free of Charge – IT 1 / HTML
Struktur Dasar Web Page
- Tag HTML
- Tag <HTML> dan </HTML>
- Tag <HEAD> dan </HEAD>
- Tag <BODY> dan </BODY>
- Judul Page (tag <TITLE>)
- Pembuatan Paragrap (Tag <P>)
File-file HTML dapat ditampilkan sesuai dengan keinginan kita seperti pada
contoh-contoh sebelumnya adalah karena terdapat marker yang
diimplementasikan dalam bentuk tag-tag HTML. Secara umum format tag
HTML tersebut dapat dituliskan sebagai berikut:<TAG>Teks yang akan dipengaruhi oleh tag</TAG>
Sebagai contoh kalau kita akan membuat tulisan dalam format tebal maka yang harus kita tuliskan dalam file HTML adalah:
B>Tulisan yang tercetak tebal</B>
Tanda slash (/) menunjukkan akhir dari suatu tag, akan tetapi ada juga
beberapa tag HTML yang tidak memerlukan pasangan akhirannya ini. Tag yang paling dasar yang digunakan dalam file HTML adalah <HTML> dan</HTML>. Kedua tag ini berfungsi untuk mendefinisikan bahwa teks yang
terdapat di antara kedua tag tersebut adalah dalam format HTML.<HTML> Teks </HTML>
Untuk mendefinisikan head, kita dapat menambahkan tag <HEAD> dan
</HEAD> setelah penggunaan tag <HTML> sedemikian hingga struktur page menjadi :Free of Charge – IT 1 / HTML
<HTML> <HEAD> </HEAD> </HTML>
Sedangkan bagian body adalah tempat dimana kita dapat menempatkan teks
dan berbagai aksesori pendukung lainnya yang akan ditampilkan pada web
page. Bagian ini dapat didefinisikan dengan meletakkan tag <BODY> dan
</BODY> di antara teks yang akan kita tampilkan. Kedua tag ini diletakkan
sesudah tag </HEAD>, sehingga struktur dasar sebuah page dapat dituliskan
sebagai :<HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>
Untuk mendefinisikan judul page (title) maka kita dapat melakukannya
dengan meletakkan naskah judul di antara tag <TITLE> dan </TITLE>. Judul
ini akan ditampilkan pada title bar web brower Misalkan kita akan membuat
sebuah page dengan judul "Latihan HTML" maka kita harus menambahkan:<TITLE>Latihan HTML</TITLE>
Perhatikan bahwa tag <TITLE> dan </TITLE> ini harus diletakkan pada
bagian head, sehingga dokumen HTML dasar kita menjadi:<HTML> <HEAD> <TITLE>Latihan HTML</TITLE>
Free of Charge – IT 1 / HTML Teks yang akan ditampilkan pada bagian body
</BODY> </HTML>
Pada file HTML, karakter carriage returns (Enter) diabaikan, sehingga untuk
membuat atau mendefinisikan naskah dalam bentuk paragraf harus
ditambahkan tag khusus yakni <P>. Sebagai contoh kita dapat menampilkan
beberapa paragraf sekaligus dalam satu dokumen HTML.<HTML> <HEAD> <TITLE>Latihan HTML</HTML> </HEAD> <BODY>
Teks yang akan ditampilkan pada bagian body <P>Paragraf satu </P> <P>Paragraf dua </P> </BODY>
</HTML>
Format Teks Dasar 2 Paragraf
• Paragraf digunakan untuk mengatur susunan tekas dalam suatu paragraf
halaman web.- tag <P> ….. </P>
Tag ALIGN digunakan untuk mengatur struktur sebuah paragraf pada
halaman web Contoh Penggunaan ;
<HTML> <HEAD> <TITLE> Latihan Paragraf</TITLE> </HEAD> <BODY> <P ALIGN = “right”> Contoh Paragraf rata kanan ………………… <P ALIGN = “left”> Contoh Paragraf rata kiri ………………… <P ALIGN = “ Tengah”> Contoh Paragraf rata kiri ………………… </P> </BODY> </HTML>
BlockQuote
- Indentasi Teks dengan BlockQuote
- Perintah Taq ini digunakan untuk menulis kutipan teks.
• Dengan perintah ini browser akan menampilkan teks menjorok ke dalam
(indentasi).
Contoh Penggunaan ;
<HTML> <HEAD>
<BODY> <H1> Latihan Membuat BlockQuote</H1> <p> Seorang pakar IT menyatakan bahwa : …… </P> <BLCKQUOTE> Sudah waktunya kita berbenah…………………………………………………… </BLCKQUOTE> </BODY> </HTML>
Break <BR>
- Break (BR)
Break adalah tag yang digunakan untuk mengatur tampilan halaman
web ke dalam satu baris yang baru.- Tag <BR> membuat baris barupa tanpa memberi baris kosong.
<HTML> <HEAD> <TITLE> Latihan Line Break</TITLE> </HEAD> <BODY> <H1> Latihan Membuat Line Break</H1> <P> Banyak metoda yang digunakan dalam membangun sebuah halaman web, namun secara garis besar di kategorikan ke dalam dua jenis, yaitu :
<BR>1. Client Side Scripting<BR> <BR>2. Server Side Secripting</BR> </P> </BODY> </HTML>
Font
Tag Font digunakan untuk mengatur tampilan huruf dalam dokumen HTML.
- Secara garis besar terdapat beberapa atribut yang
• digunakan untuk mengatur ukuran, jenis dan warna huruf yang akan digunakan,
yaitu : Font Size, Font Face, Font Color Font Size
• Font Size, merupakan atribut yang digunakan dalam Tag Font, untuk mengatur
ukuran huruf.- Ukuran font dimulai dari ukuran 1 sebagai ukuran terkecil dan 7 sebagai ukuran terbesar.
<HTML> <HEAD> <TITLE> Latihan Ukuran Font</TITLE> </HEAD> <BODY> <H1> Latihan Membuat Ukuran Huruf</H1> <FONT SIZE = 1>Ukuran Font 1</FONT> <FONT SIZE = 2>Ukuran Font 2</FONT> <FONT Size = 3>Ukuran Font 3</FONT> <FONT Size = 4>Ukuran Font 4</FONT> <FONT Size = 5>Ukuran Font 5</FONT> <FONT Size = 6>Ukuran Font 6</FONT>
<FONT Size = 7>Ukuran Font 7</FONT> </BODY> </HTML>
Font Face
- Font Face, atribut ini digunakan untuk mengtur jenis huruf yang akan digunakan.
Atribut Face ini diisi dengan string jenis huruf yang akan digunakan, seperti
jenis huruf Arial, Times News Roman, Verdana dan sebagainya.
<HTML> <HEAD> <TITLE> Latihan Jenis Font</TITLE> </HEAD> <BODY>
<FONT FACE = “Verdana”> Jenis Huruf Verdana<P> <FONT FACE = “Tahoma”> Jenis Huruf Tahoma<P>
</BODY> </HTML>
Font Color • Font Color, digunakan untuk mengatur warna huruf yanga akan digunakan.
- Terdapat dua cara pemberian atribut warna :
Menuliskan nama warna secara langsung, seperti Red, Blue, Green dan
sebagainya • Menggunakan nilai RGB (Red Green Blue) dari suatu warna.
<HTML> <HEAD> <TITLE> Latihan Warna Font</TITLE> </HEAD> <BODY> <FONT SIZE = 5> <FONT COLOR = “Red”> Warna Huruf Merah<P> <FONT COLOR = “#FF0000”> Coba tebak warna apa ini<P>
<FONT COLOR = “#00FF00”> Yang wananya apa ya?<P> </BODY> </HTML>
TAG LIST OL = Ordered List UL = UnOrdered List LI = List DL = Definition List
Tag list digunakan untuk menampilkan beberapa daftar. Ada beberapa jenis list yang
dikenal oleh HTML yaitu :1. List bernomor (ordered list), tag yang dipakai adalah <ol> dan diakhiri dengan </ol>
2. List tidak bernomor (unordered list) , tag yang dipakai adalah <ul> dan </ul>
3. List definisi (definition list), tag yang dipakai adalah <dl> dan </dl>
4. Untuk item listnya, tag yang digunakan dalam list bernomor dan tidak bernomor adalah dengan perintah <li> dan ditutup dengan </li>. Sedangkan untuk list definisi, <dt> dan </dt> sebagai definisi term dan <dd> dan </dd> sebagai definisi description (keterangan dari definisi term).
OL (Ordered List) Bentuk umum untuk membuat list bernomor adalah :
<ol type=”tipe nomor”> <li>item 1</li> <li>item 2</li> <li>item 3</li>
</ol>
Untuk tipe nomor, nilai yang bisa diisi adalah 1 (Arabic Number), A (huruf besar), a
(huruf kecil), I (romawi kapital), i (romawi kecil).<ul type=”tipebullet”> <li>item 1</li> <li>item 2</li> <li>item 3</li>
</ul>
Untuk tipe Simbol nilai yang bisa diisikan adalah disc (bulatan), circle (lingkaran),
square (segiempat).DL (Definition List) Untuk list definisi, bentuk umumnya adalah :
<dl> <dt>Term 1</dt><dd>Keterangan lengkap mengenai Term 1</dd> <dt>Term 2</dt><dd>Keterangan lengkap mengenai Term 2</dd> <dt>Term 3</dt><dd>Keterangan lengkap mengenai Term 3</dd>
</dl>
Contoh script adalah :
<html> <head> <title>FORM HTML</title> </head> <body> <p> Yang Termasuk Negara ASEAN (memakai angka)</p>
<ol type="1"> <li>Indonesia</li> <li>Thailand</li> <li>Brunei</li>
</ol> <p> Yang Termasuk Negara ASEAN (memakai huruf kapital)</p>
<ol type="A">
<li>Brunei</li> </ol>
<p>Kota Yang Termasuk Negara ASEAN (memakai bulatan)</p> <ul type="disk">
<li>Indonesia</li> <li>Thailand</li> <li>Brunei</li>
</ul> <p> Kota Yang Termasuk Negara ASEAN (memakai segiempat)</p>
<ul type="square"> <li>Indonesia</li> <li>Thailand</li> <li>Brunei</li>
</ul> <p>Kota-Kota Besar Di Pulau Jawa (dalam bentuk seperti daftar pustaka)</p>
<dl> <dt><b>Bandung</b></dt>
<dd>Bandung adalah ibukota Jawa Barat</dd> <dt><b>Jakarta</b></dt>
<dd>Jakarta adalah ibukota DKI Jakarta</dd> <dt><b>Surabaya</b></dt>
<dd>Surabaya adalah ibukota Jawa Timur</dd> </dl>
</html>
“Complicated List”
Daftar Menu 1. Makanan a
Timbel Komplit b. Timbel Tidak Komplit c. Sayur Asem d.
Minuman
i. Es Campur Rujak ii. Es Teller
Kurang Asem 2.
Makanan Ringan
</OL> <LI> <B>Minuman</B>
<LI> Timbel Komplit <LI> Timbel Tidak Komplit <LI> Sayur Asem <LI> Kurang Asem
<TITLE> List </TITLE> <HEAD>
<BODY> <H3> Daftar Menu </H3> <OL Type = 1> “ Closed Ordered List Type = 1 ”
41. Kurupuk Udang dibalik Batu
40. Kurupuk Jengkol Jajahean
<LI> <B>Makanan</B> <OL Type =a>
“ Closed Ordered List Type = a ”
</OL> </OL> </BODY> </HTML>
<OL Type=i>
<LI> Kurupuk Jengkol Jajahean <LI> Kurupuk Udang dibalik Batu
“ Closed Ordered List Start = n “
<HTML> <HEAD>
</OL> <LI> <B>Makanan Ringan </B>
<LI> Es Campur Rujak <LI> Es Teller <LI> Sirup Jagung
“ Closed Ordered List Type = I “
<OL Start = 40>
Free of Charge – IT 1 / HTML
Penyisipan Citra atau Gambar
Penyisipan citra pada page dimaksudkan agar tampilan dari page tersebut dapat
lebih menarik dan informatif. Ada beberapa hal yang perlu diperhatikan dalam
penyisipan citra atau gambar ke page, yakni: Ukuran file citraUkuran file yang terlalu besar akan membuat pengunjung web harus menunggu lebih lama dalam mengakses web karena musti terlebih dahulu mendownload file citra atau gambar yang ukurannya besar Tipe file citra Tipe file yang mendukung untuk transmisi melalui aplikasi web adalah JPEG, GIF atau PNG
File citra dapat disisipkan ke dalam suatu file HTML dengan menggunakan tag
<IMG>, yakni dalam format penuh:<IMG SRC="URL" ALT="deskripsi teks" ALIGN="Posisi terhadap Teks"
WIDTH
=”n px” HEIGHT=”n px” BORDER=”n px >
- Atribut ALT berfungsi sebagai alternatif jika browser yang digunakan oleh pengguna tidak dapat menampilkan citra.
- Atribut ALIGN dapat diisi dengan nilai-nilai TOP, MIDDLE, BOTTOM, LEFT, dan RIGHT.
- Atribut WIDTH dapat digunakan untuk mengatur ukuran lebar citra/gambar dengan menentukan nilai dalam satuan pixel atau persen
- Atribut WIDTH dapat digunakan untuk mengatur ukuran lebar citra/gambar dengan menentukan nilai dalam satuan pixel atau persen
- Atribut BORDER digunakan jika gambar/citra akan ditampilkan dengan menggunakan bingkai. Ketebalan border dapat ditentukan dengan memasukan nilai dengan satuan pixel
Free of Charge – IT 1 / HTML Contoh penggunaan tag <IMG>:
<HTML> <HEAD>
<TITLE>Aligning Text and Images</TITLE> </HEAD>
<BODY> <IMG SRC="photoawie.jpg" ALIGN=TOP WIDTH=100 BORDER=2>Teks ini akan diposisikan pada bagian atas gambar.This text appears at the top of the image. <P>
<IMG SRC=" photoawie.jpg " ALIGN=MIDDLE WIDTH=100 BORDER=2> Teks ini akan diposisikan pada bagian tengah gambar. This text appears in the middle of the image.
<P> <IMG SRC=" photoawie.jpg " ALIGN=BOTTOM WIDTH=100
BORDER=2> Teks ini akan diposisikan pada bagian Bawah gambar.This text appears at the bottom of the image. </BODY>
</HTML>
Free of Charge – IT 1 / HTML
Link Konsep HOW, WHO, WHERE, WHAT http://www.unikom.ac.id/berita/november.html
http:// = HOW www.unikom.ac.id = WHO berita = WHERE november.html = WHAT
Pada konsep URL (Uniform Resourse Locator), pada dasarnya semua resource
yang ada di Internet memiliki alamat sendiri. Selanjutnya kita juga telah
memahami konsep hypertext dari sebuah file HTML yang memungkinkan dibuat
suatu link yang menghubungkan pada bagian lain dari dokumen HTML atau
langsung mengarah pada suatu resource Internet tertentu.URL yang digunakan untuk mengimplementasikan penambahan link pada suatu
page dapat kita sederhanakan dalam model berikut :Bagaimana://Siapa/Dimana/Apa Bagaimana
Pada bagian pertama dari URL ini adalah menunjukkan bagaimana cara data
dikirimkan atau ditransmisikan melalui media jaringan. Secara teknis lebih sering
kita sebut dengan istilah protokol. Misalnya untuk aplikasi World Wide Web ini
kita menggunakan protokol yang disebut dengan protokol HTTP. Oleh karena itu
pada bagian awal URL ini kita deklarasikan:http://
Siapa
Pada bagian selanjutnya menjelaskan "siapa" yang memiliki URL. Bagian ini berisi
nama komputer tempat resource Internet tersebut berada. Istilah yang lebih
Free of Charge – IT 1 / HTML
http://www.yahoo.com
Dimana
Bagian selanjutnya menunjukkan lokasi yang lebih spesifik tempat menyimpan
resource Internet tersebut. Secara fisik bagian ini berisi nama direktori tempat
penyimpanan resource yang bersangkutan.http://www.yahoo.com/Home http://www.Google.com/Home http://www.Detik.com/Home
Apa
Bagian terakhir ini menunjukkan nama file yang akan kita gunakan. Untuk
aplikasi web file ini berisi kode-kode HTML dan teks. Secara keseluruhan URL
dapat dituliskan sebagai berikut:http://www.yahoo.com/Home/homepage.html http://www.Google.com/Advertize/today.html http://www.Detik.com/politik/pemilu.html
Pembuatan link dalam suatu file HTML dapat dilakukan dengan menggunakan tag
<A> yang diikuti dengan parameter referensinya HREF dan TARGET. Target
digunakan untuk menentukan lokasi link tersebut ditampilkan. Gunakan _blank
jika ingin menampilkan link yang dituju di browser baru/lain.<A HREF="URL" Target="_blank">
Contoh penggunaanya:
<A HREF=http://www.yahoo.com/Home/homepage.html> Klikdisini </A>
Free of Charge – IT 1 / HTML Contoh script :
<html> <head> <title>IMAGE HTML</title> </head> <body> <p>Home page ini menyediakan beberapa link ke search engine :</p>
<a href="http://www.yahoo.com" target="_blank">www.yahoo.com</a> <br> <a href="http://www.altavista.com" target="_blank">altavista</a> <br> <a href="http://www.google.com" target="_blank">google</a> <br> <a href="http://www.php.net"><img border=3 src="admin/images/php.gif" width="120" height="64" align="middle"></a> link dengan gambar <br> <a href="http://www.mysql.com"><img border=0 src="admin/images/mysql.gif" width="167" height="87" align="middle"></a> link dengan gambar tanpa border <br>
</html>
Tabel <TABLE> <TR> <TD> <TH> <CAPTION>
- Tabel banyak digunakan di halama web untuk mendukung pengelolaan
halaman web, sehingga informasi tampil dalam bentuk yang ringkas dan mudah dibaca.
- Secara garis besar tabel digunakan dalam dua hal : o Mengatur struktur konten/ isi data yang ada di dalam halaman o
web, yang membutuhkan sistem tabel Mengatur tata letak halaman web, sehingga menjadi lebih terstruktur, seperti halaman web dengan 2 kolom, 3 kolom dan sebagainya
• Untuk membuat tabel digunakan Tag <TABLE> sebagai pembuka tabel
dan </TABLE> sebagai penutupnya.- Tag <TABLE> mempunyai beberpa bagian yang penting, antara lain : o <Caption>….</Caption>, digunakan untuk membentuk judul tabel. Judul tabel ini akan terletak di luar tabel, di atas atau di o
bawah tabel <TH>…</TH>, berfungsi untuk meletakkan judul tabel di bagian paling atas atau paling kiri dari suatu tabel. Tabel Header akan o dicetak dalam bentuk huruf tebal (Bold) <TR>…</TR>, digunakan untuk membentuk baris pada suatu o tabel <TD>…</TD>, digunakan sebagai tempat menulis data atau informasi pada tabel. Contoh Tabel Sederhana 1 :
baris 1, kolom 1 baris 1, kolom 2 baris 1, kolom 3
baris 2, kolom 1 baris 2, kolom 2 baris 2 ,kolom 3
<HTML><HEAD><TITLE>TABLE </TITLE></HEAD> <BODY> <TABLE BORDER> <TR>
<TD> baris 1, kolom 1</TD> <TD> baris 1, kolom 2</TD> <TD> baris 1, kolom 3</TD>
</TR> <TR>
<TD> baris 2, kolom 1</TD> <TD> baris 2, kolom 2</TD> <TD> baris 2 ,kolom 3</TD>
</TR> </TABLE> </BODY> </HTML>
Contoh Tabel Sederhana 2 : Nama Jabatan SBY Presiden JK Wapres
<HTML> <HEAD> <TITLE>TABLE</TITLE> </HEAD>
<BODY> <TABLE BORDER> <TR> <TH bgcolor=grey> Nama</TH>
<TH bgcolor=grey > Jabatan</TH> </TR> <TR>
<TD> SBY</TD>
<TD>Presiden</TD> </TR> <TR>
<TD> JK</TD>
<TD> Wapres</TD> </TR> </TABLE> </BODY>
</HTML> Catatan :
- Jumlah baris tabel ditentukan dengan banyaknya <tr>...</tr> yang dituliskan dalam elemen tabel, dari <table>...</table>.
- Jumlah kolom dalam tabel ditentukan dengan banyaknya <td>...</td> di dalam setiap definisi baris, dari <tr>...</tr>.
Perataan teks sebagai salah satu teknik pemformatan sel mempergunakan
attribut ALIGN. Tag <TH> dan <TD> mendukung attribut ALIGN ini. Caranya
dengan menambahkan attribut ini dalam kode tag misalnya untuk penggunaan
rata kiri dapat dilakukan dengan <TH ALIGN="LEFT">; dan rata kanan dengan
<TH ALIGN="RIGHT"> dan untuk perataan teks rata tengah ditambahkan
ALIGN="CENTER".
Selain perataan teks arah horisontal terdapat pula peraataan teks arah vertikal
yaitu dengan menggunakan attribut VALIGN, attribut VALIGN ini mempunyai
nilai TOP untuk rata atas, MIDDLE untuk rata tengah dan BOTTOM untuk rata
bawah. Penggunaannya sama dengan ALIGN misalnya untuk rata atas
dituliskan <TD ALIGN=TOP>Pemberian Warna Pada Tabel atau Sel
Tabel ataupun sebuah sel dapat diberi warna menggunakan atribut BGCOLOR.
Misalnya sebuah sel ingin diberi warna merah muda maka bisa ditambahkan tag
: <TD BGCOLOR=#F3DDE0>. Atribut ini juga dapat dipasang pada tag <TR>
maupun <TABLE>.Menentukan Lebar Tabel
Lebar tabel dapat ditentukan menggunakan atribut WIDTH yang diletakkan di
dalam tag TABLE. Nilai dari atribut WIDTH ini dapat bertipe Percent (%)
terhadap lebar layar ataupun dapat berupa satuan pixel (picture element). Contoh penggunaan lebar tabel berdasarkan satuan persentase layar : <TABLE WIDTH=”100%”> Contoh penggunaan lebar tabel dengan menggunakan satuan pixel : <TABLE WIDTH=”100”>Tabel (Lanjutan) <TABLE> <TR> <TD> <COLSPAN> <ROWSPAN> <WIDTH> <HEIGHT> <ALIGN> <VALIGN>
Didalam pembuatan sebuah layout web, sering kita temui beberapa bentuk layout
yang bervariasi, mulai dari yang sederhana hingga yang cukup rumit. Untuk kebutuhan sebuah layout yang sesuai dengan kebutuhan, sering kita dihadapkan pada bentuk-bentuk table yang ‘complicated’. Untuk kebutuhan itu,diharapkan kita bisa memanfaatkan 2 (dua) attribute yang bisa menangani layout
yang ‘rumit’ tersebut.COLSPAN = Atribut yang digunakan untuk menggabungkan kolom ROWSPAN = Atribut yang digunakan untuk menggabungkan baris Contoh 1 ;
Satu
Dua Tiga<html> <head> <title> colspan </title> </head> <body>
<table border> <tr> <td colspan=2 align=center>satu</td> </tr> <tr>
<td align=center >dua</td> <td align=center >tiga</td>
</tr> </table>
</body> </html>
Contoh 2 ; Dua Satu Tiga
<html> <head> <title> colspan </title> </head> <body>
<Table border> <TR> <TD rowspan=2>Satu</TD> <TD>Dua</TD> </TR> <TR> <TD>Tiga</TD> </TR> </Table>
</body> </html>
Contoh 3 ;
Tiga Kolom
Dua KolomDua Baris Utuh Utuh
<html> <head> <title> colspan </title> </head> <body>
<table border> <TR>
<TR> <TD rowspan=3>dua baris </TD>
<TD colspan=2>dua kolom </TD> </TR> <TR>
<TD> utuh </TD> <TD>utuh</TD> </TR> </table>
</body> </html>
Contoh WEB Layout : HEADER Left Right Content Sidebar Sidebar
Footer
<html> <head> <title> colspan </title> </head> <body> <table Width=500 border> <TR>
<TD colspan=3 align=center Height=100 bgcolor=#CADFEC> HEADER </TD> </TR> <TR>
<TD Width=100 height=400 align=center>Left Sidebar </TD> <TD width=300 align=center>Content </TD> <TD width=100 align=center>Right Sidebar </TD>
</TR> <TR>
</table> </body> </html>
Free of Charge – IT 1 / HTML
FORM HTML
Web page memungkinkan kita interaktif dengan pengunjung web , salah satunya
dalah dengan penggunaan FORM . Metoda pengiriman data pada form terdapat dua
yaitu GET dan POST. Pada HTML metoda ini dinyatakan dengan atribut METHOD di
dalam elemen FORM. Metoda GET merupakan default pengiriman suatu data form
.metode GET mengirimkan data pada server dengan cara meletakkannya pada
bagian akhir URL yang menunjuk pada script pemroses Jadi jika URL anda menunjuk
ke CGI Script pada URL “cgi-bin/scriptform” dan data formnya adalah “Awie” dan
“08562160813”, maka URL akhir yang dikirim ke server adalah : /cgi-bin/scriptform?kota=Awie&telepon=08562160813Metode POST tidak seperti metode GET yang mengirimkan datanya secara terpisah
pada suatu standar input.Script mengambil data form dari stabdar input ini , dengan
adanya penyimpanan data secara tersendiri membuat metoda POST bisa menyimpan
data input dalam jumlah banyak.Latihan FORM
<html> <head> <title>latihan 9</title> </head> <body> <form method=”post” action=”kirim.php3”> <pre>
Free of Charge – IT 1 / HTML
Alamat :<input type=text name=”alamat” size=40 maxlength=60> E-mail :<input type=text name=”email” size=20> Telepon :<input type=text name=”telepon” size=7> <input type=submit value=”ok”> <input type=reset value=”batal”> </pre> </form> </body> </html>
Free of Charge – IT 1 / HTML
Form Lanjutan dan Preformat (PRE)
Perhatikan pada script HTML pada pertemuan/modul sebelumnya, pada deretan code ada
satu tag dengan nama <PRE> dan </PRE>. Pada kondisi biasa web browser akan
mengabaikan pemakaian karakter-karakter multi spasi, tab, dan carriage return, namun
kita dapat mencegahnya dengan menggunakan tag <PRE>. Penggunaan tag <PRE> ini
membuat web browser akan menampilkan dokumen dalam bentuk apa adanya (karakter
multi spasi, tab dan carriage return tidak diabaikan).Tag <PRE> merupakan kependekan dari "preformatted", yang artinya naskah ditampilkan
dalam bentuk layout yang asli. Pada contoh berikut ditampilkan perbedaan antara naskah
dokumen yang menggunakan tag <PRE> dan naskah yang lain tidak menggunakannya.
Layout asli kedua naskah tersebut dibuat serupa sehingga kita dapat melihat perbedaan
dari hasil tampilannya.<HTML> <HEAD> <TITLE>The &lt;PRE&gt; Tag</TITLE> </HEAD> <BODY> <H3>Without the &lt;PRE&gt; Tag:</H3>
Topi Saya Bundar
Bundar Topi Saya Kalau Tidak Bundar
Bukan topi Saya
<P> <H3>With the &lt;PRE&gt; Tag:</H3> <PRE>
Topi Saya Bundar
Bundar Topi Saya Kalau Tidak Bundar
Bukan topi Saya
</PRE> </BODY> </HTML>
Free of Charge – IT 1 / HTML Catatan :
Perhatikan tampilan hasil pada browser untuk yang menggunakan tag <PRE>.
- Pada penggunaan tag <PRE>, teks akan ditampilkan dengan menggunakan font dengan format monospace.
Contoh Form Lengkap <HTML> <HEAD> <TITLE>Form</TITLE> </HEAD> <CENTER> <BODY > <H2>FORMULIR PENDAFTARAN</H2> <HR Size=5 Width=400> </CENTER> <PRE>
Free of Charge – IT 1 / HTML <FORM Method="Post" Action="Http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query"> N a m a: <INPUT TYPE=Text NAME='Nama' size=30 Maxlength=30>
Alamat : <INPUT TYPE=Text Name="alamat" Size=40 Maxlength=40> E-Mail : <INPUT TYPE=Text Name="email" Size=20> Phone : <INPUT TYPE=Text Name="phone" Size=7 > Sex : <INPUT TYPE=Radio Name='Sex" VALUE='Male' CHECKED> Male
<INPUT TYPE=Radio Name='Sex" VALUE='Female' > Female
Topik yang diminati : <INPUT TYPE= CheckBox Nama='HTML' VALUE="HTML"> HTML
<INPUT TYPE= CheckBox Nama='CGI' VALUE="CGI"> CGI <INPUT TYPE= CheckBox Nama='PHP' VALUE="PHP">PHP <INPUT TYPE= CheckBox Nama='Java' VALUE="Java">Java Waktu Kursus yang dipilih : <SELECT NAME="Waktu" ><OPTION> Pagi <OPTION> Siang <OPTION> Sore <OPTION> Malam
</SELECT> Cara Pembayaran: <SELECT NAME="Bayar" > <OPTION > Tunai <OPTION> Kredit <OPTION SELECTED> Transfer <OPTION> Cek
</SELECT> KOMENTAR : <TEXTAREA NAME='Komentar' Rows=3 Cols=60 align=bottom> </TEXTAREA> <INPUT TYPE=Submit VALUE=' Okey ' > <INPUT TYPE=Reset VALUE='Batal'>
</FORM> </PRE> </BODY> </HTML>
Free of Charge – IT 1 / HTML
FRAME
Frame HTML dapat digunakan untuk membuat tampilan halaman HTML yang
terbagi-bagi menjadi beberapa bagian dimana setiap bagiannya merupakan satu
halaman HTML yang terpisah. Ini dilakukan untuk membuat tampilan halaman
HTML yang salah satu atau beberapa bagian berganti-ganti isinya sedang bagian
lain tetap sehingga dapat menghemat bandwith internet.Latihan FRAME
<html> <head> <title>frame</title> </head> <frameset rows=20%,*,10%>
<frame src="header.html"> <frameset cols=20%,*,20%>
<frame src="kiri.html"> <frame src="tengah.html"> <frame src="kanan.html">
</frameset> <frame src="footer.html">
</frameset> <body> </body> </html>
Free of Charge – IT 1 / HTML Buatlah file-file berikut ; JudulFrame.html
<HTML> <Head> </head> <body bgcolor=black>
<Center> <b><font color=yellow face=arial black size=7> FRAME SET </font></b> </body> </HTML> FormFrame.html <HTML> <Head> </head> <body> <FORM> <PRE> N a m a : <INPUT TYPE=Text NAME='Nama' size=20 Maxlength=20> <br> Password : <INPUT TYPE=Password Name="alamat" Size=20 Maxlength=20> <br>
Free of Charge – IT 1 / HTML E-Mail : <INPUT TYPE=Text Name="email" Size=20> <br> Phone : <INPUT TYPE=Text Name="phone" Size=7 ><br> Sex : <INPUT TYPE=Radio Name='Sex" VALUE='Male' CHECKED> Male<br> <INPUT TYPE=Radio Name='Sex" VALUE='Female' > Female<br>
</body> </HTML> naskahFrame.html <HTML> <Head> </head> <Body bgcolor=#008080>
Copy file instead of using rename when creating backup file This setting affects how UltraEdit generates the backup
file. By default UltraEdit renames the original file to the backup file. The reason for the setting is that on some systems, if
UltraEdit renames the original file to create the backup, the original file when it is recreated does not maintain the file
permissions that previously existed. Setting this causes the rename not to occur, preserving the permissions.Always create new file when copying to/from temporary file When copying to/from the temporary file to the users