Aturan Perkuliahan
advertisement
Modul Web Design Dosen: Nofiyati, S.Kom, M.Kom Program Studi Teknik Informatika Universitas Jenderal Soedirman Materi: Pertemuan ke1 , 2 & 3. Materi Konsep Dasar Web Design: Perencanaan WebSite Typografi, Pewarnaan, LayOut / Tata Letak Teks & Dasar Tag HTML: Heading Paragraf Font Table: Create Table Columns Table Properties LayOut with Table Image: Jenis File Image Inserting Images Resizing Images Text & Image Create Image Materi: Pertemuan ke4 & 5. 6. Materi Hyperlinks : Teks Hyperlinks Image Hyperlinks Path Hyperlinks Chage Hyperlinks Active Elements: Marquee Counter Animation Graphics Bingkai: Konsep Bingkai Dokumen Tata Letak Link & Target Home Page Berbingkai Ordered List & Unordered List Menggunakan Forms & Fields: Pengenalan komponen forms Form Methode (Get, Post) Feedback Form Materi: Pertemuan ke7 & 8. 9. Materi Pengenalan / Dasar CSS (Cascading Style Sheet) CSS Inheritance CSS Contextual Selector CSS with Classes Pengenalan PHP Pengenalan PHP Mengenal Variabel pada Web 10. Operator Aritmatika pada PHP Operator Assignment pada PHP 11. Operator Perbandingan pada PHP Operator Logika pada PHP 12. Mengenal Bersyarat IF & CASE pada PHP Mengenal Looping pada PHP Array di PHP 13. Function di PHP MySQL dengan PhpMyAdmin 14. Menggabungkan Web Programming dengan Database MySQL Konsep Dasar Web Design 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 (LayOut) 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). Konsep Dasar Web Design Konsep Dasar Web Design 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. Konsep Dasar Web Design Konsep Dasar Web Design Konsep Dasar Web Design Konsep Dasar Web Design Dasar Skrip / Tag HTML Pertanyaan mendasar dari web designer pemula: Sulitkah pemrograman HTML?.... Apa yang dimaksud tag dalam HTML?... Bagaimana belajar dari Design Web yang sudah ada?... Dasar Skrip / Tag HTML <html> <head> <title>Judul / Title</title> </head> <body> Isi / Content </body> </html> Dasar Skrip / Tag HTML Heading <html> <head> <title>Latihan 01</title> </head> <body> <h1> Heading 1 - 24 Point </h1> <h2> Heading 2 - 18 Point </h2> <h3> Heading 3 - 14 Point </h3> <h4> Heading 4 - 12 Point </h4> <h5> Heading 5 - 10 Point </h5> <h6> Heading 6 - 7 Point </h6> Normal body text - 12 Point </body> </html> Dasar Skrip / Tag HTML Paragraf dan Break <html> <head> <title>Latihan 02</title> </head> <body> Universitas Jenderal Soedirman <br> Fakultas Teknik <p> Jurusan Teknik Informatika </body> </html> Dasar Skrip / Tag HTML HR (Horizontal Rule) <html> <head> <title>Latihan 03</title> </head> <body> <h1>........</h1> <hr> </body> </html> 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> Pengenalan HTML5 HTML5 adalah standar terbaru untuk HTML. • Versi sebelumnya dari HTML, HTML 4.01, direlease pada tahun 1999, dan internet telah berubah secara signifikan sejak saat itu. • Ini dirancang khusus untuk memberikan content yang banyak tanpa membutuhkan plugin tambahan. Versi ini memberikan ruang untuk animasi grafis, musik untuk film, dan juga dapat digunakan untuk membangun aplikasi web yang rumit. • HTML5 juga lintas platform. Itu dirancang untuk bekerja apakah Anda menggunakan PC, atau Tablet, Smartphone, atau Smart TV. Penulisan HTML 5 Deklarasi awal agar kita menggunakan HTML 5 ialah hanya menulis "<!DOCTYPE html>" pada awal halaman yang kita buat. Hal tersebut untuk membedakan HTML 5 dan HTML 4. <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html> Pengenalan HTML 5 Dalam HTML 5 ada beberapa bagianyang membedakan tiap jenisnya, yaitu : • • • • • • • Graphics / Multimedia Semantics & Markup Offline / Storage Realtime / Communication File / Hardware Access CSS3 Nuts & Bolts HTML5 Multimedia Pada HTML 5, kita dapat memutar suatu video maupun lagu hanya dengan scipt saja, tidak membutuhkan bantuan dari player. Ada dua jenis HTML 5 multimedia, yaitu : • HTML5-video • HTML5-audio HTML 5 video Terdapat tiga jenis format video yang dapat di putar di HTML 5 ini, Ogg, mp4 dan Webm. Setiap browser support berbeda-beda browser. Penulisannya : Script : <video width="320" height="240"controls="controls"> <source src="yourvideo.mp4" type="video/mp4" /> Your browser does not support the video tag. </video> HTML5 Multimedia (2) HTML 5 audio Terdapat tiga jenis format video yang dapat di putar di HTML 5 ini, Ogg, mp4 dan Waw. Setiap browser support berbeda-beda browser. Penulisannya : <audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio> Dasar Skrip / Tag HTML Soal (1) Tuliskan Source Code dari tampilan berikut: Tugas (1) Mencari artikel dengan tema CSS (Cascading Style Sheet) Pelajari dengan seksama artikel yang Anda dapatkan dan berikan pendapat Anda?