Menyajikan format teks dalam dokumen web
- Anatomi dokumen Web
Dasar-Dasar
HTML
HTTP (Hypertext transfer protocol)
merupakan protokol yang digunakan untuk mentransfer data antara web server ke
web browser. Protocol ini mentransfer dokumen-dokumen web yang ditulis atau
berformat HTML (Hypertext Markup Language). Dikatakan markup language karena
HTML berfungsi untuk ‘memperindah’ file teks biasa untuk ditampilkan pada
program web browser hal ini dilakukan dengan menambahkan elemen atu sering
disebut sebagai tag-tag pada file teks biasa tersebut.
Saat ini sudah dikenal HTML5 yang
menawarkan berbagai fitur menarik yang tidak didukung oleh HTML sebelumnya.
Beberapa fitur yang tersedia pada HTML5 antara lain sebagai berikut.
o Canvas.
Memungkinkan pembuatan gambar dalam kanvas. Jadi, gambar tidak lagi diambil
dari gambar utuh, melainkan bisa disusun sendiri, bak menggunakan program
Paint.
o Header.
Berguna untuk menyatakan suatu judul, yang bisa diisi dengan elemen logo dan
nama perusahaan.
o Footer.
Merupakan kebalikan dari header. Sebagai catatan kaki, elemen ini berguna untuk
menaruh informasi di bagian bawah halaman web.
o Time.
Elemen ini berguna untuk menyajikan informasi tentang waktu.
o Audio.
Memungkinkan penyajian player untuk memutar suara.
o Video.
Memungkinkan player untuk memainkan film.
Secara
prinsip, fitur pada HTML dapat dikelompokkan ke dalam :
o Struktur
halaman ;
o Presentasi
visual ;
o Peranti
penyaji gambar ;
o Pendukung
media ; dan
Peningkatan koneksi dengan
JavaScript.
Tag HTML biasanya berupa tag-tag yang
berpasangan dan ditandai dengan symbol lebih besar (<) dan (>). Pasangan
dari sebuah tag ditandai dengan symbol garis miring (/). Misalnya pasangan dari
tag <contoh > adalah</contoh>. Dalam hal ini <contoh> kita
sebut sebagai elemen 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
tidaklah case sensitive artinya pengguna huruf kecil ataupun capital tidaklah
menjadi masalah.
Struktur
Dasar Dokumen HTML
Setiap dokumen HTML memiliki
struktur dasar atau susunan file sebagai berikut:
|
<html>
<head>
<title>Judul
Halaman</title>
</head>
<body>
Berisi tentang text, gambar,
atau apapun yang
tampil pada dokumen web.
</body>
</html>
|
Seperti terlihat, struktur
file HTML diawali dengan sebuah tag<html> dan ditutup dengan tag
</html>. Di dalam tag ini terdapat dua buah bagian besar, yaitu yang
diapit oleh tag<head>…</head> dan tag <body>…</body>.
Bagian yang diapit oleh
tag HEAD merupakan header dari halaman
HTML dan tidak ditampilkan pada browser.
Bagian ini berisi tag-tag header seperti <tittle>… </tittle> yang
berpungsi untuk mengeluarkan judul pada tittle bar window web browser.
Bagian kedua, yang diapit
ole tag BODY merupakan bagian yang akan ditampilkan pada halaman web browser
nantinya. Pada bagian ini anada akan menuliskan semua jenis informasi berupa
teks dengan bermacam format maupun gambar yang ingin sampaikan pada pengguna nantinya.
Pengaturan
Properti Dokumen
Properti document diatur
melalui atribut-atribut yang terdapat dalam elemen <body>. Sebagai contoh
adalah pengaturan warna latar belakng halaman, wana teks, warna link dan
lain-lain.
Kode
Warna
Dalam pengaturan warna menggunakan
kode RGB yang mana ditampilkan dalam nilai heksadesimal. Setiap bagian dua
gigit kode menunjukkan banyaknya intensitas dari kombinasi warna merah, hijau
dan biru. Sebagai contoh 00 pada dua digit pertama berarti tidak ada warna
merah dalam kobinasi warna berikut ini adalah contoh kode warna :
|
Color
|
hexadecimal
|
Color
|
Hexadecimal
|
|
White
|
#FFFFFF
|
Black
|
#000000
|
|
Red
|
#FF0000
|
Green
|
#00FF00
|
|
Blue
|
#0000FF
|
Magenta
|
#FF00FF
|
|
Cyan
|
#00FFFF
|
Yellow
|
#FFFF00
|
|
Aquamarine
|
#70DB93
|
Chocolate
|
#5C3317
|
|
Violet
|
#9F5F9F
|
Brass
|
#B5A642
|
|
Coper
|
#B87333
|
Pink
|
#FF6EC7
|
Atribut Elemen <body>
BACKGROUND = Lokasi dan nama file (latar belakng
dokumen image dokumrn)
BGCOLOR =
Warna (warna latar belakng dokumen, default putih)
TEXT = Warna (warna teks dokumen,
default hitam)
LINK = Warna (warna link dokumen,
default biru)
VLINK = Warna (warna visited link dokumen, default ungu)
ALINK = Warna (warna aktif link dokumen, default merah)
Elemen Heading <h1>…
<h6>
Tag heading berfungsi untuk
memformat heading (judul dan sub-judul) dari suatu halam web. Heading ini akan
memperbesar ukuran huruf unruk setiap jenis heading. Ad 7 buah heading yang
dikenal di HTML, yaitu dari <h1> sampai <h6>.
Elemen
yang dihilangkan di HTML5
§ Berikut ini elemen HTML 4.01 yang
dihilangkan di HTML5:
- <acronym>
- <applet>
- <basefont>
- <big>
- <center>
- <dir>
- <font>
- <frame>
- <frameset>
- <noframes>
- <strike>
- <tt>
Dokumen HTML5
Sebuah
dokumen HTML5 seperti berikut ini, cukup ditulis dengan Text Editor ataupun
HTML Editor :
|
<!
DOCTYPE HTML>
<html>
<head>
<title>Tes HTML5</title>
</head>
<body>
Selamat belajar HTML5
</body>
</html>
|
Berikut
ini penjelasan dari dokumen HTML5 di atas :
o Sebuah
dokumen HTML5 diawali dengan <!DOCTYPE HTML>.
o Tanda
seperti <html> disebut tag. Sebuah tag seperti itu menyatakan sebuah elemen
dalam dokumen html.
o Beberapa
tag berpasangan. Sebagai contoh, <head> berpasangan dengan </head>.
o Namun,
tidak semua tag berpasangan. Sebagai contoh, <br> tidak punya pasangan.
Khusus untuk tag seperti ini, tidak ada keharusan untuk menyertakan tanda /
sebelum >. Pada XHTML, tanda seperti / memang diharuskan untuk ditulis.
o Pasangan
<html>..</html> menyatakan awal dokumen HTML.
o Di
dalam <html>..</html> terdapat pasangan <head>..</head>
dan <body>..</body>.
o Pasangan
<head>..</head> menyatakan bagian judul dokumen HTML. Isinya paling
tidak berupa pasangan <tittle>..</tittle>.
o Pasangan
<body>..</body> menyatakan bagian tubuh dokumen. Pada contoh,
Selamat belajar HTML5
muncul pada badan dokumen.Rangkuman
§
Dokumen-dokumen
web ditulis dalam format HTML (Hypertext Markup Language). Dikatakan markup
language karena HTML berfungsi untuk ‘memperindah’ file teks biasa untuk
ditampilkan pada program web browser hal ini dilakukan dengan menambahkan
elemen atu sering disebut sebagai tag-tag pada file teks biasa tersebut
Struktur
file HTML diawali dengan sebuah tag<html> dan ditutup dengan tag
</html>. Di dalam tag ini terdapat dua buah bagian besar, yaitu yang
diapit oleh tag<head>…</head> dan tag <body>…</body>
Komentar
Posting Komentar