HTML CSS PDF

Pendahuluan
Merancang sebuah Web dengan menggabungkan HTML dan CSS

(Cascade Style Sheet) lebih cepat bila dibandingkan dengan menggunakan
Tabel. Dengan adanya standarisasi dari CSS seorang programmer Web
lebih leluasa dalam merancang Web. Rincian penjelasan mengenai CSS
dapat dilihat di www.w3.org atau bacaan di www.alisapart.com
Para perancang Web disarankan untuk membuat sketsa untuk tampilan

Web tersebut. Kemudian setelah sketsa selesai tinggal diimplementasikan
pada HTML dan CSS. Berikut ini kita coba merancang sebuah sketsa atau
layout
UTAMAtampilan sebuah Web.
Judul_Atas
Judul_Tengah
Judul_Bergerak
Isi
Isi_Kiri Isi_Kanan
Catatan
Penggabungan HTML dengan CSS 10/24/12 1/14

Rancangan diatas dapat kita kelompokan menjadi :
1. UTAMA
a. Judul_Atas
b. Judul_Tengah
c. Judul_Bergerak
d. Isi
i. Isi_Kiri
ii. Isi_kanan
e. Catatan
Untuk file CSSnya kita buat dengan editor NotePad, sebagai awal tuliskan
bagian-bagian sebagai berikut :
#UTAMA { }
#JUDUL_ATAS { }
#JUDUL_TENGAH { }
#JUDUL_BERGERAK { }
#ISI { }
#ISI_KIRI { }
#ISI_KANAN { }
#CATATAN { }
Pada file INDEX.HTML kita ketik skrip berikut ini :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Contoh Pengabungan HTML dengan CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="CSS_style.css" />
</head>
<body>
<div id=UTAMA>

<!—start judul atas -->
<div id=JUDUL_atas>
<a href="#">Home</a> | <a href="#">Friend</a> | <a href="#">About
me</a> | <a href="#">Account</a>
</div>

<div id=JUDUL_tengah>
<div id="VISUAL">
<ul>
<li class="PhraseOne">Contoh Materi CSS Semester Genap</li>
<li class="PhraseTwo">Matakuliah Computer 2</li>
</ul>
</div>
</div>
<div id=JUDUL_bergerak>
<marquee scrollamount="8"
<p><b><font size=6 color=black>Kelas 1MK-HWU</font></b></p>
</marquee>

</div>

<div id=ISI>

<div id=ISI_kiri>

<div id=ISI_menu_kiri>
<a href="#">Menu ke 1</a>
</div>

<div id=isikiri>
<p>Ternyata Materi komputer susah banget, ketika masih SMA sih
oke-oke aja, tapi begitu kuliah, bukan main susahnya.
Mungkin selain susah dimengerti dan juga belum diajarkan ketika di
SMA.
</p>
</div>
</div>


<div id=ISI_kanan>

<div id=ISI_kanan_dalam><h2><a href="#">AMAYADORI<br>Mayumi
Itsuwa (Japan)</a></h2>
Ekino homu de mikaketa<br>
Anata wa mukashi no koibito<br>
sono, natsukashi yokogao<br>
Omowazu koe o kaketa watashi<br>
Anata wa odoroita yo o ni<br>
Tabako o otoshite shimatta<br>
Kudake chitta honoo no hibi ga<br>
Tsuka no mani, yomigaeri<br>
Mitsume au,<br>
doo shiteru ima wa<br>
Arekara kimi wa,<br>
Genki ni shiteru wa<br>
Itsu datte watashi,<br>
Ocha demo nomou<br>
Sukoshi no jikan,<br>
Densha wa<br>
Toori sungite yuku<br>
<br>
Anata wa koohi kappu ni<br>
Kakkusatoo futatsu irete<br>
Ima no boku wa,<br>
konna mono sato<br>
Warai nagara<br>

Kami o kaki ageta<br>
Soo dakedo fushigi ne<br>
Anohi wakareta koto mo<br>
Tada amari ni wakasugita dakedato futari<br>
Tagai ni yurushi aeru<br>
<br>
Aishitawa, watashi<br>
Anata no koto o<br>
ima wa betsu betsu no<br>
Yume o ou kedo<br>
Meguri aiwa<br>
Sutekina koto ne<br>
Amayodori suru yoo ni futari<br>
<br>
Aishitawa, watashi<br>
Anata no koto o<br>
ima wa betsu betsu no<br>
Yume o ou kedo<br>
Meguri aiwa<br>
Sutekina koto ne<br>
Amayodori suru yoo ni futari<br>
</div>
</div>

</div>


<div id=CATATAN>
Design by Zamzam - © Copyright 2010 - zam2@gmail.com - Hp :
+62 856 467 97 93
</div>

</div>

</body>
</html>
Kita merancang Web dengan menggunakan ukuran lebar layar yang tetap,
dengan ukuran lebar 750px dan tinggi kita buat otomatis mengikuti ISI Web.
Rancangan Web kita letakan pada tengah-tengah layar komputer, maka
pada bagian #body text-align harus diatur dengan kata kunci “center”.
Pada bagian #UTAMA kita tuliskan seperti skrip diatas. Bagian #JUDUL
dibagi menjadi tiga bagian yaitu : JUDUL_atas, JUDUL_tengah dan
JUDUL_bergerak. Bila anda inginkan tidak menutup kemungkinan bahwa
bagian #JUDUL ini anda bagi lagi menjadi bagian-bagian yang lain seperti
ditunjukan oleh skrip diatas tadi.
Bagian #ISI kita buat dua kolom yaitu bagian #ISI_kiri dan #ISI_kanan
dengan perbandingan lebar kiri 200px dan kanan 530px. Usahakan agar
lebar keseluruhan tidak melebihi 750px.

Bagian #ISI_kiri kita peruntukan sebagai menu, quote maupun iklan,
sedangkan bagian #ISI_kanan kita peruntukan sebagai isi berita yang ingin
kita berikan kepada pengunjung Web.
Bagian #CATATAN merupakan bagian terakhir yang paling bawah kita

isikan dengan keterangan yang kita butuhkan seperti nama pembuat Web,
alamat, nomer telepon dan alamat e-mail.
Kalau diatas tadi berupa skrip HTML yang diberikan, berikut adalah skrip
CSS yang kita rancang untuk digabungkan dengan skrip HTML tersebut,
sehingga HTML mempunyai tampilan yang mempunyai ciri khas tersendiri
(style) dari pembuat Web tersebut.
/*
Project : Penggabungan HTML dengan CSS
author : Zamzam
Type : Stylesheet file
*/
a { color: #4466CC;
text-decoration: none
}
p { margin: 0;
padding: 0;
}
h2 {
margin: 8px 0 5px 0;
padding: 0;

font-size: 1.9em;
letter-spacing: -1px;
color: #808080;
background-color: inherit;
}
body {
margin: 0;
padding: 0;
font: 0.7em "Arial", Helvetica, Sans-Serif;
text-align:center;
}
#UTAMA {
clear: both;
width: 750px;
height: auto;
border: 1px solid black;
}
#JUDUL_atas {
clear: both;
width: 750px;
height: 20px;
margin: 0;
background: #CCCCCC;
color: #808080;
text-align:right;
padding: 0 10px 0 0;
}
#JUDUL_tengah {
clear: both;
width: 750px;
height: 100px;
background: #DCDCDC url(images/logo.jpg);
color: white;
margin: auto;
}
#JUDUL_bergerak {
clear: both;
width: 750px;
height: 15px;
background: #FFFFFF url(images/bg1.gif) repeat center;
}
#VISUAL {
text-align: right;
margin-left: auto;
margin-right: auto;
}
#VISUAL ul {
margin:0;
padding-left: 0;
float: right;
width: 350px;
}
#VISUAL ul li {
display: block;
list-style: none;
}
#VISUAL ul li.PhraseOne {
padding-right: 15px;
color: red;
font-family: "MS Sans Serif", Geneva, sans-serif;
font-size: 14px;
font-style: normal;
margin-top: 18px;
font-weight: bold;
}
#VISUAL ul li.PhraseTwo {
padding-right: 15px;
color: black;
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-style: normal;
font-weight: bold;
}
#ISI {
border-top: 1px solid #FEFEFE;
clear: both;
width: auto;
background: white;
color: #000000;
text-align:left;
}
#ISI_kiri {
float: left;
width: 200px;
}
#ISI_menu a {
display: block;
background: #BF3E18 url(images/vmenuarrow.gif) no-repeat center left;
color: #FFFFFF;
padding: 5px 0 5px 19px;
margin: 0 0 1px 0;
text-decoration: none;
text-align:left;
}
#ISI_menu a:hover {
color: #FFFFFF;
background: #822C0F url(images/vmenuarrowhover.gif) no-repeat center
left;
}
#ISIKIRI {

background: #EEEEEE;
/* margin: 2px 0 2px 0; */
padding: 8px;
line-height: 1.4em;
}
#ISI_kanan
{
float: right;
width: 530px;
/*border-left: 1px dotted #000000; */
/*background: #99FF00;*/
}
#ISI_kanan_dalam {
clear: both;
width: 530;
height:800;
background: #FFFFFF url(images/bg.gif) repeat center;
color: black;
margin: 0 auto;
padding: 10px;
float: left;
}
#CATATAN {
border-top: 1px solid #FEFEFE;
clear: both;
width: 750px;
background: #CCCCCC ;
color: #000000;
text-align: center;
padding: 8px;
}
Untuk mendapatkan tampilan Web yang mengikuti lebar layar monitor
sipengguna, cukup kita ubah semua mengenai ukuran lebar dengan kata
kunci “auto” atau menggunakan persentase untuk semua ukuran lebar.

HTML CSS PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

HTML CSS PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

Pendahuluan

Merancang sebuah Web dengan menggabungkan HTML dan CSS

Para perancang Web disarankan untuk membuat sketsa untuk tampilan

Penggabungan HTML dengan CSS 10/24/12 1/14

Pada file INDEX.HTML kita ketik skrip berikut ini :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Penggabungan HTML dengan CSS 10/24/12 3/14

Penggabungan HTML dengan CSS 10/24/12 4/14

Penggabungan HTML dengan CSS 10/24/12 5/14

Penggabungan HTML dengan CSS 10/24/12 7/14

Bagian #CATATAN merupakan bagian terakhir yang paling bawah kita

Penggabungan HTML dengan CSS 10/24/12 8/14

Penggabungan HTML dengan CSS 10/24/12 12/14

Penggabungan HTML dengan CSS 10/24/12 14/14

Anda mungkin juga menyukai