...

Praktikum 3.3 CSS (Mengatur Teks )

by user

on
Category: Documents
0

views

Report

Comments

Transcript

Praktikum 3.3 CSS (Mengatur Teks )
Mengatur Teks
1. Mengatur Perataan Teks
Properti yang dipakai adalah text-align, nilainya bisa berupa left, center, right, atau justify
Nilai untuk properti text-align
Nilai Properti
Keterangan
center
Teks diletakkan di tengah
right
Teks diatur rata kanan
left
Teks diatur rata kiri
justify
Teks diatur rata kiri dan kanan
2. Mengatur Jarak Antar Baris
Menggunakan properti line-height
3. Mengatur Jarak Antarhuruf atau Antarkata
Menggunakan properti letter-spacing untuk mengatur jarak antar kata, dan properti word-spacing
untuk mengatur jarak antar huruf
Contoh : jarak.css
.karakter
{
letter-spacing : 0.4 em ;
}
.kata
{
word-spacing : 1.5 em ;
}
jarak.html
<html>
<head>
<title>Jarak Horisontal </title>
<link rel=”stylesheet” type=”text/css” href=:jarak.css” />
</head>
<body>
<p>Lihatlah, hari sangat indah. Langit cerah dan matahari sumringah </p>
<p class=”kata”>Lihatlah, hari sangat indah. Langit cerah dan matahari sumringah </p>
<p class=”karakter”> Lihatlah, hari sangat indah. Langit cerah dan matahari sumringah </p>
</body>
</html>
4. Mengatur Indentasi
Membuat awal sebuah paragraf yang menjorok ke kanan dapat diatur dengan properti teks-indent
Contoh : indent.css
p{
teks-indent : 50 px ;
}
indent.html
<html>
<head>
<title>Indentasi</title>
<link rel=”stylesheet” type=”text/css” href=”indent.css” />
</head>
<body>
<p>
Jazz merupakan aliran musik yang berasal dari Amerika serikat. Awalnya dikenal hanya di komunitas Afrika Amerika sejak
awal abad 20. Sebutan Jazz baru diluncurkan di Chicago sekitar tahun 1915. Saat ini jazz telah dikenal di mana saja
</p>
</body>
</html>
Apabila teks-align diberi nilai negatif dan memadukannya dengan padding-left, maka bisa
dimanfaatkan untuk membuat hanging-indent
Contoh : hanging.css
p{
teks-indent : -30 px ;
padding-left : 30 px ;
}
hanging.html
<html>
<head>
<title>Hanging</title>
<link rel=”stylesheet” type=”text/css” href=”hanging.css” />
</head>
<body>
<p>
Jazz merupakan aliran musik yang berasal dari Amerika serikat. Awalnya dikenal hanya di komunitas Afrika Amerika sejak
awal abad 20. Sebutan Jazz baru diluncurkan di Chicago sekitar tahun 1915. Saat ini jazz telah dikenal di mana saja
</p>
</body>
</html>
5. Mengubah Semua Huruf Menjadi Kapital atau Kapital Hanya pada Awal Kata
Properti teks-transform bermanfaat untuk melakukan konversi teks ke huruf kapital, huruf kecil,
atau hanya mengapitalkan awal kata. Nilai yang bisa diisikan ke properti ini adalah sebagai berikut :
 capitalize
: setiap awal kata diubah ke huruf kapital
 lowercase
: setiap teks diubah ke huruf kecil
 uppercase
: setiap teks diubah ke huruf kapital
 none
: teks ditampilkan tanpa dikonversi
contoh : transform.css
.capital {text-transform : capitalize ; }
.lower {text-transform : lowercase ; }
.upper { text-transform : uppercase ; }
transform.html
<html>
<head>
<title>Transform</title>
<link rel=”stylesheet” type=”text/css” href=”transform.css” />
</head>
<body>
<p>Tes…tes…123. Sukaria jalan-jalan ke mana saja</p>
<p class=”capital”>Tes…tes…123. Sukaria jalan-jalan ke mana saja</p>
<p class=”lower”>Tes…tes…123. Sukaria jalan-jalan ke mana saja</p>
<p class=”upper”>Tes…tes…123. Sukaria jalan-jalan ke mana saja</p>
</body>
</html>
6. Elemen span untuk Memformat Teks
Tag <span> digunakan untuk memformat bagian teks tertentu yang berada dalam suatu elemen html
Contoh : span.css
.superscript {
vertical-align : super ;
}
.subscript {
vertical-align : -40 % ;
}
span.html
<html>
<head>
<title>Transform</title>
<link rel=”stylesheet” type=”text/css” href=”span.css” />
</head>
<body>
<p>Persamaan ax<span class=”superscript”>2</span> + bx + c = 0 dan
H<span class=”subscript”>2</span>O bisa disajikan
</p>
</body>
</html>
7. Membuat Efek Stabilo
Elemen span bisa digunakan untuk membuat efek stabilo
Contoh : stabilo.css
.stabilo {
Background-color : yellow ;
}
stabilo.html
<html>
<head>
<title>Transform</title>
<link rel=”stylesheet” type=”text/css” href=”stabilo.css” />
</head>
<body>
Stabilo sebenarnya nama produk, tetapi telah menjadi istilah yang menyatakan pewarnaan pada bagian-bagian penting
dalam tulisan. <span class=”stabilo”>Efeknya seperti ini.</span> Namun, pewarnaan pada zaman sekarang tidak hanya
berupa kuning melulu.
</body>
</html>
Latihan Soal
Buat Tampilan berikut pada browser :
Dampak Hujan Asam
Dampak Hujan Asam bagi Kesehatan Manusia
Pada
dasarnya
gas
sulfur
dioksida
(SO2)
dan
nitrogen
oksida
(NOx)
bersifat
membahayakan bagi kesehatan manusia. Kedua gas tersebut akan bereaksi di udara membentuk
sulfat dan nitrat yang berupa partikel halus yang dapat masuk terhirup ke saluran pernapasan
manusia, bahkan partikel halus sulfat dan nitrat tersebut dapat masuk ke dalam ruangan indoor.
Menurut berbagai studi yang dilakukan, kedua partikulat halus tersebut dapat menyebabkan
seseorang sakit yang berhubungan dengan kelainan jantung dan paru-paru, seperti asthma dan
bronchitis.
Dampak Hujan Asam bagi Tumbuhan
Hujan asam juga membawa dampak buruk bagi berbagai macam tumbuhan. Air yang
bersifat asam yang jatuh ke tanah dapat melarutkan berbagai macam nutrient dan juga mineral
yang sangat diperlukan oleh tumbuhan. Nutrien dan mineral tersebut akan terbawa jauh sebelum
tumbuhan sempat mengambilnya. Ditambah lagi, air yang sifatnya asam, akibat dari hujan asam,
akan menyebabkan meningkatnya kandungan elemen toksik, seperti Aluminium, di tanah. Akibat
dari dampak tersebut adalah daun-daun akan berubah warna menjadi coklat hingga akhirnya
tumbuhan mati.
Dampak yang lebih parah akan dirasakan oleh tumbuh-tumbuhan yang terdapat di area
pegunungan yang tinggi. Tumbuhan tersebut akan lebih sering terpapar oleh awan atau kabut yang
sifatnya asam, karena terbentuk akibat hujan asam yang terjadi. Paparan tersebut akan membuat
tumbuhan kehilangan nutriennya, sehingga tumbuhan akan lebih rentan terserang berbagai
ancaman lainnya, seperti cuaca.
Fly UP