hai haii selamat siangg kawann panas banget yah hari ini , sebagai selingan aja nih mimin MANCHESTER HACKER akan mengepost tentang bagaimana cara memformat halaman web dan juga kali ini mimin akan skalian ane kasi tau nih ttg memberi background pada laman web kawan
yukk langsung saja ke TKP :D hehehe 
. ______________________________
<HTML>
<HEAD>
<TITLE>Pengaturan Margin</TITLE>
<STYLE ="text/css">
BODY
{
margin-top : 1cm;
margin-right : 2cm;
margin-bottom : 1cm;
margin-left : 2cm;
<HEAD>
<TITLE>Pengaturan Margin</TITLE>
<STYLE ="text/css">
BODY
{
margin-top : 1cm;
margin-right : 2cm;
margin-bottom : 1cm;
margin-left : 2cm;
}
</STYLE>
</HEAD>
<BODY>
Pengaturan Margin Halaman
(1cm,2cm,1cm,2cm)
2. Pemetaan menggunakan padding
Padding hampir sama dengan margin :
a. Margin hanya digunakan untuk membuat batasan-batasan sisi halaman.
b. Padding dapat membuat batasan-batasan pada komponen web lain seperti tabel, disamping pengaturan batas halaman.
________________________________________________
<HTML>
<HEAD>
<TITLE>Pengaturan Margin</TITLE>
<STYLE ="text/css">
</STYLE>
</HEAD>
<BODY>
Pengaturan Margin Halaman
(1cm,2cm,1cm,2cm)
2. Pemetaan menggunakan padding
Padding hampir sama dengan margin :
a. Margin hanya digunakan untuk membuat batasan-batasan sisi halaman.
b. Padding dapat membuat batasan-batasan pada komponen web lain seperti tabel, disamping pengaturan batas halaman.
________________________________________________
<HTML>
<HEAD>
<TITLE>Pengaturan Margin</TITLE>
<STYLE ="text/css">
BODY {
padding-top : 10%;
padding-right : 20%;
padding-bottom : 40%;
padding-left: 20%;
}
Bengkel Internet PENS-ITS : Cascading Style Sheets
</STYLE>
</HEAD>
<BODY>
Text ini berada di tengah halaman , karna di lakukan pengaturan halaman dengan menggunakan padding atas 10%,
kanan 20%,bawah 40%,dan kiri 20%.
</BODY>
</HTML>
padding-top : 10%;
padding-right : 20%;
padding-bottom : 40%;
padding-left: 20%;
}
Bengkel Internet PENS-ITS : Cascading Style Sheets
</STYLE>
</HEAD>
<BODY>
Text ini berada di tengah halaman , karna di lakukan pengaturan halaman dengan menggunakan padding atas 10%,
kanan 20%,bawah 40%,dan kiri 20%.
</BODY>
</HTML>
________________________________________________
MEMBUAT BACKGROUND
MEMBUAT BACKGROUND
1. Background warna
________________________________________________
<HTML>
<HEAD>
<TITLE>Menggunakan Background
Warna</TITLE>
<STYLE type="text/css">
BODY { background-color : yellow}
</STYLE>
</HEAD>
<BODY>
Halaman ini di buat Berwarna Kuning </BODY>
</HTML>
<BODY>
Halaman ini di buat Berwarna Kuning </BODY>
</HTML>
_________________________________________________
2. Background campuran
_________________________________________________
2. Background campuran
_________________________________________________
<HTML>
<HEAD>
<TITLE>Menggunakan Background
Warna</TITLE>
<STYLE ="text/css">
body {background-color : #99CCFF}
h2 {background : green} h3 {background-color : transparent}
p {background : rgb(240,248,255)}
</STYLE>
</HEAD>
<BODY>
<h2>Header 2,Background Hijao</h2>
<h3>Header 3 , Bakground Transparan</h3>
<p>Background pada paragraph</p>
</BODY>
</HTML>
_________________________________________________
3. Background gambar
Properties Value Keterangan
backgroundimage
url Alamat gambar
yang dituju
backgroundrepeat
repeat
repeat-x
repeat-y
no-repeat
Diulang dlm hal
Diulang sumbu x
Diulang sumbu y
Tampil 1 gbr
Backgroundposition
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
Atas kiri hal
Atas tngh hal
Atas kanan hal
Tgh kiri hal
Pusat hal
Tngh kanan hal
Bwh kiri hal
Bwh tgh hal
Bwh kanan hal
Pakai nilai %
Contoh 1 :
<HEAD>
<TITLE>Menggunakan Background
Warna</TITLE>
<STYLE ="text/css">
body {background-color : #99CCFF}
h2 {background : green} h3 {background-color : transparent}
p {background : rgb(240,248,255)}
</STYLE>
</HEAD>
<BODY>
<h2>Header 2,Background Hijao</h2>
<h3>Header 3 , Bakground Transparan</h3>
<p>Background pada paragraph</p>
</BODY>
</HTML>
_________________________________________________
3. Background gambar
Properties Value Keterangan
backgroundimage
url Alamat gambar
yang dituju
backgroundrepeat
repeat
repeat-x
repeat-y
no-repeat
Diulang dlm hal
Diulang sumbu x
Diulang sumbu y
Tampil 1 gbr
Backgroundposition
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
Atas kiri hal
Atas tngh hal
Atas kanan hal
Tgh kiri hal
Pusat hal
Tngh kanan hal
Bwh kiri hal
Bwh tgh hal
Bwh kanan hal
Pakai nilai %
Contoh 1 :
_________________________________________________
<HTML>
<HEAD>
<TITLE>Menggunakan Background
Gambar</TITLE>
<STYLE ="text/css">
BODY
{
background-image:
url("drums.jpg");
background-repeat: repeat-x;
<HTML>
<HEAD>
<TITLE>Menggunakan Background
Gambar</TITLE>
<STYLE ="text/css">
BODY
{
background-image:
url("drums.jpg");
background-repeat: repeat-x;
}
</STYLE>
</HEAD>
<BODY>
Background Berulang pada Sumbu X
</BODY>
</HTML>
</STYLE>
</HEAD>
<BODY>
Background Berulang pada Sumbu X
</BODY>
</HTML>
_________________________________________________
Contoh 2 :_________________________________________________
<HTML>
<HEAD>
<TITLE>Menggunakan Background
Gambar</TITLE>
<STYLE ="text/css">
BODY
{
background-image:url ("motor.jpg");
background-repeat: no-repeat;
background-position: center center;
}
Bengkel Internet PENS-ITS : Cascading Style Sheets
6
</STYLE>
</HEAD>
<BODY>
Background di Pusat Halaman </BODY>
</HTML>
Contoh 2 :_________________________________________________
<HTML>
<HEAD>
<TITLE>Menggunakan Background
Gambar</TITLE>
<STYLE ="text/css">
BODY
{
background-image:url ("motor.jpg");
background-repeat: no-repeat;
background-position: center center;
}
Bengkel Internet PENS-ITS : Cascading Style Sheets
6
</STYLE>
</HEAD>
<BODY>
Background di Pusat Halaman </BODY>
</HTML>
| ________________________________________________ terima kasih kawann semoga pembelajaran hari ini dapat membantu buat kawan kawan sekalian dalam pembuatan web/html :)  |
0 komentar:
Posting Komentar