BAB I

PENDAHULUAN

1.1 LATAR BELAKANG

Perkembangan dunia informatika semakin hari semakin mengalami perkembangan yang sangat pesat. Hal tersebut terbukti dengan adanya penggunaan internet dalam berbagai bidang. Tidak hanya dikalangan intansi-intansi tertentu saja yang menggunakan internet. Namun, orang awam pun sekarang dapat mengakses internet dengan bebas. Itu karena internet sudah dapat diakses dimanapun mereka berada dan kapanpun mereka inginkan. Selain itu, internet juga dapat memudahkan pekerjaan mereka.

Mengingat pentingnya dunia internet, para programmer berusaha membuat dan mendesain program-program dan aplikasi yang dibutuhkan saat melakukan browsing internet. Namun dari sekian banyaknya pemrograman yang ada, yang akan dibahas pada makalah ini adalah adalah mengenai pemrograman tentang “CSS”, “HTML”, “JAVA SCRIPT” dan “HTML 5”.

Dalam membuat halaman web kita akan menjumpai istilah html. Dimana html adalah dasar dari pembuatan halaman web. Dengan menguasai html kita akan bisa membuat suatu halaman web yang sederhana dan desain tampilan web yang memuaskan. Dalam penulisan makalah ini, Penulis bermaksud menjelaskan dan mengenalkan pengertian dasar “CSS”, “HTML", “JAVA SCRIT” dan “HTML 5.

1.2 RUMUSAN MASALAH

Makalah ini merupakan beberapa permasalahah sebagai berikut:

1. Apa pengertian dari CSS, HTML, JAVA SCRIPT dan HTML 5?

2. Bagaimana struktur dasar CSS, HTML, JAVA SCRIPT dan HTML 5?

3. Apa saja kode-kode CSS, HTML, JAVA SCRIPT dan HTML 5?

4. Apa saja elemen dasar CSS, HTML, JAVA SCRIPT dan HTML 5?

5. Apa saja kelemahan dan kelebihan CSS, HTML, JAVA SCRIPT dan HTML 5?

1.3 MAKSUD DAN TUJUAN

Maksud dari penulisan makalah ini adalah untuk memenuhi dan melengkapi salah satu tugas mata kuliah Pemrograman Web di UNIVERSITAS MUHAMMADIYAH GRESIK. Sedangkan tujuan dari penulisan tugas ini adalah:

1. Mengetahui pengertian dari CSS, HTML, JAVA SCRIPT dan HTML 5.

2. Mengetahui struktur dasar CSS, HTML, JAVA SCRIPT dan HTML 5.

3. Mengetahui kode-kode CSS, HTML, JAVA SCRIPT dan HTML 5.

4. Mengetahui elemen dasar CSS, HTML, JAVA SCRIPT dan HTML 5.

5. Mengetahui kelemahan dan kelebihan CSS, HTML, JAVA SCRIPT dan HTML 5.

1.4 METODE PENGUMPULAN DATA

Untuk memperoleh data yang digunakan dalam tugas ini,penulis menggunakan Metode Browsing Internet,yaitu:metode yang digunakan dengan browsing atau membaca referensi-referensi yang berkaitan dengan masalah yang di bahas dalam tugas ini di internet.

BAB II

PEMBAHASAN

2.1 MATERI CSS

2.1.1 Pengertian CSS

Apa Itu CSS?

CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke kode lain yang saling berhubungan.

Jadi kalau di tulis lengkap dalam bahasa Indonesia kira-kira arti CSS adalah kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML.

2.1.2 Keuntungan Penggunaan CSS

Jika anda memiliki beberapa halaman website dimana anda menggunakan font arial untuk tulisannya, lalu suatu hari anda bosan dengan arial dan ingin mengganti ke trebuchet, anda harus merubah satu per satu halaman website anda dan merubah tipe font dari arial menjadi trebuchet.

Dengan menggunakan css, dimana semua halaman web memakai css yang sama, anda cukup merubah satu baris kode css untuk merubah font di semua halaman web dari arial ke trebuchet. Jadi, keuntungan menggunakan CSS, lebih praktis!

2.1.3 Kekurangan Penggunaan CSS

Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua browser.

2.1.4 Syntax CSS

Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector, 1 property, 1 value.

Format penulisan kalimat CSS:

Ø selector { property: value }

Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat. Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur. Value adalah nilai dari pengaturannya.

a. Contoh Syntax:

h1 { color: red }

Contoh di atas menunjukkan

Selector: h1

Property: color

Value: red

Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color dari h1 ke warna merah (red).

b. Pengelompokan Selectors

Anda dapat menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan koma. Misalkan anda mau mengatur agar tag h1, h2 dan h3 semua menggunakan warna merah, maka kode CSS nya menjadi:

h1,h2,h3 { color: red }

Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma.

c. Penggunaan Banyak Properties

Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ).

Contoh:

h1,h2,h3 {color:red; font-family:arial; font-size:150%;}

Pada contoh di atas, tag h1, h2 dan h3 di atur agar menggunakan warna merah, dengan type font arial, dan ukuran font 150%.

d. Cara Penulisan Yang Baik

Sangat disarankan untuk menulis kode CSS menggunakan beberapa baris dimana pengaturan property dan valuesnya di indent supaya rapi dan lebih mudah di baca. Contoh :

h1,h2,h3{
color:red;
font-family:arial;
font-size:150%;
}

2.1.5 CSS Comment

Kadang kala, ada baiknya anda menuliskan komentar ke dalam kode CSS anda untuk memberi catatan pengingat. Anda bisa menggunakan syntax pembuka /* dan penutup */ untuk menuliskan komentar. Segala teks yang berada di antara tag /* dan */ tidak akan dibaca sebagai kode, tapi hanya sebagai catatan untuk diri anda.

Contoh:

/* Tulis komentar anda di sini */

{

text-align: justify;

/* Tulis komentar anda di sini */

color: blue;

font-family: arial;

}

2.1.6 Implementasi CSS

Ada beberapa cara memasang kode CSS ke dalam kode HTML / halaman web, yaitu:

A. Inline CSS.

Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS.

Cara ini sebaiknya hanya digunakan jika anda mau memformat suatu elemen satu kali saja.

Contoh:

<P style=”color:blue”>
Isi paragraf.
</p>

Pada contoh di atas, elemen paragraf <P> di format agar tulisannya menggunakan warna biru. Elemen paragraf lain, tidak akan menggunakan warna biru, karena format ini hanya berlaku pada elemen paragraf yang ditentukan kode CSS nya. Penulisan CSS dengan cara ini di mulai dengan kata style: lalu di ikuti dengan syntax property: value.

B. Embedded CSS atau memasang kode css ke dalam bagian <head>.

Anda bisa juga menempelkan kode CSS di antara tag <head> dan </head>. Penulisan CSS dengan cara ini diawali dengan tag <style> dan diakhiri dengan tag </style>.

Contoh:

<head>

p {color:blue;}

</style>

</head>

Dalam contoh di atas semua elemen <P> dalam halaman web tersebut akan diformat menggunakan font berwarna biru.

C. External CSS

Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran .css. Anda lalu perlu memanggil file CSS tersebut ke dalam semua halaman web yang anda buat. Dengan cara ini, anda hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web anda. Jadi ada dua langkah dalam pengimplementasian CSS dengan cara ini.

Contoh:

1. Anda membuat satu file dengan notepad atau teks editor lain, dan berinama, misalkan: style.css, lalu tuliskan kode-kode css di dalam file tersebut.

2. p {font-family: arial; font-size: small;}

3. h1 {color: red; }

4. Langkah kedua adalah memanggil file style.css dari semua halaman web. Caranya dengan memasukkan kode, di antara tag <head> dan </head>.

Contoh :

D. Import CSS

Anda bisa juga meng-import CSS ke dalam suatu halaman website menggunakan tag import.

Contoh:

@import "style.css";

atau

@import url("style.css");

2.1.7 Penggunaan Lebih dari Satu Kode CSS

Apabila ada lebih dari satu kode CSS untuk satu elemen, maka yang akan digunakan adalah kode yang lebih spesifik. Misalkan dalam satu halaman web, menggunakan eksternal style sheet untuk memformat elemen H1 sbb:

h1 {

color: red;

text-align: left;

font-size: 8pt

}

Sementara di halaman web yang sama, di antara tag <head> ada kode CSS sbb:

h1 {

text-align: right;

font-size: 20pt

}

Perhatikan bagaimana pemformatan saling bertabrakan, dari eksternal style sheet, text-align=left sementara dari internal style sheet, text-align=right.

Dalam kasus seperti ini, maka yang akan aktif adalah kode yang lebih spesifik, dalam hal ini, internal style sheet lebih spesifik dibandingkan eksternal style sheet.

Jadi, dalam contoh di atas, kode yang akan diimplementasikan adalah sbb:

color: red;

text-align: right;

font-size: 20pt

2.1.8 Class dan Id selector

A. Class Selector

Class selector adalah penggabungan beberapa properties yang digunakan lebih dari satu kali. Cara penulisan Class Selector:

.nama-class {property:value;}

Untuk menempelkan class ke dalam tag HTML:

taghtml.nama-class {Property:value;}

Perhatikan tanda titik di setiap awal nama Class. Jika anda ingin menggunakan class selector di luar kode HTML anda menggunakan tag <div class=nama-class> dan di akhiri dengan tag </div>.

Contoh:

Penulisan kode CSS:

.tengah {text-align:center;}
p.tengah {color:red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}

Pemakaian kode CSS:

<div class=tengah>
<p>Teks tengah akan berwarna merah.</p>
<h1 > Tag H1 tengah akan berwarna hitam</h1>
</div>
<h1 class=kiri>Tag H1 kiri akan berwarna biru</h1>

Hasil:

Teks tengah akan berwarna merah.

Tag H1 tengah akan berwarna hitam

Tag H1 kiri akan berwarna biru

B. ID Selector

ID Selector mirip dengan Class selector. Untuk membedakannya, gunakanlah ID selector untuk memformat bagian yang hanya muncul satu kali dalam satu halaman web, misalnya untuk memformat bagian menu / sidebar.

Cara penulisan ID Selector:

#nama-ID {property:value;}

Untuk menempelkan ID selector ke dalam tag HTML:

taghtml#nama-ID {Property:value;}

Perhatikan tanda # di setiap awal nama ID. Jika anda ingin menggunakan class selector di luar kode HTML anda menggunakan tag <div id=nama-ID> dan di akhiri dengan tag </div>.

2.2 MATERI HTML

2.2.1 PENGERTIAN HTML

Sebelum kita melangkah lebih jauh ada baiknya Anda tahu apa itu HTML. HTML atau Hypertext Markup Language merupakan protokol yang digunakan untuk mentransfer data atau document dari web server ke browser kita (Internet Explorer, Netscape Navigator, NeoPlanet, dll). HTML inilah yang memungkinkan Anda menjelajah internet dan melihat halaman web yang menarik.

Sekarang ini di pasaran terdapat banyak sekali HTML authoring (software yang digunakan untuk membuat atau mendesain halaman web). Macromedia Dreamweaver, Adobe GoLive, MS FrontPage sekedar contohnya. Tetapi tanpa mengetahui dasar-dasarnya Anda tidak akan memperoleh hasil yang maksimal. Mengapa ? Karena walaupun software-software tersebut semakin menawarkan kemudahan dalam membuat halaman web, tetapi biasanya seseorang masih perlu untuk mengedit halaman web tersebut secara manual. Terutama untuk halaman web yang sangat komplek.

Dalam tutorial ini Anda akan kami ajak untuk mengetahui dasar-dasar dari desain web. Yang dibutuhkan hanya sebuah word processor. Anda bisa menggunakan Notepad, WordPad, MS Word atau yang lainnya. Tapi yang paling mudah adalah menggunakan Notepad.

2.2.2 VERSI HTML

HTML sekarang sudah mencapai versi 4.0 (saat artikel ini ditulis). Sebelum digunakan, HTML harus diuji secara ketat oleh suatu badan yang bernama World Wide Web Concortium (W3C). Setiap penambahan/peningkatan versi, terdapat beberapa tambahan-tambahan tag dan fasilitas yang tidak dimiliki oleh versi sebelumnya. Tentunya versi yang telah dikeluarkan ini harus menjadi standar bagi browser. Bilamana browser ini tidak mendukung versi tertentu, maka browser tersebut tidak dapat menampilkan format HTML yang kita buat. Oleh karena itu, untuk melihat halaman web yang diformat dengan HTML versi baru, harus memiliki browser yang sudah mendukung versi HTML tersebut. Diantara ini adalah versi - versi html :

1. HTML 1.0

Ini adalah awal mula dari HTML (pendahulunya). Pada versi ini masih terlihat beberapa kelemahan dan masih sangat sederhana. Kemampuan yang dimiliki oleh versi 1.0 ini hanya terbatas pada heading, paragraf, hypertext, list dan setak tebal atau miring pada teks.

2. HTML 2.0

Versi ini telah ditambahkan kemampuan menyisipkan form didalamnya, sehingga kita dapat membuat halaman yang interaktif. Pengunjung dapat mengisi nama, alamat, email dan sebagainya.

3. HTML 3.0

Versi ini tidak bertahan lama karena kemudian disempurnakan oleh versi 3.2.

4. HTML 3.2

Pada versi ini telah diperkenalkan teknik peletakan teks pada sekeliling gambar, latar belakang berupa gambar, cascading style sheet, tabel, frame dan lain sebagainya. Versi ini juga mendukung Javascript, VBScript dan lain sebagainya.

5. HTML 4.0

Versi terakhir ini yang resmi dirilis ini telah menunjukkan beberapa kelebihan-kelebihan dari versi sebelumnya. Perubahan-perubahan ini hampir mencakup semua tag-tag HTML sebelumnya. Di samping itu pada versi ini ditambahkan tag-tag baru seperti ABBR, ACRONYM, BUTTON, PARAM, BUTTON, TBODY, THEAD dan lain sebagainya.

2.2.3 KEKURANGAN DAN KELEBIHAN HTML

Seperti yang kita tahu bahwa, setiap bahasa dan program mempunyai kelebihan dan Kekurangan. Ada baiknya kita mengetahui kelebihan dan kekurangan dari HTML sehingga kita bisa memaksimalkan pengetahuan dan wawasan kita dalam mengeksplorasi dunia browser.

A. Kelebihan-kelebihan HTML antara lain:

a. Merupakan bahasa penkodean yang lintas platform (cross platform), maksudnya HTML dapat digunakan pada berbagai jenis mesin komputer yang berbeda dan berbagai macam sistem operasi yang berbeda. Jadi bersifat fleksibel karena ditulis cukup dengan menggunakan editor karakter ASCII.

b. Dapat disisipi gambar baik gambar statis atau dinamis (animasi) termasuk menggunakan gambar untuk dijadikan hyperlink. Gambar di sini digunakan untuk merujuk pada suatu halaman web, dimana setiap titik-titik yang sudah didefinisikan berupa rectangular (kotak), poligon (kurva tak beraturan) atau lingkaran digunakan untuk 'jump' ke halaman lain, atau link ke halaman di luar web yang bersangkutan.

c. Dapat disisipi animasi berupa Java Applet atau file-file animasi dari Macromedia Flash atau Macromedia Shockwave (untuk keperluan ini, browser harus memiliki plug-in khusus untuk menjalankan file-file animasi ini).

d. Dapat disisipi bahasa pemrograman untuk mempercantik halaman web seperti Javascript, VBScript, Active Server Pages, Perl, Tcl, PHP dan sebagainya.

e. Bukan merupakan bahasa pemrograman jadi tidak memerlukan kompiler. Cara menjalanakannya cukup dengan menggunakan browser.

B. Adapun kekurangan dari HTML ini adalah:

a. Menghasilkan halaman yang statis, untuk memperoleh halaman yang dinamis harus menggunakan bahasa pemrograman tertentu seperti Javascript atau VBScript dan animasi seperti Flash atau Shockwave.

b. Memiliki tag-tag yang begitu banyak sehingga susah dipelajari untuk yang masih awam.

c. Tidak dapat menghasilkan halaman yang interaktif. Interaktif di sini maksudnya client dapat berinteraksi dengan server. Untuk keperluan itu, HTML harus disisipi bahasa pemrograman yang dapat menangani hal tersebut, contohnya Perl atau Tcl.

2.2.4 STRUKTUR DASAR HTML

HTML (Hypert Text Markup Language) merupakan bahasa pemrograman yang digunakan dalam pembuatan halaman web. Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda "/"). Sebuah halaman web minimal mempunyai empat buat tag, yaitu :

<HTML> Sebagai tanda awal dokumen HTML.

<HEAD> Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META.

<TITLE> Sebagai titel atau judul halaman. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser Anda (pada title bar).

Contoh :

<TITLE>Tips HTML -- www.klik-kanan.com</TITLE>

<BODY> Di dalam tag ini bisa diletakkan berbagai page attribute seperti warna latar belakang, warna teks, warna link, warna visited link, warna active link dan lain-lain.

Atribut :

BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK, LEFTMARGIN & TOPMARGIN.

Contoh :

Sebuah contoh sederhana dokumen HTML :

<HTML>
<HEAD>
<TITLE>Halaman pembuka
</TITLE>
</HEAD>

Letakkan text, images, dan link Anda di sini
</BODY>
</HTML>

2.2.5 PENGATURAN TEKS

Untuk mendapatkan halaman web yang baik Anda harus melakukan pengaturan terhadap teks seperti memilih jenis dan ukuran huruf, perataan, dll. Tag-tag di bawah ini yang biasa digunakan dalam pengaturan teks :

Headers: <Hn>..</Hn> Digunakan untuk mengatur ukuran huruf pada header. "n" mempunyai nilai antara 1 - 6 atau antara <H1> sampai <H6>, dengan <H1> merupakan ukuran terbesar dan <H6> merupakan ukuran terkecil.

Contoh :

<H2>Tutorial Html</H2>

Paragraph Baru: <P> Digunakan untuk pindah alinea atau paragraf. Tag ini bisa diberi akhiran </P> tapi juga bisa tidak diberi.

Line Break: <BR> Digunakan untuk pindah ke baris baru.

No Line Break: <NOBR> Bila digunakan tag ini maka teks yang panjang tidak secara otomatis pindah baris bawahnya bila baris pertama sudah terlalu panjang.

Font <FONT> Untuk mendefinisikan berbagai attribut FONT, yaitu : SIZE, FACE, COLOR.

SIZE: Ukuran font yang digunakan, berkisar antara 1 - 7 dengan 1 merupakan ukuran terkecil dan 7 merupakan ukuran terbesar.

FACE: Jenis atau nama font. Anda bisa memilih maksimal 3 jenis font yang masing-masing dipisahkan oleh koma. Bila terdapat spasi yang terletak pada nama font maka harus digunakan tanda garis bawah ( _ ). Dalam memilih jenis font ini harus dipertimbangkan apakah font yang kita gunakan pada halaman web kita nantinya akan terdapat pada komputer pengguna yang lain (pengakses web kita). Pendeknya kita tidak usah menggunakan font-font yang bentuknya aneh-aneh, gunakan saja font standar. Tapi bila Anda ingin menggunakan font yang sedikit "aneh" Anda bisa menggunakan graphic.

COLOR: Warna font, didefinisikan dengan menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan nama warna (red misalnya).

Contoh :

Contoh teks yang berwarna merah</FONT>

Contoh lainnya :

Base Font: <BASEFONT> Digunakan untuk mendefinisikan "default text". Attribut sama dengan attribut FONT. Tag FONT akan mengoverwrite setting pada BASEFONT.

Contoh :

Selain tag dan atribut di atas, masih terdapat lagi tag-tag yang berhubungan dengan pengaturan teks, yaitu :

Perhatian : Semua tag di bawah ini membutuhkan tap penutup.

<B> Bold text.

<I> Italic text.

<U> Underscore.

<TT> Typewriter.
<S> Strikeout - draws a line through the text.

<PRE> Preformatted Text <DFN> Definition.

<BLINK> Text berkedip (lebih baik jangan digunakan).

<STRONG> Strong.

<ADDRESS>

<CITE> Digunakan untuk quoting text.

<CODE> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda).

<SAMP> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda).

<KBD> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda).

<BIG> Ukuran teks akan lebih besar satu ukuran.

<SMALL> Ukuran teks akan lebih kecil satu ukuran.

<SUP> Membuat tekssuperscript.

<SUB> membuat tekssub script.

<ABBREV> Abbreviations.

<ACRONYM> Untuk akronim.

<PERSON> Digunakan untuk indexing.

<Q> Membuat short inline quotation.

<VAR> Membuat variable name, selalu dalam italics.

2.2.6 LISTS

Terdapat tiga tipe list yang dapat digunakan, yaitu :

Unordered Lists: <UL> Untuk membuat daftar item dengan tanda bullet. List entries didefinisikan dengan tag <LI>.

Contoh :

<UL>

<LI> Item nomer 1

<LI> Item nomer 2

<LI> Item nomer 3

</UL>

Dengan atribut TYPE Anda dapat mendefinisikan bentuk disc, circle atau square bullet point.

Contoh :
<UL COMPACT TYPE=square> …

Ordered Lists: <OL> Juga digunakan untuk membuat daftar item, dengan tiap item dapat menggunakan angka arab atau romawi. List entries juga didefinisikan dengan <LI> tag.

Contoh :

<LI> Item nomer 1

<LI> Item nomer 2

<LI> Item nomer 3

</OL>

Untuk TYPE Anda dapat juga menggunakan :

1- Default numbers, 1, 2, 3, etc.

A- Huruf besar. A, B, C, etc.

a- Huruf kecil. a, b, c, etc.

I- Romawi huruf besar. I, II, III, etc.

i- Romawi huruf kecil , i, ii, iii, etc.

Definition Lists: <DL>

Contoh :

<DL>

<DT> Item pertama.

<DD> Penjelasan tentang item pertama.

<DT> Item kedua.

<DD> Penjelasan tentang item kedua.

</DL>

2.2.7 IMAGES

Images : Digunakan untuk menampilkan image atau animasi gif pada halaman web Anda.

Atribut : alt, align=(center, left, right), hspave, vspace, border, width & height

Contoh : <IMG SRC="logo.gif" alt="Ini adalah logo halaman pembuka" width=200 height=100>
<IMG SRC="logo.gif" hspace=10 vspace=5 align=right border=2>

Links :

Digunakan untuk membuat link ke halaman lain. Tulisan yang terletak antara <A> dan </A> akan terdapat garis bawah.

Contoh :

<A HREF="halaman2.html">Klik di sini</A> Untuk membuat link ke halaman lain.
<A HREF="mailto:webmaster@klik-kanan.com">Klik di sini</A> Untuk membuat link pada alamat e-mail.

<A HREF="#aplikasi">Klik di sini</A> Untuk membuat link ke bagian lain pada halaman yang sama.

<A HREF="halamanlain.html#aplikasi">Klik di sini</A> Untuk membuat link kebagian lain pada halaman yang berbeda.

<A HREF="halaman2.html"><IMG SRC="gambar.gif"></A> Untuk membuat link dengan menggunakan gambar.

2.2.8 TABEL

Tabel sangat penting artinya dalam desain web. Karena dengan menggunakan tag table Anda dapat membuat halaman web "terbagi" pada beberapa kolom atau baris. Contohnya seperti pada halaman web yang sedang Anda baca ini.

Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table : <TABLE>, <TR>, dan <TD>. Yang perlu diingat adalah bahwa tab <TR> dan <TD> harus terletak di antara tag <TABLE> dan </TABLE>

<TABLE>
Terdiri dari atribut :

Ø align - perataan : rata kiri (left), tengah (center) atau kanan (right).

Ø bgcolor - warna latar belakang (background) dari tabel.

Ø border - ukuran lebar border tabel (dalam pixel).

Ø cellpadding - jarak antara isi cell dengan batas cell (dalam pixel).

Ø cellspacing - jarak antar cell (dalam pixel).

Ø width - ukuran tabel dalam pixel atau percent.

Contoh: :
<TABLE align="center" bgcolor="#0000FF" border="2" cellpadding="5" cellspacing="2" width="90%">

<TR>
Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut:

Ø align - perataan : rata kiri (left), tengah (center) atau kanan (right).

Ø bgcolor - warna latar belakang dari baris.

Ø valign - perataan vertikal : top, middle atau bottom.

Contoh :
<TR align="right" bgcolor="#0000FF" valign=top>

<TD>
Tag ini digunakan untuk membuat kolom baru pada tabel.

Ø align – perataan.

Ø background - image yang digunakan sebagai latar belakang dari kolom.

Ø bgcolor - warna latar belakang.

Ø colspan - lihat gambar contoh.

Ø height - ukuran tinggi cell dalam pixels.

Ø nowrap - membuat supaya isi dari kolom tetap berada pada satu baris.

Ø rowspan - lihat gambar contoh.

Ø valign - perataan vertikal :top, middle atau bottom.

Ø width - ukuran kolom dalam pixel atau percen.

Contoh :

<table width="100" border="1" cellspacing="2" cellpadding="2">

<tr>

<td bgcolor="#0000FF">  </td>

<td bgcolor="#FFFF66"> </td>

<td rowspan="2" bgcolor="#FF3366"> </td>

</tr>

<tr>

<td colspan="2" bgcolor="#33CC66"> </td>

</tr>

<tr>

<td colspan="3" bgcolor="#FFCC99"> </td>

</tr>

</table>

<td rowspan="2" bgcolor="#FF3366"> </td>

</tr>

<tr>

<td colspan="2" bgcolor="#33CC66"> </td>

</tr>

<tr>

<td colspan="3" bgcolor="#FFCC99"> </td>

</tr>

</table>

2.2.9 FRAMES

1
<FRAMESET cols="*,140">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>

2
<FRAMESET cols="100,*">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>

3
<FRAMESET rows="100,*">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>

4
<FRAMESET rows="*,60">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>

5
<FRAMESET rows="*,60">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET cols="50%,50%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
</FRAMESET></FRAMESET>

6
<FRAMESET cols="*,50%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET rows="15%,15%,70%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
<FRAME SRC="menu3.htm" NAME="Frame4">
</FRAMESET></FRAMESET>

7
<FRAMESET cols="50%,50%">
<FRAMESET rows="50%,50%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="homepage2.htm" NAME="Frame2">
</FRAMESET>
<FRAMESET rows="50%,50%">
<FRAME SRC="menu.htm" NAME="Frame3">
<FRAME SRC="menu2.htm" NAME="Frame4">
</FRAMESET></FRAMESET>

8
<FRAMESET rows="15%,70%,15%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET cols="15%,70%,15%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
<FRAME SRC="menu3.htm" NAME="Frame4">
</FRAMESET>
<FRAME SRC="homepage.htm" NAME="BIG">
</FRAMESET></FRAMESET>

2.2.10 KUMPULAN TAG HTML

<!-- -->	Memberi komentar atau keterangan. Kalimat yang terletak pada tag kontiner ini tidak akan terlihat pada browser
<a href>	Membuat link ke halaman lain atau ke bagian lain dari halaman tersebut
<a name>	Membuat nama bagian yang didefinisikan pada link pada halaman yang sama
<applet>	Sebagai awal dari Java applets
<area>	Mendefinisikan daerah yang dapat diklik (link) pada image map
<b>	Membuat teks tebal
<basefont>	Membuat atribut teks default seperti jenis, ukuran dan warna font
<bgsound>	Memberi (suara latar) background sound pada halaman web
<big>	Memperbesar ukuran teks sebesar satu point dari defaultnya
<blink>	Membuat teks berkedip
<body>	Tag awal untuk melakukan berbagai pengaturan terhadap text, warna link & visited link
<br>	Pindah baris
<caption>	Membuat caption pada tabel
<center>	Untuk perataan tengah terhadap teks atau gambar
<comment>	Meletakkan komentar pada halaman web tidak tidak akan nampak pada browser
<dd>	Indents teks
<div>	Represents different sections of text.
<embed>	Menambahkan sound or file avi ke halaman web
<fn>	Seperti tag <a name>
<font>	Mengganti jenis, ukuran, warna huruf yang akan digunakan utk teks
<form>	Mendefinisikan input form
<frame>	Mendefinisikan frame
<frameset>	Mendefinisikan attribut halaman yang akan menggunakan frame
<h1> ... <h6>	Ukuran font
<head>	Mendefinisikan head document.
<hr>	Membuat garis horizontal
<html>	Bararti dokumen html
<i>	Membuat teks miring
<img>	Image, imagemap atau an animation
<input>	Mendefinisikan input field pada form
<li>	Membuat bullet point atau baris baru pada list (berpasangan dengan tag <dir>, <menu>, <ol> and <ul> )
<map>	Mendefinisikan client-side map
<marquee>	Membuat scrolling teks (teks berjalan) - hanya pada MS IE
<nobr>	Mencegah ganti baris pada teks atau images
<noframes>	Jika browser user tidak mendukung frame
<ol>	Mendefinisikan awal dan akhir list
<p>	Ganti paragraf
<pre>	Membuat teks dengan ukuran huruf yg sama
<script>	Mendefinisikan awal script
<table>	Membuat tabel
<td>	Kolom pada tabel
<title>	Mendefinisikan title
<tr>	Baris pada tabel
<u>	Membuat teks bergaris bawah

2.3 MATERI JAVA SCRIPT

2.3.1 Pengertian JavaScript

Jika kita berbicara dalam konteks web, sederhananya, kita dapat memahami JavaScript sebagai bahasa pemrograman yang berjalan khusus untuk di browser atau halaman web agar halaman web menjadi lebih hidup. Kalau dilihat dari suku katanya terdiri dari dua suku kata, yaitu Java dan Script. Java adalah Bahasa pemrograman berorientasi objek, sedangkan Script adalah serangkaian instruksi program.

Secara fungsional, JavaScript digunakan untuk menyediakan akses script pada objek yang dibenamkan ( embedded ). Contoh sederhana dari penggunaan JavaScript adalah membuka halaman pop up, fungsi validasi pada form sebelum data dikirimkan ke server, merubah image kursor ketika melewati objek tertentu, dan lain lain.

1. JavaScript adalah bahasa “Scripting”, bukan bahasa pemrograman.

2. JavaScript biasanya disisipkan langsung pada halaman HTML.

3. Client Side scripting.

4. Apakah JavaScript sama dengan Java? TIDAK. JavaScript dan Java sangat berbeda baik itu dari bahasa maupun dari konsep dan disainnya.

5. JavaScript bersifat Case Sensitive.

2.3.2 Apa saja syntax dalam Java Script?

1. Pemakaian alert sebagai property window

<HTML>

<HEAD>

<TITLE>Alert Box</TITLE>

</HEAD>

<BODY>

<!--

window.alert("Ini merupakan pesan untuk Anda");

//-->

</SCRIPT>

</BODY>

</HTML>

2. Pemakaian metode dalam objek.

<HTML>

<HEAD>

<TITLE>Skrip JavaScript</TITLE>

</HEAD>

<BODY>

Percobaan memakai JavaScript:<BR>

<!--

document.write("Selamat Mencoba JavaScript<BR>");

document.write("Semoga sukses!");

//-->

</SCRIPT>

</BODY>

</HTML>

3. Pemakaian prompt

<HTML>

<HEAD>

<TITLE>Pemasukan Data</TITLE>

</HEAD>

<BODY>

<!--

var nama = prompt("Siapa nama Anda?","Masukkan nama anda");

document.write("Hai, " + nama);

//-->

</SCRIPT>

</BODY>

</HTML>

2.3.3 Bagaimana cara mengmiplementasikan Java Script?

JavaScript adalah salah suatu bagian dari bahasa pemrograman Java yang dibuat oleh Sun Microsystem. Javascript adalah bahasa script yang langsung di masukkan ke dalam dokumen HTML, sehingga tidak memerlukan kompiler lain lagi, dan untuk membuat Javascript, adalah dengan menggunakan tag <SCRIPT>, dan memiliki Atribut LANGUAGE untuk menyatakan jenis bahasa script yang digunakan didalam nya.

Perhatikan contoh dokumen HTML sederhana yang meyisipkan JavaScript ke dalamnya :

<HTML>
<HEAD>
<TITLE>Contoh JavaScript Sederhana</TITLE>

</HEAD>
<BODY>

// menuliskan ke layar browser

document.writeln("Javascript pertamaku !");

// kode javascript telah selesai.

</SCRIPT>
</BODY>
</HTML>

Jadi, untuk JavaScript LANGUAGE harus di isi "JavaScript" (lihat contoh di atas). Elemen <SCRIPT> dapat ditulis pada bagian HEAD maupun BODY, sedangkan untuk membuat komentar di dalam kode JavaScript, kita harus menggunakan // (slash), seperti contoh :

//Ini adalah komentar penjelasan kode

Elemen <SCRIPT> juga memiliki atribut SRC yang digunakan untuk menunjuk file terpisah dari lokasi lain dengan format file JavaScript (*.js), sehingga dapat disimpan terpisah jauh dari dokument HTML yang menggunakan nya.

Contoh penerapan JavaScript terpisah dari document yang menggunakan nya :

<HTML>
<HEAD>
<TITLE>Contoh Pemakaian File JavaScrip terpisah</TITLE>

</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript" SRC="http://domain.com/file/nama-file.js"> </SCRIPT>
</BODY>
</HTML>

Dimana nama-file.js adalah nama file JavaScript yang ingin digunakan, dan di dalam file JavaScript tersebut tidak perlu lagi menggunakan tag <script> atau tag<script language="JavaScript">, jadi langsung saja menuju kode nya, seperti contoh di bawah ini : Isi File : nama-file.js

document.write("Ini adalah hasil Exekusi Kode JavaScript");

2.3.4 Apa sajakah contoh dari Java Script?

Sebagai pengenalan, ini ada beberapa contoh sederhana kode JavaScript, diantaranya adalah sebagai berikut :

Ø JavaScript dapat disisipkan dalam tag HTML dengan menggunakan tag script

//Kode Javascript

</script>

Sama halnya seperti PHP kode yang berada setelah tanda “//” tidak akan di eksekusi. Kode JavaScript dapat dituliskan dibagian head, body atau di tulis pada file external.

Ø Kode JavaScript di bagian head

<html>

<head>

<title>javascript di bagian head</title>

function sayhi(){

alert('Hi, Aku di eksekusi setelah halaman selesai di load');

}

</script>

</head>

<p>Ini adalah halaman web</p>

</body>

</html>

</script>

Ø Kode JavaScript di bagian body

<html>

<head>

<title>javascript di bagian body</title>

</head>

<body>

alert("Hi, Aku di eksekusi saat halaman web di load/sebelum halaman selesai di load");

</script>

<p>Ini adalah halaman web</p>

</body>

</html>

</script>

Jika kita perhatikan dari contoh pertama, tulisan “Ini adalah halaman web” akan muncul sebelum “Hi, Aku…” muncul. Berbeda dengan kode yang disisipkan di bagian body, “Hi, Aku…”akan muncul sebelum “Ini adalah halaman web” muncul di halaman web. Wokoke begitulah kira-kira perbedaan penempatan skrip.

Kode JavaScript yang tersimpan di file external ber-ekstensi .js dan dapat dipanggil di bagian head atau body dengan menyertakan source dari file eksternal JavaScript tersebut. Keuntungan dari penulisan secara eksternal ini, kita dapat menjalankan JavaScript pada halaman yang berbeda tanpa harus menulis ulang skrip di setiap halaman.

Ø Contoh kode JavaScript yang disimpan file eksternal:

//fungsi ini di panggil setelah halaman selesai di load

window.onload = function(){

alert(’Hi, Aku berasal dari file external sayhi.js’);

}

Kemudian kita simpan file tersebut sebagai sayhi.js. Untuk memanggil kode tersebut sisipkan source JavaScript dalam tag HTML seperti berikut:

<html>

<head>

<title>javascript di bagian head</title>

</head>

<body>

<p>Ini adalah halaman web</p>

</body>

</html>

</script>

Penulisan src=”sayhi.js” pada contoh diatas harus sesuai dengan file kode JavaScript disimpan. Jika file disimpan dalam folder js, src ditulis menjadi src=”js/sayhi.js”.

2.3.5 Apa kekurangan dan kelebihan dari Java Script?

A. Kelebihan Javascript

a. Ukuran file kecil

Script dari javascript memiliki ukuran yang kecil sehingga ketika web yang memiliki javascript ditampilkan di browser maka akses tampilannya akan lebih cepat dibandingkan ketika browser membuka suatu web yang memiliki script java. Hal ini juga sangat berkepentingan dengan daya kerja server. Semakin kecil space suatu web yang disimpan dalam suatu server maka daya kerja server ketika di browsing oleh user di internet akan tidak terlalu berat, selain itu sifat javascript client side yang tidak perlu lagi di olah oleh server ketika browser memanggil web dari sebuah server.

b. Mudah untuk dipelajari

Javascript merupakan bahasa semi pemograman yang merupakan gabungan antara bahasa pemograman java dengan bahasa kode HTML sehingga disebut bahasa hybrid. Walaupun javascript merupakan turunan dari java namun javascript tidak memiliki aturan yang serumit java.

c. Terbuka

Javascript tidak terikat oleh hardware maupun software tertentu bahkan system operasi seperti windows maupun unix. Karena ia bersifat terbuka, maka ia dapat dibuat maupun di baca di semua jenis komputer.

B. Kekurangan Javascript

a. Script tidak terenkripsi

Karena javascript bersifat client side, maka script yang kita buat di text editor dan telah dijadikan web di server, ketika user merequest web dari server tersebut maka sintak javascript akan langsung ditampilkan di browser. User bisa melihat dan menirunya dari sourcenya.

b. Kemampuan terbatas

Walaupun javascript mampu membuat bentuk web menjadi interaktif dan dinamis, namun javascript tidak mampu membuat program aplikasi sendiri seperti java.

c. Keterbatasan Objek

Javascript tidak mampu membuat kelaskelas yang bisa menampung objekobjek tambahan seperti java karena javascript teleh memiliki objek yang builtin pada sturktur bahasanya.

2.4 MATERI HTML 5

2.4.1 Pengertian HTML5

HTML5 adalah suatu spesifikasi sebagai hasil perbaikan dari standard HTML(Hypertext Markup Language) sebelumnya yang dikeluarkan oleh W3C( world Wide Web Consurtium) dan partner kerjanya yaitu Web Hypertext Application technology Working Group. Tujuan adanya revisi yang semula HTML menjadi HTML5 adalah untuk meningkatkan bahasa pada system multimedia yang sedang in yang dengan mudah dapat terbaca oleh manusia dan dimengerti oleh computer itu sendiri sebagai perangkat. Selain itu, juga bertujuan untuk mengurangi penggunaan plugin-plugin 3rd party pada HTML sehingga dapat mempercepat kinerja web itu sendiri. Contoh plugin itu sendiri adalah, Adobe Flash, Microsoft Silverlight, Java dan lain-lainnya.

2.4.2 Sejarah HTML5

HTML5 merupakan perbaikan kelima dari HTML yang pertama kali dibuat pada tahun 1990 dan terakhir kalinya versi HTML4 dirilis tahun 1997. Para kelompok kerja Teknologi Aplikasi Web Hyperteks memulai standar baru HTML5 ini pada tahun 2004, dan pada tahun 2009 W3C dan WHATWG bersatu dalam pengembangan HTML5. Konsep pertamanya sudah dipublikasikan pada tahun 2008, tetapi tidak banyak yang menggunakannya hingga tahun 2011. Pada tahun 2011, HTML 5 diterbitkan sepenuhnya dan orang-orang mulai menulis dan menggunakannya, namun penerapannya pada masing-masing browser yang berbeda masih bisa dibilang buruk. Hari ini, seluruh browser utama (Chrome, Safari, Firefox, Opera, IE) dapat mendukung HTML5, sehingga teknologi HTML terbaru dapat digunakan dengan sebaik-baiknya. HTML5 mulai dikenal oleh masyarakat pada tahun 2010 meskipun sudah dikenal sejak lama oleh para pengembang web. Dengan adanya pengembangan HTML5, adobe flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau konten apapun di web.

2.4.3 Fitur-Fitur Baru HTML5

a. Canvas

Canvas adalah media yang bisa dicoret-coret langsung dan tidak memerlukan plugin khusus. Canvas memberikan pilihan kepada para penggunanya. Dulu, saat ingin menggambar di halaman web maka harus menggunakan applet Java atau flash namun sekarang dapat menggunakan canvas, dengan cara menambahkan canvas dan javascript saja maka kita sudah dapat menggambar di halaman web.

b. Video dan Audio

Karena sudah ada tag <audio> dan <video> maka kita tidak memerlukan flash lagi untuk memutar audio. Untuk masuk di dalamnya dapat menggunakan berbagai format, yang paling menonjol adalah Ogg Theora dan H.264. namun sampai sekarang penggunaan kode masih dipertanyakan kembali.

c. Local storage

Fitur ini merupakan standard dalam HTML5. Fitur ini dapat menyimpan data yang memiliki kapasitas besar dibanding yang lain tanpa harus mengimplementasikan trik dengan cookie atau flash.

d. Web workers

Kita sebelumnya pernah menikmati fitur ini dalam Google gears. Web workers ini mempunyai kelebihan dibanding dengan javascript, missal saja saat kita mengoperasikan computer dengan javascript maka akan menyebabkan computer melambat, nah ini yang membedakan dengan web workers.

e. Semantics

Fitur ini sangatlah cocok bagi para perancang yang sering meng-abuse div dan span sebagian elemen nav, fret no more. Semantic ini bermanfaat sekali, karena bukan hanya untuk mencari informasi namun juga dapat melakukan seperti yang dijelaskan diatas.

2.4.4 Fitur Pemrograman Terbaru Pada HTML5

a. Kemunculan Elelmen <Hgroup>

Ketika memasang judul diikuti dengan subheading di bagian header website, anda mungkin biasa menggunakan tag standar yaitu <h1> dan <h2>. Sayangnya. tidak ada cara yang semantik untuk mengaitkan hubungan di antara keduanya. Padahal secara hirarki,tag <h2> seharusnya berada di bawah <h1>. Nah, dengan elemen <hgroup>, kini kita dapat mengelompokkan tag heading agar sesuai hirarki, tanpa sedikipun memengaruhi skema aliran dokumen.

<h2>supersite in just click away Supersite in just click way </h2>

</hgroup>

</header>

b. Kemunculan Elemen <Figure>

Perhatikan kode berikut, yang saat ini mungkin seringkali anda gunakan untuk menampilkan sebuah gambar.

<p>Leonidas Berteriak Spartan. </p>

Sayangnya, kode di atas tidak semantik. Caption yang dibungkus dalam tag paragraf <p> benar-benar terpisah elemen <img> di atasnya. HTML5 memperbaiki hal ini dengan mengenalkan elemen <figure>. Jika anda mengkombinasikan dengan elemen <figcaption>, maka anda sekarang bisa mengasosiasikan caption yang secara hirarki sesuai dengan gambar masing-masing.

<figcaption> <p> Leonidas Berteriak Spartan. </p> </figcaption>

</figure>

c. Kemunculan Elemen <Mark>

Bayangkan sebuah efek stabilo yang muncul setiap kali anda melakukan pencarian kata di suatu halaman. Maka elemen <mark> adalah senjata baru HTML5 yang memungkinkan anda untuk memunculkannya. Anda dapat menggabungkan dengan JavaScript pula. Contohnya,jika ada penggunjung yang mencari kata "Spartan!" di website saya, saya bisa memanfaatkan JavaScript untuk wrap setiap string yang cocok dengan kata "Spartan!" dengan tag <mark> untuk memunculkan efek stabile.

<h3> Hasil Pencarian </h3><p> Di hadapan Leonidas berbaris 100.000 pasukan Persia. Namun tanpa sedikitpun rasa gentar, dia menyerukan, <mark>"Spartan1"</mark>. </p>

2.4.5 HTML5 Melengkapi <Form> Dengan Berbagai Atribut Baru

Setiap programmer pasti tahu bagaimana caranya membuat form. Tambahkan sebuah tag <form> berisi elemen <input type="text">, <input type="password">, dan sebuah <input type="submit">, maka jadilah. Namun rupanya form yang sekarang ini anda kenal sudah tidak relevan lagi. HTML5 telah melengkapi form dengan sejumlah atribut-atribut baru yang lebih menarik, dinamis, dan mungkin tidak pernah anda kenal sebelumnya. Misalnya <placeholder>, <autofocus>. dan <type> dengan kapabilitas masing-masing. Sayangnya fitur-fitur baru ini mungkin masih belum dapat ditampilkan potensi sepenuhnya pada beberapa browser. Namun tidak ada salahnya untuk dipelajari dan diterapkan sekarang atau ketika di masa depa dimana browser versi lama telah kehilangan peminat dan punah dari permukaan bumi.

a. Form Dilengkapi Email Validation

Jika anda terapkan type "email" pada form, maka anda dapat memerintahkan browser untuk hanya mengijinkan isian yang sesuai dengan struktur alamat email saja. Artinya, HTML5 sudah dilengkapi email validation didalamnya. Meskipun pada beberapa browser (sebut saja IE), hasilnya tidak akan ditampilkan sesuai dengan yang anda inginkan.

<!DOCTYPE html>

<head> <title>untitled</title> </head>

<body>

<label for="email">Email:</label>

<button type="submit"> Submit Form </button> </form>

</body> </html>

b. Munculnya Attribut <Required> pada Form

Form pada HTML5 kini juga telah dilengkapi atribut <required>, yang mampu membuat isian tertentu menjadi wajib diisi.

Dengan kode ini, maka sebuah form tidak dapat disubmit bila field "isian" dibiarkan kosong. Berikut adalah contoh singkat mengenai penerapannya.

<input type="text" id="isian" name="isian" place-holder="King Xerxes"

required>

</form>

c. Munculnya Attribut <Pattern> pada Form

Dengan atribut <pattern>, kini anda dapat memerintahkan form untuk melakukan validasi isian sesuai aturan yang telah ditentukan. Misalnya pada kode berikut :

<label for="username">Membuat username baru: </label>

<input type"text" name="username" id="username" pattern="[A-Za-z]{4,10}"

required>

</form>

Jika anda familiar dengan "regular expression", maka pattern [A-Za-z]{1,10} memerintahkan pada form agar hanya menerima huruf besar dan kecil saja, sekaligus harus diisi dengan 1-10 karakter.

2.4.6 Elemen Baru HTML5

Demi mewujudkan struktur halaman web yang lebih baik semantik dan aksesibilitasnya, dikenalkanlah beberapa elemen baru, diantaranya:

1. Section serupa seperti h1-h6.

2. Article bisa berupa entri blog atau tulisan konten.

3. Aside menyajikan konten pelengkap.

4. Header bisa menyajikan judul, deskripsi, bahkan nav untuk navigasi.

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

6. Dialog yang dikombinasikan dengan dt dan dd (seperti pada halaman FAQ) dapat digunakan untuk menyajikan percakapan.

2.4.7 HTML5 Semantic

Merupakan tag baru yang dikeluarkan pada HTML5 guna mendukung perubahan struktur halaman agar terlihat lebih rapi, selain itu juga untuk mengurangi pemakaian tag <div>.

Elemen-elemen baru yang ditambahkan pada HTML5 adalah:

1. <article > : tag ini mendefinisikan artikel, posting atau komentar dari pengguna, atau suatu konten yang independen.

2. < aside > : tag aside pada HTML5 menandakan suatu konten yang terpisah (aside) dari konten sebuah halaman, seperti sebuah sidebar.

3. < bdi > : teks tidak boleh terikat pada arah teks elemen.

4. < command > : Sebuah button, atau radiobutton, atau checkbox.

5. < details > : Untuk menjelaskan detail tentang sebuah dokumen atau sebagian dari dokumen.

6. < summary > : Digunakan pada sebuah ringkasan dan sejenisnya di dalam tag <details>.

7. < figure > : Untuk mengelompokkan sekumpulan section, biasanya berupa video.

8. < figcaption > : Berisi caption/keterangan yang ditempatkan di dalam tag <figure>.

9. < footer > : Anda tidak perlu lagi mendefinisikan ID header atau footer, gunakan tag ini untuk menggantikannya.

10. < header > : Anda tidak perlu lagi mendefinisikan ID header atau footer, gunakan tag ini untuk menggantikannya.

11. < hgroup > : Digunakan untuk sekumpulan heading.

12. < mark > : Digunakan pada teks yang akan di highlight.

13. < meter > : Digunakan untuk pengukuran, dimana nilai maksimal dan minimal telah ditentukan.

14. < nav > : navigasi pada website Anda dapat ditaruh didalam tag nav, yang dapat secara otomatis membuat daftar Anda seperti sebuah navigasi.

15. < progress > : Membuat Progress bar.

16. < ruby > : Digunakan untuk anotasi ruby.

17. < rt > : Untuk menjelaskan anotasi ruby.

18. < rp > : Menunjukkan elemen jika browser tidak mendukung ruby.

19. < section > : tag ini dapat mendefinisikan section apapun dalam document Anda. Section bekerja kurang lebih seperti div yang memisahkan section yang berbeda.

20. < time > : Untuk mendefinisikan waktu dan tanggal.

21. < wbr > : Word Break. Untuk memisah suatu kata bila diperlukan.

2.4.8 Kelebihan Dan Kekurangan HTML5

A. Kelebihan HTML 5:

1. Cleaner code, karena sebagian besar kode telah termasuk di dalam sintaks html5, maka kode nampak terlihat lebih sederhana daripada penggabungan antara html, css dan java script.

2. Greater consistency, HTML5 telah melakukan banyak sekali penambahan sintaks yang dibuat dalam struktur lebih baik dan lebih sederhana daripada sintaks-sintaks sebelumnya. Hal ini membuat developer terbantu dalam meningkatkan konsistensi dalam membangun sebuah web.

3. Improve Semantics, dengan berbagai elemen kode di dalam html5 yang telah distandarisasi, maka nilai semantik dari sebuah web dapat lebih ditingkatkan. Itu berarti bahwa bagian-bagian dari web seperti header, nav, footer dan beberapa bagian lainnya terdefinisi dengan jelas maksud serta tujuannya selain itu juga terbentuk dalam sebuah “machine readible format”

4. Improved Accessibility, dengan teknologi HTML5 yang memudahkan struktur pembangunan sebuah web, maka developer dapat membangun pemahaman yang lebih detil mengenaik halaman web.

5. Client-side Database, HTML5 menyediakan model database SQL yang baru dengan API yang dapat dibangun dalam konsep lokal, dalam hal ini di sisi client.

6. Geolocation, HTML5 mempunyai API yang terintegrasi terhadap geolocation, fasilitas tersebut dapat diakses melalui GPS atau fasilitas lain seperti Google Latitude pada iphone.

7. Offline Aplication Cache, pengguna dapat terus melakukan interaksi dengan aplikasi meskipun mereka terputus dari jaringan internet.

8. Smarter Forms, terdapat semacam reguler expression (regex) yang membuat form mampu mengenali secara lebih baik tentang input, validasi data dan interaksi dengan elemen lain (misal : format email, password dll)

9. Sharper focus on Web Application Requiments, HTML5 membuat sebuah mekanisme yang lebih mudah dalam hal pembuatan front end, aplikasi chat, tools drag and drop, video player, pengolah grafis dan masih banyak lagi.

10. Bersifat ompatibel dengan semua browser

B. Kekurangan HTML 5:

1. Saat ini HTML5 masih dalam pengembangan, sehingga hanya beberapa browser yang sudah mendukung HTML5, seperti fitur-fitur pada HTML 5 tidak semuanya bisa berfungsi dengan baik pada beberapa browser. Beberapa browser yang sudah mendukung HTML 5 seperti Safari, Chrome, Firefox, dan Opera. Namun kabarnya IE9 (Internet Explorer) akan mendukung beberapa fitur dari HTML5.

2. Kekurangan utama yang dimiliki oleh HTML5 ini adalah versi ini hanya support untuk browser modern/terbaru.

3. Karena bahasa HTML5 ini masih dalam perkembangan, jadi beberapa elemen yang ada bisa saja berubah.

4. Fitur keamanan yang ditawarkan HTML5 masih terbatas.

5. HTML5 tidak dapat diandalkan dalam hal format karena web browser yang berbeda disebabkan mereka tidak mendukung salah satu format tunggal.

BAB III

PENUTUP

1.1 Kesimpulan

1. CSS adalah kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML. CSSmempunyai keuntungan yaitu lebih praktis dari bahasa pemrograman lainnya.

2. HTML merupakan protokol yang digunakan untuk mentransfer data atau document dari web server ke browser. HTML mempunyai keuntungan yaitu lebih bersifat fleksibel dari bahasa pemrograman lain karena dapat digunakan pada berbagai jenis mesin komputer yang berbeda dan berbagai macam sistem operasi yang berbeda.

3. JavaScript adalah bahasa pemrograman berbasis prototipe yang berjalan disisi klien. JavaScript didisain untuk membuat halaman HTML menjadi lebih interaktif.

4. HTML5 adalah suatu spesifikasi sebagai hasil perbaikan dari standard HTML(Hypertext Markup Language). Tujuan adanya revisi yang semula HTML menjadi HTML5 adalah untuk meningkatkan bahasa pada system multimedia yang sedang in yang dengan mudah dapat terbaca oleh manusia dan dimengerti oleh computer itu sendiri sebagai perangkat.

1.2 Saran

Dalam penulisan makalah ini ini penulis memiliki harapan agar pembaca memberikan kritik dan saran yang membangun.Karena penulis sadar dalam penulisan laporan ini terdapat begitu banyak kekurangan. Selain itu, penulis juga menyarankan supaya dibaca dengan baik dan seksama sehingga setelah membaca laporan ini kita semua mendapatkan suatu pengetahuan dan informasi baru.

DAFTAR PUSTAKA

http://cssdanhtm.blogspot.com/2013/04/makalah-tentang-css-dan-html.html/diakses diaskes pada 14 maret pukul 10.25

http://rizkyramadhansttg.wordpress.com/2008/07/15/dasar-pemrograman-html/

pelita, reza. 2010. Kelebihan dan kekurangan HTML5. http://rezzapelita.blogspot.com diakses pada 14 maret pukul 10.40

soeko, danang. 2012. Artikel tentang HTML5. http://danangsr.blogspot.com diakses pada 23 oktober 2013

About belajar html dan java

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.

makalah html,css dan java script

Sponsor

Arsip Blog

Makalah HTML, CSS, JavaScript

About belajar html dan java

1 comments:

Video Of Day

Sponsor

Arsip Blog

Makalah HTML, CSS, JavaScript

About belajar html dan java

RELATED POSTS

1 comments: