Setelah mempelajari materi ini
diharapkan anda dapat memahami
struktur dasar dari dokumen HTML.
MATERI:
Struktur dasar dokumen HTML(Tag,
Element, Attribute), Element HTML,
Element HEAD, Element TITLE,
Element BODY.
STRUKTUR DASAR DOKUMEN
HTML
HTML merupakan singkatan dari
HyperText Markup Language
adalah script untuk menyusun
dokumen-dokumen Web.
Dokumen HTML disimpan dalam
format teks reguler dan
mengandung tag-tag yang
memerintahkan web browser untuk
mengeksekusi perintah-perintah
yang dispesifikasikan.
Struktur dasar dokumen
HTML adalah sebagai berikut:
Disini penulisan informasi Web
Dari struktur dasar HTML di atas
dapat dijelaskan sebagai berikut:
a. Tag
Adalah teks khusus (markup)
berupa dua karakter " <" dan ">",
sebagai contoh adalah tag
dengan nama body.
Secara umum tag ditulis secara
berpasangan, yang terdiri atas tag
pembuka dan tag penutup
(ditambahkan karakter "/" setelah
karakter "<"), sebagai contoh ini adalah tag pembuka isi
dokumen HTML, dan ini
adalah tag penutup isi dokumen
HTML.
b. Element
Element terdiri atas tiga bagian, yaitu
tag pembuka, isi, dan tag
penutup. Sebagai contoh untuk
menampilkan judul dokumen HTML
pada web
browser digunakan element title,
dimana:
dokumen HTML
Tag-tag yang ditulis secara
berpasangan pada suatu element
HTML, tidak boleh saling tumpang
tindih dengan pasangan tag-tag
lainnya.
Contoh penulisan tag-tag yang
benar
................
................
c. Attribute
Attribute mendefinisikan property
dari suatu element HTML, yang
terdiri atas nama dan nilai.
Penulisannya adalah sebagai berikut:
nama-attr="nilai-attr"
nama-attr="nilai-attr"
.................
>
.................
Secara umum nilai attribute harus
berada dalam tanda petik satu atau
dua. Sebagai contoh, untuk
membuat warna teks menjadi
kuning dan latarbelakang halaman
web menjadi hitam, penulisannya
adalah
d. Element HTML
Menyatakan pada browser
bahwa dokumen Web yang
digunakan adalah HTML.
Sintaks:
..........
e. Element HEAD
Merupakan kepala dari dokumen
HTML. Tag dan tag
terletak di antara tag dan tag
.
Sintaks:
...........
f. Element TITLE
Merupakan judul dari dokumen
HTML yang ditampilkan pada judul
jendela browser. Tag
dan tag .
Sintaks:
g. Element BODY
Element ini untuk menampilkan isi
dokumen HTML. Tag dan
tag terletak di bawah tag
dan tag .
Element BODY mempunyai
attribute-attribute yang
menspesifikasikan khususnya warna
dan latarbelakang dokumen yang
akan ditampilkan pada browser.
Sintaks:
..............
Attribute text memberikan warna
pada teks, bgcolor memberikan
warna pada latarbelakang dokumen
HTML, background memberikan
latarbelakang dokumen HTML dalam
bentuk gambar, link memberikan
nilai warna untuk link, alink
memberikan warna untuk link yang
sedang aktif, vlink memberikan
warna untuk link yang telah
dikunjungi.
Jika attribute bgcolor dan
background keduanya
dispesifikasikan maka attribute
background yang akan digunakan,
akan tetapi jika nilai attribute
background (gambar) tidak
ditemukan pada dokumen HTML
maka attribute bgcolor yang akan
digunakan.
LATIHAN
Gunakan teks editor misalkan
"Notepad" untuk menyunting dan
menyimpan script latihan di bawah
ini. Untuk melihat hasilnya bukalah
file tersebut dengan menggunakan
web browser atau gunakan editor
yang telah tersedia pada modul ini
dengan mengklik menu Editor.
Latihan 1:
Menampilkan teks:
Belajar bahasa
pemrograman web ternyata mudah
juga :)
Nama file: latihan1_1.html
Belajar bahasa
pemrograman web ternyata
mudah juga :)
Tugas tambahan:
Gantilah teks tersebut dengan teks
lainnya.
Latihan 2:
Merubah warna teks menjadi
merah:
Belajar bahasa
pemrograman web ternyata mudah
juga :)
Nama file: latihan1_2.html
Belajar bahasa
pemrograman web ternyata
mudah juga :)
Tugas tambahan:
Cobalah untuk warna: maroon,
black, yellow, white, lime, green,
blue, red, olive, navy, purple, teal,
gray, silver, fuchsia, aqua.
Latihan 3:
Merubah warna background
menjadi hitam.
Nama file: latihan1_3.html
Belajar bahasa
pemrograman web ternyata
mudah juga :)
Tugas tambahan:
Cobalah untuk warna: maroon,
black, yellow, white, lime, green,
blue, red, olive, navy, purple, teal,
gray, silver, fuchsia, aqua.
Latihan 4:
Merubah background dengan suatu
gambar.
Nama file: latihan1_4.html
Belajar bahasa
pemrograman web ternyata
mudah juga :)
catatan:
./images/ = nama direktori file
gambar disimpan
image027.jpg = nama file
gambar
Tugas tambahan:
Cobalah untuk file gambar:
image050.jpg, image052.jpg,
image058.jp
0 komentar:
Posting Komentar