KATA
PENGANTAR
Puji dan Syukur kami panjatkan ke Hadirat Tuhan Yang Maha
Esa, karena berkat limpahan Rahmat dan Karunia-nya sehingga kami dapat menyusun
makalah ini dengan baik dan benar, serta tepat pada waktunya. Dalam makalah ini
kami akan membahas mengenai “MENGENAL HTML”.
Makalah ini telah dibuat dengan berbagai observasi dan
beberapa bantuan dari berbagai pihak untuk membantu menyelesaikan tantangan dan
hambatan selama mengerjakan makalah ini. Oleh karena itu, kami mengucapkan
terima kasih yang sebesar-besarnya kepada semua pihak yang telah membantu dalam
penyusunan makalah ini.
Kami menyadari bahwa masih banyak kekurangan yang mendasar
pada makalah ini. Oleh karena itu kami mengundang pembaca untuk memberikan
saran serta kritik yang dapat membangun kami. Kritik konstruktif dari pembaca
sangat kami harapkan untuk penyempurnaan makalah selanjutnya.
Akhir
kata semoga makalah ini dapat memberikan manfaat bagi kita semua.
Pemrograman
HTML
disusun
oleh:
fahmi PEMROGRAMAN BERBASIS WEB
Rumpun
bahasa pemrograman berbasis web:
1.
Client side : bisa langsung dijalankan pada komputer (PC) tanpa
memerlukan server web.
Contoh: HTML, Java Script, Visual Basic
Script (Vbs), dll
2.
Server side : program harus diletakkan pada direktori server web dan
segala operasionalnya diatur oleh server web.
Contoh : PHP (freeware), ASP (microsoft), JSP (Java –
Sun Micro System),dll
Catatan: dalam pembuatan suatu programan aplikasi
berbasis web dimungkinkan menggunakan banyak bahasa pemrograman.
Contoh
kolaborasi berbagai bahasa pemrograman web dalam suatu aplikasi:
●
Penanganan
logika pemrograman ( IF, LOOP, dll) menggunakan PHP
●
Menampilkan
gambar, tabel, hyperlink menggunakan HTML
●
Mempercantik
tampilan seperti Menu PullDown menggunakan Java Script.
KEBUTUHAN APLIKASI UNTUK PEMROGRAMAN WEB
1.
Editor : sebagai media untuk menulis program, bisa berupa editor text
atau editor program.
contoh :
●
Notepad
(Editor Text pada Windows)
●
Side
Kick (Editor Text pada DOS)
●
PHPed
(Editor Program pada Windows)
●
Editor
Frontpage (Editor Script pada aplikasi Fontpage)
●
Quanta,
Bluefish, Screem (Editor web di Linux)
1.
Browser : media untuk melihat
hasil tampilan pemrograman.
Contoh
:
●
Internet
Explorer, MSN browser (Windows)
●
Netscape,
Mozilla, Firefox, Opera (berbagai sistem operasi ada)
●
Konqueror,
Dillo (Linux)
●
LYNX
(browser dengan tampilan berbasis text, bisa untuk browsing internet di Linux
dan berbagai sistem operasi dengan mode kerja Text)
●
Mosaic
(browser pertama yang merupakan cikalbakal browser yang ada sekarang).
Catatan: Dalam pengetesan hasil pemrograman
sebaiknya diuji menggunakan lebih dari satu browser, misalnya Internet Explorer
dan Netscape.
NAVIGASI PADA BROWSER
1
3
4
5
6
2
7
Keterangan:
1.
Tombol “Back” : tombol untuk membuka halaman
web yang telah dibuka sebelumnya.
2.
Tombol “Next” : tombol untuk membuka
kembali halaman web yang telah dibuka sebelumnya dari halaman web yang
ditampilkan dengan menekan tombol “Back”.
3.
Tombol “Stop” : Menghentikan proses
menampilkan (loading) halaman web.
4.
Tombol “Refresh” : Mengulang proses menampilkan (loading) halaman web.
5.
Tombol “Home” : Memanggil halaman web yang
diset sebagai halaman web yang otomatis tampil ketika browser diaktifkan.
Pengesetan
halaman web “Home” pada browser Internet Explorer:
1.
Aktifkan
perintah: Menu:\ Internet option hingga muncul tampilan seperti gambar samping
2.
Ketik
alamat web di kotak “Address”
3.
Klik
tombol “Apply” lalu “Ok”.
6.
Kotak Address : Tempat untuk menuliskan halaman web yang akan ditampilkan
7.
Tombol “GO” : Tombol yang digunakan untuk mengawali proses menampilkan
website yang didefinisikan di kotak address dengan cara di-klik.
DOKUMEN HTML
Setiap
dokumen HTML memiliki extensi file *.HTML atau *.HTM. Maka dari itu untuk
setiap penyimpanan program HTML harus disimpan dengan format penamaan file: namafileprogram.HTML
HTML
kepanjangan dari Hyper Text Markup Language yang dapat diartikan sebagai
“Bahasa untuk menampilkan Tulisan / Text yang bersifat Hyper. HTML adalah
sebuah format dokumen. Dokumen HTML dapat ditampilkan dimedia Internet
menggunakan aplikasi browser. Karena bisa ditampilkan di Internet maka dokumen
ini bersifat “publik” atau bisa digunakan bersama-sama dalam sekali waktu.
Sifat ini berbeda dengan Dokumen Ms. Word yang bersifat “Personal”, hal ini
karena fungsi dari dokumen Ms.Word adalah untuk dicetak dan digunakan (dibaca)
oleh orang perorang.
Dari
pemahaman diatas dapat diketahui bahwa pemrograman HTML adalah bahasa
pemrograman untuk membuat sebuah dokumen. Jadi pemrograman HTML bukanlah
pemrograman logika komputer. Hal ini berarti pada HTML tidak mengenal
perintah-perintah logika komputer seperti: pencabangan (IF .. Else),
perulangan/looping (Do … While / For … Next, dll) dan bahkan juga tidak bisa
memproses penjumlahan, pengurangan, pengalian maupun pembagian.
Perintah-perintah pemrograman HTML
adalah perintah untuk mengatur tampilan dan isi suatu dokumen untuk keperluan
web di internet. Isi dari dokumen HTML antara lain:
●
Text
dan Paragrap
●
Gambar,
suara dan berbagai bentuk multimedia lainnya
●
Tabel
dan Frame
●
Hyperlink
(penghubung antar halaman web), dll
Dokumen HTML memiliki 2
bagian yaitu bagian HEAD dan BODY. Bagian HEAD adalah bagian dokumen untuk menempatkan
perintah-perintah yang berhubungan dengan informasi dokumen seperti perintah
TITLE, META, dll. Sedangkan untuk bagian BODY adalah untuk menempatkan perintah
pendefinisian dan pengaturan isi dokumen seperti: Text, Paragrap, Gambar,
Tabel, Frame, Hyperlink, dll.PEMROGRAMAN
HTML
Latih1.html
<HTML>
<HEAD>
<TITLE> Mencoba
HTML </TITLE>
</HEAD>
<BODY>
Hallo, Tulisan ini dibuat dengan perintah HTML
</BODY>
</HTML>
Keterangan:
1.
Ketik
perintah diatas dengan Notepad atau sembarang Editor
2.
Simpan
dengan nama file beserta extensinya: “.html”
( wajib ! ) dan jangan hanya nama filenya saja.
Contoh: filename=
Latih1.html
3.
Untuk
menampilkan di browser, pilih salah satu cara:
a.
Buka
folder tempat menyimpan file html yang bersangkutan kemudian cari filenya, jika
sudah ketemu klik 2x hingga secara otomatis akan ditampilkan dibrowser.
b.
Aktifkan
browser (misal:internet explorer). Dari
Menu pilih File\Open kemudian ketik lokasi file html pada kotak “Open” atau
klik tombol “Browse” untuk mencari lokasi file secara interaktif.
●
Penulisan
perintah HTML tidak bersifat Case Sensitife. Hal ini berarti perintah HTML
dapat diketik dengan huruf besar atau kecil. Namun sudah menjadi standar pada
umumnya Website profesional, perintah HTML diketik dengan huruf Kapital.
●
Perintah
HTML diapit dengan tanda kurung “ < ” dan “ > ”.
●
Hampir
semua perintah HTML berupa perintah pasangan pembuka dan penutup. Perbedaan
perintah pembuka dengan penutup adalah untuk perintah penutup ditambahkan tanda
“slash” ( / ) pada awal perintah. Setiap objek yang diatur oleh perintah yang berpasangan harus
diletakkan diantara perintah pembuka dan penutup.
Perintah
pembuka
Perintah
penutup
Contoh: <center> perintah menengahkan </center>
●
Hampir
semua perintah HTML memiliki atribut (perintah pelengkap), format penulisannya
adalah sebagai berikut:
<Perintah atribut1=”nilai” atribut2=”nilai” … atributn=”nilai”>
. . . objek yang diatur …
</Perintah>
●
Atribut
bersifat optional. Sebuah Atribut bisa digunakan oleh beberapa perintah. Ada
perintah HTML yang dapat digunakan bila ditulis dengan atributnya, namun ada
pula perintah HTML yang memang tidak memiliki atribut. Perintah yang memiliki
atribut bisa digunakan semua atributnya atau hanya sebagian saja.
Setiap
atribut memiliki nilai, jika nilai berupa kata-kata dalam huruf maka cara
mendefinisikan nilainya harus diapit dengan petik ganda ( “ ), sedangkan bila
nilainya adalah angka atau persen maka cara mendefinisikannya tanpa perlu
diapit oleh tanda petik ganda.Contoh
mendefinisikan atribut pada sebuah perintah HTML:
Perintah utama = BODY
Atribut = Bgcolor
Nilai atribut = “Orange”
Latih1.html
<HTML>
<HEAD>
<TITLE>
Mencoba HTML </TITLE>
</HEAD>
<BODY Bgcolor= “Orange”>
Hallo, Tulisan ini
dibuat dengan perintah HTML
</BODY>
</HTML>
Keterangan:
1.
Editlah
file latih1.html dengan menambahkan contoh atribut diatas kemudian disimpan
(Notepad = File/Save atau tekan tombol “Ctrl” dan “s”)
2.
Aktifkan
Browser (Internet Explorer) yang menampilkan Latih1.html kemudian klik tombol
“refresh” untuk melihat perubahan tampilan dokumen setelah ditambahkan perintah
atribut diatas.
Catatan:
●
Salahsatu
atribut pada perintah BODY adalah Background.
●
Fungsi
dari Background adalah untuk mengatur warna latar belakang.
●
Background
juga merupakan atribut pada perintah <TABLE>, <TR>, <TD>, dll
●
Nilai
dari atribut Background adalah warna. Untuk mendefinisikan warna bisa dengan
cara disebutkan menggunakan sebutan warna dalam bahasa Inggris (Merah=”Red”,
Ungu=”Purple”, Coklat=”Brown”,dll) atau dengan menyebutkan dengan kode warna
RGB.
●
Penulisan
kode warna RGB= “# x x x x x x” ( x = angka hexadesimal), 2 angka I
mendefinisikan intensitas warna “Merah”, 2 angka II mendefinisikan intensitas
warna “Hijau” dan 2 angka III mendefinisikan intensitas warna “Biru”.
Contoh
mendefiniskan warna dengan kode warna RGB:
#000000 =
Hitam #00ff00 = Hijau #ffffff = Putih
#ff0000 =
Merah #0000ff = Biru #ff9227 = Orange
●
Kode
warna RGB dapat mendefinisikan 16 juta warna
●
Dalam
mendefinisikan warna disarankan menggunakan pendefinisian menggunakan
kode warna RGB untuk ketepatan warna yang dimunculkan.
I.
Sifat Pengaturan Text
Penggunakan Perintah Pemrograman pada Dokumen HTML
●
Fungsi
tombol enter pada penulisan program di editor (Notepad) tidak dianggap sebagai
perintah ganti baris.
●
Perintah
untuk ganti baris pengetikan menggunkan perintah <BR>.
Contoh:
Latih1.html
<HTML>
<HEAD>
<TITLE>
Mencoba HTML </TITLE>
</HEAD>
<BODY Bgcolor= “Orange”>
Hallo,
Tulisan ini dibuat dengan perintah HTML
Hallo,
Tulisan ini dibuat dengan perintah HTML
Hallo,
Tulisan ini dibuat dengan perintah HTML
Hallo,
Tulisan ini dibuat dengan perintah HTML
Hallo,
Tulisan ini dibuat dengan perintah HTML
</BODY>
</HTML>
Hasilnya:
Keterangan: Walaupun di editor satu kalimat deketik
satu baris sendiri, tapi ketika ditampilkan di browser tulisan kalimat akan
dilanjutkan dikanannya, baru kemudian diletakkan ke baris dibawahnya bila sudah
tidak muat.
Ditambahkan perintah
<BR>
Latih1.html
<HTML>
<HEAD>
<TITLE>
Mencoba HTML </TITLE>
</HEAD>
<BODY Bgcolor= “Orange”>
Hallo,
Tulisan ini dibuat dengan perintah HTML <BR>
Hallo,
Tulisan ini dibuat dengan perintah HTML <BR>
Hallo,
Tulisan ini dibuat dengan perintah HTML <BR>
Hallo,
Tulisan ini dibuat dengan perintah HTML <BR>
Hallo,
Tulisan ini dibuat dengan perintah HTML <BR>
</BODY>
</HTML>
Hasilnya:
Keterangan: Karena disetiap ujung baris kalimat
ditambahkan perintah <BR> maka
kalimat berikutnya diletakkan pada baris dibawahnya.
Fungsi
tombol spacebar untuk memunculkan karakter kosong ( “ “ ) pada penulisan
program di editor (Notepad) dianggap hanya sebagai pemisah kata dalam kalimat
dan hanya ditampilkan 1 karakter kosong saja jika ditampilkan dibrowser.
Karakter kosong dari spacebar hanya bisa ditampilkan jika diletakkan di tengah
diantara kata dan tidak bisa ditampilkan jika diletakkan di awal atau di akhir
kalimat atau ketikan kedua dan seterusnya.
Jarak antar huruf 2 karakter kosong yang
diketik dari tombol Spacebar
<HTML>
<HEAD>
<TITLE>
Mencoba HTML</TITLE>
</HEAD>
<BODY>
S
o l o
B e r
s e r
i
</BODY>
</HTML>
Hasilnya:
Jarak antar huruf hanya ditampilkan
1 karakter kosong
●
Untuk
menampilkan karakter kosong yang diletakkan di awal atau akhir baris kalimat
atau diletakkan di tengah untuk karakter kosong kedua dan seterusnya,
diwakilkan dengan perintah kode:  
(harus diketik dengan huruf kecil semua)
Setiap huruf diapit 2 perintah  
Contoh:
<HTML>
<HEAD>
<TITLE>
Mencoba HTML</TITLE>
</HEAD>
<BODY>
  S  o  l  o  
B  e  r  s  e  
r  i  
</BODY>
</HTML>
Jarak
antar huruf 2 karakter kosong
● Panjang baris kalimat
dipengaruhi oleh lebar windows browser penampil.
Panjang
baris kalimat mengikuti lebar windows browser
penampil
PADA PEMROGRAMAN HTML
I.
Pengaturan tampilan default (standar) pada dokumen HTML
dengan perintah BODY.
Fungsi dari perintah BODY adalah
untuk tempat mendefinisikan isi dari suatu dokumen HTML. Setiap isi yang
ditampilkan pada dokumen yang bersangkutan harus ditulis diantara penulisan
perintah <BODY> … </BODY>.
Pada perintah ini memiliki
beberapa atribut antara lain:
●
Background=”file_gambar”
Menampilkan
dokumen dengan latar belakang gambar bitmap.
●
Bgcolor=”warna”
Mengatur
warna latar belakang dokumen, jika tidak didefinisikan dokumen ditampilkan
dengan warna putih.
●
Link=”warna”
Mengatur
warna Hyperlink (menu dalam bentuk tulisan yang jika di-klik maka tampilan akan
berubah sesuai tujuan definisi hyperlink) yang belum pernah digunakan /
di-klik. Jika tidak didefinisikan maka menggunakan warna biru.
●
VLink=”warna”
Mengatur
warna Hyperlink (menu dalam bentuk tulisan yang jika di-klik maka tampilan akan
berubah sesuai tujuan definisi hyperlink) yang sudah pernah digunakan /
di-klik. Jika tidak didefinisikan maka menggunakan warna ungu.
●
Text=”warna”
Contoh
sebuah hyperlink
Jika
kursor melintas diatasnya bentuk kursor akan
berubah dari
ke
Mengatur
warna tulisan dokumen, jika tidak didefinisikan menggunakan warna hitam.
Contoh penggunaan atribut
pada perintah BODY:
<HTML>
<HEAD>
<TITLE> Mencoba HTML </TITLE>
</HEAD>
<BODY
link="yellow" vlink="blue" text="white"
bgcolor="black">
<A href="latih2.html"> Ini
Hyperlink </A> <br>
Yang ini hanya tulisan biasa
</BODY>
</HTML>
Keterangan:
Pada
penggunaan perintah BODY diatas diatur tampilan pada dokumen untuk warna tulisan
berwarna putih (text="white") dengan latar belakang dokumen
berwarna hitam
(bgcolor="black") dan sebagai penanda jika suatu hyperlink belum
pernah di-klik berwarna kuning (link="yellow") dan penanda jika
hyperlink sudah pernah di-klik berwarna biru (vlink="blue").
Catatan:
Jika
perintah BODY didefinisikan tanpa atribut apapun maka bentuk tampilan
dokumennya adalah:
●
Warna
latar belakang dokumen putih
●
Warna
huruf hitam
●
Warna
hyperlink biru dengan garis bawah
●
Warna
hyperlink yang sudah diklik berwarna ungu dengan garis bawah
II.
Pengaturan tampilan huruf
tulisan dokumen dengan perintah FONT.
Penggunaan
perintah FONT harus menggunakan atribut yang dimilikinya. Berikut ini atribut
pada perintah FONT:
●
Face=”jenis font”.
Mengatur
tampilan jenis font yang digunakan pada tulisan yang diapit oleh perintah font.
Contoh:
<FONT face=”Arial, Helvetica, San
Serif”>
ini tulisannya </FONT>
Keterangan:
Pada
contoh diatas diatur tampilan tulisan yang diapit oleh perintah FONT
menggunakan type huruf Arial, jika type huruf tersebut tidak ada dikomputer
pengguna maka menggunakan type huruf Helvetica dan jika keduanya tidak ada maka
menggunakan type huruf San Serif. Namun jika ketiga huruf tersebut tidak ada
pada komputer pengguna maka menggunakan seting jenis huruf default pada
masing-masing browser penampil dokumen.
Pengaturan tampilan jenis
font default pada browser:
● Internet
Explorer:
Menu:\Tools \Internet Options \Tab General \Tombol Font
● Mozilla
FireFox:
Menu \Tools \Options \Tab General \Font & Colors
● Opera : Menu \Tools \Options
\Preferences \Web Pages \ Tombol Normal Font.
Catatan:
Pengaturan
type font pada dokumen HTML sebaiknya menggunakan type font standar, yaitu type
font yang ada disetiap komputer baik windows, linux, macintosh, dll. Jika
terpaksa harus menggunakan tampilkan huruf yang tidak standar, misalnya tulisan
dengan bentuk, sebaiknya tulisan tersebut ditampilkan dalam bentuk gambar.
Tulisan
seperti ini sebaiknya dibuat dalam bentuk gambar sehingga terhindar dari
permasalahan perbedaan tampilan dikomputer.
Tulisan Indah
●
Color=”Warna”.
Mengatur
tampilan warna tulisan yang diapit oleh perintah font.
Contoh:
<FONT color=”Blue”> tulisan ini berwarna biru </FONT>
●
Size= angka 1 s/d 7
Mengatur
ukuran huruf tulisan yang diapit oleh perintah font. Semakin besar angkanya
semakin besarpula tulisannya
Contoh:
<FONT Size=3> ini tulisan berukuran
sedang </FONT>
Catatan:
Nilai
atribut size pada perintah font bisa juga bernulai +n atau -n jika sebelumnya
telah didefinisikan ukuran standar huruf pada dokumen dengan perintah <BASEFONT Size=angka>. “+” jika
ukuran dibesarkan dari ukuran standar dan “-“ untuk mengecilkan.
Contoh:
<BASEFONT Size=5 >.
<FONT Size= +2> tulisan ini dibesarkan dari ukuran standar </FONT> <br>
<FONT Size= -3> tulisan ini dikecilkan dari ukuran standar </FONT>
Contoh penggunaan atribut
pada perintah FONT:
<FONT
Color=”Purple” Size=5 Face=”Arial Narrow”>
Mencoba perintah pengaturan tampilan
<FONT Color=”red”> tulisan </FONT>
</FONT>
Keterangan:
Pada
contoh diatas diatur tampilan tulisan menggunakan ukuran 5 (agak besar) dengan
bentuk huruf Arial Narrow. “Mencoba perintah pengaturan tampilan” ditampilkan
dengan warna ungu (puple) sedangkan “tulisan” menggunakan warna merah (red).
III. Perintah-perintah
pengaturan tampilan style tulisan
pada dokumen.
Pada
perintah pemrograman HTML juga memiliki pengaturan style tulisan seperti
menebalkan, memiringkan, memberi garis bawah, dll. Berikut ini
perintah-perintah style tulisan pada program HTML:
●
<B> Menebalkan </B>
●
<I> Memiringkan </I>
●
<U> Memberi garis bawah </U>
●
<S> Memberi coret ditengah </S>
●
<TT> Menampilkan tulisan
seperti huruf mesin ketik manual </TT>
●
<BIG> Membesarkan ukuran tulisan
</BIG>
●
<SMALL> Mengecilkan ukuran tulisan</SMALL>
●
<SUP> Superscript-tampilan
pangkat atas </SUP>
●
<SUB> Subscript-tampilan pangkat
bawah </SUB>
Contoh penggunaan:
2<SUB><U> a.
<I>b
</I></U></SUB> = X <SUP>2</SUP> . Y
IV. Perintah
perataan tampilan tulisan pada dokumen.
Untuk
tulisan biasa bukan paragrap atau suatu judul (heading) pada dokumen HTML hanya
bisa diatur dua posisi perataan yaitu:
●
Rata kiri (default)
<LEFT> … Tulisan
yang diatur perataannya … </LEFT>
●
Rata tengah
<CENTER> … Tulisan
yang diatur perataannya … </CENTER>
V.
Perintah mendefinisikan
suatu paragrap.
Dalam
suatu dokumen HTML pentuk tulisan dibedakan antara lain berupa Tulisan biasa
dan tulisan paragrap. Tulisan paragrap biasanya terdiri dari beberapa kalimat
yang menyatu. Suatu kalimat yang didefinisikan sebagai suatu paragrap bisa
diatur perataannya kalimatnya antara lain rata kiri (default), tengah dan
kanan. Sedangkan rata kanan-kiri (justify) tidak bisa didefinisikan menggunakan
perintah HTML. Berikut ini format penggunaan perintah pengaturan suatu paragrap:
<P Align=”posisi perataan”> …isi paragrap yang diatur
… </P>
Nilai atribut Align (posisi perataan):
●
Left = Perataan isi paragrap rata kiri
(default)
●
Center = Perataan
isi paragrap rata tengah
●
Right = Perataan
isi paragrap rata kanan
Keterangan:
Jika atribut Align tidak didefinisikan,
atau hanya didefinisikan seperti berikut ini:
<P> … isi paragrap yang diatur … </P>,
maka paragrap tersebut ditampilkan dengan perataan kiri.
VI. Perintah
mendefinisikan suatu judul.
Setiap
dokumen pasti memerlukan suatu judul. Judul suatu bab pada dokumen, judul sub
bab dan berbagai bentuk judul lainnya. Untuk membuat tampilan judul pada
perintah HTML menggunakan perintah Heading. Karena sudah ada fasilitas
pendefinisian judul para HTML maka untuk setiap tampilan judul jangan
didefinisikan sebagi tulisan biasa. Dengan mengguakan perintah heading posisi
perataan judul tersebut bisa diatu rata kiri, tengah atau kanan. Berikut ini
format pendefinisian perintah Heading:
<Hx Align=”posisi perataan”>
… Judul yang ditampilkan … </Hx>
Keterangan:
●
x ( pada Hx ) : didefinisikan menggunakan angka 1 s/d 7.
Semakin
besar angkanya, tulisan judul akan semakin mengecil.
●
Align =”posisi perataan” :
atribut pengatur posisi perataan judul, nilai untuk atribut ini adalah: “Left”
untuk rata kiri, “Center” untuk rata tengah, “Right” untuk rata kanan.
Berikut ini listing perintah HTML untuk
melihat perbedaan jenis Heading:
1
2
3
4
5
6
7
1
2
3
4
5
6
7
<B><U>Tampilan
heading:</U></B>
<H1> heading 1 </H1>
<H2> heading 2 </H2>
<H3> heading 3 </H3>
<H4> heading 4 </H4>
<H5> heading 5 </H5>
<H6> heading 6 </H6>
<H7> heading 7 </H7>
VII.
Pengaturan tampilan tulisan
menggunakan Preformated Text.
Dengan
perintah Preformated Text membuat browser dalam menampilkan isi tulisan dokumen
akan ditampilkan seperti yang ditulis pada program. Hal ini berarti setiap
karakter apapun yang diketik akan dimunculkan apa adanya termasuk menekan
tombol Enter akan dianggap sebagai
perintah ganti baris kalimat dan karakter kosong dari menekan tombol Spacebar akan ditampilkan sejumlah
karakter kosong yang diketik diprogram. Namun demikian tampilan huruf yang
digunakan adalah jenis Monospaced (setiap karakter memiliki
lebar karakter yang sama), tampilan jenis ini seperti halnya huruf yang
digunakan pada mesin ketik manual. Tapi walaupun demikian pengaturan style
tulisan masih bisa digunakan seperti menebalkan <B>, memiringkan
<I> dan garis bawah <U>. Berikut ini adalah format penggunaan
perintah Preformated Text:
<PRE> …
isi tulisan yang diatur … </PRE>
Contoh penggunaan:
<B><U>Preformated
Text:</U></B>
<PRE>
Ganti baris menggunakan tombol
<B><I>ENTER</I></B>
S
p a c
e B a
r tanpa
<B>&NBSP</B>
---------- ----
/
..........\ /////
/
|...........\/////
/-||
B O M |)))###
\-||
A T o M |====###
\
|=========== |)))###
\|========== /\\\\\
==========/ \\\\\
----
</PRE>
Hasilnya:
VIII. Menampilkan
asesoris garis horiontal
Agar
tampilan dokumen menarik, dapat digunakan asesoris garis horisontal. Untuk
menampilkan garis horisontal dapat menggunakan perintah <HR> , dengan atribut antara lain:
●
Size = Angka. Mengatur ketebalan garis, semakin besar angka
semakin tebal garis.
●
Width = Angka (pixel) atau Persen. Mengatur lebar garis, jika
menggunakan angka berarti menggunakan satuan pixel sedangkan persen berbanding
dengan lebar window browser penampil.
●
Align = “Left”/ ”Center” / ”Right”. Mengatur
tampilan perataan garis. Nilai defaultnya adalah rata tengah.
●
Color = “warna”. Mengatur warna garis yang ditampilkan.
●
Noshade. Garis ditampilkan tanpa
bayangan
1
Contoh
penggunaan:
2
<HR>
3
<HR Width=150
Color="blue">
4
<HR Width=50%
Size=5 Align="left">
2
<HR Size=10
Noshade>
Hasilnya:
1
2
3
4
PADA PEMROGRAMAN HTML
Dalam membuat tampilan sebuah tabel pada perintah HTML memiliki
3 komponen perintah antara lain:
1.
<TABLE> …
</TABLE>
Berfungsi untuk memulai perintah
mendefinisikan tampilan tabel.
2.
<TR>… </TR>
Berfungsi untuk mendefinisikan baris dalam
tabel.
3.
<TD> … </TD>
atau <TH> … </TH>
Berfungsi untuk mendefinisikan kolom dalam
baris tabel.
Contoh Pendefinisian Tampilan Tabel :
<table
border=1>
<tr> <th> Judulkolom1</th>
<th>
Judulkolom2</th>
<th>
Judulkolom3</th>
<th>
judulkolom4</th>
</tr>
<tr> <td> baris2,kolom1</td>
<td> baris2,kolom2</td>
<td>
baris2,kolom3</td>
<td>
baris2,kolom4</td>
</tr>
<tr> <td> baris3,kolom1</td>
<td>
baris3,kolom2</td>
<td>
baris3,kolom3</td>
<td>
baris3,kolom4</td>
</tr>
</table>
Hasilnya:
Dari
contoh diatas dapat dipahami bahwa dalam membuat sebuah tampilan tabel pada
HTML dengan cara mendefinisikan baris tabel dengan perintah <TR> terlebih
dahulu kemudian baru mendefinisikan cell isi dari baris tabel yang bersangkutan
dengan perintah <TD> atau <TH>.
Catatan:
Untuk mendefinisikan tabel dengan tampilan
1 baris dan 1 kolom, ketiga komponen perintah HTML wajib didefinisikan.
I. Perbedaan
dari perintah <TD> dengan <TH>:
Gunakan perintah <TH> jika akan
mendefinisikan cell yang berfungsi sebagai judul kolom tabel (biasanya
cell-cell isi baris pertama pada tabel). Kelebihannaya adalah jika isi kolom
diapit dengan perintah <TH> … </TH> maka isi kolom tersebut
ditampilkan dengan huruf tebal dan rata tengah. Sedangkan <TD> digunakan
untuk mendefinisikan isi kolom biasa dimana nanti akan ditampilkan dengan huruf
tidak ditebalkan dan rata kiri.
II. Atribut
pada komponen-komponen perintah tabel:
●
Border = Angka, Atribut pada
perintah TABLE untuk mengatur ketebalan bingkai tabel. Semakin besar angkanya
maka garis bingkai akan semakin besar pula.
●
Bordercolor = “warna”, Atribut pada
perintah TABLE untuk mengatur warna bingkai tabel.
●
Bgcolor= ”warna”, Atribut untuk
mengatur warna latar belakang. Atribut ini bisa diletakkan pada ketiga komponen
perintah tabel.
<Table
Bgcolor=”warna”> berpengaruh pada satu tabel.
<TR
Bgcolor=”warna”> berpengaruh pada satu baris tabel.
<TD
Bgcolor=”warna”> berpengaruh pada satu cell tabel saja.
●
Background= ”filegambar”, Atribut untuk
mengatur warna latar belakang dengan tampilan gambar. Atribut ini bisa
diletakkan pada ketiga komponen perintah tabel
●
CellSpacing=angka, Jarak antar cell
dalam tabel
Cellspacing
●
CellPadding=angka, Jarak antara isi
cell dengan bingkai cell
Cellpadding
…isi
cell…
Bingkai
tabel
Kotak cell
●
Width=angka atau persen,
menentukan lebar tabel. Jika didefinisikan dengan angka berarti mendefinisikan
lebar tabel dengan menggunakan satuan pixel dan jika menggunakan persen berarti
lebar tabel adalah sebanding dengan persentase lebar windows browser penampil.
Atribut ini juga bisa digunakan pada perintah <TD> atau <TH> untuk
menentukan lebar kolom pada tabel. Jika atribut ini tidak didefinisikan maka lebar
tabel mengikuti lebar cell yang bergantung pada panjangnya isi pada
masing-masing cell.
●
Height=angka atau persen,
menentukan tinggi tabel. Pendefinisiannya sama dengan penggunaan atribut Width.
III.
Menggabung Cell
Pada
pemrograman HTML hanya mengenal perintah menggabung cell (merge cell) tetapi
tidak mengenal perintah memecah cell. Perintah pendefinisiannya adalah sebagai atribut perintah <TD> atau <TH>.
● <TD Colspan=angka>
menggabung cell beda kolom
● <TD Rowspan=angka>
menggabung cell beda baris
Contoh penggunaan perintah menggabung
cell:
<table border=1>
Baris 1
<tr bgcolor=”green”>
<th>
Judulkolom1</th>
<th>
Judulkolom2</th>
<th>
Judulkolom3</th>
<th>
judulkolom4</th>
</tr>
<tr>
<td
bgcolor="pink"> baris2,kolom1</td>
Baris 2
<td
rowspan=2> baris2&3,kolom2</td>
<td rowspan=2
colspan=2> baris2&3,kolom3&4 </td>
</tr>
Baris 3
<tr>
<td
bgcolor="pink"> baris3,kolom1</td>
</tr>
<tr>
<td
colspan=2> baris4,kolom1&2</td>
<td>
baris4,kolom2</td>
<td>
baris4,kolom3</td>
Baris 4
</tr>
</table>
Width
Hasilnya:
Judulkolom1
|
Judulkolom2
|
Judulkolom3
|
judulkolom4
|
baris2,kolom1
|
baris2&3,kolom2
|
baris2&3,kolom3&4
|
|
baris3,kolom1
|
|||
baris4,kolom1&2
|
baris4,kolom2
|
baris4,kolom3
|
Contoh Listing Membuat Tampilan Tabel:
Tabel.html
1.
|
<HTML>
|
2.
|
<HEAD></HEAD>
|
3.
|
<BODY>
|
4.
|
<font face="arial
narrow">
|
5.
|
<table border=1 cellspacing=0
cellpadding=2 bodercolor=”black”>
|
6.
|
<tr
bgcolor="black">
|
7.
|
<th
colspan=3>
|
8.
|
<font
color="White">
|
9.
|
Harga
Komoditas Beras <br>
|
10.
|
di
Kota Surakarta
|
11.
|
</font>
|
12.
|
</th>
|
13.
|
</tr>
|
14.
|
<tr
bgcolor="gray">
|
15.
|
<th
width=150>
|
16.
|
<font
color="White">Komoditas </font>
|
17.
|
</th>
|
18.
|
<th
width=50>
|
19.
|
<font
color="White">Satuan </font>
|
20.
|
</th>
|
21.
|
<th
width=100>
|
22.
|
<font
color="White">Harga </font>
|
23.
|
</th>
|
24.
|
</tr>
|
25.
|
<tr> <td> Beras C4 Super</td>
|
26.
|
<td
align="center"> 1 kg</td>
|
27.
|
<td
align="right"> Rp. 4.600,- </td>
|
28.
|
</tr>
|
29.
|
<tr> <td> Beras C4 Biasa</td>
|
30.
|
<td
align="center"> 1 kg</td>
|
31.
|
<td
align="right"> Rp. 4.400,- </td>
|
32.
|
</tr>
|
33.
|
<tr> <td> Mentik Wangi</td>
|
34.
|
<td
align="center"> 1 kg</td>
|
35.
|
<td
align="right"> Rp. 4.500,- </td>
|
36.
|
</tr>
|
37.
|
</table>
|
38.
|
</font>
|
39.
|
</BODY>
|
40.
|
</HTML>
|
Hasilnya:
Baris no.14 s/d
no.23
Baris no.6 s/d
no.13
Harga
Komoditas Beras
di Kota Surakarta |
||
Komoditas
|
Satuan
|
Baris no.24 s/d
no.28
Harga
|
Beras C4 Super
|
1 kg
|
Baris no.29 s/d
no.32
Rp. 4.600,-
|
Beras C4 Biasa
|
1 kg
|
Baris no.33 s/d
no.36
Rp. 4.400,-
|
Mentik Wangi
|
1 kg
|
Rp. 4.500,-
|
100
pixel
150
pixel
50
pixel
No comments:
Post a Comment