POKOK BAHASAN 1
HTML ( Hypertext Markup Language )
A. Tujuan:
1. Mengenal dan mengetahui tentang pemrograman berbasis HTML
2. Memahami dan mengetahui struktur dan fitur - fitur pada HTML
3. Mahasiswa mampu menuliskan kode - kode HTML
4. Memahami tentang pembuatan dan fungsi form
B. Dasar Teori
HTML adalah, (Hypertext Markup Language) sebuah bahasa standar yang
digunakan oleh browser internet untuk membuat halaman dan dokumen pada
sebuah Web yang kemudian dapat diakses dan dibaca layaknya sebuah artikel.
HTML juga dapat digunakan sebagai link-link antara file-file dalam situs atau
dalam computer dengan menggunakan localhost, atau link yang menghubungkan
antar situs dalam dunia internet.
Standar minimum elemen HTML adalah:
Document Type Declaration (DTD)
Head
Body
DTD
Sebagai standar versi dokumen W3C yaitu suatu deklarasi yang digunakan untuk
mengidentifikasi jenis dokumen HTML yang digunakan sehingga browser dapat
menentukan bagaimana memperlakukan kode tersebut.
Meta Dokumen
Elemen meta sebagai identitas dari halaman web yang bias a terdiri dari owner, keyword,
layout, ataupun inisialisasi proses seperti refresh.
Contoh:
<meta http-equiv="Content-Type" content="text!html; charset=UTF-8" />
<meta name="keywords" content="blog, web development, indonesia,
html, css" I> • <meta name="description" content="Tentang dasar-dasar
HTML" />
Keterangan tag-tag lainnya dapat dilihat pada tabel 1 dibawah.
Pada perkembangannya, versi HTML yang mulai dipakai saat ini adalah HTML5
( HTML Versi 5) yang merupakan standar baru pada pemrograman web berbasis HTML.
HTML5 menawarkan fitur barn dan kemudahan penggunaan tag-tag html. HTML5
menggantikan versi HTML sebelumnya, HTML 4.01 yang diperkenalkan pada 1999.
Sejak saat itu, telah terjadi banyak perubahan pada web. Walaupun HTML5 masih dalam
tahap pengembangan, namun browserbrowser modern sudah banyak yang mendukung
standar HTML baru ini. Untuk tag-tag html versi sebelumnya masih dipakai di modul ini.
Fitur Baru HTML5
HTML5 menawarkan banyak fitur yang menarik. Berikut ini adalah beberapa fitur
HTML5 yang cukup menarik.
* Tag <canvas> untuk menggambar 2D
* Tag<video>dan<audio> untuk media playback
* Mendukung penyimpanan lokal
* Tag khusus, <article>, <footer>, <header>, <nav>, <section>
* Kontrol barn pada form, seperti kalender,tanggal, waktu, email, url, dan search
Tabel 3 tag-tag dalam HTML 5
Tag
.
Deskripsi
<!- ... ->
mendefinisikan komentar
<!DOCTYPE>
mendefinisikan jenis document
<a>
mendefinisikan hyperlink
<area>
mendefinisikan area
<article>*
mendefinisikan artikel
<aside>*
mendefinisikan content selain content halaman
<audio>*
mendefinisikan audio
<b>
mendefinisikan text tebal
<body>
mendefinisikan element body
<br>
mendefinisikan baris baru
<button>
mendefinisikan document button/tombol
<canvas>*
Mendefinisikan document grafis
<caption>
mendefinisikan document table caption
<col>
mendefinisikan atribut untuk kolom table
<colgroup>
mendefinisikan kolom table
<command>*
mendefinisikan perintah tombol
<datalist>*
mendefinisikan dropdown list
<dd>
mendefinisikan definisi deskripsi
<del>
mendefinisikan text yang di hapus
<details>*
mendefinisikan suatu elemen
<dialog>*
mendefinisikan dialog (conversation)
<div>
mendefinisikan bagian dalam suatu document
<dl>
mendefinisikan daftar
<dt>
mendefinisikan istilah
<em>
mendefinisikan text rapat
<embed>*
mendefinisikan external content
<fieldset>
mendefinisikan fieldset
<figure>*
mendefinisikan isi media, dan keterangan
<footer>*
mendefinisikan bagian footer
<form>
mendefinisikan formulir
<h I> sampai <h6>
mendefinisikan header
<head>
mendefinisikan informasi tentang document
<header>*
mendefinisikan sebuah header untuk bagian suatu halaman
<hgroup>*
mendefinisikan informasi tentang bagian sebuah document
<hr>
mendefinisikan garis horisontal
<html>
mendefinisikan document html
<i>
mendefinisikan text italic
<iframe>
mendefinisikan inline sub frame
<img>
mendefinisikan gambar
<input>
mendefinisikan input
<keygen>*
mendefinisikan sebuah kunci yang dihasilkan dalam bentuk
<label>
mendefinisikana label untuk form
<legend>
mendefinisikan judul di fieldset
<li>
mendefinisikan list
<link>
mendefinisikan refrensi sumber
<map>
mendefinisikan peta gambar
<mark>*
mendefinisikan text yang ditandai
Pokok Bahasan II
CSS (Cascading Style Sheet)
A. Tujuan
1. Mahasiswa mampu membuat style sheet pada dokumen HTML
2. Mahasiswa memahami aturan penulisan pada CSS
3. Mahasiswa mampu membuat layout website dengan CSS
B. DasarTeori
Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa
komponen dalams ebuah web sehingga akan lebih terstruktur dan seragam.
CSS bukan merupakan bahasa pemrograman.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word
yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext,
footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam
beberapa berkas (file).
Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang
dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran
gambar, warna bagian tubuh pada teks, warna table, ukuran border, warna
border, warna hyperlink, warna mouse over, spasiantar paragraph,
spasiantarteks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS
adalahbahasa style sheet yang digunakan untuk mengatur tampilan dokumen.
Dengan adanya CSS memungkinkankitauntukmenampilkanhalaman yang
samadengan format yang berbeda.
Sejarah CSS
Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat
diletakkan secara berurutan, yang kemudian membentuk hubungan ayah-anak
(parent-child) pada setiap style. CSS sendiri merupakan sebuah teknologi
internet yang direkomendasikan oleh World Wide Web Consortium atau W3C
padatahun 1996. Setelah CSS distandarisasikan, Internet Explorer dan
Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak
hampir mendekati dengan standar CSS.
Versi
Untuk saat ini terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1
dikembangkan berpusat pada pemformatan dokumen HTML, CSS2
dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa
ditampilkan di printer, sedangkan CSS3 adalah versi terbaru dari CSS yang
mampu melakukan banyak hal dalam desain website. CSS3 mendukung
penentuan posisi konten, downloadable, huruf font, tampilan pada table /table
layout dan media tipeuntuk printer. Kehadiran CSS yang ketiga diharapkan
lebih baik dari versi pertama dan kedua.
Pokok Bahasan III
JAVA SCRIPT
A. Tujuan
1. Memahami tentang struktur javascript.
2. Memahami tentang pemrograman di javascript.
3. Memahami tentang pemakaian object dan form.
B. Dasar Teori
Javascript adalah bahasa script yang ditempel pada kode HTML dan diproses
disisi klient. Dengan adanya bahasa ini, kemampuan HTML menjadi semakin
luas. Contoh: untuk menvalidasi masukan pada formulir sebelum formulir dikirim
ke server.
Javascript bukan bahasa java dan merupakan dua bahasa yang berbeda. Javascript
diinterpretasikan oleh klient, sedang java dikompilasi oleh program dan hasil
kompilasinya dijalankan oleh clien.
Struktur Javascript
<script language=”javascript”>
<!—
Penulisanjavascriptkode
//-->
</script>
Keterangan <!--//--> umumnya disertakan dengan tujuan agar sekiranya browser
tidak mengenali javascript maka browser akan memperlakukannya sebagai
komentar sehingga tidak di tampilkan dijendela browser
Pokok Bahasan IV
PHP
A. Tujuan
1. Mengenalkan kepada mahasiswa tentang pemrograman PHP.
2. Mahasiswa mampu memahami Instalasi Apache dan PHP.
3. Memahami tentang struktur control.
4. Mahasiswa dapat membuat halaman web dengan menggunakan script HTML
dan PHP.
B. Dasar Teori
PHP (preprocessor Hypertext) adalah bahasa scripting yang menyatu dengan
HTML dan dijalankan pada server side. Artinya semua sintaks yang diberikan
akan sepenuhnya dijalankan pada server sedangkan yang dikirimkan ke
browser hanya hasilnya saja berupa HTML. Untuk membedakan perintah
HTML dan PHP digunakan tanda <? … ?>atau<?php … ?>
PHP dapat diaplikasikan dengan berbagai macam database, seperti MySQL,
PostgreSQL,, Oracle, dan lannya.
DESAIN WEB MOBILE DENGAN JQUERY MOBILE
A. Tujuan
1. Mahasiswa memahami tentang jQuery mobile
2. Mahasiswa memahami interkoneksi antar halaman
3. Mahasiswa memahami pembuatan aplikasi jQuery
4. Mahasiswa mampu menampilkan aplikasi yang dibuat di emulator mobile
B. Dasar Teori
jQuery Mobile adalah framework berbasis jQuery yang memudahkan kita
untuk membuat web app untuk mobile. Selain
jQuery mobile sebenarnya banyak framework
lain yang dapat digunakan seperti Sencha,
jTouch, DHTMLX Touch, Jo dan lainnya.
Kelebihan jQuery adalah:
1. Support banyak platform: Webkit (Android, iOS, Opera, Chrome), Firefox
mobile, Windows Phone, Blackberry, Bada, Meego.
2. Berbasis JQuery yang populer.
3. Penggunanya banyak dan forum aktif.
jQuery Mobile menyediakan komponen UI widget seperti button, listview,
header dan elemen form dan navigasi. Kode ini dibangun oleh jQuery dan terus
dikembangkan oleh pengembangnya secara aktif untuk memperbaiki bug-bug
yang ada diaplikasi ini. Banyak fitur yang ditawarkan dalam frame work kini
termasuk dukungan HTML5, Ajax-powered navigasi link,dan sentuhan/atau
navigasi gesekan.
