HTML
Tingkat DASAR
Dasar
dari semua pemrograman web adalah pemrograman HTML, sehingga dikatakan bahwa
tidak akan dapat membangun suatu gedung tanpa ada fondasi yang mendasari dari
gedung tersebut. Apapun bagus dan kuatnya gedung tersebut bila tanpa fondasi
maka tidak akan dapat bertahan lama. Dalam buku ini semua contoh pemrograman
dicoba pada browser MSIE akan tetapi tidak menutup kemungkinan untuk
menggunakan browser yang lainnya seperti Netscape Communicator dan lainnya.
2.1 Format Penulisan HTML
Untuk memulai pembuatan halaman HTML maka dapat
dimulai dengan menyiapkan editor yang akan digunakan, misalkan menggunakan
EditPlus atau Notepad, yang dilakukan disini adalah menggunakan EditPlus karena
mempunyai fasilitas yang mendukung guna pembuatan HTML maupun PHP nantinya.
Format halaman HTML adalah terdiri dari dua bagian
yaitu bagian Header dan bagian Body, yang semuanya itu dibuka dan ditutup
dengan <tag>. Seperti tag <html> adalah digunakan untuk tanda awal
dari suatu halaman HTML, sedangkan tag </html> (diawali tanda slash)
digunakan untuk tanda akhir dari suatu halaman HTML. Tag-tag tersebut dapat
ditulis dengan huruf kecil maupun huruf besar, karena HTML tidak mengenal case
sensitive (membedakan huruf kecil dan besar). Berikut ini diberikan contoh
format standar dari penulisan HTML:
|
<html>
<head>
<title>
Judul
ditampilkan pada baris teratas browser
</title>
</head>
<body>
<!
. . . ISI
dari HTML . . . >
</body>
</html>
|
Suatu
tampilan browser dari halaman web biasanya menggunakan judul (title) yang
digunakan untuk menamakan suatu halaman web dan untuk memberikan nama pada saat
suatu halaman web akan disimpan atau didata pada menu browser (menu Favorite).
Judul ini akan ditampilkan pada bagian kiri atas dari suatu browser seperti
tampilan Gambar 2.2 diatas. Untuk memberikan nama maka digunakan tag
<title> yang didahului dengan tag <head> kemudian ditutup dengan
tag </title> untuk membatasi judul dan tag </head> untuk menutup
bagian format header.
2.2 Style dari Teks
Ada dua
cara untuk pengaturan style teks, yaitu menggunakan Heading dengan tag
<H> atau menggunakan font dengan tag <font>. Heading menyediakan 6 style teks yang dapat diatur
menggunakan angka dari 1 sampai 6, dimana angka 1 adalah ukuran yang paling
besar, biasanya digunakan untuk judul atau sub judul, yang dicetak besar dan tebal
(bold). Heading mempunyai parameter untuk mengatur justify yaitu LEFT,
CENTER dan RIGHT. Sedangkan bila menggunakan cara kedua maka digunakan tag
<font> dimana tersedia 7 style teks yang dapat dipilih menggunakan
tingkatan dari 1 sampai 7, yang merupakan kebalikan dari heading, dimana 1
adalah ukuran yang terkecil sedangkan 7 adalah ukuran terbesar, dan tidak
tebal. Berikut contoh penggunaan heading dan font.
|
<HTML>
<HEAD><TITLE>Text Style using
Heading</TITLE></HEAD>
<BODY>
<H1
ALIGN=CENTER>JUDUL
MENGGUNAKAN HEADING 1</H1>
<H2
ALIGN=CENTER>JUDUL
MENGGUNAKAN HEADING 2</H2>
<H3
ALIGN=CENTER>JUDUL
MENGGUNAKAN HEADING 3</H3>
<H4
ALIGN=CENTER>JUDUL
MENGGUNAKAN HEADING 4</H4>
<H5
ALIGN=CENTER>JUDUL
MENGGUNAKAN HEADING 5</H5>
<H6
ALIGN=CENTER>JUDUL
MENGGUNAKAN HEADING 6</H6>
</BODY>
</HTML>
|
|
<HTML>
<HEAD>
<TITLE>Font
Size & Face</TITLE>
</HEAD>
<BODY>
<FONT
SIZE=6>
TEKS
INI MENGGUNAKAN UKURAN 6<BR>
DENGAN
FONT FACE "DEFAULT" BROWSER<P>
<FONT
SIZE=5>
<FONT
FACE="ARIAL">
TEKS
INI MENGGUNAKAN UKURAN 5<BR>
DENGAN
FONT FACE "ARIAL"<P>
</FONT>
</BODY>
</HTML>
|
2.3 Pengaturan format tata letak teks
Pengaturan format tata letak
disini adalah mengatur tampilan teks agar terlihat rapi dan sesuai dengan
keinginan, yaitu meliputi pengaturan paragraph, ganti baris baru, pengaturan
posisi judul atau sub judul yaitu diletakkan pada posisi kiri, tengah atau
kanan dari halaman web, mencetak secara miring untuk penekanan suatu kata, dan
lain sebagainya. Adapun tag-tag yang digunakan disini adalah meliputi tag
paragraph <p>, tag ganti baris <br>, tag preformatted <pre>,
tag indentasi <blockquote>, tag tebal <b> atau <strong>, tag
subscript <sub>, tag superscript <sup>, tag miring <i>, tag
kecil <small>, tag besar <big> dan tag emphasize <em>.
Berikut diberikan contoh penggunaan dari beberapa tag tersebut diatas.
|
<HTML>
<HEAD>
<TITLE>Text Formatting with tag
<p></TITLE>
</HEAD>
<BODY>
Modul ajar ini
disusun berdasarkan berbagai referensi yang ada, baik bersumber pada buku
teks dan dari alamat-alamat URL yang ada di <big>internet</big>.
Ditambah dengan pengalaman penulis selama mengajar di <strong>Politeknik
Elektronika Negeri Surabaya</strong>,
sehingga modul ajar ini diharapkan dapat menunjang mata kuliah
Pemrograman Web.
<P>
Penulis mengucapkan
banyak terima kasih kepada rekan-rekan yang telah banyak merelakan waktunya,
guna terselesaikannya pembuatan modul ajar ini, semoga amal dan kebaikan
rekan-rekan mendapatkan pahala yang setimpal dengan yang telah diberikannya.
<P>
Sekali merengkuh
dayung, dua tiga pulau terlampaui, <small>sambil menyelam minum
air</small>, begitulah harapan penulis, dengan sekali modul ajar
ini dibuat maka dapat dimanfaatkan untuk beberapa tingkat pendidikan di
Politeknik sekaligus, mulai dari D1, D3 dan D4.
</BODY>
</HTML>
|
Berikut
ini diberikan contoh penggunaan tag <br> untuk ganti baris baru, dan
meskipun pada editor telah dilakukan penyusunan baris baru maka pada tampilan
di layar browser akan berbeda, dimana akan ditampilkan secara bersambungan,
seperti contoh script dibawah ini:
|
<HTML>
<HEAD>
<TITLE>
Text Formatting with
tag <br>
</TITLE>
</HEAD>
<BODY>
Dalam pengaturan
format teks pada halaman web biasanya menggunakan beberapa tag<BR>
untuk mengatur
tampilan teks agar sesuai dengan keinginan dari pembuat halaman web.<BR>
Misalkan saja untuk
mengatur penulisan teks ganti baris baru, maka dapat dilakukan<BR>
dengan menggunakan
tag BR, yang berarti pindah baris.
Karena suatu teks
dalam HTML dianggap satu baris, meskipun ditulis sudah dalam keadaan
ganti baris pada
editor teks, seperti halnya contoh teks disini.
Teks ini akan
ditulis sambung dengan teks sebelumnya, karena tidak menggunakan tag BR.
</BODY>
</HTML>
|
Tag
<blockquote> digunakan untuk pengaturan indentasi teks, sehingga teks
ditampilkan masuk beberapa kolom, seperti contoh dibawah ini:
|
<HTML>
<HEAD>
<TITLE>Text Formatting with tag
<blockquote>
</TITLE>
</HEAD>
<BODY>
<H5>KATA MUTIARA</H5>
<BLOCKQUOTE>
<I>Berakit
rakit ke hulu berenang-renang ketepian, bersakit-sakit dahulu
bersenang-senang kemudian</I> <BR>
Mempelajari <b>pemrograman
web</b> tidaklah semudah membalik tangan, diperlukan kemauan yang
tinggi
untuk dapat
mempelajarinya, dengan jalan <em>mempertinggi jam terbang</em>
yaitu sering mencoba dan mencoba lagi
sehingga mampu untuk
membuat halaman web <sub>statis</sub> maupun
<sub>dinamis</sub> secara <sup>baik</sup> dan
<sup>benar</sup>.
</BLOCKQUOTE>
</BODY>
</HTML>
|
