Materi :
- Cascading Style Sheet (CSS)
- Desain Web
Dengan CSS
Ada 3
Jenis CSS yaitu :
- Inline css
- Internal css
- 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
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>
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>
|
Tidak ada komentar:
Posting Komentar