Apa yang Anda lihat? Bandingkan dengan teks yang telah Anda ketikkan ke Notepad. Pada tampilan browser, hanya
terlihat tulisan teks “Hallo Dunia”. Adapun tag
html
dan
body
yang telah diketikkan tidak terlihat di browser. Berikut ini adalah struktur dasar sebuah halaman HTML.
Hampir semua web memiliki struktur ini.
DOCTYPE HTML PUBLIC “-W3CDTD HTML 4.0EN”
html head
-- header info digunakan memasukkan informasi mengenai dokumen, tidak akan
ditampilkan halaman web -- head
body —Semua isi yang akan ditampilkan --
: : : :
: : body
html
Pada baris pertama berisikan tag berikut.
DOCTYPE HTML PUBLIC “-W3CDTD HTML 4.0EN”
Secara teknis tag tidak diperlukan. Baris ini berisi kode yang memberitahukan browser versi HTML yang sedang
dibuat. Pada baris selanjutnya, semua isi HTML dimasukkan dalam tag
html...html
. Di dalamnya terdapat
bagian head
head...head
. Tag head memiliki fungsi
Hasil dokumen Notepad setelah diubah menjadi
dokumen HTML. Hasilnya
dibuka menggunakan Mozilla Firefox 3.
Gambar 4.1
Info TIK
Satu ciri unik HTML
adalah jika browser tidak mengenali tag
yang diberikan, browser akan mengabaikan input
tag tersebut. Browser
akan meneruskan menerjemahkan tag yang
dimengerti.
101
Pembuatan Homepage
102
mendeskripsikan header atau keterangan lain mengenai halaman web. Tag body menyediakan tempat untuk mengisi
teks yang akan ditampilkan. Perhatikan juga
tag komentar
pada --komentar Anda --. Teks di dalam tag ini tidak akan ditampilkan pada web browser. Tag ini dibuat sebagai
informasi yang mungkin berguna untuk Anda atau orang lain yang mungkin melihat kode HTML pada web tersebut.
Komentar ini sangat berguna jika halaman web yang Anda buat sudah sangat kompleks. Tag ini juga berguna sebagai
penanda dan pemisah ketika memasuki kode tag mengenai tabel, frame, dan objek lainnya. Komentar juga berguna saat
melakukan perbaikan pada kode HTML yang dibuat.
Cobalah mengetikkan tambahan berikut pada HTML yang Anda buat.
DOCTYPE HTML PUBLIC “-W3CDTD HTML 4.0EN”
html head
titleWeb Punyakutitle head
—Dibuat sebagai latihan pelajaran TIK, Januari 15, 2009--
body “Hallo Dunia” Ini adalah web pertamaku.
Web ini aku buat sebagai latihan dalam pelajaran TIK.
body
html
Save perubahan ini. Lihatlah hasilnya pada browser Anda. Jika jendela browser Anda masih terbuka dan memperlihatkan
halaman sebelumnya, cukup klik perintah refresh pada browser untuk melihat perubahan yang dilakukan. Perhatikan
penambahan tag
title title…..title. Tag title tidak akan
ditampilkan pada halaman web. Tag title dibuat sebagai identitas unik setiap dokumen serta ditampilkan sebagai judul
halaman pada title bar atau pada tab browser.
2. Membuat Baris Heading
Pada HTML, kamu dapat membuat heading dengan memasukkan tag:
hNTeks yang akan ditampilkan pada headinghN
Info TIK
Penamaan ile homepage menjadi index.html
merupakan standar yang dibuat berdasarkan
sistem pada server. Hal ini berhubungan dengan URL.
Jika pada URL dituliskan
http:www. namahomepage.edu
homepageangga maka secara otomatis
server akan mengacu pada halaman index.html dan
menampilkan dokumen ini. Untuk keperluan
web hosting
, sebaiknya langsung digunakan
nama index.html sebagai halaman utama web Anda.
Praktis Belajar Teknologi Informasi dan Komunikasi untuk Kelas XI
N pada tag hN merupakan angka 1 sampai 6 yang menunjukkan ukuran teks heading. Ukuran heading 1
merupakan paling besar, sedangkan ukuran 6 paling kecil.
Tugas
1. Buka kembali ile index.html menggunakan Notepad.
2. Kali ini Anda akan memasukkan judul halaman web menggunakan heading paling besar h1. Masukkan
tag berikut pada body teks paling atas atau setelah tag headbody.
h1Web Pribadi Angga Dwi Purwah1
3. Di bawah tag yang baru, ketikkan juga tag berikut sebagai bagian dari halaman web yang akan Anda buat.
h3Tentang Akuh3 h3Sekolahkuh3
h3Situs Favorith3
4. Save perubahan yang terjadi pada Notepad. Kembali pada web browser Anda, dengan perintah
Open dan ReloadRefresh, Anda akan menemukan perubahan yang Anda buat.
3. Memecah Paragraf
Jika Anda perhatikan, HTML tidak memutus teks yang panjang menjadi paragraf baru meskipun Anda melakukannya
pada Notepad. Untuk melakukannya Anda cukup mengetikkan tag berikut.
103
Pembuatan Homepage
104
p...teks paragraf baru...p.
Karena tag p merupakan tag spesial, Anda terkadang tidak perlu menuliskan tag penutup p. Coba Anda
ketikkan tulisan berikut dibawah teks yang telah Anda buat.
... dalam pelajaran TIK. Perkenankan aku memperkenalkan diri. Namaku
Angga Dwi Purwa, biasa dipanggil Angga. Aku sekolah di SMA 48 Bandung. Aku lahir
di Bandung 25 April 18 tahun yang lalu. Aku membuat halaman web ini semata-mata
untuk mempererat tali persaudaraan antara teman-temanku di SMA 48 Bandung. Jika kamu
siswa SMA 48 atau memang ingin bersahabat denganku, silahkan melihat-lihat homepage
pribadiku ini.
Lakukan langkah-langkah berikut: 1
Save perubahan yang terjadi pada Notepad. 2 Kembali pada web browser Anda, dengan perintah
Open
dan ReloadRefresh, Anda akan menemukan satu
paragraf panjang. Kali ini akan dibuat paragraf baru dari teks yang ada.
3 Sisipkan tag
p
pada baris paragraf yang diinginkan. Perhatikan contoh berikut.
DOCTYPE HTML PUBLIC “-W3CDTD HTML 4.0EN”
html head
titleWeb Punyakutitle head
—Dibuat sebagai latihan pelajaran TIK, Januari 15, 2009--
body h1Web Pribadi Angga Dwi Purwah1
h3Tentang Akuh3 h3Sekolahkuh3
h3Situs Favorith3 “Hallo Dunia” Ini adalah web pertamaku.
Web ini aku buat sebagai latihan dalam pelajaran TIK.
pPerkenankan aku memperkenalkan diri. Namaku Angga Dwi Purwa, biasa dipanggil
Angga. Aku sekolah di SMA 48 Bandung. Aku
Info TIK
Untuk tampilan tag heading, hasil ukuran
dan jenis font yang kamu lihat dapat berbeda-
beda pada browser yang berbeda. Misalnya, jika
pada satu browser, tag h2 menghasilkan heading
dengan font Times 36 poin, mungkin pada browser
lain tag h2 menghasilkan font Helvetica 24 poin.
Pengaturan tag
HTML hanya menetapkan header
tipe tertentu. Adapun tampilan yang diperlihatkan
bergantung browser.
Praktis Belajar Teknologi Informasi dan Komunikasi untuk Kelas XI
