Scribd
Unggah
165 tayangan

Modul 4 - Web Client - CSS Konten Web

Modul ini membahas tentang layout website dengan CSS. Terdapat penjelasan tentang model box, pengaturan ukuran box, dan contoh kode CSS untuk membuat layout sederhana dengan dua kolom. Modul ini juga memberikan latihan dan tugas untuk mempraktikkan penggunaan CSS dalam membuat layout halaman web.

Diunggah oleh

Bondan Prakoso
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
165 tayangan

Modul 4 - Web Client - CSS Konten Web

Modul ini membahas tentang layout website dengan CSS. Terdapat penjelasan tentang model box, pengaturan ukuran box, dan contoh kode CSS untuk membuat layout sederhana dengan dua kolom. Modul ini juga memberikan latihan dan tugas untuk mempraktikkan penggunaan CSS dalam membuat layout halaman web.

Diunggah oleh

Bondan Prakoso
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 8

MODUL 4

PRAKTIKUM PEMROGRAMAN WEB CLIENT

Disusun oleh :

FX. Henry Nugroho, S.T., M.Cs.

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

AKAKOM

YOGYAKARTA

2019

i
MODUL 4
LAYOUT WEBSITE DENGAN CSS

CAPAIAN PEMBELAJARAN

1. Menuliskan konten teks


2. Memformat konten teks dengan CSS (warna, bentuk dan jenis huruf, latar belakang)
3. Megatur margin, padding dan border
4. Positioning konten

KEBUTUHAN ALAT/BAHAN/SOFTWARE

1. Editor notepad / notepad++


2. Browser

DASAR TEORI

Sebelum kemampuan CSS berkembang secara luas, desainer web menggunakan


tabel HTML untuk membuat layout halaman. Sebuah tabel membentuk kotak alami
yang membuatnya relatif sepele untuk mengatur konten menjadi baris dan kolom yang
selaras. Namun untuk tingkat lanjut menggunakan tabel untuk mengatur layout akan
menimbulkan banyak kesulitan, CSS 3 adalah cara terbaik untuk membuat layout
website.

 Model Box
Setiap elemen yang ada pada halaman web akan diletakkan dalam sebuah box, dimana
box tersebut akan terkait dengan pengaturan yang ada di file CSS. ilustrasi model box
pada CSS adalah seperti berikut ini

1
Penjelasan:

 Content – Bagian utama dari web dimana text dan gambar akan ditampilkan
 Padding – jarak antara konten dengan pembatas box. padding bersifat
transparan
 Border – berfungsi sebagai pembatas antara kontent dengan padding. Border
bisa transparan atau terlihat.
 Margin – jarak diluar border yang membatasi dengan box yang lain. margin
bersifat transparan.

beberapa bentuk dari border

 Pengaturan Ukuran Box


Digunakan untuk menentukan height/width sebuah box. Dalam melakukan pengaturan
bisa dibagi menjadi dua jenis, yaitu ukurannya tetap(fixed) dan ukuran box akan
menyesuaikan ukuran layar (responsive). Property yang digunakan untuk mengatur
ukuran box:

 auto : merupakan nilai default. Browser yang akan menghitung nilai


height/width box.
 length = ditentukan dengan satuan px, cm etc. Termasuk fixed value

2
 % = menentukan height/width dari box dengan menuliskan prosentasi
perbandingannya. Akan menyesuaikan dengan perbandingan ukuran layar
(responsive).
 initial = menentukan height/width menjadi nilai default
 inherit - nilai height/width akan mengacu pada parent value

PRAKTIK

Praktik 1 : Membuat file CSS


1. Ketikan kode program berikut ini dan simpan dengan nama desain.css

3
4
2. Ketikkan kode HTML berikut, beri nama index.html

5
LATIHAN

1. Modifikasi file CSS sehingga terlihat border-nya. coba dengan 3 jenis border yang
berbeda-beda.

6
2. Tambahkan sebuah kolom (side) disebelah kanan pengumuman, atur sehingga
tampilan tetap proporsional.

TUGAS

Tugas diberikan oleh dosen pengampu

REFERENSI

1. https://www.w3schools.com/css/

Anda mungkin juga menyukai