Modul 1- Dasar HTML
22
Modul 1: Dasar-dasar HTML 1.1 HTML • HTML adalah singkatan dari Hypertext Markup Language • Suatu file HTML merupakan file text yang diapit oleh tag- tag markup • Tag markup memberitahu Web browser bagaimana halaman ditampilkan • Suatu file HTML haruslah mempunyai ekstensi sebagai htm atau html – .html lebih disukai – .htm digunakan karena masih ada server dengan sistim operasi lama yang hanya dapat menangani nama “8+3” (8 characters, dot, 3 characters) Suatu file HTML dapat dibuat menggunakan editor text sederhana seperti notepad 1.2 Sejarah HTML Tim Berners-Lee pada tahun 1989 yang mengusulkan suatu sistim dokumen hypertext untuk digunakan oleh organisasi riset nuklir Eropa, CERN. HTML yang didasarkan Standard Generalized Markup Language (SGML) belakangan diperkenalkan pertama kali dalam sistim yang disebut "The World-Wide Web" (WWW) pada Oktober 1990. Kronologi perkembangan HTML sejak diperkenalkan pertamakali hingga saat ini diperlihatkan sbb: Oktober tahun 1990: pertama kali doleh Berners-Lee's Musim panas tahun 1991: spesifikasi HTML di rilis pada Internet Juni 1993: draft yang mendefenisikan HTML di rilis Juli 1994: draft untuk HTML 2.0 di rilis Februari 1995: draft HTML 2.0 hasil perbaikan diusulkan sebagai suatu RFC (Request For Comments) September 1995: HTML 2.0 diterima sebagai standar - (RFC 1866) Maret 1995: draft HTML 3.0 di rilis (belakangan habis masa nerlakunya/expired) Mei 1996: draft HTML 3.2 di rilis Juli 1996: HTML experimental DTD 'Cougar' di rilis Januari 1997: HTML 3.2 (Wilbur) direkomendasi oleh W3C (World Wide Web Consortium 1
-
Upload
ogetsincan -
Category
Documents
-
view
735 -
download
0
Transcript of Modul 1- Dasar HTML
Modul 1: Dasar-dasar HTML
1.1 HTML
• HTML adalah singkatan dari Hypertext Markup Language• Suatu file HTML merupakan file text yang diapit oleh tag-tag markup • Tag markup memberitahu Web browser bagaimana halaman ditampilkan • Suatu file HTML haruslah mempunyai ekstensi sebagai htm atau html – .html lebih disukai– .htm digunakan karena masih ada server dengan sistim operasi lama yang hanya dapat menangani nama “8+3” (8 characters, dot, 3 characters)Suatu file HTML dapat dibuat menggunakan editor text sederhana seperti notepad
1.2 Sejarah HTML
Tim Berners-Lee pada tahun 1989 yang mengusulkan suatu sistim dokumen hypertext untuk digunakan oleh organisasi riset nuklir Eropa, CERN. HTML yang didasarkan Standard Generalized Markup Language (SGML) belakangan diperkenalkan pertama kali dalam sistim yang disebut "The World-Wide Web" (WWW) pada Oktober 1990. Kronologi perkembangan HTML sejak diperkenalkan pertamakali hingga saat ini diperlihatkan sbb:
Oktober tahun 1990: pertama kali doleh Berners-Lee's Musim panas tahun 1991: spesifikasi HTML di rilis pada Internet Juni 1993: draft yang mendefenisikan HTML di rilis Juli 1994: draft untuk HTML 2.0 di rilis Februari 1995: draft HTML 2.0 hasil perbaikan diusulkan sebagai suatu RFC (Request
For Comments) September 1995: HTML 2.0 diterima sebagai standar - (RFC 1866) Maret 1995: draft HTML 3.0 di rilis (belakangan habis masa nerlakunya/expired) Mei 1996: draft HTML 3.2 di rilis Juli 1996: HTML experimental DTD 'Cougar' di rilis Januari 1997: HTML 3.2 (Wilbur) direkomendasi oleh W3C (World Wide Web
Consortium Juli 1997: darft HTML 4.0 (dikembangkan dari Cougar) di rilis Nopember 1997: HTML 4.0 menjadi usulan rekomendasi W3C Desember 1997: HTML 4.0 direkomendasi oleh W3C April 1998: HTML 4.0 direvisi dan direkomendasi oleh W3C Desember 1998: draft untuk formulasi HTML dalam XML (eXtensible Markup
Language) dengan codename ‘Voyager’ di rilis Januari 1999: draft kerja awal XHTML 1.0 di rilis Desember 1999: XHTML 1.0 menjadi usulan rekomendasi W3C September 1999: draft kerja awal XHTML 1.1 di rilis Januari 2000: XHTML 1.0 direkomendasi oleh W3C April 2001: XHTML 1.1 menjadi usulan rekomendasi W3C Mei 2001: XHTML 1.1 direkomendasi oleh W3C
1.3 Tag HTML
• Tag HTML digunakan untuk mark elemen HTML • Tag HTML ditempatkan dalam kurung, < … >
1
• Kebanyakan tag HTML merupakan pasangan, <b> dan </b> (tag awal dan akhir)• Text yang berada diantara kedua tag adalah unsur content (tag bertindak sebagai container) • Tag harus tersusun secara baik (properly nested ) yaitu tidak saling tumpang tindih • Tag tidak case sensitive; <b> mempunyai arti sama dengan <B>• XHTML adalah case sensitive dan harus lower case
1.4 Struktur dokumen HTML
Dokumen HTML minimal memliki tag sbb:
<html> <head> <title>My Title</title> </head> <body> Hello, World! </body></html>
tag <HTML> dan </HTML> digunakan untuk menandai awal dan akhir dari suatu file HTML
tag <TITLE> dan </TITLE>, Tulisan yang berada diantara tag ini akan ditampilkan oleh browser pada bagian title yang mana merupakan title dari jendela browser.
tag <HEAD> </HEAD> , Berisi keterangan informasi halaman, seperti title dan jenis dokumen dlltag <BODY> </BODY> , menandai awal dan akhir dari badan dokumen HTML yang ditampilkan pada browser
1.5 Fungsi dan Pengunaan tag-tag dalam HTML
1.5.1 Menformat Text
HTML mengandung tag yang dapat digunakan memformat tampilan tulisan pada halaman anda. Tag yang digunakan a.l:
tag <i> dan </i> untuk membuat text italic tag <b> and </b> untuk membuat text boldface tag <h1>, <h2>, <h3>, <h4>, <h5>, atau <h6> untuk header dalam
dolumen dengan ukuran font besar untuk <h1>dan terkecil untuk <h6> (lebih lanjut lihat modul)
Contoh :
Kode Hasil<H1>Heading 1</H1><H2>Heading 2</H2><H3>Heading 3</H3><H4>Heading 4</H4><H5>Heading 5</H5><H6>Heading 6</H6>
Heading 1 Heading 2 Heading 3 Heading 4 Heading 5
2
Heading 6
Tabel tag untuk Formating dan Style
Align Division <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>Align Heading <H? ALIGN=LEFT|CENTER|RIGHT></H?>Author's Address <ADDRESS></ADDRESS>Block Quote <BLOCKQUOTE></BLOCKQUOTE>Citation <CITE></CITE>Code <CODE></CODE>Definition <DFN></DFN>Division <DIV></DIV>Emphasis <EM></EM>Heading <H?></H?>Keyboard Input <KBD></KBD>Large Font Size <BIG></BIG>Sample Output <SAMP></SAMP>Small Font Size <SMALL></SMALL>Strong Emphasis <STRONG></STRONG>Variable <VAR></VAR>
Tabel tag Formatting Presentasi/tampilan
Base Font Size <BASEFONT SIZE=?>Blinking <BLINK></BLINK>Bold <B></B>Center <CENTER></CENTER>Change Font Size <FONT SIZE=+|-?></FONT>Font Color <FONT COLOR="#$$$$$$"></FONT>Font Size <FONT SIZE=?></FONT>Italic <I></I>Preformatted <PRE></PRE>Strikeout <S></S>Subscript <SUB></SUB>Superscript <SUP></SUP>Typewriter <TT></TT>Underline <U></U>Width <PRE WIDTH=?></PRE>
Tabel tag Pengaturan Baris Halaman (Dividers)
Alignment <HR ALIGN=LEFT|RIGHT|CENTER>Align Text <P ALIGN=LEFT|CENTER|RIGHT> </P>Line Break <BR>Clear Textwrap <BR CLEAR=LEFT|RIGHT|ALL>Horizontal Rule <HR>No Break <NOBR> </NOBR>Paragraph <P> </P>Solid Line <HR NOSHADE>Thickness <HR SIZE=?>Width <HR WIDTH=?>Width Percent <HR WIDTH=%>Word Break <WBR>
Tabel tag Pengaturan Warna dan Backgrounds
Active Link <BODY ALINK="#$$$$$$">Background Color <BODY BGCOLOR="#$$$$$$">Text Color <BODY TEXT="#$$$$$$">Tiled Background <BODY BACKGROUND="URL">
3
Link Color <BODY LINK="#$$$$$$">Visited Link <BODY VLINK="#$$$$$$">
1.5.2 Whitespace
• Whitespace adalah karakter yang tidak diprint seperti: space, tab, newline, dan lainnya • HTML memperlakukan whitespace sebagai pemisah kata, dan baris text secara otomatis mengikuti lebar dari halaman • Untuk pidah baris halaman dapat digunakan tag <br> atau tag <p> dan </p> membuat kumpulan text dalam satu pragraf• Tag <pre> dan </pre> dapat digunakan pada text sehingga whitespace ditampilkan sesuai dengan apa yang ditulis (“pre” singkatan dari “preformatted”)
Soal latihan
(1) Peragakan penggunaan tag: <br>, <p>, <i>, <b>,<sub>, <sup>, <tt>, <u>
(2) Buat kode html untuk tampilan (browser) sbb:
Perihal: izin sakit Kepada Yth:Bapak Kepala BagianPT. XYZ
Bersama ini saya beritahu bahwa saya tidak masuk kerja berhubung karena sakit.
Hormat saya,Mr x
(3) Peragakan pengguaan: Font Sizes, Colors, and Faces
<font size=”6” color=”red”>Ini teks ukuran 6 berwarna merah</font><font size=”4” color=”blue” face=”Helvetica Narrow,Arial Narrow”>Ini teks ukuran 4 berwarna biru dan face Helvetica Narrow</font>
(4) Peragakan penggunaan: <body bgcolor=” “>, <body background=”url”>
1.5.3 Karakter khusus Yang di Cadangkan
Ada sejumlah karakter yang tidak dapat diketik langsung pada bagian body HTML, termasuk symbol untuk bahasa asing.
Tabel Karakter khusus
Entitas Keterangan Contoh
© copyright symbol ©
® registered trademark symbol
®
™ trademark symbol ™
nonbreaking space
< less-than symbol <
4
> greater-than symbol >
& ampersand &
" quotation mark "
% Percent %
# Number #
&plusmin; Plus or minus ±
Contoh :
Kode Hasil
2 < 3, adalah benar<br>3 > 4, adalah salah
2 < 3, adalah benar3 > 4, adalah salah
Peragakan penggunaan symbol copyright dan trade mark
1.5.4 Lists
Tabel lists.
Tag yang digunakan dalam defenisi list
HTML Tag Closing Description of Use
<dl> </dl> Definition list.
<li> </li> List item. Digunakan dengan tag <ol> dan<ul>
<dt> </dt> Definition term. List item dari <dl>.
<dd> </dd> Definition data. Penjelsan dari defeinition terms.
<ol> </ol> Ordered, or numbered/lettered, list.
<ul> </ul> Unordered, or bulleted, list.
Contoh peragaan <dl>, <dt>, <dd>
<html><head><title>Miscellaneous Genetic Terms</title><body><h1>A Quick Glossary of Genetic Terms</h1><i>Adapted from Dawkins, The Extended Phenotype</i><dl><dt>allometry</dt><dd>A disproportionate relationship between size of a body
5
part and size of the whole body.</dd><dt>anaphase</dt><dd>Phase of the cell division during which the pairedchromosomes move apart.</dd><dt>antigens</dt><dd>Foreign bodies, usually protein molecules, which provoke theformation of antibodies.</dd><dt>autosome</dt><dd>A chromosome that is not one of the sex chromosomes.</dd><dt>codon</dt><dd>A triplet of units (nucleotides) in the genetic code,
specifyingthe synthesis of a single unit (amino acid) in a protein
chain.</dd><dt>genome</dt><dd>The entire collection of genes possessed by one
organism.</dd></dl></body></html>
Contoh penggunaan <ol>, <ul>, <li>
• ordered, <ol> to </ol>, dan unordered, <ul> to </ul>• Ordered lists menggunakan nomor: 1, 2, 3, ...• Unordered lists menggunakan bullets (•)• Elements dari list adalah <li> dan </li>
Kode Hasil <ul> <li>Sugar</li> <li>Chips</li> <li>Caffeine</li> <li>Chocolate</li></ul>
Sugar Chips Caffeine Chocolate
Attributes
• Beberapa tag mempunyai atribut untuk tambahan informasi: Bentuk: nama attribut="nilai atribut"
Contoh: ordered list dapat diganti menjadi A, B, C, ... dengan memberi atribut sbb:
Kode Hasil<ol> <li>Sugar</li> <li>Chips</li> <li>Caffeine</li> <li>Chocolate</li></ol>
1. Sugar 2. Chips 3. Caffeine 4. Chocolate
<ol type="A">
6
<li>Sugar</li> <li>Chips</li> <li>Caffeine</li> <li>Chocolate</li></ol>
A. Sugar B. Chips C. Caffeine D. Chocolate
Tabel tambahan untuk tag Lists
Bullet Type <UL TYPE=DISC|CIRCLE|SQUARE><LI TYPE=DISC|CIRCLE|SQUARE>
Defination List <DL> <DT> <DD> </DL>Directory List <DIR> <LI> </DIR>Menu List <MENU> <LI> </MENU>Numbering Type <OL TYPE=A|a|I|i|1><LI TYPE=A|a|I|i|1>Ordered Lists <OL> <LI> </OL>Starting Number <OL VALUE=?><LI VALUE=?>Unordered List <UL> <LI> </UL>
Latihan1. Peragakan halaman yang mengandung list dengan mencoba berbagai atribut, nomor start selaian default. 2. Peragakan list dengan berbgai kombinasi
1.5.4 Links
• Untuk me link kehalaman lain: <a href="URL"> ke halaman </a>– Contoh: Baca disini <a href = "http://www.yahoo/news/index.html">Berita </a> luar negeri.– Link text secara otomatis akan berwarna biru dan underlined (purple jika telah dikunjungi)
• Untuk link ke bagian lain dari halaman yang sama:– Insert nama anchor: <a name="refs">References</a>– Lakukan link: <a href="#refs">My references</a>
• Untuk link dari halam lain ke nama anchor:<a href="PageURL#refs">My references</a>
• Untuk link e-mail <A HREF="mailto:[email protected]">Mail!</A>
Latihan:
1. Peragakan suatu halaman yang terdapat link ke sustu situs dan juga ke file html lokal2. Peragakan suatu link atar bagian halaman dari suatu halaman html
1.5.6 Images
• Images (pictures) bukanlah bagain dari halaman HTML; HTML hanya memberitahu dimana image di temukan
<img src="URL" alt="text description" width="150" height="100">
• Atribut src attribute yang diperlukan sedang lainnya optional• The URL alamat dan nama image seperti:.gif, .jpg, atau .png • Atribut alt memberi text sebagai representasi jika image gagal ditampilkan
7
• Atribut height and width jika disertakan memperbaiki tampilan image (jika ukuran salah maka tampilan gambar akan terganggu)• Tidak ada tag akhir </img> karena tag <img> bukan container
Tabel tag Links dan Gambar
Alignment <IMG SRC="URL"ALIGN=TOP|BOTTOM|MIDDLE>
Alignment <IMG SRC="URL"ALIGN=LEFT|RIGHT|TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM>
Alternate <IMG SRC="URL" ALT="***">Border <IMG SRC="URL" BORDER=?>
Client Pull <META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL">
Define Target <A NAME="***"> </A>Dimensions <IMG SRC="URL" WIDTH="?" HEIGHT="?">Display Image <IMG SRC="URL">Embed Object <EMBED SRC="URL">Imagemap <IMG SRC="URL" ISMAP>Imagemap <IMG SRC="URL" USEMAP="URL">URL Link <A HREF="URL"> </A>
Link to Target <A HREF="URL#***"> </A><A HREF="#***"> </A>
Low-Res Proxy <IMG SRC="URL" LOWSRC="URL">Map <MAP NAME="***"> </MAP>Object Size <EMBED SRC="URL" WIDTH="?" HEIGHT="?">Runaround Space <IMG SRC="URL" HSPACE=? VSPACE=?>
Section <AREA SHAPE="RECT" COORDS=",,," HREF="URL"|NOHREF>
Target Window <A HREF="URL" TARGET="***"> </A>Latihan:1. Peragakan suatu halaman html untuk menapilkan suatu file gambar dalam beberapa posisi (ditengah, sudut kanan, kiri dll)
1.5.7 Tables
• Tables digunakan untuk mengorganisir informasi dalam dua dimensi (baris dan kolom)• Suatu <table> dapat terdiri satu atau lebih baris table, <tr>• Setiap baris table terdiri dari satu atau lebih cell table data, <td>, atau cell table header, <th>– Perbedaan antara <td> dan <th> hanya pada format text. Pada cell <th> otomatis dalam format “boldface” dan “centered”• Borders (batas) pada cell dapat diberi dengan menambah attribute: border="1" pada tag awal <table>
Contoh table:Kode Hasil
8
<table border="1"> <tr> <th>Name</th> <th>Phone</th> </tr> <tr> <td>Dick</td> <td>555-1234</td> </tr> <tr> <td>Jane</td> <td>555-2345</td> </tr> <tr> <td>Sally</td> <td>555-3456</td> </tr></table>
Tabel tag untuk Tables
Define Table <TABLE> </TABLE>Table Border <TABLE BORDER> </TABLE>Table Border <TABLE BORDER=?> </TABLE>Cell Spacing <TABLE CELLSPACING=?>Cell Padding <TABLE CELLPADDING=?>Table Width <TABLE WIDTH=?>Table Width (%) <TABLE WIDTH=%>Table Caption <CAPTION> </CAPTION>Table Alignment <CAPTION ALIGN=TOP|BOTTOM>Table Row <TR> </TR>Table Header <TH> </TH>
Alignment <TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>
No Line Breaks <TD >Columns to Span <TD COLSPAN=?>Rows to Span <TD ROWSPAN=?>Desired Width <TD WIDTH=?>Width Percent <TD WIDTH=%>
Latihan:
1. Peragakan tabel menggunakan atribut colspan dan rowspan
1.5.8 Frames
• Frames adalah cara membagi jendela browser dalam beberapa bingkai. Halaman HTML terpisah dapat ditempatkan pada tiap bingkai.
Framesets
• Frames ditempatkan dalam frameset• Gantikan <body>...</body> dengan <frameset>...</frameset>• Pada Tag awal <frameset> gunakan atribut:• rows= nilai dari tinggi baris _• cols= nilai dari lebar koloml_• Nilai dapat berupa % atau pixel)
9
Contoh: <frameset cols="20%,80%">
Menambah frames pada frameset
• Letakkan tag <frame> dalam <frameset> yang merupakan rows atau columns– <frame> bukan container maka tidak ada tag akhir </frame> • Setiap <frame> mempunyai atribut seperti ini: src=”URL “
Dan beberapa tag e optional:– scrolling="yes|no|auto" (default is "auto")– noresize
Contoh lengkap Frame (situs The Java API):Kode
<HTML> <HEAD> <TITLE>Java 2 Platform SE v1.4.0</TITLE> </HEAD> <FRAMESET cols="20%,80%"> <FRAMESET rows="30%,70%"> <FRAME src="overview-frame.html" name="packageListFrame"> <FRAME src="allclasses-frame.html" name="packageFrame"> </FRAMESET> <FRAME src="overview-summary.html" name="classFrame"> </FRAMESET> <NOFRAMES> <H2>If you see this, you have frames turned off!</H2> </NOFRAMES></HTML>
Hasil
10
Tabel tag Frames
Column Widths <FRAMESET COLS=,,,> </FRAMESET>Column Widths <FRAMESET COLS=*> </FRAMESET>Define Frame <FRAME>Display Document <FRAME SRC="URL">Frame Document <FRAMESET> </FRAMESET>Frame Name <FRAME NAME="***"|_blank|_self|_parent|_top>Margin Width <FRAME MARGINWIDTH=?>Margin Height <FRAME MARGINHEIGHT=?>Not Resizeable <FRAME NORESIZE>Scrollbar <FRAME SCROLLING="YES|NO|AUTO">Row Heights <FRAMESET ROWS=,,,> </FRAMESET>Row Heights <FRAMESET ROWS=*> </FRAMESET>Unframed Content <NOFRAMES> </NOFRAMES>
1.5.9 Forms
• <form> merupakans tag HTML yang digunakan untuk rancangan interface pada halam web:– Untuk meminta informasi dari user yang kemudian dikirim ke server• Suatu form terdiri dari:
– : <form parameters> ...form elements... </form>
Elemen Form termasuk:: buttons, checkboxes, text fields, radio buttons, drop-down menus, dll
– Form biasanya dilenkapi button untuk kirim informasi ke server “Submit button”Parameters form memberitahu bagaimana informasi dikirim:. – action="url"(diperlukan)• menetapkan kemana informasi dikirim jik button “Sbmit” diklik
11
– method="get" (default)• Data Form dikirim sebagai suatu URL dengan menyertakan info data form form• Dapat digunakan jika hanay menggunkan data l ASCII dan tidak lebih dari 100 karakter– method="post"• Data Form dikirim dalam body URL request
tag <input>
– Kebanyakan elemen form menggunakan tag input dengan, type="..." berupa: text, checkbox, radio, password, hidden, submit, reset, button, file, atau image• Parameter taga input a.l:– name: nama dari elemen– value: “value”/nilai dari elemen – readonly: nila yang tak bisa dirobah– disabled: user tak dapat melakukan apa pun pada elemen ini
Contoh-contoh Text input:
A text field: <input type="text" name="textfield" value="with an initial value">
Hasil:
A password field: <input type="password" name="textfield3" value="secret">
Hasil:
textareaA multi-line text field <textarea name="textarea" cols="24" rows="2">Hello</textarea>
Hasil:
12
Buttons
• A submit button: <input type="submit" name="Submit" value="Submit">• A reset button: <input type="reset" name="Submit2" value="Reset">• A plain button:
<input type="button" name="Submit3" value="Push Me">
Hasil:
Keterangan:• Submit : kirim data• Reset : restore semua lemen form ke keadaan semula• Button : ada aksi dari java scriptCheckboxes
Kode HasilA checkbox: <input type="checkbox" name="checkbox” value="checkbox" checked>
Radio buttonsRadio buttons:<br>
<input type="radio" name="radiobutton" value="myValue1">male<br><input type="radio" name="radiobutton" value="myValue2" checked>female
Hasil:
Drop-down menu or listKode Hasil
13
A menu or list: <select name="select"> <option value="red">red</option> <option value="green">green</option> <option value="BLUE">blue</option></select>
Contoh lengkap: Kode Hasil
<html><head><title>Get Identity</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head><body><p><b>Who are you?</b></p><form method="post" action=""> <p>Name: <input type="text" name="textfield"> </p> <p>Gender: <input type="radio" name="gender" value="m">Male <input type="radio" name="gender" value="f">Female</p> </form></body></html>
Tabel tag Forms
Checked <INPUT CHECKED>Default Option <OPTION SELECTED>
Define Form <FORM ACTION="URL" METHOD=GET|POST> </FORM>
Field Name <INPUT NAME="***">Field Size <INPUT SIZE=?>Field Value <INPUT VALUE="***">File Upload <FORM ENCTYPE="multipart/form-data></FORM>Input Box Size <TEXTAREA ROWS=? COLS=?> </TEXTAREA>
Input Field<INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO|IMAGE|HIDDEN|SUBMIT|RESET">
Max Length <INPUT MAXLENGTH=?>Multiple Choice <SELECT MULTIPLE>Name of Box <TEXTAREA NAME="***"> </TEXTAREA>Name of List <SELECT NAME="***"> </SELECT>Option <OPTION>Selection List <SELECT> </SELECT>
Wrap Text <TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL> </TEXTAREA>
14
# of Options <SELECT SIZE=?> </SELECT>
Contoh Komplit kombinasi form dan table:Kode:<html><body><center><form method="POST" action="Kuesioner.php3"> <div align="center"> <center> <table border="0" width="500"> <tr> <th colspan=2> Kuesioner Mahasiswa </th> </tr> <tr> <td width="106">Nama</td> <td width="471"><input type="text" name="Nama" size="20"></td> </tr> <tr> <td width="106">Password</td> <td width="471"><input type="password" name="Password" size="20"></td> </tr> <tr> <td width="106">Jenis Kelamin</td> <td width="471"><input type="radio" value="0" checked name="Kelamin">Pria <input type="radio" name="Kelamin" value="1">Wanita</td> </tr> <tr> <td width="106">Hobby</td> <td width="471"><input type="checkbox" name="C1" value="ON">Membaca, <input type="checkbox" name="C2" value="ON">Sport, <input type="checkbox" name="C3" value="ON">Music, <input type="checkbox" name="C4" value="ON">Memasak, <input type="checkbox" name="C5" value="ON">Tamasya </td> </tr> <tr> <td width="106">Komentar</td> <td width="471"><textarea rows="2" name="Komentar" cols="55"></textarea></td> </tr> <tr> <td width="106">Jurusan</td> <td width="471"><select size="1" name="Jurusan"> <option selected>Komputer</option> <option>Akuntansi</option> <option>Sekretaris</option> </select></td> </tr> </table> </center> </div> <p><input type="submit" value="Submit" name="Submit"> <input type="reset" value="Reset" name="Reset"></p>
15
</form></center></body></html>
Hasil:
Kuesioner Mahasiswa Nama
PasswordJenis Kelamin Pria Wanita
HobbyMembaca, Sport, Music,
Memasak, Tamasya
Komentar
Jurusan
1.6 Link Absolut dan Relatif
Pada bab diatas telah ditunjukan kode html yang berfungsi sebagai link ke objek gambar taupun ke halaman html seperti: <a href="URL"> ke halaman </a>.URL (Uniform Resource Location) merupkan alamat/lokasi tempat objek gambar atau halaman yang hendak dilink berda. Objek tersebut dapat berada dalam satu folder dengan file pemanggil atau berda pada folder lain yang berbeda.
Ada dua cara menuliskan lokasi atau alamat yang dilink/dipanggil tersebut yaitu dengan menuliskan secara lengkap URL yang dilink seperti (link absolut):
http://www.hair.net/~squiggie/LottzaStuff/other/images/chef.gif
Dalam contoh ini chef.gif adalah nama objek gambar yang dipanggil/dilink dengan lokasi seperti ditunjukkan diatas. Sedangkan file yang memanggil adalah page1.html.
Cara lain adalah dengan menuliskan alamat relatif seperti berikut (link relatif):
SRC="chef.gif" berarti gambar tersebut ada di folder yang sama dengan dokumen html
16
SRC="images/chef.gif" berarti gambar tersebut terletak satu folder di bawah (sub folder) dokumen html.
SRC="../chef.gif" berarti gambar tersebut terletak satu folder di atas dokumen html.
SRC="../../chef.gif" berarti gambar tersebut terletak dua folder di atas dokumen html.
SRC="../images/chef.gif" berarti gambar tersebut terletak satu folder di atas kemudian satu folder ke bawah di direktori images.
SRC="../../../other/images/chef.gif"
Ada baiknya menggunakan URL relatif dibandingkan dengan pemakaian URL absolut (lengkap). Karena dalam perancangan web site, hasil rancangan dapat disimpan di hard disk sendiri dan semua link akan berfungsi pada saat di-upload ke server di internet, dan juga file/gambar tersebut akan lebih cepat ditampilkan oleh browser. Adapun URL absolut digunakan jika gambar tadi terletak di server yang sama sekali berbeda.
17
