Sabtu, 19 September 2015
Definisi HTML
HTML adalah singkatan dari HyperText Markup Language
adalah salah satu bahasa pemrograman web desain dan
juga biasa di sebut script untuk menyusun dokumendokumen
Web.
Dokumen HTML disimpan dalam format teks reguler dan
mengandung tag-tag
yang web browser untuk
mengeksekusi perintah-perintah yang dispesifikasikan.
Struktur dasar
HTML
<html>
<head>
<title>Judul Dokumen
HTML</title>
</head>
<body>
Isi Dokumen Web
</body>
</html>
Tag
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.
Element
Element
terdiri atas tiga bagian, yaitu tag pembuka, isi, dan
tag
penutup.
Element HTML
Tag
yang berfungsi untuk membuka dan menutup seluruh
isi
dalam kode HTML. Isi dokumen yang ingin ditampilkan
di
dalam browser harus berada di dalam tag ini. Penulisan
element
HTML :
<HTML>
Isi dokumen web
</HTML>
Element Head dan Title
Tag Head
mendefinisikan bagian kepala dokumen dari
halaman
web. Tag Head digunakan untuk mendeklarasikan
judul
dokumen yang menggunakan tag Title. Penulisannya
adalah
:
<HEAD>
<TITLE>
Judul Dokumen Web
</TITLE>
</HEAD>
Element Body
Tag yang mendefinisikan isi halaman web yang ditampilkan
oleh
browser. Penulisannya adalah :
<BODY>
Isi halaman Web
</BODY>
Catatan
Catatan : Jika penulisan script salah, maka script tidak
terbaca
sempurna ( Eror ) sehingga dapat mengganggu
penampilan
dan dinamika web itu sendiri
Atribut
Atribut mendefinisikan property dari suatu element
HTML,
yang terdiri atas nama dan nilai. Penulisannya
adalah
sebagai berikut:
<TAG
Nama_atribut="nilai_atribut"
Nama_atribut=”nilai_atribut"
>
</TAG>
Atribut (Lanjutan)
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">...</body>
Keterangan:
Komentar
Seperti dalam bahasa pemrograman yang lainnya, HTML
juga memiliki komentar yang dapat digunakan untuk
menjelaskan bagian-bagian dari isi dokumen web.
Komentar dalam HTML diatur oleh tanda pembuka <!--
dan ditutup oleh tanda -->. Penulisan komentar dalam
HTML :
<!--
Isi komentar
-->
Contoh 1: Sederhana
<HTML>
<HEAD><TITLE>Dokumen
HTML</TITLE></HEAD>
<BODY bgcolor="skyblue">
Ini adalah sebuah dokumen HTML dengan
judul “Dokumen HTML” dan warna
latar/background biru langit.
Terima kasih.
</BODY>
</HTML>
Contoh 2: Heading
<HTML>
<HEAD><TITLE>Heading</TITLE></HEAD>
<BODY>
<h1>Teks dengan ukuran Heading
one</h1>
<h2>Teks dengan ukuran Heading
two</h2>
<h3>Teks dengan ukuran Heading
three</h3>
<h4>Teks dengan ukuran Heading
four</h4>
<h5>Teks dengan ukuran Heading
five</h5>
<h6>Teks dengan ukuran Heading
six</h6>
</BODY>
</HTML>
Contoh 3: Penanganan Font
<HTML>
<HEAD><TITLE>Font</TITLE></HEAD> <BODY>
<FONT face='comic sans ms'>
Teks ini berukuran normal jenis Comic
Sans MS dan
warna hitam
</FONT></BR>
<FONT size='5' face='verdana'
color='red'>
Teks ini berukuran 5 jenis Verdana dan
warna merah
</FONT></BR>
Teks cetak <b>Tebal</b>
<i>Miring</i>
<u>Garis Bawah</u>
<strike>Garis
tengah</strike>
<sup>Superscript</sup> dan
<sub>Subscript</sub>
</FONT> </BODY>
</HTML>
Contoh 4: Paragraf dan Alignment
<HTML> <HEAD>
<TITLE>Paragraf dan Align</TITLE>
</HEAD>
<BODY>
<P align="left">Format paragraf rata
kiri</P>
<P align="right">Format paragraf
rata
kanan</P>
<P align="center">Format paragraf
rata
tengah</P>
<P align="justify">Format paragraf
ini rata
kanan-kiri. Format paragraf ini rata
kanankiri.
Format paragraf ini rata kanan-kiri.
Format paragraf ini rata kanan-kiri.Format
paragraf ini rata kanan-kiri.Format paragraf
ini rata kanan-kiri.</P>
</BODY> </HTML>
Contoh 5: Penanganan Gambar
<HTML><HEAD><TITLE>Gambar</TITLE></HEAD><BODY>
<p><img src='Gambar.jpg' height='100'
width='100'>
Perataan teks di bawah secara default dan
gambar asli dengan ukuran 100 x 100
pixel</p>
<p><img src='Gambar.jpg' height='100'
width='100'
align='top' border='2'>Perataan teks di atas
dan border gambar 2 pixel</p>
<p align='center'><img src='Gambar.jpg'
height='100' width='100'
align='middle'>perataan teks di
tengah</br>dan
letak gambar di tengah dokumen</p>
</BODY></HTML>
Contoh 6: Daftar dengan Bullets dan
Numbering
<HTML> <HEAD>
<TITLE>Bullets dan Numbering</TITLE>
</HEAD>
<BODY>
<P>Daftar menggunakan Bullets</P>
<ul type='circle'>
<li>Sunday</li>
<li>Monday</li>
<li>Tuesday</li>
</ul>
Contoh 6: Daftar dengan Bullets dan
Numbering (Lanjutan)
<P>Daftar menggunakan Numbering
(angka)</P>
<ol type='1'>
<li>Sunday</li>
<li>Monday</li>
<li>Tuesday</li>
</ol>
Contoh 6: Daftar dengan
Bullets dan
Numbering (Lanjutan 2)
<P>Daftar menggunakan
Numbering
(huruf)</P>
<ol type='a'>
<li>Sunday</li>
<li>Monday</li>
<li>Tuesday</li>
</ol>
Contoh 6: Daftar dengan
Bullets dan
Numbering (Lanjutan 3)
<P>Daftar menggunakan Numbering
(huruf
romawi)</P>
<ol type='I'>
<li>Sunday</li>
<li>Monday</li>
<li>Tuesday</li>
</ol>
</BODY>
</HTML>
Sekian yang dapat saya bagikan semoga dapat membantu sodara dalam membuat web, Terima kasih
Langganan:
Posting Komentar (Atom)
0 komentar:
Posting Komentar