Modul Design & Pemrograman Web

Slides:



Advertisements
Presentasi serupa
HTML.
Advertisements

Mengelola isi halaman web
Hyper Text Markup Language
Layout Situs dengan Tabel
Kategori Desain Grafis
Modul Design & Pemrograman Web
KONTRAK KULIAH Stephanie I.P.
Pertemuan 2.  Dreamweaver adl salah satu program pembuatan website yang mempunyai banyak sekali menu-menu dan tool-tool yang dapat dipergunakan untuk.
Profil Nama : Syaifullah, S.Kom. TTL: Utan, 11 Oktober 1974 Pendidikan: S1 Teknik Informatika STMIK “Bumi Gora” Mataram. Bidang Minat: - Analyst Programmer.
Modul Pengembangan Sistem Informasi part. I Dosen: Zakki Falani, S.Kom Fakultas Ilmu Komputer Universitas Narotama NEXT.
Nine: Pengantar HTML The Net Language. 2 Objectives Setelah menyelesaikan bab ini, anda diharapkan dapat: Memahami konstruksi dasar halaman web. Mengerti.
STMIK PPKIA Pradnya Paramita
DASAR HTML Marina Azizah. Struktur Dokumen HTML Dokumen HTML bisa di bagi mejadi tiga bagian utama: HTML Setiap dokumen HTML harus di awali dan di tutup.
Dasar Tag HTML  Catatan: Jika Anda ingin menambahkan komentar pada dokumen HTML,maka tulislah Tag,misal: NEXT.
Proses Pengembangan Website
( Cascading Style Sheet) Bagian 1
HTML.
Pengembangan Evangs Mailoa Silabus & Tatib Perkuliahan WEB.
HTML By kartika puji pangesti
Konsep Pemrograman Internet
PEMROGRAMAN BERBASIS WEB
Mengelola isi halaman web
Tim FT Elektro UHAMKA CSS (Cascading Style Sheet)
CSS (Cascading Style Sheet)
Dasar Tag HTML Form Awal formulir ditandai dengan Tag , dan berisi dua kata kunci: METHOD dan ACTION.
Pengenalan PHP Operator Aritmatika:
CSS (Cascading Style Sheet)
Cascading Style Sheet Oleh : Edy Mulyanto
Bekerja dengan file dan desain web
Bekerja dengan file dan desain web PERTEMUAN 6. Beberapa type file -CSS, (Cascading Style Sheet) ekstensi.css. Untuk format isi HTML dan mengendalikan.
Atribut dalam Body Atribut dan contoh penulisan Fungsi
Pertemuan 2 : HTML.
Pertemuan 2 1.  Bahasa yang digunakan untuk menampilkan informasi pd halaman web.  bahasa ini menggunakan tanda (markup) untuk menandai perintah- perintahnya.
HTML (cont.) (Nelly Sofi). Peng. Komp & TI 2C2 Untuk mempelajari HTML saat ini tidaklah sulit karena sudah banyak program yang mampu menghasilkan dokumen.
HTML singkatan dari HyperText Markup Language menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Software.
S1 Teknik Informatika - Unijoyo
Mengelola isi halaman web
KOMPUTER APLIKASI IT XHTML & CSS MODUL 01
Pemrograman Web Lanjut
Lutfi Budi Ilmawan Univ. Muslim Indonesia
Modul Design & Pemrograman Web
WEB 1 (HTML) STMIK A. Yani.
Macromedia Dreamweaver
CSS (Cascading Style Sheet)
KOMPUTER APLIKASI IT I HTML – INTERNET Angky Febriansyah SE
PENGANTAR HTML NEXT.
KOMPUTER APLIKASI IT HTML - INTERNET MODUL 01
CSS - Cascading Style Sheets
HTML (cont.) (Devi Indriani).
Pertemuan 2 JAVA 2 KA.
(Cascading Stylesheet)
HTML.
KOMPUTER APLIKASI IT HTML - INTERNET MODUL 01
Rekayasa Perangkat Lunak
MENDESAIN WEB SMK Negeri 1 Pekanbaru.
ELEMEN SITUS WEB A. Ridwan Siregar.
Pemrograman Berbasis Web
Area Kerja Dreamweaver
S1 Teknik Informatika - Unijoyo
( HyperText Markup Language)
Pengembangan Aplikasi Framework (IT657)
Pemrograman Basis Data Berbasis Web
Mengelola isi halaman web
Darmawan satyananda Mathematics department State university of malang
APLIKASI KOMPUTER “WEBSITE”
Pemrograman Web Dasar (4 SKS)
Cascading Style Sheet.
CSS (Cascading Style Sheet)
Web Design CSS.
Pemrograman Basis Data Berbasis Web
Transcript presentasi:

Modul Design & Pemrograman Web Dosen: Rudianto, ST., M.Cs. NEXT

Kehadiran 10% Praktek 10% Keaktifan 10% Tugas 10% UTS 30% UAS 30% Kriteria Penilaian: Kehadiran 10% Praktek 10% Keaktifan 10% Tugas 10% UTS 30% UAS 30% BACK NEXT

Materi: Pertemuan ke- Materi 1. 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 BACK NEXT

Materi: Pertemuan ke- Materi 2. 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 BACK NEXT

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

UJIAN AKHIR SEMESTER (UAS) Materi: BACK NEXT Pertemuan ke- Materi 8. Pengenalan PHP Mengenal Variabel pada Web 9. Operator Aritmatika pada PHP Operator Assignment pada PHP Operator Perbandingan pada PHP Operator Logika pada PHP 10. Mengenal Bersyarat IF & CASE pada PHP Mengenal Looping pada PHP Array di PHP 11. Include & Require Manajemen Session 12. Function di PHP MySQL dengan PhpMyAdmin 13. Menggabungkan Web Programming dengan Database MySQL 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, Jakarta, 2003 Mac Bride, HTML Penerbitan di World Wide Web, Megapoin, Jakarta, 1997.

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). NEXT

Konsep Dasar Web Design BACK NEXT

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. BACK NEXT

Konsep Dasar Web Design BACK NEXT

Konsep Dasar Web Design BACK NEXT

Konsep Dasar Web Design BACK NEXT

Konsep Dasar Web Design BACK NEXT

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?... 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> <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> BACK NEXT

Dasar Skrip / Tag HTML Paragraf dan Break <html> <head> <title>Latihan 02</title> </head> <body> Politeknik NSC Surabaya <br> 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> <h1>POLITEKNIK NSC SURABAYA</h1> <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

Tugas (1) Mencari artikel dengan tema Design Web Pelajari dengan seksama artikel yang Anda dapatkan BACK NEXT