HTML (hypertext markup language) merupakan suatu format yang digunakan dalam pembuatan dokumen dan aplikasi yang berjalan di halaman web. HTML dirancang untuk digunakan tanpa tergantung pada suatu platform tertentu. Dokumen HTML adalah suatu dokumen teks biasa dan disebut markup language karena menggunakan tkita-tkita tertentu yang disebut tag untuk mengatur bagaimana suatu dokumen ditampilkan pada browser.
Pada mulanya HTML didesain untuk menjadi sebuah bahasa yang menggambarkan suatustruktur dokumen yang tidak terikat pada perangkat keras dan perangkat lunak tertentu. Tetapi dalam penggunaannya, HTML menjadi semacam bahasa untuk mengatur format tampilan dokumen saja. HTML dirasakan sangat terbatas untuk mendukung pembuatan aplikasi-aplikasi rumit pada website.
Untuk membuat program aplikasi yang berjalan di atas web, Kita harus terlebih dahulu menguasai HTML. Saat ini telah banyak terdapat paket aplikasi yang dapat digunakan untuk membuat halaman web secara WYSIWYG (what you see is what you get) seperti Microsoft FrontPage, Macromedia DreamWeaver, Netscape Composer dan sebagainya, yang memudahkan kita untuk merancang suatu halaman web tanpa harus menguasai tag-tag HTML. Akan tetapi untuk menjadikan halaman web lebih dinamis dan lebih interaktif, penguasaan terhadap terhadap tag-tag HTML akan sangat diperlukan.
Untuk membuat situs web yang dinamis dan interaktif, tidak cukup dengan mengkitalkan HTML saja, terlebih lagi dalam membangun suatu web database. Kita akan melibatkan bahasa scripting seperti PHP, ASP, JavaScript, dan sebagainya. Dalam bahasa scripting, script diletakkan di antara tag-tag HTML, sehingga tanpa penguasaan terhadap tag-tag HTML tentu saja Kita tidak akan tahu dimana akan meletakkan suatu script di dalam suatu dokumen HTML. Sebaliknya banyak tag HTML yang dimasukkan di dalam suatu script, misalnya untuk pindah baris, membuat tabel, memasukkan gambar, link, dan untuk keperluanlainnya. Tentu saja Kita harus mengetahui tag apa saja yang diperlukan untuk keperluan tersebut.
STRUKTUR DASAR HTML
HTTP (hypertext transfer protocol) merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser. Protokol ini mentransfer dokumen-dokumen web yang ditulis atau berformat HTML. Dikatakan markup language karena HTML berfungsi untuk memformat file dokumen teks biasa untuk bisa ditampilkan pada web browser sesuai keinginan. Hal tersebut dapat dilakukan dengan menambahkan elemen atau sering disebut sebagai tag.
Elemen HTML biasanya berupa tag-tag yang berpasangan dan setiap tag ditkitai dengan simbol “<” dan “>”. Pasangan dari sebuah tag ditkitai dengan simbol ” / “. Misalnya pasangan dari tag <contoh> adalah </contoh>. Dalam hal ini <contoh> disebut sebagaielemen dan biasanya dalam suatu elemen terdapat atribut-atribut untuk mengatur elemen itu. Jadi misalnya elemen <contoh> bila ditulis dengan atributnya adalah sebagai berikut:
<contoh atribut1=”nilai_atribut1” atribut2=”nilai_atribut2” . . . >
Dalam penulisan tag HTML tidak bersifat case sensitive, artinya penggunaan huruf kecil ataupun kapital tidak menjadi masalah. Script HTML dapat dituliskan dalam text editor seperti Notepad, kemudian disimpan dengan ekstensi .htm atau .html. Untuk mengeksekusi file HTML dapat dilakukan dengan menggunakan browser seperti Internet Explorer atau Netscape Navigator melalui menu File|Open, kemudian browse ke lokasi dan nama file dimana file HTML disimpan.
Setiap dokumen HTML memiliki struktur dasar atau susunan file sebagai berikut:
<html>
<head>
<title>berisi teks yang akan muncul pada title bar browser</title>
</head>
<body>
berisi teks, gambar, atau apapun yang ingin ditampilkan
pada halaman web ada pada bagian ini.
</body>
</html>
Seperti terlihat, struktur file HTML diawali dengan sebuah tag <html> dan ditutup dengan tag </html>. Di dalam tag ini terdapat dua bagian besar, yaitu bagian yang diapit oleh tag
<head>.....</head> dan tag <body>.....</body>.
Bagian yang diapit oleh tag <head>.....</head> merupakan header dari halaman HTML dan tidak ditampilkan pada browser. Bagian ini berisi tag-tag header seperti <title>.....</title> yang berfungsi untuk menampilkan judul pada title bar window web browser dan tag lain misalnya <meta>.
Bagian yang diapit oleh tag <body>.....</body> merupakan bagian yang akan ditampilkan pada halaman web browser nantinya. Pada bagian ini Kita akan menuliskan semua jenis informasi berupa teks dengan bermacam format maupun gambar yang ingin Kita sampaikan kepada pengguna nantinya.
BAGIAN HEAD
Bagian head tidak harus ada pada sebuah dokumen HTML, tetapi pemakaian head yang benar akan meningkatkan kegunaan suatu dokumen HTML. Bagian ini menyimpan informasi yang berguna mengenai dokumen. Isi bagian head tidak ditampilkan ketika dokumen HTML diakses melalui browser, kecuali bagian title yang merupakan judul dokumen. Elemen-elemen yang terdapat pada bagian head antara lain:
1.Tag <title>
Tag ini digunakan untuk memberi judul dokumen. Judul dokumen sebaiknya tidak terlalu panjang, tetapi mampu mencerminkan isi dari dokumen.
<title>judul dokumen</title>
2. Tag <base>
Tag ini berfungsi untuk menentukan basis URL sebuah dokumen. Basis URL ini berguna bila dalam dokumen tersebut terdapat link-link yang bersifat relatif, agar link tersebut tetap bekerja meskipun dokumen dipindahkan ke direktori lain atu ke komputer lain. Elemen <base> mempunyai sebuah atribut, yaitu href yang menunjukkan sebuah alamat URL.
<base href=”http://www.situsku.com”>
3. Tag <link>
Tag ini berfungsi untuk menunjukkan relasi antar dokumen HTML. Penggunaanya:
<link rev=”made” href=mailto:nama@email.com>
4. Tag <meta>
Tag ini sangat berguna untuk memberikan deskripsi mengenai suatu dokumen HTML, seperti refresh, description, author (pengarang), keyword (kata kunci), dan lain-lain. Properti description dan keyword merupakan properti yang penting dan dijadikan referensi bagi kebanyakan program search engine yang ada di internet untuk menemukan suatu situs.
<meta name=”keywords” content=”asyik, lucu,humor”>
BAGIAN BODY
Properti dokumen diatur melalui atribut-atribut yang terdapat dalam elemen <body>. Sebagai contoh adalah pengaturan warna latar belakang halaman, warna teks, warna link, dan lain-lain.
Atribut elemen body
background = lokasi dan nama file latar belakang image dokumen
bgcolor = warna latar belakang dokumen, default putih
text = warna teks dokumen, default hitam
link = warna link dokumen, default biru
vlink = warna visited link dokumen, default ungu
alink = warna active link dokumen, default merah
bgproperties = [fixed|none] (mengatur properti gambar latar belakang)
topmargin = batas atas dokumen (pixel)
leftmargin = batas kiri dokumen (pixel)
PENGATURAN FORMAT DOKUMEN HTML
a. Heading <hn>
Tag heading <hn> berfungsi untuk memformat heading (judul dan sub-judul) dari suatu halaman web. Heading ini akan memperbesar ukuran huruf untuk setiap jenis heading. Ada enam buah heading yang dikenal di HTML, yaitu dari <h1> sampai <h6>.
b. Paragraph <p>
Tag paragraph <p> berfungsi layaknya untuk pengaturan antar paragraf dalam halaman web Kita. Untuk mengatur perataan paragraf, digunakan atribut: align=[ left | center | right], sebagai defaultnya adalah left.
c. Break <br>
Tag break <br> berfungsi untuk memberikan baris baru dalam halaman web Kita. Walaupun dalam pengetikan pada text editor terdapat perpindahan baris, namun browser akan membacanya sebagai satu baris apabila tidak terdapat tag <br>.Tag break tidak memerlukan tag penutup </br>.
c. Horizontal Rule <hr>
Tag horizontal rule <hr> berfungsi untuk menampilkan garis horisontal di halaman web Kita. Tag ini sekaligus akan membuat baris baru. Tag <hr> tidak memerlukan elemen penutup </hr>.
Atribut elemen horizontal rule
align = [ left | center | right ] (perataan horisontal, default center)
size = tebal garis, pixel, default 2
width = lebar garis, pixel atau persen, default 100%)
color = warna garis batas
noshade (garis solid)
d. Preformatted <pre>
Tag <pre> digunakan untuk membuat tampilan dokumen pada browser sama dengan tampilan pada text editor (preformatted). Dengan menggunakan tag <pre> maka tag <p> dan tag <br> tidak diperlukan lagi.
PEMFORMATAN KARAKTER
Font pada halaman HTML dapat diformat sesuai dengan desain yang Kita tentukan, baik ukuran, jenis maupun warna dengan menggunakan tag <font>.
Atribut elemen font
size = ukuran huruf, default 3
color = warna huruf, default black
face = nama_huruf
Elemen ragam karakter
<b> teks bold </b> : menghasilkan teks tebal (bold)
<i> teks italic </i> : menghasilkan teks miring (italic)
<u> teks underline </u> : menghasilkan teks bergaris bawah (underline)
ELEMEN LIST
Properti <li> digunakan untuk menampilkan informasi dalam bentuk daftar (list). Ada dua jenis daftar yang dikenal di HTML, yaitu list dalam format bullet (unordered list <ul>) dan dalam bentuk nomor (ordered list <ol>).
Atribut elemen list
Ordered list <ol type=tipe_list>
type = [ 1 | a | A | i | I ] (tipe penomoran, default 1)
Unordered list <ul type=tipe_list>
type = [ disc | square | circle ] (tipe bullet, default disc)
Tidak ada komentar:
Posting Komentar