Web 2

Pemrograman Web
HTML, CSS, Dan Javascript
Muhammad Yunus
1410530236
C / S1 Tehnik Informatika
SekolahTinggi Manajemen Informatika

Dan Komputer
STMIK BUMIGORA MATARAM
HTML
Sejarah HTML
Hypertext Markup Language atau yang biasa disingkat HTML pertama kali diciptakan
dan dikembangkan oleh Tim Berners-Lee pada awal tahun 1990-an yang pada saat itu masih
bekerja di CERN. HTML diciptakan dengan tujuan sebagai cara sederhana namun efektif untuk
mengkodekan dokumen elektronik. HTML pertama kali dipopulerkan dengan menggunakan
browser Mosaic.
Perkembangan HTML
1
HTML versi 1.0 adalah versi pertama sejak lahirnya nama html tersebut. Versi ini memiliki
kemampuan untuk heading, paragraph, hypertext, bold dan italic text, wrapping serta memiliki
dukungan dalam peletakkan sebuah gambar.
2
HTML versi 2.0 ( 14 Januari 1996 ). Pada versi ini ada beberapa tambahan kemampuan
diantaranya penambahan form comment, hal ini menyebabkan adanya sebuah interaktif dan
mulai dari versi ini yang menjadikan sebuah pionner dalam perkembangan homepage interaktif.
3
HTML versi 3.0 ( 18 Desember 1997 ). HTML versi 3.0 juga disebut-sebut HTML+ yang
mempunyai kemampuan dalam beberapa fasilitas diantaranya adalah penambahan fitur table
dalam paragraph, akan tetapi versi ini tidaj bertahan lama.
4
HTML versi 3.2 ( 14 Januari 1997 ). HTML versi ini adalah penyempurnaan dari HTML
versi 3.0. keluarnya versi ini dikarenakan adanya beberapa kasus yang timbul pada pengembang
browser yang telah melakukan pendekatan dengan cara lain yang justru hal tersebut menjadi
popular. Maka dibakukan versi 3.2 untuk mengakomodasi praktek yang banyak digunakan oleh
pengembang browser dan diterima secara umum. Dapat dikatakan versi 3.2 ini merupakan versi
3.2 yang dikembangkan oleh beberapa pengembang browser seperti Netscape dan Microsoft.
5
HTML versi 4.0 ( 18 Desember 1997). Versi ini sudah terdapat penambahan pada link,
meta, image dan lain-lain sebagai penyempurnaan versi 3.2.

6
HTML versi 4.01 ( 24 Desember 1999 ). HTML versi 4.01 menjadi rekomendasi W3C.
HTML 4.01 adalah minor update-koreksi dan perbaikan bug dari HTML 4.0.
7
XHTML versi 1.0 ( 20 Januari 2000 ). XHTML 1.0 merumuskan HTML 4.0 dalam XML.
HTML 5 ( 22 Januari 2008 ). HTML 5 meningkatkan interoperabilitas dan mengurangi
biaya pengembangan dengan membuat aturan yang tepat tentang bagaiman untuk menangani
semua elemen HTML, dan bagaimana memulihakan dari kesalahan. Beberapa fitur dalam
HTML 5 adalah fungsi untuk audio embedding, video, grafik, sisi penyimpanan data klien, dan
dokumen interaktif. HTML 5 juga mengandung unsur-unsur baru seperti <nav>,
<header><footer>, dan <figure>. Yang termasuk kelompok kerja diantaranya AOL, Apple,
Google, IBM, Microsoft, Mozilla, Nokia, Opera dan banyak lagi vendor lainnya.
Struktur Dasar HTML
Struktur Dasar HTML, pada kesempatan kali ini saya akan mencoba memberikan informasi
tentang struktur HTML. Seharusnya informasi ini diberikan saat pertama kali, agar lebih
memahami tentang fungsi dari tiap-tiap struktur HTML
Berikut Struktur Dasar HTML:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Penjelasan Kode:
<html>
......
</html>
Tag <html> ini digunakan untuk menyatakan bahwa halam website menggunakan bahasa
HTML.
<head>
......
</head>
Tag <head> adalah kepala dari halaman website. Pada tag ini anda bisa menambahkan banyak
informasi seperti meta, css, javascript, font dan lain lain.
Contoh, memanggil external file css dan javascript dan font dari google webfont.
<head>
<title>
Contoh dari Title
</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'
type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css" >
<script type="text/javascript" href="script.js"></script>
</head>
<title>
.......
</title>
Tag <title> digunakan untuk menyatakan title website anda. Tag ini disimpan didalam tag
<head></head>
Struktur HTML - Title

<body>
.......
</body>
Tag <body> ini digunakan untuk menampilkan isi dari website anda. Semua yang ingin anda
tampilkan, dimasukan dalam tag <body> ini, bisa image, teks, video, musik dan lain-lain.
Jenis Elment HTML
Secara garis besar terdapat 4 jenis Elemen pada HTML yakni :

1. Struktural adalah Tanda ynag menentukan Level atau Tingkatan dari sebuah tulisan, Contoh
dari Tag HTML yang masuk dalam kategori Struktural ini misalkan <h1> Hello World </h1>
2. Presentasional adalah tanda yang menentukan tampilan dari sebuah tulisan tidak peduli
dengan level dari tulisan tersebut, Contoh dari Tag HTML ynag masuk kedalam kategori
elemen Presentasional ini misalnya, <b> </b> (Memeberikan Effect Tebal pada Tulisan),
<i></i> (memberikan effect miring kesamping pada tulisan), <u></u> (memberikan effect
garis bawah pada tulisan).
3. Hypertext adalah Tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau
pranala ke dokumen lain (contoh, < a href=http://www.wikipedia.org/> Wikipedia</a>
akan menampilkan Wikipedia sebagai sebuah hyperlink ke URL tertentu).
4. Elemen widget yang membuat objek-objek lain seperti tombol (< button>), list (< li>), dan
garis horizontal (< hr>). Konsep hypertext pada HTML memungkinkan pembuatan link
pada suatu kelompok kata atau frasa untuk menuju ke bagian manapun dalam World Wide
Web,
HTML 5
HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari
Waring Wera Wanua, 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[1]) 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 merupakan salah satu karya Konsortium Waring Wera Wanua (World Wide Web
Consortium, W3C) untuk mendefinisikan sebuah bahasa markah tunggal yang dapat ditulis
dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban atas pengembangan HTML
4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan secara berbedabeda oleh banyak perangkat lunak pembuat web.
Perbedaan Html WS 5 dan Html 4
Perbedaan Utama pada HTML5 dan HTML4

1. Mark Up
Beberapa Tag Usang pada HTML4 telah ditiadakan seperti <font> dan <centre>. Fungsi
tersebut diharapkan dapat dibuat dengan menggunakan CSS(Cascade Style Sheet).
2. Error Handling/Penanganan Kesalahan
Pada HTML4 kita bisa menggunakan kode cacat menggunakan "sup tag", dengan perintah
ini kode cacatpun masih bisa dijalankan. Namun jika suatu vendor browser ingin memasuki
pasar, maka mereka harus menguji code cacat tersebut jika tidak mungkin hasil pada browser
akan berbeda dengan browser lain.
3. Multimedia Feature
Pada HTML4 jika kita ingin memasukan video maka harus membutuhkan aplikasi pihak
ketiga seperti Adobe Flash Player. Namun pada HTML5 tidak perlu itu lagi karena kita hanya
perlu menggunakan <audio> dan <video> itu lebih sederhana bukan, karena pada HTML5 ini
menggunakan unsur semantik.
4. API
Dalam HTML5 memperkenalkan sejumlah API yang membantu dalam menciptakan Aplikasi
Web. sebuah API memungkinkan aplikasi web secara offline dan juga untuk mendafarkan diri
untuk protokol tertentu atau jenis media serta API yang mengekspos sejarah dan memungkinkan
halaman untuk menambah untuk mencegah melanggar tombol kembali.
5. Browser Support
HTML5 belum menjadi standar resmi dan belum ada browser yang memiliki dukungan
HTML5 penuh. Tapi semua browser seperti(Safari, Chrome, Firefox, Opera, Internet Explorer)
terus menambahkan fitur HTML5 baru untuk versi terbaru mereka.
Lalu bagaimana cara mengetahui itu HTML4 atau HTML5?
Dalam hal ini mungkin sulit bagi orang yang awan namun ini bisa kita ketahui jika kita melihat
sumber laman lalu melihat "DOCTYPE" yang digunakan seperti berikut :
dari gambar diatas dapat kita lihat "DOCTYPE" dari website yang menggunakan HTML5
tersebut. Serta jika menggunakan HTML4 maka "DOCTYPE" seperti dibahaw ini :
Jadi, HTML5 dikembangkan agar membuat halaman sedikit lebih semantik, namun yang
terpenting agar lebih mudah dibaca.
CSS
Pengertian CSS
CSS = Cascading Style Sheets ( Bahasa lembar Gaya ). CSS merupakan bahasa yang digunakan
untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup / markup language. Jika
kita berbicara dalam konteks web, bisa di artikan secara bebas sebagai : CSS merupakan bahasa
yang digunakan untuk mengatur tampilan / desain suatu halaman HTML.
1.
CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi yang
2.
menentukan bagiamana suatu text akan tertampil di halaman web.

Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors
(warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lainlain. Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak)
disebut juga styles.

3. Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers
(lapisan) yang berbeda.
4. CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu dokumen akan
disajikan.
5. Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan style sheet.
6. Saat menggunakan CSS, Anda tidak perlu menulis font, color atau size pada setiap paragraf,
atau pada setiap dokumen. Setelah Anda membuat sebuah style sheet, Anda dapat
menyimpan kode tersebut sekali saja dan dapat kembali menggunakannya bila diperlukan.
7.
Sejarah CSS Dan Perkembangan CSS

CSS pertama kali bermula sejak munculnya SGML pada tahun 1970an. Sejak
kemunculannya tersebut, CSS mengalami perkembangan yang sangat pesat. Format dasar CSS
yang banyak kita gunakan sekarang ini merupakan ide dari seoang programmer bernama Hakon
Wium Lie yang tertuang dalam proposalnya mengenai Cascading HTML Style Sheet (CHSS)
pada bulan Oktober 1994 (dalam konferensi W3C di Chicago, Illinois). Kemudian, beliau
bersama-sama dengan seorang temannya yang bernama Bert Bos mengembangkan suatu
standard CSS.
Pada akhir tahun 1996, CSS telah resmi dipublikasikan (dan menyusul kemudian CSS
Level 1 pada bulan Desember). Pengerjaan proyek ini juga didukung oleh seorang programmer
bernama Thomas Reardon dari perusahaan software ternama, Microsoft. CSS digunakan oleh
penulis maupun pembaca halaman web untuk menentukan warna, jenis huruf, tata letak, dan
berbagai aspek tampilan dokumen. CSS digunakan terutama untuk memisahkan antara isi
dokumen (yang ditulis dengan HTML atau bahasa markup lainnya) dengan presentasi dokumen
(yang ditulis dengan CSS).
Pemisahan ini dapat meningkatkan aksesibilitas isi, memberikan lebih banyak
keleluasaan dan kontrol terhadap tampilan, dan mengurangi kompleksitas serta pengulangan
pada stuktur isi. CSS memungkinkan halaman yang sama untuk ditampilkan dengan cara yang
berbeda untuk metode presentasi yang berbeda, seperti melalui layar, cetak, suara (sewaktu
dibacakan oleh browser basis-suara atau pembaca layar), dan juga alat pembaca braille. Halaman
HTML atau XML yang sama juga dapat ditampilkan secara berbeda, baik dari segi gaya
tampilan atau skema warna dengan menggunakan CSS.
Sekarang penggunaan CSS telah semakin meluas dan terus dikembangkan. Hal ini juga akan
mempermudah seorang web designer dalam mengembangkan suatu halaman web (situs).
Ada 3 cara untuk memasang Script CSS pada dokumen HTML yaitu:
External Style Sheet (file CSS berbeda dari file HTML),
Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML),
Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak
direkomendasikan).
1.
CSS level 1
Pada tanggal 17 Agustus 1996 World Wide Web Consortium (W3C) menetapkan CSS sebagai
bahasa pemrograman standard dalam pembuatan web. Tujuannya adalah untuk mengurangi
pembuatan tag-tag baru oleh Netscape dan Internet Explorer, karena kedua browser tersebut
sedang bersaing mengembangkan tag sendiri untuk mengatur tampilan web.
CSS 1 mendukung pengaturan tampilan dalam hal :

1. Font (Jenis ketebalan).
2. Warna, teks, background dan elemen lainnya.

3. Text attributes, misalnya spasi antar baris, kata dan huruf.
4.
Posisi teks, gambar, table dan elemen lainnya.
5.
Margin, border dan padiing.
2.
CSS level 2
W3C menyempurnakan CSS tahap awal dengan menciptakan standard CSS 2 yang menjadi
standard hingga saat ini pada tahun1998. Semua atribut dari CSS 1 dimasukkan dan diperluas
dengan penekanan pada International Accessibiality and Capacibilty kususnya media-specific
CSS. CSS 2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa
ditampilkan di printer.
3.
CSS level 3
CSS 3adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam mendesain
website. CSS 3 dapat melakukan animasi pada halaman website, diantaranya animasi warna dan
animasi 3D. Desainnya yang memudahkan dalam hal kompatibilitas websitenya pada
smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada
CSS 3 yaitu : Multiple background, border-radius, drop-shadow, border-image, CSS-Math dan
CSS Object Model.
Fitur terbaru CSS 3 :
1. Animasi, sehingga pembuatan animasi tidak memerlukan program sejenis Adobe Flash
dan Microsoft Silverlight.
2. Beberapa efek teks, seperti teks berbayang, kolom koran dan Word-Wrap.
3. Beberapa efek pada kotak, seperti kotak yang ukurannya dapat diubah-ubah, transformasi
2 dimensi dan 2 dimensi, sudut-sudut yang tumpul dan bayangan.
Struktur Dasar CSS

Sruktur dasr CSS, yaitu selector, property, dan value. Pembahasan mengenai makna dari
ketiga istilah tersebut akan dilakukan pada bagian selanjutnya.
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 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;
}
Sintaks CSS
Setelah mengerti makna dari Property, Value, dan Selector, kita dapat melihat bahwa sintaks dari
CSS adalah seperti yang ditampilkan pada gambar berikut:
Sintaks CSS
Ingat, bahwa pada satu selector dapat diaplikasikan banyak
property, dan masing-masing property akan memiliki value yang
berbeda-beda, bergantung kepada apa yang direpresentasikan
oleh property tersebut.
Selector-selector dalam CSS

Dengan CSS selector kita akan menentukan suatu style tertentu kepada elemen-elemen dengan
pola yang kita inginkan. Selector-selector dalam CSS antara lain
1. Universal selector
Universal selector ditandai dengan *
Misal
*
{
font-family:Verdana;
}
Dengan selector ini berarti huruf default font untuk seluruh document XHTML kita
adalah Verdana
2. Descendant selector
Selector descendant berarti selector yang merupakan turunan dari sesuatu.
div p
{
margin-bottom: 2px;
}
Berarti setiap <p> yang merupakan turunan dari <div> akan diberi margin-bottom 2px.
Turunan ini bisa anak, atau cucu atau cicit dan seterusnya yang penting merupakan
turunan dari <div>
3. Direct child selector
Direct child selector berarti turunan secara langsung atau anak.
div > p
{
margin-bottom: 2px;
}
Dalam contoh ini, hanya <p> yang merupakan anak (turunan langsung) dari div yang
akan diberikan margin-bottom 2px
4.
Direct Adjacent Sibling Combinator

Selector ini adalah untuk dua anak berdekatan yang memiliki parent yang sama misalnya:
h1 + p
{
font-family:Arial;
}
Pada selector di atas akan berlaku untuk contoh
<div>
<h1>Judul</h1>
<p>Penjelasan</p>
</div>
Pada contoh di atas Penjelasan akan menggunakan font Arial
5.
Indirect Adjacent Sibling Combinator

Untuk indirect Adjacent Sibling ini adalah seperti Direct Adjacent Sibling tetapi letaknya tidak
harus berdekatan. Jadi dua buah anak memiliki parent yang sama meskipun tidak berdekatan.
Selector ini adalah untuk dua anak yang memiliki parent yang sama misalnya:
h1 ~ h2
{ font-family:Arial; }
Pada selector di atas akan berlaku untuk contoh
<div>
<h1>Judul</h1>
<p>Penjelasan</p>
<h2>Sub Judul</h2>
</div>
Pada contoh di atas Sub Judul akan menggunakan font Arial
6.
Berdasarkan attribute
Untuk contoh based on attribute misalnya
input[type]
{
border: 1px;
}
7.
Berdasarkan nilai suatu attribute

Contoh yang berdasarkan nilai suatu atrribut misalnya:
input[type='text']
{
border: 1px;
}
8.
Substring selector
- Substring dengan permulaan tertentu,
misalnya
a[href^='http://www.proweb.co.id']
{
color: blue;
}
- Substring dengan akhiran tertentu.
a[href$='.jpeg']
{
color: blue;
}
- Substring dengan mengandung string tertentu di mana saja.
a[href*='proweb']
{
color: blue;
}
CSS Box Model

CSS Box Model adalah salah satu unsur dasar yang sangat penting dalam desain blog
yang harus dipahami dengan baik. Hampir semua bagian blog/web dikenali sebagai "box atau
kotak" yang didalamnya terdiri atas margin, border, padding dan content. Box atau kotak ini
menjadi sangat akrab di telinga blogger bukan saja karena setiap saat selalu terdengar atau
terbaca dan bahkan bersentuhan, namun memang istilah ini menjadi istilah pokok dalam dunia
per-blogger-an. Anda pasti amat sering mendengar istilah kotak komentar atau comment box,
kotak widget, kotak/boks posting, box edit html, kotak pencarian, serta beberapa istilah lain yang
selalu diawali dengan kata boks/kotak. Box atau dalam bahasa Indonesia dikenal sebagai "kotak"
atau "boks" terdiri atas 4 unsur:
1. Margin :
Margin adalah jarak yang membatasi sebuah box/elemen blog dengan elemen/unsur yang
lain. Elemen atau unsur lain dapat berupa image, teks, box atau unsur lain yang terdapat
dalam blog/web.
2. Border :
Border adalah bagian terluar box yang berbentuk garis dengan ketebalan tertentu dan bisa
diatur ketebalannya.
3. Padding :
Padding berfungsi sebagai pemisah antara content box (bagian terdalam/tengah2 box
yang berisi teks, image, kode html dll) dengan border. Seperti halnya margin dan border,
padding juga bisa diatur besaran-nya dengan merubah nilai padding yang mempunyai
satuan px, em, % (persen).
4. Content :
Content menjadi bagian inti dari sebuah box. untuk inilah sebuah box dibuat atau
diciptakan
CSS Typografi
Typography adalah sebuah seni mengatur huruf/teks untuk membuatnya lebih mudah dibaca dan
menarik secara visual. Teks merupakan konten utama dari hampir semua website. Walaupun anda
membuat web yang fokus kepada multimedia (gambar dan video), namun tetap memerlukan teks untuk
bagian keterangan/deskripsi. Menu navigasi sebuah website juga hampir semuanya terdiri dari teks.
Dalam artikel kali ini kita akan fokus membahas cara penggunaan property CSS yang berkaitan dengan
typography atau teks. Selain itu, saya juga akan membahas konsep-konsep dasar property CSS seperti
nilai length (pixel, em, %, dll), nilai color(#RBG, HSL) dan CSS3 vendor prefix.
Kecuali dinyatakan lain, hampir semua property typography di dalam CSS akan diturunkan ke child
element, atau dikenal sebagai inherit property.
Property font-family
Pembahasan mengenai property CSS kita mulai dengan font-family. Property ini digunakan
untuk mengatur jenis font. Nilai dari property font-family adalah nama font yang ingin digunakan.
Berikut contoh penulisannya :
p{
font-family : Arial;
}
Kode CSS diatas akan men-set jenis font Arial pada semua paragraf. Akan tetapi, dari manakah font ini
diambil?
Property font-family akan mencari font di dalam komputer client, yakni di dalam komputer pengunjung
web browser, bukan di dalam komputer server tempat website berada.
Ini berarti kode CSS diatas hanya akan ditampilkan dengan font Arial apabila di dalam komputer
pengunjung terdapat font bernama Arial. Jika tidak ditemukan, web browser akan menentukan sendiri
font yang akan digunakan (tergantung settingan default web browser tersebut).
Bagi pengguna Windows, seluruh file font yang tersedia di komputer bisa dilihat dari
Control Panel -> Appearance and Personalization -> Fonts.
Untuk mengantisipasi tidak tersedianya sebuah font, kita bisa memberikan alternatif font pengganti,
seperti contoh berikut :
p{
font-family : Arial, Helvetica, sans-serif;
}
Kali ini, kode CSS diatas memberikan pilihan kepada web browser: Cari seluruh tag <p>, kemudian
gunakan font Arial. Apabila tidak ditemukan, gunakan font Helvetica. Apabila tidak ditemukan juga,
gunakan font generic dengan tipe sans-serif.
CSS tidak membatasi seberapa banyak font alternatif yang bisa dipersiapkan, bisa 1, 3, bahkan 10 font :
p{
font-family : Arial, Helvetica, verdana, Geneva, Impact,
Charcoal, sans-serif ;
}
Kode CSS diatas memberikan 7 alternatif font yang bisa dipilih, mulai dari Arial sebagai prioritas
utama, kemudian Helvetica (jika Arial tidak tersedia), lalu Verdana (jika Arial dan Helvetica tidak
ditemukan), dst. Walaupun kita bisa mempersiapkan banyak font alternatif, umumnya web designer
hanya menulis maksimal 3 jenis font (2 font dan 1 font generic).
Perhatikan untuk setiap nama font dipisah dengan tanda koma: , . Khusus untuk nama font
yang terdiri dari beberapa kata atau mengandung spasi, penulisannya harus berada diantara tanda kutip,
seperti Times New Roman:
p{
font-family : "Times New Roman", Georgia, serif;

}
Property font-family termasuk ke dalam properti yang diturunkan ke dalam child element, atau
dikenal sebagai inherit property. Oleh karena itu, jika kita ingin mengunakan sebuah jenis font untuk
seluruh halaman, tinggal menempatkan property ini di dalam selector body :
body {
font-family : "Times New Roman", Georgia, serif;
}
Kode CSS diatas akan membuat seluruh element HTML yang berada di dalam tag <body> mengunakan
font Times New Roman.
CSS media query

CSS @media query merupakan sebuah teknik css layout yang membebaskan kita untuk
menyeting tampilan dengan CSS di berbagai resolusi dan lebar, tinggi daripada browser yang
sedang kita gunakan secara spesifik. Maksudnya adalah, kita bisa dengan bebas menyeting
layout pada ukuran 1024 x 800 atau 800 x 400
Ada beberapa macam penempatan CSS @media seperti screen(all), dan print. Perhatikan contoh
kode dibawah ini :
CSS
@media print{
.button{ display: none
}
@media all{
.button{
padding: 5px 8px;
border: 1px solid #282929;
font-weight: bold;
background-color: #fff;
9
10
@media print{
11
.button{ display: none; }
12
Pada blok kode diatas, dapat dijelaskan bahwa :

Semua elemen yang memiliki class bernama button, akan memiliki efek layout seperti rule-rule
yang sudah ditetapkan diatas, dan @media all akan bekerja ketika halaman tersebut dibuka, dan
aktif.
Dan pada @media print, semua elemen yang memiliki class bernama button akan di-hide atau
di sembunyikan dengan rule display: none; ketika halaman tersebut di cetak.
Ada beberapa cara untuk kita bisa meng-import style atau file-file css tersebut, yaitu :

<link rel="stylesheet" type="text/css" media="print" href="style_print.css" />
3
4

<style type="text/css">
@media print {
.button {
8
9
display: none;
}
10 }
11 </style>
max-width
Max-width digunakan untuk membatasi sebuah halaman apakah halaman tersebut memiliki lebar
tertentu sesuai yang sudah diatur sebelumnya.
Penerapan :
CSS
@media screen and (max-w idth
.button{ padding: 15px
}
@media screen and (max-width: 1024px){
.button{ padding: 15px; }
Kode diatas dapat diartikan, rules CSS yang diberikan untuk class bernama button akan
diterapkan selama lebar browser <= (kurang dari sama dengan) 1024 pixel. Jika lebar browser
lebih dari 1024px, maka rules tidak berlaku.
min-width
Min-width kebalikan dari max-width, digunakan untuk membatasi halaman apakah halaman
tersebut memiliki lebar tertentu sesuai dengan yang sudah diatur sebelumnya.
Penerapan :
CSS
@media screen and (min-w idth
.button{ padding: 8px;
}
@media screen and (min-width: 400px){
.button{ padding: 8px; }
Kode diatas dapat diartikan, rules CSS yang diberikan untuk class bernama button akan
diterapkan selama lebar browser >= (lebih besar sama dengan) 400 pixel. Jika lebar browser
kurang dari 400px, maka rules tidak berlaku.
Operator logika
Dalam CSS @media query, berlaku sebuah ketetapan yang kita sebut dengan operator logika.
Dalam hal ini, ada beberapa operator logika yang bisa kita gunakan seperti not, and, dan only.
and
Tentunya operator logika yang satu ini sudah sangat familiar, yaitu akan bernilai TRUE jika
kedua statement yang menjadi perbandingan bernilai TRUE juga atau memiliki nilai yang
memenuhi. Contoh penarapan :
CSS
@media screen and (max-w idth
.button{ padding: 10px
.our-sales{
w idth: 500p
1 @media screen and (max-width: 1024px) and (min-width: 800px){

2 .button{ padding: 10px; }
3 .our-sales{
4 width: 500px;
5 font-size: 13px;
6 }
7 .our-sales > .item{ margin: 0 5px; }
8 }
Maksud dari blok kode diatas adalah, semua rules akan diterapkan jika lebar dari sebuah
halaman adalah <= (lebih kecil sama dengan) 1024px dan >= (lebih besar sama dengan) 800px.
Dan seperti yang sudah saya sebutkan sebelumnya, kumpulan CSS ini dapat kita import dengan
menggunakan elemen link yang penerapannya sebagai berikut :
<link rel="stylesheet" type="text
<link rel="stylesheet" type="text/css" media="screen and (max-width: 1024px) and (min-width:

800px)" href="custom.css" />
JAVASCRIPT
Pengertian JavaScript
JavaScript adalah bahasa yang digunakan untuk membuat program yang digunakan agar
dokument HTML yang ditampilkan pada sebuah Browser menjadi lebih interaktif, tidak sekedar
indah saja. JavaScript memberikan beberapa fungsionalitas ke dalam halaman web, sehingga
dapat menjadi sebuah program yang disajikan dengan menggunakan antar muka web.
JavaScript merupakan bahasa script, yaitu bahasa yang tidak memerlukan kompiler
untuk dapat menjalankanya, tetapi cukup dengan Interpreter. Tidak perlu ada proses kompilasi
terlebih dahulu agar program dapat dijalankan. Browser web Netscape Naviagtor dan Internet
Exploler adalah salah satu contoh dari salah banyak interpreter, karena kedua browser ini telah
dilengkapi dengan Interpreter JavaScript. Tetapi tidak semua browser web dapar menjadi
interpreter javascript karena belum tentu browser tersebut dilengkapi dengan interpreter
JavaScript.
JavaScript adalah bahasa pemrograman yang ringan dan mudah untuk digunakan.
Dengan adanya JavaScript ini, maka kini halaman web tidak sekedar menjadi halaman data
dan informasi saja, tetapi juga menjadi suatu program aplikasi dengan antarmuka web.
JavaScript merupakan bahasa pemrograman yang tidak membutuhkan lisensi untuk dapat
menggunakanya. Jika browser web yang kita gunakan mendukung JavaScript, maka kita dapat
langsung membuat aplikasi berbasis web dengan menggunakan JavaScript. JavaScript muncul
sebagai jawaban atas tantangan dari pengakses web yang mengharapkan halaman web yang
ditampilakan dapat lebih dinamis, tidak statis. Dokumen atau halaman web, tidak sekedar
digunakan untuk dapat berinteraksi dengan suatu sistem informasi . Karena pada awal
perkembangan teknologi dan peneraopan web , halaman-halaman web lebih cenderung sebagai
halaman-halaman yang statis, tidak ada suatu daya tarik lain. Selain hanya data dan informasi
yang ditampilkan sehingga akan membuat pengunjung web menjadi cepat bosan dan
memutuskan untuk beralih ke situs web lain.
Terus pertanyaanya, bagaimanakah caranya membuat halaman web menjadi tidak statis
dan menjadi dinamis?? Jawaban pertama keinginan adanya suatu yang dinamis dalam halaman
web adalah adanya animasi gambar yang dikemas dalam file gif animasi (animated gif). Tetapi
gambar animasi ini ternyata bukanlah jawaban yang sesungguhnya diharapkan, karena secara
prinsip, bukan merupakan suatu konsep dinamis yang sesungguhnya. Ternyata model dinamis
yang diinginkan adalah bahwa halaman web yang ditampilkan bisa juga digunakan sebagai
aplikasi, sebagaimana aplikasi dalam suatu sistem operasi (aplikasi atau program berbasis teks
atau windows).
Web sebagai standar antarmuka aplikasi online, haruslah dapat mengakomodasi
kebutuhan untuk menjadikanya standar seperti halnya aplikasi dalam mode text atau window,
harus memungkinkan adanya intraksi antara pemakai aplikasi dengan halaman web yang sedang
ditampilkan. Aplikasi yang ditampilkan pada halaman web harus dapat memberikan informasi
atau pun melakukan validasi terhadap masukan yang diberkan oleh pemakai sebelum dikirimkan
kepada server untuk diproses.
Untuk menjalankan javascript, kita hanya membutuhkan aplikasi text editor, dan web browser.
Javascript memiliki fitur: high-level programing language, client-side, loosely tiped, dan
berorientasi objek.
Sejarah JavaScript
Javascript dibuat dalam 10 hari pada Mei 1995 oleh Brendan Eich, bekerja di
Netscape(telah berubah nama menjadi Mozilla). JavaScript tidak selalu dikenal sebagai
JavaScript, nama aslinya adalah Mocha, nama tersebut diberikan oleh Marc Andreesen sebagai
pendiri dari Netscape. Pada September tahun 1995 nama Mocha diubah menjadi LiveScript,
kemudian di bulan Desember pada tahun yang sama, setelah mendapatkan sebuah lisensi merek
dagang dari Sun, namanya dikembalikan lagi menjadi JavaScript.
Pada tahun 1996 - 1997 JavaScript dibawa ke ECMA untuk diberikan spesifikasi standar,
dimana browser vendor lain bisa mengaplikasikan JavaScript seperti di Netscape. Pekerjaan
periode waktu ini akhirnya mengarah pada rilis resmi dari ECMA-262 Ed.1. ECMAScript
adalah nama standar resmi dari JavaScript, namun JavaScript yang lebih dikenal dalam
implementasinya. ActionScript 3 adalah implementasi populer lain dari ECMAScript.
Proses standar berlanjut dengan rilis dari ECMAScript 2 pada tahun 1998 dan
ECMAScript 3 pada tahun 1999, sebagai dasar dari JavaScript modern. "JS2" atau aslinya "ES4"
dibuat dengan dipimpin oleh Waldemar Horwat(bekerja di Netscape, sekarang di Google)
dimulai pada tahun 2000 dan pertama kalinya, Microsoft tampaknya turut berpartisipasi dan
bahkan mengimplementasikan beberapa hal kedalam bahasa JScript.net mereka.
Seiring waktu, Microsoft ternyata tidak menaruh perhatian untuk bekerjasama atau
menerapkan Javascript di IE. Jadi sejak tahun 2003, pengembangan JS2/ES4 tidak dilanjutkan.
Berikutnya pada tahun 2005, dua hal besar terjadi dalam sejarah JavaScript. Pertama,
Brendan Eich dan Mozilla bergabung kembali dengan Ecma sebagai anggota non-profit dan
mulai bekerja di E4X, ECMA-357, yang berasal dari eks-karyawan Microsoft di BEA. Setelah
itu bekerjasama dengan Macromedia yang menerapkan E4X di ActionScript 3.
Jadi, selama dengan Macromedia (kemudian diakuisisi oleh Adobe), Pekerjaan dimulai
kembali pada ECMAScript 4 dengan tujuan yaitu standarisasi di AS3 dan
mengimplementasikannya di SpiderMonkey. Dalam tujuan ini, Adobe merilis "AVM2", dengan
nama kode Tamarin, sebagai proyek open source. Namun Tamarin dan AS3 terlalu berbeda dari
JavaScript dan hal ini disadari pada tahun 2007 dan 2008.
Ketika segala hal itu terjadi, komunitas open source dan developer mulai bekerja untuk
me-revolusi apa yang bisa dilakukan dengan JavaScript. Upaya komunitas ini dipicu pada tahun
2005 ketika Jesse James Garrett merilis sebuah paper dimana ia menciptakan istilah Ajax, yang
menggambarkan seperangkat teknologi dimana JavaScript merupakan backbone-nya untuk
membuat aplikasi web dimana data dapat dimuat di sisi background, menghindari kebutuhan
untuk me-reload data satu halaman penuh sehingga dapat menghasilkan aplikasi yang lebih
dinamis. Hal ini merupakan periode kebangkitan penggunaan JavaScript yang dipelopori oleh
open source libraries dan komunitas di sekitarnya, dengan rilisnya library seperti Prototype,
JQuery, Dojo, dan Mootools.
Pada Juli tahun 2008 terjadi pertemuan antar developer yang saling berbeda sisi di Oslo.
hal ini mengarah pada perjanjian yaitu pada awal 2009 untuk mengubah nama ECMAScript 3.1
menjadi ECMAScript 5 dan mendorong bahasa program ini lebih maju dalam agenda yang
dikenal sebagai Harmony.
Penempatan javascript
Pada kali ini kita akan membahas tentang penempatan javascript. Javascript dapat ditempatkan
di antara tag <head></head> atau <body></body> atau diletakan di luar html atau yang sering
kita sebut penempatan secara external dengan cara memanggil dengan syntax tag <script
src=nama.js> </script>. Semua kode javacript yang kita program harus diletakan diantara tag
<script> dan </script> .
ex.
pada head
1
2 <!DOCTYPE html>
<html>
3 <head>
4
<script>
5
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph
6
changed.";
7
}
8
</script>
9 </head>
10
11 <body>
<h1>JavaScript in Head</h1>
12
<p id="demo">A Paragraph.</p>
13
<button type="button" onclick="myFunction()">Try it</button>
14 </body>
15 </html>
16
pada body
1
2 <!DOCTYPE html>
3 <html>
<head>
4
<title>belajar javascript</title>
5 </head>
6 <body>
<h1>Javascript pada body</h1>
7
<p id="demo">sebuah paragraf awal</p>
8
<button type="button" onclick="fungsi()">silahkan dicoba</button>
9
<script>
10
function fungsi(){
document.getElementById("demo").innerHTML="paragraf telah
11
diubah";
12
}
13
</script>
14
15 </body>
16 </html>
17
Event Pad JavaScript

Event pada JavaScript dapat dikatakan sebagai fungsi pasif (passive function) yang
disediakan oleh JavaScript. Berbeda dengan function yang harus dipanggil terlebih dahulu agar
prosesnya berjalan, event tidak perlu dipanggil. Proses event akan berjalan apabila suatu aksi
tertentu dikenakan pada elemen HTML tertentu. Dengan kata lain, function dikendalikan oleh
programmer, sedangkan event dikendalikan oleh user.
Event yang disediakan oleh JavaScript terbagi menjadi 2 jenis, yaitu system event dan
user event. System event adalah event yang selalu ada dan sangat berhubungan dengan sistem
halaman web yang digunakan. Sedangkan user event adalah event yang hanya ada apabila ada
elemen halaman web yang digunakan.
Macam-macam system event pada JavaScript beserta fungsinya:
1. onError: event ini muncul apabila terjadi kesalahan pada window atau image.
2. onLoad: event ini muncul apabila suatu objek (window, frame, atau image) telah selesai
ditampilkan pada halaman web.
3. onUnload: event ini muncul apabila suatu objek (window, frame, atau image) telah
dikeluarkan dari ruang memori atau telah selesai digunakan.
Macam-macam user event pada JavaScript beserta fungsinya:

1.
onAbort: event yang dimiliki oleh objek image ini akan muncul apabila sebuah gambar
dihentikan proses pemunculannya yang dimungkinkan akibat penekanan tombol stop pada
browser.
2. onBlur: event ini muncul apabila sebuah elemen (window, frame, select, text, atau
textarea) kehilangan fokusnya.
3. onChange: event ini muncul apabila sebuah elemen (select, text, atau textarea) telah diubah
nilainya sebelum elemen tersebut kehilangan fokusnya.
4. onClick: event ini muncul apabila terjadi aksi klik terhadap suatu elemen, seperti elemen
button.
5. onContextMenu: event ini muncul apabila terjadi aksi klik kanan terhadap suatu elemen.
6. onDblClick: event ini muncul apabila terjadi aksi klik ganda terhadap suatu elemen.
7. onFocus: event ini muncul apabila sebuah elemen (window, frame, select, text, atau
textarea) dikenai fokus.
8. onHelp: event ini muncul apabila terjadi penekanan tombol F1, yang umumnya digunakan
oleh berbagai aplikasi sebagai tombol shortcut untuk menampilkan fasilitas bantuan (help).
9. onKeydown: event ini muncul apabila terjadi penekanan tombol keyboard.
10. onKeypress: event ini muncul apabila terjadi penekanan dan pelepasan tombol keyboard.
11. onKeyup: event ini muncul apabila terjadi pelepasan tombol keyboard yang ditekan.
12. onMousedown: event ini muncul apabila terjadi penekanan tombol mouse.
13. onMousemove: event ini muncul apabila mouse digerakkan (pointer berubah posisinya).
14. onMouseout: event ini muncul apabila pointer keluar dari area suatu elemen (elemen
hyperlink dan elemen area).
15. onMouseover: event ini muncul apabila pointer berada di atas area suatu elemen (elemen
hyperlink dan elemen area).
16. onReset: event ini muncul apabila terjadi penekanan terhadap tombol reset pada form yang
bersangkutan.
17. onResize: event ini muncul apabila ukuran jendela browser diubah (diperbesar atau
diperkecil).
18. onSelect: event ini muncul apabila terjadi pemilihan teks pada lement text dan textarea
dengan cara diblok.
19. onStop: event ini muncul apabila user melakukan penekanan tombol stop pada browser.
20. onSubmit: event ini muncul apabila terjadi penekanan terhadap tombol submit pada form
yang bersangkutan.
Pengertian Jquery
jQuery adalah sebuah library Javascript yang sangat ringkas dan sederhana untuk
memanipulasi komponen di dokumen HTML, menangani event, animasi, efek dan memproses
interaksi ajax. jQuery dirancang sedemikian rupa supaya membuat program menggunakan
Javascript menjadi relatif sangat mudah. Sesuai slogan nya, write less, do more. Menulis kode
lebih sedikit, tetapi melakukan pekerjaan lebih banyak.
jQuery ukuran nya cukup kecil, sehingga tidak memperlambat proses loading halaman
web yang kita buat. jQuery juga kompatibel dengan CSS3 dan yang tak kalah penting adalah
jQuery bisa berjalan di semua browser cross browser.
jQuery diluncurkan pada Januari 2006 oleh John Resig. jQuery adalah library Javascript
yang paling populer saat ini. Karena kecanggihan nya, jQuery dipakai oleh perusahaan besar
seperti Google. Dell, CBS, digg, Netflix, Bank of America, Mozilla, Drupal, dsb.
jQuery adalah library Javascript yang gratis dan open source. Oleh karena nya kita bisa
menggunakan jQuery dengan bebas untuk keperluan pengembangan website kita. Tanpa library
seperti jQuery, menerapkan Javascript mungkin akan lebih sulit, terutama untuk pemula yang
baru belajar Javascript. Plugin tambahan seperti JQuery UI (user interface) semakin
memudahkan kita mengembangkan website yang cantik dan interaktif. Selain itu tersedia pluginplugin lain yang makin memperkaya kemampuan jQuery.
Refrensi
https://agung1ka42.wordpress.com/2015/03/19/4-elemen-pada-tag-html
http://aldiunanto.com/apa-itu-css-media.aldi
http://design-web11.blogspot.co.id/2013/06/artikel-html-sejarah-perkembangan-dan.html
http://pesonainformatika.com/javascript/2-penempatan-javascript/
http://gubhugcss.blogspot.co.id/2012/08/css-box-model.html
http://gohardiansyah.blogspot.co.id/2015/12/css-typography.html
https://anakgaulbinus.wordpress.com/2012/10/12/event-pada-javascript/
https://bertzzie.com/knowledge/desain-web-dasar/HTMLdanCSSDasar.html
https://id.wikipedia.org/wiki/HTML5
http://gunturrestuperdana.blogspot.co.id/2012/04/pengertian-css-konsep-dasar-css.html
http://hengkiproject.blogspot.co.id/2015/09/pengertian-dan-fungsi-javascript-dalam.html
https://indonesiakode.blogspot.co.id/2015/10/pengertian-jquery-dan-fungsinya-terbaru.html
http://thomrev.blogspot.co.id/2012/12/perbedaan-html5-dan-html4-serta-cara.html
http://www.dhan.web.id/2016/03/sebuah-sejarah-singkat-dari-javascript.html
https://cahyonex.wordpress.com/2013/11/19/sejarah-dan-perkembangan-css/
http://www.proweb.co.id/articles/web_design/selector-selector_dalam_css.html
http://ngajarcss.blogspot.co.id/2014/05/struktur-dasar-html.html

Web 2

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Web 2

Diunggah oleh

Hak Cipta:

Format Tersedia

Pemrograman Web

HTML, CSS, Dan Javascript

SekolahTinggi Manajemen Informatika

meta, image dan lain-lain sebagai penyempurnaan versi 3.2.

HTML 5 ( 22 Januari 2008 ). HTML 5 meningkatkan interoperabilitas dan mengurangi

Struktur HTML - Title

Jenis Elment HTML

Secara garis besar terdapat 4 jenis Elemen pada HTML yakni :

Perbedaan Html WS 5 dan Html 4

Perbedaan Utama pada HTML5 dan HTML4

menentukan bagiamana suatu text akan tertampil di halaman web.

disebut juga styles.

Sejarah CSS Dan Perkembangan CSS

External Style Sheet (file CSS berbeda dari file HTML),

CSS 1 mendukung pengaturan tampilan dalam hal :

2. Warna, teks, background dan elemen lainnya.

Posisi teks, gambar, table dan elemen lainnya.

Margin, border dan padiing.

Struktur Dasar CSS

Selector-selector dalam CSS

Direct Adjacent Sibling Combinator

Indirect Adjacent Sibling Combinator

Berdasarkan nilai suatu attribute

CSS Box Model

font-family : "Times New Roman", Georgia, serif;

CSS media query

padding: 5px 8px;

border: 1px solid #282929;

.button{ display: none; }

Pada blok kode diatas, dapat dijelaskan bahwa :

<link rel="stylesheet" type="text/css" media="print" href="style_print.css" />

@media screen and (max-width: 1024px){

.button{ padding: 15px; }

@media screen and (min-width: 400px){

.button{ padding: 8px; }

1 @media screen and (max-width: 1024px) and (min-width: 800px){

<link rel="stylesheet" type="text/css" media="screen and (max-width: 1024px) and (min-width:

Event Pad JavaScript

Macam-macam user event pada JavaScript beserta fungsinya:

Anda mungkin juga menyukai