Nama : Dilla Wahdana
NRP : 5025211060
Kelas : Pweb A
LATIHAN 3 (Membuat Portofolio Gallerry using HTML and CSS)
Assalamualaikum Wr.Wb
Haii semua, pada pertemuan ke-4 mata kuliah PWEB A kita membahas tentang CSS. CSS adalah kumpulan kode program yang digunakan untuk mendesain atau mempercantik tampilan halaman HTML. Dengan CSS kita bisa mengubah desain dari text, warna, gambar dan latar belakang dari (hampir) semua kode tag HTML. Nah pada pertemuan ini saya diminta untuk membuat halaman web untuk kursus dengan menggunakan html dan css.
Untuk pengerjaannya sebagai berikut:
Bagian HTML:
- <!DOCTYPE html>: Ini adalah deklarasi tipe dokumen HTML yang mendefinisikan jenis dokumen yang digunakan (HTML5).
- <html>: Ini adalah elemen root dari dokumen HTML yang menyertakan semua elemen HTML.
- <head>: Ini adalah elemen kepala dokumen yang berisi informasi tentang dokumen, seperti judul halaman dan metadata.
- <title>: Ini adalah elemen yang mendefinisikan judul halaman web yang akan ditampilkan di tab browser.
- <meta>: Elemen ini digunakan untuk mendefinisikan metadata tambahan, dalam hal ini, digunakan untuk mengatur viewport agar halaman web responsif di perangkat seluler.
- <body>: Ini adalah elemen yang berisi semua konten yang akan ditampilkan di halaman web, seperti teks, gambar, dan elemen-elemen lainnya.
Bagian CSS:
Berikut adalah beberapa bagian CSS yang didefinisikan dalam <style>:
CSS digunakan untuk mengatur tampilan dan gaya elemen-elemen HTML dalam halaman web, dan dalam kode ini, juga digunakan untuk membuat halaman responsif dengan media queries.
- { box-sizing: border-box; }: Ini adalah aturan CSS wildcard yang menerapkan box-sizing border-box ke semua elemen HTML, yang menghindari masalah dengan perhitungan lebar elemen.
- Gaya untuk berbagai elemen seperti body, a, p, .row, .column, dan .content yang termasuk dalam dokumen. Contoh:
a) body { padding: 15px; }: Ini mengatur padding untuk seluruh body dokumen.
b) a { text-decoration: none; color: #5673C8; }: Ini mengatur gaya untuk tautan (anchor) dengan menghilangkan dekorasi teks dan mengatur warna teks.
c) .row { margin: 0px -18px; padding: 8px; }: Ini mengatur margin dan padding untuk elemen dengan kelas .row.
d) Media queries untuk responsivitas:
-> @media screen and (max-width: 850px) { /* CSS untuk lebar <= 850px */ }: Ini adalah media query yang mengubah lebar kolom saat lebar tampilan kurang dari atau sama dengan 850px.
-> @media screen and (max-width: 400px) { /* CSS untuk lebar <= 400px */ }: Ini adalah media query lain yang mengubah lebar kolom saat lebar tampilan kurang dari atau sama dengan 400px.
CSS digunakan untuk mengatur tampilan dan gaya elemen-elemen HTML dalam halaman web, dan dalam kode ini, juga digunakan untuk membuat halaman responsif dengan media queries.
Github: https://github.com/dilwdn/Portofolio_CSS
Hasil dokumentasi:
Tidak ada komentar:
Posting Komentar