Nah gan, udah tahu kan dengan pengertian dari HTML dan juga fungsinya. Kali ini giliran struktur dari HTMLnya loh. Lalu apa saja sih struktur dari Hypertext Markup Language ini? Yuk baca di bawah ini.
STRUKTUR
HTML
1. Elemen
Elemen
terdiri atas dua kategori utama, yaitu elemen – elemen <HEAD> yang memberikan informasi
tentang dokumen tersebut. Elemen <HEAD> ini meliputi judul dokumen atau
hubungannya dengan dokumen lain.
Elemen lain
yaitu elemen – elemen <BODY> yang menetukan bagaimana isi dokumen
ditampilkan oleh browser. Isi elemen ini misalnya paragraph, list (daftar),
table dan lain – lain. Di dalam elemen HTML terdiri dari tag – tag beserta teks
yang ada dalam tag – tag tersebut.
2. Tag
Adalah teks
khusus (markup) berupa dua karakter "<" dan ">",
sebagai contoh <body>
adalah tag dengan nama body. Tag ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag penutup (ditambahkan karakter
"/" setelah karakter "<"), sebagai contoh <body> ini adalah tag
pembuka isi dokumen HTML, dan </body>
ini adalah tag penutup isi dokumen HTML. Yang merupakan tag-tag dasar dalam
HTML adalah:
a. <HTML></HTML>
Tag <HTML>
dan </HTML> digunakan untuk menandai awal dan akhir dari suatu file HTML.
b. <TITLE></TITLE>
Tulisan yang berada
diantara tag <TITLE> dan </TITLE> akan ditampilkan oleh browser
pada bagian title yang mana merupakan title dari jendela browser.
c. <HEAD></HEAD>
Berisi keterangan
informasi, seperti title dan jenis dokumen, ditulis diantara HEAD tags.
d. <BODY></BODY>
Bagian tag BODY
menandai awal dan akhir dari badan dokumen HTML. Tag ini memiliki sejumlah
attribut dapat ditentukan.
Contoh :
<HTML>
<HEAD>
<TITLE>TUGAS
UTS PEMROGRAMAN INTERNET 1-ISTIKHOMAH </TITLE>
</HEAD>
<BODY
TEXT="#000000" BGCOLOR="#FFFFFF">
SELAMAT
DATANG KAWAN !!!
</BODY>
</HTML>
3. Atribut
Atribut
mendefinisikan properti dari suatu elemen/tag dari HTML, yang terdiri atas nama
dan nilai.
HTML tidak
hanya menyediakan teks saja dalam dokumennya, tetapi juga mampu menampilkan
objek-objek multimedia seperti gambar, suara, video, dan bahkan telah merambah
lebih jauh dengan adanya VRML serta applet-applet Java. Untuk informasi yang
berupa teks, HTML telah menyediakan bermacam-macam elemen, seperti :
a) Paragraph, untuk membuat suatu paragraph
b) Blockquote, untuk membuat suatu kutipan teks
c) preformatted text, untuk menampilkan teks
seperti yang dituliskan
d) divider, digunakan untuk mengelompokkan suatu
teks tertentu
a.
Paragraph <p>
Elemen <P>…</P>
digunakan untuk menandai sekumpulan teks sebagai suatu paragraph. Tag <P> untuk awal paragraf
dan tag </P> digunakan untuk mengakhiri
paragraf. Tag paragraf memiliki
atribut yang dapat dipakai sebagai tambahan untuk pemformatan paragraph.
b.
Blockquote
Tag <BLOCKQUOTE> digunakan
untuk menuliskan suatu kutipan teks. Browser
biasanya menampilkan kutipan teks dengan mengidentifikasikan teks tersebut
atau dengan mengabaikan spasi dalam teks seperti tag paragraph. Kutipan teks
dinyatakan dengan indentasi yang menjorok ke dalam dan berbeda dalam satu
paragraf.
c.
Preformatted text
Pada tag paragraf, penekanan tombol
ENTER, Tab, Spasi tidak memberikan pengaruh
pada web page yang dibuat. Jika
akan menambahkan spasi dan enter pada teks dalam web page dengan menggunakan
tag <PRE>…..</PRE>. Sehingga teks
yang berada di dalam tag pre akan mengikuti sesuai dengan pengetikan
yang dilakukan.
d.
Divider dan Center
Elemen DIV digunakan untuk
membagi-bagi dokumen HTML dalam suatu hierarki yang terstruktur. Teks yang
dikelilingi oleh tag <DIV>……..</DIV> akan diformat menurut nilai
atribut ALIGN yang ditentukan di dalamnya. Nilai atribut ALIGN yaitu, Left,
Center dan Right. Penggunaan DIV dengan Align=”center” dapat diganti dengan tag
<CENTER>….<CENTER>.
Nah, sebagai bonus, ini nih cara efektif untuk membuat halaman HTML.
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.
ALIGN = [ left | center | right ]
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>.
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.
Yap, itu dia gan tentang struktur dari HTML. Nah, selain ngobrolin HTML sampe berbusa besok bahas tentang apa ya? Bisa request ya gan
No comments:
Post a Comment