Institut Sains dan Teknologi Terpadu Surabaya

Jl. Ngagel Jaya Tengah 73 - 77, Surabaya 60284

Telp. (031) 5027920 Fax. (031) 5041509

Laboratorium : L-204 Praktikum : Pemrograman Web

Waktu : Jumat/ 15:30–18:00 Jurusan : S1 – Sistem Informasi Bisnis
Minggu Ke :4 Tanggal : 15 Maret 2024
Materi : CSS (Layouting) Jenis Soal : Materi dan Tugas

MATERI (TOTAL: 40)

Buatlah sebuah website Uap Air sederhana!
Website Uap Air merupakan website parodi dari website terkenal “Steam”, website Uap Air
memiliki tampilan halaman utama yang berisikan game-game yang direkomendasikan oleh websitenya.

Untuk tampilan utama website Uap Air adalah seperti berikut:

Untuk color code dari halaman utama Uap Air diberikan sebagai berikut:
1. Navbar: #171d25
2. Background: #1b2a3a
3. Font putih : whitesmoke
4. Font biru: #1878bf
5. Button Play/Buy : #44701b
6. Background content game: #141e2a (backgroundnya tulisan “Counter Strike 2”, “Destiny 2” dan “Forza
Horizon 5”)

1
1. Navbar

Navbar terdiri dari 3 bagian, yang pertama adalah logo, isi dari nav dan juga profile
a. Logo
Logo terdapat di bagian kiri navbar, ukuran logo adalah 2% dari panjang navbar.

b. Isi navbar
Isi navbar memiliki beberapa isi yaitu, Store, Library, Community, Mitsubishi. Seluruh isi navbar
menggunakan font yang di bold dan halaman yang aktif akan berwarna biru dan diberi underline

UNTUK HALAMAN YANG AKTIF JIKA DI HOVER WARNA TIDAK BERUBAH MENJADI
UNGU

c. Profile
Profile terdapat di bagian kanan dari navbar, ukuran gambar profile adalah 2% dari panjang navbar.
Terdapat nama user di sebelah kanan gambar profile

2. Side Navigation

Side navigation berada di sisi kiri Feature & Recommended, isi dari side navigation sesuai dengan contoh diatas.
Ketebalan dari font tersebut 500 dan terdapat gap sebesar 1% dari tinggi halaman.

2
3. Feature & Recommended

Isi dari feature & recommended adalah seperti di contoh atas, harga-harga yang tertera adalah sebagai berikut:
Destiny 2 = $39.99
Forza Horizon 5 = $99.99
Isi kotak Destiny 2 dan Forza Horizon 5 sedikit masuk sesuai dengan contoh diatas

4. Footer

Footer berisikan NRP dan NAMA di tengah

UNTUK MENGHILANGKAN SCROLLBAR TETAPI TETAP BISA SCROLL

MENGGUNAKAN STYLE SEPERTI BERIKUT:

*::-webkit-scrollbar {
display: none;
}
NOTES:
FITUR INI HANYA BISA DIGUNAKAN JIKA BROWSER ANDA ADALAH CHROME
ATAUPUN EDGE

3
 DILARANG MENGGUNAKAN MATERI YANG BELUM DIAJARKAN PADA MINGGU INI
JIKA MELANGGAR MAKA NILAI MATERI : 0

PERHATIKAN KETENTUAN DIBAWAH :

● Highlight kriteria yang dikerjakan dengan warna kuning dan kumpulkan word beserta dengan
file tugas, apabila tidak dikumpulkan maka tugas tidak akan diperiksa.
● Akan ada pengurangan nilai sebesar -5 untuk setiap kriteria yang dihighlight namun tidak
dikerjakan.
● MENCONTEK = Nilai MOD
● Tidak boleh menggunakan <DIV>, Position ataupun macam-macam Display. Untuk Materi
diwajibkan membuatnya semua menggunakan table. Untuk yang melanggar nilai akan di DIV
2

MATERI : 40
SCORE KRITERIA
Navbar (10)
0-5 Tampilan navbar sesuai contoh
0-5 Format layout dan warna navbar sesuai dengan ketentuan
Sidebar (5)
0/5 Sidebar sesuai dengan contoh
Feature & Recommended (20)
0/3 Posisi Feature & Recommended sesusai di tengah
0/2 Format font sesuai dengan contoh
0/2 Format penempatan gambar “Counter Strike 2” sesuai dengan contoh
0-3 Format isi tulisan “Counter Strike 2”, “Free to Play” dan button Play sesuai dengan
contoh
0/3 Format penempatan gambar “Destiny 2” sesuai dengan contoh
0-2 Format isi tulisan “Destiny 2” dan button “$39.99” sesuai dengan contoh
0/3 Format penempatan gambar “Destiny 2” sesuai dengan contoh
0-2 Format isi tulisan “Forza Horizon 5” dan button “$99.99” sesuai dengan contoh
Footer (2)
0/2 Footer sesuai dengan contoh
Lainnya (3)
0/3 Menggunakan CSS eksternal
Total : 40

4
 TUGAS (TOTAL:30)
Lanjutkan dari MATERI, buatlah page library dan page user dari website Uap Air!
Tugas ini merupakan lanjutan dari MATERI, semua halaman di tugas adalah kelanjutan dari MATERI.
Di tugas kali ini, lanjutkan website Uap Air yang ada di MATERI dan buatlah halaman untuk library dan
halaman untuk usernya. Untuk penjelasan-penjelasan dari halaman tersebut terdapat seperti berikut:
1. Tampilan Library

Halaman library berisikan tentang game-game yang dimiliki oleh user, untuk TUGAS hanya
buat halaman Osu!. Di dalam isi library mencakup judul game, total play time, button untuk play,
dan juga deskripsi dari game tersebut.
- Untuk deskripsi dari game tersebut bisa diambil dari source berikut:
https://en.wikipedia.org/wiki/Osu!
Isi Deskripsi

JANGAN LUPA UNTUK NAVBAR YANG AKTIF SESUAI DENGAN PAGENYA.

5
 2. Tampilan User

Tampilan user mencakup profile picture user, nama user, level user, dan juga deskripsi profile yang
sesuai dengan contoh diatas.

DILARANG MENGGUNAKAN MATERI YANG BELUM DIAJARKAN PADA MINGGU INI

JIKA MELANGGAR MAKA NILAI MATERI : 0

PERHATIKAN KETENTUAN DIBAWAH :

● Highlight kriteria yang dikerjakan dengan warna kuning dan kumpulkan word beserta
dengan file tugas, apabila tidak dikumpulkan maka tugas tidak akan diperiksa.
● Akan ada pengurangan nilai sebesar -5 untuk setiap kriteria yang dihighlight namun tidak
dikerjakan.
● MENCONTEK = Nilai MOD 2
● Tidak boleh menggunakan <DIV>, Position ataupun macam-macam Display. Untuk Tugas
diwajibkan membuatnya semua menggunakan table. Untuk yang melanggar nilai akan di DIV
2
● Jika menggunakan Framework CSS apapun, nilai akan di 0 kan
● Jangan menggunakan ChatGPT, Gemini, Copilot, atau LLM lainnya. Jika ketahuan memakai
maka nilai akan di 0 kan

6
TUGAS: 30
Highlight kriteria yang dikerjakan dengan warna kuning dan kumpulkan beserta dengan file tugas,
apabila tidak dikumpulkan maka tugas tidak akan diperiksa.
SCORE KRITERIA
Materi (7)
0/7 Sempurnakan Materi!
Library (15)
0/3 Tampilan sidebar library sesuai dengan contoh
0/2 Terdapat background image yang sesuai dengan gamenya
0/2 Terdapat kotak yang berisikan judul game tersebut, dan format sesuai
0/4 Terdapat kotak yang berisikan total playtime dan button Play sesuai dengan contoh
0/2 Terdapat kotak yang berisikan deskripsi dari game sesuai dengan contoh
0/2 Format penulisan deskripsi sesuai dengan contoh
User (8)
0/5 Format user profile, nama dan level sesuai dengan contoh
0/3 Terdapat kotak berisikan deskripsi profile
Total: 30