tugas HTML
2.2 Pengembangan HTML
HTML
merupakan sebuah dasar ataupun pondasi bahasa pemograman sebuah web page, HTML
muncul sebagai standar baru dari kemajuan dan berkembangnnya internet, pada
pertama kali muncul internet masih dalam keadaan berbasis text dimana tampilan
sebuah halaman web hanya berisikan sebuah text yang monotone tanpa sebuah
format dokumen secara visual, bayangkan saja sebuah dokument text yang dikemas
dalam bungkus format seperti tipe file .txt atau sering disebut notepad, tanpa
paragraph, satu warna, satu ukuran huruf tanpa gambar serta tidak adanya visual
format dokumen seperti halnya Ms. Word, hal ini akan sangat membosankan dalam
membaca. dan selain itu pertamakali muncul internet user mengakses masih
menggunakan sebuah terminal, hal itu jelas sangatlah tidak friendly. Pemograman
HTML muncul seiring perkembangan teknologi dan informasi.
•
Pada
tahun 1980 IBM mulai untuk mengembangkan sebuah bahasa pemograman dimana text
dan format sebuah dokumen dijadikan satu dalam bahasa pemrograman yang sering
kita sebut sebagai HTML (Hyper Text Markup Language) akan tetapi pada saat itu
pihak IBM memberikan sebuah nama GML (Generalized Markup Language).
•
Pada
tahun 1986 ISO mengeluarkan sebuah standarisasi tentang bahasa pemograman
tersebut dan menyatakan sebuah nama baru dari GML tersebut dengan sebutan SGML
(Standard Generalized Markup Language)
•
Nah
mulai pada tahun kelahiran saya yaitu tahun 1989, Sebuah nama HTML muncul dari
pemikiran Caillau Tim yang bekerja sama dengan Banners Lee Robert yang ketika
itu masih bekerja di CERN memulai mengembangkan bahasa pemrograman ini, dan
dipopulerkan pertama kali dengan browser Mosaic. Nah mulailah dari tahun 1990
HTML sangat berkembang dengan cepat hingga mencapai versi HTML versi 5.0 yang
digarap pada 4 Maret 2010 kemarin oleh W3C
•
HTML
versi 1.0 ini adalah versi pertama sejak lahirnya nama html tersebut, memiliki
sebuah kemampuan untuk heading, paragraph, hypertext, bold dan italic text,
wrapping serta memiliki dukungan dalam peletakan sebuah gambar
•
HTML
versi 2.0 pada 14 Januari 1996, pada versi ini ada beberapa tambahan kemampuan
diantaranya penambahan form comment, hal ini menyebabkan adanya sebuah
interaktif dan mulai dari versi ini yang menjadikan sebuah pioneer dalam
perkembangan homepage interaktif.
•
Tak
lama kemudian HTML versi 3.0 dirilis pada 18 Desember 1997 yang sering disebut
sebut sebagai HTML+ yang mempunyai kemampuan dalam beberapa fasilitas
diantaranya adalah penambahan fitur table dalam paragraph, akan tetapi versi
ini tidak bertahan lama.
•
Dan
pada bulan Mei 1996 dikeluarkan versi baru sebagai pengganti dan penyampurnaan
versi 3.0 ini yaitu HTML versi 3.2, keluarnya versi ini dikarenakan adanya
beberapa kasus yang timbul pada pengembang browser yang telah melakukan
pendekatan dengan cara lain yang justru hal tersebut menjadi popular, maka di
bakukan versi 3.2 untuk mengakomodasi praktek yang banyak digunakan oleh
pengembang browser dan diterima secara umum, dapat dikatakan bahwa versi 3.2
ini merupakan versi 3.0 yang dikembangkan oleh beberapa pengembang browser
seperti Netscape dan Microsoft.
•
Nah
yang terakhir perombakan terjadi pada tahun 1999 tepatnya tanggal 24 Desember
yaitu HTML versi 4.0, seperti yang kita kenal HTML pada saat ini penambahan
link, meta, imagemaps , image dan lain lain sebagai penyempurnaan versi 3.2
•
Pada
tanggal 4 Maret 2010, terdapat sebuah informasi bahwasanya HTML versi 5.0 masih
dikembangkan oleh W3C (World Wide Web Consortium) dan IETF (Internet
Engineering Task Force) yaitu sebuah organisasi yang menangani HTML sejak versi
2.0
2.3 Dasar-Dasar HTML
Mendesain
HTML berarti melakukan suatu tindakan pemrograman. Namun HTML bukanlah sebuah
bahasa pemrograman. Namun HTML hanyalah berisi perintah-perintah yang telah
terstruktur berupa tag-tag penyusun. Menuliskan tag-tag HTML tidaklah sebatas
hanya memasukkan perintah-perintah tertentu agar HTML kita dapat di akses oleh
browser. Mendesain HTML adalah adalah sebuah seni tersendiri. Homepage yang
merupakan implementasi dari HTML adalah refleksi dari orang yang membuatnya.
Untuk itu kita perlu mendesainnya dengan baik agar para pengunjung homepage
yang kita buat merasa senang dan bermanfaat.
Mendesain
HTML dapat dilakukan dengan dua cara:
- Menggunakan HTML Editor, seperti Microsoft FrontPage, Adobe Dreamweaver, dan lain-lain. Dapatkan editor HTML lainnya disini.
- Dengan cara menuliskan sendiri secara manual satu persatu tag-tag HTML ke dalam dokumen HTML.
Ada
kelebihan dan kekurangan dari dua cara di atas. Cara pertama kelebihannya
adalah HTML Editor merupakan sebuah program yang khusus didesain untuk membuat,
melakukan editing bahkan mem-publish ke internet. Dengan kemampuannya
menggabungkan kemudahan dan kecanggihan teknologi internet ke dalam dokumen HTML maka
cara ini sangat disukai oleh para pemula dan desainer yang tidak ingin belajar
lebih mendalam mengenai HTML. Sedangkan cara kedua adalah menuliskan secara
manual satu persatu tag-tag HTML. Hal ini sangat disarakan sulit dikarenakan
akan memakan tenaga dan waktu ekstra untuk melakukannya, ditambah lagi Anda
harus melakukan cara-cara konvensional untuk melihat hasilnya pada web browser.
Namun pada cara kedua adalah dasar dari segala bentuk HTML yang akan Anda
pelajari, karena dengan cara itulah Anda akan lebih paham mengenai cara kerja
dan berbagai perintah yang biasa dipakai pada bahasa HTML.
1. Struktur dasar HTML
HTML
merupakan sebuah bahasa pemrograman yang berisikan perintah kepada browser yang
telah terinstal pada computer client, Untuk pemahaman dan sejarah HTML silahkan
baca “Pengertian dan sejarah HTML”, Bahasa pemograman ini terdapat sebuah
elemen, tag dan attribute didalam perintahnya.
Secara
umum Web dokumen terdiri dari menjadi dua elemen ataupun section yaitu head dan
body, kedua elemen tersebut dipisahkan oleh beberapa tag, untuk lebih jelasnya
dapat anda lihat sebuah pola dasar HTML dibawah ini
<html>
<head>
“Informasi Tentang Dokumen HTML”
<head>
“Informasi Tentang Dokumen HTML”
</head>
<body>
“Informasi yang akan ditampilkan dalam web Browser”
<body>
“Informasi yang akan ditampilkan dalam web Browser”
</body>
</html>
</html>
Dari
pola diatas dapat digambarkan adanya sebuah dokumen HTML mulai dari tag pembuka
<html> sampai tag penutup </html>, sedangkan isi dari dokumen html
tersebut adalah dua buah elemen atau section yaitu
•
“HEAD” yang dimulai dari tag pembukanya <head> sampai tag penutup head
</head>,
Pada
elemen ini biasanya berisikan
-
Title, merupakan judul dokumen
-
Meta tag, informasi yang akan diberikan oleh pengunjung tentang isi halaman web
Dalam
Meta Tag dapat kita isikan beberapa atribut penjelasan antara lain, Content,
Name, URL. Sedangkan dalam atribut tersebut terdapat sebuah value, adapun
beberapa value yang dapat kita isikan antara lain abstract, author, copyright,
description, distribution, expires, keywords, revist, refresh maupun language
-
Script java, CSS dan beberapa perintah lain yang nantinya akan diesekusi
browser tanpa ditampilkan oleh browser untuk sebagian besar, dengan kata lain
pada elemen ini kebanyakan hanya mengatur informasi dan visualisasi web
tersebut, untuk elemen keduanya adalah
- “BODY” mulai dari tag pembuka <body>
sampai tag penutupnya </body> pada elemen ini berisikan informasi dan
pengaturannya yang akan ditampilkan dalam browser.
Di
dalam bahasa pemrograman HTML terdapat beberapa atributh yang perlu kita
pelajari, adapun contoh atributh dan kegunaannya sebagai berikut,
•
<DFN>, untuk menandai sebuah subdefinisi dari daftar ataupun table
definisi
•
<STRONG>, Untuk menandai bagian text ataupun kata dari penting dari
sebuah kalimat, paragraph ataupun dokumen
•
<VAR>, untuk menampilkan nama variable
•
<CITE>, Menandai kutipan
•
<CODE>, Menampilakan sebuah kode pemrograman
•
<EM>, Penekanan sebuah kalimat
•
<SAMP>, untuk membuat contoh ataupun sample didalam sebuah dokumen
•
<KBD>, menandai suatu text dimana text tersebut harus dimasukan oleh user
melalui keyboard
•
<B>, Bold membuat tampilan tebal huruf, kata ataupun kalimat
•
<I>, Italic membuat tampilan miring
•
<U>, Underline membuat tampilan garis bawah
•
<TT>, Membuat tampilan jenis huruf menyerupai huruf mesin ketik
•
<STRIKE>, membuat garis tengah pada sebuah kalimat
•
<BIG>, memperbesar ukuran huruf
•
<SMALL>, memperkecil ukuran huruf
•
<SUP>, menampilkan superscript
•
<SUB>, menampilkan subscript
•
<FONT>, merupakan sebuah pengaturan huruf, kata ataupun kalimat bahkan
paragraph di mana dalam atribut ini terdapat value yang mengatur tampilan huruf
tersebut seperti color. Size, style dan lainnya
•
<P>, Paragrah untuk membuat sebuah paragraph
•
<BR>, Line break berfungsi untuk mengganti baris
•
<H1>,<H2>,<H3>,<H4>,<H5>,<H6> merupakan
sebuah header dimana dari keenam jenis tersebut mempunyai perbedaan ketebalan
dan ukuran huruf
•
<PRE> Preformatted Text berfungsi menampilkan text apa adanya
•
<CENTER> membuat sebuah text berada di posisi tengah
•
<LEFT> membuat sebuah text berada di posisi kiri
•
<RIGHT> membuat sebuah text berada di posisi kanan
•
<Basefont size=”pixel”>mengubah ukuran sebuah huruf
•
<HR> Horizontal rule berfungsi untuk membuat garis bawah
•
<OL>, membuat penomoran pada daftar
•
<UL>, Membuat sebuah tanda pada daftar tanpa nomor (bullet)
•
<LI>, tag yang berada di dalam attribute UL ataupul OL digunakan untuk
memisah baris daftar yang akan di beri penomoron ataupun tanda bullet
•
<TABLE>, membuat sebuah table
•
<TR>, Membuat row atau baris didalam table <TH>, membuat judul
kolom di table <TD> membuat isi pada kolom table, ketiga tag ini diisikan
pada atribut table
•
Rowspan, Colspan merupakan pengaturan merge cell pada atribut table
•
<FORM> untuk membuat form
•
<A HREF=”url link”>Hypertext</A> Hyper Link
•
<IMG SRC=”url img”> insert image
Inilah
beberapa atributh dasar yang digunakan dalam pemrograman HTML, pada atribut
diatas merupakan sebuah tag pembuka yang pada akhir atribut tersebut harus
ditutup dengan tag penutup atributh tersebut </…..>, untuk lebih jelasnya
dilain waktu saya akan mencoba bahas satu persatu atributh tersebut dan akan
saya lengkapi dengan syntax dan contohnya kompleksnya.
Secara
sederhana HTML
terdiri dari dua bagian yaitu Header dan Body. Struktur HTML diapit oleh tag awal <HTML> dan tag
akhir </HTML>. Standar penulisannya adalah:
<HTML>
<HEAD>
Deskrisi dokumen
<HEAD>
Deskrisi dokumen
</HEAD>
<BODY>
Isi dokumen
<BODY>
Isi dokumen
</BODY>
</HTML>
</HTML>
Contoh:
<HTML>
<HEAD>
<TITLE>Selamat datang di Homepage Saya</TITLE>
<HEAD>
<TITLE>Selamat datang di Homepage Saya</TITLE>
</HEAD>
<BODY>
Halo, apakabar?. Homepage ini merupakan hasil karya saya yang pertama.
<BODY>
Halo, apakabar?. Homepage ini merupakan hasil karya saya yang pertama.
</BODY>
</HTML>
</HTML>
Keterangan:
- Tag <TITLE> digunakan untuk memberi judul dokumen HTML. Judul ini dapat Anda lihat pada pojok kiri atas (title bar) browser. Ketika orang akan mem-bookmark web Anda, maka judul inilah yang akan disimpan.
Untuk
melihat hasilnya, silakan jalankan browser favorit Anda, seperti contoh di
bawah ini digunakan Microsoft
Internet Explorer.
Referensi
Tag HTML
1.
Heading
Heading
adalah sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokumen
HTML. Heading berbeda dengan tag <TITLE> yang tidak bisa muncul dalam
halaman web. HTML menyediakan enam tingkatan heading. Heading level 1 biasanya
untuk judul utama.
Contoh:
<HTML>
<HEAD>
<TITLE>Headings</TITLE>
</HEAD>
<BODY>
<H1>Heading
Level 1</H1>
<H2>Heading
Level 2</H2>
<H3>Heading
Level 3</H3>
<H4>Heading
Level 4</H4>
<H5>Heading
Level 5</H5>
<H6>Heading
Level 6</H6>
</BODY>
</HTML>
2.
Paragraf
Untuk
membuat paragraf digunakan tag <P>. Setelah tag <P> Anda bisa
menulis isi paragraf dan paragraf tersebut harus diakhiri dengan penutup
</P>. Anda bisa mengatur posisi paragraf dengan attribut ALIGN. Atribut
ALIGN diikuti dengan posisi yang diinginkan. LEFT untuk rata kiri, CENTER untuk
rata tengah dan RIGHT untuk rata kanan.
Contoh:
<HTML>
<HEAD>
<TITLE>Paragraf</TITLE>
</HEAD>
<BODY>
<P
ALIGN="right">
Beberapa
tahun yang lalu, seorang hartawan meninggal dunia sedangkan ia tidak memiliki
ahli waris. Kepada pengacaranya, ia meninggalkan dua buah surat yang
disegel.Yang sebuah berisi permintaan agar jenazahnya dikuburkan pada jam empat
dini hari. Surat yang kedua belum diketahui isinya karena disampulnya tertulis
pesan agar dibuka seusai pemakaman jenazah
<P
ALIGN="center">
Sesuai
dengan wasiat, jenazah itu dikebumikan pada pukul empat dini hari. Karena tidak
lazimnya waktu pemakaman pada jam tersebut, yang ikut mengantar jenazahnya
hanya empat orang kawannya yang paling setia
<P
ALIGN="left">
Seusai
pemakaman, surat wasiat yang kedua dibuka. Betapa terkejutnya pengacara ketika
membaca isinya, ialah wasiat bahwa seluruh harta warisan (yang bernilai lebih
dari 800.000 pound) dibagi rata kepada orang-orang yang mengantarkan jenazahnya
ke pemakaman. Dengan demikian, yang berhak memperoleh harta yang banyak itu
hanya empat orang, sebagai imbalan bagi kesetiaan mereka. Sumber humor, kisah
dan pepatah
</P>
</BODY>
</HTML>
3.
Blockquote
Perintah
tag <BLOCKQUOTE> digunakan untuk menulis kutipan teks. Dengan perintah
ini browser akan menampilkan teks menjorok ke dalam (meng-identasi teks) atau
menampilkan teks dalam bentuk huruf miring.
Contoh:
<HTML>
<HEAD>
<TITLE>BLOCKQUOTE</TITLE>
</HEAD>
<BODY>
<H3>Sesuatu
yang tidak perlu dicoba</H3>
<BLOCKQUOTE>
Sesuatu
yang kelihatan mengasyikkan tapi sebenarnya lebih banyak menambah masalah pada
remaja adalah narkoba, seks, alkohol dan merokok. Jangan sekali-kali mencoba
jika tidak ingin membuat masalah baru
</BLOCKQUOTE>
</BODY>
</HTML>
4.
Preformatted Text
Preformatted
Text (PRE) digunakan untuk menampilkan teks sama seperti yang Anda ketikkan
dalam dokumen HTML.
Browser akan menampikan teks tersebut dalam font monospaced, yaitu seperti
terlihat dalam teks yang tampilkan oleh aplikasi berbasis teks (misalnya
telnet).
Contoh:
<HTML>
<HEAD>
<TITLE>Preformatted
Text</TITLE>
</HEAD>
<BODY>
<PRE>
Edisi
yang lalu dibahas tentang membuat billing system untuk warnet yang dapat
langsung mencetak tagihan.
Kali
ini diulas bagaimana menyimpan setiap transaksi dalam database agar bisa
diperoleh beberapa laporan secara periodik.
</PRE>
</BODY>
</HTML>
5.
Begin Row (BR)
Tag
ini digunakan untuk menulis teks pada baris berikutnya. Tag <BR> membuat
baris baru tanpa memberi baris kosong di bawahnya.
Contoh:
<HTML>
<HEAD>
<TITLE>Begin
Row</TITLE>
</HEAD>
<BODY>
<P>Banyak
cara yang dapat digunakan untuk melakukan instalasi FreeBSD. Namun ada tiga
cara yang paling sering dilakukan ,yaitu:
<BR>Instalasi
melalui FTP
<BR>Instalasi
melalui CDROM
<BR>Instalasi
melalui partisi DOS
</BODY>
</HTML>
6.
Ukuran Font
Untuk
mengatur huruf dokumen HTML
digunakan tag <FONT SIZE>. Tag <FONT SIZE> memiliki beberapa
atribut untuk mengatur ukuran huruf yang akan digunakan.
Contoh:
<HTML>
<HEAD>
<TITLE>Ukuran
font</TITLE>
</HEAD>
<BODY>
<FONT
SIZE=1>Ukuran font 1</FONT>
<FONT
SIZE=2>Ukuran font 2</FONT>
<FONT
SIZE=3>Ukuran font 3</FONT>
<FONT
SIZE=4>Ukuran font 4</FONT>
<FONT
SIZE=5>Ukuran font 5</FONT>
<FONT
SIZE=6>Ukuran font 6</FONT>
<FONT
SIZE=7>Ukuran font 7</FONT>
</BODY>
</HTML>
Komentar
Posting Komentar