DASAR‐ DASAR HTML
Mendesain html
berarti melakukan suatu tindakan pemrograman. Namun html bukanlah
sebuah bahasa
pemrograman. Namun html hanyalah berisi perintah‐perintah yang telah
terstruktur berupa
tag‐tag penyusun. Menuliskan tag‐tag html tidaklah sebatas hanya
memasukkan
perintah‐perintah tertentu agar html kita dapat di akses oleh browser.
Mendesain
html adalah adalah
sebuah seni tersendiri. Homepage yang merupakan implementasi dari html
adalah refleksi
dari orang yang membuatnya. Untuk itu kita perlu mendesainnya dengan baik
agar para
pengunjung homepage yang kita buat merasa senang dan bermanfaat.
Mendesain html
dapat dilakukan dengan dua cara:
1. Menggunakan
html Editor, seperti Microsoft
FrontPage, Adobe Dreamweaver, dan
lain‐lain.
2. Dengan cara menuliskan sendiri secara manual satu persatu tag‐tag
html ke dalam
dokumen html (misal, Notepad, Notepad ++).
Ada kelebihan dan
kekurangan dari dua cara di atas. Cara pertama kelebihannya adalah
html Editor
merupakan sebuah program yang khusus didesain untuk membuat, melakukan
editing bahkan
mem‐publish ke internet. Dengan kemampuannya menggabungkan kemudahan
dan kecanggihan
teknologi internet ke dalam dokumen html maka cara ini sangat disukai oleh
para pemula dan
desainer yang tidak ingin belajar lebih mendalam mengenai html. Sedangkan
cara kedua adalah
menuliskan secara manual satu persatu tag‐tag html. Hal ini sangat disarakan
sulit dikarenakan
akan memakan tenaga dan waktu ekstra untuk melakukannya, ditambah
lagi
Anda harus
melakukan cara‐cara konvensional untuk melihat hasilnya pada web browser.
Namun pada cara
kedua adalah dasar dari segala bentuk html yang akan Anda pelajari, karena
dengan cara itulah
Anda akan lebih paham mengenai cara kerja dan berbagai perintah yang
biasa dipakai pada
bahasa html.
STRUKTUR DASAR HTML
Struktur dasar html dapat dijelaskan dengan
contoh berikut ini : (tulis di Notepad, buka dengan web browser )
<html>
<head>
<title>Judul
Dokumen html</title>
</head>
<body>
Penulisan
informasi Web
</body>
</html>
Dari struktur
dasar html di atas dapat dijelaskan sebagai berikut:
1.
Tag
Adalah teks khusus
(markup) berupa dua karakter "<" dan ">", sebagai
contoh <body> adalah tag
dengan nama body.
Tag harus 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.
2.
Element
Element terdiri
atas tiga bagian, yaitu tag pembuka,
isi, dan tag penutup. Sebagai contoh untuk
menampilkan judul
dokumen html pada web browser digunakan element title, dimana:
<title> ini adalah tag pembuka judul dokumen html
Judul Dokumen html ini adalah isi judul dari
dokumen html
</title> ini adalah tag penutup judul dokumen html
Tag‐tag yang
ditulis secara berpasangan pada suatu element html, tidak boleh saling tumpang
tindih dengan
pasangan tag‐tag lainnya. Contoh penulisan tag‐tag yang benar
<p>
<b>
</b>
</p>
Catatan : Jika penulisan
script salah, maka script tidak terbaca sempurna ( Error ) sehingga dapat
mengganggu
penampilan dan dinamika web itu sendiri
3.
Attribute
Attribute
mendefinisikan property dari suatu element html, yang terdiri atas nama dan
nilai.
Penulisannya
adalah sebagai berikut:
<TAG
nama-attr="nilai-attr"
nama-attr="nilai-attr"
>
</TAG>
Secara umum nilai
attribute harus berada dalam tanda petik satu atau dua. Sebagai contoh,
untuk membuat
warna teks menjadi kuning dan latarbelakang
halaman web
menjadi hitam, penulisannya adalah <body bgcolor="black"
text="yellow">
4.
Element html
Menyatakan pada
browser bahwa dokumen Web yang digunakan adalah html.
Sintaks:
<html>
</html>
5.
Element head
Merupakan kepala
dari dokumen html. Tag <head> dan tag </head> terletak di antara
tag
<html> dan tag </html>.
Sintaks:
<head>
</head>
6.
Element title
Merupakan judul
dari dokumen html yang ditampilkan pada judul jendela browser. Tag
<title>
dan tag
</title> terletak di antara tag <head> dan tag </head>.
Sintaks:
<title>
Judul Halaman HTML
</title>
7.
Element body
Element ini untuk
menampilkan isi dokumen html. Tag <body> dan tag </body> terletak
di
bawah tag
<head> dan tag </head>. Element body mempunyai attribute‐attribute
yang
menspesifikasikan
khususnya warna dan latarbelakang dokumen yang akan ditampilkan pada
browser.
Sintaks:
<body
text="v" bgcolor="w" background="uri"
link="x" alink="y"
vlink="z">
</body>
text : memberikan warna pada teks
bgcolor :
memberikan warna pada latarbelakang dokumen html
background :
memberikan latarbelakang dokumen html dalam bentuk gambar
link : memberikan
warna untuk link
alink : memberikan
warna untuk link yang sedang aktif
vlink : memberikan
warna untuk link yang telah dikunjungi.
Contoh :
<html>
<head>
<title>Judul
Dokumen html</title>
</head>
<body
bgcolor="#FFFF00" text="#FF0000"
link="#009900">
Penulisan
informasi Web<br>
<a
href="#">Text Link (Tombol) ini berwarna
hijau</a></body>
</html>
Catatan : Jika attribute
bgcolor dan background keduanya dispesifikasikan maka attribute
background yang
akan digunakan, akan tetapi jika nilai attribute background (gambar) tidak
ditemukan pada
dokumen html maka attribute bgcolor yang akan digunakan.
REFERENSI
TAG HTML
1.
HEADING
Heading adalah
sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokumen html
html menyediakan
enam tingkatan heading. Heading level 1 biasanya untuk judul utama.
Contoh:
Ketiklah dengan
program notepad dan simpan dengan nama file heading.html
<html>
<head>
<title>Headings</title>
</head>
<body>
<h1>Heading
Level 1</h1><! Tulisan ini tidak memiliki pengaruh >
<h2>Heading
Level 2</h2><! dan tidak akan muncul di browser>
<h3>Heading evel
3</h3><! Manfaatnya hanya sebagai keterangan saja>
<h4>Heading
Level 4</h4>
<h5>Heading
Level 5</h5>
<h6>Heading
Level 6</h6>
</body>
</html>
2.
PARAGRAF
Untuk membuat
paragraf digunakan tag <p>. Setelah tag <p> Anda bisa menulis isi
paragraf dan
paragraf tersebut
harus diakhiri dengan penutup </p>. Anda bisa mengatur posisi paragraf
dengan attribut
align. Atribut align diikuti dengan posisi yang diinginkan. left untuk rata
kiri, center untuk
rata tengah dan right untuk rata kanan.
Contoh:
Ketiklah dengan
program notepad dan simpan dengan nama file paragraf.html
<html>
<head>
<title>Paragraf</title>
</head>
<body>
<html>
<head>
<title>Paragraf</title>
</head>
<body>
<p
align="right"> PERHATIKAN! Paragraf ini rata kanan : If you
can’t find your
answer through the forums, or you wish to
contact me for any
other reason, the best place to write is
books@sitepoint.com.
SitePoint has a well-manned email support
system set up to
track your inquiries, and if the support staff
are unable to
answer your question, they send it straight to
me. Suggestions
for improvement as well as notices of any
mistakes you may
find are especially welcome.</p>
<p
align="center">
PERHATIKAN!
Paragraf ini berada di tengah : Craig plays bass
guitar in
Melbourne rock band Look Who’s Toxic, 4 and
indulges in all
the extracurricular activities you’d
expect of a
computer nerd/musician approaching 30 (other than
role
playing—somehow he never got into that).</p>
<p
align="left">PERHATIKAN! Paragraf ini rata kiri : All rights
reserved. No part
of this book may be reproduced, stored in a
retrieval system
or transmitted in any form or by any means,
without the prior
written permission of the publisher, except
in the case of
brief quotations embedded in critical articles
or
reviews.</p>
</body>
</html>
3.
BLOCKQUOTE
Perintah tag
<blockquote> digunakan untuk menulis kutipan teks. Dengan perintah ini
browser akan
menampilkan teks menjorok ke dalam (meng‐identasi teks) atau menampilkan teks
dalam bentuk huruf
miring.
Contoh:
Ketiklah dengan
program notepad dan simpan dengan nama file blockquote.html
<html>
<head>
<title>blockquote</title>
</head>
<body>
<h3>Sesuatu
yang perlu dicoba</h3>
<blockquote>
Trademark Not
ice<br>
Rather than
indicating every occurrence of a trademarked name
as such, this book
uses the names only in an editorial fashion
and to the benefit
of the trademark owner with no intention of
infringement of
the trademark.</blockquote>
</body>
</html>
4. PREFORMATTED
TEXT
Preformatted Text
(pre) digunakan untuk menampilkan teks sama seperti yang Anda ketikkan
dalam dokumen
html. Browser akan menampikan teks tersebut dalam font monospaced, yaitu
seperti terlihat
dalam teks yang tampilkan oleh aplikasi berbasis teks (misalnya telnet).
Contoh:
Ketiklah dengan
program notepad dan simpan dengan nama file performatted.html
<html>
<head>
<title>Preformatted
Text</title>
</head>
<body>
<pre>All
rights reserved. No part of this book may be
reproduced,<br>
stored in a retrieval system or transmitted in
any form or
<br>by any means, without the prior written
permission of
the<br> publisher, except in the case of brief
quotations<br>
embedded in critical articles or reviews.
</pre>
</body>
</html>
5.
BEGIN ROW
Tag ini digunakan
untuk menulis teks pada baris berikutnya. Tag <br> membuat baris baru
tanpa memberi
baris kosong di bawahnya.
Contoh:
Ketiklah dengan
program notepad dan simpan dengan nama file beginrow.
<html>
<head>
<title>Begin
Row</title>
</head>
<body>
<p>Software-software
yang dibutuhkan yaitu:
<br> Adobe
Photoshop
<br> Adobe
Dreamwaever
<br> Adobe
Flash
</body>
</html>
6.
UKURAN FONT
Untuk mengatur
huruf dokumen html digunakan tag <font size>. Tag <font size>
memiliki
beberapa atribut
untuk mengatur ukuran huruf yang akan digunakan.
Contoh:
Ketiklah dengan
program notepad dan simpan dengan nama file font_size.html
<html>
<head>
<title>Ukuran
font</title>
</head>
<body>
<font
size=1>Ukuran font 1</font><br>
<font
size=2>Ukuran font 2</font><br>
<font
size=3>Ukuran font 3</font><br>
<font
size=4>Ukuran font 4</font><br>
<font
size=5>Ukuran font 5</font><br>
<font
size=6>Ukuran font 6</font><br>
<font
size=7>Ukuran font 7</font>
</body>
</html>
7. MANIPULASI TEKS
Untuk memberi
efek, dekorasi atau pun manipulasi teks pada html diantaranya adalah
menebalkan, tulisan
miring(italic), memberi coretan dan lain‐lainnya
Contoh :
Ketiklah dengan
program notepad dan simpan dengan nama file manipulasi_teks.html
<html>
<head>
<title>Manipulasi
Teks</title>
</head>
<body>
<! PSYSICAL
STYLE>
<B>Tebal</B>
<br> <! untuk menebalkan teks >
<I>Miring</I>
<br> <! untuk membuat teks terlihat miring>
<U>Garis
Bawah</U> <br> <! untuk menggarisbawahi teks>
<S>Tercoret</S>
<br> <! untuk memberikan coretan pada teks>
<STRIKE>Tercoret
juga</STRIKE> <br> <! untuk memberikan coretan pada
teks >
<BLINK>
Berkedip</BLINK> <br> <! untuk membuat teks berkedip >
<TT>Seperti
mesin tik</TT> <br> <! untuk menampilkan teks dalam font
typewriter >
<BIG>Tulisan
Besar</BIG> <br> <! untuk membesarkan teks >
<SMALL>Tulisan
Kecil</SMALL> <br> <! untuk mengecilkan teks >
Teks
<SUB>subcript</SUB> <br> <! untuk membuat teks
subscript>
Teks
<SUP>supercript</SUP> <br><br> <! untuk membuat teks
superscript>
</body>
</html>
8.
WARNA FONT
Atribut color
digunakan untuk mengatur warna font yang akan digunakan. Untuk memberi nilai
pada atribut
color, ada dua cara. Cara pertama dengan menuliskan nama warna seperti Red,
Blue, Yellow,
White, dll. Sedangkan cara kedua adalah dengan menggunakan nilai RGB (Red
Green Blue) dari
suatu warna, misalnya FF0000 untuk Red, 00FF00 untuk green, dan 0000FF
untuk Blue.
Contoh:
Ketiklah dengan
program notepad dan simpan dengan nama file warna_font.
<html>
<head>
<title>Warna
Font</title>
</head>
<body>
<font
size=5>
<font
color="red">Warna merah... </font> <p>
<font color=
"#FF0000" size="5">Yang ini warna merah </font>
<p>
<font color=
"#00FF00" size="5">Kalo yang ini hijau </font>
<p>
</font>
</body>
</html>
9. ORDERED LIST
Ketiklah dengan
program notepad dan simpan dengan nama file ordered_list.html
<html>
<head>
<title>Link</title>
</head>
<body>
<! ORDERED LIST
>
ORDERED LIST
<ol>
<li>baris
pertama</li>
<li>baris
kedua </li>
<li>baris
ketiga </li>
<li>baris
keempat </li>
</ol>
</body>
</html>
SUMBER : GOOGEL
SUMBER : GOOGEL
Tidak ada komentar:
Posting Komentar