H T M L
(Hypertext Markup Language)
HTML (hypertext
markup language) merupakan salah satu format yang digunakan dalam dokumen
dan aplikasi yang berjalan di web browser. Karena itu, untuk bisa
melakukan pemrograman aplikasi di atas web
Anda harus terlebih dahulu menguasai HTML. Walaupun sekarang telah banyak
terdapat tool yang dapat Anda gunakan
untuk membuat halaman secara WYSIWYG (what
you see is what you get) seperti Frontpage
dan Netscape Editor, namun Anda
tetap harus menguasai HTML terutama untuk membuat aplikasi dengan teknologi
CGI.
Dasar-Dasar HTML
HTTP (hypertext
transfer protocol) merupakan protokol yang digunakan untuk mentransfer data
antara web server ke web browser. Protokol ini mentransfer
dokumen-dokumen web yang ditulis atau
berformat HTML (hypertext markup language).
Dikatakan markup
language karena HTML berfungsi untuk ’memperindah’ file teks biasa untuk
ditampilkan pada program web browser. Hal ini dilakukan dengan
menambahkan elemen atau sering disebut sebagai tag-tag pada file teks biasa tersebut.
Tag HTML biasanya berupa tag-tag
yang berpasangan dan ditandai dengan simbol < dan >. Pasangan dari sebuah
tag ditandai dengan tanda ‘/’.
Misalnya pasangan dari tag
<contoh> adalah </contoh>. Dalam hal ini <contoh> kita sebut
sebagai elemen dan biasanya dalam suatu elemen terdapat atribut-atribut untuk
mengatur elemen itu. Jadi misalnya elemen <contoh> bila ditulis dengan
atributnya adalah sebagai berikut : <contoh atribut1=”nilai_atribut1”
atribut2=” nilai_atribut2” … >. Dalam penulisan tag HTML tidaklah case
sensitive artinya penggunaan huruf kecil ataupun kapital tidaklah menjadi
masalah.
Struktur Dasar Dokumen HTML
Setiap
dokumen HTML memiliki struktur dasar atau susunan file sebagai berikut :
<html>
<head>
<title>berisi judul yang muncul pada
title bar web browser</title>
</head>
<body>
Berisi tentang text, gambar, atau apapun
yang ingin anda
Tampilkan pada dokumen anda ada pada bagian
ini.
</body>
</html>
Seperti terlihat, struktur file HTML diawali
dengan sebuah tag <html> dan
ditutup dengan tag </html>. Di
dalam tag ini terdapat dua buah
bagian besar, yaitu yang diapit oleh tag
<head> ... </head> dan tag
<body> ... </body>.
Bagian yang diapit oleh tag HEAD merupakan header dari halaman HTML dan tidak ditampilkan
pada browser. Bagian ini berisi tag-tag
header seperti <title> ... </title> yang berfungsi untuk
mengeluarkan judul pada title bar window
web browser. Tag lain misalnya
<meta> dan tag-tag lainnya yang akan kita pelajari.
Bagian kedua, yang diapit oleh tag BODY merupakan bagian yang akan
ditampilkan pada halaman web browser nantinya. Pada bagian ini Anda
akan menuliskan semua jenis informasi berupa teks dengan bermacam format maupun
gambar yang ingin Anda sampaikan pada pengguna nantinya.
Pengaturan Properti Dokumen
Properti
dokument diatur melalui atribut-atribut yang terdapat dalam elemen
<body>. Sebagai contoh adalah pengaturan warna latar belakang halaman,
warna teks, warna link dan lain-lain.
Kode Warna
Dalam
pengaturan warna menggunakan kode RGB yan mana ditampilkan dalam nilai
heksadesimal. Setiap bagian dua digit kode menunjukkan banyaknya intensitas
dari kombinasi warna merah, hijau dan biru. Sebagai contoh 00 pada dua digit
pertama berarti tidak ada warna merah dalam kombinasi warna. Berikut ini adalah
contoh kode warna :
|
Warna
|
Heksadesimal
|
|
White
|
#FFFFFF
|
|
Black
|
#000000
|
|
Red
|
#FF0000
|
|
Green
|
#00FF00
|
|
Blue
|
#0000FF
|
|
Magenta
|
#FF00FF
|
|
Cyan
|
#00FFFF
|
|
Yellow
|
#FFFF00
|
|
Aquamarine
|
#70DB93
|
|
Chocolate
|
#5C3317
|
|
Violet
|
#9F5F9F
|
|
Brass
|
#B5A642
|
|
Copper
|
#B87333
|
|
Pink
|
#FF6EC7
|
|
Orange
|
#FF7F00
|
Atribut Elemen BODY
BACKGROUND = URI (background image for document)
BGCOLOR = Color (background color for
document, default white)
TEXT = Color (text color for
document, default black)
LINK = Color (link color for
document, default blue)
VLINK = Color (visited link color
for document, default purple)
ALINK = Color (active link color
for document, default red)
Elemen Heading <hx>
Tag heading berfungsi untuk memformat heading (judul dan sub-judul) dari suatu
halaman web. Heading ini akan memperbesar ukuran huruf untuk setiap jenis heading. Ada tujuh buah heading yang
dikenal di HTML, yaitu dari <h1> sampai <h7>.
Latihan 01 :
<html>
<head>
<title>latihan 01</title>
</head>
<body bgcolor=#003399 text=#ffff00>
<h1>TOKO
BUKU SERBA MURAH</h1>
<h2>Toko kami menyediakan</h2>
<h3>Alat Tulis</h3>
<h4>pensil, ballpoint, penggaris dll.</h4>
<h3>Buku-Buku Pelajaran</h3>
<h4>ilmu pasti, ilmu bumi, sejarah dll.</h4>
<h3>Alat Kantor</h3>
<h4>meja, kursi, file manager dll.</h4>
</body>
</html>
jalankan browser dan buka file diatas lalu amati
apa yang terjadi, hurup pada <h1> dan </h1> akan ditampilkan lebih
besar dibandingkan <h2> dan </h2>.
Elemen Paragrap <p>
Tag
paragrap berfungsi layaknya untuk pengaturan antar paragrap dalam halaman web anda. Dalam elemen paragrap terdapat
atribut :
ALIGN=[ left | center | right ]
yang
berfungsi sebagai pengaturan perataan paragrap. Anda dapat memilih perataan
kiri, tengah atau kanan.
Elemen Break <br>
Elemen
Break berfungsi untuk memberikan baris baru suatu paragrap dalam halaman web anda. Elemen break tidak memerlukan
elemen penutup break.
Elemen Horisontal Rules <hr>
Elemen
<hr> berfungsi untuk menampilkan garis horisontal di dalam halaman web anda. Elemen <hr> tidak
memerlukan elemen penutup </hr>.
Atribut Elemen Horisontal Rules
ALIGN =[ left | center | right ]
(horizontal alignment, default center)
SIZE =Pixels (line height, default 2)
WIDTH =Length (line width, pixel or
percentage, default 100%)
NOSHADE (solid
line)
Latihan 02 :
<html>
<head>
<title>latihan 02</title>
</head>
<body bgcolor=#990066 text=#FFCCFF>
<h1>TOKO BUKU SERBA MURAH</h1>
<hr width=50% align=left>
<h2>Toko kami menyediakan</h2>
<h3>Alat Tulis</h3>
<p>pensil<br>ballpoint<br>penggaris<br>dll.</p>
<h3>Buku-Buku Pelajaran</h3>
<p>ilmu pasti<br>ilmu
bumi<br>sejarah<br>dll.</p>
<h3>Alat Kantor</h3>
<p>meja<br>kursi<br>file
manager<br>dll.</p>
</body>
</html>
Elemen Pemformatan Karakter <font>
Font pada halaman HTML dapat diformat sesuai
dengan desain yang anda tentukan, baik ukuran, jenis maupun warna.
Atribut Elemen Font
SIZE =
Number (font size adjustment, default 3)
COLOR =
Color (font color adjustment, default black)
FACE = Number (font face adjustment,
default Times New Roman)
Elemen Ragam Karakter
<b>bold</b> menghasilkan huruf tebal
<i>italic</i> menghasilkan huruf miring
<u>underline</u> menghasilkan huruf bergaris bawah
latihan 03 :
<html>
<head>
<title>latihan 03</title>
</head>
<body bgcolor=#000000 text=#FFFFFF>
<h1 align=center>
<font color=#FFFF00 face=Arial>TOKO BUKU SERBA MURAH</font>
</h1>
<hr width=360 align=center>
<h2>Toko kami menyediakan</h2>
<h3><font color=red>Alat Tulis</font></h3>
<p
align=center>pensil<br>ballpoint<br>penggaris<br>dll.</p>
<h3><font color=red>Buku-Buku
Pelajaran</font></h3>
<p align=right>ilmu pasti<br>ilmu
bumi<br>sejarah<br>dll.</p>
<h3><font color=red>Alat Kantor</font></h3>
<p
align=left>meja<br>kursi<br>file manager<br>dll.</p>
</body>
</html>
Elemen List
Propertis <li> digunakan untuk menampilkan
informasi dalam bentuk daftar (list).
Ada dua jenis daftar yang dikenal di HTML, yaitu list dalam format bullet (unordered
list <ul>) dan dalam bentuk nomor (ordered list <ol>).
Atribut Elemen List
Ordered list
TYPE = [ 1 | a | A | i | I ] (numbering style, default 1)
Unordered list
TYPE = [ disc | square | circle ] (bullet style, default disc)
Latihan 04 :
<html>
<head>
<title>latihan 04</title>
</head>
<body bgcolor=#990066 text=#FFCCFF>
<h1>TOKO BUKU SERBA MURAH</h1>
<hr width=50% align=left>
Toko
kami menyediakan
<h2>Alat Tulis</h2>
<ol>
<li>pensil
<li>ballpoint
<li>penggaris
<li>dll.
</ol>
<h2>Buku-Buku Pelajaran</h2>
<ol type=A>
<li>ilmu pasti
<ul>
<li>Fisika
<li>kimiya
<li>biyologi
</ul>
<li>ilmu bumi
<li>sejarah
<li>dll.
</ol>
<h2>Alat
Kantor</h2>
<ol type=i>
<li>meja
<li>kursi
<ul type=square>
<li>kusi lipat
<li>kursi plastik
<li>kursi-kursian
</ul>
<li>file manager
<li>dll.
</ol>
</body>
</html>
Elemen Image <img>
Anda dapat menampilkan gambar dalam halaman HTML,
format filenya berupa JPG atau GIF. Untuk menampilkanya digunakan tag IMG.
<IMG
SRC=namafilegambar>
Atribut Elemen Image
SRC =
URI (location of image)
ALT =
Text (alternate text)
WIDTH =
Length (image width)
HEIGHT =
Length (image height)
ALIGN =
[ top | middle | bottom
| left | right ] (image alignment)
BORDER =
Length (link border width)
Latihan: Menggunakan Tag Gambar
Buka contoh
sebelumnya dan tambahkan tag berikut
ini:
<html>
<head>
<title>latihan 05</title>
</head>
<body>
<img src= logo.gif>
…
…
</body>
</html>
Elemen Link/Anchor <a>
Elemen
link berfungsi sebagai penghubung antara suatu halaman dengan halaman lain,
atau ke URL lain bahkan dalam satu halaman untuk berpindah ke sub judul yang
lain. <a href = URL_tujuan>hypertext</A>
Latihan: Menggunakan Link
Link berfungsi untuk melompat ke halaman lain
pada web atau ke URL lain (internet).
hal ini dinamakan hypertext.
…..
….
<ol>
<li><A HREF=../motor/sity>nginjhen</A>
<li><A
HREF=togar.html>togar</A>
<li><A
HREF=http://www.honda.com>supra cup</A>
</ol>
….
….
Pada contoh
diatas apabila anda mengklik supra cup maka akan di link ke www.honda.com. dan apa bila anda
mengklik togar maka akan di link ke halaman togar.html
Link satu halaman
Untuk membuat link pada satu halaman, digunakan
kombinasi tag <A
NAME=tujuan1>... </A> dengan tag
<A HREF=#tujuan1> ... </A>. Contohnya jika Anda memiliki bagian
dokumen sebagai berikut:
…
…
<H2><A
NAME=bab2>BAB 2 Penjualan</A></H2>
…
…
maka bagian
lain pada dokumen Anda dapat membuat link ke bagian di atas dengan tag sebagai berikut:
<A
HREF=#bab2> BAB 2 Penjualan </A>
Elemen Tabel <table>
Tabel merupakan cara untuk menampilkan informasi
dalam bentuk sel yang terdiri atas baris dan kolom. Untuk menampilkan data
dalam bentuk tabel pada HTML, digunakan tag
<table> ... </ table >. Elemen tabel berisi properti <tr> ...
</tr> untuk menentukan baris (table
row) yang di dalamnya terdapat properti <td> ... </td> untuk
menampilkan data pada setiap set tabel (table
data).
Struktur
lengkap dari elemen tabel adalah sebagai berikut:
<table>
<tr>
<td>data baris 1 kolom 1</td>
<td>data baria 1 kolom 2</td>
</tr>
<tr>
<td>data baris 2 kolom 1</td>
<td>data haris 2 kolom 2</td>
</tr>
<tr>
<td>data baris 3 kolom l</td>
<td>data baris 3 kolom 2</td>
</tr>
</table>
Atribut Elemen Tabel
WIDTH =
Length (table width, pixels or percentage)
HEIGHT =
Length (table height, pixels or percentage)
BORDER =
Pixels (border width)
CELLSPACING =
Length (spacing between cells)
CELLPADDING= Length (spacing within cells)
ALIGN =
[ left | center | right ] (table alignment)
BGCOLOR =
Color (table background color)
Atribut Table Row
ALIGN =
[ left | center | right ] (horizontal alignment of cells in group)
VALIGN =
[ top | middle | bottom ] (vertical alignment of cells in group)
BGCOLOR =
Color (row background color)
Atribut Table Data
ROWSPAN =
Number (rows spanned by the cell)
COLSPAN =
Number (columns spanned by the cell)
ALIGN =
[ left | center | right ] (horizontal alignment)
VALIGN =
[ top | middle | bottom ] (vertical alignment)
WIDTH =
Pixels (cell width, pixels or percentage)
HEIGHT =
Pixels (cell height, pixels or percentage)
BGCOLOR =
Color (cell background color)
latihan
05 :
<html>
<head>
<title>latihan 05</title>
</head>
<body>
berikut contoh tabel dengan rowspan dan
colspan
<table width=80% border=2 cellspacing=0
cellpadding=0>
<tr>
<td>baris 1 kolom 1</td>
<td>baris i kolom 2</td>
</tr>
<tr>
<td colspan=2>baris 2 kolom 1</td>
</tr>
<tr>
<td rowspan=2>baris 3 kolom 1</td>
<td>baris 3 kolom 2</td>
</tr>
<tr>
<td>baris 4 kolom 2</td>
</tr>
</table>
</body>
</html>
Elemen Form <form>
Form HTML merupakan tag yang paling penting khususnya dalam membuat aplikasi berbasis web. Form menyediakan properti masukan
yang dapat berupa textbox, check box, radio button, dan button.
Untuk mendeklarasikan sebuah form digunakan tag <form> ... </form>. Di
dalam tag ini kita akan
mendefinisikan elemen-elemen form seperti yang telah disebutkan di atas. Selain
tag elemen form kita juga dapat
menuliskan sembarang teks, tag,
image.
Atribut Elemen Form
ACTION =
URI (form handler)
METHOD =
[ get | post ] (HTTP method for submitting form)
Properti Masukan Pada Elemen Form <input>, <textarea>, <select>
- Text Box <input type=”text”>
Digunakan untuk memasukkan input berupa text.
SIZE = size of the textbox in character,
default 20
MAXSIZE = maximum number of character will accept
NAME = name of variable to be sent to the
application
VALUE = will display its content as the
default value
- Password <input type=”password”>
Digunakan untuk memasukkan password.
SIZE = size of the textbox in character,
default 20
MAXSIZE = maximum number of character will accept
NAME = name of variable to be sent to the
application
- Hidden <input type=”hidden”>
Digunakan untuk mengirim data ke suatu aplikasi
yang tidak kita inginkan untuk dilihat oleh browser.
NAME = name of variable to be sent to the
application
VALUE = will display its content as the
default value
- Check Box <input type=”checkbox”>
Check box digunakan untuk dapat memilih lebih
dari satu pilihan.
NAME = name of variable to be sent to the
application
VALUE = usually set to a value
CHECKED (check
radio button or checkbox)
- Radio Button <input type=”radio”>
Radio button digunakan untuk dapat memilih hanya
salah satu pilihan.
NAME = name of variable to be sent to the
application
VALUE = usually set to a value
CHECKED (check
radio button or checkbox)
- Push Button <input type=”button”>
Elemen ini biasanya digunakan dengan JavaScript
atau VBScript untuk menghasilkan suatu aksi.
NAME = name of variable to be sent to the
application
VALUE = text label on the button
- Submit <input type=”submit”>
Setiap elemen form membutuhkan tombol submit
untuk mengirimkan nama dan nilainya ke suatu aplikasi yang ditentukan dalam
atribut ACTION dalam elemen FORM.
NAME = name of variable to be sent to the
application
VALUE = text label on the button
- Image Submit Button <input type=”image” src=”url”>
Digunakan untuk menggantikan tombol standar
submit dengan image.
NAME = name of variable to be sent to the
application
- Reset <input type=”reset”>
Digunakan untuk mereset semua masukan dalam form.
VALUE = text label on the button
- Text Area <textarea> … </textarea>
Elemen untuk memasukkan teks secara leluasa
seperti notepad.
NAME = name of variable to be sent to the
application
ROWS = number of rows
COLS = number of columns
- Select <select> … </select>
Daftar isi dalam properti select mengunakan tag <option>
SIZE = set the number of visible choices
NAME = name of variable to be sent to the
application
Contoh Buat
Form HTML
<html>
<head><title>latihan
form</title></head>
<body>
<form action=# method=get>
Nama : <input type=text
name=nama><p>
Alamat :<input type=text
name=alamat>
<p>Telepon :<input type=text
name=telepon>
<p>Email :<input type=text
name=email>
<p>
<select name=pekerjaan>
<option value=mahasiswa>mahasiswa
<option value=pelajar>pelajar
<option
value=peg_negeri>peg_negeri
<option value=presiden>presiden
<option value=menteri>menteri
</select>
<p>Anggota :
<input type=radio name=anggota
value=ya check>ya
<input type=radio name=anggota
value=bukan>bukan
<p>
<input type=submit value="kirim
data" name=submit>
<input type=reset
value="ulangi" name=reset>
</form>
</body>
<html>
Maaf bang saya mau copy blog anda buat tugas sekolah. terimakasih.
BalasHapusKomentar ini telah dihapus oleh pengarang.
BalasHapusKomentar ini telah dihapus oleh pengarang.
BalasHapusKomentar ini telah dihapus oleh pengarang.
BalasHapusTerima kasih bang atas materi-nya. Dengan ini saya sangat terbantu dalam mengerjakan tugas kuliah saya.
BalasHapusPerkenalkan Nama Saya adalah Muhamad Asfarezhan, NIM saya adalah 1922500056. Kunjungi website kampus saya ya https://www.atmaluhur.ac.id