PEMOGRAMAN WEB

HTML, HTML 5, CSS, CSS3, JAVA SCIPT

MAKALAH

DISUSUN UNTUK MEMENUHI TUGAS PRAKTEK PADA MATA KULIAH

PEMOGRAMAN WEB PROGRAM STUDI
TEKNIK INFORMATIKA

OLEH:

DOSMAN TONGGO TUA PANDIANGAN

NIM : 1701109

SEKOLAH TINGGI ILMU KOMPUTER

STIKOM TUNAS BANGSA PEMATANGSIANTAR
2019

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.

ii
 DAFTAR ISI

KATA PENGANTAR i

DAFTAR ISI ii

BAB I PENDAHULUAN 1

A. Latar Belakang 1
B. Rumusan Masalah 2
C. Tujuan Penelitian 3

BAB II LANDASAN TEORI 3

A. HTML ( Hyper Text Markup Language) 3

B. Struktur HTML Dokumen 5
C. HTML 5 (Hyper Text Markup Language) 6
D. Perbedaan HTML5 dengan HTML sebelumnya 9
E. Tag-tag HTML dan HTML5 Beserta Kegunaannya 9
F. CSS (Cascading Style Sheet) 18
G. CSS3 (Cascading Style Sheet) 24
H. JavaScript 26

BAB III PENUTUP 30

A. Kesimpulan 30

BAB IV DAFTAR PUSTAKA 31

ii
 BAB I
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.

ii
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

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.

ii
 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
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).

ii
 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.
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.

ii
 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).

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.

ii
 Beberapa Tujuan dibuatnya HTML5 antara lain:

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

Sedangkan fitur baru dalam HTML 5 yaitu sebagai berikut:

1. Unsur kanvas untuk menggambar

2. Video dan elemen audio untuk media pemutaran
3. Dukungan yang lebih baik untuk penyimpanan secara offline
4. 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 :

ii
Contoh Script :
<body>

<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 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 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)

ii
 Gambar Website Layout Sederhana

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
(Sumber : http://belajarc.com/index.php?kode=400)
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

ii
 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

<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

Tag untuk membuat sebuah akronim (tidak disupport lagi

<acronym> di HTML5)

<abbr> Tag untuk membuat sebuah singkatan

<address> Tag untuk membuat kontak alamat

<b> Tag untuk membuat huruf bercetak tebal

Mengisolasi bagian dari teks yang dapat diformat dalam

arah yang berbeda dari teks lain di luarnya (tag baru
<bdi> HTML5)

<bdo> Mengganti arah teks

Tag untuk membuat text berhuruf besar (tidak disupport

<big> lagi di HTML5)

ii
 Tag untuk membuat sebuah bagian text yang dikutip dari
<blockquote> sumber lain

Tag untuk membuat jajaran teks menjadi ditengah (tidak

<center> disupport lagi di HTML5)

<cite> Tag untuk membuat judul karya

Tag untuk membuat potongan kode komputer di antara

<code> text

<del> Tag untuk membuat teks yang telah dihapus dari dokumen

<dfn> Tag untuk membuat sebuah istilah definisi

Tag untuk membuat penekanan teks (tidak disupport lagi

<em> di HTML5)

Tag untuk membuat font, warna, dan ukuran untuk

<font> teks(tidak disupport lagi di HTML5)

Tag untuk membuat sebuah bagian dari teks yang

<i> disesuaikan dengan mood

Tag untuk membuat teks yang telah dimasukkan ke dalam

<ins> dokumen

<kbd> Tag untuk membuat input keyboard

Tag untuk membuat teks yang disorot / ditandai (tag baru

<mark> 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

Tag untuk membuat apa yang harus ditampilkan di

browser yang tidak mendukung penjelasan ruby (tag baru
<rp> HTML5)

Tag untuk membuat sebuah anotasi / pengucapan karakter

<rt> (untuk tipografi Asia Timur)

ii
 Tag untuk membuat sebuah anotasi ruby (untuk tipografi
<ruby> Asia Timur) (tag baru HTML5)

<s> Tag untuk membuat teks yang tidak lagi benar

Tag untuk membuat contoh keluaran dari program

<samp> komputer

<small> Tag untuk membuat teks kecil

Tag untuk membuat teks yang di coret tengah (tidak

<strike> disupport lagi di HTML5)

<strong> Tag untuk membuat teks penting

Tag untuk membuat teks subskrip (seperti dalam penulisan

<sub> Jat Kimia)

Tag untuk membuat teks superscripted (seperti dalam

<sup> penulisan akar kuadrat)

<time> Tag untuk membuat tanggal / waktu (tag baru HTML5)

Tag untuk membuat teks teletype (tidak disupport lagi di

<tt> HTML5)

Tag untuk membuat teks yang memiliki Gaya yang

<u> berbeda dari teks biasa lainnya

<var> Tag untuk membuat sebuah variabel

<wbr> Tag untuk membuat kemungkinan garis-putus

Forms

Tag untuk membuat sebuah form HTML untuk input

<form> pengguna

<input> Tag untuk membuat sebuah kontrol input

Tag untuk membuat sebuah kontrol input multibaris (text

<textarea> area)

ii
<button> Tag untuk membuat sebuah tombol yang dapat diklik

<select> Tag untuk membuat sebuah daftar drop-down

Tag untuk membuat sebuah kelompok pilihan yang terkait

<optgroup> dalam daftar drop-down

<option> Tag untuk membuat pilihan dalam daftar drop-down

Tag untuk membuat sebuah label untuk sebuah elemen

<label> <input>

<fieldset> Grup unsur terkait dalam bentuk

Tag untuk membuat sebuah caption untuk sebuah elemen

<legend> <fieldset>, < figure>, atau <details>

Menentukan daftar pilihan yang telah ditetapkan untuk

<datalist> kontrol input (tag baru HTML5)

Tag untuk membuat key-pair generator kolom input (tag

<keygen> baru HTML5)

Tag untuk membuat hasil penghitungan (tag baru

<output> HTML5)

Frames

Tag untuk membuat sebuah window (bingkai) dalam

<frame> sebuah frameset (tidak disupport lagi di HTML5)

Tag untuk membuat satu set bingkai (tidak disupport lagi

<frameset> di HTML5)

Tag untuk membuat sebuah konten alternatif untuk

pengguna yang tidak mendukung frame (tidak disupport
<noframes> 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
 Digunakan untuk menggambar grafik, melalui scripting
<canvas> (JavaScript ) (tag baru HTML5)

Tag untuk membuat sebuah caption untuk elemen

<figcaption> <figure> (tag baru HTML5)

<figure> Menentukan konten mandiri (tag baru HTML5)

Audio/Video

<audio> Tag untuk membuat isi suara (tag baru HTML5)

Tag untuk membuat sumber beberapa media untuk elemen

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

Tag untuk membuat trek teks untuk elemen media

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

Tag untuk membuat sebuah video atau film (tag baru

<video> HTML5)

Links

<a> Tag untuk membuat hyperlink

Tag untuk membuat hubungan antara dokumen dan

sumber daya eksternal (paling sering digunakan untuk link
<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

Tag untuk membuat sebuah daftar direktori (tidak

<dir> disupport lagi di HTML5)

<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

ii
 Tag untuk membuat deskripsi dari item dalam daftar
<menu> definisi

Tag untuk membuat sebuah tombol perintah bahwa

<command> 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

Menentukan properti kolom untuk setiap kolom dalam

<col> elemen <colgroup>

Menentukan kelompok dari satu atau lebih kolom dalam

<colgroup> sebuah tabel untuk diformat

Style/Sections

<style> Tag untuk membuat informasi style untuk dokumen

<div> Tag untuk membuat sebuah bagian dalam dokumen

<span> Tag untuk membuat sebuah bagian dalam dokumen

Tag untuk membuat sebuah header untuk dokumen atau

<header> bagian (tag baru HTML5)

Tag untuk membuat footer untuk dokumen atau bagian(tag

<footer> baru HTML5)

Pengelompokan elemen heading (<h1> sampai <h6>)(tag

<hgroup> baru HTML5)

ii
 Tag untuk membuat bagian dalam dokumen (tag baru
<section> HTML5)

<article> Tag untuk membuat sebuah artikel (tag baru HTML5)

Tag untuk membuat konten lain selain dari konten

<aside> halaman (tag baru HTML5)

Tag untuk membuat rincian tambahan yang pengguna

<details> dapat lihat atau sembunyikan (tag baru HTML5)

Tag untuk membuat sebuah kotak dialog atau jendela(tag

<dialog> baru HTML5)

Tag untuk membuat sebuah judul terlihat untuk elemen

<summary> <detil> (tag baru HTML5)

Meta Info

<head> Tag untuk membuat informasi tentang dokumen

<meta> Tag untuk membuat metadata tentang dokumen HTML

Menentukan URL dasar / target untuk semua URL relatif

<base> dalam dokumen

Menentukan standar warna, ukuran, dan font untuk semua

<basefont> teks dalam dokumen (tidak disupport lagi di HTML5)

Programming

<script> Tag untuk membuat script di sisi klien

Tag untuk membuat sebuah konten alternatif bagi

<noscript> pengguna yang tidak mendukung script di sisi klien

Tag untuk membuat sebuah java applet yang

<applet> ditanam(tidak disupport lagi di HTML5)

Tag untuk membuat sebuah wadah untuk aplikasi

<em bed> eksternal (non-HTML) (tag baru HTML5)

<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.

ii
 3. Mudah dan cepat dalam me-maintenance
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: ...;
}

ii
 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 font-
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;

background-color:#eeeeee;

ii
 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 going back to its founding by the Romans, who named it
Londinium.

</p>

</section>

<footer>

Copyright © W3Schools.com

</footer>

</body>

</html>

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

Website Layout tanpa CSS

ii
 Website Layout dengan CSS

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.

ii
 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
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.

ii
 Kelebihan pemrograman java script :

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>");

document.write("</table>");

</script>

ii
<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>");

</script>

ii
<body>

</body>

</html>

(Sumber : http://notepadsederhana.blogspot.com/2011/11/membuat-tabel-sederhana-
menggunaka.html)

Gambar Tabel Menggunakan Javasript

ii
 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
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.

ii
 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