namanya HTML Hypertext Markup Language. HTML adalah bahasa standar yang digunakan untuk menyusunmembangun suatu halaman
web.P P ALIGN=justify Meskipun telah muncul software-software yang dapat
digunakan untuk membangun suatu halaman web tanpa susah-susah memperhatikan struktur HTML-nya, tidak ada salahnya kalau HTML itu
sendiri dipelajari.P BODY
HTML
i. Jenis dan ukuran huruf
Fungsi : Untuk mengubah jenis huruf dan ukuran huruf Sintaks : FONT FACE=”jenis_huruf” SIZE=”ukuran_huruf” ... FONT
Jenis_huruf : Times new roman, arial, verdana, dll Ukuran_huruf : 1, 2, 3, 4, ...
Contoh : HTML
HEAD TITLEJenis dan Ukuran FontasiTITLE
HEAD BODY
FONT FACE=”Verdana” SIZE=”1” Teks ini ditulis dengan jenis huruf Verdana dan ukuran 1 pt FONTBRBR
This page was created using BCL ALLPDF Converter trial software.
To purchase, go to http:store.bcltechnologies.comproductcartpcinstPrd.asp?idproduct=1
FONT FACE=”Arial” SIZE=”3” Teks ini ditulis dengan jenis huruf Arial dan ukuran 3 pt FONT
BODY HTML
j. Superscripts
Fungsi : membuat teks naik indeks atas Sintaks : SUP ... SUP
Contoh : HTML
HEAD TITLESuperscriptsTITLE
HEAD BODY
Persamaan xSUP2SUP+2x-4=0 adalah salah satu bentuk persamaan kuadrat
BODY HTML
k. Subscripts
Fungsi : membuat teks turun indeks bawah Sintaks : SUB ... SUB
Contoh : HTML
HEAD
This page was created using BCL ALLPDF Converter trial software.
To purchase, go to http:store.bcltechnologies.comproductcartpcinstPrd.asp?idproduct=1
TITLESubscriptsTITLE HEAD
BODY Rumus kimia asam sulfat adalah HSUB2SUBSOSUB4SUB
BODY HTML
l. Listdaftar
Fungsi : membuat daftarlist Sintaks :
Untuk daftar yang memperhatikan urutan Ordered List OL
LI item 1 LI LI item 2 LI
LI item 3 LI LI item 4 LI
OL Untuk daftar yang tidak memperhatikan urutan Unordered List
UL LI item 1 LI
LI item 2 LI LI item 3 LI
LI item 4 LI UL
This page was created using BCL ALLPDF Converter trial software.
To purchase, go to http:store.bcltechnologies.comproductcartpcinstPrd.asp?idproduct=1
Contoh : HTML
HEADTITLEDaftarListTITLEHEAD BODY
Contoh list yang urut: BR OL
LIItem 1 LI LIItem 2 LI
LIItem 3 LI LIItem 4 LI
OL BRBR
Contoh list yang tak urut: BR UL
LIItem 1 LI LIItem 2 LI
LIItem 3 LI LIItem 4 LI
UL BODY
HTML
This page was created using BCL ALLPDF Converter trial software.
To purchase, go to http:store.bcltechnologies.comproductcartpcinstPrd.asp?idproduct=1
3. Membuat Tabel
Di dalam sebuah tabel, terdapat elemen-elemen yang terdiri dari baris dan kolom. Jadi ketika anda ingin membuat tabel, tentukan dulu jumlah baris dan
kolomnya. Berikut contoh tag HTML apabila diinginkan membuat tabel dengan 2 baris dan 1
kolom. TABLE
TRTDBaris ke-1TDTR TRTDBaris ke-2TDTR
TABLE Perhatikan contoh di atas, setiap kali baris baru ditandai dengan TR…TR.
Di dalam TR…TR terdapat TD…TD yang menandai adanya kolom.
Seandainya dalam 1 baris terdapat 2 kolom berarti tag HTMLnya menjadi TRTDKolom ke-1TDTDKolom ke-2TDTR
Berarti apabila diinginkan tabel dengan 3 baris dan 2 kolom, tag HTML nya adalah
TABLE TRTDBaris I, Kolom ITDTDBaris I, Kolom IITDTR
TRTDBaris II, Kolom ITDTDBaris II, Kolom IITDTR TRTDBaris III, Kolom ITDTDBaris III, Kolom IITDTR
TABLE
This page was created using BCL ALLPDF Converter trial software.
To purchase, go to http:store.bcltechnologies.comproductcartpcinstPrd.asp?idproduct=1
Apabila tag tersebut disisipkan dalam BODY…BODY maka akan tampil tabel pada halaman web, tapi tanpa garis tepiborder. Untuk menampilkan
bordernya, sisipkan BORDER = ukuran pada TABLE, dengan ukuran = 0, 1, 2, …
Apabila ukuran = 0, maka tanpa border. Dan semakin besar nilai ukuran maka semakin tebal bordernya.
Contoh: TABLE BORDER=1
TRTDBaris I, Kolom ITDTDBaris I, Kolom IITDTR TRTDBaris II, Kolom ITDTDBaris II, Kolom IITDTR
TRTDBaris III, Kolom ITDTDBaris III, Kolom IITDTR TABLE
Berikut ini beberapa atribut yang bisa disisipkan pada TABLE
Atribut Fungsi
WIDTH = panjang Mengatur lebar tabel
BGCOLOR = warna Memberi efek warna latar pada
tabel ALIGN = [left | center | right]
Perataan tabel BACKGROUND = url
Memberi efek
backgroud menggunakan gambar
Tabel 2.1. Atribut yang disisipkan pada TABLE
NB: 1
Untuk nilai variabel panjang di atas, dapat berupa artinya apabila dituliskan TABLE WIDTH=100 maka lebar tabel adalah sepanjang
This page was created using BCL ALLPDF Converter trial software.
To purchase, go to http:store.bcltechnologies.comproductcartpcinstPrd.asp?idproduct=1
horizontal halaman web. Berarti apabila diinginkan lebar tabelnya separo halaman web, diberi nilai 50 dst.
2 Selain dapat pula bernilai sejumlah pixelnya. Untuk sepanjang horizontal
halaman web, jumlah pixelnya adalah 800. Dengan perbandingan tersebut, Anda diharapkan bisa membuat perbandingan sendiri jumlah pixel untuk
menentukan lebar tabel. 3
ALIGN digunakan untuk meletakkan tabel apakah di tengah, di kiri atau di kanan.
4 Untuk nilai variabel warna adalah sama seperti yang digunakan pada atribut
COLOR pada FONT.
4. Link
Link adalah suatu metode dalam perancangan website untuk menghu- bungkan file yang satu dengan file yang lain, atau menghubungkan halaman
dengan gambar yang berada pada lokasi yang berbeda. Sintaks :
A HREF=lokasi halaman atau URL TARGET=_BLANKNama LinkA Contoh:
A HREF=index2.htmKlik di siniA Contoh di atas adalah membuat link ke halaman index2.htm. Artinya ketika
diklik Klik di sini selanjutnya akan tampil isi dari halaman index2.htm berada dalam 1 direktori yang sama dengan file yang berisi link tersebut.
A HREF=http:www.yahoo.com TARGET=_BLANKwww.yahoo.comA Contoh di atas adalah untuk membuat link ke situs yahoo.com
This page was created using BCL ALLPDF Converter trial software.
To purchase, go to http:store.bcltechnologies.comproductcartpcinstPrd.asp?idproduct=1
5. Menampilkan Gambar
Untuk memasukkaninsert gambar ke dalam halaman web digunakan sintaks IMG SRC=lokasi gambar
Keterangan: lokasi gambar berisi letak file gambar, bisa berupa direktori maupun URL dan
nama filenya. Contoh :
IMG SRC=gambar1.jpg Tag HTML di atas adalah untuk menyisipkan gambar dengan nama file
gambar1.jpg ke dalam halaman web. Adapun file gambar1.jpg berada dalam 1 direktori yang sama
dengan halaman yang ada tag tersebut. IMG SRC=http:myweb.comimagegambar2.gif
Tag HTML di atas untuk menyisipkan file gambar dengan letaknya seperti yang ditulis dalam URL. Berikut beberapa atribut yang dapat disisipkan pada IMG
Atribut Fungsi
BORDER = ukuran Memberi bordergaris tepi gambar
WIDTH = ukuran Menyatakan ukuran lebar gambar
HEIGHT = ukuran Menyatakan ukuran tinggi gambar
ALIGN = [left | center | right] Mengatur letak gambar
Tabel 2.2. Atribut yang dapat disisipkan pada IMG NB:
Nilai ukuran pada BORDER = 0, 1, 2, … Apabila BORDER = 0 maka border tidak muncul. Nilai ukuran pada WIDTH
dan HEIGHT adalah ukuran pixel
This page was created using BCL ALLPDF Converter trial software.
To purchase, go to http:store.bcltechnologies.comproductcartpcinstPrd.asp?idproduct=1
Contoh IMG
SRC=gambar2.gif BORDER=1
WIDTH=200 HEIGHT=100
ALIGN=LEFT Tag di atas untuk menyisipkan gambar dengan nama file gambar gambar2.gif,
diberi border, lebar dan tinggi adalah 200 dan 100 pixel, serta letak gambar berada di sebelah kiri halaman.
2.3. Pembelajaran Berbasis TIK
