IKG3A3 / Software Project II

Ukuran: px

Mulai penontonan dengan halaman:

Download "IKG3A3 / Software Project II"

Ratna Kartawijaya
7 tahun lalu
Tontonan:

1 IKG3A3 / Software Project II Mahmud Imrona, M.T. Izzatul Ummah, M.T. Kelompok Keahlian Algoritma dan Komputasi LECTURE NOTE WEEK 2 1 8/25/2015

2 WEEK 2 HTML 2 8/25/2015 IKG3A3 - Software Project II

3 HTML HTML = HyperText Markup Language Penemu: Tim Berners-Lee (fisikawan Inggris) pada 1991 HTML adalah bahasa berbasis tag yang digunakan untuk membuat website statis. Referensi:

4 HTML Berikut adalah contoh file HTML. Copy-paste barisbaris berikut ini ke notepad, beri nama index.html, lalu buka pakai browser misalnya Chrome atau Firefox. <!DOCTYPE html> <html> <body> <font=arial><h1>contoh Judul</h1></font> <p>contoh paragraph baru.</p> <h1>blablabla</h1> </body> </html>

5 HTML Tampilan yang muncul adalah sbb:

6 TAG HTML Tag TAG PENJELASAN <HTML> Tag HTML <HEAD> Tag HEAD <BODY> Tag BODY <H1> Untuk membuat heading/judul <H2> Untuk membuat subheading/subjudul <P> Untuk membuat paragraf baru <BR> Untuk membuat baris baru <TABLE> Untuk membuat tabel <TR> Untuk membuat baris di dalam tabel <TD> Untuk membuat kolom di dalam tabel <LI> Untuk membuat list <OL> Untuk membuat item ordered pada list <UL> Untuk membuat item unordered pada list <A href> Untuk membuat link ke halaman lain <IMG> Untuk menampilkan file image/gambar Masih banyak lagi tag-tag lainnya: baca

7 HTML Cara mempelajari dan mengeksekusi contohcontoh yang ada di Copy contoh source code yang ada ke file notepad, lalu simpan dengan format xyz.html Buka dengan browser. Edit file itu dengan notepad bila ingin memodifikasi sourcecode di dalamnya. Buka/refresh kembali halaman itu dengan browser. Pelajari dan pahami contoh-contoh sourcecode tersebut.

8 HTML 5 HTML5 adalah pengembangan dari HTML. Referensi: Berikut adalah contoh-contoh tag HTML5. TAG <AUDI O> <VIDE O> <FIGU RE> <NAV> PENJELASAN Mengembed file audio Mengembed file video Mengembed file gambar Membuat navigation link Dan masih banyak lagi. baca ments.asp

9 HTML5 Berikut adalah contoh HTML5 (copy ke notepad, jangan lupa sesuaikan nama file mp4/ogg). <!DOCTYPE HTML> <html> <body> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Bila video tidak muncul, berarti browser Anda tidak support video tag. </video> </body> </html>

10 CSS CSS digunakan untuk membuat template tampilan desain web Anda agar lebih terstruktur dan menarik. Referensi:

11 CSS Contoh CSS file: body{ background-color:#d0e4fe; } h1{ color:orange; text-align:center; } p{ font-family:"times New Roman"; font-size:20px; }

12 JAVASCRIPT Javascript adalah client-side script yang dapat digunakan untuk membuat web menjadi lebih interaktif. Referensi:

13 JAVASCRIPT Contoh Javascript: <!DOCTYPE html> <html> <head> <script> function showtanggal(){ document.getelementbyid("coba").innerhtml=date(); } function hidetanggal(){ document.getelementbyid("coba").innerhtml="hilang"; } </script> </head> <body> <h1>latihan JavaScript</h1> <p id="coba">ini paragraf baru.</p> <button type="button" onclick="showtanggal()">show</button> <button type="button" onclick="hidetanggal()">hide</button> </body> </html>

14 JQuery Referensi: Berikut adalah contoh script JQuery: $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); Silakan baca referensi dan pelajari sendiri.

15 PENUTUP Materi HTML, PHP, MySQL, Javascript, CSS, JQuery yang akan diberikan di kuliah ini sangat singkat, hanya kulitnya saja. Jadi Anda harus mempelajari sendiri dari berbagai sumber atau tanya-tanya ke mahasiswa Informatika. Referensi utama:

16 TUGAS PEKAN INI Buatlah web sederhana yang menyediakan fungsifungsi berikut: Konversi suhu antara Celcius, Fahrenheit, Reamur, Kelvin. Spesifikasi: Hanya menerapkan HTML, Javascript, dan CSS (tanpa PHP). Gunakan input textbox dan tombol/button. Anda juga boleh menambahkan link image/gambar untuk membuat web Anda semakin menarik. Tidak perlu mengakses ke MySQL.

17 17 8/25/2015 THANK YOU

dokumen-dokumen yang mirip

HTML (HyperText Markup Language)

HTML (HyperText Markup Language) IMS HTML HyperText Markup Language adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah