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 dalamdocument
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 informasitambahan 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
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>
<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 kolomdalam 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 / Mendefinisikan bentuk tombol untuk mengirim semua
submit / reset form
file mendefinisikan satu baris field input yang pengguna
dapat upload file
hidden mendefinisikan satu baris field input yang pengguna
dapat menyembunyikan form
Pada tabel di atas hanyalah sebagian dari banyak karakter yang ada dalam HTML. kita hanya
mengetikan & dan pilih karakter yang akan anda gunakan. <![endif]-->