Modul Praktikum HTML Maranatha

Modul Perkuliahan Pemrograman WebTopik: HTML

(Hyper Text Markup Language)

Jurusan Sistem InformasiFakultas Teknologi Informasi

Universitas Kristen MaranathaBandung

Disusun Oleh:Setia Budi, S.Kom

Catatan:Modul ini disusun dengan menggunakan Open Officeyang berjalan di atas sistem operasi Ubuntu LinuxPengujian script HTML dilakukan dengan menggunakan FireFox yang berjalan di atas sistem operasi Ubuntu LinuxMari budayakan penggunaan open source software :)

Format Dasar File Dokumen HTMLBerikut adalah format dasar dari dokumen HTML

<HTML><HEAD>

<TITLE>Ini Judul</TITLE></HEAD>

<BODY>Ini Isinya :)

</BODY></HTML>

Mengganti Warna LatarUntuk mengganti warna latar / background dapat dilakukan dengan menyertakan attribut BGCOLOR pada tag <BODY>

<HTML><HEAD>


<BODY BGCOLOR="aqua">Ini Isinya :)

</BODY></HTML>

Beberapa nilai yang bisa digunakan untuk melengkapi atribut BGCOLOR: RED, GREEN, BLUE, AQUA, BLACK, SILVER, YELLOW, PURPLE, NAVY, OLIVE.

Menyertakan KomentarUntuk menyertakan komentar pada dokumen HTML dapat menggunakan <! komentar >Komentar biasanya digunakan untuk memberikan keterangan tambahan pada dokumen HTML tapi keterangan tersebut tidak akan ditampilkan pada web browser.

<HTML><HEAD>


<BODY BGCOLOR="aqua"><! Ini adalah keterangan yang ditulis dengan diapit penanda komentar dan tidak ditampikan oleh web browser >Ini Isinya :)

</BODY>

</HTML>

Mengenal Tag <BR>Untuk menampilkan tulisan pada baris yang berbeda dalam dokumen HTML dibutuhkan suatu tag khusus yaitu <BR>

<HTML><HEAD>


<BODY>Mbah Boedyakan menururnkan ilmuweb ke siswanya

</BODY></HTML>

<HTML><HEAD>


<BODY>Mbah Boedy <BR>akan menururnkan ilmu <BR>web ke siswanya <BR>

</BODY></HTML>

Mengenal Tag <P> dan <DIV>Pada dokumen HTML untuk mengelompokkan suatu text ke dalam suatu paagraf dapat menggunakan tag <P> atapu tag <DIV>.Kedua tag ini akan memberikan efek yang sama.Kedua tag ini juga memiliki atribut ALIGN yang digunakan untuk mengatur alignment dari suatu paragraf. Nilai yang bisa disertakan pada atribut ALIGN adalah LEFT, RIGHT, CENTER, dan JUSTIFY.<HTML>

<HEAD><TITLE>Ini Judul</TITLE>

</HEAD>

<BODY><P ALIGN="CENTER">Bagian ini dibuat <BR>dengan menggunakan <BR>tag P</P><DIV ALIGN="RIGHT">Kalau yang ini<BR>dengan menggunakan<BR>tag DIV<BR>Keduanya berefek sama

</DIV>

</BODY></HTML>

Mengenal Tag HeadingPada dokumen HTML terdapat 6 ukuran heading mulai dari <H1> sampai dengan <H6><H1> adalah heading dengan ukuran terbesar dan <H6> dalah heading dengan ukuran terkecilTag heading memiliki attribut ALIGN yang digunakan untuk mengatur alignment.

<HTML><HEAD>


<BODY><H1 ALIGN="CENTER">Heading 1</H1><H2 ALIGN="RIGHT">Heading 2</H2><H3 ALIGN="LEFT">Heading 3</H3><H4>Heading 4</H4><H5>Heading 6</H5><H6>Heading 6</H6>

</BODY></HTML>

Mengenal Tag <HR>Pada dokumen HTML untuk membuat suatu garis mendatar / horisontal dapat menggunakan tag <HR>Tag <HR> memiliki attribut seperti WIDTH untuk mengatur panjang garis, SIZE untuk mengatur ketebalan garis, ALIGN untuk mengatur alignment, NOSHADE untuk menghilangkan efek bayangan, dan COLOR untuk mengatur warna garis.

<HTML><HEAD>


<BODY>Salam Hangat<HR>Dari Mbah Boedy<HR WIDTH="5%" SIZE="20" ALIGN="CENTER" NOSHADE><HR WIDTH="10%" SIZE="20" ALIGN="CENTER" NOSHADE><HR WIDTH="20%" SIZE="20" ALIGN="CENTER" NOSHADE><HR WIDTH="40%" SIZE="20" ALIGN="CENTER" NOSHADE>

</BODY></HTML>

Mengenal Tag <CENTER>Pada dokumen HTML unutk menjadikan suatu teks agar bisa ditampilkan pada posisi center / tengah dapat menggunakan tag <CENTER>

<HTML><HEAD>


<BODY>Mbah Boedy adalah seorang<CENTER>pendekar sakti dari Jogja</CENTER>yang gemar makan di angkringan tugu

</BODY>

</HTML>

Mengenal Tag <B>, <I>, dan <U>Tag <B> pada dokumen HTML digunakan untuk memberikan efek cetak tebal pada teks, tag <I> memberikan efek cetak miring, dan tag <U> memberikan garis bawah pada suatu teks.

<HTML><HEAD>


<BODY><B>Petuah Mbah Boedy</B><BR><I>Setiap permasalahan hidup</I><BR><U>Pasti selalu ada jalan keluarnya</U><BR><B><U>Yang penting adalah</U><BR><I>Selalu perpikiran terbuka</I></B>

</BODY>

</HTML>

Mengenal Tag <BIG> dan <SMALL>

Pada dokumen HTML tag <BIG> digunakan untuk mencetak teks dengan ukuran yang lebih besar sedangkan tag <SMALL> digunakan untuk mencetak teks dengan ukuran yang lebih kecil.

<HTML><HEAD>


<BODY><SMALL>Dari kecil</SMALL><BR>Lalu menjadi sedang<BR><BIG>Dan akhirnya Menjadi besar</BIG>

</BODY>

</HTML>

Mengenal Tag <SUB>, <SUP>, <TT>, dan <DEL>Pada dokumen HTML tag <SUB> digunakan untuk memberikan efek subscript pada suatu teks, dan tag <SUP> digunakan untuk memberikan efek superscript pada suatu teks sedangkan tag <TT> digunakan untuk memberikan efek mesin ketik pada suatu teks. Tag <DEL> digunakan untuk memberikan efek coretan pada suatu teks.

<HTML><HEAD>


<BODY>Percobaan yang <DEL>salah</DEL><BR>

<TT>Senyawa dan Satuan</TT><BR>H<SUB>2</SUB>SO<SUB>4</SUB><BR>Satuan Luas adalahmeter<SUP>2</SUP><BR>Satuan Volume adalahmeter<SUP>3</SUP><BR>

</BODY>

</HTML>

Mengenal Tag <PRE>Tag <PRE> pada dokumen HTML digunakan untuk melakukan preformat terhadap dokumen HTML. Artinya teks yang akan ditampilkan akan sama keadaannya seperti yang tertulis pada kode HTML nya.

<HTML><HEAD>


<BODY><PRE>Mbah Boedy melakukan pengembaraanke Bumi Parahyanganuntuk menambah wawasan dan kesaktian

</PRE></BODY>

</HTML>

Mengenal Tag <ACRONYM>Tag <ACRONYM> pada dokumen HTML digunakan untuk memberi keterangan tambahan terhadap suatu istilah ataupun singkatan yang ditampilkan yang disertakan pada atribut TITLE.

<HTML><HEAD>


<BODY>Mbah Boedy sangat mendukung<BR>upaya pemberantasan<BR><ACRONYM TITLE="Korupsi, Kolusi, dan Nepotisme">KKN</ACRONYM>

</BODY></HTML>

Mengenal Tag <FONT>Pada dokumen HTML, tag <FONT> digunakan untuk mengubah jenis huruf, ukuran huruf, dan mengganti warna huruf.Untuk mengubah jenis huruf diatur dengan menggunakan atribut FACE, untuk mengubah ukuran huruf diatur dengan menggunakan atribut SIZE, dan untuk mengubah warna huruf diatur dengan menggunakan atribut COLOR.Ukuran huruf terkecil adalah 1 dan ukuran terbesar adalah 7.

<HTML><HEAD>


<BODY>Ini tanpa efek FONT<BR><FONT FACE="ARIAL" SIZE="5" COLOR="RED">

Ini dengan efek FONT</FONT>

</BODY></HTML>

Mengenal Tag <BASEFONT>Pada dokumen HTML tag <BASEFONT> digunakan untuk mengatur default font pada suatu halaman.Tag ini tidak dikenali di semua web browser.

<HTML><HEAD>


<BODY><BASEFONT FACE="VERDANA" SIZE="2" COLOR="GREEN">Ini menggunakan efek default<BR><FONT FACE="ARIAL" SIZE="5" COLOR="RED">Ini dengan efek FONT<BR></FONT>Kembali ke default

</BODY></HTML>

Menampilkan Karakter KhususBeberapa karakter khusus pada dokumen HTML tidak dapat ditampilkan secara langsung pada web browser, contohnya karakter < atau > tidak dapat ditampilkan secara langsung karena karakter tersebut termasuk dalam karakter khusus dalam tag HTML.Untuk itu dibutuhkan cara penulisan yang khusus pula.

<HTML><HEAD>


<BODY><FONT SIZE="6">©

®&×÷<>½</FONT>

</BODY></HTML>

Mengenal ListPada dokumen HTML terdapat dua jenis list, yaitu unordered list dan ordered list.Unordered list adalah suatu list yang tidak memperhatikan urutan penomoran sedangkan ordered list adalah list yang memperhatikan urutan penomoran.Untuk membuat suatu unordered list menggunakan tag <UL> sedangkan untuk membuat ordered list menggunakan tag <OL>.Dan untuk mengisikan item pada list menggunakan tag <LI>

<HTML><HEAD>


<BODY>Menu Makanan dengan UL<UL>

<LI>Bakso</LI><LI>Sate</LI><LI>Siomay</LI>

</UL><BR>Menu Minuman dengan OL<OL>

<LI>ES Jeruk</LI><LI>Es Teler</LI><LI>Es Campur</LI>

</OL></BODY>

</HTML>

Untuk unordered list terdapat beberapa pilihan tipe yang bisa diatur dengan mengubah atribut TYPE pada tag <UL>. Pilihan tipe yang tersedia adalah CIRCLE, DISC, dan SQUARE.

<HTML><HEAD>

<TITLE>Ini Judul</TITLE>

</HEAD>

<BODY>

Klasifikasi Hewan<UL TYPE="CIRCLE">

<LI>Mamalia</LI><LI>Reptil</LI><LI>Amfibi</LI><LI>Aves</LI><LI>Insecta</LI>

</UL></BODY>

</HTML>

Untuk ordered list dapat pula diatur tipenya dengan mengatur nilai dari atribut TYPE pada tag <OL>. Ada beberapa macam tipe dalam ordered list yaitu tipe huruf, angka, dan romawi.Nilai Atribut TYPE Keterangan

a Menggunakan huruf kecil sebagai acuan penomoran

A Menggunakan huruf besar sebagai acuan penomoran

i Menggunakan romawi kecil sebagai acuan penomoran

I Menggunakan romawi kecil sebagai acuan penomoran

1 Menggakan angka sebagai acuan penomoran

Selain tipe, pada ordered list juga dapat diatur penomoran awalannya yaitu dengan mengatur nilai dari atribut START pada tag <OL>.

<HTML><HEAD>


<BODY>Klasifikasi Hewan<OL TYPE="a" START="3">

<LI>Mamalia</LI><LI>Reptil</LI><LI>Amfibi</LI><LI>Aves</LI><LI>Insecta</LI>

</OL></BODY>

</HTML>

Pada dokumen HTML juga dimungkinkan untuk membuat sub list atau adanya list lain di dalam suatu list.

<HTML><HEAD>


<BODY>Klasifikasi Hewan<OL TYPE="I">

<LI>Mamalia<OL TYPE="i">

<LI>Sapi</LI><LI>Kuda</LI>

</OL></LI>

<LI>Aves<UL TYPE="SQUARE">

<LI>Ayam</LI><LI>Burung</LI>

</UL></LI>

</OL></BODY>

</HTML>

Mengenal Tag <DL>, <DT>, <DD>Tag <DL>, <DT>, <DD> pada dokumen HTML digunakan untuk membuat suatu daftar definisi (definition list).

<HTML><HEAD>


<BODY><FONT SIZE="5"><DL>

<DT>HTML</DT><DD>Dokumen yang digunakan untuk web</DD>

<DT>Web Browser</DT><DD>Aplikasi yang digunakan untuk mengartikan dokumen HTML</DD>

<DT>HTTP</DT><DD>Protokol yang digunakan untuk web</DD>

</DL>

</FONT></BODY>

</HTML>

Mengenal Tag <MARQUEE>Tag <MARQUEE> digunakan untuk menjadikan suatu teks bergerak berputar. Atribut yang terdapat pada tag <MARQUEE> adalah DIRECTION yang akan mengatur arah gerak text. Nilai yang memungkinkan untuk atribut DIRECTION adalah LEFT, RIGHT, UP, dan DOWN.

<HTML><HEAD>


<BODY><FONT SIZE="7" COLOR="BLUE"><MARQUEE DIRECTION=”RIGHT”>Mbah Boedy</MARQUEE></FONT>

</BODY>

</HTML>

Menambahkan Gambar Sebagai BackgroundPada dokumen HTML untuk menambahkan gambar pada latar belakang / background dapat dilakukan dengan mengubah nilai dari atribut BACKGROUND pada tag <BODY> sesuai dengan nama file yang ingin dijadikan latar belakang.

<HTML><HEAD>


<BODY BACKGROUND="merapi.jpg"><FONT COLOR="RED" SIZE="5">Tempat Bertapa Mbah Marijan</FONT>

</BODY></HTML>

Mengenal Tag <IMG>Tag <IMG> pada dokumen HTML digunakan untuk menambahkan gambar pada suatu halaman web.Untuk menambahkan gambar dapat dilakukan dengan mengubah nilai atribut SRC disesuaikan dengan nama file gambar yang diinginkan.

<HTML><HEAD>


<BODY>Gambar 1<IMG SRC="pic1.jpg">Bunga Matahari

</BODY></HTML>

Selain atribut SRC, tag <IMG> juga memiliki atribut lain seperti ALIGN, BORDER, ALT, HEIGHT, dan WIDTH.Atribut ALIGN digunakan untuk mengatur aligmen. Nilai yang bisa diberikan pada atribut ALIGN adalah TOP, MIDDLE, dan BOTTOM.Atribut BORDER digunakan untuk menentukan ketebalan garis tepi dari suatu gambar.Atribut ALT digunakan untuk memberi keterangan ketika suatu gambar gagal untuk ditampilkan ke web browser.Atribut HEIGHT dan WIDTH digunakan untuk mengatur tinggi dan lebar gambar.

<HTML><HEAD>


<BODY>Gambar 1<IMG SRC="pic1.jpg" ALIGN="MIDDLE" ALT="Sun Flower" WIDTH="200" HEIGHT="300">Bunga Matahari

</BODY></HTML>

Mengenal Tag TableUntuk membuat tabel pada suatu dokumen HTML akan melibatkan beberapa tag seperti <TABLE>, <CAPTION>, <TR>, <TH>, dan <TD>.Tag <TABLE> digunakan sebagai penanda dimulai dan diakhirinya suatu tabel.Tag <TR> digunakan untuk membuat baris / row baru.Tag <TH> digunakan untuk membuat judul kolom / barisTag <TD> digunakan untuk mengisikan data pada suatu cell.

<HTML><HEAD>


<BODY><TABLE>

<CAPTION>Tabel Keahlian</CAPTION><TR><TH>Nama</TH><TH>Keahlian</TH></TR><TR><TD>Superman</TD><TD>Bisa Terbang</TD></TR><TR><TD>Spiderman</TD><TD>Bisa Panjat Dinding</TD></TR><TR><TD>Mbah Boedy</TD><TD>Bisa Ngajar :)</TD></TR>

</TABLE></BODY>

</HTML>

Untuk mengganti warna latar pada suatu table dapat dilakukan dengan mengatur attribut BGCOLOR pada tag <TABLE> dan untuk mengatur ketebalan garis tepi dari suatu table dapat dilakukan dengan mengatur atribut BORDER pada tag <TABLE>.

<HTML><HEAD>


<BODY><TABLE BGCOLOR="yellow" BORDER="5">


</TABLE></BODY>

</HTML>

Pengaturan jarak pada tabel diatur oleh atribut CELLPADDING dan CELLSPACING pada tag <TABLE>.CELLPADDING digunakan untuk mengatur jarak antara teks dengan batas tepi kiri, atas, dan bawah dari suatu cell dan CELLSPACING digunakan untuk mengatur jarak antar cell.

<HTML><HEAD>


<BODY><TABLE BORDER="10" CELLPADDING="10" CELLSPACING="20">


</TABLE></BODY>

</HTML>

Untuk mengatur lebar dan tinggi suatu table dapat dilakukan melalui atribut WIDTH dan HEIGHT pada tag <TABLE>.Atribut WIDTH digunakan untuk mengatur lebar table sedangkan atribut HEIGHT digunakan untuk mengatur tinggi table.

<HTML><HEAD>


<BODY><TABLE BORDER="1" WIDTH="300" HEIGHT="200">


</TABLE></BODY>

</HTML>

Untuk mengatur alignment dari suatu table dapat diatur melalui atribut ALIGN pada tag <TABLE>, sedangkan untuk mengatur alignment suatu teks yang terdapat dalam suatu cell dapat diatur melalui atribut ALIGN pada tag <TD>.

<HTML><HEAD>


<BODY><TABLE BORDER="1" WIDTH="300" HEIGHT="200" ALIGN="CENTER">

<CAPTION>Tabel Keahlian</CAPTION><TR><TH>Nama</TH><TH>Keahlian</TH></TR><TR><TD>Superman</TD><TD ALIGN="RIGHT">Bisa Terbang</TD></TR><TR><TD>Spiderman</TD><TD ALIGN="RIGHT">Bisa Panjat Dinding</TD></TR><TR><TD>Mbah Boedy</TD><TD ALIGN="RIGHT">Bisa Ngajar :)</TD></TR>

</TABLE></BODY>

</HTML>

Untuk mengatur vertical alignment suatu teks yang terdapat dalam suatu cell dapat diatur melalui atribut VALIGN pada tag <TD>.Nilai yang memungkinkan untuk atribut ini adalah TOP, MIDDLE, BOTTOM.

<HTML><HEAD>


<BODY><TABLE BORDER="1" WIDTH="300" HEIGHT="200" ALIGN="CENTER">

<CAPTION>Tabel Keahlian</CAPTION><TR><TH>Nama</TH><TH>Keahlian</TH></TR><TR><TD VALIGN="TOP">Superman</TD><TD>Bisa Terbang</TD></TR><TR><TD VALIGN="MIDDLE">Spiderman</TD><TD>Bisa Panjat Dinding</TD></TR><TR><TD VALIGN="BOTTOM">Mbah Boedy</TD><TD>Bisa Ngajar :)</TD></TR>

</TABLE>

</BODY></HTML>

Selain mengubah warna latar table secara keseluruhan, bisa juga dilakukan perubahan warna latar hanya pada cell tertentu saja. Hal ini dapat dilakukan dengan mengatur atribut BGCOLOR pada tag <TD>

<HTML><HEAD>


<BODY><TABLE BORDER="1">

<CAPTION>Tabel Keahlian</CAPTION><TR><TH>Nama</TH><TH>Keahlian</TH></TR><TR><TD BGCOLOR="PINK">Superman</TD><TD>Bisa Terbang</TD></TR><TR><TD>Spiderman</TD><TD>Bisa Panjat Dinding</TD></TR><TR><TD>Mbah Boedy</TD><TD BGCOLOR="ORANGE">Bisa Ngajar :)</TD></TR>

</TABLE></BODY>

</HTML>

Untuk melakukan penggabungan cell dapat dilakukan dengan mengatur atribut COLSPAN dan

ROWSPAN pada tag <TD> ataupun <TH>.Atribut COLSPAN digunakan untuk mengatur penggabungan kolom sedangkan atribut ROWSPAN digunakan untuk penggabungan baris.

<HTML><HEAD>


<BODY><TABLE BORDER="1">

<CAPTION>Data Mamalia di Kebun Binatang</CAPTION><TR>

<TH ROWSPAN="2" COLSPAN="2">Mamalia</TH> <TH COLSPAN="3">Jenis Mamalia</TH>

</TR><TR>

<TH>Orang Utan</TH><TH>Gajah</TH><TH>Zebra</TH>

</TR><TR>

<TH ROWSPAN="2">Jenis Kelamin</TH><TH>Jantan</TH><TD>15</TD><TD>5</TD><TD>8</TD>

</TR><TR>

<TH>Betina</TH><TD>25</TD><TD>7</TD><TD>10</TD>

</TR>

</TABLE></BODY>

</HTML>

Mengenal Link / HyperlinkLink / Hyperlink dalam dokumen HTML digunakan untuk berpindah dari suatu halam ke halaman

lainnya. Tag yang berperan dalam membuat link adalah tag <A> atau yang biasa dikenal sebagai tag anchor / jangkar. Tag <A> akan memiliki suatu atribut yang sangat penting yaitu atribut HREF yang digunakan untuk menentukan halaman tujuan dari suatu link.Pada contoh kali ini terdapat dua buah file dokumen HTML di mana pada masingmasing dokumen terdapat suatu link yang apabila dipilih (diklik) akan memanggil dokumen lainnya.

nama file: halaman1.html<HTML>

<HEAD> <TITLE>Halaman Pertama</TITLE></HEAD>

<BODY> <H1>Ini adalah halaman pertama</H1> <A HREF="halaman2.html">Ke Halaman 2</A></BODY>

</HTML>

nama file: halaman2.html

<HTML><HEAD> <TITLE>Halaman Kedua</TITLE></HEAD>

<BODY> <H1>Ini adalah halaman kedua</H1> <A HREF="halaman1.html">Ke Halaman 1</A></BODY>

</HTML>

Dalam contoh sebelumnya ketika link pada dokumen halaman1.html maka web browser akan menampilkan dokumen halaman2.html pada jendela browser yang sama.Tapi dimungkinkan juga ketika suatu halman memanggil halaman yang lain makan halaman keda tersebut akan tampil pada jendela web browser yang lain. Hal ini dimungkinkan dengan mengatur atribut TARGET pada tag <A>. Atribut TARGET ini nantinya diberi nilai “_blank”


<HEAD><TITLE>Halaman Pertama</TITLE>

</HEAD>

<BODY><H1>Ini adalah halaman pertama</H1><A HREF="halaman2.html" TARGET="_blank">Ke Halaman 2</A>

</BODY></HTML>

Selain melakukan link ke halaman / dokumen yang berbeda, suatu dokumen HTML juga dapat melakukan link ke alamat suatu situs. Yang perlu dilakukan adalah dengan memberi nilai atribut HREF sesuai dengan alamat situs / URL yang ingin dituju.

<HTML><HEAD>

<TITLE>Halaman Pertama</TITLE></HEAD>

<BODY><H1>Ini adalah halaman pertama</H1><A HREF="halaman2.html" TARGET="_blank">Ke Halaman 2</A><A HREF="http://google.com" TARGET="_blank">Ke Google</A>

</BODY></HTML>

Suatu gambar juga bisa dijadikan link ke halaman lain, hal ini dimungkinkan dengan melatakkan tag <IMG SRC=”nama gambar”> di antara tag <A> dan </A>.

<HTML><HEAD>

<TITLE>Halaman Pertama</TITLE></HEAD>

<BODY><H1>Ini adalah halaman pertama</H1><A HREF="halaman2.html" TARGET="_blank"> <IMG SRC="pic1.jpg" WIDTH="100" HEIGHT="100"></A>

</BODY></HTML>

Mengenal Frame Frame digunakan untuk membagi jendela web browser menjadi beberapa bagian yang lebih kecil. Untuk membuat frame pada dokumen HTML menggunakan tag <FRAMESET> dan <FRAME>. Frame nantinya berperan sebagai bingkai yang akan diisi dengan dokumendokumen HTML yang lain. Untuk membagi jendela browser dalam beberapa kolom dapat diatur melalui atribut COLS pada tag <FRAMESET>. Untuk menampilkan dokumen HTML pada suatu frame dapat diatur melalui atribut SRC pada tag <FRAMESET>.

nama file: halaman_a.html<HTML>

<HEAD><TITLE>Halaman A</TITLE>

</HEAD>

<BODY><H1>Ini Halaman A</H1>

</BODY></HTML>

nama file: halaman_b.html<HTML>

<HEAD><TITLE>Halaman B</TITLE>

</HEAD>

<BODY><H1>Ini Halaman B</H1>

</BODY></HTML>

nama file: frameku.html<HTML> <HEAD>

<TITLE>Latihan Frame</TITLE></HEAD>

<FRAMESET COLS="40%,*"><FRAME SRC="halaman_a.html"><FRAME SRC="halaman_b.html">

</FRAMESET></HTML>

Selain membagi jendela web browser dalam beberapa kolom, frame juga dapat membagi jendela web browser dalam beberapa baris dan gabungan keduanya (baris dan kolom). Untuk membagi jendela web browser dalam beberapa baris dapat diatur dengan menggunakan atibut ROWS pada tag <FRAMESET>.

<HTML><HEAD>


<FRAMESET ROWS="30%,*"><FRAME SRC="halaman_a.html"><FRAMESET COLS="40%,*">

<FRAME SRC="halaman_b.html"><FRAME SRC="halaman_b.html">

</FRAMESET></FRAMESET>

</HTML>

Secara default frame akan memiliki bingkai pembatas, untuk menghilangkan bingkai pembatas tersebut dapat diatur dengan memberikan nilai 0 pada atribut BORDER dari tag <FRAMESET>.

<HTML><HEAD>


<FRAMESET COLS="40%,*" BORDER="0"><FRAME SRC="halaman_a.html"><FRAME SRC="halaman_b.html">

</FRAMESET></HTML>

Suatu frame juga bisa diberi nama dengan mengatur atribut NAME pada tag <FRAME>. Pemberian nama pada frame ditujukan untuk melakukan link antar frame yang berbeda.

nama file: halaman_a.html<HTML>

<HEAD><TITLE>Halaman A</TITLE>

</HEAD>

<BODY><H1>Ini Halaman A</H1><A HREF="halaman_b.html" TARGET="kanan">halaman b</A><BR><A HREF="halaman_c.html" TARGET="kanan">halaman c</A>

</BODY></HTML>

nama file: halaman_b.html<HTML>

<HEAD><TITLE>Halaman B</TITLE>

</HEAD>

<BODY><H1>Ini Halaman B</H1>

</BODY></HTML>

nama file: halaman_c.html<HTML>

<HEAD><TITLE>Halaman C</TITLE>

</HEAD>

<BODY><H1>Ini Halaman C</H1>

</BODY></HTML>

nama file: frameku.html<HTML>

<HEAD><TITLE>Latihan Frame</TITLE>

</HEAD>

<FRAMESET COLS="40%,*"><FRAME NAME="kiri" SRC="halaman_b.html"><FRAME NAME="kanan" SRC="halaman_c.html">

</FRAMESET></HTML>

Mengenal Tag <IFRAME>Dalam dokumen HTML suatu frame dapat disertakan tanpa harus membagi jendela browser secara

keseluruhan dengan menggunakan tag <FRAMESET>. Hal ini dimungkinkan dengan menggunakan tag <IFRAME>. Dokukem HTML yang ingin disertakan diatur oleh atribut SRC pada tag <IFRAME>. Tag <IFRAME> juga memiliki atribut WIDTH dan HEIGHT yang bisa digunakan untuk mengatur luas area dari frame yang disertakan. Untuk mengatur alignmentnya bisa diatur lewat atribut ALIGN.


<HEAD><TITLE>halaman 1</TITLE>

</HEAD><BODY>

<H1>ini halaman satu</H1></BODY>

</HTML>

nama file: iframeku.html<HTML>

<HEAD><TITLE>Coba iframe</TITLE>

</HEAD><BODY>

<H1>Mencoba iframe</H1><IFRAME SRC="halaman1.html" WIDTH="200" HEIGHT="100" ALIGN="RIGHT"><BR>

</BODY></HTML>

Mengenal Tag <BGSOUND>Suatu dokumen HTML juga bisa memainkan suatu file suara / sound ketika dibuka oleh web browser. Hal ini dilakukan dengan bantuan tag <BGSOUND>. Tag ini akan memainkan file suara / sound yang diatur oleh atribut SRC. Untuk memungkinkan terjadinya perulangan / looping dalam pemutaran suatu file dapat diatur melalui atribut LOOP pada tag <BGSOUND>.

<HTML><HEAD>

<TITLE>Memutar Lagu</TITLE>

</HEAD><BODY>

<BGSOUND SRC="lagu.mp3" LOOP="2">

<H1>Mencoba Lagu</H1></BODY>

</HTML>

Mengenal Tag <EMBED>Dalam dokumen HTML dimungkinkan untuk menyertakan serta memainkan suatu file multimedia berupa animasi atau video dengan menggunakan tag <EMBED>. Nama file video yang akan disertakan diatur oleh atribut SRC. Untuk mengatur lebar dan ketinggian area diatur oleh atribut WIDTH dan HEIGHT. Atribut LOOP dapat digunakan untuk mengatur apakah adanya perulangan / looping dalam pemutar suatu file video. Dan atribut AUTOSTART digunakan untuk mengatur apakah pemutaran suatu file video dilakukan secara otomatis atau tidak.

<HTML><HEAD>

<TITLE>Memutar Video</TITLE></HEAD><BODY>

<H1>Mencoba Video</H1><EMBED SRC="video.mpg" WIDTH="300" HEIGHT="200" LOOP="TRUE" AUTOSTART="FALSE">

</BODY></HTML>

Mengenal Tag <META>Tag <META> digunakan dalam suatu dokumen HTML untuk menyertakan informasi berkaitan dengan suatu dokumen HTML tetapi informasi ini tidak ditampilkan di layar web browser. Tag

<META> tidak ditempatkan di antata tag <BODY> dan </BODY> melainkan di tempatkan di antara tag <HEAD> dan </HEAD>.Berikut ini adalah beberapa contoh penerapan tag <META>:<META NAME=”desciption” CONTENT=”Web Berita Lokal Bandung”>

Tag <META> semacam ini digunakan untuk memberikan deskripsi mengenai suatu dokumen HTML.Tag <META> juga bisa membantu search engine / mesin pencari seperti google dalam proses pencrian dengan menyertakan kata kunci / keyword yang berhubungan dengan suatu halaman web tertentu.<META NAME=”keywords” CONTENTS=”berita, news, kejadian, kabar, bandung”>

Pada contoh tersebut kata kunci yang bisa digunakan untuk melakukan pencarian terhadap halaman web ini adalah berita, news, kejadian, kabar, dan bandung.Tag <META> juga seringkali digunakan untuk mengarahkan ke dokumen HTML yang lain atau dikenal dengan istilah redirection. Berikut ini adalah contoh penerapannya.<META HTTPEQUIV=”REFRESH” CONTENT=”3; URL=dua.html”>

Tag <META> ini akan berpindah dokumen ke dokumen dengan nama dua.html setelah selang waktu 3 detik.

nama file: satu.html<HTML>

<HEAD><TITLE>Halaman 1</TITLE><META HTTPEQUIV="REFRESH" CONTENT="3; URL=dua.html">

</HEAD><BODY>

<H1>Halaman Satu</H1>Ini adalah halaman satu dan dalam 3 detik ke depan akan berpindah ke halaman dua

</BODY></HTML>

nama file: dua.html<HTML>

<HEAD><TITLE>halaman 2</TITLE>

</HEAD><BODY>

<H1>ini halaman dua</H1></BODY>

</HTML>

Mengenal Tag <FORM>Penggunaan tag <FORM> pada dokumen HTML akan sangat erat hubungannya untuk mendukung implementasi pemrograman di sisi server / server side scripting. Salah satu contoh bahasa pemrograman web di sisi server yang banyak digunakan adalah PHP, ASP, dan JSP. Tag <FORM> memiliki tiga atribut utama, yaitu NAME untuk mengatur nama form, ACTION untuk memanggil file yang akan memproses data isian form, dan METHOD untuk menentukan metode pengiriman datanya. Berikut ini adalah contohnya:<FORM NAME=”form_nilai” ACTION=”proses.php” METHOD=”POST”>

.....</FORM>

Pada contoh tersebut terdapat sebuah form bernama form_nilai yang akan mengirimkan datanya ke file pemroses bernama proses.php dengan menggunakan metode pengiriman post.

Mengenal Tag <INPUT>Tag <INPUT> merupakan tag yang akan digunakan untuk mendukung fungsionalitas dari tag <FORM>.Secara garis besar, tag <FORM> akan digunakan untuk membentuk kerangka form dan tag <INPUT> digunakan untuk membuat jenis / komponen inputannya.Ada bermacammacam jenis inputan dan jenisjenis tersebut diatur oleh atribut TYPE pada tag <INPUT>.Beberapa jenis inputan yang bisa digunakan sebagai nilai dari atribut TYPE adalah: TEXT, SUBMIT, RESET, PASSWORD, TEXTAREA, CHECKBOX, RADIO, dan BUTTON.

Mengenal Tipe Inputan TEXTTipe inputan TEXT biasa digunakan untuk menangani inputan data berupa teks, misalnya untuk menangani data inputan nama, alamat, dan datadata lainnya.Pada tipe inputan TEXT bisa disertakan beberapa atribut tambahan, yaitu NAME untuk mengatur nama data inputannya, SIZE untuk mengatur panjang area inputannya, MAXLENGTH untuk mengatur jumlah karakter maksimum yang bisa diinputkan, dan VALUE untuk mengatur nilai inputan default.

<HTML><HEAD>

<TITLE>Ini Judul</TITLE></HEAD><BODY>

<FORM>Nama: <INPUT TYPE="TEXT" NAME="nama" SIZE="15" MAXLENGTH="15" VALUE="Mbah Boedy"><BR>Alamat: <INPUT TYPE="TEXT" NAME="alamat" SIZE="20" MAXLENGTH="20"><BR>Pekerjaan: <INPUT TYPE="TEXT" NAME="pekerjaan" SIZE="10" MAXLENGTH="10">

</FORM></BODY>

</HTML>

Untuk merapikan posisi peletakkan komponen input dapat menggunakan bantun tabel.

<HTML><HEAD>


<FORM><TABLE><TR> <TD>Nama</TD> <TD>: <INPUT TYPE="TEXT" NAME="nama" SIZE="15" MAXLENGTH="15" VALUE="Mbah Boedy"></TD></TR><TR> <TD>Alamat</TD> <TD>: <INPUT TYPE="TEXT" NAME="alamat" SIZE="20" MAXLENGTH="20"></TD></TR><TR> <TD>Pekerjaan</TD> <TD>: <INPUT TYPE="TEXT" NAME="pekerjaan" SIZE="10" MAXLENGTH="10"></TD></TR></TABLE>

</FORM></BODY>

</HTML>

Mengenal Tipe Inputan SUBMIT dan RESETTipe inputan SUBMIT digunakan sebagai triger / pemicu pengiriman datadata nilai inputan yang

terdapat pada suatu form sedangkan tipe inputan RESET digunakan untuk mengembalikan nilai pada tiap inputan ke nilai default / nilai awal.Baik tipe inputan SUBMIT maupun tipe inputan RESET keduanya memiliki atribut VALUE yang digunakan untuk mengatur label pada tombol SUBMIT atau RESET.

<HTML><HEAD>


<FORM><TABLE><TR> <TD>Nama</TD> <TD>: <INPUT TYPE="TEXT" NAME="nama" SIZE="15" MAXLENGTH="15" VALUE="Mbah Boedy"></TD></TR><TR> <TD>Alamat</TD> <TD>: <INPUT TYPE="TEXT" NAME="alamat" SIZE="20" MAXLENGTH="20"></TD></TR><TR> <TD>Pekerjaan</TD> <TD>: <INPUT TYPE="TEXT" NAME="pekerjaan" SIZE="10" MAXLENGTH="10"></TD></TR></TABLE><INPUT TYPE="SUBMIT" VALUE="kirim"><INPUT TYPE="RESET" VALUE="hapus">

</FORM></BODY>

</HTML>

Mengenal Tipe Inputan PASSWORDTipe inputan PASSWORD digunakan untuk menangani inputan berupa kata sandi / kode rahasia. Tipe inputan ini akan menyembunyikan setiap karakter yang diinputkan menjadi karakter *.

<HTML><HEAD>


<FORM><TABLE><TR>

<TD>username</TD><TD><INPUT TYPE="TEXT" NAME="username"></TD>

</TR><TR>

<TD>password</TD><TD><INPUT TYPE="PASSWORD" NAME="password"></TD>

</TR></TABLE><INPUT TYPE="SUBMIT" VALUE="login">

</FORM></BODY>

</HTML>

Mengenal Tipe Inputan CHECKBOXTipe inputan CHECKBOX adalah tipe inputan berupa daftar pilihan yang apabila dipilih diberi tanda centang. Umumnya tipe inputan CHECKBOX digunakan pada daftar pilihan yang bisa dipilih lebih dari satu, misalnya hoby, makanan favorit, dan datadata sejenis lainnya yang memungkinkan untuk dipilih lebih dari satu.Tipe inputan CHECKBOX memiliki dua atribut utama, yaitu atribut NAME untuk membari nama inputan dan atribut CHECKED untuk menjadikan suatu pilihan inputan dicentang secara default.<HTML>

<HEAD><TITLE>Ini Judul</TITLE>

</HEAD><BODY>

<FORM>Daftar Hobi <BR><INPUT TYPE="CHECKBOX" NAME="renang">Renang<BR><INPUT TYPE="CHECKBOX" NAME="baca" CHECKED>Membaca<BR><INPUT TYPE="CHECKBOX" NAME="mancing">Memancing<BR><INPUT TYPE="CHECKBOX" NAME="nonton">Nonton Film<BR>

</FORM></BODY>

</HTML>

Mengenal Tipe Inputan RADIOBerbeda dengan tipe inputan CHECKBOX, tipe inputan RADIO digunakan untuk daftar pilihan yang sifatnya hanya boleh dipilih salah satu saja, misalnya daftar pilihan jenis kelamin, status menikah / belum menikah, dan pilihanpilihan sejenis lainnya.Tipe inputan RADIO memiliki tiga atribut utama, yaitu atribut NAME untuk menentukan kategori pilihan VALUE untuk menentukan nilai yang akan dikirimkan apabila suatu pilihan tertentu dipilih, dan atribut CHECKED untuk menjadikan suatu pilihan inputan dijadikan pilihan default.

<HTML><HEAD>


<FORM>Jenis Kelamin:<BR><INPUT TYPE="RADIO" NAME="kelamin" VALUE="pria" CHECKED>LakiLaki<BR><INPUT TYPE="RADIO" NAME="kelamin" VALUE="wanita">Perempuan<BR><BR>Status Pernikahan<BR><INPUT TYPE="RADIO" NAME="menikah" VALUE="sudah">Menikah<BR><INPUT TYPE="RADIO" NAME="menikah" VALUE="belum">Belum Menikah

</FORM></BODY>

</HTML>

Mengenal Tag <TEXTAREA>Selain menggunakan tag <INPUT>, suatu form juga bisa memiliki beberapa tipe inputan yang lain dan salah satunya adalah dengan menggunakan tag <TEXTAREA>.Tag <TEXTAREA> digunakan untuk menampung suatu inputan berupa teks mirip seperti tipe inputan TEXT, hanya saja TEXTAREA mampu menampung inputan teks yang ukurannya lebih panjang dibanding dengan tipe inputan TEXT. Tag <TEXTAREA> sering digunakan untuk menampung inputan berupa komentar karena kemampuannya yang bisa menampung inputan tesk dengan ukuran cukup panjang.Tag ini memiliki beberapa atribut penting, diantaranya adalah atribut NAME digunakan untuk memberi nama suatu inputan, atribut ROWS dan COLS untuk menentukan panjang baris dan kolom, dan atribut WRAP yang menjadikan sejumlah teks yang diinputkan akan otomatis berpindah baris bila panjangnya sudah melebihi panjang TEXTAREAnya.

<HTML><HEAD>


<FORM><TABLE><TR>

<TD>Nama</TD><TD><INPUT TYPE="TEXT" NAME="nama"></TD>

</TR><TR>

<TD>Komentar</TD><TD><TEXTAREA NAME="komentar" COLS="20" ROWS="5" WRAP></TEXTAREA></TD>

</TR></TABLE>

</FORM></BODY>

</HTML>

Mengenal Tag <SELECT>Tag <SELECT> pada dokumen HTML juga digunakan untuk menangani inputan. Tipe inputan yang dihasilkan oleh tag ini berupa daftar pilihan combo atau dikenal dengan istilah combo box. Tag <SELECT> memiliki atribut NAME yang digunakan untuk menentukan nama inputan. Itemitem pada daftar pilihan dari tag <SELECT> akan diatur oleh tag <OPTION>.Tag <OPTION> akan memiliki dua buah atribut utama yaitu atribut VALUE yang digunakan untuk mengatur nilai dari suatu pilihan dan atribut SELECTED untuk menentukan suatu pilihan sebagai pilihan default.

<HTML><HEAD>


<FORM>DIstro Linux Favorit: <BR><SELECT NAME="distro">

<OPTION VALUE="fedora">Fedora Core<OPTION VALUE="suse">Open SuSe<OPTION VALUE="ubuntu" SELECTED>Ubuntu<OPTION VALUE="debian">Debian

</SELECT></FORM>

</BODY></HTML>

Secara default tag <SELECT> akan menghasilkan sebuah daftar inputan berupa combo box di mana hanya memungkinkan untuk memilih satu item dari sejumlah item yang ditampilkan oleh daftar inputan. Intuk menjadikan daftar inputan ini mampu menangani lebih dari satu pilihan inputan dapat dilakukan dengan menambahkan atribut MULTIPLE pada tag <SELECT>. Dengan menambahkan atribut MULTIPLE pada tag <SELECT> akan mengubah tipe daftar pilihan yang dihasilkan dari bentuk combo box menjadi bentuk list box.

<HTML><HEAD>


<FORM>DIstro Linux Favorit: <BR><SELECT NAME="distro" MULTIPLE>

<OPTION VALUE="fedora">Fedora Core<OPTION VALUE="suse">Open SuSe<OPTION VALUE="ubuntu" SELECTED>Ubuntu<OPTION VALUE="debian">Debian

</SELECT></FORM>

</BODY></HTML>

Modul Praktikum HTML Maranatha

Documents

Transcript of Modul Praktikum HTML Maranatha