Teknologi Multimedia HyperText Markup Language

(HTML5)Tugas Mata Kuliah Teknologi Informasi & Komunikasi

(TIK)

Kamis Pukul 09.00 – 10.40 WIB

Dosen Pengampu:

Septia Lutfi

Disusun Oleh:

Lemuel Ivan Primanda

1102412034

Teknologi Pendidikan “12

Page 1

UNIVERSITAS NEGERI SEMARANG

DAFTAR ISI

Bab I Pendahuluan ............................................................................................... 3

Latar Belakang .................................................................................................... 3

Bab II Pembahasan .............................................................................................. 5

HTML .................................................................................................................. 5

Dasar-dasar HTML .............................................................................................. 5

Struktur Dasar HTML ......................................................................................... 6

Referensi Tag HTML .......................................................................................... 10

Membuat Kode Dasar HTML ............................................................................. 18

HTML5 ................................................................................................................ 24

Elemen HTML5 .................................................................................................. 25

Kelebihan HTML5 .............................................................................................. 25

HTML5 Form Element ........................................................................................ 32

Bab III Penutup ................................................................................................... 35

Daftar Pustaka ..................................................................................................... 36

Page 2

BAB I

PENDAHULUAN

A.   Latar Belakang

Web merupakan media untuk menanpilkan halaman. Web terbagi menjadi dua yaitu web

statis dan web dinamis. Web statis adalah media untuk menampilkan halaman statis atau

tetap, tetapi yang mengatur nya adalah web browser. Contoh teknologi yang berkaitan dengan

web statis adalah Client Side seperti HTML, Java script.

Dibuat nya makalah ini adalah untuk mempermudah dalam pembelajaran, maksudnya

walaupun kita tidak begitu mrngerti terhadap pembahasan tetapi kita sudah mengenal dan

mngetahui nya. Hal ini telah memudahkan bagi pelajar yang mempelajari tentang bab ini

karena sudah dikelompokkan sesuai dengan bahasannya. Tetapi disamping itu kita haru rajin

berlatih terus mencoba membuat web, baik yang statis ataupun dinamis. Berdasarkan

kenyataan diatas penyusun tertarik untuk membuat makalah yang berjudul HTML dan Java

Script.

B. Rumusan Masalah

1)   Apa saja yang mendasari HTML?

2)   Bagaimana struktur HTML?

3)   Atribut-atribut apa saja saat kita ingin membuat sebuah web?

C. Tujuan Makalah

Makalah ini disusun dengan tujuan untuk mengetahui dan mendeskripsikan tentang HTML.

D. Kegunaan Makalah

Makalah ini dapat digunakan sebagai contoh untuk pembelajaran dan pengenalan dasar dari

HTML dan Java Script.

Page 3

 

E. Prosedur Makalah

Penyusunan Makalah ini menggunakan metode deskriptif yaitu teknik mengumpulkan data

dari berbagai sumber buku dan internet.

Page 4

BAB II

PEMBAHASAN

HTML

Dasar-Dasar HTML

Mendesain HTML berarti melakukan suatu tindakan pemrograman. Namun HTML bukanlah

sebuah bahasa pemrograman. Namun HTML hanyalah berisi perintah-perintah yang telah

terstruktur berupa tag-tag penyusun. Menuliskan tag-tag HTML tidaklah sebatas hanya

memasukkan perintah-perintah tertentu agar HTML kita dapat di akses oleh browser.

Mendesain HTML adalah adalah sebuah seni tersendiri. Homepage yang merupakan

implementasi dari HTML adalah refleksi dari orang yang membuatnya. Untuk itu kita perlu

mendesainnya dengan baik agar para pengunjung homepage yang kita buat merasa senang

dan bermanfaat.

Mendesain HTML dapat dilakukan dengan dua cara:

1. Menggunakan HTML Editor, seperti Microsoft FrontPage, Adobe Dreamweaver, dan

lain-lain. Dapatkan editor HTML lainnya disini.

2. Dengan cara menuliskan sendiri secara manual satu persatu tag-tag HTML ke dalam

dokumen HTML.

Ada kelebihan dan kekurangan dari dua cara di atas. Cara pertama kelebihannya adalah

HTML Editor merupakan sebuah program yang khusus didesain untuk membuat, melakukan

editing bahkan mem-publish ke internet. Dengan kemampuannya menggabungkan

kemudahan dan kecanggihan teknologi internet ke dalam dokumen HTML maka cara ini

sangat disukai oleh para pemula dan desainer yang tidak ingin belajar lebih mendalam

mengenai HTML. Sedangkan cara kedua adalah menuliskan secara manual satu persatu tag-

tag HTML. Hal ini sangat disarakan sulit dikarenakan akan memakan tenaga dan waktu

ekstra untuk melakukannya, ditambah lagi Anda harus melakukan cara-cara konvensional

Page 5

untuk melihat hasilnya pada web browser. Namun pada cara kedua adalah dasar dari segala

bentuk HTML yang akan Anda pelajari, karena dengan cara itulah Anda akan lebih paham

mengenai cara kerja dan berbagai perintah yang biasa dipakai pada bahasa HTML.

Struktur Dasar HTML

1.     Struktur dasar HTML

HTML merupakan sebuah bahasa pemrograman yang berisikan perintah kepada browser

yang telah terinstal pada computer client, Untuk pemahaman dan sejarah HTML silahkan

baca “Pengertian dan sejarah HTML”, Bahasa pemograman ini terdapat sebuah elemen, tag

dan attribute didalam perintahnya.

Secara umum Web dokumen terdiri dari menjadi dua elemen ataupun section yaitu head dan

body, kedua elemen tersebut dipisahkan oleh beberapa tag, untuk lebih jelasnya dapat anda

lihat sebuah pola dasar HTML dibawah ini

<html>

<head>

“Informasi Tentang Dokumen HTML”

</head>

<body>

“Informasi yang akan ditampilkan dalam web Browser”

</body>

</html>

Dari pola diatas dapat digambarkan adanya sebuah dokumen HTML mulai dari tag pembuka

<html> sampai tag penutup </html>, sedangkan isi dari dokumen html tersebut adalah dua

buah elemen atau section yaitu

•    “HEAD” yang dimulai dari tag pembukanya <head> sampai tag penutup head </head>,

Pada elemen ini biasanya berisikan

Page 6

-    Title, merupakan judul dokumen

-    Meta tag, informasi yang akan diberikan oleh pengunjung tentang isi halaman web

Dalam Meta Tag dapat kita isikan beberapa atribut penjelasan antara lain, Content, Name,

URL. Sedangkan dalam atribut tersebut terdapat sebuah value, adapun beberapa value yang

dapat kita isikan antara lain abstract, author, copyright, description, distribution, expires,

keywords, revist, refresh maupun language

-    Script java, CSS dan beberapa perintah lain yang nantinya akan diesekusi browser tanpa

ditampilkan oleh browser untuk sebagian besar, dengan kata lain pada elemen ini kebanyakan

hanya mengatur informasi dan visualisasi web tersebut, untuk elemen keduanya adalah

-  “BODY” mulai dari tag pembuka <body> sampai tag penutupnya </body> pada elemen ini

berisikan informasi dan pengaturannya yang akan ditampilkan dalam browser.

Di  dalam bahasa pemrograman HTML terdapat beberapa atributh yang perlu kita pelajari,

adapun contoh atributh dan kegunaannya sebagai berikut,

•    <DFN>, untuk menandai sebuah subdefinisi dari daftar ataupun table definisi

•    <STRONG>, Untuk menandai bagian text ataupun kata dari penting dari sebuah kalimat,

paragraph ataupun dokumen

•    <VAR>, untuk menampilkan nama variable

•    <CITE>, Menandai kutipan

•    <CODE>, Menampilakan sebuah kode pemrograman

•    <EM>, Penekanan sebuah kalimat

•    <SAMP>, untuk membuat contoh ataupun sample didalam sebuah dokumen

•    <KBD>, menandai suatu text dimana text tersebut harus dimasukan oleh user melalui

keyboard

•    <B>, Bold membuat tampilan tebal huruf, kata ataupun kalimat

Page 7

•    <I>, Italic membuat tampilan miring

•    <U>, Underline membuat tampilan garis bawah

•    <TT>, Membuat tampilan jenis huruf menyerupai huruf mesin ketik

•    <STRIKE>, membuat garis tengah pada sebuah kalimat

•    <BIG>, memperbesar ukuran huruf

•    <SMALL>, memperkecil ukuran huruf

•    <SUP>, menampilkan superscript

•    <SUB>, menampilkan subscript

•    <FONT>, merupakan sebuah pengaturan huruf, kata ataupun kalimat bahkan paragraph di

mana dalam atribut ini terdapat value yang mengatur tampilan huruf tersebut seperti color.

Size, style dan lainnya

•    <P>, Paragrah untuk membuat sebuah paragraph

•    <BR>, Line break berfungsi untuk mengganti baris

•    <H1>,<H2>,<H3>,<H4>,<H5>,<H6> merupakan sebuah header dimana dari keenam

jenis tersebut mempunyai perbedaan ketebalan dan ukuran huruf

•    <PRE> Preformatted Text berfungsi menampilkan text apa adanya

•    <CENTER> membuat sebuah text berada di posisi tengah

•    <LEFT> membuat sebuah text berada di posisi kiri

•    <RIGHT> membuat sebuah text berada di posisi kanan

•    <Basefont size=”pixel”>mengubah ukuran sebuah huruf

•    <HR> Horizontal rule berfungsi untuk membuat garis bawah

Page 8

•    <OL>, membuat penomoran pada daftar

•    <UL>, Membuat sebuah tanda pada daftar tanpa nomor (bullet)

•    <LI>, tag yang berada di dalam attribute UL ataupul OL digunakan untuk memisah baris

daftar yang akan di beri penomoron ataupun tanda bullet

•    <TABLE>, membuat sebuah table

•    <TR>, Membuat row atau baris didalam table <TH>, membuat judul kolom di table

<TD> membuat isi pada kolom table, ketiga tag ini diisikan pada atribut table

•    Rowspan, Colspan merupakan pengaturan merge cell pada atribut table

•    <FORM> untuk membuat form

•    <A HREF=”url link”>Hypertext</A> Hyper Link

•    <IMG SRC=”url img”> insert image

Inilah beberapa atributh dasar yang digunakan dalam pemrograman HTML, pada atribut

diatas merupakan sebuah tag pembuka yang pada akhir atribut tersebut harus ditutup dengan

tag penutup atributh tersebut </…..>, untuk lebih jelasnya dilain waktu saya akan mencoba

bahas satu persatu atributh tersebut dan akan saya lengkapi dengan syntax dan contohnya

kompleksnya.

Secara sederhana HTML terdiri dari dua bagian yaitu Header dan Body. Struktur HTML

diapit oleh tag awal <HTML> dan tag akhir </HTML>. Standar penulisannya adalah:

<HTML>

<HEAD>

Deskrisi dokumen

</HEAD>

<BODY>

Isi dokumen

Page 9

</BODY>

</HTML>

Keterangan:

Tag <TITLE> digunakan untuk memberi judul dokumen HTML. Judul ini dapat

Anda lihat pada pojok kiri atas (title bar) browser. Ketika orang akan mem-bookmark

web Anda, maka judul inilah yang akan disimpan.

Untuk melihat hasilnya, silakan jalankan browser favorit Anda, seperti contoh di bawah ini

digunakan Microsoft Internet Explorer.

Referensi Tag HTML

1. Heading

Heading adalah sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokumen

HTML. Heading berbeda dengan tag <TITLE> yang tidak bisa muncul dalam halaman web.

HTML menyediakan enam tingkatan heading. Heading level 1 biasanya untuk judul utama.

Contoh:

<HTML>

<HEAD>

<TITLE>Headings</TITLE>

</HEAD>

<BODY>

<H1>Heading Level 1</H1>

</BODY>

</HTML>

 

Page 10

2. Paragraf

Untuk membuat paragraf digunakan tag <P>. Setelah tag <P> Anda bisa menulis isi paragraf

dan paragraf tersebut harus diakhiri dengan penutup </P>. Anda bisa mengatur posisi

paragraf dengan attribut ALIGN. Atribut ALIGN diikuti dengan posisi yang diinginkan.

LEFT untuk rata kiri, CENTER untuk rata tengah dan RIGHT untuk rata kanan.

Contoh:

<HTML>

<HEAD>

<TITLE>Paragraf</TITLE>

</HEAD>

<BODY>

<P ALIGN=”right”>

<P ALIGN=”center”>

<P ALIGN=”left”>

</P>

</BODY>

</HTML>

3. Blockquote

Perintah tag <BLOCKQUOTE> digunakan untuk menulis kutipan teks. Dengan perintah ini

browser akan menampilkan teks menjorok ke dalam (meng-identasi teks) atau menampilkan

teks dalam bentuk huruf miring.

Page 11

Contoh:

<HTML>

<HEAD>

<TITLE>BLOCKQUOTE</TITLE>

</HEAD>

<BODY>

<H3>Sesuatu yang tidak perlu dicoba</H3>

<BLOCKQUOTE>

</BLOCKQUOTE>

</BODY>

</HTML>

4. Preformatted Text

Preformatted Text (PRE) digunakan untuk menampilkan teks sama seperti yang Anda

ketikkan dalam dokumen HTML. Browser akan menampikan teks tersebut dalam font

monospaced, yaitu seperti terlihat dalam teks yang tampilkan oleh aplikasi berbasis teks

(misalnya telnet).

Contoh:

<HTML>

<HEAD>

<TITLE>Preformatted Text</TITLE>

</HEAD>

Page 12

<BODY>

<PRE>

</PRE>

</BODY>

</HTML>

5. Begin Row (BR)

Tag ini digunakan untuk menulis teks pada baris berikutnya. Tag <BR> membuat baris baru

tanpa memberi baris kosong di bawahnya.

Contoh:

<HTML>

<HEAD>

<TITLE>Begin Row</TITLE>

</HEAD>

<BODY>

<P>Banyak cara yang dapat digunakan untuk melakukan instalasi FreeBSD. Namun ada tiga

cara yang paling sering dilakukan ,yaitu:

<BR>Instalasi melalui FTP

<BR>Instalasi melalui CDROM

<BR>Instalasi melalui partisi DOS

</BODY>

</HTML>

Page 13

 

6. Ukuran Font

Untuk mengatur huruf dokumen HTML digunakan tag <FONT SIZE>. Tag <FONT SIZE>

memiliki beberapa atribut untuk mengatur ukuran huruf yang akan digunakan.

Contoh:

<HTML>

<HEAD>

<TITLE>Ukuran font</TITLE>

</HEAD>

<BODY>

<FONT SIZE=1>Ukuran font 1</FONT>

<FONT SIZE=2>Ukuran font 2</FONT>

<FONT SIZE=3>Ukuran font 3</FONT>

<FONT SIZE=4>Ukuran font 4</FONT>

<FONT SIZE=5>Ukuran font 5</FONT>

<FONT SIZE=6>Ukuran font 6</FONT>

<FONT SIZE=7>Ukuran font 7</FONT>

</BODY>

</HTML>

Page 14

7. Jenis Font

Atribut FACE digunakan untuk mengatur jenis huruf yang diinginkan. Atribut FACE harus

diisi dengan string jenis font seperti Arial, Times New Roman,Verdana, dan sebagainya.

Contoh:

<HTML>

<HEAD>

<TITLE>Jenis Font</TITLE>

</HEAD>

<BODY>

<FONT SIZE=5>

<FONT FACE = “Arial”>Arial, contoh AC Milan <P>

<FONT FACE = “Verdana”>Verdana , contoh Persebaya <P>

<FONT FACE = “Times New Roman”>Times New Roman, contoh Indonesia P>

</BODY>

</HTML>

8. Warna Font

Atribut COLOR digunakan untuk mengatur warna font yang akan digunakan. Untuk memberi

nilai pada atribut color, ada dua cara. Cara pertama dengan menuliskan nama warna seperti

Red, Blue, Yellow, White, dll. Sedangkan cara kedua adalah dengan menggunakan nilai RGB

(Red Green Blue) dari suatu warna, misalnya FF0000 untuk Red, 00FF00 untuk green, dan

0000FF untuk Blue.

Page 15

Contoh:

<HTML>

<HEAD>

<TITLE>Warna Font</TITLE>

</HEAD>

<BODY>

<FONT SIZE=5>

<FONT COLOR = “red”>PSM Makassar<P>

<FONT COLOR = “#FF0000″>tetap PSM Makassar kan?<P>

<FONT COLOR = “#00FF00″>Ini baru Persebaya<P>

</BODY>

</HTML>

9. Link

Perintah anchor <A> digunakan untuk membuat suatu link. Untuk membuat link ke dokumen

HTML lain digunakan perintah <A HREF = “nama_dokumen”>Teks pada browser</A>.

Anda juga bisa membuat link dalam sebuah dokumen HTML. Untuk itu perlu dipersiapkan

nama anchor lokasi tujuan dari link tersebut. Nama anchor dibuat dengan menambahkan

atribut NAME pada tag <A>. Misalnya <A NAME = “Bugs”</A>. Cara melakukan link ke

bagian tersebut adalah <A HREF = “#nama_anchor”>teks pada browser</A>.

Contoh:

<HTML>

<HEAD>

Page 16

<TITLE>Link</TITLE>

</HEAD>

<BODY>

<A NAME=”lengkap”>Pemain-pemain AC Milan menurut abjad</A>

<BLOCKQUOTE>

<P>Abbiati ,<A HREF=”#abbiati”>info lengkap</A>

<P>Ayala

<P>Ambrosini

<P>Albertini

<P>Boban

<P>

<A HREF=”linktujuan.html”>kalo mau tahu lagi klik disini</A>

</BLOCKQUOTE>

<P><A NAME=”abbiati”>Abbiati</A>

<BLOCKQUOTE>

<P>Kiper ketiga timnas Italia runner up Euro 2000

<BR>Kiper utama U-21 juara Piala Eropa U-21

<BR>Kiper utama AC Milan juara Seri-A 1998-1999

</BLOCKQUOTE>

<P><A HREF=”#lengkap”>kembali ke atas</A>

Page 17

</BODY>

</HTML>

<HTML>

<HEAD>

<TITLE>Link tujuan</TITLE>

</HEAD>

<BODY>

<P ALIGN=”center”> Maaf, hanya sedikit

<BR>Chamot

<BR>Dida

<BR>Shevchenko

<BR><A HREF=”contohlink.html”>kembali</A>

</BODY>

</HTML>

Membuat Kode Dasar HTML Table

Untuk Belajar HTML Table dan membuat website sendiri, maka kita harus membuat

persiapan lebih dulu. Pertama kita buka notepad. Kemudian ketik di notepad ini kode html

seperti dibawah ini:

<table>

<head>

<title> </title>

Page 18

</head>

<body>

</body>

</html>

Kemudian sisipkan kalimat Belajar HTML Table diantara <title> dan </title> sehingga kode

html nya sekarang menjadi:

<table>

<head>

<title>Belajar HTML Table</title>

</head>

<body>

</body>

</html>

a. Menambah heading dan paragraf

Bila anda pernah menggunakan Microsoft Word, anda akan terbiasa dengan style yang ada

untuk heading dengan tingkat kepentingan yang berbeda. Pada HTML ada enam tingkatan

heading. H1 adalah yang paling penting, H2 lebih sedikit kurang penting, seterusnya hingga

H6, yang paling tidak penting.

Berikut adalah cara menambah sebuah heading yang penting:

<h1>Sebuah heading yang penting</h1>

<h2>Sebuah heading yang sedikit kurang penting</h2>

Page 19

Setiap paragraf yang anda tulis harus diawali dengan tag  <p>. Tag </p> merupakan opsi,

tidak seperti end tag untuk elemen seperti heading. Sebagai contoh:

<p>Ini adalah paragraf pertama.</p>

<p>Ini adalah paragraf kedua.</p>

b. Menambahkan perhatian pada halaman dengan gambar – gambar

<img

c. Menambahkan link ke halaman lain.

Apa yang membuat Web sangat efektif adalah kemampuan untuk membuat link dari satu

halaman ke halaman yang lain, dan mengikutinya hanya dengan sebuah klik. Sebuah klik

dapat membawa anda langsung ke seberang dunia!

Link didefinisikan dengan tag <a>. Mari membuat sebuah link pada file “peter.html” di

folder/direktori yang sama dengan file HTML yang sedang anda edit::

Ini adalah link ke <a href=”peter.html”>halamannya Peter</a>.

Teks antara <a> dan </a> digunakan sebagai keterangan dari link. Adalah hal yang umum

bagi keterangan tersebut untuk diberi garis bawah berwarna biru.

Bila file yang anda link adalah direktori asal (parent directory), anda perlu menambahkan

“../” sebelumnya, sebagai contoh:

<a href=”../mary.html”>halamannya Mary</a>

Bila file yang dilink adalah sebuah sub direktori, anda perlu memberikan nama dari

subdirektori tersebut diikuti sebuah ”/” setelahnya, sebagai contoh:

<a href=”friends/sue.html”>halamannya Sue</a>

Penggunaan relative path memungkinkan anda melink sebuah file dengan pergi naik atau

turun direktori sesuai kebutuhan, sebagai contoh”:

Page 20

<a href=”../college/friends/john.html”>halamannya John</a>

Di mana pertama kali akan dicari pada direktori asal, dari sebuah direktori lain

bernama ”college”, dan kemudian sebuah subdirektori dengan nama “friends” untuk sebuah

file dengan nama “john.html”.

Untuk melink ke sebuah halaman atau situs Web lain anda perlu memberikan alamat lengkap

Web (umumnya dinamakan URL), sebagai contoh untuk melink ke www.w3.org anda perlu

menuliskan:

Ini adalah sebuah link menuju<a href=”http://www.w3.org/”>W3C</a&gt;.

Anda dapat mengubah sebuah gambar menjadi sebuah link hypertext, sebagai contoh, berikut

ini memungkinkan anda untuk mengklik pada logo perusahaan untuk pergi ke halaman utama

/ depan:

<a href=”/”><img src=”logo.gif” alt=”home page”></a>

Contoh ini menggunakan “/” untuk menghubungi direktori asal, yang mana adalah home

page.

d. Tiga jenis daftar

HTML mendukung tiga jenis daftar. Jenis yang pertama adalah daftar dengan bullet

(bulletted list), atau sering disebut unordered list. Yang menggunakan tag <ul> dan <li>,

sebagai contoh:

<ul>

  <li>list item pertama</li>

  <li>list item kedua</li>

  <li>list item ketiga</li>

</ul>

Page 21

Catatan bahwa anda perlu mengakhiri daftar dengan tag </ul>, tetapi tag </li> merupakan

opsi dan dapat di hiraukan. Jenis daftar kedua adalah daftar dengan nomor, yang sering juga

disebut ordered list. Hal tersebut menggunakan tag <ol> dan <li>. Sebagai contoh:

<ol>

  <li>list item pertama</li>

  <li>list item kedua</li>

  <li>list item ketiga</li>

</ol>

Seperti juga bulletted lists, anda perlu mengakhiri daftar dengan tag </ol>, tetapi tag penutup

</li> merupakan opsi dan dapat di hiraukan.

Yang ketiga dan yang terakhir adalah daftar definisi. Daftar ini memungkinkan anda untuk

membuat daftar suatu hal dan penjelasannya. Daftar ini diawali dengan sebuah tag <dl> dan

diakhiri dengan </dl> Tiap hal diawali dengan sebuah tag <dt> dan tiap penjelasannya

diawali dengan sebuah tag <dd>. Sebagai contoh:

<dl>

  <dt>hal pertama</dt>

  <dd>penjelasannya</dd>

  <dt>hal kedua</dt>

  <dd>penjelasannya</dd>

  <dt>hal ketiga</dt>

  <dd>penjelasannya</dd>

</dl>

Page 22

Tag penutup </dt> dan </dd> merupakan opsi dan dapat diabaikan. Perlu dicatat bahwa

daftar ini bisa saling disisipkan, satu diantari yang lain. Sebagai contoh:

<ol>

  <li>list item pertama</li>

  <li>

    list item kedua

    <ul>

      <li>list pertama yang disisipkan</li>

      <li>list kedua yang disisipkan</li>

    </ul>

  </li>

  <li>list item ketiga</li>

</ol>

Anda juga dapat menggunakan paragrapf dan heading dsb. untuk daftar hal yang lebih

panjang..

e. HTML  memiliki sebuah head dan body

Bila anda menggunakan fitur view source dari web browser anda (lihat menu View atau File)

anda dapat melihat struktur dari halaman HTML. Dokumen tersebut biasanya dimulai dengan

sebuah perrnyataan versi HTML yang digunakan HTML, dan kemudian diawali dengan

sebuah tag <html> dikuti dengan tag <head> dan diakhiri dengan </html>. Tag <html> …

</html> berfungsi sebagai sebuah kontainer untuk dokumen tersebut. Tag <head> … </head>

mengandung judul, dan informasi style dan script, sementara <body> … </body>

mengandung markup dari isi yang terlihat. Berikut adalah sebuah pola yang dapat anda copy

dan paste ke text editor untuk menciptakan halaman anda sendiri:

Page 23

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

    “http://www.w3.org/TR/html4/loose.dtd”&gt;

<html>

<head>

  <title> ganti dengan judul dokumen anda </title>

</head>

<body>

ganti dengan isi dokumen anda

</body>

</html>

HTML 5

HTML5 adalah suatu spesifikasi atau standard yang dikeluarkan oleh W3C (World Wide

Web Consortium) sebagai revisi dari standard HTML. Tujuan utamanya telah meningkatkan

bahasa dengan dukungan untuk multimedia terkini dengan tetap mudah dibaca oleh manusia

dan secara konsisten dimengerti oleh komputer dan perangkat (web browser, parser, dll).

HTML5 dimaksudkan untuk menggolongkan tidak hanya HTML 4, tapi XHTML 1 dan

DOM Level 2 HTML juga. HTML5 ini merupakan hasil proyek dari lembaga persatuan

website dunia, World Wide Web Consortium (W3C) dan Web Hypertext Application

Technology Working Group (WHATWG). Proyek tersebut dimulai di tahun 2009 untuk

menyempurnakan bahasa penanda sebelumnya yang dianggap sudah lawas. Tujuan utama

dengan adanya HTML5 adalah mengurangi penggunaan plugin-plugin 3rd party pada HTML

sehingga dapat mempercepat kinerja web itu sendiri. Plugin-plugin tersebut seperti Adobe

Flash, Microsft Silverlight, Java dan lain-lainnya.

Page 24

Elemen baru di HTML 5

Demi mewujudkan struktur halaman web yang lebih baik semantik dan aksesibilitasnya,

dikenalkanlah beberapa elemen baru, diantaranya:

section serupa seperti h1-h6.

article bisa berupa entri blog atau tulisan konten.

aside menyajikan konten pelengkap.

header bisa menyajikan judul, deskripsi, bahkan nav untuk navigasi.

footer berisi catatan kaki seperti informasi hak cipta, penulis, kontak, dan sebagainya.

Dialog yang dikombinasikan dengan dt dan dd (seperti pada halaman FAQ) dapat

digunakan untuk menyajikan percakapan.

yang fenomenal adalah penggunaan elemen figure, video, audio, source, embed,

canvas dan elemen terkait berkas multimedia lainnya.

Atribut baru di HTML 5

Dikenalkan pula beberapa atribut baru, seperti:

atribut media, ping pada elemen pranala,

autofocus, placeholder, required, autocomplete dan sebagainya, terkait elemen input

dan form

reversed pada elemen ol untuk urutan besar ke kecil.

Beberapa kelebihan yang dijanjikan pada HTML5:

Dapat ditulis dalam sintaks HTML (dengan tipe media text/HTML) danXML.

Integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya.

Integrasi (‘inline’) dengan doctype yang lebih sederhana.

Penulisan kode yang lebih efisien.

Konten yang ada di situs lebih mudah terindeks oleh search engine.

Page 25

Browser yang Mendukung HTML

Opera Web Browser (mulai dari Opera 9.2 sampai yang terbaru saat ini yaitu opera

10)

Safari (mulai dari versi 3.1)

FireFox (Mulai dari FireFox 3 )

Google Chrome (Mulai dari versi 3)

Internet Explorer (Mulai dari versi 8)

HTML5 Semantic

HTML5 Semantic adalah beberapa tag baru yang diperkenalkan dalam HTML5 untuk

mendukung struktur halaman yang lebih rapi. Beberapa elemen baru digunakan untuk

mengurangi pemakaian tag <div>.

Elemen-elemen baru yang ditambahkan pada HTML5 adalah:

Tag Keterangan

<article> Menspesifikasikan konten yang bersifat

independen, seperti artikel, blog post, forum

post, dan sejenisnya.

<aside> Digunakan untuk sebuah subkonten.

Biasanya digunakan di dalam tag <article>.

<bdi> Untuk teks yang tidak boleh terikat pada

arah teks-elemen induknya

<command> Sebuah button, atau radiobutton, atau

checkbox.

<details> Untuk menjelaskan detail tentang sebuah

dokumen atau sebagian dari dokumen.

<summary> Digunakan pada sebuah ringkasan dan

sejenisnya di dalam tag <details>

<figure> Untuk mengelompokkan sekumpulan

section, biasanya berupa video.

<figcaption> Berisi caption/keterangan yang ditempatkan

Page 26

di dalam tag <figure>

<footer> Digunakan sebagai footer dari sebuah

halaman

<header> Digunakan sebagai header dari sebuah

halaman

<hgroup> Digunakan untuk sekumpulan heading

<mark> Digunakan pada teks yang akan di highlight

<meter> Digunakan untuk pengukuran, dimana nilai

maksimal dan minimal telah ditentukan

<nav> Digunakan untuk sekumpulan navigasi

<progress> Membuat Progress bar

<ruby> Digunakan untuk anotasi ruby

<rt> Untuk menjelaskan anotasi ruby

<rp> Menunjukkan elemen jika browser tidak

mendukung ruby

<section> Untuk sebuah section di dalam halaman.

Seperti Bab, Footer, dan sebagainya

<time> Untuk mendefinisikan waktu dan tanggal

<wbr> Word Break. Untuk memisah suatu kata bila

diperlukan.

HTML5 Audio

Salah satu fitur baru HTML5 yang paling mencengangkan adalah disediakannya tag baru

yang memungkinkan kita untuk memutar audio sesuai yang kita inginkan tanpa

menggunakan plugin tambahan seperti flash player. Dengan menggunakan tag <audio> kita

sudah bisa memasukkan file mp3 dan ogg ke dalam halaman web kita.

Untuk menambahkan audio ke dalam web kita, cukup ketikkan kode berikut

<!DOCTYPE html>

<html>

<body>

Page 27

<audio controls="controls">

  <source src="music/FromHere.ogg" type="audio/ogg">

Your browser does not support the audio element.

</audio>

</body>

</html>

Sehingga akan menampilkan output seperti berikut :

Mozilla version 9.0.1

Google chrome Version 22.0.1229.94

      Opera version 12.10 beta RC

Penjelasan dari tags diatas:

<    <audio>, tag audio utama, digunakan untuk memasukkan audio ke dalam HTML.

         <source>, digunakan untuk mengambil source file yang akan dimainkan audionya.

Page 28

Atribut pada audio

         Autoplay, atribut ini digunakan untuk member opsi kepada tag audio apakah langsung

dimainkan secara otomatis atau tidak.

         Controls, atribut ini memberikan pilihan untuk menampilkan kontrol audio (volume, seeker,

play/pause button).

         Type, digunakan untuk mendefinisikan tipe audio yang dimainkan.

         Src, digunakan untuk mendefinisikan source audio yang dimainkan.

Saat ini, ada tiga tipe file audio yang sudah didukung HTML5 yaitu MP3, WAV, dan OGG. Berikut

adalah data dukungan browser terhadap audio.

Browser MP3 Wav Ogg

Internet Explorer 9 Ya Tidak Tidak

Firefox 4.0 Tidak Ya Ya

Google Chrome 6 Ya Ya Ya

Apple Safari 5 Ya Ya Tidak

Opera 10.6 Tidak Ya Ya

HTML5 Video

Fitur multimedia lainnya yang didukung oleh HTML5 adalah video. Jika selama ini kita harus

menggunakan flash player untuk memasukkan konten video, pada HTML5 kita tidak perlu

lagi menggunakannya.

Untuk menambahkan elemen video kita gunakan kode berikut

<!DOCTYPE html>

<html>

<body>

<video width="320" height="240" controls="controls">

<source src="video/movie.ogg" type="video/ogg">

Your browser does not support the video tag.

</video>

</body>

</html>

Page 29

Sehingga akan menampilkan output sebagai berikut :

Mozilla version 9.0.1

   

Google chrome Version 22.0.1229.94

Opera version 12.10 beta RC

HTML5 Canvas

Page 30

Fitur yang lain pada HTML5 adalah <canvas>. Canvas memungkinkan kita untuk

memasukkan objek 2D atau 3D kedalam halaman web. Canvas juga sama seperti

GeoLocation, tidak bias bekerja sendiri. Dibutuhkan javascript untuk membuat objek di

dalamnya, baik 2D maupun 3D.

Untuk membuat objek di dalam canvas kita gunakan kode berikut :

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid

#c3c3c3;">

Your browser does not support the HTML5 canvas tag.

</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

</script>

</body>

</html>

Sehingga kita dapatkan hasil output seperti berikut :

Mozilla version 9.0.1

Page 31

Google chrome Version 22.0.1229.94

Opera version 12.10 beta RC

HTML5 Form Element

Pada HTML5 kita mengenal beberapa elemen form baru. Jika dahulu kita terbatas pada

input dan textarea, kali ini HTML5 menambahkan tiga elemen baru yaitu datalist, keygen,

dan output.

Namun untuk keygen, dukungan browser saat ini belum memenuhi standar keamanan, sehingga

lebih aman untuk para web programmer menggunakan enkripsi pada server-side seperti md5,

sha1, dan base64_encode.

         Form Datalist

<!DOCTYPE html>

<html>

<body>

<form action="demo_form.asp" method="get">

<input list="browsers" name="browser">

<datalist id="browsers">

<option value="Internet Explorer">

<option value="Firefox">

<option value="Chrome">

<option value="Opera">

<option value="Safari">

Page 32

</datalist>

<input type="submit"></form>

</body>

</html>

Sehingga kita dapatkan hasil output seperti berikut :

Mozilla version 9.0.1

Google chrome Version 22.0.1229.94

Opera version 12.10 beta RC

         Form Output

<!DOCTYPE html>

<html>

<body>

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0

Page 33

<input type="range" name="a" value="50">100 +

<input type="number" name="b" value="50">=

<output name="x" for="a b"></output>

</form>

</body>

</html>

Sehingga kita dapatkan hasil output seperti berikut :

Mozilla version 9.0.1

Google Chrome Version 22.0.1229.94

Opera version 12.10 beta RC

Page 34

BAB III

PENUTUP

 

A.      Kesimpulan

Dalam pembuatan website, dikenal dua komponen penting yaitu www dan HTML. Dimana

www merupakan suatu protokol standar dari internet, sedangkan HTML merupakan script

atau program standar yang dijalankan oleh www atau internet. Proyek HTML ini dibuat

dengan menggunakan media web editor notepad.

Di dalam HTML terdapat dua bagian dokumen yaitu bagian kepala (head) dan bagian tubuh

(body). Pembuatan proyek web/HTML sekolah dengan menggunakan notepad ini dimulai

dengan pembuatan bahasa HTML dalam notepad. Yang kemudian untuk setiap baris dalam

proyek ini selalu dibuat dengan bahasa HTML tersendiri sesuai dengan apa yang akan kita

buat.

Page 35

Daftar Pustaka

https://www.google.com/

http://id.wikipedia.org/wiki/HTML5

http://mumhanaartanti.blogspot.com/2013/01/artikel-tentang-html-5.html

http://danangsr.blogspot.com/2012/10/artikel-tentang-html-5.html

http://blog.uad.ac.id/dikysaputra/2012/07/01/makalah-tentang-html/

Page 36