Modul Praktikum Desain Web - WordPress
Modul Praktikum Desain Web 2015MODUL 1DASAR-DASAR HTMLA. TUJUAN PRAKTIKUMMelalui praktikum Dasar-dasar HTML, diharapkan mahasiswa dapat memilikikompetensi, antara lain:1. Memahami struktur dasar dokumen HTML.2. Membuat dokumen HTML yang baik dan benar.3. Mengaplikasikan elemen-elemen dasar untuk menampilkan informasi secara kreatif.B. ALOKASI WAKTU PRAKTIKUM3 SKS (3x50 menit)C. ALAT DAN BAHANPersiapkan PC/laptop yang digunakan untuk praktikum. Pastikan software aplikasi texteditor atau code editor (notepad , sublime, dll) sudah terinstall dan siap digunakan.D. DASAR TEORI1. HTML, XHTML, dan HTML5HTML (Hypertext Markup Language) merupakan sebuah bahasa markup, bukanbahasa pemrograman. Bahasa markup (Indonesia: markah) adalah bahasa yangmengombinasikan teks dan informasi tambahan mengenai teks tersebut. HTMLmerupakan dokumen standar yang digunakan untuk mendesain halaman web. Padaawal tahun 2000, W3C (World Wide Web Consortium) membuat perubahan besarmelalui XHTML (eXtensible Hypertext Markup Language). Ide dasarnya, dalamupaya meningkatkan kompatibilitas dokumen HTML, W3C menambahkan strukturdan ekstensibilitas XML (eXtensible Markup Language) ke HTML. HTML versiterbaru adalah HTML5. Tujuan utama pengembangan HTML5 adalah untukmemperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudahdibaca oleh manusia dan juga mudah dimengerti oleh mesin.2. Struktur Dokumen HTMLSebuah dokumen HTML memiliki empat bagian, antara lain:a. Diawali dengan tag html dan diakhiri dengan komplemennya, yakni tag /html tag.b. Dalam tag html /html , terdapat tag head dan /head yangdigunakan untuk menyatakan informasi mengenai dokumen HTML.c. Dalam tag html /html , terdapat tag body dan /body : digunakanuntuk melingkupi semua teks yang terdapat di halaman HTML.1Retno Indah R.,S.Pd.,M.Pd. FILKOM, UNIVERSITAS BRAWIJAYA
Modul Praktikum Desain Web 2015d. Dalam tag head /head , tag title dan /title : digunakan untukmenambahkan title di title bar browser.Selain itu, perlu diperhatikan adalah untuk penulisan komentar. Di HTML, komentardinyatakan dengan tag !-- dan diakhiri dengan tag -- .E. LATIHAN1. Membuat Dokumen HTMLLangkah-langkah pembuatan dokumen HTML diperlihatkan sebagai berikut:a. Buka editor teks.b. Ketikkan teks (kode-kode HTML) berikut:c. Simpan dokumen HTML dengan nama COBA1.html dan letakkan di lokasidirektori web, misal C:\xampp\htdocs. Perhatikan, www merupakan direktori webdan sebaiknya buat subdirektori di dalamnya. Cara ini berguna ketika web Andamerupakan file PHP, sebagai latihan, prosedur ini perlu dilakukan. Sebenarnyafile HTML bisa disimpan dimana saja.d. Untuk mengetahui hasil pembuatan dokumen HTML, klik ganda file yang telahAnda buat. Hasilnya akan terlihat seperti Gambar 1.Gambar 1. Tampilan halam web2Retno Indah R.,S.Pd.,M.Pd. FILKOM, UNIVERSITAS BRAWIJAYA
Modul Praktikum Desain Web 20152. Format TeksHTML menyediakan berbagai elemen yang dapat dimanfaatkan pemformatan teks.a. HeadingHeading didefinisikan menggunakan tag hn dan diakhiri dengan /hn , dimana n menyatakan tipe dengan nilai 1-6. Cobalah semua jenis heading berikutini untuk mengetahui perbedaannya.Gambar 2. Tampilan heading 1-6Elemen heading menyediakan atribut align yang dapat digunakan untukmengatur posisi teks. body h1 align "right" Heading 1 /h1 h2 align "left" Heading 2 /h2 h3 align "center" Heading 3 /h3 /body 3Retno Indah R.,S.Pd.,M.Pd. FILKOM, UNIVERSITAS BRAWIJAYA
Modul Praktikum Desain Web 2015Gambar 2. Jenis pengaturan headingb. ParagrafDalam konteks HTML, paragraf direpresentasikan melalui tag p . Tag p sebenarnya merupakan tag pasangan, meski dalam implementasinya kerap kalidiabaikan.4Retno Indah R.,S.Pd.,M.Pd. FILKOM, UNIVERSITAS BRAWIJAYA
Modul Praktikum Desain Web 2015Gambar 3.Penggunaan paragrafc. Preformatted TextKita bisa memanfaatkan keberadaan tag pre . Tag ini akan menampilkan teksdengan font Courier dan tetap mempertahankan spasi serta baris baru.5Retno Indah R.,S.Pd.,M.Pd. FILKOM, UNIVERSITAS BRAWIJAYA
Modul Praktikum Desain Web 2015Gambar 4.Penggunaan Preformatted TextUntuk melihat perbedaannya, hilangkan tag pre kemudian perhatikanhasilnya.d. Garis HorizontalDi HTML, garis horizontal direpresentasikan melalui tag hr / . Meskipunkebanyakan browser me-render elemen ini dengan visualisasi yang sedikit berbeda,namun pada hakekatnya mencerminkan sebuah bentuk garis horizontal.6Retno Indah R.,S.Pd.,M.Pd. FILKOM, UNIVERSITAS BRAWIJAYA
Modul Praktikum Desain Web 2015Gambar 5.Menggunakan garis horizontale. Menggunakan ListHTML mendukung list dalam bentuk terurut (ordered), tak terurut (unordered), dandefinisi (definition). Untuk setiap bentuk list ini, terdapat list item—dinyatakanmelalui tag li berpasangan—yang merepresentasikan item-item list.7Retno Indah R.,S.Pd.,M.Pd. FILKOM, UNIVERSITAS BRAWIJAYA
Modul Praktikum Desain Web 2015Gambar 6.Menggunakan listf. PewarnaanUntuk memberikan warna background, HTML menyediakan atribut bgcolordi tag body . Atribut ini dapat diisi dengan nama warna—misalnya red—atau kode heksadesimal—misalnya #FFFFFF.Khusus untuk elemen-elemen lain tertentu, tersedia atribut color yangmemungkinkan kita melakukan pewarnaan. Sama seperti bgcolor, nilaiatribut ini juga dapat berupa nama warna atau kode heksadesimal.8Retno Indah R.,S.Pd.,M.Pd. FILKOM, UNIVERSITAS BRAWIJAYA
Modul Praktikum Desain Web 2015Gambar 7. Warna pada background dan fontg. Menyisipkan GambarSelain teks, kita juga bisa menyisipkan gambar di dalam dokumen HTML. Untukkeperluan ini, HTML menyediakan tag img yang didukung dengan sejumlahatribut.9Retno Indah R.,S.Pd.,M.Pd. FILKOM, UNIVERSITAS BRAWIJAYA
Modul Praktikum Desain Web 2015Gambar 8. Penggunaan gambar pada HTMLF. TUGAS PRAKTIKUMBuatlah halaman HTML yang menggabungkan 7 komponen dasar HTML (Heading,Paragraf, Preformatted Text, Garis Horizontal, List, Warna, Gambar) dalam satu halamanfile HTML.Be creative 10Retno Indah R.,S.Pd.,M.Pd. FILKOM, UNIVERSITAS BRAWIJAYA
Modul Praktikum Desain Web 2015 1 Retno Indah R.,S.Pd.,M.Pd. FILKOM, UNIVERSITAS BRAWIJAYA MODUL 1 DASAR-DASAR HTML A. TUJUAN PRAKTIKUM Melalui praktikum Dasar-dasar HTML, diharapkan mahasiswa dapat memiliki kompetensi, antara lain: 1. Memahami struktur dasar doku
Praktikum Biologi Sel merupakan salah satu praktikum yang mendasari praktikum pada mata praktikum yang lain seperti Praktikum Teknik Analisa Biologi Molekuler, Praktikum Kultur Jaringan dan Sel Hewan serta Praktikum Imunologi. Petunjuk Praktikum Biologi Sel ini disusun sejak tahun akademik 2004/2006 yang saat itu hanya memuat tiga materi.
TUGAS PENDAHULUAN PRAKTIKUM SISTEM OPERASI MODUL XX April 19, 2014 Pada modul kali ini, mungkin akan sedikit berbeda dengan modul-modul sebelumnya. Masih dapat kita ingat bahwa modul-modul sebelumnya, kita membahas manajemen administrasi dalam sistem operasi Windows. Sekarang, kita beralih kepada sistem operasi yang berbasi GNU/Linux.
Modul Praktikum Jaringan Syaraf Tiruan Designed by Dr. Ucuk Darusalam, ST, MT Format Laporan Laporan praktikum dibuat dalam bentuk dokumen "Laporan Praktikum" per dua minggu sesuai dengan topik-topik yang telah disusun dalam modul praktikum. Dokumen laporan ditulis dengan menggunakan Word Processor, dengan ukuran margin halaman sebagai berikut:
Alur Bagi Peserta Praktikum : 1. Peserta praktikum menerima dan kemudian mempelajari modul praktikum. 2. Peserta praktikum mengerjakan tugas prepraktikum yang diberikan. 3. Peserta praktikum melakukan asistensi tugas prepraktikum. Asistensi ini digunakan sebagai bahan bagi asisten un
E. Dasar Hukum F. Materi Pokok dan Sub Materi MATERI POKOK 1 KARAKTERISTIK MODUL A. Self Instructional B. Self Contain C. Stand Alone D. Adaptive E. User Friendly MATERI POKOK 2 PENGEMBANGAN MODUL DAN MUTUNYA A. Pengembangan Modul B. Mutu Modul MATERI POKOK 3 PROSEDUR PENYUSUNAN MODUL A. Analisa Kebutuhan Modul B. Penyusunan Modul PENUTUP A .
praktikum 5 Modul 10 Usahatani Gurem dan Keputusan Alokasi Tenaga Kerja Keluarga TM 13, praktikum 6 Modul 11 Skala Usahatani dan Produktivitas Faktor Produksi TM 14, praktikum 7 Modul 12 Perubahan teknologi dalam Perspektif Usahatani Gurem TM 15, Praktikum 8 UJIAN AKHIR PRAK
9. Modul OC IV (Organische Stoffklassen und Synthesen) 13 10. Modul PC I (Allgemeine Chemie) 14 11. Modul PC II (Physikalische Chemie II) 15 12. Modul PC III (Physikalische Chemie III) 16 13. Modul PC IV (Physikalische Chemie IV) 17 14. Modul MC (Makromolekulare Chemie) 18 15. Modul BC (Biochemie und Zellbiologie) 19 16. Modul Physik 20 17.
Awards – Resource B 3 hours 4 hours 5 hours 5 hours. e new prorae ae 12/12 Awards – Resource C Scenario 1 Scenario 3 Scenario 2 Scenario 4. Sow it, grow it! Mastering the moves) Innovate Stage 2 Brownies Express Myself Network Stage 1 Qtotestine VOICE Fitness Make change Stage 5 Feel good Stage 3 Rangers Take Action Guides Be Well Rainbows Know Myself All my friends . Created Date: 6/13 .
