Materi :
1. Cascading Style Sheet (CSS)
2. Desain Web Dengan CSS
Ada 3 Jenis CSS yaitu :
1. Inline css
2. Internal css
3. External css
v Inline css
à css yang dituliskan di dalam tag
html
Contoh format tag <body>
untuk warna putih dan warna latar belakang hitam
|
<body style="color:white;background-color:black;">
|
à setiap attribut dipisahkan tanda
; (semicolon)
Latihan 1.
1. Jalankan notepad
2. Ketikkan struktur HTML
|
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
</body>
</html>
|
3. format tag <body> warna tulisan putih
dan warna latar belakang hitam
|
<html>
<head>
<title>Inline CSS</title>
</head>
<body style="color:white;background-color:black;">
</body>
</html>
|
4. Ketikkan tulisan dalam tag
<body>
|
<html>
<head>
<title>Inline CSS</title>
</head>
<body style="color:white;background-color:black;">
Selamat Datang di Program Studi Sistem
Informasi
Fakultas Ilmu Komputer, Universitas
Katolik St. Thomas
Sumatera Utara Medan.
</body>
</html>
|
5. Masukkan tag <h1> dan format
tag <h1>
|
<html>
<head>
<title>Inline CSS</title>
</head>
<body style="color:white;background-color:black;">
Selamat Datang di Program Studi Sistem Informasi
Fakultas Ilmu Komputer, Universitas Katolik St. Thomas
Sumatera Utara Medan.
<!-- Tag h1 tanpa style -->
<h1>Pemrograman Web</h1>
<!-- Tag h1 dengan style -->
<h1 style="color : yellow;
font-size : 50px;
background-color: teal;
border : 5px solid cyan;
text-align : center;">Prodi
Sisfo</h1>
</body>
</html>
|
6. Format tag <p>
|
<html>
<head>
<title>Inline CSS</title>
</head>
<body style="color:white;background-color:black;">
Selamat Datang di Program Studi Sistem Informasi
Fakultas Ilmu Komputer, Universitas Katolik St. Thomas
Sumatera Utara Medan.
<!-- Tag h1 tanpa style -->
<h1>Pemrograman Web</h1>
<!-- Tag h1 dengan style -->
<h1 style="color
: yellow;
font-size : 50px;
background-color: teal;
border : 5px solid cyan;
text-align : center;">Prodi
Sisfo</h1>
<p
style="color :
gold;
background-color: magenta;
font-size : 14pt;
font-face : Arial Verdana MS-Sanserif;
text-align : justify;
text-indent : 30px;
line-height : 50px;">
Terima Kasih Saya Ucapkan Kepada Bapa
di Surga Atas
Limpahan <b>KASIH</b> Yang
Telah Diberikan. Mulai Dari
Pagi Hari Pada Saat Bangun Tidur Hingga
Saat Ini Bapa
Tetap Menjagai Saya. Saya Sadar Bapa
Dalam Ucapan,
Pikiran dan Tindakan Saya Banyak
Kesalahan Yang Telah
Saya Perbuat. Oleh Karena Itu Ampunilah
Saya Ya Bapa,
Kasihanilah Saya Selama-Lamanya.
Amin.</p>
</p>
</body>
</html>
|
v Internal CSS
è Css yang dituliskan di dalam tag
<head>
è Ditandai dengan kata <style
</style>
Kode CSS Internal
|
<html>
<head>
<title>Internal CSS</title>
<style>
h1 {
color : yellow;
font-size : 50px;
background-color: teal;
border : 5px solid cyan;
text-align : center;
}
p.a
{
color : gold;
background-color: magenta;
font-size : 14pt;
font-face : Arial Verdana MS-Sanserif;
text-align : justify;
text-indent : 30px;
line-height : 50px;
}
p.b
{
color : blue;
background-color: magenta;
font-size : 14pt;
font-face : Arial Verdana MS-Sanserif;
text-align : justify;
text-indent : 30px;
line-height : 50px;
}
</style>
</head>
<body style="color:white;background-color:black;">
Selamat Datang di Program Studi Sistem
Informasi
Fakultas Ilmu Komputer, Universitas
Katolik St. Thomas
Sumatera Utara Medan.
<!-- Tag h1 tanpa style -->
<h1>Pemrograman Web</h1>
<!-- Tag h1 dengan style -->
<h1>Prodi Sisfo</h1>
<p class="a">
Terima Kasih Saya Ucapkan Kepada Bapa
di Surga Atas
Limpahan <b>KASIH</b> Yang
Telah Diberikan. Mulai Dari
Pagi Hari Pada Saat Bangun Tidur Hingga
Saat Ini Bapa
Tetap Menjagai Saya. Saya Sadar Bapa
Dalam Ucapan,
Pikiran dan Tindakan Saya Banyak
Kesalahan Yang Telah
Saya Perbuat. Oleh Karena Itu Ampunilah
Saya Ya Bapa,
Kasihanilah Saya Selama-Lamanya.
Amin.</p>
</p>
<p class="b">
Terima Kasih Saya Ucapkan Kepada Bapa
di Surga Atas
Limpahan <b>KASIH</b> Yang
Telah Diberikan. Mulai Dari
Pagi Hari Pada Saat Bangun Tidur Hingga
Saat Ini Bapa
Tetap Menjagai Saya. Saya Sadar Bapa
Dalam Ucapan,
Pikiran dan Tindakan Saya Banyak
Kesalahan Yang Telah
Saya Perbuat. Oleh Karena Itu Ampunilah
Saya Ya Bapa,
Kasihanilah Saya Selama-Lamanya.
Amin.</p>
</p>
</body>
</html>
|
<<< SELAMAT BERLATIH >>>
