Modul 1 STMIK IKMI CIREBON Oleh Dita rizki amalia

Konsep dan terminologi Desain Web Intoduction To HTML Materi Pokok 1. Materi Pokok Konsep dan terminologi Desain Web Intoduction To HTML Introduction To CSS

2. Pengantar Web / HTML Editor adalah perangkat lunak yang digunakan untuk membuat halaman-halaman web, baik yang bersifat statis maupun dinamis. Pengantar

3. Capaian Pembelajaran Mata Kuliah Kemampuan menguasai konsep Desain sebuah web Kemampuan menguasai konsep terutama peran HTML 5 dan CSS dalam sebuah desain web. Capaian Pembelajaran

Mahasiswa mampu menjelaskan konsep Pemrograman berbasis web 4. Kemampuan Akhir Mahasiswa mampu menjelaskan konsep Pemrograman berbasis web Mahasiswa mampu menjelaskan tentang peran HTML 5 dan CSS dalam paradigma pemrograman berbasis web. Kemampuan Akhir

1) Konsep Dasar Dan Teknologi Web 5. Kegiatan Belajar a. Uraian dan Contoh 1) Konsep Dasar Dan Teknologi Web World Wide Web secara luas lebih dikenal dengan istilah Web/WWW Web pertama kali diperkenalkan pd thn 1992 Internet & web adalah dua hal yang berbeda Internet lebih merupakan perangkat keras (Hardware), sedangkan web adalah perangkat lunak (Software). Internet menggunakan TCP/IP sebagai protokol operasionalnya, sedangkan web menggunakan HTTP (Hyper Text Transfer Protocol). Kegiatan Belajar

Layer ini berhubungan dengan struktur dokumen dokumen web. Standar Teknologi Web a. Structural Layer Layer ini berhubungan dengan struktur dokumen dokumen web. Bagaimana sebuah dokumen tersusun, format apa yang dipakai, tanda atau mark up apa yang digunakan merupakan bagian dari layer ini. Standar Teknologi yang direkomendasikan saat ini adalah Extensible Hypertext Markup Language (XHTML) dan Extensible Markup Language(XML). XHTML adalah HTML versi terakhir (4.01) yang ditulis ulang dengan dengan aturan-aturan yang lebih ketat mengacu pada XML. Sedangkan XML adalah sekumpulan aturan untuk menyusun bahasa markup. Kegiatan Belajar

Pada teknologi web lama bagian ini menyatu dengan structural layer. Standar Teknologi Web b. Presentation Layer Layer ini berhubungan dengan bagaimana mengatur tampilan dokumen pada layar, suara yang keluar, atau bagaimana format pencetakan dokumen. Pada teknologi web lama bagian ini menyatu dengan structural layer. Tapi pada standar baru, layer ini disarankan untuk dipisah. Yang termasuk teknologi ini adalah Cascading Style Sheets (CSS). Kegiatan Belajar

Standar Teknologi Web c. Behavioral Layer Layer ini berhubungan dengan masalah penggunaan bahasa skrip dan pemrogramannya untuk tujuan meningkatkan sisi interaktif dan dinamis halaman web. Yang termasuk dalam layer ini adalah Document Object Model (DOM) dan JavaScript. DOM memungkinkan suatu dokumen atau skrip untuk mengakses atau meng-update isi, struktur, dan style dari dokumen. JavaScript merupakan teknologi yang cukup lama dan tetap digunakan untuk menambah dokumen menjadi lebih interaktif. Kegiatan Belajar

3) Web Statis dan Web Dinamis Pengertian web statis dan web dinamis seringkali mengundang perdebatan Berdasarkan kesepakatan maka pengertian statis dan dinamis tidak ditentukan oleh ada atau tidaknya animasi bergerak pada halaman-halaman web, tetapi ditentukan oleh isi atau informasi yang ada pada halaman-halaman tersebut. Data dan informasi yang ada pada web statis tidak berubah-ubah. Dokumen web yang dikirim kepada client akan sama isinya dengan apa yang ada di web server. Sedangkan web dinamis, memiliki data dan informasi yang berbeda-beda tergantung input apa yang disampaikan client. Dokumen yang sampai di client akan berbeda dengan dokumen yang ada di web server Kegiatan Belajar

4) Persiapan Pembuatan Web Perangkat Keras Perangkat Lunak Sistem operasi Web Server Web server adalah perangkat lunak yang bertindak melayani permintaan-permintaan client terhadap halaman-halaman web tertentu: Apache dan IIS (Internet Information Service). Apache dapat digunakan baik untuk web statis maupun web dinamis dan mendukung banyak platform sistem operasi dan bahasa pemrograman server, antara lain Perl, Phyton, Java (JSP dengan menggunakan Tomcat) dan tentu saja PHP. Dukungan pada koneksi dengan berbagai basis data, seperti MySQL, SQL Lite, PosgreSQL, Oracle, DB2 dan lain-lain Kegiatan Belajar

5) Web/HTML Editor Web / HTML Editor adalah perangkat lunak yang digunakan untuk membuat halaman-halaman web, baik yang bersifat statis maupun dinamis. Untuk membuat halaman web baik statis maupun dinamis kita dapat menggunakan teks editor biasa seperti Notepad atau Vi. Pada perangkat pengembang web yang lebih kompleks seperti Adobe Dreamweaver (dulu Macromedia Dreamweaver), Microsoft Visual Studio.Net, dan beberapa yang lainnya, kita akan mendapati fasilitas yang sangat membantu mempercepat pembuatan halaman web, antara lain: tampilan berbasis GUI, automatic code completion (melengkapi kode secara otomatis), WYSIWYG (What You See Is What You Get) HTML Editor, koneksi ke basis data yang lebih mudah, dan banyak lagi fasilitas. Kegiatan Belajar

6) Web Browser Web browser berfungsi menerjemahkan kode-kode HTML menjadi tampilan yang kita kehendaki Beberapa contoh WB : Microsoft Internet Explorer, Firefox, Opera atau Safari Microsoft Internet Explorer :Windows Firefox : LINUX Safari : MAC Os X Kegiatan Belajar

7) Membuat dan Menguji Halaman Web Ada dua model dalam pembuatan halaman web statis : Membuat halaman-halaman tersebut pada komputer lokal, kemudian setelah berhasil dipindahkan ke lokasi di web server. Membuat halaman-halaman web di lokasi web server Kegiatan Belajar

Contoh Struktur direktori situs web Kegiatan Belajar

HTML dibuat oleh Tim Barners-Lee ketika masih bekerja untuk CERN Introduction to HTML HTML dibuat oleh Tim Barners-Lee ketika masih bekerja untuk CERN HTML dipopulerkan pertama kali oleh browser Mosaic Selama awal tahun 90’an, HTML mengalami perkembangan yang sangat pesat Sebuah dokumen atau file HTML agar dapat dibaca langsung oleh browser disimpan dalam ekstensi .htm atau .html Untuk menulis HTML tidak dibutuhkan perangkat lunak yang spesifik, cukup dengan text editor sederhana seperti Notepad (pada Microsoft Windows) atau beragam text editor yang ada di platform Linux dan Apple Mac OS, seperti vi, nano, joe, gedit, leafpad dan lain-lain. Kegiatan Belajar

Struktur Umum File dengan Bahasa HTML Introduction to HTML Struktur Umum File dengan Bahasa HTML HTML adalah bahasa yang disisipkan (embedded language) pada dokumen dengan memberi tanda tertentu yang disebut tag Tag merupakan aturan penulisan kode yang ditulis dengan diawali tanda lebih kecil dan di akhiri dengan tanda lebih besar (<tag>) Sintaks penulisan tag mengikuti aturan-aturan umum berikut ini: Setiap tag mempunyai nama yang spesifik. Kadang-kadang diikuti opsi-opsi yang disebut atribut. Baik nama maupun opsi harus berada dalam tanda <..>. Contoh: <a href="/wiki/PHP" title="PHP">PHP</a> Pada contoh ini tagnya memiliki nama <a> sedangkan atribut untuk tag <a> adalah href dan title. Sehingga baik nama tag dan atributnya harus berada di dalam tanda <…> seperti pada contoh. Kegiatan Belajar

<TITLE>Paragraf</TITLE> Introduction to HTML Sebagian besar tag berpasangan. Penulisan untuk tag yang berpasangan adalah sebagai berikut : <namatag>….</namatag> Contoh: <TITLE>Paragraf</TITLE> <strong>Cetak Tebal</strong> Pada tag yang berpasangan seperti pada contoh ini, <TITLE> adalah tag awal dan </TITLE> adalah tag akhir. Perhatikan tanda / pada tag akhir. Nama tag dan atribut-nya tidak bersifat case sensitive. Penulisan <strong> Cetak Tebal </strong> memberikan hasil yang sama dengan <STRONG>Cetak Tebal</STRONG>. Penulisan atribut suatu tag diletakkan setelah nama tag. Jika ada lebih dari satu atribut maka digunakan spasi untuk memisahkan. Urutan atribut tidak penting. <FONT SIZE=3>Teks Baru</FONT> <FONT SIZE=5 FACE=“verdana“>Teks Baru </FONT> Kegiatan Belajar

Introduction to HTML Nilai dari atribut ditulis setelah tanda sama dengan (=). Pada contoh sebelumnya (lihat bagian d) terlihat bahwa atribut SIZE dari tag FONT memiliki nilai 5 sedangkan atribut FACE memiliki nilai “verdana”. Jika nilai dari atribut hanya tunggal, maka kita langsung menuliskan setelah tanda =. Jika lebih dari satu maka dapat digunakan tanda ‘… ‘ atau “…”. Pada contoh bagian d, tampak bahwa penulisan nilai untuk atribut SIZE tanpa menggunakan tanda “..”, sedangkan pada atribut FACE tanda “..” untuk menandai kata verdana. Kegiatan Belajar

Introduction to HTML Contoh Kegiatan Belajar

Introduction to HTML Output Kegiatan Belajar

Feature untuk membuat dynamic HTML. Introduction to CSS Apa itu CSS ? Feature untuk membuat dynamic HTML. Style sheet mendeskripsikan bagaimana tampilan document HTML di layar (template) Membuat special efek (mendefinisikan style untuk <H1> dengan style bold dan italic dan berwarna biru) Support ke semua browser. Kegiatan Belajar

Introduction to CSS Contoh: Kegiatan Belajar

Introduction to CSS Output Kegiatan Belajar

Instal aplikasi yang sudah diberikan: a. Sublime b. Xampp b. Latihan Survey salah 1 website komersil kemudian sebutkan kelebihan dan kekurangannya (minimal 3)! Instal aplikasi yang sudah diberikan: a. Sublime b. Xampp c. Dreamweaver Kegiatan Belajar

Halaman web memiliki tiga lapisan utama yaitu: Structural Layer c. Rangkuman Halaman web memiliki tiga lapisan utama yaitu: Structural Layer Presentation Layer Behavior Layer Sedangkan HTML merupakan bahasa standar yang digunakan dalam membuat halaman web, sementara css adalah spesial efek dalam membuat html. Kegiatan Belajar

Jelaskan pengertian HTML ! Jelaskan pengertian CSS! d. Tes formatif Jelaskan proses desain situs secara umum ! (gunakan kalimat anda sendiri) Jelaskan pengertian HTML ! Jelaskan pengertian CSS! Kegiatan Belajar

e. Umpan Balik dan Tindak Lanjut Mahasiswa mendengar, mencatat , dan mengerjakan latihan dan mempelajari tentang desain situs. Kegiatan Belajar

6. Kunci Jawaban tes formatif 1. 5 langkah dalam proses desain web: Mengumpulkan informasi. Konten desain dan antarmuka grafis Desain HTML dan CSS Koneksi database (basis data) Memperbaiki dan menyempurnakan. 2. Pengertian HTML Hypertext MarkUp Language HTML adalah bahasa yang disisipkan (embedded language) pada dokumen dengan memberi tanda tertentu yang disebut tag 3. Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Kunci Jawaban

7. Referensi [1] Agung, Gregorius. , HTML5 + CSS 3, PT 7. Referensi [1] Agung, Gregorius., HTML5 + CSS 3, PT. Elex Media Komputindo, 2012. [2] Lee, Christopher, Mos Wonted CSS Tips and Triks, ANDI Yogyakarta, 2012 [3] Hidayatullah,Priyanto, Pemrograman Web. INFORMATIKA Bandung,2014 Referensi