Ari 03092010 - Modul TIK Pemrograman Web

MODUL ILMU KOMPUTER DASAR-DASAR PEMBUATAN WEBSITE Tujuan: Siswa dapat membuat desain/layout website menggunakan perangkat lunak desain dan pemrograman web. Materi: 1. Dasar-dasar HTML. 2. Desain Layout menggunakan CSS. 3. Desain Web menggunakan Dreamweaver. 4. Dasar-dasar RDBMS menggunakan MySQL. 5. Dasar-dasar Pemrograman Web menggunakan PHP. 6. Membuat website CMS sederhana. 7. Peblishing Website. Beberapa istilah yang sebaiknya Anda ketahui sebelum belajar HTML: 1. http. 2. url. 3. domain. 4. hosting. 5. browser. 6. server. 7. internet.

MODUL ILMU KOMPUTER by Zamah Sari, ST Subhanallah, Alhamdulillah, wa La Illaha Illallah, Allahhu Akbar. I saw the way of God through you, and I love you ^_^

PERTEMUAN 1 Bahan: 1. Bacalah Basmallah sebelum memulai pelajaran agar semua yang kita pelajari dapat bermanfaat, dan untuk yang beragama non islam silahkan berdoa menurut kepercayaan masing-masing. 2. Assalamualaikum wr. wb. Siapkan buku tulis dan peralatan tulis. 3. Nyalakan computer. 4. Siapkan mental untuk menjadi juara. Indikator Keberhasilan: 1. Siswa dapat membuat beberapa halaman website sederhana. 2. Siswa dapat membuat tabel dan pengaturannya. 3. Siswa dapat membuat beberapa halaman website yang dilengkapi dengan hyperlink, image dan link-image. HTML Dasar HTML adalah singkatan dari Hypertext Markup Language, dan merupakan bahasa pemrograman web yang digunakan untuk membuat halaman website. Untuk belajar HTML dasar sebaiknya Anda ketikkan menggunakan program Notepad. Bentuk umum dari HTML: Letakkan judul situs di sini Ini halaman situs Anda. Letakkan perintah-perintah HTML di sini. Ini halaman situs Anda. Letakkan perintah-perintah HTML di sini. Ini halaman situs Anda. Letakkan perintah-perintah HTML di sini. Ini halaman situs Anda. Letakkan perintah-perintah HTML di sini. Setelah diketikkan, Anda simpan dengan nama latihan01.html. Untuk mengeceknya Anda double click file yang telah Anda simpan. Sebenarnya Anda dapat menggunakan ekstensi .htm, tetapi supaya sama, maka sebaiknya digunakan ekstensi .html.


Judul situs di tampilkan ini (dalam html diletakkan diantara .....

Gambar 1.1 Hasil perintah HTML latihan01.html di browser Internet Explorer (IE) Coba Anda ketikkan perintah-perintah HTML berikut ini, kemudian Anda jalankan di browser ! Latihan Pertamaku Paragraf ini akan rata kiri
Paragraf ini akan rata kiri
Paragraf ini akan rata kiri
br digunakan untuk ganti baris

Kalimat ini akan dicetak Bold
Kalimat ini akan dicetak Italic
Kalimat ini akan dicetak Bold dan Italic
Perintah hr digunakan untuk membuat garis Simpan perkerjaan Anda dengan nama latihan02.html. Jika benar, seharusnya ditampilkan seperti berikut ini:


Gambar 1.2 Hasil dari latihan02.html Perhatikan perintah berikut ini: P pada perintah di atas disebut dengan tag, sedangkan align disebut dengan atribut dan left adalah nilai atribut. Atribut merupakan perintah yang menyertai suatu tag. Berikut beberapa perintah HTML dan fungsinya:Tag Atribut/Contoh penulisan text= ... link= ... vlink=... alink=... Home Yahoo! Click Hereto mail Me! Contoh Contoh

nama file gamber person.jpg, dengan lebar 50px, tinggi 50px, border 0, rata kiri dan jika gambar tidak dimunculkan pada browser akan tampil text PERSON PICTURE sebagai ganti gambar person.jpg

...

..

Mengatur font dengan ukuran 2, warna kuning dan jenis huruf Arial Mengatur text Contoh menjadi lebih besar. Mengatur text Contoh menjadi lebih kecil. Text Bold atau text menjadi tebal Text italink atau text menjadi miring Text Underline atau text dengan garis bawah Text tercoret Text heading, biasa digunakan untuk membuat judul pada halaman web, ada 6 tingkatan heading yang dapat digunakan. Garis dengan lebar 600px, tidak perlu closing tag. Garis berada ditengah lebar browser, dengan tebal 5 dan lebar 80% dari lebar browser. Paragraf rata tengah Ganti baris, tidak perlu closing tag. Membuat Superscript Membuat Subscript Membuat text berjalan, memiliki atribut direction, behavior dan lain-lain.

text text

TABLE Beberapa perintah penting untuk membuat tabel: 1. .... merupakan perintah utama dalam pembuatan tabel, tabel dengan ketebalan 1px. 2. ... tag untuk membuat baris. 3. ... tag untuk membuat kolom/cell. 4. colspanmerge/melebarkan kolom/cell. 5. rowspanmerge/melebarkan baris.


Atribut tabel dan fungsinyaTag Atribut/Contoh Penjelasan . Align=center Width=200 Valign=top Bordercolor=red Bgcolor=yellow Fungsi Ketebalan garis tabel Text dalam tabel rata tengah Lebar kolom tabel 200px Teks berada diatas kolom Warna garis tabel merah Background color kolom tabel kuning

Agar cell dalam tabell kosong, maka dapat digunakan perintah Contoh 1: Tulislah perintah HTML untuk membuat tabel seperti berikut ini: Satu Tiga Dua Empat

Jawab: Latihan Table Satu Dua Tiga Empat Contoh 2: Tulislah perintah HTML untuk membuat tabel seperti berikut ini: Satu Dua Jawab: Latihan Table Dua MODUL ILMU KOMPUTER by Zamah Sari, ST Subhanallah, Alhamdulillah, wa La Illaha Illallah, Allahhu Akbar. I saw the way of God through you, and I love you ^_^ Tiga

Satu Dua Tiga


Latihan Pertemuan 1 Tulislah perintah-perintah HTML-nya agar diperoleh bentuk tabel seperti berikut (1 tabel = 1 file): 1. 1 4 7 2. 1 3 6 3. 1 2 4 4. 1 5. 1 3 6. 1 2 4 3 5 6 2 2 3 5 3 6 2 4 5 7 2 5 8 3 6 9

7

8 9

10

Alhamdulillah, wasalamualaikum wr.wb.


PERTEMUAN 2 Bahan: 1. Bacalah Basmallah sebelum memulai pelajaran agar semua yang kita pelajari dapat bermanfaat, dan untuk yang beragama non islam silahkan berdoa menurut kepercayaan masing-masing. 5. Assalamualaikum wr. wb. Siapkan buku tulis dan peralatan tulis. 2. Nyalakan computer. 3. Siapkan mental untuk menjadi juara. Indikator Keberhasilan: 1. Siswa dapat memodifikasi halaman web ini dan memberikan sentuhan yang baru pada desainnya. 2. Siswa dapat membuat tabel dan pengaturannya dengan baik. 3. Siswa dapat membuat beberapa halaman website yang dilengkapi dengan hyperlink, image dan link-image Latihan Pertemuan 2 1. Ketikklah perintah-perintah HTML berikut, kemudian modifikasilah agar diperoleh tampilan yang maksimal ! Pahami setiap perintah/tag HTML-nya ! Latihan Pertemuan 2 SITUSKU.COM

Terdepan Dalam Berita dan Gosip Home Selamat Datang di SITUSKU.COM
Situsku.Com akan selalu konsisten dengan berita-berita terbaru dari segala penjuru Indonesia.

Dapatkan berita-berita menarik tentang: politik, hukum, keamanan, gossip artis dan kuliner di Indonesia.


2. Buatlah halaman situs dengan layout seperti berikut ini:

JUDUL.COMHome Profile Gallery SLOGAN HERE Konten/Isi Situs/Gambar

Copyright JUDUL.COM All Right Reserved 2010 Ketentuan: 1. Pengaturan halaman/format terserah Anda (ukuran, jenis font, warna dll) 2. Jumlah halaman = 3, denga ketentuan: a. halaman Home: berisi ucapan selamat datang, deskripsi situs Anda dll b. halaman Profile: berisi profil Anda, nama, kelas, alamat, tempat/tanggal lahir dll c. halaman Gallery berisi gambar-gambar yang berkaitan dengan situs Anda 3. Setiap halaman harus memuat hyperlink/link 4. Halaman Gallery wajib memuat gambar-gambar 5. Usahakan untuk menambahkan link-image pada halaman Gallery Alhamdulillah, wasalamualaikum wr.wb.


PERTEMUAN 3 Bahan: 1. Bacalah Basmallah sebelum memulai pelajaran agar semua yang kita pelajari dapat bermanfaat, dan untuk yang beragama non islam silahkan berdoa menurut kepercayaan masing-masing. 2. Assalamualaikum wr. wb. Siapkan buku tulis dan peralatan tulis. 3. Nyalakan computer. 4. Siapkan mental untuk menjadi juara. Indikator Keberhasilan: 1. Siswa dapat membuat berbagai macam list item LlST ITEM List item merupakan salah satu tag HTML yang digunakan untuk membuat proses pengurutan secara otomatis. Dalam Microsoft Office biasanya dikenal dengan istilah bullet dan numbering, yang tentunya sudah tidak asing lagi dengan istilah ini. List item dalam HTML dituliskan sebagai berikut: teks Terdapat dua jenis list item yang dapat digunakan dalam HTML yaitu 1. Ordered List 2. Unordered List Ordered List (List Terurut) Merupakan tag HTML yang digunakan untuk membuat proses pengurutan menggunakan angka atau huruf. Dalam Microsoft Office dikenal dengan numbering. Cara penulisan ordered list: list entries Type dapat diisi dengan: AA, B, C, .... aa, b, c, ... II, II, III, .... ii, ii, iii, ... 11, 2, 3, ... Secara default, type ordered list yang digunakan adalah pengurutan menggunakan angka 1.


Contoh: Ketiklah perintah-perintah HTML berikut kemudian amati hasilnya Ordered List Jeruk Semangka Melon Pepaya r .e gdkda h mun l< MLt a Rne n rm H t ey u hodntnle ut n irmnki . l i a a s k g due gd a y j u u mrtu u n p akun e na ,a ia n a s u k n a ndkt lrIU> julrmutb rt i ae Ngy u k pdU u aa etaTg n eimnt < n a a ofk a Pg a t rm e < R/R . FFd OOn M> irhi l p kBP.imrNUi> i dn i uiYu rmn : a aa u a imltet P-rIgyU yy t ex b l < h t < h e d a > >l t i t e h/ d a e > < < b o d > y mf o r< > >> tet tyt niN: a a nt=t t=t n< N ni f Adht ni < iC1" p b P" u r nc t< ak m" rho kb ae e= cp >y x >o1"t ni Ma p x y >P1"t ni G1"t ni x u rBd t< an m" uy h " c k b io e = p > kt iof a ae < u a n jP b: v r l r r a >kntr"dpt ni o i1= "e >kisF nr"dpt ni

Ari 03092010 - Modul TIK Pemrograman Web

Documents