Pengenalan HTML
Pengertian singkat tentang HTML
HTML (Hyper Text Markup Language) merupakan bahasa
standar untuk membuat suatu dokumen HTML (halaman web) yang terdiri dari
kode-kode singkat tertentu, dimana dengan kode-kode tersebut akan memerintahkan
Web browser bagaimana untuk menampilkan halaman Web yang terdiri dari berbagai
macam format file seperti teks, grafik, animasi, link maupun audio-video.
Sedangkan Web browser adalah sebuah progam yang dapat
menterjemahkan kode perintah dari dokumen HTML tersebut sehingga dapat kita
lihat, baca dan dengar. Contoh dari Web Browser adalah Internet Explorer,
Netscape Navigator, Mozilla Firefox, Opera, Safari dll.
HTML mempunyai file perluasan (extention) htm atau
html. Dimana kedua perluasan tersebut adalah sama, jadi boleh menyimpan file
dokumen HTML dengan extention ".htm" atau ".html".
Elemen dasar HTML
|
|||
Jenis Dokumen
|
<HTML></HTML>
|
(terdapat pada awal dan akhir dari file HTML)
|
|
Judul
|
<TITLE></TITLE>
|
(harus selalu terdapat pada mukadimah)
|
|
Mukadimah (Header)
|
<HEAD></HEAD>
|
(keterangan umum, seperti judul dsb.)
|
|
Batang Tubuh
|
<BODY></BODY>
|
(isi dari halaman HTML)
|
|
Contoh
<html>
<head>
<title>Disini
titel websiteku</title>
</head>
<body>
Disini
adalah konten yang tampil di browser
</body>
</html>
Tag pertama pada dokumen HTML
diatas adalah: " <html>" tag ini merupakan awal dari suatu
dokumen HTML, dan tag " </html>" merupakan akhir dari dokumen
HTML. Isi keseluruhan dari suatu dokumen HTML selalu berada diantara tag
<html>…</html>.
Kemudian tag "
<head>…</head>" (header) adalah informasi dari dokumen HTML.
Informasi di dalam header meliputi: title, meta, style, script dll. Selain
Title informasi di dalam header ini nantinya tidak akan di tampilkan di web
browser.
Tag berikutnya adalah "
<title>…</title>" merupakan bagian dari Head, tag ini adalah
sebagai Titel dari dokumen HTML, titel ini akan tampil di titel dan tab
browser. Sebagai
Tag
"<body>…</body>" merupakan isi dari suatu dokumen HTML
yang akan ditampilkan di web browser, yang terdiri dari berbagai macam format
file berupa teks, grafik, link, animasi maupun audio-video (multimedia).
Tag
<font> termasuk
salah satu (Deprecated tags) dimana saat
ini sudah jarang digunakan karena sudah ada alternatif pengganti yang lebih
baik untuk tag tersebut. Untuk Tag <font> sebagai gantinya digunakan
atribut style atau CSS. Untuk penjelasan singkat tentang CSS ini bisa di baca
di Belajar
CSS.
Untuk
mengganti jenis font digunakan properti font-family:
<p style="font-family:Georgia">Tulisan
dengan font-family Georgia</p>
Hasil:
Tulisan
dengan font-family Georgia
Untuk
melakukan eksperimen lebih lanjut anda bisa mengganti jenis font-nya dengan
font-font yang bisa dilihat di Jenis-jenis Font Family untuk CSS
Untuk
membuat tulisan miring digunakan properti font-style:
<p
style="font-style:italic">Membuat tulisan miring</p>
Hasil:
Membuat
tulisan miring
Untuk
membuat tulisan tebal digunakan properti font-weight:
<p
style="font-weight:bold">Membuat tulisan tebal</p>
Hasil:
Membuat
tulisan tebal
Untuk
mengatur ukuran font digunakan properti font-size:
<p
style="font-size:16px">Tulisan dengan ukuran font 16px</p>
Hasil:
Tulisan
dengan ukuran font 16px
Untuk
pengaturan ukuran font-size dapat menggunakan satuan px, em, % atau pt. Kode
HTML berikut akan menghasilkan ukuran font yang sama.
<p
style="font-size:16px">Tulisan dengan ukuran 16px</p>
<p style="font-size:100%">Tulisan
dengan ukuran 100%</p>
<p
style="font-size:1em">Tulisan dengan ukuran 1em</p>
<p
style="font-size:12pt">Tulisan dengan ukuran 12pt</p>
Hasil:
Tulisan
dengan ukuran 16px
Tulisan
dengan ukuran 100%
Tulisan
dengan ukuran 1em
Tulisan dengan
ukuran 12pt
Untuk
membuat warna font digunakan properti color:
<p
style="color:blue">Tulisan ini akan berwarna biru</p>
Hasil:
Tulisan ini
akan berwarna biru
Untuk kode
warna bisa menggunakan nilai RGB, Hexadecimal atau Nama Warna. Kode HTML
berikut akan menghasilkan warna tulisan yang sama.
<p
style="color:rgb(0,128,0)">Membuat warna tulisan dengan Nilai
RGB</p>
<p
style="color:#008000">Membuat warna tulisan dengan Kode
Hexadecimal</p>
<p
style="color:green">Membuat warna tulisan dengan Nama Warna</p>
Hasil:
Membuat
warna tulisan dengan Nilai RGB
Membuat
warna tulisan dengan Kode Hexadecimal
Membuat
warna tulisan dengan Nama Warna
Ikuti link
berikut untuk melihat Kode Hexadecimal dan Nama
Warna atau
gunakan tool
kode warna untuk melihat nilai RGB.
Atribut
style dapat memiliki beberapa properti dengan dibatasi oleh tanda titik koma.
<p
style="font-family:Georgia;font-size:16px;font-weight:bold;">Contoh
tulisan dengan font-family, font-size dan font-weight</p>
Hasil:
Contoh
tulisan dengan font-family, font-size dan font-weight.
Kemudian
style tersebut diatas dapat di persingkat dengan menggunakan properti font.
<p
style="font:bold 16px Georgia">Contoh tulisan dengan properti
font.</p>
Hasil:
Contoh
tulisan dengan properti font.
ini yang komplit
<p
style="font-style:italic; font-size:30px; verdana;
color:red">Contoh tulisan dengan properti font.</p>
Hasilnya
Contoh
tulisan dengan properti font.
Tidak ada komentar:
Posting Komentar