Anda di halaman 1dari 30

PEMROGRAMAN WEB

HTML, HTML 5, CSS, CSS 3, JAVA SCRIPT

Dosen Pengampu :
Deni Sutaji S.Kom

Nama kelompok :
Kevin Arbianto (13621043)
Irhas Madani

(13621045)

Nur Aini

(13621055)

Hamdan lutfi

(13621059)

Yuniar Chandra (13621066)

TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS MUHAMMADIYAH GRESIK

ii

Kata Pengantar

Puji syukur ke hadirat Allah SWT karena atas berkat Rahmat-Nya sehingga kami
dapat menyelesaikan tugas makalah pemrograman web. Ucapan terima kasih juga ditujukan
pada dosen pengampu kami yakni Deni Sutaji S.Kom yang juga berperan membantu
memberikan materi tentang pemrograman web.
Makalah ini bertujuan untuk memberikan informasi dan pengetahuan tentang materi
HTML, CSS dan Java script yang ditujukan untuk para mahasiswa universitas
muhammadiyah Gresik khususnya mahasiswa Teknik Informatika.
Semoga makalah ini dapat dimanfaatkan sebaik- baiknya oleh para mahasiswa
universitass muhammadiyah gresik. Dan apabila terdapat kesalahan dalam penulisan
makalah, kami mohon maaf dan kami sangat berharap kritik dan saran untuk kesempurnaan
pembuatan makalah ini.

Gresik, 11 Maret 2015

Tim Penyusun

DAFTAR ISI
ii

KATA PENGANTAR

DAFTAR ISI

ii

BAB I PENDAHULUAN

A. Latar Belakang
B. Rumusan Masalah
C. Tujuan Penelitian

1
2
3

BAB II LANDASAN TEORI

A.
B.
C.
D.
E.
F.
G.
H.

HTML ( Hyper Text Markup Language)


Struktur HTML Dokumen
HTML 5 (Hyper Text Markup Language)
Perbedaan HTML5 dengan HTML sebelumnya
Tag-tag HTML dan HTML5 Beserta Kegunaannya
CSS (Cascading Style Sheet)
CSS3 (Cascading Style Sheet)
JavaScript

3
5
6
9
9
18
24
26

BAB III PENUTUP

30

A. Kesimpulan

30

BAB IV DAFTAR PUSTAKA

31

BAB I

ii

PENDAHULUAN

A. Latar belakang
Perkembangan teknologi saat ini yang semakin cepat menuntut seseorang untuk
mengikutinya. Dibalik perkembangan teknologi saat ini banyak para instansi ataupun
perorangan memanfaatkan teknologi sebagai lahan bisnis maupun untuk berbagi ilmu.
Terutama para mahasiswa yang mau tidak mau harus mengikuti perkembangan
teknologi saat ini.
Teknologi saat ini tidak hanya di asumsikan untuk browsing, atau hanya sebagai
mengikuti trend social media saja, namun teknologi saat ini di manfaatkan untuk
membuat suatu website ataupun yang lainnya sehingga kita tidak hanya dapat
berkunjung pada website orang lain saja namun kita dapat membuat website kita
sendiri dan mengisi artikel yang akan kita share pada website kita. Dewasa ini website
sangat berguna bagi kalangan remaja maupun yang sudah dewasa, website merupakan
suatu halamn yang dapat kita kunjungi yang bisa terkoneksi dengan jaringan internet.
Untuk membuat suatu website kita memerlukan suatu bahasa pemrograman
seperti HTML (hyper Text markup language) yang bahasanya mudah untuk di pahami
dan berpadu dengan CSS (cascanding style sheet) maupun dengan javascript.
Sebenarnya masih banyak yang dapat dipelajari untuk pembuatan website, namun
untuk pembuatan website kali ini kita hanya mempelajari HTML, CSS serta java
script.

B. Rumusan Masalah
Pada pembuatan makalah pemrograman web, tim penyusun menemukan
beberapa rumusan masalah yaitu:
1. Apa pengertian serta fungsi dari HTML, HTML 5, CSS, CSS 3 serta JavaScript?
2. Bagaimana contoh dari aplikasi atau web dari bahasa HTML, HTML 5, CSS, CSS
3?

C. Tujuan Penelitian
ii

Dalam rumusan masalah diatas maka ditemukan beberapa tujuan penelitian


makalah yaitu:
1. Untuk mengetahui pengertian serta fungsi dari HTML, HTML 5, CSS, CSS 3
serta JavaScript.
2. Untuk mengetahui dan memberikan tampilan web atau aplikasi dari HTML,
HTML 5, CSS, CSS 3.

D. Manfaat Penelitian
Adapun manfaat dari penulisan makalah, dengan materi HTML ( Hyper Text
Markup Language ) dan CSS ( Cascanding Style Sheet ) serta javascript yang dimana
ketiga pembahasan tersebut dapat membantu kita untuk membuat suatu website. Serta
kita juga dapat mempelajari tetntang script dari HTML, CSS, dan javascript.

BAB II

LANDASAN TEORI

A. HTML ( Hyper Text Markup Language)


Hyper Text Markup Language (HTML) adalah sebuah bahasa yang digunakan
untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam
sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis
dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang
terintegerasi. HTML disebut Markup language karena bahasa HTML menggunakan
tanda atau mark, untuk menandai bagian- bagian dari text. Dan jugaHTML disebut
sebagai HyperText karena di dalam HTML sebuah text biasa dapat berfungsi lain, dan
kita dapat membuatnya menjadi link yang dapat berpindah dari satu halamn ke
halaman lainnya dengan hanya mengklik text tersebut. Kemampuan text inilah yang
dinamakan hypertext, walaupun pada implementasinya tidak saja hanya text yang
ii

dapat dijadikan link. Dengan kata lain, berkas yang dibuat dalam perangkat lunak
pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman
web dengan perintah-perintah HTML. Dan dalam pengertian lain HTML juga
merupakan sebuah standar yang digunakan secara luas untuk menampilkan halaman
web.
HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika
mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika
energi tinggi di Jenewa). Pada awalnya bahasa HTML banyak digunakan di dunia
penerbitan dan pencetakan yang disebut dengan SGML (Standart Generalized Markup
Language), disebut Markup language karena bahasa HTML menggunakan . HTML
menjadi sebuah standart yang digunakan secara luas untuk menampilkan halaman
web. Untuk saat ini HTML merupakan standart internet yang didefinisikan dan
dikendalikan penggunanya oleh World Wide Web Consortium (W3C).

Secara umum, fungsi HTML adalah untuk mengelola serangkaian data dan
informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui
layanan web. Namun fungsi HTML yang lebih spesifik yaitu sebagai berikut :
1. Mengintegerasikan gambar dengan tulisan.
2. Membuat pranala.
3. Mengintegerasikan berkas suara dan rekaman gambar hidup.
4. Membuat form interaktif.
5. Membuat halaman web.
6. Menampilkan berbagai informasi di dalam sebuah browser Internet.
7. Membuat link menuju halaman web lain dengan kode tertentu (hypertext).
Dari beberapa fungsi yang telah dijelaskan diatas. Penyusun juga memberikan
contoh dokumen HTML sederhana yang dapat dicoba, dan untuk membuat dokumen
HTML dapat menggunakan notepad ataupun tools lainnya.

B.

Struktur HTML Dokumen


1. Html
Setiap dokumen HTML selalu diawali dan ditutup dengan tag HTML.
ii

2. Head
Bagian header biasanya berisi tag TITLE, meta tag, dan semua script
java atau yang lain yang akan dieksekusi di browser. Di bagian inilah
memberikan booksmark untuk keperluan pencarian(searching) dengan
keyword.
3. Body
Bagian Body digunakan untuk menampilkan text, image link dan
semua yang akan ditampilkanpada web page.
Berikut merupakan format lengkap dokumen HTML :
<!DOCTYPE html>
<html>
<head>
<tittle> Belajar HTML </tittle>
</head>
<body>
<p>belajar tentang HTML </p>
</body>
</html>

Pada kode HTML diatas dapat dilihat kode HTML selalu diapit oleh tag.
Untuk membuka kode HTML maka digunakan tag <html> dan untuk menutup kode
HTML akan ditandai dengan tag penutup </html>, sedangkan tag <head> </head>
merupakan kepala dari dokumen HTML tersebut.
Selanjutnya diikuti oleh tittle yang merupakan judul dari halamn web yang
ditandai dengan tag <tittle> </tittle> , untuk isi HTML akan ditandai dengan tag
<body> dan ditutup dengan tag </body> didalam body tersebut kita boleh mengisikan
text sebagai isi dari halaman web tersebut, sedangkan kode <p> </p> merupakan
sebuah paragraph dari body.
C. HTML (Hyper Text Markup Language) 5
HTML5

adalah

sebuah

bahasa

markah

untuk

menstrukturkan

dan

menampilkan isi dari Waring Wera Wanua (World Wide Web Consortium, W3C),
sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML (yang
pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun
1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama
pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung
teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti
oleh mesin.HTML5 adalah versi terbaru dari HTML (HyperText Markup Language).

ii

Dimana tujuan utama pengembangan HTML5 adalah untuk memperbaiki


teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh
manusia dan juga mudah dimengerti oleh mesin.
Beberapa Tujuan dibuatnya HTML5 antara lain:
1.
2.
3.
4.
5.
6.

Fitur baru harus didasarkan pada HTML, CSS, DOM, dan Java Script.
Mengurangi kebutuhan untuk plugin eksternal (seperti flash).
Penanganan kesalahan yang baik
Lebih banyak markup untuk menggantikan scripting
HTML5 merupakan perangkat mandiri
Proses pembangunan dapat terlihat untuk umum

Sedangkan fitur baru dalam HTML 5 yaitu sebagai berikut:


1.
2.
3.
4.

Unsur kanvas untuk menggambar


Video dan elemen audio untuk media pemutaran
Dukungan yang lebih baik untuk penyimpanan secara offline
Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav,

section
5. Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.
Untuk saat ini beberapa browser sudah mendukung HTML5 seperti
safari, chrome, firefox, dan opera. Kabarnya IE9 ( Internet Explorer ) akan
mendukung beberapa fitur dari HTML5.

Contoh Website Layout Menggunakan HTML5 :

Contoh Script :
<body>

ii

<header>
<h1>City Gallery</h1>

</header>

<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>

<section>
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United
Kingdom,

with

metropolitan

area

of

over

13

million

inhabitants.

</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.

</p>
</section>

<footer>
Copyright W3Schools.com

</footer>

</body>

(Sumber : http://www.w3schools.com/html/html_layout.asp)

Gambar Website Layout Sederhana

ii

D. Perbedaan HTML5 dengan HTML sebelumnya


HTML
Penulisan syntax DOCTYPE lebih
panjang
Masih Menggunakan Flash untuk
aplikasi dan video
Menggunakan browser chace sebagai
tempat penyimpanan data
sementara
Bekerja dengan semua browser yg
lama
JavaScript pada browser membuat
kinerja komputer lebih lambat

HTML 5
Dekalarasi lebih sederhana hanya
menggunakan !DOCTYPE html
Ada banyak elemet baru seperti tag
audio, video, canvas, pada html
Memiliki local storage untuk
menyimpan data dalam jumlah yg besar
Sudah support oleh browser terbaru
JavaScript dapat digunakan untuk
melakukan proses sekaligus

(Sumber : http://belajarc.com/index.php?kode=400)

E. Tag-tag HTML dan HTML5 Beserta Kegunaannya


Nama Tag

Keterangan / Kegunaan

Basic
<!DOCTYPE>

Tag untuk menentukan tipe dokumen

<html>

Tag untuk membuat sebuah dokumen HTML

<title>

Tag untuk membuat judul dari sebuah


halaman

ii

<body>

Tag untuk membuat tubuh dari sebuah


halaman

<h1> to <h6>

Tag untuk membuat heading

<p>

Tag untuk membuat paragraf

<br>

Memasukan satu baris putus

<hr>

Tag untuk membuat perubahan dasar kata


didalam isi

<!--...-->

Tag untuk membuat komentar

Formatting

<acronym>

Tag untuk membuat sebuah akronim (tidak


disupport lagi di HTML5)

<abbr>

Tag untuk membuat sebuah singkatan

<address>

Tag untuk membuat kontak alamat

<b>

Tag untuk membuat huruf bercetak tebal

<bdi>

Mengisolasi bagian dari teks yang dapat


diformat dalam arah yang berbeda dari teks
lain di luarnya (tag baru HTML5)

<bdo>

Mengganti arah teks

<big>

Tag untuk membuat text berhuruf besar (tidak


disupport lagi di HTML5)

<blockquote>

Tag untuk membuat sebuah bagian text yang


dikutip dari sumber lain

<center>

Tag untuk membuat jajaran teks menjadi


ditengah (tidak disupport lagi di HTML5)

<cite>

Tag untuk membuat judul karya

<code>

Tag untuk membuat potongan kode komputer


di antara text

ii

<del>

Tag untuk membuat teks yang telah dihapus


dari dokumen

<dfn>

Tag untuk membuat sebuah istilah definisi

<em>

Tag untuk membuat penekanan teks (tidak


disupport lagi di HTML5)

<font>

Tag untuk membuat font, warna, dan ukuran


untuk teks(tidak disupport lagi di HTML5)

<i>

Tag untuk membuat sebuah bagian dari teks


yang disesuaikan dengan mood

<ins>

Tag untuk membuat teks yang telah


dimasukkan ke dalam dokumen

<kbd>

Tag untuk membuat input keyboard

<mark>

Tag untuk membuat teks yang disorot /


ditandai (tag baru HTML5)

<meter>

Tag untuk membuat pengukuran skalar

<pre>

Tag untuk membuat teks terformat

<progress>

Memperlihatkan kemajuan tugas (tag baru


HTML5)

<q>

Tag untuk membuat kutipan pendek

<rp>

Tag untuk membuat apa yang harus


ditampilkan di browser yang tidak mendukung
penjelasan ruby (tag baru HTML5)

<rt>

Tag untuk membuat sebuah anotasi /


pengucapan karakter (untuk tipografi Asia
Timur)

<ruby>

Tag untuk membuat sebuah anotasi ruby


(untuk tipografi Asia Timur) (tag baru HTML5)

<s>

Tag untuk membuat teks yang tidak lagi benar

<samp>

Tag untuk membuat contoh keluaran dari


program komputer

ii

<small>

Tag untuk membuat teks kecil

<strike>

Tag untuk membuat teks yang di coret


tengah (tidak disupport lagi di HTML5)

<strong>

Tag untuk membuat teks penting

<sub>

Tag untuk membuat teks subskrip (seperti


dalam penulisan Jat Kimia)

<sup>

Tag untuk membuat teks superscripted


(seperti dalam penulisan akar kuadrat)

<time>

Tag untuk membuat tanggal / waktu (tag baru


HTML5)

<tt>

Tag untuk membuat teks teletype (tidak


disupport lagi di HTML5)

<u>

Tag untuk membuat teks yang memiliki Gaya


yang berbeda dari teks biasa lainnya

<var>

Tag untuk membuat sebuah variabel

<wbr>

Tag untuk membuat kemungkinan garis-putus

Forms

<form>

Tag untuk membuat sebuah form HTML untuk


input pengguna

<input>

Tag untuk membuat sebuah kontrol input

<textarea>

Tag untuk membuat sebuah kontrol input


multibaris (text area)

<button>

Tag untuk membuat sebuah tombol yang


dapat diklik

<select>

Tag untuk membuat sebuah daftar drop-down

ii

<optgroup>

Tag untuk membuat sebuah kelompok pilihan


yang terkait dalam daftar drop-down

<option>

Tag untuk membuat pilihan dalam daftar dropdown

<label>

Tag untuk membuat sebuah label untuk


sebuah elemen <input>

<fieldset>

Grup unsur terkait dalam bentuk

<legend>

Tag untuk membuat sebuah caption untuk


sebuah elemen <fieldset>, < figure>, atau
<details>

<datalist>

Menentukan daftar pilihan yang telah


ditetapkan untuk kontrol input (tag baru
HTML5)

<keygen>

Tag untuk membuat key-pair generator kolom


input (tag baru HTML5)

<output>

Tag untuk membuat hasil penghitungan (tag


baru HTML5)

Frames

<frame>

Tag untuk membuat sebuah window (bingkai)


dalam sebuah frameset (tidak disupport lagi di
HTML5)

<frameset>

Tag untuk membuat satu set bingkai (tidak


disupport lagi di HTML5)

<noframes>

Tag untuk membuat sebuah konten alternatif


untuk pengguna yang tidak mendukung
frame (tidak disupport lagi di HTML5)

<iframe>

Tag untuk membuat sebuah bingkai

Images
<img>

Tag untuk membuat gambar

<map>

Tag untuk membuat gambar-peta

<area>

Tag untuk membuat area dalam gambar-peta


ii

<canvas>

Digunakan untuk menggambar grafik, melalui


scripting (JavaScript ) (tag baru HTML5)

<figcaption>

Tag untuk membuat sebuah caption untuk


elemen <figure> (tag baru HTML5)

<figure>

Menentukan konten mandiri (tag baru HTML5)

Audio/Video

<audio>

Tag untuk membuat isi suara (tag baru


HTML5)

<source>

Tag untuk membuat sumber beberapa media


untuk elemen media (<video> dan
<audio>) (tag baru HTML5)

<track>

Tag untuk membuat trek teks untuk elemen


media (<video> dan <audio>) (tag baru
HTML5)

<video>

Tag untuk membuat sebuah video atau


film (tag baru HTML5)

Links
<a>

Tag untuk membuat hyperlink

<link>

Tag untuk membuat hubungan antara


dokumen dan sumber daya eksternal (paling
sering digunakan untuk link ke style sheet)

<nav>

Tag untuk membuat navigasi link (tag baru


HTML5)

Lists

<ul>

Tag untuk membuat daftar dengan selain


nomor

<ol>

Tag untuk membuat daftar dengan nomor

<li>

Tag untuk membuat sebuah item daftar

<dir>

Tag untuk membuat sebuah daftar


direktori (tidak disupport lagi di HTML5)

ii

<dl>

Tag untuk membuat sebuah daftar definisi

<dt>

Tag untuk membuat istilah (item) dalam daftar


definisi

<dd>

Defines a description of an item in a definition


list

<menu>

Tag untuk membuat deskripsi dari item dalam


daftar definisi

<command>

Tag untuk membuat sebuah tombol perintah


bahwa seorang pengguna dapat meminta (tag
baru HTML5)

Tables
<table>

Tag untuk membuat tabel

<caption>

Tag untuk membuat sebuah caption tabel

<th>

Tag untuk membuat sebuah sel header tabel

<tr>

Tag untuk membuat baris dalam sebuah tabel

<td>

Tag untuk membuat sel dalam sebuah tabel

<thead>

Mengelompokan isi header dalam sebuah


tabel

<tbody>

Mengelompokanisi tubuh dalam sebuah tabel

<tfoot>

Mengelompokan isi footer dalam sebuah tabel

<col>

Menentukan properti kolom untuk setiap


kolom dalam elemen <colgroup>

<colgroup>

Menentukan kelompok dari satu atau lebih


kolom dalam sebuah tabel untuk diformat

Style/Sections

<style>

Tag untuk membuat informasi style untuk


dokumen

<div>

Tag untuk membuat sebuah bagian dalam


dokumen
ii

<span>

Tag untuk membuat sebuah bagian dalam


dokumen

<header>

Tag untuk membuat sebuah header untuk


dokumen atau bagian (tag baru HTML5)

<footer>

Tag untuk membuat footer untuk dokumen


atau bagian(tag baru HTML5)

<hgroup>

Pengelompokan elemen heading (<h1>


sampai <h6>)(tag baru HTML5)

<section>

Tag untuk membuat bagian dalam


dokumen (tag baru HTML5)

<article>

Tag untuk membuat sebuah artikel (tag baru


HTML5)

<aside>

Tag untuk membuat konten lain selain dari


konten halaman (tag baru HTML5)

<details>

Tag untuk membuat rincian tambahan yang


pengguna dapat lihat atau sembunyikan (tag
baru HTML5)

<dialog>

Tag untuk membuat sebuah kotak dialog atau


jendela(tag baru HTML5)

<summary>

Tag untuk membuat sebuah judul terlihat


untuk elemen <detil> (tag baru HTML5)

Meta Info

<head>

Tag untuk membuat informasi tentang


dokumen

<meta>

Tag untuk membuat metadata tentang


dokumen HTML

<base>

Menentukan URL dasar / target untuk semua


URL relatif dalam dokumen

<basefont>

Menentukan standar warna, ukuran, dan font


untuk semua teks dalam dokumen (tidak
disupport lagi di HTML5)

Programming

ii

<script>

Tag untuk membuat script di sisi klien

<noscript>

Tag untuk membuat sebuah konten alternatif


bagi pengguna yang tidak mendukung script
di sisi klien

<applet>

Tag untuk membuat sebuah java applet yang


ditanam(tidak disupport lagi di HTML5)

<em

Tag untuk membuat sebuah wadah untuk


aplikasi eksternal (non-HTML) (tag baru
HTML5)

bed>

<object>

Tag untuk membuat sebuah objek yang


ditanam

<param>

Tag untuk membuat sebuah parameter untuk


objek

(Sumber : http://w3function.com/blog/index.php?p=det&idn=77)

ii

F. CSS (Cascading Style Sheet)


CSS merupakan salah satu bahasa pemrograman web yang digunakan untuk
mengendalikan beberapa komponen dalam sebuah web sehinggan akan terlihat lebih
terstruktur dan seragam. CSS sendiri merupakan sebuah teknologi internet yang
direkomendasikan oleh World Wide WebConsortium atau W3C pada tahun 1996.
CSS dikembangkan untuk mengatur gaya tampilan pada web. Pada awalnya
CSS dikembangkan pada SSGML pada tahun 1970 dan terus dikembangkann
sehingga saat ini CSS telah mendukung banyak bahasa Markup seperti HTML,
XHTML, XML, SVG (Scalable Vector Graphics) dan Mozila XUL (XML User
Interfaces Language). Mengacu dari bahasa CSS memiliki arti gaya menata halaman
bertingkat yang berarti setiap satu elemen yang telah diformat memiliki anak, maka
anak dari elemen tersebut secara otimatis mengikuti format elemen induknya.CSS
seperti halnya styles pada aplikasi

pengolahan kata Microsoft Word yang bisa

mengatur beberapa style, misalnya subbab, heading, bodytext, footer, images, dan
style lainnya untuk dapat dipakai bersama-sama dalam beberapa file. Sifat CSS
Ada dua sifat CSS yaitu internal dan external. Jika internal yang dipilih, maka skrip
itu dimasukkan secara langsung ke halaman website yang akan didesain.
Sifat yang kedua adalah external di mana skrip CSS dipisahkan dan diletakkan dalam
berkas khusus.
CSS mampu mengatur warna body teks, ukuran gambar, ukuran border, warna
mouse over, warna tabel, warna hyperlink, margin kiri/kanan/atas/bawah, spasi antar
paragraf, spasi antar teks, dan parameter lainnya. Dengan adanya CSS memungkinkan
kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Adapun beberapa kegunaan CSS antara lain:


1. Mempersingkat penulisan tag HTML
Sehingga tidak perlu lagi mendefinisikan setiap tag dengan property dan
nilai yang sama.
2. Mempercepat proses rendering atau pembacaan HTML karena tidak
terdapat pengulangan tulisan.
3. Mudah dan cepat dalam me-maintenance
ii

dikarenakan file CSS dibuat secar terpisah , maka Anda tidak perlu
merombak semua elemen atau property dalam HTML, cukup mengedit file
CSS-nya saja.
Adapun ada tiga istilah dasar yang digunakan dalam CSS, yaitu selector, property, dan
value :

1. Selector
Sebagai bahasa yang digunakan untuk memberikan gaya tampilan, CSS
menggunakan metode deklaratif untuk menspesifikasikan bagian HTML yang ingin
diberikan gaya tampilan. Pemilihan elemen HTML dilakukan dengan
menspesifikasikan selector. Kode di bawah memberikan contoh dari sebuah selector,
yang dapat digunakan untuk memberikan gaya tampilan terhadap seluruh elemen p yang
ada pada dokumen HTML:
p{
....
}

Pada kode di atas, yang dikatakan selector ialah kode p. Singkatnya, sebuah
selector merupakan seluruh kode yang berada sebelum {}.
Selector yang diberikan pada kode di atas melakukan pemberian gaya
pada seluruh elemen p yang ada dalam dokumen. Selain memberikan desain pada seluruh
elemen seperti ini, selector juga dapat memberikan desain secara lebih spesifik: melalui
klasifikasi, identitas, ataupun berbagai atribut lainnya dari sebuah elemen. Pembahasan
selector secara mendalam dapat ditemukan pada bab.

2. Property
Sebuah properti menentukan berbagai parameter desain yang dapat diubah dari
sebuah elemen yang dipilih oleh selector. Untuk lebih mudahnya, perhatikan kode di
bawah:
p{
color: ...;
font-size: ...;
}

Pada kode di atas, yang dikatakan property ialah kode yang berada sebelum
titik dua (:). Kegunaan dari kedua properti tersebut tentunya cukup jelas dari nama
yang diberikan, yaitu color untuk memberikan warna pada elemen p, dan fontii

size untuk mengubah ukuran teks. Terdapat sangat banyak properti yang dapat
digunakan, tetapi pembahasan mengenai detil pengunaan tiap-tiap properti tidak akan
dilakukan pada buku ini. Jika terdapat pengunaan properti baru, penjelasan akan
diberikan pada bagian yang relevan. Daftar properti sendiri dapat dibaca di.
3. Value
Value merupakan nilai dari property yang ingin kita berikan. Nilai yang dapat
diberikan sendiri berbeda-beda, tergantung dengan jenis property-nya. Misalnya, jika
ingin memberikan nilai warna, kita harus memberikan nilai dalam
format#RRGGBB (kombinasi nilai heksa merah-hijau-biru yang biasa digunakan
pada program pengolah grafis seperti Photoshop). Ketika ingin memberikan nilai
ukuran, kita dapat memberikan nilai dalam format nilai px atau nilai em. Untuk lebih
jelasnya, kode berikut memberikan contoh value dari properti yang ada pada kode
sebelumnya:
p{
color: #FFFF00;
font-size: 50px;
}

Contoh Website Layout Menggunakan HTML5 dengan CSS:


<!DOCTYPE html>
<html>

<head>
<style>
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;

ii

background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
section {
width:350px;
float:left;
padding:10px;
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>

<header>
<h1>City Gallery</h1>
</header>

<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>

<section>
<h1>London</h1>
<p>

ii

London is the capital city of England. It is the most populous city in the
United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two
millennia,
its history
Londinium.

going

back

to

its

founding

by

the

Romans,

who

named

it

</p>
</section>

<footer>
Copyright W3Schools.com
</footer>

</body>
</html>

(Sumber : http://www.w3schools.com/html/html_layout.asp)

Website Layout tanpa CSS

Website Layout dengan CSS

ii

G. CSS3 (Cascading Style Sheet)


CSS3 merupakan generasi ke-3 dari perkembangan CSS sebelumnya, jadi
pada dasarnya pengertian CSS3 sama dengan pengertian CSS generasi sebelumnya
hanya saja beberapa standar baru untuk CSS3 menggantikan CSS2 dan mungkin akan
membuat kita dapat berkolaborasi lebih dalam lagi untuk membuat tampilan situs
lebih menarik dan mulai meninggalkan situs yang membuat kita menunngu dengan
loading yang yang lama.

Beberapa kelebihan yang terdapat pada CSS 3 :


1. CSS3 lebih detail untuk mendeklarasikan objek yang akan diberikan style.
Contohnya didalam objek blockquote bisa membuat(quote) diawal dan akhir
menggunakan font lebih besar dan konten blockquote itu sendiri.
2. CSS3 kaya akan fitur untuk animasi dan efek untuk text atau objek, yang
sebelumnya tidak bisa dilakukan oleh CSS1 dan CSS2.
3. Dengan menggunakan CSS3 situs yang kita buat akan lebih berkembang dan bisa
lebih interaktif dengan pengunjung.
4. Bisa mengurangi ukuran file yang di-load dan lebih ringan, secara otomatis
mengurangi bandwith inbound/outbound situs.
CSS3 juga memiliki fasilitas untuk shadow (bayangan) dari suatu div layout,
fitur transparasi, gradien warna pada border, warna pada teks yang diseleksi, fitur
skala untuk memperkecil atau memperbesar layout, kolom pada teks dan fitur
gradien pada background.CSS3 tak berdeba jauh dengan tingkat-tingkat sebelumnya,
hanya saja memiliki performa style yang jauh lebih baik dan tambahan beberapa
ii

standar fungsi yang lebih menarik. Setelah W3C mengeluarkan standar untuk CSS3
banyak pengembang web browser mencoba mengadopsi CSS3 pada browernya.
Masing-masing pengembang web browser mendefinisikan metode sendiri dalam
mengembangkan CSS3 pada web browser mereka. Beberapa dari prodyusen web
browser menetapkan aturan untuk menggunakan CSS3, seperti Mozilla yang
menggunakan Prefix_moz pada browsernya untuk menterjemahkan suatu properti
CSS3, sama halnya dengan Safari yang menggunakan Perfix-webkit dan diikuti oleh
Opera dengan Prefix-o.
Beberapa perbedaan CSS3 dan CSS:
1.

CSS3 bisa lebih detail untuk mendeklarasikan objek yang akan diberikan
style. Contohnya di dalam objek blockquote bisa membuat (quote) di awal
dan akhirnya menggunakan font lebih besar dari konten blockquote itu sendiri.

2.

CSS3 kaya akan fitur untuk animasi dan efek untuk text atau objek, yang
sebelumnya tidak bisa dilakukan oleh CSS2/CSS2.1, dan bisa menggantikan
peran gambar. Standar web 2.0 atau situs interaktif dan efisien berdasar dari
penggunaan CSS.

3.

Dengan CSS3 situs akan bisa lebih berkembang dan bisa lebih interaktif lagi
dengan pengunjung.

4. Bisa mengurangi ukuran file yang di-load dan lebih ringan, secara otomatis
mengurangi bandwidth inbound/outbound situs.
5. CSS3 tak berbeda jauh dari tingkat-tingkat sebelumnya, hanya saja memiliki
performa style yang jauh lebih baik dan tambahan beberapa fungsi yang
menarik.

ii

H. JavaScript
Adalah bahasa skrip yang populer di internetdan dapat bekerja di sebagian besar
penjelajah web populer seperti Internet Explorer (IE), Mozilla Firefox, Netscape dan
Opera. Kode JavaScript dapat disisipkan dalam halamanweb menggunakan
tagSCRIPT. bahasa pemrograman berbasis prototipe yang berjalan disisi klien. Jika
kita berbicara dalam konteks web, sederhananya, kita dapat memahami JavaScript
sebagai bahasa pemrograman yang berjalan khusus untuk dibrowser 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.Javascript
merupakan bahasa scripting yang digunakan untuk membuat aplikasi web, sifatnya
client-side sehingga dapat diolah langsung di browser tanpa harus terhubung keserver
terlebih dahulu. Walaupun namanya menggunakan kata Java, Javascript tidak
berhubungan dengan bahasa pemprograman java, meskipun keduanya memiliki
kemiripan dalam hal syntax yang meniru bahasa C.
Kegunaan utama JavaScript adalah untuk menuliskan fungsi yang disisipkan
kedalam HTML baik secara langsung disisipkan maupun diletakan ke file teks dan di
link dari dokumen HTML. 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.JavaScript pada awal perkembangannya
berfungsi untuk membuat interaksi antara user dengan situs web menjadi lebih cepat
tanpa harus menunggu pemrosesan di web server. Sebelum javascript, setiap interaksi
dari user harus diproses oleh web server. Akan tetapi karena sifatnya yang dijalankan
di sisi client yakni di dalam web browser yang digunakan oleh pengunjung situs, user
sepenuhnya dapat mengontrol eksekusi JavaScript. Hampir semua web browser
menyediakan fasilitas untuk mematikan JavaScript, atau bahkan mengubah kode
JavaScript yang ada. Sehingga kita tidak bisa bergantung sepenuhnya kepada
JavaScript.
Kelebihan pemrograman java script :
ii

1. Lebih cepat, dikarenakan diletakkan di HTML, dan dapat langsung dicoba di


browser.
2. Mudah, karena memiliki sedikit sintaks yang lebih mudah dimengerti.
3. Terbuka (Platform Independent).
4. Ukurannya sangat kecil dibandingkan dengan pemrograman java.
Sedangkan untuk kekurangan dari bahasa pemrograman bahasa java script adalah:
1. Tidak dapat membuat program aplikasi sendiri
2. Objek yang dikelolah oleh java script sangat terbatas
3. Script yang dapat disalin dari web browser. Sehingga setiap orang dapat
menggunakan program java script yang telah kita buat.

Contoh membuat Tabel menggunakan Javascript:


<html>
<head>
<title>script Sederhana Membuat Tabel menggunakan Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<script type="text/javascript">
document.write ("<h1>Membuat Tabel Menggunakan Javascript</h1>");
document.write ("<hr>");
document.write ("tabel satu kolom satu baris ");
document.write("<table width = '500' border='1'>");
document.write("<tr><th>satu kolom</th>");

ii

document.write("</table>");
</script>
<script type="text/javascript">
document.write ("<br>");
document.write ("tabel dua kolom ");
document.write("<table width = '500' border='1'>");
document.write("<tr><th>kolom pertama</th>");
document.write("<th>Kolom Kedua</th><tr>");
document.write("</table>");
</script>
<script type="text/javascript">
document.write ("<br>");
document.write ("tabel dua baris ");
document.write("<table width = '500' border='1'>");
document.write("<tr><th>baris pertama</th>");
document.write("<tr><th>baris kedua</th>");
document.write("</table>");
</script>

<script type="text/javascript">
document.write ("<br>");
document.write ("tabel dua baris dua kolom ");
document.write("<table width = '500' border='1'>");
document.write("<tr><th>baris pertama</th>");
document.write("<th>baris kedua</th><tr>");
document.write("<tr><th>baris pertama</th>");
document.write("<th>baris kedua</th><tr>");
document.write("</table>");

ii

</script>
<body>
</body>
</html>
(Sumber : http://notepadsederhana.blogspot.com/2011/11/membuat-tabel-sederhanamenggunaka.html)

Gambar Tabel Menggunakan Javasript

BAB III
PENUTUP
A. Kesimpulan
Dari penjelasan materi tentang HTML (Hyper Text Markup language) dan
berkembang menjadi HTML5, serta CSS (Cascading Style Sheet) dan berkembang
menjadi CSS3 dan yang terkahir materi tentang java script. HTML lebih dikenal
sebagai standar bahasa untuk membuat dokumen web sedangkan HTML versi 5 justru
tidak dibuat untuk mempublikasikan informasi di web, namun oleh karena
kesederhanaan serta kemudahan penggunaanya, HTML kemudian dipilih orang untuk
mendistribusikan informasi di web. Sedangkan untuk CSS , CSS bukan termasuk
bahasa pemrograman namun CSS berperan dalam mengendalikan ukuran gambar,
warna, ukuran border serta desain lainnya. Namun CSS digunakan untuk
mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih
ii

terstruktur. JavaScript adalah untuk menuliskan fungsi yang disisipkan kedalam


HTML baik secara langsung disisipkan maupun diletakan ke file teks dan di link dari
dokumen HTML.

BAB IV
DAFTAR PUSTAKA
http://id.wikipedia.org/wiki/HTML
http://www.w3schools.com/html/html_layout.asp
http://w3function.com/blog/index.php?p=det&idn=77
http://w3function.com/blog/index.php?p=det&idn=41
http://belajarc.com/index.php?kode=400
http://mypctutorel.blogspot.com/2013/11/pengertian-dan-fungsi-html-hypertext.html
http://id.wikipedia.org/wiki/Cascading_Style_Sheets
http://tutorial.belajarweb.net/css/pengeretian-css-dasar.html
http://imaniania5.blogspot.com/2013/10/pengertiandefinisi-dan-fungsi-dari-css.html
http://www.ficripebriyana.com/2014/04/pengertian-css-cascading-style-sheets.html
http://csshtml5.blogspot.com/2013/08/pengertian-css-3.html
https://yuanhera.wordpress.com/2013/01/15/contoh-pembuatan-web-html-dan-css-sederhana/

ii