Html 5

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 bawah</u> Ini tulisan bergaris bawah

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 atribut Deskripsi

<html>

</html>

Baris paling atas dari setiap HTML

<head>

</head>

Informasi umum dari sebuah

halaman web

<title>

</title>

Judul halaman. Terdapat pada head

<boby>

</body>

backgroundbgcolorbgsoundfontlinkalinkvlinktopmarginleftmarginmarginheightmarginwidth

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>

</pre>

Preformatted teks Contoh teks

<h1>

</h1>

Header 1 Header 1<h2>

</h2>

Header 2 Header 2

<h3>

</h3>

Header 3 Header 3

<h4>

</h4>

Header 4 Header 4

<h5>

</h5>

Header 5 Header 5

<h6>

</h6>

Header 6 Header 6

<sub>

</sub>

Subscript Subscript

<sup>

</sup>

Superscript Superscript

Font

Tag Atribut Deskripsi

<font>

</font>

Color

Size

Name

Mengubah gaya suatu huruf

Links


<a>

</a>

Href

Target

Style

Class

Name

id

Membuat link ke dokumen atau situs lain

Gambar


<img> Src

Alt

Name

Border

Height

width

Menampilkan sebuah gambar

Formatting

Tag Deskripsi Contoh

<blockquote>

</blockquote

>

Digunakan untuk mengatur text dan

gambar dalam suatu tag

Sample of text in a

block qoute format

<ol> </ol> Ordered List (digunakan dengan <li>) 1. Item 1

<ul> </ul> Unordered List (digunakan dengan

<li>)

Item 1

<li> Elemen List

<dd> </dd>

<dt>

<dd>

<p> </p>

Definition List

Definition Term

Definition Description

Paragraf

Sample text

Sample text

Sample text

Sample

Text

<br> Ganti baris Sample

Text

<hr>

<center>

</center>

Garis horizontal

Menengahkan elemen Sample

Tabel


<table> <table> Border

Cellpadding

Cellspacing

Widht

Height

Name

Id

Title

Bgcolor

Background

Align

valign

Mengatur semua elemen

table

<tr> </tr> Height

Bgcolor

Background

Align

Membuat baris baru

Valign

title

<td> </td> Height

Width

Bgcolor

Background

Align

Valign

Title

Colspan

rowspan

Membuat kolom

<th> </th> Height

Width

Bgcolor

Background

Align

Valign

Title

Colspan

rowspan

Format yang berlaku bagi

cell yang diapit tag

<tbody>

</tbody>

Height

Width

Align

Valign

Bgcolor

background


cell yang diapit tag

<colgroup>

</colgroup>

Height

Width

Align

Valign

Bgcolor

Background

colspan


kolom


<form>

</form>

Method

Acton

name

Mengatur elemen dari form

<input type=> Text

Password

Hidden

Radio

Checkbox

Submit

Image

reset

Variasi dari tipe elemen form

text Name

Value

Width

maxlength

password Name

Value

Width

Maxlenght

hidden Name

Value

Digunakan untuk membuat

variabel hidden

radio Name

value

checkbox Name

Value

Checked

submit value

image Src

Height

Width

Alt

Name

border

reset Value

<select>

</select>

Name

Size

Membuat combo-box.

Digunakan bersama dengan

option

<option> Selected

Name

Value

<textarea>

</textarea>

Name

Rows

Cols

wrap

wrap Off

Virtual

physical

No wrap

Word wrap, senta as one line

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 dibuatlurus 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 ptberwarna biru sekaligus tebal</b></font><p align="center"><font face="Tahoma" color="red"><b>Ini Font Tahoma berwarnamerah, 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 Verdanaberwarna 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 baris2</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 halamanweb.</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 tidakada(transparan).</p><p>Situs rahasia-webmaster.com banyak menggunakan tabel sebagai bingkaiparagraf. Perlu diingat tag-tag pada html dapat mengandung unsur yang sama.Contohnya di dalam sebuah tabel terdapat tabel lagi. Di bawah ini adalah tabelyang 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"><form action="coba.php" method="post"><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 karakreryang 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 maksimalkarakrer 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. Untukmembuktikannya silahkan ganti salah satu nama dari radio diatas untuk mengetahuiperbedannya.</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 adapada 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 isianform. 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 sudahdidefinisikan. Dan tidak menampilkan output apapun.</p><p><b>Tag input dengan propeti type="image"</b><br><input type="image" src="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><form action="coba.php" method="post">Kategori: <select name="Pilihan"><option value="Kategori 1">Kategori 1<option value="Kategori 2">Kategori 2<option value="Kategori 3">Kategori 3</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 merupakantulisan yang merujuk suatu alamat website. Semua tulisan ataupun tag yang beradadalam tag <a> dan </a> akan dianggap link oleh browser. Atribut yangsangat 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 denganwindow. Isi dari atribut target dapat berupa "_blank", "_self", "_parent","_top". Atribut "_blank" akan membuka alamat website pada window yang baru. Isiatribut default dari target adalah "_self" dimana alamat website akan dibuka padawindow yang sama.<p>Contoh link dengan atribut target="_blank"</p><a target="_blank" href="http://www.rahasia-webmaster.com">Bagaimana MenjadiWebmaster dalam 30 Hari</a><p>Untuk atribut target lainnya silahkan bereksperimen sendiri. Karena ThomasAlfa Eddison pun melakukan ribuan percobaan sebelum akhirnya ia dapat menemukanbohlam.</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 hurufseperti "#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=”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><li>Ini nomor 2</li><li>Ini nomor 3</li></ol>

<p><b>Penggunaan tag ul dengan li</b></p><ul><li>Ini bullet 1</li><li>Ini bullet 2</li><li>Ini bullet 3</li></ul><p><b>Gabungan tag ol, ul dan li</b></p><ul><li>Ini bullet 1</li><ol><li>Ini nomor 1</li><li>Ini nomor 2</li></ol><li>Ini bullet 2</li><ol><li>Ini nomor 1</li><li>Ini nomor 2</li></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://www.anneahira.com/sejarah-html.html

http://irwansyah.students.uii.ac.id/

http://gobalbabali.wordpress.com/tugas-sekolah/pengertian-html-http-url-ftp-domain-hosting-

dan-www/

Dasar-dasar HTML [email protected] http://www.trikaja.co.cc

Mastering Kode HTML (Second Edition) © Copyright 2005-2006 Rio Astamal

http://www.rahasia-webmaster.com/

http://www.rahasia-webmaster.com/

http://www.trikaja.co.cc/

mailto:[email protected]


http://pakdesmart75.wordpress.com/2008/07/25/sejarah-html/

Html 5

Documents

Transcript of Html 5