A. Pengertian HTML
Menurut Wikipedia HyperText Markup
Language (HTML) adalah sebuah bahasa markah yang
digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di
dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang
ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang
terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak
pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web
dengan perintah-perintah HTML.
HTML atau kepedekan dari “Hypertext Markup Language”
merupakan bahasa pemrograman dasar yang digunakan ketika akan membuat halaman web, baik web yang
statis maupun web yang dinamis. HTML merupakan bahasa markup (markup language). Pada HTML
terdapat berbagai tag atau elemen yang dapat digunakan untuk memformat sebuah dokumen dalam web.
Jadi, HTML yaitu bahasa pemrograman dasar untuk
membuat sebuah web, yang bertujuan untuk menampilakan sebuah informasi guna
menghasilkan tampilan yang terintegerasi.
B. Fungsi HTML
Berdasarkan pengertian dari HTML, banyak hal dan
fungsi yang dapat
dilakukan antara lain :
·
Mengontrol
tampilan dari halaman web dan isinya.
·
Mempublikasikan
dokumen secara online sehingga bisa di akses dari seluruh dunia.
·
Membuat list
atau penomoran dari sekumpulan hal.
·
Menampilkan
informasi dalam bentuk tabel.
·
Membuat Sebuah
link yang digunakan untuk menuju dokument lain.
·
Membuat online
form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara
online.
·
Menambahkan
object-object seperti image, audio, video dan juga java applet dalam
document HTML.
C. Struktur HTML
a.
Elemen
Elemen terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup.Contonya
untuk menampilkan judul dokumen HTML pada web browser digunakan element title,
dimana: <title>
ini adalah tag pembuka judul dokumen HTML.
b.
Tag
Tag
merupakan teks khusus (markup)
berupa dua karakter "<" dan ">",
sebagai contoh <body> adalah tag dengan nama
body. Tag 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. Yang merupakan tag-tag dasar dalam HTML adalah:
Ø <html> </html>
Tag <html>
dan </html> digunakan untuk menandai awal dan akhir dari suatu file HTML.
Ø <title> </title>
Tulisan yang
berada diantara tag <title> dan </title> akan ditampilkan oleh
browser pada bagian title dan merupakan title dari jendela browser.
Ø <head> </head>
Berisi
keterangan informasi, seperti title dan jenis dokumen, ditulis diantara <head>
</head>.
Ø <body> </body>
Bagian tag <body> </body> menandai
awal dan akhir dari badan dokumen HTML. Tag ini memiliki sejumlah attribut yang
dapat ditentukan.
Contoh :
<html>
<head>
<title>Contoh Document HTML</title>
</head>
<body>
Hallo Pembaca Makalah Pemrograman Dasar WEBsite dengan HTML.
</body>
</html>
c. Atribut
Atribut terdapat di dalam
script sebuah elemen dan memberikan informasi tambahan
tentang elemen. Atribut selalu
ditentukan dalam tag awal Atribut ditulis dalam pasangan nama / nilai.
Nilai dari atribut harus selalu tertutup dalam tanda kutip. Tanda kutip ganda adalah
yang paling umum, tapi gaya tanda kutip tunggal juga diperbolehkan. Dalam beberapa
situasi, ketika nilai atribut itu sendiri berisi tanda kutip, maka perlu
menggunakan tanda kutip tunggal
Misalnya: name = 'John "shotgun" Nelson'.
Di bawah ini adalah daftar dari beberapa atribut yang dapat
digunakan pada setiap elemen HTML :
Atribut
|
Deskripsi
|
Class
|
Menentukan satu atau lebih classnames untuk sebuah elemen (mengacu pada
kelas dalam style sheet).
|
Id
|
Menentukan id unik untuk sebuah elemen.
|
Style
|
Menentukan inline CSS style untuk elemen.
|
Title
|
Menentukan informasi tambahan mengenai elemen (ditampilkan sebagai tool tip).
|
D. Pengaturan Halaman HTML
1. Mengatur Tulisan pada Halaman HTML.
Agar
tulisan pada halaman sebuah web terlihat rapi, maka perlu pemformatan dalam
tulisan tersebut. Baik tata cara pencetakannya maupun pengaturan tulisan yang
lain. Adapun pengaturan format tersebut antara lain :
a. Heading
Heading
adalah hal yang penting dalam sebuah Document HTML. Heading didefinisikan
dengan tag <h1> sampai dengan <h6>. Semakin besar angka dalam
penulisan tag Heading semakin kecil ukuran yang tercetak dalam Browser.
Contoh
:
<html>
<body>
<h1>Penulisan
heading 1</h1>
<h2>Penulisan
heading 2</h2>
<h3>Penulisan
heading 3</h3>
<h4>Penulisan
heading 4</h4>
<h5>Penulisan
heading 5</h5>
<h6>Penulisan
heading 6</h6>
</body>
</html>
b. Paragraf
Membuat
paragraf dalam HTML dapat menggunakannya dengan tag <p>. Pada browser,
secara otomatis penulisan paragraf akan menambahkan baris kosong sebelum dan sesudah
paragraf.
Sebagian
besar browser akan membenarkan penulisan HTML Paragraf, bahkan jika kita melupkan
tag tersebut. Tetapi, tidak menuliskan tag dalam penulisan paragraf membuat
hasil tulisan yang tercetak pada HTML tidak tertulis rapi.
Dalam
penulisan paragraf, untuk mengganti baris dalam paragraf tersebut dapat kita
gunakan tag break, dapat di tulis <br> atau <br \>.
Contoh
:
<html>
<body>
<p>Penulisan
Paragraf 1. </p>
<p>Penulisan
Paragraf 2. </p>
<p>Penulisan
<br \> Paragraf 3. </p>
</body>
</html>
c. Format Teks
Banyak
sekali tag yang digunakan untuk menformat sebuah tulisan dalam HTML. Menformat
paragraf yang di maksudkan adalah membuat text bercetak tebal, bercetak miring,
subscript text, superscript text dan masih banyak format yang lainnya. Untuk
lebih jelasnya lihat tabel.
HTML
tags Formating Text
Tags
|
Description
|
<b>
|
Mendefinisikan
Teks bercetak tebal
|
<i>
|
Mendefinisikan
Teks bercetak miring
|
<small>
|
Mendefinisikan
Teks kecil
|
<strong>
|
Mendefinisikan
Teks penting
|
<sub>
|
Mendefinisikan
Teks Subscript
|
<sup>
|
Mendefinisikan
Teks Superscript
|
<ins>
|
Mendefinisikan
Teks yang dimasukan
|
<del>
|
Mendefinisikan
Teks yang dihapus
|
HTML
Computer Output Tags
Tags
|
Descriptions
|
<code>
|
Mendefinisikan
Kode Komputer
|
<kbd>
|
Mendefinisikan
tekx Keyboard
|
<samp>
|
Mendefinisikan
Sampel kode komputer
|
<var>
|
Mendefinisikan
Variabel
|
<pre>
|
Mendefinisikan
teks terformat
|
HTML
Citations, Quotations, dan Definition Tags
Tags
|
Descriptions
|
<abbr>
|
Mendefinisikan
sebuah singakatan atau akronim
|
<address>
|
Mendefinisikan
informasi kontak untuk penulis / pemilik document
|
<bdo>
|
Mendefinisikan
arah teks
|
<blockquote>
|
Mendefinisikan
bagian yang dikutip dari sumber lain
|
<q>
|
Mendefinisikan
sebuah inline (pendek) kutipan
|
<cite>
|
Mendefinisikan
Judul karya
|
<dfn>
|
Mendefinisikan
sebuah istilah definisi
|
d. Mengatur Pemerataan Paragraf
Pemerataan
tulisan sangat mempengaruhi tampilan dari halaman web anda, ada kalanya tulisan
tertentu perlu ditampilkan pada tengah halaman, atau pun justified. Tag-tag
HTML yang mengatur pemerataan tulisan pada satu halaman:
·
<CENTER> </CENTER>
Tag ini akan menampilkan tulisan/gambar
ditengah baris.
·
<P ALIGN=LEFT|CENTER|RIGHT>
</P>
Tag paragraf digunakan untuk memulai
suatu paragraf baru disertai dengan pemerataan teks ke kiri, tengah, atau kanan
dari tampilan browser untuk paragraf bersangkutan. Suatu paragraf dapat terdiri
dari teks, gambar, hyperlink, dan element HTML lainnya.
·
<H# ALIGN=LEFT|CENTER|RIGHT>
</H#>
Ini akan merapikan tulisan ke kiri,
tengah atau kanan dari tulisan yang diberi tingkat heading.
e. Menyisipkan Gambar
<html>
<body>
<img
src="../images.jpg">
</body>
</html>
Dalam HTML,
gambar didefinisikan dengan tag <img>. Tag <img> kosong, yang
berarti mengandung atribut saja, dan tidak memiliki tag penutup. Untuk
menampilkan gambar pada halaman, Anda perlu menggunakan atribut src. Src
singkatan dari "sumber". Nilai dari atribut src adalah URL gambar
yang ingin ditampilkan.
Sintaks
untuk mendefinisikan gambar:
<img
src="url" alt="some_text">
URL menunjuk
ke lokasi di mana gambar disimpan. Sebuah gambar bernama "image.jpg",
yang terletak luar direktori dari file “image.html”.
Browser menampilkan
gambar di mana tag <img> terjadi dalam dokumen. Jika Anda menempatkan tag
gambar antara dua paragraf, browser menunjukkan paragraf pertama, maka gambar,
dan kemudian paragraf kedua.
f. Link ke Dokumen
atau Situs yang Lain
HTML tag
<a> mendefinisikan hyperlink.
Sebuah
hyperlink (atau link) adalah kata, kelompok kata, atau gambar yang dapat Anda
klik untuk melompat ke dokumen lain.
Bila Anda
memindahkan kursor di atas link dalam sebuah halaman Web, panah akan berubah
menjadi sedikit tangan. Atribut yang paling penting dari elemen <a>
adalah atribut href, yang menunjukkan tujuan link.
Secara default, link akan muncul
sebagai berikut di semua browser:
·
Link belum dikunjungi digarisbawahi dan biru
·
Sebuah link dikunjungi digarisbawahi dan ungu
·
Link aktif digarisbawahi dan merah
Contoh Penulisan tags Link :
<a
href=”http://www.example.com/”>Klik Link</a>
g. Penulisan
Komentar dalam HTML
Komentar dalam penulisan HTML hanyal untuk menandai
sebuah tags agar kita dapat lebih memahami maksud dari tujuan dari tags yang
kita buat. Penulisan Komentar tidak dapat di tampilkan dalam sebuah Browser. Tags
dari komentar adalah <!---->
Contoh :
<!-- Tulis Komentar disini -->
2. Membuat List
Agar
dokumen kita mudah dibaca dan jelas, ada bagian tertentu yang perlu ditampilkan
dalam list. List yang paling umum di Gunakan adalah Unordered List dan Ordered
List :
a.
Unordered List
Unordered
list ditandai dengan tag <ul> dan setiap daftar item ditandai dengan
<li>. Hasil dari Unordered List adalah lingkarang bulat kecil.
Contoh
:
<html>
<body>
<ul>
<li>Unordered List 1</li>
<li>Unordered List 2</li>
<li>Unordered List 3</li>
</ul>
</body>
</html>
b.
Ordered List
Ordered
list dimulai dengan tag <ol> dan setiap item daftar dimulai dengan tag
<li>. Daftar item ditandai dengan angka.
Contoh :
<html>
<body>
<ol>
<li>Ordered List 1</li>
<li>Ordered List 2</li>
<li>Ordered List 3</li>
</ol>
</body>
</html>
3. Membuat Tabel dan Pengaturannya
Tabel
didefinisikan dengan tag <table>. Sebuah tabel dibagi menjadi baris
(dengan tag <tr>), dan setiap baris dibagi menjadi beberaapa kolom
(dengan tag <td>).
Di
dalam tag <tabel> harus terdapat attribut “border” dan tebal dari border
tersebut. Jika Anda tidak menentukan atribut border, tabel akan ditampilkan
tanpa batas atau garis.
Contoh
:
<table
border="1">
<tr>
<td>Baris
1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
</tr>
<tr>
<td>Baris
2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
</tr>
</table>
Tags
|
Descriptions
|
<table>
|
Mendefinisikan
Tabel
|
<th>
|
Mendefinisikan
sel header Tabel
|
<tr>
|
Mendefinisikan
Tabel baris
|
<td>
|
Mendefinisikan
Tabel Kolom
|
<caption>
|
Mendefinisikan
Judul Tabel
|
<colgroup>
|
Menentukan sekelompok dari satu atau lebih kolom dalam sebuah tabel untuk memformat
|
<col>
|
Menentukan sifat kolom untuk
setiap kolom dalam elemen <colgroup>
|
<thead>
|
Grup isi header dalam sebuah tabel
|
<tbody>
|
isi tubuh dalam sebuah tabel
|
<tfoot>
|
isi footer dalam sebuah tabel
|
4. Membuat Form dan
Pengaturannya
From
digunakan untuk membuat sebuah inputan untuk pengguna yang nantinya akan
dikirim ke server. Bentuk form terdiri dari beberapa elemen diantaranya teks,
checkbox, radio button, tombol submit dan banyak lagi. Form juga dapat berisi
daftar pilih, textarea, fieldset, legenda, dan elemen label. Untuk lebih
jelasnya lihat Tabel :
Element pada Form
Element
|
Descriptions
|
text
|
Mendefinisikan
satu baris field input yang pengguna dapat memasukkan teks
|
password
|
Mendefinisikan
satu baris field input yang pengguna dapat memasukkan teks yang dirahasiakan
|
radio
|
mendefinisikan
satu baris field input yang pengguna dapat memilih hanya satu saja
|
checkbox
|
mendefinisikan
satu baris field input yang pengguna dapat tidak memilih atau pilih semua.
|
button
/ submit / reset
|
Mendefinisikan bentuk tombol untuk
mengirim semua form
|
file
|
mendefinisikan
satu baris field input yang pengguna dapat upload file
|
hidden
|
mendefinisikan
satu baris field input yang pengguna dapat menyembunyikan form
|
Tags
Pada Form
Tags
|
Descriptions
|
<form>
|
Mendefinisikan sebuah form HTML untuk input pengguna
|
<input>
|
Mendefinisikan sebuah kontrol input
|
<textarea>
|
Mendefinisikan sebuah kontrol input multiline (text area)
|
<label>
|
Mendefinisikan sebuah label untuk sebuah elemen
|
<fieldset>
|
terkait unsur-unsur dalam bentuk
|
<legend>
|
Mendefinisikan sebuah caption untuk elemen <fieldset>
|
<select>
|
Mendefinisikan sebuah daftar drop-down
|
<optgroup>
|
Mendefinisikan sebuah kelompok pilihan yang terkait dalam daftar drop-down
|
<option>
|
Mendefinisikan pilihan dalam daftar drop-down
|
<button>
|
Mendefinisikan sebuah tombol diklik
|
<datalist>
|
Baru Menentukan daftar pilihan yang telah ditetapkan untuk kontrol input
|
<keygen>
|
Baru Mendefinisikan kunci-pair bidang pembangkit (untuk
formulir)
|
<output>
|
Baru Mendefinisikan hasil penghitungan
|
5. Menggunakan Karakter Khusus
Berikut
ini tata cara pengetikkan untuk menampilkan karakter khusus pada halaman html :
Symbol
|
Description
|
Caracter
|
©
|
Copyright symbol
|
©
|
®
|
registered trademark
symbol
|
®
|
™
|
trademark symbol
|
™
|
|
nonbreaking space
|
|
<
|
less-than symbol
|
<
|
>
|
greater-than symbol
|
>
|
&
|
Ampersand
|
&
|
"
|
quotation mark
|
“
|
Pada tabel di atas hanyalah sebagian dari banyak
karakter yang ada dalam HTML. kita hanya mengetikan “&” dan pilih karakter
yang akan anda gunakan.
<![endif]-->
home
Home
