Tujuan Teks dan Background 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 SANS-SERIF MONOSPACE Jenis font ini memiliki detail ekstra pada tiap tepiannya. Detail ini dikenal dengan nama serifs Jenis font ini memiliki garis lurus hingga ujung karakter, sehingga dari sisi design lebih terlihat bersih Setiap huruf pada font monospace memiliki lebar yang sama (dan 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 kecil daripada cetak, sehingga apabla teksnya kecil, jenis sans-serif dapat lebih mudah di baca Jenis font ini umum dipakai pada kode pemrograman karena mudah untuk diikuti teksnya 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: 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 font dapat didownload apabila belum terinstall di komputer Layanan komersial memberikan akses kepada pengguna ke koleksi yang cukup banyak dengan menggunakan @font-face Kekurangan Pilihan terbatas hanya pada font yang telah terinstall Pengguna harus mendownload file font, yang seringkali memperlambat dalam memuat halaman web yang diakses Ada biaya yang harus dikeluarkan untuk membayar layanan font yang dipakai. Hal ini berkaitan dengan lisensi font Lisensi Anda tidak ikut mendistribusikan font yang anda gunakan, jadi tidak ada kekhawatiran terkait lisensi dari font yang anda pakai Lisensi dari font yang dipakai, harus mengizinkan pendistribbusian dengan menggunakan @font-face Penyedia layanan yang akan mengurusi segala sesuatu terkait lisensi dari font yang anda gunakan Pilihan Font Pilihan font terbatas hanya pada font yang telah terinstall Pilihan terbatas, karena tidak banyak font yang disediakan secara gratis Setiap penyedia layanan memberikan pilihan font yang berbeda Menentukan Jenis Font dengan Font-Family
Property font-family memungkinkan anda untuk menentukan jenis font yang akan diterapkan pada elemen yang anda tentukan. 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 yang anda tuliskan. Seringkali daftar font yang dituliskan diakhiri dengan jenis font yang umum, misalnya serif. <style type="text/css"> body { font-family: Georgia, Times, serif;} h1, h2 { font-family: Arial, Verdana, sansserif;}.credits { font-family: "Courier New", Courier, monospace;} </style> Apabila nama font lebih dari dua suku kata, maka perlu dituliskan dalam dua tanda petik. Desainer menyarankan bahwa sebuah halaman web akan nampak lebih baik apabila 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. 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 p.intro:first-letter { font-size: 200%;} p.intro:first-line { font-weight: bold;} Cara ini memungkinkan anda untuk mengatur ukuran yang berbeda untuk huruf pertama atau baris pertama pada sebuah teks dengan menggunakan :firstletter dan :first-line. Model ini seperti yang biasa terlihat 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; text-decoration: none;} a:visited { color: black;} a:hover { color: deeppink; text-decoration: underline;} a:active { color: darkcyan;} :link Mengatur tampilan link yang belum diklik :visited Mengatur tampilan link yang telah di klik :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 h1 {backgroundcolor:#6495ed;} p {background-color:#e0ffff;} div {backgroundcolor:#b0c4de;} Digunakan untuk mengatur warna background pada sebuah element. Biasanya nilainya berupa hexadesimal, meskipun tidak menutup kemungkinan untuk menuliskan kode RGB atau nama warna. Background Image body { backgroundimage:url('paper.gif'); } url merupakan lokasi dimana file gambar tersebut berada. Background image untuk mengatur gambar sebagai background sebuah element. Secara default, gambar yang digunakan sebagai background akan ditampilkan berulangkali hingga memenuhi area yang menampilkannya Background Repeat Background Repeat berfungsi untuk mengatur apakah gambar akan ditampilkan berungkali ke arah sumbu x atau sumbu y, atau gambar ditampilkan sekali saja. Secara default, tampilan background berupa gambar akan ditampilkan baik ke arah sumbu x ataupun sumbu y. body { backgroundimage:url('gradient2.png'); background-repeat:repeat-y; } body { backgroundimage:url('gradient2.png'); background-repeat:no-repeat; }
Adakalanya gambar hanya perlu ditampilkan berulangkali ke arah sumbu y atau sumbu x. Contoh kode berikutnya untuk mengatur agar tampilan background berupa gambar tidak diulangi atau hanya ditampilkan sekali saja Background Position Property background-position digunakan untuk menentukan titik awal lokasi dari background. Nilai dari property background position adalah berpatokan pada sumbu X dan Y. Nilai pertama adalah lokasi berdasarkan sumbu X dan nilai kedua dari sumbu Y. div { background-image:url('smiley.gif'); background-repeat:no-repeat; background-position:left top; } Nilai yang bisa digunakan untuk border position antara lain left top left center left bottom right top right center right bottom center top center center center bottom Apabila anda tidak menuliskan satu lokasi saja, misalnya left, maka secara otomatis posisi lokasi kedua adalah ditengah. Contoh penggunaan: background-position:left top;
x% y% Contoh: Background-position:25% 75%; 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 menuliskan hanya satu nilai, maka nilai berikutnya secara otomatis 50%. Secara default bernilai 0% 0% xpos ypos Deskripsinya sama dengan sebelumnya. Contoh: Background-position: 20px 40px; 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 Percobaan 3 : Text Transform
Percobaan 4: Text Decoration Percobaan 5 : Text Shadow
Percobaan 6: Pseudo Element Percobaan 7: Pseudo Class : style link
Percobaan 8 : Selector ID
Percobaan 9: Selector Class
Percobaan 10: CSS Background Percobaan 11 : Background Image Repeat
Percobaan 12 : Background Image no repeat and position
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