Paragraf (P) List Item(LI)
List item di gunakan untuk mengelompokkan data baik berurutan (ordered
list) maupun yang tidak berurutan (unordered list).
Ada dua macam list yang bisa anda tambahkan ke document
HTML: 1. Unordered List (Bullet) : 2. Ordered List (Numbering)
Contoh :
Tag Attribute Value
Description <UL> TYPE
SQUARE Bullet Kotak DISC
Bullet Titik CIRCLE Bullet Lingkaran
Tag Attribute Value
Description <OL> TYPE I
i Upper Roman Lower Roman
A a Upercase Lowercase
<OL> START n
Begin Number
Definition List Definition
List terdiri diapit oleh tag <DL> … </DL> dan <DT> tag
menentukan definition term serta <DD> tag menentukan definition itu
sendiri.
Horizontal Rules(HR)
Horizontal Rule tag digunakan untuk menggambar garis horizontal dalam
document HTML. Attribute Description
Position menetukan posisi dari
HR, dengan value : canter | right |
left. Width Untuk menentukan panjang HR default 100% Size
Untuk menentukan tebal dari HR dalam pixel Noshad
Efek bayangan.
D.3. Pemformatan Page Break
Tag <BR> di gunakan untuk memulai baris baru pada document HTML,
tag ini fungsinya mirip dengan carriage return.
BENGKEL INTERNET PENS-ITS
3
Font Dengan tag
<FONT> anda bisa menentukan format tampilan font dalam document HTML
seperti color, size, style dan lainya.
Contoh: Attribute Description
color Untuk menentukan warna
font, anda bisa menggunakan nama font
atau hexadecimal (#000000 -
#ffffff) size Untuk menentukan ukuran dari font 1 - 7 face
Untuk menentukan jenis font biasanya dalam satu list ada
beberapa font dan akan di baca mulai dari yang
paling kiri.
Color Color merupakan
attribute yang bisa anda tambahkan pada beberapa element seperti body, font,
link dan lainya. Color di bagi dalam tiga ketegori warna primer yaitu red,
green dan blue. Masing-masing color
didefinisikan dalam dua digit hexadecimal number.
#RRGGBB
Hexadecimal
Color #FF0000 Red
#00FF00 Green #0000FF
Blue #000000 Black
#FFFFFF White
Alignment Align
attribute digunakan untuk menentukan perataan object dalam document HTML baik
berupa text, object, image, paragraph, division dan lain-lain. Value
Description Left Rata kiri
Right Rata kanan Center
Rata tengah Justify Rata kanan kiri
Format text Physical Formatting Tag
Description <B> ... </B> Bold text
<I> ... </I> Italic
text <U> ... </U> Underline Text <BIG> ... </BIG> Untuk ukuran yang lebih besar dari
normal <SMALL> ...
</SMALL> Untuk ukuran yang lebih
kecil dari normal <STRIKE> ...
</STRIKE> Untuk memberi garis di
tengah text
BENGKEL INTERNET PENS-ITS
4
<SUP> ... </SUP>
Superscript text <SUB> ...
</SUB> Subscript text <CENTER> ... </CENTER> Center
document
Logical Formatting
Tag Description <EM> ... </EM> Text miring / <I> <STRONG> ... </STRONG> Text tebal / <B> <DEL> ... </DEL> Mencoret text / <STRIKE> <INS> ... </INS> Underline text / <U>
Preformatted text Tag
PRE di gunakan untuk menampilkan text sesuai dengan format aslinya.
Hyperlink Link Address
Absolute Address - merupakan full internet address (URL) yang meliputi
protocol, network location dan path dan nama file. Contoh:
http ://www.yahoo.com/index.html
Relatif Address - URL yang tidak menyebutkan protocol dan network locationya
(hanya path dan nama filenya).
Anchor Anchor tag <A> untuk
menentukan hyperlink dalam document HTML. HREF property digunakan untuk
menentukan tujuan dari hyperlink tersebut.
E. TABLE Membuat table
Tag <TABLE> digunaka untuk membuat table dalam document HTML ,
bagian pokok dari table adalah cell yang didefinisikan dengan menggunakan tag
<TD>. Berikutnya kalo anda ingin
membuat beberapa baris cell dalam table gunakan tag <TR>.
Menambahkan Heading cell
Untuk menambahkan heading pada table tambahkan tag <TH> pada table
yang sudah di buat.
Pemformatan table
Untuk memformat perataan text di dalam table anda bisa gunakan attribute
Align dan Valign (vertical Alignment)
Attribute Value Align
Center | justify | left | right
Valign BASELINE | TOP | BOTTOM |
MIDDLE
BENGKEL INTERNET PENS-ITS
5
Merge cell Tag
<TD> memiliki atribut colspan untuk merge column dan rowspan untuk merge
baris.
F. IMAGE A. Format Image
Ada banyak format image, tapi ada tiga jenis format yang paling sering
digunakan : 1. GIF (Graphical
Interchange Format) (.GIF) 2. JPEG
(Joint Photographic Expert Image) (.JPG) 3. PNG (Portable Network Graphics)
<IMG SRC=”URL”> Attribute Value
Description Align Center | justify | left | right | > Top, bottom, middle digunakan untuk Baseline | top | bottom | menentukan posisi image terhadap text middle
> Left, right, center untuk menentukan posisi image di document
G. FORM Kegunaan Form
Berikut ini beberapa contoh kegunaan Form dalam web: 1. memperoleh data-data user baik nama,
alamat dan data lainnya 2. memperoleh
informasi pembelian secara online
3. memperoleh feedback dari user
mengenai website anda.
Form Element Tag
<FORM> digunakan untuk membuat form dalam document HTML. Attribute
Description ACCEPT Mendefinisikan MIME yang di izinkan oleh
server yang memuat script untuk memproses
form. Syntax: ACCEPT=”Internet Media
Type” METHOD Menentukan bagaimana data akan di kirim ke
server. GET – data akan di kirim dengan menggunakan query string pada URL. POST – data akan di kirim ke server sebagai
block data ke script. Syntax:
METHOD=”POST|GET” ACTION
Menentukan lokasi dari script yang akan memproses data dari form
Syntax: ACTION=”URL”
BENGKEL INTERNET PENS-ITS
6
LATIHAN – LATIHAN : A. DASAR-DASAR HTML 1. Penggunaan syntak
HTML, bagian-bagian HTML, penggunaan komentar dan tag <BR> untuk ganti
baris.
2. Menggunakan tag <P> untuk membuat paragraph; tag
judul <H1> s/d <H6> untuk pembesaran huruf.
3. Membuat garis horizontal <HR>
<HTML> <HEAD> <TITLE>Latihan
HTML</TITLE> </HEAD> <!-- Ini merupakan suatu komentar -->
<BODY> Selamat Belajar HTML<BR> Semoga Sukses ! </BODY>
</HTML>
<HTML> <HEAD> <TITLE>Contoh Pengaturan
Judul</TITLE> </HEAD> <BODY> <H1 ALIGN = “CENTER”>
Pesona Tanaman Hias </H1><P> Keindahan tanaman hias<BR>
membawa suatu pesona tersendiri<BR> Warna-warni bunga </BODY>
</HTML>
<HTML> <HEAD> <TITLE>Atribut NOSHADE pada
Tag HR</TITLE> </HEAD> <BODY> <H1>KEBUN
PESONA</H1> <HR SIZE = "10" NOSHADE> Jl. Solo Km
14<BR> Surabaya <BR> Indonesia<BR> </BODY>
</HTML>
BENGKEL INTERNET PENS-ITS
7
4. Menggunakan tag <DIV> untuk mengelompokkan sejumlah
baris teks yang memiliki karakteristik
yang sama.
B. PENGATURAN TEKS 1. Penggunaan <PRE> untuk
menampilkan teks apa adanya.
Coba hilangkan tag
<PRE> dan lihat apa perbedaanya. 2. Pengaturan Font : Face (untuk jenis
Font), Size (untuk ukuran Font), Color (untuk warna)
<HTML> <HEAD> <TITLE>Tag DIV</TITLE>
</HEAD> <BODY> <DIV ALIGN = "RIGHT">
<H1><U>PENS ITS</U></H1> <H2>Jl. Raya
ITS</H2> <H2>Surabaya</H2> </DIV> <HR>
</BODY> </HTML>
<HTML> <HEAD> <TITLE>Praformat
</TITLE> </HEAD> <BODY> <H2>Daftar Harga
Keladi:</H2> <PRE>
Red Flash.........35.000
Red Fire..........60.000
Fannie Munson.....60.000 </PRE> Harga sewaktu-waktu bisa berubah.
</BODY> </HTML>
<HTML> <HEAD> <TITLE>Jenis
Font</TITLE> </HEAD> <BODY> Normal: 012345ABCD<BR>
<FONT COLOR="blue" FACE = "Arial">Arial:
012345ABCD</FONT> <BR> <FONT COLOR="green" FACE =
"Courier" SIZE="5"> Courier: 012345ABCD</FONT>
<BR> </BODY> </HTML>
BENGKEL INTERNET PENS-ITS
8
3. Pengaturan warna background : BGCOLOR
C. MENAMPILKAN DAFTAR ITEM (LIST) 1. Penggunaan tag <UL> untuk daftar
list yang tidak diberi nomor; tag <LI> untuk daftar item yang diberi
bulatan.
2. Penggunaan tag
<OL> untuk menampilkan daftar item dengan nomor urut.
<HTML> <HEAD> <TITLE>Warna - Bagian
2</TITLE> </HEAD> <BODY BGCOLOR = "black" TEXT =
"gray"> Normal<BR> <FONT COLOR =
"blue">Warna Biru</FONT><BR> <FONT COLOR = "green">Warna
Hijau</FONT><BR> <FONT COLOR = "red">Warna
Merah</FONT><BR> <FONT COLOR = "yellow">Warna
kuning</FONT><BR> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Contoh Pemakaian Tag
UL dan LI</TITLE> </HEAD> <BODY> <H2>Daftar Jurusan di
PENS ITS :</H2> <UL> <LI>Telekomunikasi <BR> <LI>Teknologi
Informasi <BR>
<LI>Elektronika <BR>
<LI>Elektro Industri <BR>
</UL> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Tag OL dengan
TYPE</TITLE> </HEAD> <BODY> <B>Dengan huruf
kapital:</B> <OL TYPE = "A"> <LI>Yogya<BR>
<LI>Solo<BR> </OL> <HR> <B>Dengan angka
romawi:</B> <OL TYPE = "i"> <LI>Yogya<BR>
<LI>Magelang<BR> </OL> </BODY> </HTML>
BENGKEL INTERNET PENS-ITS
9
3. Penggunaan tag
<DL>, <DT>, <DD> untuk menampilkan daftar khusus dengan
tampilan menjorok ke kanan.
D. MENAMPILKAN GAMBAR 1. Penggunaan <BODY BACKGROUND>
untuk menampilkan background dan <IMG SRC> untuk menampilkan gambar.
Jika letak file
gambar dalam folder yang sama dengan file html, bisa langsung dituliskan nama
filenya, tapi bila berbeda perhatikan cara diatas (bila file html diatas
disimpan dalam folder /html, maka gunung.jpg akan terletak dalam folder
/html/citra/)
2. Pengaturan ukuran gambar dengan atribut HEIGHT dan WEIGHT, serta penggunaan atribut
BORDER untuk memberi bingkai gambar.
<HTML> <HEAD> <TITLE>Daftar
Definisi</TITLE> </HEAD> <BODY> <B>Kamus Teknologi
Informasi:</B> <DL> <DT>HTML</DT> <DD>Bahasa yang
digunakan untuk menyusun Web</DD> <DT>HTTP</DT>
<DD>Protokol yang dipakai untuk mentransfer HTML</DD> </DL>
</BODY> </HTML>
<HTML> <HEAD> <TITLE>Menampilkan
Gambar</TITLE> </HEAD> <BODY BACKGROUND =
"../citra/gunung.jpg"> Gambar Komputer terbaru <IMG SRC = "komputer.gif" ALIGN
= "MIDDLE"> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Ukuran
Gambar</TITLE> </HEAD> <BODY> <IMG SRC =
"../citra/komputer.jpg"
HEIGHT = "150" WIDTH = "150"
BORDER="2"> <BR> <IMG SRC =
"../citra/komputer.jpg"
HEIGHT = "50" WIDTH = "50" BORDER="3">
</BODY> </HTML>
BENGKEL INTERNET PENS-ITS
10
E. PENGGUNAAN TABEL 1. Tag-tag yang digunakan :
<TABLE> untuk pembuatan tabel, dengan atribut BORDER utk memberi bingkai.
<CAPTION> menentukan judul tabel <TR> membuat baris dalam tabel <TH> membuat judul kolom <TD> membuat sebuah sel data
2. Penggabungan sel dengan tag <ROWSPAN> dan
<COLSPAN> a. Atribut ROWSPAN ditempatkan pada tag <TD>
b. Atribut COLSPAN bisa ditempatkan pada tag <TD> atau
<TH>
<HTML> <HEAD> <TITLE>Tabel dengan
Garis</TITLE> </HEAD> <BODY> <TABLE BORDER =
"1"> <CAPTION>Daftar Harga Keladi</CAPTION>
<TR><TH>Nama</TH><TH>Harga</TH></TR>
<TR><TD>Red Flash</TD><TD>35.000</TD></TR>
<TR><TD>Red Fire</TD><TD>60.000</TD></TR>
<TR><TD>Fannie
Munson</TD><TD>60.000</TD></TR> </TABLE>
</BODY> </HTML>
<HTML> <HEAD> <TITLE>Penggunaan
ROWSPAN</TITLE> </HEAD> <BODY> <TABLE BORDER =
"1"> <CAPTION>Daftar Wilayah dan Kota</CAPTION>
<TR> <TD ROWSPAN = "3">Jawa Tengah</TD>
<TD>Semarang</TD> </TR>
<TR><TD>Kudus</TD></TR>
<TR><TD>Solo</TD></TR> </TABLE> </BODY>
</HTML>
<HTML> <HEAD> <TITLE>Penggunaan
COLSPAN</TITLE> </HEAD> <BODY> <TABLE BORDER =
"1"> <CAPTION>Daftar Target</CAPTION> <TR>
<TH COLSPAN = "2">Area: Jawa Tengah</TH> </TR>
<TR><TD>Semarang</TD><TD>15.000</TD></TR>
<TR><TD>Kudus</TD><TD>11.000</TD></TR>
</TABLE> </BODY> </HTML>
BENGKEL INTERNET PENS-ITS
11
3. Pengaturan jarak dalam tabel : CELLSPACING mengatur jarak bagian sel thd
tepi dalam bingkai tabel. CELLPADDING
mengatur jarak teks terhadap tepi kiri.
F. PEMBUATAN LINK 1. Penggunaan tag <A HREF>
Buatlah file halx.htm, sehingga ketika diklik pada Halaman X
akan menuju file yang dimaksud.
<HTML> <HEAD> <TITLE>Tombol dengan
Tabel</TITLE> </HEAD> <BODY> <TABLE BORDER = "5"
CELLSPACING = "5" CELLPADDING
= "5" BGCOLOR = "green"> <TR><TD> <FONT
COLOR = "red"><B>e-mail</B></FONT>
</TD></TR> </TABLE> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Halaman
Utama</TITLE> </HEAD> <BODY> <H1>Halaman
Utama</H1> Silakan klik pada link-link berikut:<BR> <A HREF =
"halx.htm">Halaman X</A><BR> <A HREF = "http://lecturer.eepis-its.edu/~zenhadi">Homepage
saya</A><BR> <A HREF = "computer.jpg"><IMG SRC =
“computer.jpg> Membuat link dengan gambar </A><BR> </BODY>
</HTML>
BENGKEL INTERNET PENS-ITS
12
2. Menggunakan bookmark pada suatu halaman web yang
panjang.
Perkecillah halaman web browser anda (IE) untuk melihat
efeknya.
G. PENGGUNAAN FORM 1. Input data dengan input
<HTML> <HEAD>
<TITLE>Bookmark</TITLE> </HEAD> <BODY> <CENTER>
<H1>BUKU</H1> <B>Daftar Isi:</B><BR> <A HREF =
"#bab1">Bab 1</A><BR> <A HREF =
"#bab2">Bab 2</A><BR> <HR> <A NAME =
"#bab1"> <H2>BAB 1</H2> ...<BR> ...<BR>
<HR> <A NAME = "#bab2"> <H2>BAB 2</H2>
...<BR> ...<BR> <HR> </CENTER> </BODY>
</HTML>
<HTML> <HEAD> <TITLE>Contoh Penggunaan
Formulir</TITLE> </HEAD> <BODY> <FORM ACTION =
"info.htm" METHOD = "POST"> Nama :
<INPUT TYPE = "TEXT" NAME = "nama" SIZE =
"20" MAXLENGTH =
"20"> <BR> Hobby :
<INPUT TYPE = "TEXT" NAME = "hobby" SIZE =
"25" MAXLENGTH =
"40"> <BR> <INPUT TYPE = "SUBMIT" VALUE =
"Kirim"> <INPUT TYPE =
"RESET" VALUE =
"Kosongkan"> </FORM> </BODY> </HTML>
BENGKEL INTERNET PENS-ITS
13
File info.htm yang dituju oleh web diatas.
2. Penggunaan tipe checkbox
3. Penggunaan tombol radio dan komentar
<HTML> <HEAD> <TITLE></TITLE>
</HEAD> <BODY> Info </BODY> </HTML>
<HTML> <HEAD> <TITLE>Contoh Penggunaan
Formulir</TITLE> </HEAD> <BODY> <FORM> Buah yang Anda sukai:<BR> <INPUT TYPE = "CHECKBOX" NAME = "anggur"
CHECKED>Anggur<BR> <INPUT
TYPE = "CHECKBOX" NAME =
"jeruk">Jeruk<BR>
<INPUT TYPE = "CHECKBOX"
NAME = "melon">Melon<BR> </FORM> </BODY>
</HTML>
<HTML> <HEAD> <TITLE>Contoh Penggunaan
Formulir</TITLE> </HEAD> <BODY> <FORM> Jenis Kelamin:<BR> <INPUT TYPE = "RADIO" NAME = "sex"
CHECKED>Pria<BR> <INPUT
TYPE = "RADIO" NAME
= "sex">Wanita<BR>
<BR> Komentar
Anda:<BR> <TEXTAREA NAME =
"komentar" ROWS =
"5" COLS = "40" WRAP>
</TEXTAREA>
<BR>
</FORM> </BODY> </HTML>
BENGKEL INTERNET PENS-ITS
14
4. Pemilihan dengan select
Sekarang, ubahlah baris select diatas dengan : <SELECT
NAME=”olahraga” SIZE=”3”>, perhatikan perbedaannya dengan yang diatas.
H. PENGGUNAAN TAG META Ditempatkan dalam bagian header, dan
biasanya diletakkan setelah </TITLE>. Digunakan untuk menyimpan sejumlah
informasi. Contoh : 1. Jika anda membuat
dokumen HTML melalui FrontPage 2000 akan muncul tag meta sebagai berikut : <META NAME=”Generator” CONTENT=”Microsoft
FrontPage 4.0”>
2. Agar halaman web
yang dibuat disertakan ketika mesin pencari web (mbah Google) melakukan
pencarian, gunakan atribut keywords, semakin banyak keywords yang dimasukkan,
akan semakin besar halaman web disebutkan dalam hasil pencarian.
<META
NAME=”keywords” CONTENTS=”teknologi, komputer, telekomunikasi”>
3. Mengarahkan ke halaman lain
Buatlah file baru.htm
<HTML> <HEAD> <TITLE>Contoh SELECT - Model
Drop Down</TITLE> </HEAD> <BODY> <FORM> Olahraga yang paling Anda
sukai:<BR> <SELECT NAME =
"olahraga"> <OPTION
VALUE = "Sepakbola" SELECTED>Sepak Bola <OPTION VALUE =
"Bulutangkis">Bulutangkis
<OPTION VALUE = "Tenismeja">Tenis Meja <OPTION VALUE =
"Basket">Basket
<OPTION VALUE = "Lain-lain">Lain-lain </SELECT> <BR> </FORM> </BODY>
</HTML>
<HTML> <HEAD> <TITLE>Pengalihan
Halaman</TITLE> <META HTTP-EQUIV = "REFRESH" CONTENT = "5; URL =
baru.htm"> </HEAD> <BODY> Halaman web kami sudah dipindah. Anda akan dipindahkan ke halaman tersebut
dalam waktu 5 detik. </BODY> </HTML>
<HTML> <HEAD> <TITLE>Halaman
Baru</TITLE> </HEAD> <BODY> Anda berada pada halaman baru
kami. </BODY> </HTML>
Tidak ada komentar:
Posting Komentar