Embed Size (px)
Citation preview
Aplikasi Internet Menggunakan HTML, CSS dan JavaScript
(Digunakan di lingkungan sendiri, sebagai Modul Praktikum
mata kuliah Komputer Aplikasi IT)
Fakultas Teknik dan Ilmu Komputer
Program Studi Sistem Informasi
Universitas Komputer Indonesia
1. Pertemuan 1
1.1. Sistem Perkuliahan
a. Perkuliahan diselenggarakan 14 kali pertemuan (2 SKS)
b. Wajib kehadiran Mahasiswa 80% (-3 kali tidak masuk)
c. Materi perkuliahan akan diberikan salinannya kepada Mahasiswa
d. Mahasiswa dianjurkan membawa flashdisk
e. Batas keterlambatan 15 menit setelah perkuliahan dimulai
f. Mahasiswa diperbolehkan berkonsultasi dengan dosen; mengenai materi perkuliahan secara
personal atau kelompok di luar jam perkuliahan (tatap muka; via email; kuliah online)
g. Mengikuti tata tertib Lab
h. Tidak diperbolehkan menggunakan perangkat komunikasi selama perkuliahan (setting
silent/vibrate)
i. Bersikap sopan dan tidak mengganggu keberlangsungan perkuliahan
j. Tersedia waktu Shalat bagi yang beragama Islam.
1.2. Silabus
1.3. Perkenalan Matakulah
a. Deskripsi Matakuliah
Matakuliah ini membahas tentang bagaimana membangun sebuah web statis dengan memanfaatkan
Hypertext Markup Language (HTML), CSS dan Java Script. Lalu bagaimana mengelola web dan
sampai pada akhirnya bagaimana upload ke internet.
b. Arsitektur Web
c. Jenis-jenis web
Web Statis
Web Statis adalah web yang content atau isinya tidak berubah – ubah. Maksudnya adalah isi
dari dokumen yang ada di web tersebut tidak dapat diubah secara mudah. Ini dikarenakan karena
script yang digunakan untuk membut web statis tidak mendukung untuk mengubah isi dokumen.
Client – Side [ HTML – CSS ]
Web Dinamis
Web Dinamis adalah Web yang content atau isinya dapat berubah – ubah setiap saat. Karena dalam
teknologi pembuatan web dinamis sudah dirancang semudah mungkin bagi user yang menggunakan
web dinamis tersebut.
d. Latihan
2. Pertemuan 2
2.1. Internet
Internet merupkan jaringan global yang menghubungkan suatu network dengan network lainya di
seluruh dunia, TCP/IP menjadi protocol penghubung antara jaringan-jaringan yang beragam di
seluruh dunia untuk dapat berkomunikasi.
WWW sering dianggap sama dengan Internet secara keseluruhan, walaupun sebenarnya ia hanyalah
bagian daripada Internet.
WWW merupakan kumpulan penyedia web dari seluruh dunia yang mempunyai kegunaan untuk
menyediakan data dan informasi untuk dapat digunakan bersama.
WWW bekerja merdasarkan pada tiga mekanisme berikut:
• Protocol standard aturan yang di gunakan untuk berkomunikasi pada computer networking,
Hypertext Transfer Protocol (HTTP) adalah protocol untuk WWW.
• Address WWW memiliki aturan penamaan alamat web yaitu URL(Uniform Resource
Locator) yang di gunakan sebagai standard alamat internet.
• HTML digunakan untuk membuat document yang bisa di akses melalui web.
2.2. HTML
a. Pengenalan HTML
Hypertext Markup Language merupkan standard bahasa yang di gunakan untuk menampilkan
dokumen web. secara umum, fungsi HTML adalah untuk mengelola serangkaian data dan informasi
sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui layanan web.
Fungsi HTML Lebih Spesifik :
• Mengontrol tampilan dari web page dan contentnya.
• Menampilkan berbagai informasi di dalam sebuah browser Internet.
• Menambahkan object-object seperti image, audi, video dan juga java applet dalam document
HTML.
b. Struktur HTML Document
Command HTML biasanya disebut TAG, TAG digunakan untuk menentukan tampilan dari dokumen
HTML.
HTML : Setiap dokumen harus diawali dan diakhiri tag HTML. <HTML> </HTML>
<BEGIN TAG> ... </END TAG>
HEAD : Bagian header dari document HTML di apit oleh tag <HEAD></HEAD> di dalam
bagian ini biasanya dimuat tag TITLE dan META.
BODY : Document body di gunakan untuk menampilkan text, image link dan
semua yang akan di tampilkan pada web page. <BODY></BODY>
c. Basic HTML Element (Block Level Element & Paragraf)
Contoh Block level element yang sering di gunakan : Heading (H1 sampai H6)
Contoh Block level element yang sering di gunakan :
Tulis script html di dalam file yang sama(lat-1.html), dibawah <hr>
Basic HTML Element (Block Level Element)
<html>
<head>
<title>Heading dan Paragraf</title>
</head>
<body>
<!-- Latihan Heading -->
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<hr>
</body>
</html>
KETERANGAN
NAMA FILE : lat-1.html DIR : D:/NIMANDA
<!-- Latihan Heading --> : komentar “Tulisan yang tidak akan dieksekusi oleh browser”
3. Pertemuan 3
3.1. List
List item di gunakan untuk mengelompokkan data baik berurutan
(ordered list) maupun yang tidak berurutan (unordered list).
Contoh: Kita mau mengelompokkan data-data berikut :
Melati
Mawar
Anggrek
Tulis script html di dalam file yang sama(lat-2.html)
KETERANGAN
NAMA FILE : lat-2.html DIREKTORI : D:/NIMANDA
<!-- latihan list-->
<br>
<h3>Bunga</h3>
<ul type=“Circle”>
<li>Melati</li>
<li>Mawar</li>
<li>Anggrek</li>
</ul>
3.2. Font
Dengan tag / element <FONT> kita bisa menentukan format tampilan font dalam document HTML
seperti color, size, style dan lainya.
3.3. Color
Color merupakan attribute yang bisa anda tambahkan pada beberapa element seperti body, font, link
dan lainya.
Color di bagi dalam tiga ketegori warna primer yaitu red, green dan blue.
Masing-masing color didefinisikan dalam dua digit hexadecimal number.
3.4. Aligment
Align attribute digunakan untuk menentukan perataan object dalam document HTML baik berupa
text, object, image, paragraph, division dan lain-lain.
#RRGGBB
3.5. Format Text
Untuk membuat indentasi paragraph kita bisa menggunakan BLOCKQUOTE, untuk indentasi pendek
anda bisa gunakan element Q.
4. Pertemuan 4
4.1. Grouping element
a. Division (DIV)
Div /Division adalah suatu element yang di gunakan untuk mengelompokan suatu element atau tag
tag agar menjadi suatu group, meskipun tag / element dalam div itu sendiri.
Style background ini anda gunakan untuk memberikan warna latar apa saja yang anda inginkan ke
dalam tag HTML div. Tambahkan style di dalam tag div, seperti di bawah ini :
Sama hal nya dengan font color sebelumnya, style ini untuk memberi warna terhadap font. Cara
penulisannya : color : kode warna Tambahkan style di dalam tag div, seperti di bawah ini :
Untuk mengatur tulisan rata kiri, rata kanan, sama rata, atau di tengah.
Cara Penulisan = text-align: posisi Tambahkan style di dalam tag div, seperti di bawah ini :
BUAT FILE : LAT-4.HTML
SIMPAN DI FOLDER LATIHAN ANDA | LALU KETIKAN SCRIPT DIBAWAH INI
b. Span
Tag span hampir sama dengan tag div di atas. Namun perbedaanya, span ini termasuk inline style.
Secara garis besar, tag dalam HTML dapat dibagi menjadi 2 jenis, yaitu Block-line dan In-line. Jenis
tag Block-line atau Block-style yaitu tag yang secara otomatis menambahkan spasi (enter) di akhir
tag. Sedangkan In-Line Sebaliknyua
4.2. Hyperlink
Absolute Address - merupakan full internet address (URL) yang meliputi protocol, network location
dan path dan nama file. Contoh:
http ://www.yahoo.com/index.html
Relatif Address - URL yang tidak menyebutkan protocol dan network locationya (hanya path dan
nama filenya).
Anchor tag <A> untuk menentukan hyperlink dalam document HTML.
HREF property digunakan untuk menentukan tujuan dari hyperlink tersebut.
CONTOH PENULISAN : <A HREF=”URL”> Hypertext </A>
5. Pertemuan 5
5.1. Image
a. Format Image
Ada banyak format image, tapi ada tiga jenis format yang paling sering di gunakan :
• GIF (Graphical Interchange Format) (.GIF)
• JPEG (Joint Photographic Expert Image) (.JPG)
• PNG (Portable Network Graphics)
Tag IMG di gunakan untuk menginsertkan image ke document HTML. Syntax nya:
b. Insert Image
- Cari 1 image berekstensi .jpg /.png /.gif di komputer masing-masing. Contoh
(C:\Users\Public\Pictures\Sample Pictures\Desert.jpg)
- Copy image tersebut lalu paste di folder latihan masing-masing.
- Buat 1 buah file latihan dengan nama lat-6.html. Masukan script dibawah ini :
<IMG SRC = “URL”>
<html>
<head>
<title>Image dan Frame</title>
</head>
<body>
<img src="Desert.gif">
</body>
</html>
5.2. Frame
Frame dapat digunakan untuk berbagai macam keperluan, antara lain:
1. Membuat suatu daftar isi pada suatu sisi frame, sedangkan sisi frame yang lain menampilkan isinya
2. Membuat suatu judul atau logo yang tidak berubah-ubah pada suatu sisi frame, sedangkan sisi
frame yang lain menampilkan isis dokumen
3. Membuat suatu dokumen tanya jawab, dll.
Ikuti langkah berikut :
1. Buat folder di dalam direktori latihan masing-masing dengan nama frame.
2. Buat beberapa file html, diantarnya :
a. Frame untuk header
Nama file : atas.html, Masukan Script Berikut :
b. Frame untuk menu
Nama file : kiri.html, Masukan Script Berikut :
c. Frame untuk kontent
Nama file : tengah.html, Masukan Script Berikut :
d. Frame untuk index
Nama file : index.html, Masukan Script Berikut :
LATIHAN
6. Pertemuan 6
Pengenalan Form Input
Form, singkatan dari Formulir merupakan suatu kolom yang biasanya dapat digunakan sebagai
pengumpulan data, baik itu data di exel ataupun form yang berada di website kita. Contohnya saja
form login, form komentar, form kontak, dan form yang digunakan untuk pengguna atau user. Tak
jarang form juga digunakan untuk mentransfer data antar halaman web 1 ke halaman web yang lain.
Tag form ditulis dengan tag berikut :
Tag inti formulir adalah <form> </form>. Didalam form terdapat komponen-komponen form.
Atribut
name : nama form, bersifat unik
action : aksi ketika form diproses
method : metoda proses dari form (post/get)
Contoh :
<form name=“Form1” method=“post” action=“output.php”>
komponen form 1
komponen form 2
...
komponen form n
</form>
HTML Input element
Terdapat beberapa element input pada html, diantarnya :
• Element INPUT,
<form>....</form>
Nama file : lat-7.html
RADIOBUTTON +
CHECKBOX Lanjutkan
dibawah textfield
Lanjutkan dibawah Hobby
Latihan
7. Pertemuan 7
7.1. Konsep dasar CSS
Definisi
Cascading Style Sheets (CSS) adalah suatu teknologi yang digunakan untuk memperindah halaman
website (situs). Dengan CSS kita dapat dengan mudah mengubah keseluruhan warna dan tampilan yg
ada di situs kita sekaligus memformat ulang situs kita. CSS ini telah distandarkan oleh World Wide
Web Consortium (W3C) untuk digunakan di web browser.
Keuntungan CSS
Kode HTML menjadi lebih sederhana dan lebih mudah diatur,
Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,
Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,
Dapat berkolaborasi dengan JavaScript.
Digunakan dalam hampir semua web browser.
7.2. CSS properties
Perbedaan antara atribut ID dan CLASS pada CSS adalah pada tingkat penggunaannya; ID sebaiknya
digunakan sebagai identitas yang unique, seperti
Logo
Header
Footer
Left Sidebar
Right Sidebar
Sedangkan CLASS digunakan untuk menandai atribut yang lebih sepesifik seperti ketebalan
border (garis pinggir),
Kode Warna
paragraph
jenis font
ukuran font.
8. Pertemuan 9
HTML Multimedia
• Multimedia mempunyai banyak format berbeda.
• Multimedia berupa sesuatu yang dapat didengar atau dilihat.
• Contohnya: teks, gambar, musik, suara, video, film, animasi, dan lainnya.
• Pada Internet sering kita lihat elemen multimedia ditempelkan pada halaman web.
Web browser modern telah mendukung sejumlah format multimedia. Untuk menjalankan hal tersebut,
web browser membutuhkan sebuah plugin :
• Plugin adalah program kecil yang memperluas fungsionalitas standar pada web browser.
• Plugin dapat digunakan untuk bermacam-macam tujuan: memainkan musik, menampilkan peta,
verivikasi bank id, dan lain-lain.
• Plugin dapat ditambahkan ke halaman HTML menggunakan tag <object> atau <embed>.
Pada tag audio, ada beberapa attribut yang bisa dimasukkan:
autoplay berfungsi agar audio otomatis di-play setelah siap untuk dimainkan controls berfungsi
menampilkan tombol play,pause,volume, dll. loop berfungsi agar audio dimainkan berulang-ulang
muted apakah audionya mau di-mute atau tidak preload (auto, metadata, none) apakah audionya load
pada saat pagenya sedang diload? src menunjukkan URL dari audio yang akan dimainkan (yang ini
tidak diperlukan kalau sudah ada <source>) <source> berfungsi untuk memainkan audio yang dipilih,
file audio harus bertipe ogg (audio/ogg) atau wav (audio/wav) atau mp3 (audio/mpeg).
CARI FILE BEREKSTENSI .MP3 PADA KOMPUTER ANDA, LALU TAMBAHKAN SCRIPT PEMUTAR AUDIONYA, DIDALAM FILE MULTIMEDIA.HTML
Format video harus mp4 atau webM atau ogg (lagi, setiap browser mendukung format yang berbeda-
beda) Untuk properti, semuanya sama dengan untuk <audio>, hanya saja ada beberapa properti yang
ada di <video> tapi tidak ada di <audio> width & height untuk mendefiniskan lebar dan tinggi video
poster mendefinisikan URL gambar yang akan dimunculkan saat videonya sedang buffer, atau
sebelum di-play oleh user
Nampilkan Suara
<bgsound src=“namafile.ext”>
Contoh :
<bgsound src=“instrumen.mp3”>
9. Pertemuan 10
Dasar-dasar pengenalan JS
Javascript adalah bahasa script yang ditempelkan pada source HTML dan diproses di sisi klien.
Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi semakin luas.
Sebagai contoh, dengan menggunakan JavaScript dimungkinkan untuk memvalidasi masukan-
masukan pada formulir sebelum formulir dikirimkan ke server.
Javascript bukanlah bahasa Java dan merupakan dua bahasa yang berbeda. Javascript
diinterpretasikan oleh klien (kodenya bisa dilihat pada sisi klien), sedangkan kode Java dikompilasi
oleh pemrogram dan hasil kompilasinya yang dijalankan oleh klien.
DAFTAR PUSTAKA
1. Heryanto.I, 2010, Modul Pemrograman Web, Modula, Jakarta
2. Christopher.L, 2011, Refrensi Ringkas HTML5, Elex Media Komputindo, Jakarta
3. Jubilee.E, 2012, Buku Pintar HTML5+CSS3+Dream Weaver CS6, Elex Media Komputindo,
Jakarta
4. Madcoms, 2012, Aplikasi Pemrograman Javascript untuk halaman web, Andi, Jakarta
