Makalah Pemrograman Web

39
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

description

Pemrograman Web HTML, HTML5, CSS, CSS 3 DAN JAVASCRIPT

Transcript of Makalah Pemrograman Web

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

ii

DAFTAR ISI

KATA PENGANTAR i

DAFTAR ISI ii

BAB I PENDAHULUAN 1

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

BAB II LANDASAN TEORI 3

A. HTML ( Hyper Text Markup Language) 3B. Struktur HTML Dokumen 5C. HTML 5 (Hyper Text Markup Language) 6D. Perbedaan HTML5 dengan HTML sebelumnya 9E. Tag-tag HTML dan HTML5 Beserta Kegunaannya 9F. CSS (Cascading Style Sheet) 18G. CSS3 (Cascading Style Sheet) 24H. 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.

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?

ii

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.

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

ii

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

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

ii

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.

Berikut merupakan format lengkap dokumen HTML :

<!DOCTYPE html>

<html>

<head>

<tittle> Belajar HTML </tittle>

</head>

<body>

<p>belajar tentang HTML </p>

</body>

</html>

ii

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.

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

ii

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 :

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

ii

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)

Gambar Website Layout Sederhana

D. Perbedaan HTML5 dengan HTML sebelumnya

HTML HTML 5Penulisan syntax DOCTYPE lebih panjang

Dekalarasi lebih sederhana hanya menggunakan !DOCTYPE html

Masih Menggunakan Flash untuk aplikasi dan video

Ada banyak elemet baru seperti tag audio, video, canvas, pada html

Menggunakan browser chace sebagai tempat penyimpanan data sementara                                 

Memiliki local storage untuk menyimpan data dalam jumlah yg besar

ii

Bekerja dengan semua browser yg lama

Sudah support oleh browser terbaru

JavaScript pada browser membuat kinerja komputer lebih lambat

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

<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

ii

<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

<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

ii

<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

<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

ii

   

   

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

<optgroup>Tag untuk membuat sebuah kelompok pilihan yang terkait dalam daftar drop-down

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

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

ii

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

<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

ii

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

<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

ii

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

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

ii

<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

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

Tag untuk membuat sebuah wadah untuk aplikasi 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

ii

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

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 “{}”.

ii

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

}

ii

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;

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>

ii

</head>

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

</html>

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

ii

Website Layout tanpa CSS

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.

ii

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

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.

ii

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.

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 halaman web 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

ii

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 :

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

ii

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

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

ii

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>

<body>

</body>

</html>

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

menggunaka.html)

Gambar Tabel Menggunakan Javasript

BAB III

PENUTUP

ii

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.

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

ii

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