Struktur Dasar dari Dokumen
HTML terdiri dari 4 elemen penting. Elemen – elemen tersebut wajib dan harus di
hafal, karena skrip dasar ini sangat fatal untuk ke tahap – tahap selanjutnya.
Berikut ini adalah 4 elemen penting dari struktur dasar dokumen HTML, beserta
dengan penjelasan singkatnya :
è Tag ini merupakan
Elemen Pertama pada struktur HTML sebagai tag pembuka / mengawali bahasa
pemrograman HTML.
è Tag penutup elemen pertama HTML.
è Tag pembuka ini
merupakan elemen Kedua, fungsinya sebagai header untuk dokument HTML.
è Tag penutup elemen
Kedua / header HTML
è Tag ini merupakan elemen Ketiga, penempatanya berada
tepat diantara tag pembuka header dan
tag penutup header . Fungsinya untuk memberikan nama judul halaman
website yang nanti hasilnya akan di tampilkan pada sudut kiri atas setelah icon
browser.
è Tag pembuka body ini adalah elemen terakhir atau elemen
Keempat dari struktur HTML. Dalam tag pembuka ini nanti akan memiliki beberapa
attribute. Attribute adalah sebuah properti dari elemen tersebut, nanti akan
dijelaskan. Hal yang perlu diperhatikan di sini adalah untuk penulisan
pada struktur HTML ditulis sekali saja !
Kemudian diantara tag pembuka body dan tag penutup body
è Tag penutup body / isi dokument HTML
Contoh penerapan di dalam notepad sebagai berikut :
- Buatlah tag elemen pertama terlebih dahulu,
- Kemudian, taruhlah cursor setelah kurung tutup tag pembuka HTML
- Buatlah tag elemen yang kedua,
- Lalu, taruhlah cursor pada bagian belakang setelah kurung penutup tag
pembuka HEAD
- Buatlah tag elemen ketiga, yaitu TITLE. Pada bagian ini, silahkan Anda
tambahkan teks berikut “Judul Website” diantara kurung penutup pada
tag pembuka TITLE dengan kurung buka pada tag penutup TITLE.
- Kemudian buatlah tag elemen terakhir yaitu tag pembuka BODY yang
ditaruh setelah kurung penutup tag penutup elemen HEAD dan tag penutup
BODY ditaruh sebelum kurung pembuka tag penutup elemen HTML.
- Berikan isian tek berikut :
“Disini ini nanti, apapun isinya akan ditampilkan di
layar browser”
ditaruh diantara tag pembuka dan penutup BODY
Gambar pada Notepad :
Gambar 2.1 Struktur Dasar HTML
2.5 Menyimpan Dokumen HTML
Setelah kita menuliskan skrip
pada notepad ( gambar 2.1 ), langkah selanjutnya adalah melakukan penyimpanan untuk
file data tersebut sebelum dieksekusi. Adapun langkahnya sebagai berikut :
1.
Pilih Menu File à Save As
atau dengan tombol CTRL + S
Gambar 2.2 Kotak Dialog Save As
2.
Tentukan dimana
letak penyimpanan untuk menyimpan file tersebut, dan buatlah sebuah folder
baru, misal : Web1 pada Drive D://
3.
Tuliskan nama
filenya misal : index , setelah memberikan nama filenya, silahkan anda
tambahkan pada bagian akhir nama file untuk diberikan sebuah ekstensi .htm
atau .html.
4.
Kemudian rubah Save
As Type : All File, dan Tekan Tombol Save atau Enter.
2.5 Mengeksekusi Dokumen HTML
Untuk menjalankan skrip program dokumen HTML
yang telah kita buat tadi langkah – langkahnya sebagai berikut :
- Cara Pertama :
- Buka Browser ( Internet Explore, Mozilla, atau
Opera, dll )
- Pilih Menu File à Pilih Open atau tekan tombol CTRL + O pada
keyboard
Gambar 2.3 Membuka File pada Browser
Gambar 2.4 Kotak Dialog Open File pada Browser
- Anda cari dimana letak file tersebut disimpan,
kemudian pilih file yang akan di buka ( misal : index.htm )
- Cara Kedua :
a.
Silahkan buka Windows
Explore atau tekan tombol Window + E
b.
Cari dimana letak
Anda menyimpan file notepad tadi, kemudian pilih filenya
c.
Double klik file
tersebut.
Gambar 2.5 Hasil Tampilan Eksekusi
File
1
1.1
1.2
1.3
1.4
1.5
1.6 Attribut dari pada Struktur HTML
Masih ingatkah Anda akan tag
BODY ? Merupakan elemen yang keberapakah dalam Struktur HTML ?
Seperti yang telah dijelaskan
pada Bab sebelumnya, bahwa di dalam tag pembuka BODY memiliki beberapa
attribute diantaranya :
1.
Latar belakang
/ background warna
Adalah membuat latar belakang halaman website dengan warna saja. Untuk sintak
bakunya :
Di dalam tanda petik pada BGCOLOR berikanlah nilai warna, seperti : Red,
Yellow, Green, dll atau juga bisa menggunakan kode warna pada
Corel atau Photoshop,namun dalam penulisannya di awali tanda # ( Pagar ) misal
: untuk hijau muda =”#00ff00”
Contoh pada
Notepad :
Gambar 2.6 Attribute Body Bgcolor
Gambar 2.7 Hasil Tampilan Body
Bgcolor
2.
Latar belakang
/ background gambar
Adalah membuat sebuah latar belakang halaman website dengan menggunakan
gambar. Untuk tipe gambarnya dapat berupa : jpg, jpeg, gif, bmp, dsb. Untuk Sintak
Bakunya sebagai berikut :
Di dalam tanda petik pada BACKGROUND berikanlah sumber gambarnya, seperti :
Yang perlu
menjadi perhatian disini antara lain :
a.
Sumber gambar yang
saya berikan didapat dengan cara :
1)
Mencari gambar di
my picture, kemudian di Copy
2)
Taruh / Paste dalam
satu folder dengan script program berada.
b.
Dalam memberikan /
menuliskan nama file gambar sesuaikan huruf besar kecilnya, spasi, dan tanda
bacanya.
c.
Perhatikan ekstensi
gambar tersebut, bilamana berekstensikan .JPEG maka cobalah anda
ketikkan ekstensi tersebut dibelakang nama file. Jika tidak bisa tampil pada
browser, silahkan dirubah dengan ekstensi .JPG
Contoh Notepad
:
Gambar 2.8
Attribute Body Background
Gambar
selanjutnya akan menjelaskan bagaimana sumber background diperoleh, mulai dari
pengkopian gambar hingga penimpaan gambar ke dalam satu folder dengan script
program.
Gambar 2.9 Sumber
Gambar Attribute Background
Gambar
2.10 Menaruh Gambar Satu Folder
Gambar 2.11
Tampilan Body Background
3.
Margin
Adalah untuk mengatur jarak antara tepi ( atas, kiri, kanan, maupun bawah )
dengan obyek pada halaman website tersebut. Di sini margin ada 4 bagian seperti
layaknya margin pada sebuah paper Ms. Word, yaitu : Topmargin untuk
batas tepi atas, Bottommargin untuk batas tepi bawah, Leftmargin
untuk batas tepi kiri, dan Rightmargin untuk batas tepi kanan. Untuk Sintak
Bakunya sebagai berikut :
Contoh Notepad
:
Gambar 2.12 Attribute Body Margin
Gambar 2.13 Tampilan Body Margin
4.
Warna Link
Adalah membuat
warna link, dimana warna link ini berbeda – beda pada saat sebelum di klik, dan
pada saat setelah diklik. Sintak baku dalam HTML :
5.
Warna Teks
Adalah untuk memberikan warna teks secara default yang
akan ditampilkan pada halaman website. Kesimpulannya apapun obyek teks yang ada di
antara tag BODY akan berwarna sesuai dengan yang dipinta. Sintak bakunya seperti
ini :
Contoh Notepad :
Gambar 2.14 Attribute Body Text
Gambar 2.15 Tampilan Body Text
