PRAKTIKUM 7

Teks dan Background

Tujuan
- Mahasiswa dapat memahami pengaturan teks melalui CSS
- Mahasiswa dapat memahami berbagai jenis ukuran teks
- Mahasiswa dapat memahami pengaturan background melalui CSS

Dasar Teori
Pada materi kali ini akan dibahas tentang teks yang meliputi pemilihan font, pengaturan
format teks, dan beberapa property yang biasa digunakan pada teks. Selain itu juga akan di
bahas tentang background, baik background berupa warna atau gambar.

Teks
Pengaturan format pada teks sangat mempengaruhi kemudahan bagi pengunjung dalam
membaca halaman web anda. Property untuk pengaturan teks setidaknya dapat dibagi kedalam
dua kelompok, yaitu:
- Pengaturan yang langsung mempengaruhi font dan tampilannya di layar. Misalnya
seperti typeface yang didalamnya termasuk pengaturan tebal, normal, atau italic dan
juga pengaturan ukuran teks
- Pengaturan yang memiliki efek sama, tanpa mempertimbangkan jenis font yang anda
gunakan. Pengaturan ini termasuk warna teks dan jarak antar huruf atau antar karakter.

Terminologi Typeface
SERIF
Jenis font ini memiliki detail
ekstra pada tiap tepiannya. Detail
ini dikenal dengan nama serifs
SANS-SERIF MONOSPACE
Jenis font ini memiliki garis lurus Setiap huruf pada font monospace
hingga ujung karakter, sehingga memiliki lebar yang sama (dan
dari sisi design lebih terlihat bersih sebaliknya).

Dalam dunia percetakan, jenis
font ini sering dipakai pada
penulisan yang panjang, karena
karakter tulisan jenis ini mudah
untuk dibaca
Layar memiliki resolusi yang lebih Jenis font ini umum dipakai pada
kecil daripada cetak, sehingga kode pemrograman karena mudah
apabla teksnya kecil, jenis sans- untuk diikuti teksnya
serif dapat lebih mudah di baca

Memilih Jenis Font Untuk Website Anda

Saat memilih jenis font yang ingin anda pakai pada website anda, perlu dipahami bahwa
browser hanya menampilkan font yang telah terinstall dikomputer yang anda pakai. Hal ini
berakibat terhadap jumlah pilihan font yang terbatas. Ada beberapa teknik yang bisa digunakan
untuk mengatasi keterbatasan pemilihan jenis font tersebut.
Dimungkinkan juga untuk menentukan lebih dari satu jenis font dan membuat semacam
urutan pemilihan. Misalnya jenis font yang pertama tidak dikenali, maka akan memakai jenis
font berikutnya. Contoh penulisannya misalnya seperti berikut ini:

Materi Desain Web – PENS Dwi Susanto SST MT

Font-family: georgia, Times, serif;

Terdapat beberapa cara untuk menggunakan fonts dalam web anda dengan tidak hanya
terbatas pada fonts yang telah terinstall dikomputer anda. Akan tetapi yang perlu
dipertimbangkan adalah tidak semua font gratis, sebagian ada yang harus anda beli lisensinya

Font-Family Font-Face Service-Based Font-Face

Font perlu terinstall terlebih
dahulu pada komputer yang
dipakai. CSS hanya berlaku untuk
menentukan font yang akan
dipakai
CSS menentukan dimana lokasi Layanan komersial memberikan
font dapat didownload apabila akses kepada pengguna ke
belum terinstall di komputer koleksi yang cukup banyak
dengan menggunakan @font-face

Kekurangan

Pilihan terbatas hanya pada font Pengguna harus mendownload file Ada biaya yang harus dikeluarkan
yang telah terinstall font, yang seringkali untuk membayar layanan font
memperlambat dalam memuat yang dipakai. Hal ini berkaitan
halaman web yang diakses dengan lisensi font

Lisensi

Anda tidak ikut mendistribusikan Lisensi dari font yang dipakai, Penyedia layanan yang akan
font yang anda gunakan, jadi harus mengizinkan mengurusi segala sesuatu terkait
tidak ada kekhawatiran terkait pendistribbusian dengan lisensi dari font yang anda
lisensi dari font yang anda pakai menggunakan @font-face gunakan

Pilihan Font

Pilihan font terbatas hanya pada Pilihan terbatas, karena tidak Setiap penyedia layanan
font yang telah terinstall banyak font yang disediakan secara memberikan pilihan font yang
gratis berbeda

Menentukan Jenis Font dengan Font-Family

Property font-family memungkinkan

anda untuk menentukan jenis font yang <style type="text/css">
body {
akan diterapkan pada elemen yang anda font-family: Georgia, Times,
tentukan. serif;}

h1, h2 {
font-family: Arial, Verdana, sans-
Materi Desain Web – PENS serif;} Dwi Susanto SST MT
.credits {
font-family: "Courier New",
 Value dari property ini adalah tipe font
yang ingin anda pakai.

Pengguna yang mengunjungi website

anda baru dapat menampilkan jenis font
yang anda tentukan apabila font tersebut
telah diinstall dikomputer pengguna
tersebut.
Anda bisa menentukan beberapa font
sekaligus yang dipisahkan dengan tanda
koma. Apabila jenis font yang pertama
tidak dikenali, maka akan digunakan
jenis font berikutnya dari daftar font Apabila nama font lebih dari dua suku kata,
yang anda tuliskan. maka perlu dituliskan dalam dua tanda petik.

Seringkali daftar font yang dituliskan Desainer menyarankan bahwa sebuah halaman
diakhiri dengan jenis font yang umum, web akan nampak lebih baik apabila
misalnya serif. menggunakan jenis font tidak lebih dari tiga
jenis dalam satu halaman.

Ukuran Font
Property font-size memungkinkan anda untuk menentukan ukuran dari font yang anda
gunakan. Terdapat beberapa cara dalam menentukan ukuran dari sebuah font. Yang paling
umum dipakai adalah:
• Pixels
Pixel seringkali dipakai karena memberi keluasan web desainer dalam menenentukan
secara tepat ruangan yang diperlukan untuk teks yang akan ditampilkan. Nilai dari
besarnya pixel diikuti huruf px
• Persentase
Ukuran default teks pada browser adalah 16px. Jadi sebuah font berukuran 75% sama
dengan 12px, dan 200% sama dengan 32px.
Apabila anda telah menentukan ukuran font pada elemen <body> dengan ukuran 75%
dari ukuran default (sehingga ukurannya 12px), dan kemudian anda menentukan lagi
ukuran pada elemen yang berada dalam elemen <body> dengan ukuran 75%, maka
ukuran fontnya akan menjadi 9px, yakni 75% dari 12px.
• EM
Sebuah em sama dengan lebar dari sebuah huruf m. Em memungkinkan anda untuk
merubah ukuran teks yang berhubungan dengan ukuran yg ada di parent element.

Materi Desain Web – PENS Dwi Susanto SST MT

Pseudo Element dan Pseudo Class
Pada pengaturan teks, seringkali kita menggunakan pseudo element. Pseudo elemen ini
memiliki beberapa bentuk dan beberapa model pengaturan. Misalnya untuk mengatur agar
huruf pertama dari sebuah paragraf ukurannya jauh lebih besar dibandingkan yang lain. Pseudo
class yang akan sering kita temui adalah link.

Contoh Pseudo Element Cara ini memungkinkan anda untuk

mengatur ukuran yang berbeda untuk huruf
pertama atau baris pertama pada sebuah teks
p.intro:first-letter { dengan menggunakan :first-letter dan :first-
font-size: 200%;} line. Model ini seperti yang biasa terlihat
p.intro:first-line {
font-weight: bold;}
pada majalah atau surat kabar dimana huruf
pertama ukurannya jauh lebih besar
dibandingkan yang lain
Contoh Pseudo Class Browser secara default akan menampilkan
link dengan warna biru serta garis
dibawahnya, dan warna akan berubah
warnanya setelah link tersebut di klik untuk
memberi tahu pengguna link mana saja yang
telah dikunnjungi.

a:link {
color: deeppink; :link
text-decoration: none;}
a:visited { Mengatur tampilan link yang belum diklik
color: black;}
a:hover {
color: deeppink; :visited
text-decoration: underline;}
a:active { Mengatur tampilan link yang telah di klik
color: darkcyan;}

:hover
Untuk mengatur tampilan saat pointer
berada di atas link.

Background
Properti background digunakan untuk mendefinisikan efek background pada sebuah
element. Properti CSS untuk background antara lain:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Background Color

Materi Desain Web – PENS Dwi Susanto SST MT

 h1 {background-
color:#6495ed;}
Digunakan untuk mengatur warna
p {background-color:#e0ffff;} background pada sebuah element. Biasanya
div {background- nilainya berupa hexadesimal, meskipun
color:#b0c4de;} tidak menutup kemungkinan untuk
menuliskan kode RGB atau nama warna.

Background Image

body { Background image untuk mengatur

background- gambar sebagai background sebuah
image:url('paper.gif'); element. Secara default, gambar yang
} digunakan sebagai background akan
ditampilkan berulangkali hingga
memenuhi area yang menampilkannya
url merupakan lokasi dimana file gambar tersebut berada.

Background Repeat

Background Repeat berfungsi untuk body

mengatur apakah gambar akan {
ditampilkan berungkali ke arah sumbu x background-
image:url('gradient2.png');
atau sumbu y, atau gambar ditampilkan background-repeat:repeat-y;
sekali saja. Secara default, tampilan }
background berupa gambar akan
ditampilkan baik ke arah sumbu x
ataupun sumbu y. Adakalanya gambar body
hanya perlu ditampilkan berulangkali ke {
background-
arah sumbu y atau sumbu x. image:url('gradient2.png');
background-repeat:no-repeat;
}
Contoh kode berikutnya untuk mengatur
agar tampilan background berupa
gambar tidak diulangi atau hanya
ditampilkan sekali saja

Materi Desain Web – PENS Dwi Susanto SST MT

Background Position

Property background-position
digunakan untuk menentukan titik awal div
lokasi dari background. {
background-image:url('smiley.gif');
background-repeat:no-repeat;
Nilai dari property background position background-position:left top;
adalah berpatokan pada sumbu X dan Y. }
Nilai pertama adalah lokasi berdasarkan
sumbu X dan nilai kedua dari sumbu Y.

Nilai yang bisa digunakan untuk border position antara lain

left top Apabila anda tidak menuliskan satu lokasi saja,
left center misalnya left, maka secara otomatis posisi lokasi
left bottom kedua adalah ditengah.
right top
right center
right bottom Contoh penggunaan:
center top
center center
background-position:left top;
center bottom

x% y% Nilai pertama adalah posisi horisontal dan nilai kedua

adalah vertical. Posisi 0% 0% berada di pojok kiri atas.
Pojok kanan bawah bernilai 100% 100%. Apabila anda
Contoh: menuliskan hanya satu nilai, maka nilai berikutnya
Background-position:25% secara otomatis 50%. Secara default bernilai 0% 0%
75%;

xpos ypos Deskripsinya sama dengan sebelumnya. Contoh:

Background-position: 20px 40px;

Materi Desain Web – PENS Dwi Susanto SST MT

Langkah Kerja
Berikut ini langkah kerja yang perlu anda lakukan selama menyelesaikan semua percobaan
yang ada pada praktikum ini
1. Buatlah folder baru bernama “Praktikum7” dan pastikan anda menyimpan semua file
percobaan di praktikum ini pada folder tersebut
2. Buat folder css dan images
3. Simpan semua file gambar yang diperlukan pada file images
4. Buka teks editor pilihan anda
5. Ketikkan semua kode yang ada pada tiap percobaan
6. Setiap kali anda menyelesaikan satu percobaan, simpan dengan nama file sesuai nomor
percobaan dengan ekstensi .html
7. Apabila anda menggunakan notepad, pastikan anda merubah pilihan tipe file pada “Save
as Type” menjadi “All Files”
8. Apabila anda menggunakan notepad++, pada pilihan tipe file, pilih yang bertipe HTML.

Percobaan
Percobaan 1 : Font Family

Percobaan 2: Font Size

Materi Desain Web – PENS Dwi Susanto SST MT

Percobaan 3 : Text Transform

Materi Desain Web – PENS Dwi Susanto SST MT

Percobaan 4: Text Decoration

Percobaan 5 : Text Shadow

Materi Desain Web – PENS Dwi Susanto SST MT

Percobaan 6: Pseudo Element

Percobaan 7: Pseudo Class : style link

Materi Desain Web – PENS Dwi Susanto SST MT

Percobaan 8 : Selector ID

Percobaan 9: Selector Class

Materi Desain Web – PENS Dwi Susanto SST MT

Percobaan 10: CSS Background

Percobaan 11 : Background Image Repeat

Materi Desain Web – PENS Dwi Susanto SST MT

Percobaan 12 : Background Image no repeat and position

Materi Desain Web – PENS Dwi Susanto SST MT

Tugas
1. Buatlah sebuah halaman yang menggunakan pengaturan teks yang telah anda pelajari di
atas yang meliputi teks shadow, pengaturan style link dan lain-lain. Hasil outputnya
seperti di bawah ini. Didalamnya juga terdapat link. Judul nama PENS menggunakan
text shadow. Begitu juga tinggi tiap baris pada paragraph juga diatur.

2. Dengan menggunakan gambar sebagai background dan pengaturan format teks, buatlah
tampilan seperti di bawah ini

Materi Desain Web – PENS Dwi Susanto SST MT

Materi Desain Web – PENS Dwi Susanto SST MT