MODUL IV
MEMAHAMI FORMAT FONT DAN CSS
Format font di dalam dokumen html berfungsi untuk membentuk sebuah karakter agar karakter yang dimaksud berbeda dengan karakter karakter yang lainnya di dalam sebuah dokumen html. Sedangkan CSS (cascade style sheet) merupakan feacture baru dari html 4.0 yang lebih praktis penggunaannya karena mengurangi dampak penggunaan font yang terlalu banyak dalam sebuah halaman web.
a. Format font
Format font dalam sebuah dokumen html memiliki beberapa fungsi, yaitu
- font face
- font size
- font color
b. Cascade Style Sheet
CSS dalam dokumen html terbagi atas tiga jenis, yaitu:
- Style Sheet Internal
Style Sheet Internal style sheet yang didefinisikan di dalam dokumen html. Sintaknya adalah sebagai berikut :
<html>
<head>
<style [atribut]>.....Isi style sheet.....</style>
</head>
<body>
......isi body....
</body>
</html>
Contoh :
<html>
<head>
<title>Penggunaan style sheet internal</title>
<style type="text/css">
<!--
h1 {font-family:Comic Sans MS;
font-size:12pt;
text-align:center;
color:#000080}
p {font-family:Microsoft Sans Serif;
font-size:12pt;
text-align:justify;
color:#006600;
font-weight:bold}
-->
</style>
</head>
<body>
<h1>Contoh style sheet internal dengan jenis huruf Comic San MS</h1>
<hr>
<p> Isi dalam dokumen html ini telah dibangkitkan dengan penggunaan style sheet secara internal. Artinya pembuatan ini dari dokumen html ini tidak memerlukan lagi pengaturan pada tiap bagian dokumen terutama yang terletak pada bagian body.</p>
</body>
</html> \
- Style sheet External adalah style sheet yang didefinisikan secara terpisah di dalam file tersendiri. Pendefinisian Style Sheet External yang terpisah harus diberikan extention css atau “nama_file.css” dan tidak perlu didefinisikan melalui tag html. Sedangkan untuk html yang digunakan untuk mengakses style sheet, harus dibangkitkan melalui link.
Halaman Style Sheet External
h1 {font-family:Microsoft Sans Serif;
font-size:16pt;
font-weight:bold;
color:#006600;
text-align:center}
p {font-family:Comic Sans MS;
font-size:12pt;
font-weight:bold;
color:#000080;
text-align:justify}
Simpan dengan nama StyleExt1.css
Contoh :
<html>
<head>
<title>Penggunaan style sheet external</title>
<link rel="stylesheet"type="text/css"href="StyleExt1.css">
</head>
<body>
<h1>Contoh style sheet external dengan jenis huruf Comic Sans MS</h1>
<hr>
<p> style sheet external tidak didefinisikan secara utuh, namun harus dipisahkan atau berbeda halaman atau berbeda file. Cara penggunaannya dibangkitkan melalui link. </p>
</body>
</html>
- Style Sheet Inline
Style Sheet Inline tidak didefinisikan terpisah seperti style sheet internal dan style sheet external. Style sheet inline langsung didefinisikan pada tag body. Penggunaan style inline akan mengakibatkan semakin besarnya penggunaan byte. Sintaknya adalah sebagai berikut :
<html>
<head>
......Isi Head.......
</head>
<body>
<p style=”atribut”>.....isi text...</p>
</body>
</html>
Contoh :
<html>
<head>
<title>Penggunaan Style Sheet Inline</title>
</head>
<body>
<p style=”font-family:Microsoft Sans Serif;
Font-size:16pt;
Font-weight:bold;
Color:#006600;
Text-align:center”>Contoh penggunaan style sheet inline</p>
<hr>
<p style=”font-family:Comic Sans Ms;
Font-size:12pt;
Text-align:justify”>Penggunaan style sheet inline, tidak perlu didefinisikan terlebih dahulu seperti halnya pada style sheet internal dan external.Style sheet inline dapat dibangkitkan secara langsung melalui tag body.</p>
</body>
</html>
- Mutiple Style Sheet
Mutiple Style Sheet adalah style sheet yang dapat digunakan secara bersama dalam pendefinisiannya, baik melalui style sheet internal atau style sheet external.Hanya apabila penggunaannya lebih dari satu, maka akan didefinisikan secara umum.
Halaman Style Sheet External
h1 {font-family:Microsoft Sans Serif;
font-size:16pt;
font-weight:bold;
color:#006600;
text-align:center}
p {font-family:Comic Sans MS;
font-size:12pt;
font-weight:bold;
color:#000080;
text-align:justify}
Contoh :
<html>
<head>
<title>Penggunaan Multyple Style Sheet</title>
<link rel=”stylesheet” type=”text/css” href=”styleEx2.css”>
<style type=”text/css”>
<!—
H2{font-family:Comic Sans Ms;
Font-size:10pt;
Color:#000088;
Text align:justify}
-->
</style>
</head>
<body>
<h1>Penggunaan Multyple Style Sheet<h1>
<hr>
<h2>Ciri khas dari penggunaan Multyple Style Sheet adalah pendefinisianyang lebih dai satu. Cara penggunaannya dapat dibangkitkan melalui link seperti sheet external atau dibangkitkan terlebih dahulu pada halaman yang sama seperti style sheet internal. Namun apabila digunakan lebih dari satu maka pada penggunaannya hanya akan didefinisikan secara umum.<h2>
</body>
</html>
Tidak ada komentar:
Posting Komentar