2.1 Dokumen HTML
HTML kependekan dari Hyper Text Markup
Language. Dokumen HTML adalah file teks murni yang dapat dibuat dengan teks
editor. Dokumen ini dikenal sebagai web page. Dokumen HTML merupakan dokumen
yang disajikan dalam web browser. Ada dua cara untuk membuat web page, denghan
HTML editor atau editor text biasa (misal : notepad). Untuk latihan buku ini
kita menggunakan Macromedia Dreamweaver.
2.2 Penamaan Dokumen
Dokumen HTML diberi nama sembarang
kemudian diberi tambahan ekstensi ”.htm” atau ”.html”
2.3 Definisi Elemen
Dokumen HTML disusun elemen-elemen atau komponen dasar pembentu HTML. Contoh
dari elemen dokumen HTML adalah : head , body, table, paragraf, list.
2.4 Definisi Tag
Tag digunakan untuk menandai elemen dalam
suatu dokumen HTML. Tag HTML terdiri atas sebuah sudut kiri (<, tanda lebih
kecil), nama sebuah tag, dan sebuah tanda kurung sudut kanan (>, tanda lebih
besar. Tag umumnya berpasangan, sebagai contoh <H1> Dengan </H1>.
Secara umum suatu elemen dalam dokumen HTML yang dinyatakan dengan tagnya,
dituliskan : <namatag> - </namatag>
2.5 Elemen HTML yang diperlukan
Elemen yang dibutuhkan untuk membuat suatu
dokumen HTML dinyatakan dengan tag <html>,<head>, dan
<body>.Setiap dokumen terdiri atas tag head dan body. Elemn Head berisi
informasi tentang dokumen tersebut, dan elemen body berisi teks yang akan
ditampilkan di browser.
Secara umum dokumen web dibagi menjadi dua
section, yaitu section head dan section body. Sehingga setiap dokumen HTML
harus mempunyai pola sebagai berikut :
<html>
<head>
--
Informasi tentang dokumen HTML
</head>
<body>
--
Informasi yang akan ditampilkan dalam web browser
</body>
</html>
Setiap
dokumen html harus diwali dengan menuliskan tag <html> dan tag
</html> di akhir dokumen. Tag ini menandai dokumen HTML yang berarti
adalah dokumen HTML dalam satu dokumen hanya ada satu elemen html.
Section
atau elemen head ditandai dengan tag <head> diawal dan tag </head>
diakhir. Section ini beiris informasi tentang dokumen HTML, mislnya informasi
judul html yang ditandai dengan tag <title> dan diakhiri dengan tag </title>.
Section body ditandai dengan tag <body> dan diakhiri dengan tag
</body> diakhir. Section body merupakan isi dokumen yang akan ditampilakn
pada browser.
Contoh – Listing 2.1
: contoh1.html
<html>
<head>
<title>Belajar Web Design</title>
</head>
ini adalah halaman HTML
<body>
</body>
</html>
Penjelasan Contoh
Tag
pertama pada dokumen html anda adalah <html>,. Tag ini memberi tahu bahwa
ini adalah awal dari dokumen HTML. Tag terakhir pada dokumen anda adalah
</html>. Tag ini memberi tahu browser bahwa ini adalah akhir dari dokuemn
HTML. Teks antara <head> dan </head> adalah informasi header.
Informasi header tidak ditampilkan pada window browser. Hanya teks yang berada
diantara <body> dan </body> yang akan ditampilakan pada browser. Teks
diantara <title> dan </title> adalah judul dokumen yang akan
ditampilakn pada window caption.
2.6 Penggunaan Tag
·
Tag
HTML diapit dengan dua karakter kurung bersudut, < dan >.
·
Tag HTML secara normal selalu berpasangan
seperti <H!> dengan </H1>
·
Tag HTML tidak ‘case sensitive’, berarti
<H1> dama dengan <h1>
2.7 Atribut Tag
Tag dapat mempunyai atribut. Atribut
menyatakan sesuatu tentang tag tersebut. Atribut digunakan untuk mengubah
default pemformatan dokumen dengan tag yang bersangkutan.
Tag berikut tidak mempunyai atribut :
<body>. Tag <body> ini tidak menggunakan atribut, sehingga dokumen
HTML ditampilkan dengan warna background sesuai dengan definisi warna
background pada browser webnya. Umumnya berwarna putih.
Tag berikut mempunyai atribut : <body
bgcolor=”red”>. Tag <body> ini mempunyai atribut bgcolor dengan nilai
“red’. Sehingga background akan menampilkan warna merah.
2.7.1 Tag HTML
Merupakan tag dasar yang mendefinisikan
bahwa dokumen ini adalah dokumen HTML. Tag ini merupakan keharusan untuk
membuat dokumen HTML.Tag <html> sebagai pembuka dokumen HTML dan tag
</html> sebagai penutup dokumen HTML.
Contoh – Listing 2.2:
<html>
........................
</html>
2.7.1 Tag Head
Merupakan tag setelah <html> untuk
menuliskan keterangan tentang dokumen HTML. Isi teks diantara <head> dengan
</head> tidak akan ditampilkan di dalam browser.
Contoh – Listing 2.3:
<head>
<title>Belajar Web Design</title>
</head>
2.7.2 Title
Merupakan
tag yang digunakan untuk menuliskan judul dokumen HTML. Hasil tag ini akan
ditampilkan dalam window caption browser.
Contoh – Listing 2.4:
<title>Belajar Web Design
HTML</title>
2.7.3 Body
Merupakan
section dalam dokumen HTML yang akan ditampilkan dalam browser.
Contoh – Listing 2.5:
<html>
<head>
<title>Belajar Web Design</title>
</head>
<body>
ini adalah section HTML yang ditampilkan di browser
</body>
</html>
2.7.4 Paragraf
Setiap
paragraf harus dimulai dengan memberi tag <p>. Diakhir paragraf tidak
diharuskan menuliskan </p> sebagai akhir paragraf, karena tag <p>
tidak didefinisikan mempunyai tag akhir. Setiap paragraf harus dimulai dengan
<p> kembali. Setiap pergantian paragraf ditandai dengan tag <p>
Contoh – Listing 2.6:
<html>
<head>
<title>Tag Paragraf</title>
</head>
<body>
<p>berikut ini adalah paragraf
1</p>
<p>berikut
ini adalah paragraf 2</p>
<p>berikut
ini adalah paragraf 3</p>
</body>
</html>
Contoh - Listing 3.7 : paragraf2.html
<html>
<head>
<title>Paragraf</title>
</head>
<body>
<p>Pada tahun 1950-an Kolonel Sanders
(pendiri KFC) mulai mengendarai mobilnya dari kota
ke kota
</p>
<p>Contoh
lainnya Thomas Alfa Edison yang mengalami kegagalan sebanyak 9000 kali sebelum
akhirnya ia menemukan bola lampu. Dia tidak menyesal dengan
kegagalan-kegagalannya, bahkan ia berkata beruntung menemukan 8999 cara yang
salah dalam membuat bola lampu. Kemudian ia dapat membuat 1093 paten, orang
yang paling banyak memegang paten dalam sejarah Amerika</p>
</body>
</html>
2.7.5 Line Break
Kita
dapat memaksa ganti baris pada dokumen web dengan tag <br>. Ganti baris
disini dimaksudkan hanya menyajikan informasi pada baris sendiri tetapi tidak
berganti paragraf.
Contoh – Listing 2.7:
<html>
<head>
<title>Ganti
Baris</title>
<head>
<body>
ini adalah baris ke 1<br>
ini
adalah baris ke 2<br>
ini
adalah baris ke 3<br>
ini
adalah baris ke 4<br>
ini
adalah baris ke 5<br>
</body>
</html>
2.7.6 Heading
Tag heading aklan membuat tulisan
ditampilkan dengan huruf yang lebih besar atau ditebalkan. Heading dimanfaatkan
untuk menandai judul topic atau untuk menunjukkan tingkat keberartian dati teks
yang akan dituliskan. Ada 6 tingkat heading dalam HTML, dinomori
dari satu sampai dengan 6. Nomor 1 merupakan heading yang terbesar.
Contoh – Listing 2.8:
<html>
<head><title>Heading</title></head>
<body>
<h1>Heading
1</h1>
<h2>Heading
2</h2>
<h3>Heading
3</h3>
<h4>Heading
4</h4>
<h5>Heading
5</h5>
<h6>Heading
6</h6>
</body>
</html>
2.7.7 Garis Pembatas
Sebuah garis pembatas dapat
disisipkan dalam dokumen web dengan menggunakan tag <hr>
Atribut
|
Keterangan
|
Align
|
Menentukan letak garis :
center,left,right
|
Color
|
Menentukan warna garis
|
Size
|
Menentukan ukuran garis
|
Width
|
Menentukan tebal garis
|
Contoh – Listing 2.9:
<html>
<head>
<title>Horizontal Rule</title>
</head>
<body>
<p align=”center”>Paragraf
pertama</p>
<hr align=”center” color=”#0000FF”
size=”3” width=”90%”>
<p align=”center”>Paragraf
keduapertama</p>
</body>
</html>
2.7.8 Komentar
Dalam
sebuah dokumen HTML ada informasi yang berfungsi sebagai catatan atau komentar
terhadap dokumen isi komentar ini tidak akan ditampilkan dalam browser. Untuk
membuat komentar dengan menggunakan tag:
<!-- sebagai awal dan tag --> sebagai
akhir komentar.
Contoh – Listing 2.9:
<html>
<head>
<title>Horizontal Rule</title>
</head>
<body>
<!-- komentar ni tidak akan ditampilkan di
browser -->
<p>Tulisan
ini akan ditampilkan di browser</p>
</body>
</html>
2.8 Toolbar Dreamweaver untuk
dasar HTML
Macromedia Dreamweaver sebagai salah satu
aplikasi untuk membuat dan mengembangkan web menyediakan toolbar untuk semua
tag dasar HTML. Perhatikan gambar 2.5 dan gambar 2.6 yang menunjukkan toolbar
untuk dasar HTML.
Keterangan - tab Text :
·
h1 :
heading 1
·
h2 :
heading 2
·
h3 :
heading 3
·
br :
Line Break
·
p (dibalik) :
Paragraf
Keterangan – tab common : terdapat toolbar untuk tag komentar
0 comments:
Post a Comment