Tag Dasar HTML
|
HTML
|
Merupakan tag dasar yang mendifinisikan bahwa dokumen adalah
dokumen html. Tag ini
merupakan suatu keharusan
bagi pemrogram web untuk
menuliskannya sebagai
tag pertama dalam dokumen html.
Penulisan
tag seperti berikut ini :
<html> pada awal
dokumen dan </html> pada akhir
dokumen
Head
Bagian Head sebenarnya tidak harus ada pada
dokumen HTML, tetapi pemakaian
head yang benar
akan
meningkatkan
kegunaan suatu
dokumen HTML.
Isi
bagian head – kecuali judul dokumen – tidak akan terlihat oleh pembaca dokumen
tersebut. Penulisan
tag seperti berikut ini :
<head> di awal setelah <html> dan </head>
di akhir section head.
Elemen-elemen
pada bagian head akan mengerjakan
tugas-tugas sebagai berikut
:
Ø Menyediakan judul
dokumen
Ø Menjembatani hubungan antar
dokumen
Ø Memberitahu browser untuk membuat
form pencarian
Ø Menyediakan metode untuk mengirim pesan
ke tipe browser
Elemen yang mungkin terdapat pada
bagian head :
·
Tag <title>, digunakan untuk memberi
judul
dokumen. Penggunaannya adalah sebagai berikut
:
·
<title>Judul Dokumen</title>
·
Tag <base>, digunakan untuk menentukan basis URL sebuah dokumen. Contoh
penggunaannya adalah
sebagai berikut berikut :
·
Tag <link>, digunakan untuk menunjukkan relasi
antar dokumen HTML.
Tag ini
mempunyai beberapa
atribut :
|
Atribut
|
Fungsi
|
|
href
|
Menunjuk pada
URL / dokumen lain
|
|
rel
|
Mendefinisikan
relasi terhadap sebuah
dokumendan dokumen
lain yang berisi
informasi tentang personil yang member kontribusi
terhadap dokumen tersebut
|
|
rev
|
Mendefinisikan relasi
sebuah dokumen HTML dengan dokumen lain
|
|
type
|
Menentukan tipe dan paramenter dari relasi
|
Contoh penggunaannya adalah sebagai
berikut:
• Tag <meta>,
digunakan untuk mendefinisikan informasi-informasi
di luar HTML
Informasi meta dapat digunakan oleh
browser untuk menjalankan suatu
aktivitas yang
belum didukung oleh HTML.
Tag <meta> mempunyai atribut :
|
Atribut
|
Fungsi
|
|
http-equiv
|
Mendefinisikan properti dari elemen
|
|
name
|
Menyediakan deskripsi tambahan dari elemen
|
|
url
|
Mendefinisikan target dokumen
dari sebuah properti
|
|
content
|
Menyediakan nilai respon dari properti
|
Untuk lebih memperjelas penggunaan atribut
tag <META>
perhatikan
contoh
berikut ini
:
Perintah diatas
akan diterjemahkan oleh browser sebagai “tunggu 60 detik, kemudian panggil dokumen baru pada www.alamat.com". Jika atribut URL
tidak disertakan, maka halaman itu
sendiri
yang
akan dipanggil,
jadi setara dengan
mengklik tombol
Refresh / Reload pada
browser.
Penggunaan elemen
<meta> yang
paling
populer
adalah penggunaan
properti
Keyword dan Description. Kedua properti ini sangat berguna untuk membantu kerja search
engine. Biasanya search engine akan menggunakan teks yang disebutkan pada properti Keyword untuk mengindeks dokumen dan menggunakan teks yang
terdapat pada properti Description untuk
mendeskripsikan
indeks tersebut.
BODY
Bagian BODY merupakan isi dari
dokumen HTML. Semua informasi yang akan
ditampilkan, mulai dari teks, gambar,
sound, dan lain-lain, akan ditempatkan di bagian ini.
Seperti telah disebutkan di atas,
bagian BODY diawali oleh tag <body> dan
ditutup
</body>.
Atribut Fungsi:
Atributnya:
|
alink Menunjukkan warna link aktif
|
|
background Merujuk URL atau direktori dari gambar yang
digunakan sebagai
latar belakang
|
|
bgcolor Menentukan warna latar belakang
|
|
bgproperties Jika nilai atribut diisi “FIXED”, maka
gambar latar belakang tidak ikut tergulung
|
|
leftmargin Batas kiri dokumen
|
|
link Menentukan warna link yang belum dikunjungi
|
|
text Menentukan warna teks
|
|
topmargin Menentukan batas atas
|
01.latihan_01.html
<html>
<head>
<title>Penggunaan BODY</title>
</head>
<body bgcolor="silver" text="blue" vlink="#ff0000" link="green">
Ini adalah contoh penggunaan
body.
Dan ini adalah sebuah <a href="">link</a>.
</body>
</html>
Warna Nilai
|
Black #000000
|
Silver #c0c0c0
|
|
Maroon #800000
|
Red #ff0000
|
|
Green #008000
|
Lime #00ff00
|
|
Olive #808000
|
Yellow #ffff00
|
|
Navy #000080
|
Blue #0000ff
|
|
Purple #800080
|
Fuchsia #ff00ff
|
|
Teal #008080
|
Aqua #00ffff
|
|
Gray #808080
|
White #ffffff
|
Memberikan Komentar
Untuk mempermudah pembacaan kembali
kode-kode HTML, kadang-kadang ditambahkan komentar ke dalam sebuah dokumen.
Agar komentar tidak dapat dibaca pada browser, maka harus digunakan tanda khusus, yaitu <!-- dan diakhiri dengan tanda --> .
01.latihan_0 2 .htm l
<html>
<head>
<title>Penggunaan Komentar</title>
</head>
<body>
<!-- ini
merupakan suatu komentar -->
Selamat belajar html<br>. Semoga sukses!
</body>
</html>
Memformat Dokumen HTML
Dalam HTML terdapat beberapa tag yang
dapat digunakan untuk memformat dokumen.
Tag-tag tersebut diantaranya adalah :
• Tag <h#>,
membuat heading sebuah dokumen. Nilai n berkisar antara 1 hingga 6.
01.latihan_0 3 .htm l
<html>
<head>
<title>Latihan Heading</title>
</head>
<body>
<h1>Ini Heading 1</h1>
<h2>Ini Heading 2</h2>
<h3>Ini Heading 3</h3>
<h4>Ini Heading 4</h4>
<h5>Ini Heading 5</h5>
<h6>Ini Heading 6</h6>
</body>
</html>
• Tag <br />,
membuat baris baru, tidak memerlukan penutup </br>
• Tag <p>,
memulai paragaraf baru.
• Tag <hr />,
membuat garis batas horizontal, tidak memerlukan penutup </hr>
01.latihan_0 4 .htm l
<html>
<head>
<title>Cerita Ramayana</title>
</head>
<body>
Cerita wayang Ramayana, di
Kerajaan Alengka Diraja
<br>Rahwana membuat geger karena
menculik Dewi Sinta
<p>Anoman, Si Kera Putih
ditugaskan Tukul Arwana untuk
menjemput Sinta
</p>
Tukul Arwana tidak sempat
menjeputnya, karena sedang
mengisi acara di stasiun TV
Swasta
<hr />
Rama Tukul Arwana
<hr />
<br />
<h1>Bab I HTML</h1>
Ini adalah isi Bab I
<h2>1.1 Subbab HTML</h2>
Ini adalah isi Subbab 1.1
<h3>1.1.1 Sub-Subbab HTML</h3>
Ini adalah isi Sub Subbab
1.1.1
</body>
</html>
• Tag <pre>,
membuat tampilan dokumen HTML pada browser sama dengan
tampilan pada teks editor. Dengan tag
<pre>, maka tag <p> dan tag <br /> jadi
tidak diperlukan lagi.
01.latihan_0 5 .htm l
<html>
<head>
<title>Latihan PRE</title>
</head>
<body>
<pre>
Tampilan ini sma dengan
tampilan di teks editor.
Klasemen
Team Main Menang Seri Kalah
=================================================
Team A 3 2 1 0
Team B 3 2 0 1
Team c 3 1 1 1
=================================================
Kode program :
For I = 1 to 10
For J = 1 to 5
A(I,J)=I*J
Next
Next
</pre>
</body>
</html>
• Tag <center>,
Teks rata tengah
• Tag <ul> dan
<ol>
Pemformat dokumenlain yang akan
sangat banyak berguna adalah LIST (daftar).
Ada dua macam daftar, yaitu ORDERED
lists (ol) dan UNORDERED lists (ul).
01.latihan_0 6 .htm l
<html>
<head>
<title>Latihan LIST</title>
</head>
<body>
<p>Keluarga Pandawa</p>
<ol>
<li>Yudhistira</li>
<li>Bima</li>
<li>Arjuna</li>
<li>Nakula</li>
<li>Sadewa</li>
</ol>
<p>Jenis Musik</p>
<ul>
<li>Campur Sari</li>
<li>Dangdut</li>
<li>Jazz</li>
<li>Pop</li>
<li>Rock</li>
</ul>
</body>
</html>
Memformat Karakter
Melakukan format terhadap karakter
yang ditampilkan akan sangat berguna untuk
membuat sebuah dokumen menjadi
menarik dan informatif.
- Logical Format
Logical format akan menerapkan layout
dokumen secara logis dan terstruktur. Semua tag
ini memerlukan tag penutup. Tag-tag yang
termasuk logical format adalah sebagai
berikut :
• <cite>, digunakan untuk menandai suatu
kutipan (citation).
• <code>, digunakan untuk menampilkan kode-kode
pemrograman, misalnya bahas C.
• <em>, digunakan untuk menandai suatu teks
yang ditekankan (cetak miring) oleh
penulis.
• <kbd>, digunakan untuk menandai suatu teks
yang harus dimasukkan oleh user
melalui keyboard.
• <samp>, digunakan untuk menandai suatu teks
yang dimaksudkan sebagai contoh.
• <strong>, digunakan untuk menandai bagian
yang penting (cetak tebal) dari suatu
teks.
• <var>, digunakan untuk menampilkan nama
variabel.
• <dfn>, digunakan untuk menandai sebuah
subdefinisidari daftar definisi.
-Physical Format
Physical format adalah format
terhadap fisik suatu font. Semua tag ini memerlukan tag
penutup. Tag-tag yang termasuk
physical format adalah sebagai berikut :
• <b>, untuk menampilkan huruf tebal.
• <i>, untuk menampilkan huruf miring.
• <u>, untuk menampilkan garis bawah pada
teks. <tt>, untuk menampilkan huruf
seperti huruf mesin ketik.
• <strike>, untuk menampilkan garis horizontal
pada bagian tengah huruf.
• <big>, untuk menampilkan ukuran huruf yang
lebih besar.
• <small>, untuk menampilkan ukuran huruf yang
lebih kecil.
• <sub>, untuk menampilkan subscript.
• <sup>, untuk menampilkan superscript.
01.latihan_0 7 .htm l
<html>
<head>
<title>Memformat Karakter</title>
</head>
<body>
<b>Kalimat ini akan dicetak tebal</b><br>
<i>Kalimat ini akan dicetak
miring</i><br>
<u>Kalimat ini akan bergaris
bawah</u><br>
<strike>Kalimat ini akan bergaris
tengah</strike>
</body>
</html>
- Tag Font
Tag font digunakan untuk mengatur
jenis, ukuran dan warna font. Contoh penggunaannya:
01.latihan_0 8 .htm l
<html>
<head>
<title>Memformat FONT</title>
</head>
<body>
<font face="arial" size="3" color="#ff0000">
Jenis font ini adalah Arial,
berwarna merah, ukurannya 3
</font>
<br />
<font face="times new roman" size="6" color="blue">
Jenis font ini adalah Times
New Roman, berwarna biru, ukurannya 6
</font>
</body>
</html>
Menambahkan Gambar
Dokumen
HTML akan terlihat lebih menarik apabila disisipkan gambar. Format gambar
yang
dapat ditampilkan : GIF, JPEG, PCX, PNG, WMF, dll. Sedangkan format gambar
yang
dikenal oleh hampir semua browser adalah GIF dan JPEG. Untuk menambah
gambar
digunakan tag <img
/>.
Tag <img /> mempunyai atribut :
Atribut Fungsi
src Merujuk kepada URL atau direktori
lokasi gambar
align Posisi text disekitar gambar,
nilainya adalah top,
middle, bottom,
left, right
width Lebar gambar dalam satuan pixel
height Tinggi gambar dalam satuan
pixel
alt Menampilkan text pengganti jika
gambar tidak tampil
01.latihan_0 9 .htm l
<html>
<head>
<title>Menambahkan Gambar</title>
</head>
<body>
<img src="bubbles.jpg" alt="gambar gelembung"
align="middle" />
</body>
</html>
Tidak ada komentar:
Posting Komentar