Sebelum
belajar HTML, alangkah lebih baik jika kita memahami konsep dasar HTML terlebih
dahulu.
Pengertian
HTML
HTML adalah
suatu bahasa yang dipergunakan untuk mendeskripsikan halaman web.
- HTML merupakan singkatan dari Hyper Text Markup Language.
- HTML bukan merupakan bahasa pemrograman, HTML adalah suatu markup language (bahasa markah).
- Suatu markup language berupa serangkaian markup tags.
- HTML menggunakan markup tags untuk mendeskripsikan halaman web.
HTML Tags
HTML markup
tags biasa disebut HTML tags.
- HTML tags berupa keywords atau kata kunci yang diapit oleh tanda kurung seperti <html>.
- HTML tags biasanya dipakai berpasangan seperti <b> dan </b>.
- Tag pertama dalam pasangan html tags adalah start tag atau tag awal, sedang tag kedua adalah end tag atau tag akhir.
- Start tags dan end tags biasa juga disebut opening tags dan closing tags.
HTML
Documents = Web Pages
- HTML documents atau dokumen HTML mendeskripsikan suatu web pages atau halaman web.
- HTML documents berisi HTML tags dan plain text atau text biasa.
- HTML documents atau dokumen HTML juga biasa disebut web pages atau halaman web.
Tujuan dari
sebuah web browser (seperti Internet Explorer, Firefox, Opera, Safari atau
Google Chrome) adalah untuk membaca HTML documents kemudian menampilkannya
sebagai halaman web. Browser tidak menampilkan HTML tags, tetapi menggunakan
tag tersebut untuk menterjemahkan isi dari halaman web.
1
2
3
4
5
6
7
8
9
|
<html>
<body>
<h1>Judul Pertama</h1>
<p>Paragraf
pertama</p>
</body>
</html>
|
Coba contoh
HTML diatas dengan HTML Editor.
Penjelasan
Contoh
- Teks di antara <html> dan </html> mendeskripsikan web page.
- Teks di antara <body> dan </body> adalah konten halaman web yang akan tertampil.
- Teks di antara <h1> dan </h1> digunakan untuk menampilkan judul.
- Teks di antara <p> dan </p> digunakan untuk menampilkan paragraf
FUNGSI DAN PERINTAH TAG HTML
Tag
|
Keterangan
atau Fungsi
|
<!--
... -->
|
Digunakan untuk
memberi sebuah komentar atau keterangan. Kalimat yang terletak pada kontiner
ini tidak akan terlihat pada browser
|
<!DOCTYPE>
|
Mendefinisikan
informasi tipe dokumen
|
<a>
|
Mendefinisikan
sebuah anchor, tetapi lebih tepat jika diartikan sebagai tautan dikarenakan
tautan ini digunakan untuk saling menautkan antara satu dokumen HTML ke dokumen HTML yang lain
|
<abbr>
|
Digunakan untuk
menguraikan satu ungkapan yang disingkat dan Anda dapat memberikan informasi
bermanfaat kepada penelusur-penulusur page source(halaman sumber kode) /
pembaca layar, sistem terjemahan dan mesin pencari yang berasal dari
singkatan yang sudah diuraikan, tetapi saat di browser uraian tersebut tidak
akan tampil dan hanya sebagai informasi saja
|
<acronym>
|
Mendefinisikan
akronim / fungsi tag ini kurang lebih sama dengan tag <abbr>
|
<address>
|
Mendefinisikan
informasi kontak untuk penulis/pemilik dokumen
|
<applet>
|
Digunakan
untuk memasukan file java kedalam dokumen HTML
|
<area
/>
|
Mendefinisikan
daerah yang dapat diklik (link) pada peta gambar
|
<b>
|
Membuat
teks tebal
|
<base
/>
|
Mendefinisikan
URL dasar/target untuk semua URL relatif dalam dokumen
|
<basefont
/>
|
Membuat
atribut teks default, seperti warna, ukuran, jenis font untuk semua teks
dalam dokumen
|
<bdo>
|
Digunakan
untuk menimpa arah teks
|
<big>
|
Memperbesar
ukuran teks sebesar satu point dari defaultnya
|
<blink>
|
Membuat
teks berkedip
|
<blockquote>
|
Mendefinisikan
sebuah kutipan panjang. Pada saat di browser teks akan tampil menjorok
kedalam
|
<body>
|
Mendefinisikan
body/isi dokumen HTML, berfungsi untuk menentukan bagaimana isi suatu dokumen
ditampilkan di web browsernya. Isi dokumen tersebut dapat berupa teks,
gambar, animas, link dan seterusnya
|
<br
/>
|
Memberi
baris baru/pindah baris
|
<button>
|
Mendefinisikan
sebuah tombol diklik
|
<caption>
|
Membuat
caption pada tabel
|
<center>
|
Untuk
perataan tengah terhadap teks atau gambar
|
<cite>
|
Mendefinisikan
kutipan
|
<code>
|
Mendefinisikan
sebuah bagian dari kode komputer
|
<col
/>
|
Mendefinisikan
nilai atribut dari satu kolom atau lebih dalam sebuah tabel
|
<colgroup>
|
Menentukan
kelompok dari satu kolom atau lebih dalam sebuah tabel untuk performatan
|
<dd>
|
Mendefinisikan
deskripsi dari item dalam daftar definisi
|
<del>
|
Untuk
memberi garis tengah pada teks/mencoret teks
|
<dfn>
|
Mendefinisikan
sebuah istilah definisi
|
<dir>
|
Mendefinisikan
sebuah daftar direktori
|
<div>
|
Mendefinisikan
sebuah section dalam dokumen
|
<dl>
|
Mendefinisikan
sebuah daftar definisi
|
<dt>
|
Mendefinisikan
istilah (item) dalam daftar definisi
|
<em>
|
Membuat
teks miring. Fungsi tag ini sama dengan tag <i> tetapi tag <em>
yang lebih dianjurkan/ditekankan pada penggunaan untuk teks miring
|
<embed>
|
Digunakan untuk
memasukkan file video atau file musik
|
<fieldset>
|
Untuk
mengelompokkan elemen-elemen yang terkait dalam form / membuat seperti
frame-box di dalam form
|
<font>
|
Mendefinisikan
jenis font, warna dan ukuran untuk teks
|
<form>
|
Mendefinisikan
sebuah form HTML untuk input form
|
<frame
/>
|
Mendefinisikan
frame dalam fremeset
|
<frameset>
|
Mendefinisikan
satu set frame
|
<h1>
to <h6>
|
Digunakan
untuk menunjukkan awal dari suatu header/judul dari dokumen HTML tersebut.
|
<head>
|
Digunakan untuk
memberikan informasi tentang dokumen tersebut
|
<hr
/>
|
Membuat
garis horisontal
|
<html>
|
Mendefinisikan
root dari suatu dokumen HTML
|
<i>
|
Membuat
teks miring
|
<iframe>
|
Mendefinisikan
sebuah inline frame
|
<img
/>
|
Berfungsi
untuk menampilkan gambar pada dokumen HTML
|
<input
/>
|
Mendefinisikan
input field pada form
|
<ins>
|
Membuat
teks bergaris bawah
|
<kbd>
|
Mendefinisikan
teks yang di input dari keyboard
|
<label>
|
Mendefinisikan
label untuk sebuah elemen <input>
|
<legend>
|
Mendefinisikan
sebuah caption untuk elemen <fieldset>
|
<li>
|
Digunakan
untuk menampilkan informasi dalam bentuk item daftar
|
<link
/>
|
Mendefinisikan
hubungan antara dokumen dan sumber eksternalnya
|
<listing>
|
Fungsi tag
ini sama dengan tag <pre> dan dianjurkan menggunakan tag <pre>
karena tag <listing> tidak layak/diprotes
|
<map>
|
Mendefinisikan
client-side peta gambar
|
<marquee>
|
Membuat
teks berjalan secara vertikal atau horisontal
|
<menu>
|
Mendefinisikan
sebuah daftar menu
|
<meta
/>
|
Mendefinisikan
metadata tentang sebuah dokumen HTML
|
<nobr>
|
Mencegah
ganti baris pada teks atau gambar
|
<noframes>
|
Jika
browser user tidak mendukung frame
|
<noscript>
|
Jika browser
user tidak mendukung client-side scripts
|
<object>
|
meletakkan
embed sebuah objek
|
<ol>
|
Mendefinisikan
daftar dalam format penomoran
|
<optgroup>
|
Menampilkan
beberapa pilihan yang sudah dikelompokkan dalam bentuk sebuah daftar
drop-down
|
<option>
|
Menampilkan
beberapa pilihan yang berbentuk dalam sebuah daftar drop-down
|
<p>
|
Membuat
sebuah paragraf
|
<param
/>
|
Mendefinisikan
sebuah parameter untuk objek
|
<pre>
|
Membuat
teks dengan ukuran huruf yang sama
|
<q>
|
Mendefinisikan
sebuah kutipan singkat
|
<s>
|
Untuk
memberi garis tengah pada teks/mencoret teks, fungsi tag ini sama dengan tag
<del> tetapi tag <s> tidak dianjurkan sebagai gantinya
menggunakan tag <del>
|
<samp>
|
Mendefinisikan
contoh keluaran dari program komputer
|
<script>
|
Mendefinisikan
client-side script
|
<select>
|
Membuat
daftar drop-down
|
<small>
|
Memperkecil
ukuran teks dari ukuran defaultnya
|
<span>
|
Mendefinisikan
sebuah section dalam dokumen
|
<strike>
|
Untuk memberi
garis tengah pada teks/mencoret teks, fungsi tag ini sama dengan tag
<del>
|
<strong>
|
Membuat
teks tebal, fungsi tag ini sama dengan tag <b>
|
<style>
|
Mendefinisikan
informasi
|
<sub>
|
Memberikan
efek subscript pada teks
|
<sup>
|
Memberikan
efek superscript pada teks
|
<table>
|
Membuat
tabel
|
<tbody>
|
Untuk
mengelompokkan isi body di dalam sebuah tabel
|
<td>
|
Mendefinisikan
sel di dalam sebuah tabel
|
<textarea>
|
Mendefinisikan
sebuah kontrol input multiline
|
<tfoot>
|
Untuk
mengelompokkan isi footer di dalam sebuah tabel
|
<th>
|
Mendefinisikan
sel header di dalam sebuah tabel
|
<thead>
|
Untuk
mengelompokkan isi header di dalam sebuah tabel
|
<title>
|
Membuat judul
untuk dokumen HTML
|
<tr>
|
Membuat
baris di dalam sebuah tabel
|
<tt>
|
Mendefinisikan
teletype text
|
<u>
|
Membuat
teks bergaris bawah, fungsi tag ini sama dengan tag <ins> tetapi tag
<u> tidak dianjurkan untuk kategori HTML text formatting
melainkan termasuk kategori HTML Style
|
<ul>
|
Mendefinisikan
daftar dalam format bullet
|
<var>
|
Mendefinisikan
sebuah variabel
|
<xmp>
|
Mendefinisikan
preformatted text, fungsi tag ini sama dengan tag <pre>
|
Tidak ada komentar:
Posting Komentar