Pertemuan VI
Materi :
1. Inline css
2. Internal css
3. Exterlan css
PERBEDAAN ANTARA
INLINE CSS DENGAN KODE HTML
|
KODE CSS
|
KODE HTML
|
|
<Html>
<Head>
<Title></Title>
</Head>
<Body Style=”background-color:yellow”>
</Body>
</Html>
|
<Html>
<Head>
<Title></Title>
</Head>
<Body bgcolor=yellow>
</Body>
</Html>
|
Kode-kode css
beserta fungsi-fungsinya :
1.
<h1 Style =”font-size :200pt;”> Belajar Pemrograman Web </h1>
Fungsinya adalah
untuk membuat ukuran paragrafnya 200 pt.
2.
Background-color :black;
Fungsinya adalah
untuk membuat latar belakang tulisan warna hitam.
3.
Text-align : justify ;
Fungsinya adalah
membuat paragraf rata kiri dan rata kanan.
4.
Text-indent : 50n px ;
Fungsinya adalah
untuk membuat awal teks paragraf 50 px.
5.
Color : yellow ;
Fungsinya adalah untuk
membbuat warna tulisan warna kunning
6.
Line-heigh : 50 px;
Fungsina adalah untuk
mengatur spasi 50 px;
7.
Border : 5 px solid blue;
Fungsinya adalah untuk
membuaut kotak paragraf.
Contoh :
|
<Html>
|
|
<Head>
|
|
<Title></Title>
|
|
</Head>
|
|
<Body>
|
|
<h1 style =”font-size :30
pt;>selamat Datang</h1>
<p style = “font-size :12 pt;
Text-align : justify;
Text-indent : 50 px;
Border :
5 px solid blue;
Color :
yellow;
Background-color : black;
Line-heigt : 50 px;”>
“Mengucap syukurlah dalam
segala hal,
Sebab itulah yang di kehendaki
Allah
Di dalam Yesus bagi kamu”. 2
tesalonika 5:18
|
|
</body>
|
|
</html>
|
Note :
|
<marquee direction
=top>berfungsi untuk membuat tulisan berjalan ..
<marquee behavior
=alternate>berfungsi membuat tulisan ke kiri dan ke kanan.
|
Internal css
|
<html>
<head>
<title></title>
<style>
P
{
Font-size :14px;
Text-align :justify;
Text-indent :30px;
Color
:blue;
Background-color :00 00 00;
Margin
:50 100 100 50;
}
</style>
</head>
<body>
<marquee behavior =alternate>
<p>wellcome</p>
</body>
</html>
|
External css
External css adalah css yang di
simpan terpisah dari kode html.
Kelebihan external css adalah :
1. Kode sumber
external tidak perlu di edit secara berulang sehingga lebih memudahkan dalam
manajemen kode css.
2. External
css di letakkan di dalam tag <head> dengan kata kunci yaitu :
<link href =sumber type=text/css
ref=stylesheet>
Contoh:
<link href =utama.css
type=text/css ref=stylesheet>
<link href =../utama.css type=text/css ref=stylesheet>
<link href =../isi.css
type=text/css ref=stylesheet>
<link href
=../..utama.css type=text/css ref=stylesheet>
|
Css disimpan dengan
namafile.css
|
Materi :
1. Memahami struktur javascript
2. Memahami variabel
3. Mampu membuat kode javascript
Latihan 1.
1. Buka editor notepad
2. Ketikkan struktur html
|
<html>
<head>
<title>latihan JS-1</title>
</head>
<body>
</body>
</html>
|
3. Ketikkan kode javascript untuk mencetak string (UNIKA ST.ThoMAS )ini adalah
contoh.bisa juga dibuat denagn kata-kata yang lain.
|
<html>
<head>
<title>latihan
JS-1</title>
</head>
<body>
<script>
document.write(“<b>UNIKA ST.THOMAS
</b>”);
</script>
</body>
</html>
|
4. Simpan kode html dengan nama JS1.html
Seperti ganbar
di bawah ini.
5. Jalankan web browser
6. Buka file JS1.html
-
Ctrl +O
-
Arahkan pointer ke folder
penyimpanan JS1.html
7. Dengan menggunakan internal css formatlah tag <body> sehingga warna
latar-belakangnya menjadi warna magenta dan
warna huruf adalah putih.
8.- syarat utama
yang harus dipenuhi bila menggunakan internal scc adalah kodehtmlya diletakkan
di bagian tag head dan ditandai dengan kata <style>
</style>
. Kode html nya adalah sbb:
|
<html>
<head>
<title>Latihan
JS-1</title>
<style>
body {
background-color : magenta;
color : white;
}
</style>
</head>
<body>
<script>
document.write("<b>Unika St. Thomas</b>");
</script>
</body>
</html>
|
Latihan 2.
Buatlah kode
javascript untuk menyelesaikan rumus di bawah ini
Input B dan C
A=B+C
D=A2-B2+C
E=B/2*(C-D)
Output A,B,D
|
<html>
<head>
<title>Latihan Js-2</title>
<style>
body {
background-color :green;
color :magenta;
font-family :"monotype corsiva";
font-size :14
px;
margin :50px
50px 50px 50px;
}
</style>
</head>
<body>
<script>
var
a,b,c,d,e;
b=10;
c=15;
a=b+c;
d=a*a-b*b+c;
e=b/2*(c-d);
document.write("Nilai A =",a);
document.write("<br> Nilai D =",d);
document.write("<br> Nilai E =",e);
document.write("<hr>");
document.write("Belajar Test
Kondisi");
var ip;
ip=2.5;
if (ip >3)
document.write("<br>Anda
Lulus");
else
document.write("<br>Anda Tidak Lulus");
document.write("<hr>");
document.write("<br>Belajar
Perulangan");
var i;
for (i=1;i<=30;i++)
{
if (i % 2 == 0)
document.write("<marquee
direction=left>Yes</marquee>");
else
document.write("<marquee
direction=right>No</marquee>");
}
</script>
</body>
</html>
|
Tidak ada komentar:
Posting Komentar