Materi 1- Pengantar Desain & Pengembangan Web.pptx

pengembangan web untuk mahasiswa

1. DESAIN & PENGEMBANGAN Web Materi 1: Pengantar Matakuliah

2. DESKRIPSI MATAKuliah Mata kuliah ini dirancang untuk memberikan pemahaman dasar kepada mahasiswa mengenai konsep web. Mahasiswa akan mempelajari dasar-dasar HTML, CSS, dan JavaScript untuk membangun halaman web sederhana, serta memahami prinsip desain web yang efektif untuk mendukung layanan perpustakaan. Selain itu, mata kuliah ini juga mencakup pengenalan sistem manajemen konten (CMS) dan praktik terbaik dalam mengelola informasi secara daring. Dengan keterampilan ini, mahasiswa diharapkan dapat mendukung pengembangan dan pemeliharaan website perpustakaan serta meningkatkan aksesibilitas informasi bagi pengguna.

3. TUJUAN MATAKuliah No Tujuan Deskripsi 1 Memahami Konsep Dasar Web Menjelaskan bagaimana website bekerja, termasuk struktur dasar web dan teknologi yang digunakan 2 Menguasai Dasar-Dasar Pemrograman Web Menggunakan HTML untuk membangun struktur halaman web. Menerapkan CSS untuk mengatur tampilan dan desain halaman web. Memahami dasar-dasar JavaScript untuk menambahkan interaktivitas pada website. 3 Mengenal Sistem Manajemen Konten (CMS) Memahami peran CMS dalam pengelolaan website perpustakaan. Menggunakan CMS sederhana untuk membuat dan mengelola konten web. 4 Merancang Website Sederhana untuk Perpustakaan Mengembangkan halaman web yang informatif dan mudah diakses bagi penggun a perpustakaan. Menerapkan prinsip desain web yang responsif dan ramah pengguna. 5 Memahami Dasar-Dasar Hosting dan Publikasi Web Mengenal konsep domain, hosting, dan cara menerbitkan website secara daring. Mengelola dan memperbarui konten web sesuai kebutuhan perpustakaan.

4. Apa itu internet ? Internet (Interconnected Network) adalah infratsruktur jaringan global yang menghubungkan komputer dan perangkat lainnya di seluruh dunia yang memungkin terjadinya pertukaran data.

5. Apa itu web & website? Web (World Wide Web) Merujuk pada keseluruhan jaringan informasi yang berjalan di atas internet yang dapat diakses melalui browser. Web terdiri dari berbagai website yang saling terhubung melalui hyperlink dan hypertext. Website Merupakan kumpulan halaman web yang dikelola di bawah satu domain tertentu. Website bisa terdiri dari satu atau banyak halaman (web page).

6. ANALOGI SEDERHANA INTERNET Jalan raya besar yang menghubungkan berbagai kota (perangkat dan layanan). WEB (World Wide Web) Sistem transportasi untuk mengakses rumah atau toko: Peraturn Lalu Lintas ( TCP/IP) Transmission Control Protocol/Internet Protocol Mobil (Browser) menjadi alat untuk menjelajahi rumah /took WEBSITE Sebuah toko atau rumah di sepanjang jalan raya, yang menyediakan layanan atau informasi tertentu. Toko dan rumah beserta dibangun dengan bahan dasar HTML ( HyperText Markup Language ) dan isi rumah berupa video, audio, image dll.

7. Sejarah Internet Berawal dari perang dingin antara Amerika Serikat dengan Uni Soviet Kekuatiran Amerika Serikat akan perang nuklir yang dapat menghancurkan sistem komunikasi militer dan pemerintah Untuk mengatasi ancaman ini, Departemen Pertahanan AS melalui ARPA (Advanced Research Projects Agency, kini DARPA) mulai mencari cara agar sistem komunikasi mereka tetap berfungsi meskipun beberapa pusat kendali hancur akibat serangan.

8. SEJARAH WEB / WWW –wordl Wide Web Awal Mula 1989: Tim Berners-Lee, seorang ilmuwan di CERN (Organisasi Eropa untuk Riset Nuklir), mengusulkan sistem berbasis hiperteks untuk berbagi informasi antar ilmuwan. 1990: Berners-Lee mengembangkan tiga teknologi utama: HTML (HyperText Markup Language) → Bahasa untuk membuat halaman web. HTTP (HyperText Transfer Protocol) → Protokol komunikasi antar server dan browser. URL (Uniform Resource Locator) → Alamat unik untuk mengakses halaman web. 1991: Berners-Lee merilis website pertama di dunia beralamat: http://info.cern.ch/hypertext/WWW/TheProject.html

9. Website PERTAMA DI DUNIA

10. Tim Benners Lee & Browser Pertama WorldWideWeb Browser

11. Browser awal yang populer MOSAIC BROWSER NETSCAPE BROWSER

12. Proses render browser adalah proses mengubah kode situs web menjadi halaman web yang dapat dilihat pengguna

13. Membuat Struktur Mengontrol tata letak konten Menyediakan struktur untuk desain halaman web Fondasi dasar dari setiap halaman web berbasis HTML Menata Situs Web Menerapkan gaya ke elemen halaman web Menyesuiakan ukuran layar untuk membuat halaman web responsif Membuat “tamilan & nuasa” halaman web Meningkatkan interaktif Menambahkan interaktivitas ke halaman web Menangani fungsi dan fitur yang kompleks Kode pemograman yang meningkatkan fungsionalitas.

14. Tools untuk PeMULA BELAJAR MEMBUAT WEBSITE Text Editor Browser Live Preview - VS Code Extension https://chatgpt.com/ Chrome, dll Chatbot AI https://code.visualstudio.com/

15. STRUKTUR DASAR HTML 5 <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Document </ title > </ head > < body >     </ body > </ html >

16. Penjelasan S truktur Dasar HTML 5 <! DOCTYPE html > → Menentukan versi HTML (HTML5). < html lang = "en" > → Elemen utama yang membungkus seluruh halaman. Atribut lang="en“ menunjukkan bahwa bahasa utama dari wbsite berbahasa Inggris < head > → Bagian kepala yang berisi metadata, judul, dan link ke sumber lain (CSS, JavaScript). < meta charset = "UTF-8" > → Mengatur karakter encoding agar mendukung berbagai simbol dan bahasa. < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > → Mengoptimalkan tampilan pada perangkat mobile. < title > Document </ title > → Judul halaman yang muncul di tab browser. < body > </ body > → Bagian utama yang berisi konten halaman seperti teks, gambar, dan lainnya. </ html > → tag penutup dari elemen <html>

17. Elemen dan Tag Dasar HTML 5 Elemen Teks Format Teks Daftar (List) Link Gambar

18. Elemen Teks –HEADING /JUDUL Heading (<h1> s.d <h6>) < h1 > Judul Utama (h1) </ h1 > < h2 > Subjudul (h2) </ h2 > < h3 > Subjudul Kecil (h3) </ h3 > < h4 > Subjudul Lebih Kecil (h4) </ h4 > < h5 > Hampir terkecil (h5) </ h5 > < h6 > Paling kecil (h6) </ h6 > Digunakan untuk membuat judul atau subjudul. Semakin besar angkanya, semakin kecil ukurannya.

19. Elemen Teks - PARAGRAF Paragraf (<p>) Digunakan untuk membuat teks paragraf. < p > Ini adalah paragraf pertama saya di HTML. </ p > < p > Paragraf kedua dengan teks lebih panjang. </ p >

20. Elemen Teks – FORMAT TEKS <strong> → Tebal (bold) <em> → Miring (italic) <u> → <u>Garis bawah (underline)</u> < p > Ini adalah teks < strong > tebal </ strong > . </ p > < p > Ini adalah teks < em > miring </ em > . </ p > < p > Ini adalah teks < u > bergaris bawah </ u > . </ p >

21. Elemen Teks – UNo rdered List Uno rdered List (< ul >) Daftar tanpa urutan nomor . < ul >     < li > HTML </ li >     < li > CSS </ li >     < li > Java Script </ li > </ ul >

22. Elemen Teks – Ordered List Ordered List (< o l>) Daftar dengan nomor . < ol >     < li > HTML </ li >     < li > CSS </ li >     < li > JavaScript </ li > </ o l > < ol type = "A" >     < li > Pemrograman Web </ li >     < li > Desain Web </ li >     < li > Pengembangan Aplikasi </ li > </ ol >

23. Penomoran dengan Karakter lain

24. LINK – tautan pada teks Link (<a>) Digunakan untuk membuat tautan ke halaman lain atau website lain. < p > Kunjungi website < a href = "https://www.google.com" target = "_blank" > Google </ a > . </ p > < p > Kunjungi website < a href = "https://www.google.com" > Google </ a > . </ p >

25. GAMBAR / IMAGE Gambar (<img>) Menampilkan gambar di halaman web. < a href = "https://google.com" >     < img src = "gambar1.jpg" alt = "monyet" width = "300" > </ a > < img src = "gambar1.jpg" alt = "monyet" width = "300" > Menambahkan tautan/link pada gambar Menambahkan gambar tanpa tautan/link

26. Penjelasan atribut tag < img > src = "gambar1.jpg" → Sumber gambar (lokal atau URL). alt = "monyet" → Teks alternatif jika gambar gagal dimuat. width = "300" → Ukuran gambar < img src = "gambar1.jpg" alt = "monyet" width = "300" > Sumber gambar jika diambil dari lokal, maka harus dalam 1 folder proyek website. Jika di dalam folder tertentu misalnya folder nama “img” dalam proyek, maka tambahkan jalur nama foldernya < img src = "/img/gambar1.jpg" alt = "monyet" width = "300" >