Pembuatan Halaman HTML
Dalam membuat halaman HTML, yang harus dilakukan diantaranya:
a. Memilih text editor
Saat ini ada banyak sekali program aplikasi yang dapat digunakan untuk
membuat halaman web. Text Editor adalah program pengolah kata yang paling
dasar tanpa ada fitur-fitur yang ‘aneh-aneh’ seperti pengolah kata pada umumnya
seperti Ms Word. Salah satu kelebihan dari text editor adalah suatu file yang
dibuat dengan program ini disimpan hampir tanpa ada kode rahasia yang tak
terlihat seperti halnya dokumen Ms Word atau pengolah kata yang lainnya, yang
akan secara drastis akan menimbulkan efek pada dokumen saat akan ditampilkan
di web browser. Dengan kata lain akan lebih mudah untuk membangun suatu
halaman web dengan menggunakan text editor biasa dari pada suatu pengolah
kata.
HTML editor mempermudah pengguna untuk membuat halaman web
dengan cepat dan mudah hanya dengan menekan beberapa buah tombol yang
disediakan dan kemudian program aplikasi ini akan menghasilkan “source code”
HTML daripada memasukan semua kode-kode HTML dengan mengetikkannya
satu persatu. HTML editor merupakan suatu alat yang tepat bagi seorang web
developer; meskipun seharusnya juga sangat penting untuk mempelajari dan
mengetahui bahasa HTML sehingga dapat mengedit kode-kode yang ada dan
membetulkan dokumen jika tidak dapat dilakukan oleh HTML editor. Ms Word
dan Corel WordPerfect versi yang ada saat ini juga telah mempunyai kemampuan
untuk membuat halaman web. Contoh lain adalah Microsoft FrontPage, dan
Adobe Dreamweaver.
Namun dalam makalah ini, penulis menggunakan text editor standar dari
Ms. Windows, yaitu NotePad. Karena merupakan dasar dari segala bentuk HTML
dan akan lebih paham mengenai cara kerja dan berbagai perintah yang biasa
dipakai pada bahasa HTML.
b. Memulai Notepad
NotePad adalah text editor standar yang ada baik di versi 16 bit maupun 32
bit sistem operasi Ms Windows. Untuk memulai NotePad di Ms Windows
langkah-langkahnya adalah sebagai berikut :
· Click pada tombol “Start” yang ada pada task bar Windows.
· Click pada “Program” dan lalu click pada menu direktori berlabel
“Accessories”.
· Kemudian click pada shortcut “NotePad’’.
Agar dokumen tampak lebih menarik, dapat diatur tampilannya dengan
beberapa properti. 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.
1) Kode Warna
Dalam pengaturan warna menggunakan kode RGB yang mana ditampilkan
dalam nilai heksadesimal. Setiap bagian dua digit kode menunjukkan banyaknya
intensitas dari kombinasi warna merah, hijau dan biru. Sebagai contoh 00 pada
dua digit pertama berarti tidak ada warna merah dalam kombinasi 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
Copper #B87333 Pink #FF6EC7
2) Atribut Elemen <body>
BACKGROUND = Lokasi dan nama file (latar belakang image dokumen)
BGCOLOR = Warna (warna latar belakang 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)
3) Elemen Heading <h1> ... <h6>
Tag heading berfungsi untuk memformat heading (judul dan sub-judul) dari
suatu halaman web. Heading ini akan memperbesar ukuran huruf untuk setiap
jenis heading. Ada tujuh buah heading yang dikenal di HTML, yaitu dari <h1>
sampai <h6>.
4) Elemen Paragrap <p>
Tag paragrap berfungsi layaknya untuk pengaturan antar paragraf dalam
halaman web. Dalam elemen paragrap terdapat atribut align yang berfungsi
sebagai pengaturan perataan paragraph.
5) Elemen Break <br>
Elemen Break berfungsi untuk memberikan baris baru suatu paragrap dalam
halaman web. Elemen break tidak memerlukan elemen penutup break.
6) Elemen Horisontal Rules <hr>
Elemen <hr> berfungsi untuk menampilkan garis horisontal di dalam
halaman web. Elemen <hr> tidak memerlukan elemen penutup </hr>.
ALIGN = [ left | center | right ]
Atribut Elemen Horisontal Rules :
· ALIGN = [ left | center | right ] (perataan horizontal, default center)
· SIZE = Pixels (tinggi garis, default 2)
· WIDTH = Length (lebar garis, pixel or persen, default 100%)
· NOSHADE (garis solid)
7) Elemen Pemformatan Karakter <font>
Font pada halaman HTML dapat diformat sesuai dengan desain yang
ditentukan, baik ukuran, jenis maupun warna.
Atribut Elemen Font :
SIZE = Angka (ukuran huruf, default 3)
COLOR = Warna (warna font, default hitam)
FACE = Angka (jenis font, default Times New Roman)
8) Elemen Ragam Karakter
<b>bold</b> menghasilkan huruf tebal
<i>italic</i> menghasilkan huruf miring
<u>underline</u> menghasilkan huruf bergaris bawah
9) 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 Ordered list TYPE = [ 1 | a | A | i | I ] (tipe penomoran, default
1)
Atribut Elemen Unordered list TYPE = [ disc | square | circle ] (tipe bullet,
default disc).
10) Elemen Image <img>
Untuk menampilkan gambar dalam halaman HTML, format filenya berupa
JPG atau GIF. Untuk menampilkanya digunakan tag IMG.
Atribut Elemen Image :
SRC = URI (lokasi image)
ALT = Text (text alternatif )
WIDTH = Length (lebar image)
HEIGHT = Length (tinggi image)
ALIGN = [ atas | tengah | bawah | kiri | kanan ] (perataan image)
BORDE = Length (lebar batas link)
c. Menyimpan File Script
Setelah membuat script-script HTML, kemudian langkah menyimpannya
adalah sebagai berikut :
· Click tombol “File” pada taskbar notepad, kemudian pilih “Save”.
· Pada field isian nama file (filename) , ketikkan namafile.html
· Coba jalankan browser dengan membuka “Internet Explorer”.
· Click pada menu "File .."
· Pilih pada option "Open .." yang ada pada menu "File .."
· Pada dialog box "Open" klik pada tombol "Browse .." dan cari file yang
ingin ditampilkan.
· Selanjutnya pilih tombol "Ok" jika file telah dipilih.
d. Mengedit file script
Ketika file tersebut telah ditambahkan atau diedit dan telah disimpan, maka
cara menampilkan file tersebut adalah :
· simpan hasil perubahan file html anda
· pindah ke aplikasi web browser
· Pada Ms Internet Explorer tekan tombol "REFRESH"
Web Browser akan me-load dokumen yang sama tapi dengan revisi baru
tadi. Proses ini adalah siklus Edit, Save, dan View.
Tidak ada komentar:
Posting Komentar