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 Isi / Content

Dasar Skrip / Tag HTML Heading

Heading 1 - 24 Point

Heading 2 - 18 Point

Heading 3 - 14 Point

Heading 4 - 12 Point

Heading 5 - 10 Point

Heading 6 - 7 Point

Normal body text - 12 Point

Dasar Skrip / Tag HTML Paragraf dan Break Universitas Jenderal Soedirman
Fakultas Teknik

Jurusan Teknik Informatika

Dasar Skrip / Tag HTML HR (Horizontal Rule)

........

---

Dasar Skrip / Tag HTML Font Fakultas Ilmu Komputer

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 "" pada awal halaman yang kita buat. Hal tersebut untuk membedakan HTML 5 dan HTML 4. The content of the document......

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 :

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 :

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?