Mendesain halaman Web dengan CSS - Catatan Kecil · Styles sheets define How HTML elements are to be displayed, just like the font tag and the color attribute in HTML 3.2. Styles

Mendesain halaman Web

dengan CSS

Styles sheets define How HTML elements are to be displayed,just like the font tag and the color attribute in HTML 3.2.Styles are normally saved in external .css files. External stylesheets enable you to change the appearance and layout of allthe pages in your we, just by editing one single CSS document

CSS is a breakthrough in Web design because it allowsdevelopers to control the style and layout of multiple Webpages all at once. As a web developer you can define a stylefor each HTML element and apply it to as many web pages asyou want. To make a global change, simple change the style,and all elements in the Web are updated automatically

ABOUT CSS

Mamoun Nawahdah

Syntax CSS dibentuk dari tiga bagian: selector, property danvalue

CSS SYNTAX

selector {property: value}

selector : tag/element HTML yang ingin didefinisikan.property : atribut yang ingin diubah dan case sensitive.value : nilai dari atribut. Property dan value biasanya dipisahkan oleh titik dua dandiapit oleh kurung kurawal.

Contoh:body {color: black}

Jika value terdiri dari dua kata atau lebih, gunakan tanda petikdua (“)

p { font-family : “Times New Roman”}

Jika Anda ingin menentukan lebih dari satu property, Andaharus memisahkan tiap-tiap property dengan titik koma.

p { text-align: center; color : red}

Penulisan di atas dapat juga ditulis dalam bentuk yang mudahdibaca seperti berikut.

p { font-family: calibri;text-align: center; color : red}

GroupingAnda dapat mengelompokkan beberapa selector denganproperty dan value yang sama. Tiap-tiap selector dipisahkanoleh koma.

h1, h2, h3, h4{color: green}

The class selectorDengan class selector, anda dapat mendefinisikan style yang berbeda untuk tipe yang sama dari elemen HTML.Anggap Anda ingin mempunyai dua tipe paragraf dalamhalaman web Anda: paragraf rata-kanan dan paragraf rata-tengah, berikut contoh mendefinisikannya.

p.kanan {text-align: right}p.tengah {text-align: center}

Dalam dokumen HTML Anda menuliskan sebagai berikut:

<p class=“kanan”>Paragraf ini menggunakan rata kanan</p><p class=“tengah”>Paragraf ini menggunakan rata tengah</p

id selectorAnda dapat mendefinisikan style untuk elemen HTML denganid selector. Id selector didefinisikan dengan menggunakantanda #. Contoh:#merah {color: red}

Memberikan KomentarKomentar digunakan untuk memberi keterangan/penjelasandari kode yang Anda buat. Komentar ini membantu Andadalam mengedit kode yang Anda buat. Untuk membuatkomentar dimulai dengan tanda “/*” dan diakhiri dengantanda “*/”Contoh:/* mengatur tag p pada HTML */P{text-align: center;/* mengatur warna */color: red;font-family: arial}

Aturan Penulisan CSS

Ada tiga jenis penulisan CSS, yaitu:1. External Style Sheet

CSS ditulis diluar file HTML. File yang terbuat disimpandalam format .csscontoh:

<head><link rel=“stylesheet” type=“text/css” href=“desain.css” /></head>

2. Internal Style SheetDitulis didalam file HTML. Internal style sheet seharusnyadigunakan dalam dokumen tunggal yang mempunyai style yang unik. Didefinisikan diantara tag <head></head>

3. Inline StylesKode CSS ditulis langsung dalam tag HTML.Contoh:<p style=“color: red; margin-left : 20px”>

teks HTML yang akan ditampilkan</p>

Contoh:<head><style type=“text/css”>

hr {color: red}p {margin-left: 20px}body {background-image: url(images/gambar.gif”)}

</style></head></head>

Body{background: #125084;color: white;}H1{color: #00ff00;}p.versi2 {color: #e2ff5a;font-family: calibri;font-size: 24px;}

efek.css

<HTML><HEAD><TITLE>Desain Web Dengan CSS</TITLE><LINK REL="STYLESHEET" TYPE="text/css" HREF="efek.css"></HEAD><BODY><H1>MEMPERINDAH TAMPILAN DENGAN CSS</H1><P>Latihan Desain Web Dengan CSS. <br>Paragraf ini merupakan paragraf biasa. Perhatikanbahwa warna tulisan adalah putih. <br>Secara default untuk halaman web ini warnanyadiatur sesuai dengan selector body pada file efek.css</p><p class="versi2">Paragraf ini adalah paragrafdengan class "versi2" yang diaturoleh file efek.css.</p></BODY></HTML>

Latihan1.html

EKSTERNAL STYLE SHEET

<HTML><HEAD><TITLE>Mendesain Web dengan CSS</TITLE><STYLE type="text/css">body {color: white;background: green;font-family : arial;}</STYLE></HEAD><BODY><H1>BROWSER</H1><P>Browser adalah aplikasi untuk mengakses halaman web.</p>Halaman ini didesain dengan menggunakan CSS.</BODY></HTML>

Latihan2.html (Internal Style Sheet)

<HTML><HEAD><TITLE>Desain Web</TITLE></HEAD><BODY style="color: white;background: green;font-family : arial;" ><H1 style="color: yellow;">BROWSER</H1><P style="color: red; font-family: calibri; font-size: 24px;">Tulisan inimenggunakan CSS dengan gaya penulisan inline style sheet</p>

paragraf ini menggunakan property yang didefinisikan di dalam tag body.</BODY></HTML>

Latihan3.html (Inline Style Sheet)

MEMBUAT BACKGROUND PADA CSS

<HTML>

<HEAD>

<TITLE>Menggunakan Background Warna</TITLE>

<STYLE type="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 Hijau</h2>

<h3>Header 3, Bakground Transparan</h3>

<p>Background pada paragraph</p>

</BODY>

</HTML>

1. BACKGROUND WARNA

LATIHAN4.HTML

MEMBUAT BACKGROUND PADA CSS

Properties Value Keteranganbackground-image url Alamat gambar yang dituju

background-repeat repeatrepeat-xrepeat-yno-repeat

Diulang dalam halamanDiulang sumbu xDiulang sumbu yTampil 1 gambar

Background-position top lefttop centertop rightcenter leftcenter centercenter rightbottom leftbottom centerbottom rightx-% y-%x-pos y-pos

Atas kiri halaman Atas tengah halamanAtas kanan halamantengah kiri halaman Pusat halaman tengah kanan halaman bawah kiri halaman bawah tengah halamanbawah kanan halamanPakai nilai %

2. Background gambar

<HTML>

<HEAD>

<TITLE>Menggunakan Background Gambar</TITLE>

<STYLE type ="text/css">

BODY

{

background-image: url(“bg.jpg");

background-repeat: repeat-x;

}

</STYLE>

</HEAD>

<BODY>

Background Berulang pada Sumbu X

</BODY>

</HTML>

Latihan5.html

MEMBUAT BACKGROUND IMAGE PADA CSS

<HTML>

<HEAD>

<TITLE>Menggunakan Background Gambar</TITLE>

<STYLE type = "text/css">

BODY

{background-image:url (“logo.jpg");

background-repeat: no-repeat;

background-position: center center;

}

</STYLE>

</HEAD>

<BODY>

Background di Pusat Halaman

</BODY>

</HTML>

Latihan6.html

MEMBUAT BACKGROUND IMAGE PADA CSS

Property Description CSS

margin Sets all the margin properties in one declaration 1

margin-bottom Sets the bottom margin of an element 1

margin-left Sets the left margin of an element 1

margin-right Sets the right margin of an element 1

margin-top Sets the top margin of an element 1

Margin Properties

Property Description CSS

padding Sets all the padding properties in one declaration 1

padding-bottom Sets the bottom padding of an element 1

padding-left Sets the left padding of an element 1

padding-right Sets the right padding of an element 1

padding-top Sets the top padding of an element 1

Padding Properties

http://www.w3schools.com/cssref/pr_margin.asp

http://www.w3schools.com/cssref/pr_margin-bottom.asp

http://www.w3schools.com/cssref/pr_margin-left.asp

http://www.w3schools.com/cssref/pr_margin-right.asp

http://www.w3schools.com/cssref/pr_margin-top.asp

http://www.w3schools.com/cssref/pr_padding.asp

http://www.w3schools.com/cssref/pr_padding-bottom.asp

http://www.w3schools.com/cssref/pr_padding-left.asp

http://www.w3schools.com/cssref/pr_padding-right.asp

http://www.w3schools.com/cssref/pr_padding-top.asp

PENGATURAN HALAMAN MENGGUNAKAN MARGIN

<HTML>

<HEAD>

<TITLE>Pengaturan Margin</TITLE>


BODY

{

margin-top : 1cm;

margin-right : 2cm;

margin-bottom : 1cm;

margin-left : 2cm;

}

</STYLE>

</HEAD>

<BODY>

Pengaturan Batas Halaman (atas 1cm,

kanan 2cm,bawah 1cm, kiri 2cm)

</BODY>

</HTML>

Latihan7.html

PENGATURAN HALAMAN MENGGUNAKAN PADDING

<HTML>

<HEAD>

<TITLE>Pengaturan Margin</TITLE>


BODY {

padding-top : 10%;

padding-right : 20%;

padding-bottom : 40%;

padding-left: 20%;

}

</STYLE>

</HEAD>

<BODY>

Text ini berada di tengah halaman ,

karena di lakukan pengaturan halaman

dengan menggunakan padding atas 10%,

kanan 20%,bawah 40%,dan kiri 20%.

</BODY>

</HTML>

Latihan8.html

FORMAT TEKS

Properties Value KeteranganPengaturan warnacolor green, dllPengaturan Spasi (jarak antar karakter)letter-spacing Normal

LengthUkuran standar HTMLUkuran panjang (cm,px)

Perataan Texttext-align Left, right, center, justify

text-decoration noneunderlineoverlineline-throughblink

Bentuk standarBergaris bawahBergaris atasText dicoretText berkedip

Pengaturan text indentasitext-indent length

%Dengan cm, pxDengan persentase

Pengubahan Bentuk Karaktertext-transform Capitalize, uppercase,

lowercase, none

<HTML>

<HEAD>

<TITLE>Format Text </TITLE>

<STYLE type ="text/css">

p {color : green; letter-spacing: 0.5cm}

h1 {letter-spacing: -2px}

h2 {text-align: center}

h3 {text-align: left}

h4 {text-align: right}

</STYLE>

</HEAD>

<BODY>

<p>Pengaturan Spasi Pada Paragraph </p>

<h1>Header 1</h1>

<h2>Header 2, Di tengah</h2>

<h3>Header 3, Di kiri</h3>

<h4>Header 4, Di kanan</h4>

</BODY>

</HTML>

Latihan9.html

<HTML>

<HEAD>



em {text-decoration : overline}

h2 {text-decoration: blink}

h3 {text-decoration: underline}

a {text-decoration: none}

</STYLE>

</HEAD>

<BODY>

<em>Bentuk Overline</em>

<h2>Header 2, Bentuk Line-through</h2>

<h3>Header 3, Bentuk Underline</h3>

<p><a href="coba.htm">Penggunaan Dalam Link</a></p>

</BODY>

</HTML>

Latihan10.html

<HTML>

<HEAD>



p.besar {text-transform: uppercase}

p.kecil {text-transform: lowercase}

</STYLE>

</HEAD>

<BODY>

<p class="besar"> pengubahan kedalam huruf besar </p>

<p class="kecil"> PENGUBAHAN KEDALAM HURUF KECIL </p>

</BODY>

</HTML>

Latihan11.html

PENGATURAN FONT

Properties Value KeteranganJenis Font

font-family arial, dllUkuran HurufFont-size Small

Medium LargeLength%

KecilMenengahBesarBesar font (pt,px)Persentase

Pengaturan gaya pada font

font-style normalitalicoblique

Ketebalan huruf

font-weight normalbold100 ~ 900

<HTML>

<HEAD>

<TITLE>Pengaturan Font</TITLE>


p.italic

{

font-size :200% ;

font-style: italic;

}

p.normal{

font-family : verdana ;

font-style: normal;

}

p.oblique {font-style: oblique}

</STYLE>

</HEAD>

<BODY>

<P class="italic">Menggunakan Style Italic</P>

<P class="normal">Menggunakan Style Normal </P>

<P class="oblique">Menggunakan Style Oblieque</P>

</BODY>

</HTML>

Latihan12.html

<HTML>

<HEAD>

<TITLE>Pengaturan Font</TITLE>


p.normal {


font-weight: normal;}

p.thick {


font-weight: bold;}

p.thicker {

font-family : times ;

font-weight: 900;}

</STYLE>

</HEAD>

<BODY>

<p class="normal"> Desain Web </p>

<p class="thick"> Desain Web </p>

<p class="thicker"> Desain Web </p>

</BODY>

</HTML>

Latihan13.html

PENGATURAN TABEL

<HTML>

<HEAD>

<TITLE>Pengaturan Table spec</TITLE>


TH {

color : #FFFFFF;

background-color : #336699;

border-width: 1px ;

border-style:solid;

border-color :red ;

font-size: 9pt;}

TD {

color : red;

background-color : #E6E6FA;

border-width: 1px ;

border-style:solid;

border-color :blue ;

font-size: 9pt;}

</STYLE>

</HEAD>

Latihan14.html

<BODY>

<table width="468" border="0" cellpadding="5" cellspacing="0">

<tr> <th width="112"> Nama </th>

<th width="91"> No Test </th>

<th width="96"> Nilai </th>

<th width="137”> Keterangan </th>

</tr>

<tr> <td> Ali </td>

<td> 001 </td>

<td> 78 </td>

<td> Lulus </td>

</tr>

<tr> <td> Amir </td>

<td> 002 </td>

<td> 43 </td>

<td> Mengulang </td>

</tr>

<tr> <td> Adi </td>

<td> 003 </td>

<td> 85 </td>

<td> Lulus </td>

</tr>

</table></BODY></HTML>

HYPERLINK

Selector Keterangan

a:link Keadaan awal pemicu link aktif

a:visited Keadaan pemicu link setelah dikunjungi

a:active Keadaan pemicu yang sedang aktif

a:hover Kejadian pada pemicu link saat mouse digerakkan diatasnya

<HTML>

<HEAD>

<TITLE>Pengaturan Hyperlink</TITLE>


a:link {text-decoration: none}

a:visited {text-decoration: none}

a:active {text-decoration: none}

a:hover {font-weight:none; color:red; background-color:blue;}

</STYLE>

</HEAD>

<BODY>

<a href="coba.htm">Klik disini</a>

</BODY>

</HTML>

TUGAS

Buatlah web pribadi anda menggunakan css.

Lengkapi dengan tombol fasilitas menu:

1. HOME : Informasi sekilas tentang diri anda.

2. PENDIDIKAN : Pendidikan yang telah anda tempuh, termasuk pelatihan dan

training yang pernah diikuti.

3. JADWAL KULIAH : Gunakan pemakaian tabel dengan css seperti diatas.

4. AKTIVITAS : Pengalaman organisasi yang pernah anda ikuti selama kuliah atau

di luar.

5. Tambahkan menu atau informasi lain, untuk menambah nilai anda.

Referensi:

[1]. Mamoun Nawahdah. CSS Tutorial. W3School.com [2]. Jeffrey Veen. 2001. The Art & Science of Web Design. USA

Sekian Terima Kasih

Semoga Bermanfaat

Documents

Mendesain halaman Web dengan CSS - Catatan Kecil · Styles sheets define How HTML elements are to be displayed, just like the font tag and the color attribute in HTML 3.2. Styles