Modul Design Pemrograman Web NEXT Materi Pertemuan ke

Modul Design & Pemrograman Web NEXT

Materi: Pertemuan ke 1, 2 Materi Konsep Dasar Web Design: o Perencanaan Web. Site o Typografi, Pewarnaan, Lay. Out / Tata Letak Teks & Dasar Tag HTML: o Heading o Paragraf o Font Table: o Create Table o Columns o Table Properties o Lay. Out with Table BACK NEXT

Materi: Pertemuan ke 3, 4. Materi Hyperlinks: o Teks Hyperlinks o Image Hyperlinks o Path Hyperlinks o Chage Hyperlinks Active Elements: o Marquee o Counter o Animation Graphics Bingkai: o Konsep Bingkai o Dokumen Tata Letak o Link & Target o Home Page Berbingkai BACK NEXT

Materi: Pertemuan ke- Materi 5. Ordered List & Unordered List Menggunakan Forms & Fields: o Pengenalan komponen forms o Form Methode (Get, Post) o Feedback Form 6. Pengenalan / Dasar CSS (Cascading Style Sheet) o CSS Inheritance 7. Pengenalan / Dasar CSS (Cascading Style Sheet) o CSS Contextual Selector 8. Pengenalan / Dasar CSS (Cascading Style Sheet) o CSS with Classes UJIAN TENGAH SEMESTER (UTS) UJIAN AKHIR SEMESTER (UAS) BACK NEXT

Materi: BACK Pertemuan ke- NEXT Materi 8. o Pengenalan PHP o Mengenal Variabel pada Web 9. o o Operator Aritmatika pada PHP Assignment pada PHP Perbandingan pada PHP Logika pada PHP 10. o Mengenal Bersyarat IF & CASE pada PHP o Mengenal Looping pada PHP o Array di PHP 11. o Include & Require o Manajemen Session 12. o Function di PHP o My. SQL dengan Php. My. Admin 13. o Menggabungkan Web Programming dengan Database My. SQL 14. Ujian tak terjadwal (KUIS II) UJIAN AKHIR SEMESTER (UAS) Daftar Pustaka: • Lukmanul Khakim, Cara Mudah Memadukan Web Design dan Web Programming, PT. Elex Media Komputindo, • Mac Bride, HTML Penerbitan di World Wide Web, Megapoin, Jakarta, 1997. Jakarta, 2003

Konsep Dasar Web Design o Perencanaan website Proses ini merupakan awal dalam merencanakan halaman web. Dimulai dengan mengumpulkan seluruh data serta informasi kemudian hasil akhirnya adalah sebuah “site map” lalu dimulai dengan merancang tata letak (Lay. Out) halaman, biasanya dilakukan mendesain tata letak halaman depan dan halaman kedua. Dalam mendesain halaman ini beberapa komponen penting biasanya masuk adalah content, rencana letak image, copyright/hak cipta (bagian footer), serta komponen website dan hal lain yang dianggap perlu (animasi, video, musik, dll). NEXT

Konsep Dasar Web Design BACK NEXT

Konsep Dasar Web Design o Desain Halaman Web Dasar Berdasarkan hal diatas selanjutnya kita mulai melakukan desain web dengan menterjemahkan perencanaan ke dalam software desain, keahlian yang mesti diperdalam adalah typografi (kemampuan memilih font yang tepat), tata letak halaman (menguasai kemampuan membagi ruang halaman), pewarnaan (menguasai konsep warna dan pemilihan warna berdasarkan warna perusahaan dan teori pencampuran warna). Software yang digunakan salah satunya Adobe Photoshop, dengan mempelajari pembuatan tombol/navigasi, background, bekerja dengan teks, manipulasi gambar/image, dan khususnya memperdalam teknik – teknik desain website. BACK NEXT

Konsep Dasar Web Design BACK NEXT

Dasar Skrip / Tag HTML Pertanyaan mendasar dari web designer pemula: o Sulitkah pemrograman HTML? . . o Apa yang dimaksud tag dalam HTML? . . . o Bagaimana belajar dari Design Web yang sudah ada? . . . BACK NEXT

Dasar Skrip / Tag HTML <html> <head> <title>Judul / Title</title> </head> <body> Isi / Content </body> </html> BACK NEXT

Dasar Skrip / Tag HTML Heading <html> <head> <title>Latihan 01</title> </head> <body> <h 1> Heading 1 - 24 Point </h 1> <h 2> Heading 2 - 18 Point </h 2> <h 3> Heading 3 - 14 Point </h 3> <h 4> Heading 4 - 12 Point </h 4> <h 5> Heading 5 - 10 Point </h 5> <h 6> Heading 6 - 7 Point </h 6> Normal body text - 12 Point </body> </html> BACK NEXT

Dasar Skrip / Tag HTML Paragraf dan Break <html> <head> <title>Latihan 02</title> </head> <body> Politeknik NSC Surabaya Program Studi Teknik Komputer <p> Jl. Basuki Rahmad No. 85 Surabaya </body> </html> BACK NEXT

Dasar Skrip / Tag HTML HR (Horizontal Rule) <html> <head> <title>Latihan 03</title> </head> <body> <h 1>POLITEKNIK NSC SURABAYA</h 1> <hr> </body> </html> BACK NEXT

Dasar Skrip / Tag HTML Font <html> <head> <title>Latihan 04</title> </head> <body> <font face=verdana size=3 color=blue>Fakultas Ilmu Komputer</font> </body> </html> BACK NEXT

Dasar Skrip / Tag HTML Soal (1) Tuliskan Source Code dari tampilan berikut: VIEW BACK NEXT

Dasar Skrip / Tag HTML Soal (2) Tuliskan Source Code dari tampilan berikut: VIEW BACK NEXT

Dasar Skrip / Tag HTML Soal (3) Tuliskan Source Code dari tampilan berikut: VIEW BACK NEXT