�ݺ�ߣ

MAKALAH
HTML 5
Makalah ini diajukan guna melengkapi Mata Kuliah Teknologi Informasi dan Komunikasi
Dosen Pengampu :

1. Heri Triluqman Budisantoso
2. Septia Lutfi

Oleh :
Ikhsan Rusly H / 1102412085

TEKNOLOGI PENDIDIKAN
FAKULTAS ILMU PENDIDIKAN
UNIVERSITAS NEGERI SEMARANG
2013

BAB 1
PENDAHULUAN
A. Latar Belakang

Perkembangan, perubahan, dan kemajuan dunia informasi dan komunikasi
memang dirasa sangat cepat sejak orang-orang mengenal apa yang disebut website atau
internet. Sedangkan website/situs membutuhkan sebuah bahasa/command markup dalam
pengoperasian untuk menampilkan dokumen-dokumen yang diinginkan. Maka
diciptakan sebuah bahasa markup yaitu HTML. HTML (Hyper Text Markup Language)
adalah sebuah bahasa markup web design dan juga biasa di sebut script untuk menyusun
dokumen-dokumen Web. Dokumen HTML disimpan dalam format teks reguler dan
mengandung tag-tag yang memerintahkan web browser untuk membuat sebuah halaman
web dan menampilkan berbagai informasi di dalam sebuah browser Internet. Bermula
dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan
percetakan

yang

disebut

dengan

SGML (Standard

Generalized

Markup

Language), HTML adalah sebuah standar yang digunakan secara luas untuk
menampilkan halaman web. HTML saat ini merupakan standar Internet yang
didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium
(W3C). HTML dibuat oleh Tim Berners-Lee ketika masih bekerja untuk CERN dan
dipopulerkan pertama kali oleh browser Mosaic. Selama awal tahun 1990 HTML
mengalami perkembangan yang sangat pesat. Setiap pengembangan HTML pasti akan
menambahkan kemampuan dan fasilitas yang lebih baik dari versi sebelumnya. Namun
perkembangan resmi dikeluarkan pada bulan November 1995 oleh IETF (Internet
Engineering Task Force). HTML 2.0 ini merupakan penyempurnaan dari HTML+
(1993). HTML 3.0 (1995) memberikan kemampuan lebih daripada versi sebelumnya.
Sebuah usaha dari World Wide Web Consortium‟s (W3C) HTML Working Group pada
tahun 1996 menghasilkan HTML 3.2. HTML versi ini secara resmi diterbitkan pada
bulan Januari 1997. HTML versi terbaru adalah HTML 4.01 yang dikeluarkan secara
resmi oleh W3C pada tanggal 24 April 1998. HTML merupakan perbaikan dari HTML
4.0 yang lebih dulu diterbitkan. (18 Desember 1997).

B. Rumusan masalah :
1. Sejarah HTML
2. Dasar-dasar HTML 5
3. HTML tingkat lanjut
4. Fungsi dari HTML 5

C. Batasan masalah :
Makalah ini hanya memaparkan tentang HTML 5

D. Tujuan

:

Saya membuat makalah ini agar mengetahui tentang pemrograman java serta untuk
melengkapi tugas mata kuliah teknologi informasi dan komunikasi.

BAB II
PEMBAHASAN

A. SEJARAH HTML

Pemograman HTML muncul seiring perkembangan teknologi dan informasi.
Pada tahun 1980 IBM mulai untuk mengembangkan sebuah bahasa pemograman
dimana text dan format sebuah dokumen dijadikan satu dalam bahasa pemrograman
yang sering kita sebut sebagai HTML (Hyper Text Markup Language) akan tetapi
pada saat itu pihak IBM memberikan sebuah nama GML (Generalized Markup
Language).
Pada tahun 1986 ISO mengeluarkan sebuah standarisasi tentang bahasa
pemograman tersebut dan menyatakan sebuah nama baru dari GML tersebut dengan
sebutan SGML (Standard Generalized Markup Language). Kemudian pada tahun
1989, Sebuah nama HTML muncul dari pemikiran Caillau Tim yang bekerja sama
dengan Banners Lee Robert yang ketika itu masih bekerja di CERN memulai
mengembangkan bahasa pemrograman ini, dan dipopulerkan pertama kali dengan
browser Mosaic. Nah mulailah dari tahun 1990 HTML sangat berkembang dengan
cepat hingga mencapai versi HTML versi 5.0 yang digarap pada 4 Maret 2010 lalu
oleh W3C.
HTML versi 1.0 ini adalah versi pertama sejak lahirnya nama html tersebut,
memiliki sebuah kemampuan untuk heading, paragraph, hypertext, bold dan italic
text, wrapping serta memiliki dukungan dalam peletakan sebuah gambar. Lalu,
perkembangan selanjutnya HTML versi 2.0 pada 14 Januari 1996, pada versi ini ada
beberapa tambahan kemampuan diantaranya penambahan form comment, hal ini
menyebabkan adanya sebuah interaktif dan mulai dari versi ini yang menjadikan
sebuah pioneer dalam perkembangan homepage interaktif.
Tak lama kemudian HTML versi 3.0 dirilis pada 18 Desember 1997 yang
sering disebut sebut sebagai HTML+ yang mempunyai kemampuan dalam beberapa
fasilitas diantaranya adalah penambahan fitur table dalam paragraph, akan tetapi versi
ini tidak bertahan lama. Dan pada bulan Mei 1996 dikeluarkan versi baru sebagai
pengganti dan penyampurnaan versi 3.0 ini yaitu HTML versi 3.2, keluarnya versi ini
dikarenakan adanya beberapa kasus yang timbul pada pengembang browser yang

telah melakukan pendekatan dengan cara lain yang justru hal tersebut menjadi
popular, maka di bakukan versi 3.2 untuk mengakomodasi praktek yang banyak
digunakan oleh pengembang browser dan diterima secara umum, dapat dikatakan
bahwa versi 3.2 ini merupakan versi 3.0 yang dikembangkan oleh beberapa
pengembang browser seperti Netscape dan Microsoft.
Pada tahun 1999, tepatnya tanggal 24 Desember lahirlah HTML versi 4.0,
seperti yang kita kenal HTML pada saat ini penambahan link, meta, imagemaps ,
image dan lain lain sebagai penyempurnaan versi 3.2. Pada tanggal 4 Maret 2010,
terdapat sebuah informasi bahwasanya HTML versi 5.0 masih dikembangkan oleh
W3C (World Wide Web Consortium) dan IETF (Internet Engineering Task Force)
yaitu sebuah organisasi yang menangani HTML sejak versi 2.0
HTML5 ini merupakan hasil revisi dari HTML pertama yang diciptakan pada
tahun 1990 dan HTML4 pada tahun 1997. HTML5 memiliki standar baru untuk
HTML, XHTML dan DOM HTML. Tidak seperti pendahulunya, Standard HTML4
yang dijumpai banyak memiliki kelemahan untuk mendukung aplikasi web yang
interaktif. Akibat hal ini banyak orang menambahkan fitur baru baik disisi aplikasi
web ataupun disisi browser. Solusi ini dikenal dengan plugin dan salah satunya adalah
Flash dan Silverlight.
HTML5 merupakan proyek dari W3C (World Wide Web Consortium) dan
WHATWG ( Web Hypertext Application Technology Working Group). W3C
merupakan pengembang XHTM L 2.0 dan WHATWG mengembangkan situs serta
aplikasinya. Perbaikan HTML5 dari masa ke masa bertujuan untuk memperbaiki
teknologi HTML terutama mendukung teknologi multimedia terkini, mudah dibaca
dan mudah dimengerti oleh mesin. HTML5 ini telah dikenal luas oleh para developer
sejak lama namun pada April 2010 CEO Apple Inc. Steve Jobs memberikan
pernyataan bahwa Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video
ataupun menyaksikan konten multimedia apapun di internet.
HTML5 merupakan hasil terkini perkembangan dari HTML4 dan XTHML 1.1
yang selama ini dioperasikan terpisah dan dimplementasikan berbeda-beda oleh
banyak software developer web. Tujuan dibuat HTML5 ini adalah dibuatnya suatu
fitur baru yang didasarkan pada HTML, CSS, DOM, dan Javascript dan mengurangi
kebutuhan plugin untuk menampilkan multimedia eksternal contohnya Flash Player.
Sampai saat ini HTML5 masih dalam tahap pengembangan, jadi masih beberapa
browser saja yang mendukung HTML5. Contohnya Mozilla Firefox, Google Chrome,

Safari dan Opera. HTML5 memiliki satu keunggulan dimana dapat ditampilkan pada
platform berbeda namun memiliki tampilan yang sama seperti pendahulunya.

B. DASAR-DASAR HTML

Struktur dasar HTML adalah sebagai berikut:
<html>
<head>
<title>Judul Dokumen HTML</title>
</head>
<body>
penulisan informasi Web
</body>
</html>
Dari struktur dasar HTML di atas dapat dijelaskan sebagai berikut:
1.

Tag
Adalah teks khusus (markup) berupa dua karakter "<" dan ">", sebagai contoh

<body> adalah tag dengan nama body. penutup (ditambahkan karakter "/" setelah
karakter "<"), sebagai contoh <body> ini adalah tag pembuka isi dokumen HTML, dan
</body> ini adalah tag penutup isi dokumen HTML.
2.

Element
Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup.

Sebagai contoh untuk menampilkan judul dokumen HTML pada web browser digunakan
element title, dimana: <title> ini adalah tag pembuka judul dokumen HTML Judul
Dokumen HTML ini adalah isi judul dari dokumen HTML </title> ini adalah tag
penutup judul dokumen HTML Tag-tag yang ditulis secara berpasangan pada suatu
element HTML, tidak boleh saling tumpang tindih dengan pasangan tag-tag lainnya.

Contoh penulisan tag-tag yang benar
<p>
<b>
</b>
</p>
Catatan : Jika penulisan script salah, maka script tidak terbaca sempurna ( Eror )
sehingga dapat mengganggu penampilan dan dinamika web itu sendiri
3.

Attribute
Attribute mendefinisikan property dari suatu element HTML, yang terdiri atas

nama dan nilai. Penulisannya adalah sebagai berikut:
<TAG>
nama-attr="nilai-attr"
nama-attr="nilai-attr"
>
</TAG>

Secara umum nilai attribute harus berada dalam tanda petik satu atau dua.
Sebagai contoh, untuk membuat warna teks menjadi kuning dan latarbelakang halaman
web menjadi hitam, penulisannya adalah <body bgcolor="black" text="yellow">
4.

Element HTML

Menyatakan pada browser bahwa dokumen Web yang digunakan adalah HTML.
Sintaks:
<html>
</html>
5.

Element HEAD
Merupakan kepala dari dokumen HTML. Tag <head> dan tag </head> terletak di

antara tag <html> dan tag </html>. Sintaks:
<head>
</head>
6.

Element TITLE
Merupakan judul dari dokumen HTML yang ditampilkan pada judul jendela

browser. Tag <title> dan tag </title> terletak di antara tag <head> dan tag </head>.
Sintaks:

<title>
</title>

7.

Element BODY
Element ini untuk menampilkan isi dokumen HTML. Tag <body> dan tag

</body> terletak di bawah tag <head> dan tag </head>. Element BODY mempunyai
attribute-attribute yang menspesifikasikan khususnya warna dan latarbelakang dokumen
yang akan ditampilkan pada browser.
Sintaks:
<body text="v" bgcolor="w" background="uri" link="x" alink="y" vlink="z">
</body>
text

:memberikan warna pada teks

bgcolor

:memberikan warna pada latarbelakang dokumen HTML

background:memberikan latarbelakang dokumen HTML dalam bentuk gambar
link

:memberikan warna untuk link

alink

:memberikan warna untuk link yang sedang aktif

vlink

:memberikan warna untuk link yang telah dikunjungi.

Catatan : Jika attribute bgcolor dan background keduanya dispesifikasikan maka
attribute background yang akan digunakan, akan tetapi jika nilai attribute background
(gambar) tidak ditemukan pada dokumen HTML maka attribute bgcolor yang akan
digunakan. Berikut ini berbagai macam kode HTML dasar yang perlu diketahui.
1. <br>
Turun satu baris kebawah(enter) / Kursor dan kalimat dibelakangnya turun 1
baris kebawah
2. <big>isi tulisan</big>
Membuat tulisan menjadi sedikit lebih besar
3. <font color=”warna tulisan“>isi tulisan</font>
Mewarnai tulisan. Ganti warna tulisan dengan salah satu pilihan yang ada : red,
blue, yellow, green, brown, gold, purple

4.  
Menambah 1 spasi karena ada kemungkinan penggunaan 2 spasi tidak akan
terbaca pada beberapa engine blog
5. <font size=”ukuran tulisan“>isi tulisan</font>
Mengganti ukuran tulisan. Bisa digunakan apabila kode pada no. 2 tidak sesuai
dengan keinginan kita
6. <strong>isi tulisan</strong> atau <b>isi tulisan</b>
Untuk menebalkan tulisan. Fungsi sama dengan ”’isi tulisan”’ atau tombol
„cetak tebal‟
7. <p>
Kursor dan kalimat dibelakangnya turun satu setengah baris kebawah
8. <u>isi tulisan</u>
Membuat garis bawah tulisan
9. <small>isi tulisan</small>
Membuat tulisan menjadi sedikit lebih kecil
10. <s>isi tulisan</s>
Membuat garis mencoret pada tulisan
11. <pre>isi tulisan</pre>
Membuat tulisan tetap pada keadaan yang kita inginkan, misalnya untuk urutan
berjejer kebawah
12. <center>isi tulisan</center>
Membuat tulisan berada di tengah halaman
13. <blink>isi tulisan</blink>
Membuat tulisan tampak berkedip

C. HTML tingkat lanjut

Seperti yang telah dijelaskan sebelumnya bahwa HTML(Hyper Text Markup
Language) adalah simbol-simbol atau tag-tag yang dituliskan dalam sebuah file yang
dimaksudkan untuk menampilkan halaman pada web browser. Tag-tag HTML selalu
diawali dengan <x> dan diakhiri dengan </x> dimana x tag HTML seperti b, i, u dan
sebagainya. Namun ada juga tag yang tidak diakhiri dengan tanda </x> seperti tag <br>,
<input> dan lainnya.

Sebuah halaman website akan diapit oleh tag <html>……</html>. File-file
HTML selalu berakhiran dengan ekstensi *.htm atau *.html. Jadi jika anda mengetik
sebuah naskah dan menyimpannya dengan ekstensi *.html maka anda membuat file yang
berformat HTML.

1. Menggunakan Tag pada HTML
Beberapa contoh penggunaan tag HTML,
Contoh

Hasil

<b>Ini tulisan tebal</b>

Ini tulisan tebal

<i>Ini tulisan miring</i>

Ini tulisan miring

<u>Ini tulisan bergaris

Ini tulisan bergaris bawah

bawah</u>
Ini baris 1<br>Ini baris 2

Ini baris 1
Ini baris 2

Ini garis horizontal <hr>

Ini garis horizontal

Ada beberapa tag yang memilki atribut didalamnya, seperti tag <font>, <table>,
<input> dan sebagainya. Pada tag font ia memiliki beberapa atribut diantaranya atribut:
color, size, face. Untuk lebih memahami atribut lihatlah contoh berikut ini.
<font color=”red” face=”Arial” size=”12”>Ini Font Arial berwarna merah dan berukuran
12 pt</font>
hasil -> Ini Font Arial berwarna merah dan berukuran 12 pt
Atribut color digunakan untuk menentukan warna tulisan.
Atribut face digunakan untuk menentukan jenis huruf.
Atribut size digunakan untuk menentukan ukuran huruf.
Jika anda lihat bahwa atribut color berada pada awal, lalu yang kedua adalah face
dan yang terakhir adalah size. Anda tidak perlu memperdulikan urutan atribut tersebut
karena browser hanya membaca isi dari properi bukan urutan atributnya.

2. Daftar Tag pada HTML
Berikut ini adalah tabel tag-tag HTML dan fungsinya:
Tag Utama

Tag
<html>

atribut

Deskripsi

Baris paling atas dari setiap HTML

</html>
<head>

Informasi umum dari sebuah

</head>

halaman web

<title>

Judul halaman. Terdapat pada head

</title>
background
bgcolor
bgsound
font
link
alink
vlink
topmargin
leftmargin
marginheight
marginwidth

<boby>
</body>

Setingan atribut untuk seluruh
dokumen

Modifikasi Teks
Tag

Deskripsi

Contoh

<b> </b>

Teks tebal

Teks tebal

<I> </I>

Teks miring

Teks miring

<u> </u>

Teks garis bawah

Teks garis bawah

<pre>

Preformatted teks

Contoh teks

Header 1

Header 1

Header 2

Header 2

Header 3

Header 3

Header 4

Header 4

Header 5

Header 5

Header 6

Header 6

</pre>
<h1>
</h1>
<h2>
</h2>
<h3>
</h3>
<h4>
</h4>
<h5>
</h5>
<h6>
</h6>

Subscript

Subscript

Superscript

Superscript

<sub>
</sub>
<sup>
</sup>

Font
Tag

Atribut

Deskripsi

<font>

Color

Mengubah gaya suatu huruf

</font>

Size
Name

Links
Tag

Atribut

Deskripsi

<a>

href

Membuat link ke dokumen atau situs lain

</a>

Target
Style
Class
Name
id

Gambar
Tag

Atribut

Deskripsi

<img>

Src

Menampilkan sebuah gambar

Alt
Name
Border
Height
width

Formatting
Tag

Deskripsi

<blockquote>

Digunakan untuk mengatur text dan Sample of text in a

</blockquote> gambar dalam suatu tag

Contoh

block qoute format

<ol> </ol>

Ordered List (digunakan dengan <li>)

1. Item 1

<ul> </ul>

Unordered List (digunakan dengan

Item 1

<li>)
<li>

Elemen List

<dd> </dd>

Definition List

Sample text

<dt>

Definition Term

Sample text

<dd>

Definition Description

Sample text

<p> </p>

Paragraf

Sample

Text
<br>

Ganti baris

Sample
Text

<hr>

Garis horizontal

<center>

Menengahkan elemen

Sample

</center>

Tabel
Tag

Atribut

Deskripsi

<table> <table>

Border

Mengatur semua elemen

Cellpadding

table

Cellspacing
Widht
Height
Name
Id
Title
Bgcolor
Background
Align
valign
<tr> </tr>

Height
Bgcolor
Background

Membuat baris baru

Align
Valign
title
<td> </td>

Height

Membuat kolom

Width
Bgcolor
Background
Align
Valign
Title
Colspan
rowspan
<th> </th>

Height

Format yang berlaku bagi

Width

cell yang diapit tag

Bgcolor
Background
Align
Valign
Title
Colspan
rowspan
<tbody>

Height


</tbody>

Width

cell yang diapit tag

Align
Valign
Bgcolor
background
<colgroup>

Height


</colgroup>

Width

kolom

Align
Valign
Bgcolor
Background

colspan

Tag

Atribut

Deskripsi

<form>

Method

Mengatur elemen dari form

</form>

Acton
name

<input type=>

Text

Variasi dari tipe elemen form

Password
Hidden
Radio
Checkbox
Submit
Image
reset
text

Name
Value
Width
maxlength

password

Name
Value
Width
Maxlenght

hidden

Digunakan

Value
radio

Name

variabel hidden

Name
value

checkbox

Name
Value
Checked

submit

value

untuk

membuat

image

Src
Height
Width
Alt
Name
border

reset

Value

<select>

Name

Membuat

</select>

Size

Digunakan

combo-box.
bersama

dengan

option
<option>

Selected
Name
Value

<textarea>

Name

</textarea>

Rows
Cols
wrap

wrap

Off

No wrap

Virtual

Word wrap, senta as one line

physical

Word wrap, sent with breaks

3. Menggunakan Atribut dari Tag

Pada bab sebelumnya telah macam-macam atribut dari tag yang terdapat pada HTML.
Sekarang saatnya menerapkan atribut tersebut dalam sebuah file. Untuk lebih memudahkan
dalam memahami langsung saja pada contoh.
• Pertama jalankan software “PHP DESIGNER 2006”
• Klik menu File – New – HTML/XHTML Maka akan nampak sebuah ruang kerja mirip
dengan dengan Microsoft Word. Untuk contoh yang pertama ini kita akan menggunakan
atribut dari tag <p>…</p>.

a. Tag <p>...</p>

Tag <p> digunakan untuk membuat paragraf dalam sebuah halaman web. Kita semua
tahu kalau paragraph ada yang bertipe rata kiri, tengah, kanan dan justify. Untuk lebih
memperjelas ketik kode di bawah ini.
<html>
<head>
<title>Atribut Tag <P></title>
</head>
<body>
<p align="left"><b>Teks ini berada di kiri</p>
<p align="center">Teks ini berada di tengah</p>
<p align="right">Teks ini berada di kanan</b></p>
<p align="justify">Paragraph ini bertipe justify. Dimana
semua teks akan dibuat
lurus sama dengan batas tepi halaman. Oh ya, tag
<p></p> merupakan default atau bentuk baku
tag <p></p> dimana teks atau paragraf akan
berformat rata kiri. Jika anda tidak memberi atribut
<i>align</i> pada tag <p> maka browser akan
menganggap rata kiri.</p>
</body>
</html>
Setelah selesai simpan file tersebut dengan mengklik menu File – Save. Akan
muncul kotak dialog Save, arahkan ke drive C: lalu HTML(jika anda membuat folder
lain silahkan simpan di folder anda tersebut) lalu Bab 2. Pada isian File Name isikan
tag_p.html dan pastikan Save as Type adalah HTML Document. Untuk menjalankan
anda cukup tekan tombol F5 maka akan muncul output dari kode anda.

Gunakan browser eksternal seperti Internet Explorer atau FireFox. Buka IE
atau FireFox klik File – Open, arahkan dimana anda menyimpan file tag_p.html tadi.
Hasilnya akan terlihat seperti gambar 2.1.

b. Tag <font>....</font>

Fungsi tag <font> adalah untuk memanipulasi baik jenis, ukuran, dan warna huruf.
Ketik kode di bawah ini :
<html>
<head>
<title>Atribut dari Tag Font</tile>
</head>
<body>
<p><font face="Arial">Ini Font Arial</font></p>
<p><font face="Arial"><i>Ini Font Arial dan
miring</i></font></p>
<p><font face="verdana" size="4" color="blue"><b>Ini Font
Verdana berukuran 12 pt
berwarna biru sekaligus tebal</b></font>
<p align="center"><font face="Tahoma" color="red"><b>Ini
Font Tahoma berwarna
merah, tebal dan berada di tengah</b></font><p>
<p align="center"><font face="Arial" color="red">Ini Font
Arial berwarna Merah,
</font><font face="Verdana" color="blue">Sedangkan ini
adalah font Verdana
berwarna biru</font></p>
</body>
</html>

Outputnya

c. Tag <table>...</table>

Dalam tag <table> juga terdapat 2 tag yang penting yang penting yaitu tag <tr></tr>
untuk membuat baris dan tag <td></td> untuk membuat kolom.Tag <table> adalah
tag yang penting dalam pendesainan sebuah tampilan situs.

Source codenya :
<html>
<head>
<title>Atribut dari tag tabel</title>
</head>
<p><b>Membuat Tabel</b></p>
<table border="1" bordercolor="black" bgcolor="white"
cellpadding="8"
cellspacing="0" width="100%">
<tr> 
<td>Ini kolom 1 pada baris 1</td> 
<td>Ini kolom 2 pada baris 1</td> 
</tr> 
<tr>
<td>Ini kolom 1 pada baris 2</td>
<td>Ini kolom 2 pada baris 2</td>
</tr>
</table>
<p><b>Contoh 2: Membuat Tabel</b></p>
<table border="1" bordercolor="black" bgcolor="white"
cellpadding="8"
cellspacing="0" width="100%">
<tr bgcolor="yellow">
<td align="center">Ini kolom 1 pada baris 1</td>
<td align="right">Ini kolom 2 pada baris 1</td>
</tr>
<tr>
<td align="center" bgcolor="red"><font color="white">Ini
kolom 1 pada baris
2</font></td>
<td align="right">Ini kolom 2 pada baris 2</td>
</tr>
</table>
<p><b><font color="blue">Tabel sebagai bingkai dari
paragraf</font></b></p>
<table border="1" style="border-collapse: collapse"
cellpadding="8"
bgcolor="white" width="100%" bordercolor="black">
<tr>
<td><p>Tabel memiliki peranan sangat penting dalam
tampilan sebuah situs web.
Tanpa tabel desainer akan mengalamai kesulitan dalam
mendesain sebuah halaman
web.</p>
<p>Kalau anda perhatikan website yan memiliki tampilan
yang tersusun rapi.
Sebenarnya itu adalah tabel hanya saja atribut <font

color="red"><b>border="0"</b></font> sehingga tabel
seakan tidak
ada(transparan).</p>
<p>Situs rahasia-webmaster.com banyak menggunakan tabel
sebagai bingkai
paragraf. Perlu diingat tag-tag pada html dapat
mengandung unsur yang sama.
Contohnya di dalam sebuah tabel terdapat tabel lagi. Di
bawah ini adalah tabel
yang berada di dalam tabel utama</p>
<p align="center">

<table border="1" style="border-collapse: collapse"
bgcolor="white"
bordercolor="black" cellpadding="8" width="80%">
<tr bgcolor="yellow">
<td><b>Nama Barang</b></td>
<td><b>Harga Barang</b></td>
</tr>
<tr>
<td>Monitor</td><td>Rp. 500.000,-</td>
</tr>
<tr>
<td>CDRW</td><td>Rp. 245.000,0</td>
</tr>

</table>
</tr>
</table>
d. Tag <form>...</form>

Tag <form> berguna untuk mengirimkan(mem-post) variabel yang bersisi data ke file
tujuan yang memproses variabel tersebut. Tag-tag yang biasa digunakan bersama tag
form adalah tag <input> dan <textarea>.
Atribut form yang banyak digunakan adalah method dan action. Atribut method
menentukan jenis pengiriman data bisa berupa “POST” atau “GET”. Sedangkan
action adalah file tujuan yang akan memproses data yang ada diantara tag
<form>...</form>.
Untuk lebih jelasnya lihatlah cuplikan script di bawah ini.
<form action="coba.php" method="post">
......................................
ISI
......................................
</form>

Seperti dikatakan sebelumnya tag form tidak dapat digunakan sendirian. Ia harus
mempunyai data didalamnya untuk itulah digunakan tag-tag lain.

e. Tag <input>

Tag <input> memiliki atribut type yang fungsinya sangat vital dalam output tampilan.
Isi dari atribut type dapat menentukan jenis tampilan apakah itu textbox, password
box, checkbox, radio button dan sebagainya.
<html>
<head>
<title>Atribut tag Form dan Input</title>
</head>
<body><font face="verdana" size="2">
<p><b>Tag input dengan atribut type="text"</b><br>
<input type="text" name="teks_ku" size="16"
maxlength="20"><br>
Ini textbox dengan nama <i>teks_ku</i> ukuran <i>16
chr</i> dan maksimal karakrer
yang dapat ditampung <i>20 chr(character)</i>.</p>
<p><b>Tag input dengan atribut type="password"</b><br>
<input type="password" name="password_ku" size="16"
maxlength="20"<br>
Ini passwordbox dengan nama <i>password_ku</i> ukuran
<i>16 chr</i> dan maksimal
karakrer yang dapat ditampung <i>20
chr(character)</i>.</p>
<p><b>Tag input dengan atribut type="radio"</b><br>
<input type="radio" name="radio_ku" value="isi_1">Radio 1
--> nama
<i>radio_ku</i> isi/value <i>isi_1</i><br>
<input type="radio" name="radio_ku" value="isi_2">Radio 2
--> nama
<i>radio_ku</i> isi/value <i>isi_2</i><br>
<b>Jika nama radio tidak sama maka tidak dianggap satu
pilihan. Untuk
membuktikannya silahkan ganti salah satu nama dari radio
diatas untuk mengetahui
perbedannya.</b></p>
<p><b>Tag input dengan atribut type="checkbox"</b><br>
<input type="checkbox" name="checkbox_ku_1"
value="isi_1">Checkbox 1 --> nama
<i>checkbox_ku_1</i> isi/value <i>isi_1</i><br>
<input type="checkbox" name="checkbox_ku_2"
value="isi_2">Checkbox 2 --> nama
<i>checkbox_ku_2</i> isi/value <i>isi_2</i><p>

<p><b>Tag input dengan atribut type="submit"</b><br>
<input type="submit" value="Tombol Submit"><br>
Tombol ini berguna untuk mem-post(mengirimkan variabel
dan isi variabel yang ada
pada form ke file tujuan (action="file_tujuan"))</p>
<p><b>Tag input dengan atribut type="reset"</b><br>
<input type="reset" value="Bersihkan"><br>
Tombol ini berguna untuk membersihkan seluruh tulisan
yang ada pada seluruh isian
form. Coba isikan semua textbox dan radio lalu tekan
tombol ini.</p>
<p><b>Tag input dengan atribut type="hidden"</b><br>
<input type="hidden" value="data_ku" name="data">
Tipe ini berguna jika si webmaster menginkan variabel
yang sifatnya sudah
didefinisikan. Dan tidak menampilkan output apapun.</p>
<p><b>Tag input dengan propeti type="image"</b><br>
<input type="image" src=/slideshow/html-5-27804524/27804524/"letak_file_gambar_anda"
height="98" width="98"><br>
Image memiliki fungsi yang sama dengan type submit</p>
</form></font>
</body>
</html>
Hasilnya :

f. Tag <select>...</select> dan <option>

Mengapa kita langsung membahas 2 tag?. Pertanyaan yang bagus dan jawabannya
sama dengan dengan pembahasan diatas. Tag select tidak bisa berdiri sendiri dan
harus menggandeng tag option untuk dapat menampilkan output. Dan cara kerjanya
hampir sama dengan tag radio hanya saja tag select lebih singkat.

<html>
<head>
<title>Propeti tag Select dan Option</title>
</head>
<body>
<p><b>Penggunaan select dan dan option</b></p>
<p>Daftar kategori silahkan pilih kategori</p>
Kategori: <select name="Pilihan">
<option value="Kategori 1">Kategori 1
</select>
<p><input type="submit" value="KIRIM"></p>
</form>
</body>
</html>

g. Tag <a>...</a>

Anda tentu sering surfing di internet dan mengklik suatu tulisan atau gambar yang
menuju halaman website lainnya. Tulisan atau gambar itu adalah link. Ya, link adalah
tulisan atau gambar yang merujuk/membuka halaman suatu website. Segala tulisan
atau tag lainnya yang diapit tanda <a> dan </a> akan dianggap link oleh browser.

<html>
<head>
<title>Atribut dari tag A</title>
</head>
<body>
<p>Tag a digunakan untuk menuju/membuka link alamat
suatu website. Link merupakan
tulisan yang merujuk suatu alamat website. Semua tulisan
ataupun tag yang berada
dalam tag <a> dan </a> akan dianggap link
oleh browser. Atribut yang
sangat penting dalam tag a adalah atribut <i>href</i>.
Isi dari atribut ini adalah alamat website yang
dituju.</p>

<p>Contoh link ke alamat Google</p>
<a href="http://www.google.com">Ini link ke
google.com</a>
<p>Link juga mempunyai atribut <i>target</i> yang
fungsinya berhubungan dengan
window. Isi dari atribut target dapat berupa "_blank",
"_self", "_parent",
"_top". Atribut "_blank" akan membuka alamat website
pada window yang baru. Isi
atribut default dari target adalah "_self" dimana alamat
website akan dibuka pada
window yang sama.
<p>Contoh link dengan atribut target="_blank"</p>
<a target="_blank" href="http://www.rahasiawebmaster.com">Bagaimana Menjadi
Webmaster dalam 30 Hari</a>
<p>Untuk atribut target lainnya silahkan bereksperimen
sendiri. Karena Thomas
Alfa Eddison pun melakukan ribuan percobaan sebelum
akhirnya ia dapat menemukan
bohlam.</p>
</body>
</html>

h. Tag <body>...</body>

Seperti namanya body artinya tubuh. Maka atribut yang diset pada tag body akan
berpengaruh pada seluruh tubuh/body dokumen. Pada tag body terdapat beberapa
atribut namun ada dua yang terpenting yaitu background dan bgcolor. Atribut
background digunakan untuk membuat sebuah gambar menjadi latar dari
halaman.Sedangkan bgcolor digunakan untuk menset warna dari latar halaman
website. Kali ini yang akan dibahas hanyalah tag bgcolor karena tag background
nilainya sama dengan tag image yang akan dibahas kemudian.

<html>
<head>
<title>Atribut dari Tag Image</title>
</head>
<body bgcolor="#000000" link="http://www.google.com">
<font color="#ffffff" face="verdana">
<p><b>Ini body dengan bgcolor="#000000" atau samadengan
"black"</b><br> dan font
color diset ="#ffffff" atau samadengan "white".</p>
<p>Di dalam html anda dapat menggunakan perpaduan warna
antara angka dan huruf
seperti "#cgcgcg" akan menghasilkan warna abu-abu.</p>
</body>
</html>
i. Tag <img>

Suatu website yang bagus pasti memiliki gambar di dalamnya. Dan suatu waktu anda
tentu ingin menambahkan gambar didalam website anda. Untuk menampilkan gambar
pada halaman dapat digunakan tag <img>. Format file yang dapat didukung oleh tag
img bermacam-macam mulai BMP, JPG, GIF, TGA dan lain-lain.Tag img memiliki
beberapa atribut yaitu
‐ src : letak file gambar yang akan ditampilkan
‐ border: tebal bingkai gambar
‐ height: menentukan tinggi image/gambar
‐ width: menentukan lebar image/gambar

Nilai dari atribut src jika letak file gambar berada pada direktori yang sama dengan
direktori file html anda. Maka cukup tuliskan nama filenya saja, contohnya
src=/slideshow/html-5-27804524/27804524/”nama_file.jpg”. Dan jika letak filenya berada pada sub folder/direktori maka
nilainya adalah src=”sub_folder/nama_file.jpg”. Lalu bagaimana jika letaknya pada
folder/direktori diatas file html saya?. Caranya hampir sama hanya saja ditambahkan
tanda ../(titik dua dan slash). Yang artinya pindah satu folder keatas, jika letaknya di
dua folder diatas file html saya. Sama tinggal menambah ../../ (artinya pindah dua
folder ke atas). Contohnya src=”../nama_folder/nama_file.jpg”.

Untuk contoh kali ini masuklah ke direktori/folder HTML yang telah anda buat
sebelumnya. Buatlah satu buah folder dalam direktori HTML tersebut. Dan berilah
nama folder itu gambar. Lalu copykan satu gambar apa saja kedalam folder gambar
tersebut. Lalu ketiklah kode berikut ini. Ingat ganti nilai dari src sesusai dengan nama
file gambar anda.
<html>
<head>
<head>
<title>Atribut dari Tag img</title>
</head>
<body>
<p><b>Tag img hanya dengan atribut <i>src</i></b></p>
<img src="../gambar/e-book.jpg">
<p><b>Tag img dengan border="1"</b></p>
<img src="../gambar/e-book.jpg" border="1"</b><p>
<p><b>Tag img dengan height dan width</b></p>
<img src="../gambar/e-book.jpg" border="1" height="300"
width="200">
</body>
</html>

j. Tag <ol>...</ol>, <ul>...</ul> dan <li>...</li>

Kali ini kita akan membahas 3 tag sekaligus. Karena masing-masing tag tidak
dapat dipisahkan. Tag <ol> dan <ul> keduanya membutuhkan tag <li> agar dapat
menampilkan output. Tag-tag ini berguna untuk menyusun suatu daftar yang ingin
anda tonjolkan pada pengunjung website.

<html>
<head>
<title>Atribut dari tag ol, ul dan li</title>
</head>
<body>
<p><b>Penggunaan tag ol dengan li</b></p>
<ol>
<li>Ini nomor 1</li>
</ol>
<p><b>Penggunaan tag ul dengan li</b></p>

<ul>
<li>Ini bullet 1</li>
</ul>
<p><b>Gabungan tag ol, ul dan li</b></p>
<ul>
<ol>
</ol>
<ol>
</ol>
</ul>
</body>
</html>

D. Fungsi HTML
HTML telah mengubah dunia internet, kurang lebih berikut adalah fungsi
utama :
1. Membuat, mendesain, dan mengontrol tampilan dari Web Page (Halaman
Web) dan isinya.
2. Mempublikasikan document secara online sehingga bisa diakses, dilihat dari
keseluruh dunia.
3. Membuat online form yang bisa di gunakan untuk menangani pendaftaran,
transaksi secara online.
4. Menambahkan object – object seperti image, audio, video dan juga java
applet (aplikasi java seperti java game dll) dalam document HTML.

BAB III
PENUTUP

A. Kesimpulan
HTML adalah salah satu bahasa pemprograman web desain dan juga biasa di
sebut script untuk menyusun dokumen-dokumen Web. HTML telah berubah dengan
dashyat sejak hari pertamanya, konten-konten dari HTML pada masa modern telah
ditambahkan ke dalam dokumentasi pertama dan "tags" yang lebih dari setengah
dideskripsikan ke dalam dokumen "HTML tags" asli yang masih ada.
Dengan disajikannya makalah ini diharapkan pembaca dapat memahami lebih
dalam lagi mengenai HTML5. Dengan segala kelebihan dan keunggulan dalam HTML5,
tentunya hal ini menjadi pertimbangan parapengguna untuk menggunakan HTML5
sebagai plattform dalam media komunikasi.

Daftar Pustaka

http://pakdesmart75.wordpress.com/2008/07/25/sejarah-html/
http://design-web11.blogspot.com/2013/06/artikel-html-sejarah-perkembangan-dan.html
http://bowotechno.files.wordpress.com/2010/01/html-dan-perkembangannya.doc
http://design-web11.blogspot.com/2013/06/artikel-html-sejarah-perkembangan-dan.html
http://www.anneahira.com/sejarah-html.html
http://irwansyah.students.uii.ac.id/
http://gobalbabali.wordpress.com/tugas-sekolah/pengertian-html-http-url-ftp-domain-hostingdan-www/
Dasar-dasar HTML taufanriyadi@gmail..com http://www.trikaja.co.cc
Mastering Kode HTML (Second Edition) © Copyright 2005-2006 Rio Astamal
http://www.rahasia-webmaster.com/

�ݺ�ߣ

Html 5

Recommended

More Related Content

What's hot (19)

Similar to Html 5 (18)

Html 5