Lab 4: Web Design Menggunakan HTML dan CSS3

Pemrograman Berbasis Platform (CSGE602022) - diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Gasal 2022/2023

Tujuan Pembelajaran

Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk:

Mengerti susunan tag pada HTML5
Mengetahui berbagai jenis tag HTML5
Mengerti cara penulisan CSS
Mengetahui static files pada Django
Mengerti penggunaan selector pada CSS

Pengenalan HTML

Silakan pelajari dan mencoba sendiri HTML pada referensi ini.

Perbedaan antara HTML dan HTML5 bisa kamu baca pada referensi ini.

Pengenalan CSS

Apa itu CSS?

Cascading Style Sheets (CSS) adalah bahasa yang digunakan untuk mendeskripsikan tampilan dan format dari sebuah situs web yang ditulis pada markup language (seperti HTML). Kegunaannya menjadikan tampilan situs web lebih menarik.

Untuk mempelajari perbedaan antara CSS dan CSS3 bisa kamu baca pada referensi ini.

Cara Penulisan CSS

Secara umum, CSS dapat dituliskan dalam bentuk sebagai berikut.

selector {
  properties: value;
}

Silakan pelajari dan mencoba sendiri CSS pada referensi ini.

Terdapat tiga jenis cara penulisan CSS:

Inline Styles
Internal Style Sheet
External Style Sheet

Silakan pelajari tentang ketiga jenis CSS tersebut pada referensi ini.

Perlu diperhatikan, jika kamu membuat jenis External Style Sheet, kamu perlu menambahkan tag {% load staticfiles %} pada halaman HTML kamu. Contohnya seperti potongan kode di bawah ini.

{% load staticfiles %}
<html>
  <head>
    <title>Tutorial CSS Yay</title>
    <link rel="stylesheet" href="{% static 'css/tutorial.css' %}" />
  </head>
  <body>
    <div>
      <h1>Tutorial CSS Yay</h1>
    </div>
    <div id="main">
      <div>
        <p>published: 04 Oktober 2021</p>
        <h1><a href="">Tutorial CSS ku</a></h1>
        <p>Yay ini tutorial yang gampang!</p>
      </div>
    </div>
  </body>
</html>

Hal ini dapat terjadi karena CSS merupakan static files di Django. Static files akan dijelaskan pada bagian selanjutnya.

Catatan Tambahan

Jika terdapat lebih dari satu style yang didefinisikan untuk suatu elemen, maka style yang akan diterapkan adalah yang memiliki prioritas yang lebih tinggi. Berikut ini urutan prioritasnya, nomor 1 yang memiliki prioritas paling tinggi.

Inline style
External dan internal style sheets
Browser default

Static files pada Django

Pada framework Django, terdapat file-file yang disebut dengan static files. Static files merupakan file-file pendukung HTML pada suatu situs web. Contoh static files antara lain seperti CSS, JavaScript dan gambar. Pengaturan untuk static files terletak pada file settings.py.

  ...
  # Static files (CSS, JavaScript, Images)
  # httpsdocs.djangoproject.comen1.9howtostatic-files
  STATIC_ROOT = os.path.join(PROJECT_ROOT, 'static')
  STATIC_URL = 'static'
  ...

Pada settings.py, terdapat STATIC_ROOT yang menentukan absolute path ke direktori static files ketika menjalankan perintah collectstatic pada proyek dan terdapat STATIC_URL yang merupakan URL yang dapat diakses publik untuk memperoleh static files tersebut.

Perintah collectstatic adalah perintah untuk mengumpulkan static files dari semua app sehingga mempermudah akses untuk semua app.

Penjelasan lebih lengkap mengenai static files dapat kamu baca pada referensi ini.

Selector pada CSS

Pada bagian ini kamu akan mempelajari 3 buah selector pada CSS, yaitu element selector, class selector, dan ID selector.

Element Selector
Element selector menggunakan tag HTML sebagai selector untuk mengubah properti yang terdapat dalam tag tersebut.
```
h1 {
  color: #fca205;
  font-family: "Monospace";
  font-style: italic;
}
```
ID Selector
ID selector menggunakan ID pada tag sebagai selector-nya.
Kamu dapat menambahkan ID pada templat HTML sebagai berikut (ID harus bersifat unik).
```
...
<body>
  <div id="header">
    <h1>Tutorial CSS Yay</h1>
  </div>
  ...
</body>
```
Kemudian tambahkan ID tersebut sebagai selector pada file CSS kamu.
```
#header {
  background-color: #f0f0f0;
  margin-top: 0;
  padding: 20px 20px 20px 40px;
}
```
Dapat dilihat perubahan tampilan yang terjadi. Silakan menambahkan ID selector lain untuk mengubah properti lainnya.

Class Selector

Selanjutnya, class selector yang dapat digunakan untuk memperindah tampilan templat HTML. Tambahkan beberapa class pada tag HTML

...
<div id="main">
    <div class="content_section">
        <p class="date">published: 28 September 2022</p>
        <h2><a href="">Tutorial CSS ku</a></h2>
        <p id="content_1">Yay ini tutorial yang gampang!</p>
    </div>
    <div class="content_section">
        <p class="date ">published: 29 September 2022</p>
        <h2><a href="">Tutorial CSS mu</a></h2>
        <p id="content_2">Yay ini tutorial yang mudah!</p>
    </div>
    <div class="content_section">
        <p>published: 30 September 2022</p>
        <h2><a href="">Tutorial CSS semua</a></h2>
        <p id="content_3">Yay ini tutorial yang tidak sulit!</p>
    </div>
</div>
...

Kemudian taambahkan class selector berikut pada file CSS kamu.

.content_section {
  background-color: #3696e1;
  margin-bottom: 30px;
  color: #000000;
  font-family: cursive;
  padding: 20px 20px 20px 40px;
}

Silakan menambahkan class selector lain untuk mengubah properti lainnya.

Perbedaan penulisan ID selector dan class selector adalah ID selector menggunakan format #[id_name] (selalu diawali #) sedangkan class selector menggunakan format .[class_name] (diawali .).

Untuk memperdalam pengetahuan mengenai CSS Selector Reference, kamu dapat membaca referensi ini.

Tips & Trik untuk CSS

Mengenal Combinators

Setelah mengetahui selector pada CSS, kamu dapat mengenal combinators pada CSS. Combinators adalah suatu penanda yang menandakan hubungan antar elemen, class, atau ID pada CSS.

Terdapat empat combinators pada CSS.

Descendant selector (space)
Child selector (>)
Adjacent sibling selector (+)
General sibling selector (~)

Silakan pelajari keempat jenis combinators tersebut CSS tersebut pada referensi ini.

Mengenal CSS Pseudo-class

Pseudo-class digunakan untuk mendefinisikan state khusus dari sebuah elemen. Contoh beberapa pseudo-class adalah sebagai berikut.

:active memilih elemen yang sedang aktif
:checked memilih elemen yang telah dicentang
:disabled memilih elemen yang telah dinonaktifkan
:enabled memilih elemen yang telah diaktifkan
:link memilih tautan yang belum pernah dikunjungi
:hover memilih elemen pada saat kursor berada diatasnya
:visited memilih link yang sudah pernah dikunjungi

Umumnya pseudo-class dituliskan dalam bentuk sebagai berikut.

selector:pseudo-class {
  properties: value;
}

Perbedaan Margin, Border dan Padding

Kamu dapat melihat perbedaan margin, border, dan padding pada referensi ini.

Pengenalan Bootstrap

Terdapat banyak framework CSS yang sering digunakan sekarang ini, salah satunya adalah Bootstrap CSS. Bootstrap CSS menyediakan class-class yang sering digunakan dalam pengembangan suatu situs web. Class-class yang disediakan seperti navbar, card, footer, carousel, dan lain-lain. Selain itu, Bootstrap CSS juga menyediakan banyak fitur yang berguna. Salah satu fitur yang berguna pada Bootstrap CSS adalah grid system yang berguna untuk membagi halaman situs web menjadi lebih mudah dan menarik.

Untuk mempelajari lebih lanjut mengenai Bootstrap CSS, kamu dapat membaca referensi ini.

Responsive Web Design

Responsive web design merupakan metode atau pendekatan sistem desain web yang bertujuan untuk memberikan tampilan situs web yang terlihat baik pada semua perangkat (baik pada komputer meja, tablet, atau ponsel). Responsive web design tidak mengubah konten yang ada pada situs web, melainkan hanya mengubah cara penyajian pada setiap perangkat agar sesuai dengan ukuran layar dan perilaku perangkat masing-masing. Responsive web design menggunakan CSS untuk mengubah ukuran (seperti menyusutkan dan membesarkan) suatu elemen.

Untuk mengecek penerapan responsive web design pada suatu situs web, kamu dapat mengakses situs web tersebut dan membuka fitur Toggle Device Mode pada browser.

Berikut adalah keyboard shortcut untuk mengakes fitur tersebut pada browser Google Chrome.

Windows/Linux : CTRL + SHIFT + M
Mac : Command + Shift + M

Untuk mempelajari lebih lengkap mengenai Reponsive Web Design, kamu dapat membuka referensi ini.

Tutorial: Menambahkan Bootstrap pada Aplikasi Wishlist

Berikut adalah hal yang perlu kamu lakukan untuk menyelesaikan bagian tutorial ini.

Menambahkan barisan kode yang dibutuhkan agar aplikasi kamu dapat menggunakan Bootstrap.
Silakan merujuk kepada informasi pada laman ini.
Silakan lakukan modifikasi pada tampilan aplikasi wishlist kamu sekreatif mungkin dengan menggunakan Bootstrap.

Tambahkan navigation bar (boleh menggunakan Bootstrap) pada halaman wishlist.html kamu dan tampilkan nama kamu dan tombol logout pada navigation bar yang kamu buat.

Referensi Tambahan

Kamu dapat membuka tautan ini untuk melihat kode yang dapat kamu gunakan untuk menambahkan navigation bar dengan menggunakan Bootstrap.
Kamu dapat membuka tautan ini untuk melihat kode yang dapat kamu gunakan untuk menambahkan navigation bar dengan menggunakan CSS secara manual.

Akhir Kata

Selamat! Kamu telah menyelesaikan Tutorial 4 dengan baik. 😄

Seperti biasa, jangan lupa untuk melakukan add, commit, dan push perubahan yang sudah kamu lakukan untuk menyimpannya ke dalam repositori GitHub sebelum kamu menutup pekerjaan kamu. 😉

Kontributor

Christopher Ekaputra Loe
Zefanya Soplantila
Rafi Indrawan Dirgantara
Muhammad Abdurrahman Basyah
Muhammad Athallah

Credits

Tutorial ini dikembangkan berdasarkan PBP Ganjil 2021 yang ditulis oleh Tim Pengajar Pemrograman Berbasis Platform 2021 (@prakashdivyy). Segala tutorial serta instruksi yang dicantumkan pada repositori ini dirancang sedemikian rupa sehingga mahasiswa yang sedang mengambil mata kuliah Pemrograman Berbasis Platform dapat menyelesaikan tutorial saat sesi lab berlangsung.

Lab 4: Web Design Menggunakan HTML dan CSS3

Tujuan Pembelajaran​

Pengenalan HTML​

Pengenalan CSS​

Static files pada Django​

Selector pada CSS​

Tips & Trik untuk CSS​

Mengenal Combinators​

Mengenal CSS Pseudo-class​

Perbedaan Margin, Border dan Padding​

Pengenalan Bootstrap​

Responsive Web Design​

Tutorial: Menambahkan Bootstrap pada Aplikasi Wishlist​

Tutorial: Menambahkan Navbar pada Keseluruhan Laman Aplikasi​

Referensi Tambahan​

Akhir Kata​

Kontributor​

Credits​