MATERI PERKULIAHAN REKAYASA PERANGKAT LUNAK DISUSUN OLEH : KRISTIAWAN NUGROHO, M.KOM Fakultas Kesehatan
INTRODUCING (PERKENALAN) Nama : Kristiawan Nugroho, S.Kom, M.Kom Alamat : Jl. Emerald Asri III A3 No 86 Bukit Emerald Jaya Tembalang Telepon : 087832880650 , PIN BB : 25E94348 Pendidikan : S1- Sistem Informasi UDINUS (1997) S2-Teknik Informatika UDINUS (2007) Pekerjaan : 1. Pengajar Universitas Semarang (USM) 2. Pengajar UDINUS (FE,FKM) 3. Pengajar AMIK JTC & ALFABANK 4. Distributor Alat Peraga PAUD & TK 5. Distributor Mebel&Kerajinan Jati Blora
Kehadiran min 75% dalam 1 semester KONTRAK KULIAH Sistem Penilaian meliputi unsur : Nilai Ujian Mid Semester (MID) : 30 % Nilai Ujian Akhir Semester (UAS) : 40 % Nilai Tugas + Keaktifan +Absensi : 30 % Kehadiran min 75% dalam 1 semester
MATERI PERKULIAHAN 1. Pengertian HTML,Pengenalan struktur HTML 2. Web Browser & Cara menjalankan file HTML 3. Text Format dalam HTML (Font,Pre,BR,HR,dsb) 4. Hyperlink 5. Format Image (Gambar), Order List,Unorder List 6. Format Table & Frame 7. Form Input & Dasar PHP MySQL 8. Tugas Akhir (PROJECT) 9. Hosting / Upload file ke Internet
HTML HTML adalah sebuah bahasa pemrograman yang digunakan untuk membuat sebuah halaman Web. Untuk menulis kode HTML digunakan editor teks seperti NotePad atau FrontPage. Penulisan HTML:
HTML Nama tag ditulis di dalam tanda < dan >. Antara nama tag dan tanda < ditulis tanpa spasi sama sekali. Nama tag boleh ditulis dengan huruf kecil, huruf kapital, ataupun kombinasi antara huruf kecil dan huruf kapital. Dengan kata lain, penulisan : Contoh : <HTML> <html> <Html>
HTML Cara menjalankan HTML : Ketik program diatas simpan dengan nama latih1.html atau latih1.htm
HTML Buka web browser anda : IE / Mozzila / Chrome Misal dengan internet explorer sbb : Pilih File – Open – Browse (bukalah file latihan anda) KLIK
TAG HTML TAG <BR> Fungsi tag <BR> adalah untuk membuat baris baru atau berpindah baris. Contoh :
TAG HTML TAG <P> Tag <P> digunakan untuk membuat paragraf. Contoh :
TAG HTML Pengaturan perataan dalam tag <P>
TAG HTML Untuk dapat membuat paragraph dalam HTML Anda bisa menggunakan tag <P> dan diakhiri dengan </P> <P ALIGN=“LEFT”> - Paragrap rata Kiri <P ALIGN=“CENTER”> - Paragrap rata Tengah <P ALIGN=“RIGHT”> - Paragrap rata Kanan
TAG HTML Buat program dengan tag P dengan tampilan sbb:
TAG HTML HTML menyediakan 6 buah tag yang digunakan untuk mengatur ukuran teks yang dijadikan sebagai judul dalam badan dokumen. Tag-tag judul ini berupa: <H1> ... </H1> <H2> ... </H2> <H3> ... </H3> <H4> ... </H4> <H5> ... </H5> <H6> ... </H6>
TAG HTML Contoh :
TAG HTML Perataan TAG Judul
TAG HTML TAG <HR> Berguna membuat garis horisontal untuk mempercantik halaman web
TAG HTML TAG <CENTER> Untuk menengahkan suatu teks.
TAG HTML <PRE>…</PRE> Digunakan untuk menampilkan teks sama seperti yang Anda ketikan dalam dokumen HTML. Buat tampilan HTML sbb:
TUGAS Buatlah 4 buah paragraf(isi bebas,1 paragraf minimal 4 baris kalimat) dengan HTML dg ketentuan sbb: Paragraf 1 menggunakan Font times new roman 12 Paragraf 2 menggunakan Font Tahoma 12 Paragraf 3 menggunakan Font Arial black 12 Paragraf 4 menggunakan Font Verdana 12 Rapikan tampilan paragraf anda dengan tag2x HTML!
MENGATUR TEKS
MENGATUR TEKS
MENGATUR FONT TAG dalam HTML menggunakan <FONT>… </FONT> Penambahan FACE digunakan menentukan jenis font
MENGATUR FONT FONT SIZE digunakan menentukan ukuran font
MENGATUR FONT FONT COLOR untuk menentukan warna font Tabel warna
MENGATUR FONT Contoh aplikasi FONT
MENGATUR FONT Menambahkan warna latar belakang (BACKGROUND)
MEMBUAT LINK Untuk membuat link ke halaman lain, digunakan pasangan tag <A>…</A> atau yang biasa yang disebut tag jangkar atau anchor tag. Bentuk paling sederhana penggunaan tag jangkar adalah sebagai berikut : <A HREF = “URL”>Label</A> Dalam hal ini, URL (Uniform Resource Locator) dapat berupa alamat suatu dokumen Web, berkas grafik, ataupun menyatakan suatu protokol lain (misalnya FTP).
MEMBUAT LINK Buat 3 file html sbb:
MEMBUAT LINK Buat file halaman utama
MEMBUAT LINK Buatlah sebuah halaman web untuk menampilkan : DAFTAR MENU PT. ABC Data Barang Data Konsumen Cara pemesanan barang Daftar perusahaan mitra
TABLE
TABLE Menggabungkan sel Untuk menggabungkan beberapa baris sel, digunakan atribut ROWSPAN pada tag <TD>
TABLE Untuk menggabungkan beberapa sel dalam satu baris, digunakan atribut COLSPAN pada tag <TH> atau <TD>
TABLE Penggunaan ALIGN
TABLE Mengatur tinggi sel Untuk mengatur tinggi table, digunakan atribut HEIGHT pada tag <TABLE>
TABLE Mengatur lebar tabel dan sel Atribut WIDTH pada tag <TABLE> dapat digunakan untuk mengatur lebar table tanpa tergantung oleh ukuran jendela browser
MENAMBAHKAN GAMBAR Terkadang kita jumpai halaman Web dengan latar belakang berupa suatu gambar. Latar belakang seperti itu kadangkala mempercantik tampilan halaman Web. Untuk menyertakan suatu gambar sebagai latar belakang, dapat digunakan atribut BACKGROUND pada tag <IMG> <BODY BACKGROUND = ”NamaFileGambar”> Contoh : <BODY BACKGROUND = ”Caladium.jpg”>
MENAMBAHKAN GAMBAR Memberi bingkai gambar Dengan menggunakan atribut BORDER pada tag <IMG>, Anda bisa mengatur agar gambar ditampilkan dengan diberi bingkai. Contoh <IMG SRC = ”RedFlash.gif” ALIGN = ”RIGHT” BORDER = “1”> Mengatur ukuran Gambar <IMG SRC = ”RedFlash.gif” HEIGHT = “150” WIDTH = ”150”>
FRAME Frame memungkinkan satu halaman Web atau lebih ditampilkan pada sebuah jendela browser Untuk mempraktikan frame, buatlah terlebih dulu dua buah berkas HTML bernama framekir.htm dan framekan.htm
FRAME
FRAME Frame horisontal
FRAME Gabungan frame vertikal & horisontal
MENGGUNAKAN FORM Form dibentuk dengan menggunakan pasangan tag <FORM> dan </FORM> Dua atribut yang umum digunakan pada tag <FORM> berupa ACTION dan METHOD
MENGGUNAKAN FORM Memasukkan data dengan tag <INPUT> Tag <INPUT> digunakan untuk melakukan pemasukan data dan letaknya berada dalam pasangan tag <FORM> dan </FORM>
MENGGUNAKAN FORM Tipe TEXT bermanfaat untuk memasukkan data seperti nama orang atau alamat seseorang. Contoh pemakaian : <INPUT TYPE = “TEXT” NAME = “nama_pegawai” SIZE= “20” MAXLENGTH = “20”> <INPUT TYPE = “TEXT” NAME = “nama_pegawai” SIZE= “20” MAXLENGTH = “20” VALUE = “Isi dengan nama Anda”>
MENGGUNAKAN FORM Tipe SUBMIT pada tag <INPUT> akan membentuk tombol Submit, yaitu tombol yang menyebabkan URL yang disebutkan pada ACTION pada tag <FORM> akan dimuat. Contoh penulisan kode dengan tombol Submit yang paling sederhana : <INPUT TYPE = “SUBMIT”>
MENGGUNAKAN FORM Contoh program :
MENGGUNAKAN FORM Tipe PASSWORD yang disebutkan pada atribut TYPE pada tag <INPUT> akan membuat setiap karakter yang diketikkan oleh pemakai pada field ini disembunyikan (misalnya dengan diganti tanda * untuk setiap karakter yang diketikkan pemakai)
MENGGUNAKAN FORM Contoh program :
MENGGUNAKAN FORM Tipe CHECKBOX berguna untuk membuat kotak cek. Dengan masukan yang memungkinkan pemakai mencentang atau tidak mencentang kotak tersebut dengan mengklik mouse pada saat penunjuk mouse menunjuk kotak cek.
MENGGUNAKAN FORM Tombol radio digunakan dalam bentuk 2 tombol atau lebih yang memungkinkan pemakai hanya memilih satu dari sekian tombol. Tombol radio diimplementasikan dengan menggunakan tag <INPUT> dengan atribut TYPE diberi nilai “RADIO”.
MENGGUNAKAN FORM Contoh program: