PERTEMUAN VI
Materi : Cascading Style Sheet
1. Inline CSS
2. Internal CSS
3. External CSS
1. Inline css adalah css yang dituliskan langsung di dalam
tag.
Soal :
Formatlah tag h1 dengan css sehingga memiliki ciri sbb:
1. Ukuran teks 50px
2. Jenis tulisan
verdana
3. Perataan teks
tengah
4. Warna tulisan
biru
5. Latar belakang
warna merah
6. Border : 10px
solid green
Jawab:
1. Buka lembaran
baru di notepad
2. Ketikkan
struktur html
3. Simpan kode
dengan nama css1.html
<head>
<title>CSS
Dasar</title>
</head>
<body>
<h1
style="font-size :
50pt;
font-family :
verdana;
text-align :
center;
color :
blue;
background-color
: red;
border :
10px solid green;">FIKOM UNIKA</h1>
<h1>Prodi
Sistem Informasi</h1>
<p
style="text-align :
justify;
text-indent :
50px;
font-family :
arial;
font-size :
16pt;
color :
red;">
Selamat Datang di Program Studi Sistem Informasi, Unika
St.
Thomas Medan Sumatera Utara. Program Studi Sistem
Informasi
Telah Terakreditasi BAN-PT. Jumlah Mahasiswa
Hingga
Tahun 2013 Tercatat 350 Orang. Dosen Yang Mengajar
Lebih
Kurang 20 Orang, Dibantu Pegawai dan Tenaga Laboran
Lebih
Kurang 7 Orang. Program Studi Sistem Informasi Terus
Berbenah
Diri Untuk Meningkatkan Mutu Lulusannya seperti
Melakukan
Penetapan Kurikulum Baru Ta.2013/2014. </p>
</body>
</html>
Soal 2:
Formatlah tag <p> sehingga memiliki attribut sbb:
1. Perataan teks :
justify
2. Awal paragraph
indent : 50 px
3. Jenis huruf :
arial
4. Besar huruf : 16
pt;
2. Internal CSS adalah css yang dituliskan di
dalam tag <head> dan
penulisan diapit oleh tanda:
<style>
</style>
Contoh :
<html>
<head>
<title>CSS Internal</title>
<style>
h1
{
text-align : center;
font-size : 50pt;
}
h1.umum
{
text-align : center;
font-size : 30pt;
}
p
{
text-align : justify;
text-indent : 50px;
font-family : arial;
font-size : 16pt;
}
body {
background-color : #00ff11;
font-family : verdana;
font-size : 30pt;
}
</style>
</head>
<body>
Pemrograman Web - Prodi Sistem Informasi.
<h1>Unik St. Thomas</h1>
<h1 class="umum">Prodi Sistem Informasi</h1>
<h1>Pemrograman Web</h1>
<p>Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok -
Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok -
Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok -
Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok -
Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok -
Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - </p>
<p>Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok -
Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok -
Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok -
Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok -
Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok -
Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - </p>
</body>
</html>
<head>
<title>CSS Internal</title>
<style>
h1
{
text-align : center;
font-size : 50pt;
}
h1.umum
{
text-align : center;
font-size : 30pt;
}
p
{
text-align : justify;
text-indent : 50px;
font-family : arial;
font-size : 16pt;
}
body {
background-color : #00ff11;
font-family : verdana;
font-size : 30pt;
}
</style>
</head>
<body>
Pemrograman Web - Prodi Sistem Informasi.
<h1>Unik St. Thomas</h1>
<h1 class="umum">Prodi Sistem Informasi</h1>
<h1>Pemrograman Web</h1>
<p>Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok -
Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok -
Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok -
Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok -
Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok -
Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - </p>
<p>Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok -
Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok -
Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok -
Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok -
Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok -
Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - Fikom Ok - </p>
</body>
</html>
No comments:
Post a Comment