Scribd
Unggah
27 tayangan

Modul HTML

modul praktikum tentang HTML

Diunggah oleh

Ayu Ridhawati
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
27 tayangan

Modul HTML

modul praktikum tentang HTML

Diunggah oleh

Ayu Ridhawati
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 30

MODUL PRAKTIKUM

Web Programming

i
MODUL 1
HTML

Tujuan
1. siswa dapat membuat desain Web menggunakan HTML
2. siswa dapat mengerti dasar dari pemrograman Web.

HTML (Hypertext Markup Language) adalah bahasa format dari tag XML(Extended Markup
Language) yang digunakan sebagai standar tampilan dari halaman Web. HTML dapat diterima
sebagai tampilan halaman Web setelah melalui proses interpretasi dari Web browser. Selain itu
HTML memiliki struktur yang fleksibel, tanpa lojik serta toleran terhadap kesalahan.
Standar Minimum elemen HTML:
 Document Type Declaration (DTD)
 Head
 Body

<DTD>
<html>
<head>
<!—Terdiri dari elemen-elemen yang mendeklarasikan konten sebagai
pendukung
ingkungan seperti title, meta dokumen, CSS, Java Script -->
</head>
<body>
<!—Terdiri dari elemen-elemen yang diinterpretasikan sebagai
tampilan web -->
</body>
</html>

1.1. DTD
Sebagai standar versi dokumen W3C yang digunakan sebagai representasi
setiap elemen pada dokumenWeb,
Contoh:
· <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
· <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1 -
transitional.dtd">
Standar tipe dokumen tersebut dapat digunakan untuk validasi elemen halaman
Web.

1.2. Meta Dokumen


Elemen meta sebagai identitas dari halaman Web yang biasa terdiri dari owner,
keywords, l a y o u t, ataupun inisialisasi proses seperti r e f r e s h.
Contoh:
· <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
/>
· <meta name="owners" content="myWeb" />

1
· <meta name="keywords" content="Sistem Informasi, Jurnal, Publikasi
Ilmiah" />
· <meta name="layout" content="main" />
· <meta HTTP-EQUIV="REFRESH" content="0; url=/myweb/myurl">

1.3. Elemen HTML


Jenis-jenis elemen data yang akan ditampilkan pada halaman Web seperti:
Form, Text, Image, Table, Drop-Box, Button dan lainnya.
Contoh:
· Title,
Ditampilkan pada header browser
<title>Praktikum Pemrograman Web</title>

Text
<h1>Selamat Datang Di Website Kami!</h1>
<h2>Web Ini Adalah Tutorial Pemrograman Web</h2>
<h3>Praktikum Pemrograman Web</h3>
<p> <a href="http://uin-malang.ac.id"> Teknik Informatika
UIN Malang </a> </span> link for your success way </p>

Image
<img src="images/myphoto.jpg" width="180" height="200"
alt="photo"/>

Form
<form method="POST" action="response2.jsp"
enctype="multipart/form-data">

Drop-Box
<select name="My Lab">
<option value=’CC’>Lab. Praktikum Computer Vision</option>
<option value=’SI’> Lab. Sistem Informasi </option>
<option value=’CAI’> Lab. Computing & AI </option>
</select>

File Browser
<input type="file" name="upload" value="" width="200" />

Table
<table border="1" width="10">
<thead>
<tr>
<th>NIM</th>
<th>Mahasiswa</th>
</tr>
</thead>
<tbody>
<tr>
<td>123</td>
<td>Ani Rahmawati </td>
</tr>
<tr>
<td>124</td>
<td>Budi Susilo</td>
</tr>
</tbody>
</table>

2
List
Bidang Minat:
<ol>
<li>Sistem Informasi
<ul>
<li>Data Warehousing </li>
<li>Enterprise Architecture </li>
</ul>
</li>
<li>Multimedia
<ul>
<li>Komputer Grafik </li>
<li>Machinema </li>
</ul>
</li>
</ol>

1.4. Instruksi Praktek


 Buat file form1.html
 Kopikan setiap kode script html sebagaimana diatas
 Amati yang terjadi pada browser dengan melakukan refresh pada setiap perubahan kode
 Aktifkan plugin firebug pada browser Mozilla atau chrome, kemudian lakukan inspeksi sambil
melakukan perubahan-perubahan kode HTML

1.5. Jawablah pertanyaan berikut:


1. Lakukanlah perubahan pada kode HTML sesuai keinginan anda,
Pernakah terjadi error ketika adakesalahan kode?
2. Cobalah ubah nilai meta refresh <meta HTTP-EQUIV="REFRESH"
content="5; url=http://google.co.id"> apa yang terjadi?, maka
jelaskan apa diantara kegunaan meta dokumen?
3. Jelaskan fungsi tag HTML pada Table: thead, tbody, tr, th serta td!

1.6. Tugas I
Dengan menggunakan HTML buatlah desain form HTML, sebagai berikut:

3
MODUL 2
HTML Form

Tujuan
3. siswa mampu membuat form pada dokumen HTML
4. siswa memahami cara penggunaan dari fasilitas Form pada halaman
dokumen HTML
5. siswa mampu menginputkan field sesuai dengan kegunaan

Overview
Salah satu fasilitas yang disediakan oleh dokumen HTML memungkinkan kita untuk
melakukan “interaksi lebih” terhadap halaman dokumen tersebut. Semisal,
kemampuan dokumen HTML mampu menyediakan fasilitas yang dapat menerima
masukkan atau isian data dari user. Data isian user ini nantinya akan dapat diproses
lebih lanjut menjadi informasi yang dibutuhkan oleh user maupun oleh pemilik situs
tersebut. Teknik pengisian ini dilakukan menggunakan elemen Form.

Form dalam HTML adalah suatu bagian yang berfungsi sebagai input atau masukan
dari pengguna yang kemudian akan diproses atau diolah untuk dapat digunakan
sesuai dengan kebutuhan. Contohnya proses pengiriman data, browse, hapus,
penyuntingan data dan lain sebagainya.
2.1 Menu Form
Form dalam HTML adalah suatu bagian yang berfungsi sebagai input atau
masukan dari pengguna yang kemudian akan diproses atau diolah untuk dapat
digunakan sesuai dengan kebutuhan. Contohnya proses pengiriman data,
browse, hapus, penyuntingan data dan lain sebagainya. Cara penulisan form
dalam html adalah.

4
Pada penulisan form "nama form" adalah nama form yang sedang digunakan,
method adalah metode atau cara yang digunakan untuk menyimpan data ke server
sedangkan action adalah alamat atau bisa juga file lain yang digunakan untuk
memproses input dari form kedalam server.

2.2 Jenis-jenis media input dalam Form


Pada bagian form tersedia kontrol-kontrol input yang digunakan untuk masing-
masing keperluan dalam memasukan data input. Dan kontrol form terdiri dari :

2.2.1 Kontrol Berupa Text


Pengisian informasi dalam bentuk teks pada form HTML dapat dilakukan dengan
menggunakan dua buah elemen:textarea dan input. textarea digunakan untuk
masukan teks yang terdiri dafi beberapa baris, sementara inputdigunakan untuk
masukan teks yang hanya satu baris.

Penggunaan elemen textarea dapat dilakukan dengan sangat sederhana, hanya


langsung memasukkan tag-nya saja:

<textarea>
</textarea>

selain memberikan tag kosong seperti di atas, kita juga dapat mengisikan tag
untuk mendapatkan nilai masukan standar:

<textarea>
Contoh isi textarea
</textarea>

Gambar 2.1 Contoh Penggunaan Elemen TextArea


Pengaturan panjang dan lebar dari textarea dapat dilakukan melalui CSS, dengan
menggunakan properti height danwidth.

Walaupun dapat mengisikan teks dengan banyak sekaligus, textarea tentunya


tidak dapat digunakan untuk seluruh kasus pengisian data. Seringkali kita

5
menginginkan pengguna hanya mengisikan data singkat, tanpa isi teks yang
banyak. Untuk jenis masukan seperti itu, kita dapat menggunakan elemen input:

<input type="text">

yang akan menghasilkan elemen masukan seperti berikut:

Gambar 2.2 Contoh Penggunaan Elemen Input


Perhatikan juga bahwa kita menggunakan atribut type pada elemen ini untuk
menentukan data-data yang akan diisikan. Terdapat banyak jenis tipe data yang
dapat kita isikan, dan browser akan menyesuaikan jenis masukan teks yang ada,
sesuai dengan atribut type yang kita tentukan. Nilai-nilai yang dapat diisikan pada
atribut type yaitu:
1. color 9. time
2. datetime-local 10. datetime
3. number 11. month
4. tel 12. search
5. week 13. url
6. date 14. password
7. email 15. text
8. range 16. file

2.2.2 Kontrol Berupa Radio Button


Radio button di gunakan untuk menyatakan pilihan yang bersifat tunggal, umumnya
pada web di gunakan untuk kelengkapan pertanyaan seperti pada pendaftaran
online, biasanya pertanyaan itu adalah pilihan untuk menyetakan jenis kelamin ,
agama, ataupun sebagainya. Radio Button ini akan sering kita temui saat kita
berselancar di dunia maya yang terkait dengan proses input data seperti
pendaftaran dll.

Radio button dibuat dalam HTML dengan menggunakan elemen input, dengan
atribut type bernilai : code`radio`:

<input type="radio" name="sex" value="pria">Pria<br><input type="radio" name="sex"


value="wanita">Wanita

6
dalam pembuatan elemen radio button, kita juga wajib menambahkan dua atribut
lainnya, yaitu name dan value. Atribut name digunakan untuk memberitahukan
browser bahwa radio button dengan atribut name yang sama adalah merupakan
kumpulan radio button yang sama, sehingga pengguna tidak boleh memilih dua
buah pilihan pada radio button tersebut.

Atribut value digunakan untuk menyimpan nilai yang ingin kita kirimkan ke server.

Gambar 2.3 Contoh Penggunaan Elemen Radio Button


2.2.3 Kontrol Berupa Checkbox
Berbeda dengan radio button yang hanya memungkinkan user memilih satu pilihan,
pada input type checked box Anda dapat memilih satu atau beberapa pilihan, atau
tidak memilih sama sekali. Pilihan ini biasanya dipakai untuk memasukkan data yang
sifatnya opsional. Anda dapat menggunakan “Checkbox” pada atribut. Input
checkbox adalah sebuah masukan untuk memilih sesuatu opsi/ pilihan. Jika dipilih
maka pengguna akan men-check (mencentang) dan jika tidak memilih akan
dibiarkan saja.
Elemen ini sama seperti radio button, dibuat dengan elemen input yang nilai atribut
type-nya berisikancheckbox.

<input type="checkbox" name="day" value="senin">Senin<br><input type="checkbox" name="day" va


value="rabu">Rabu

Seperti yang dapat dilihat, atribut name dan value juga wajib dimiliki oleh
checkbox, dengan alasan yang sama untuk radio button.

Gambar 2.4 Contoh Penggunaan Elemen Checkbox


Meskipun dapat memberikan pilihan nilai kepada pengguna, radio button maupun
checkbox sangat tidak ideal untuk digunakan pada pilihan yang memiliki nilai yang
sangat banyak. Misalnya, pilihan negara yang ditinggali oleh pengguna dari ratusan

7
negara yang ada di dunia akan jika ditampilkan pada radio button akan
menyebabkan daftar yang dipaparkan sangat banyak dan sulit dibaca oleh
pengguna. Dalam kasus seperti ini lebih baik kita menggunakan dropdown list.

2.2.4 Dropdown list


Pembuatan elemen dropdown dilakukan dengan menggabungkan dua elemen, yaitu
select dan option. Elemenselect membungkus seluruh elemen option yang ada,
untuk membentuk sebuah dropdown. Elemen option sendiri merupakan nilai dari
dropdown yang diinginkan. Perhatikan kode di bawah:

<select name="country">
<option value="indonesia">Indonesia</option>
<option value="malaysia">Malaysia</option>
<option value="filipina">Filipina</option>
<option value="vietnam">Vietnam</option>
</select>

yang akan menghasilkan:

Gambar 2.5 Contoh Penggunaan Elemen Dropdown


dan jika ingin memungkinkan pengguna memilih beberapa pilihan kita dapat
menambahkan atribut multiple pada elemen select:

<select name="country" multiple>


<option value="indonesia">Indonesia</option>
<option value="malaysia">Malaysia</option>
<option value="filipina">Filipina</option>
<option value="vietnam">Vietnam</option>
</select>

8
Gambar 2.6 Contoh Penggunaan Elemen Dropdown dengan Pilihan Banyak

2.2.5 Button
Pada saat kita melakukan browsing di dunia maya, dan mengakses sebuah website.
Sering kita menemui tombol-tombol fungsi seperti reset, submit, send dan lain
sebagainya. Dan sering pula kita sering menemui gambar yang dibuat fungsi seperti
tombol.
2.2.5.1 Submit
Tombol ini berfungsi untuk memanggil url yang sudah didefisikan di atribut action.
Pembuatan tombol submit juga dilakukan dengan menggunakan elemen input, yang
atribut type-nya diisikan dengan nilai submit, seperti berikut:
<input type="submit" name="submit" value="Masukkan Form">

Perhatikan bahwa berbeda dengan elemen-elemen input sebelumya, nilai dari atribut
value diproses menjadi teks dari tombol yang ditampilkan ke pengguna. Hal ini
menyebabkan kita tidak lagi perlu menambahkan teks setelah elemen form, seperti
pada radio button ataupun checkbox.

Gambar 2.7 Contoh Penggunaan Tombol Submit

2.2.5.2 Reset
Tombol ini berfungsi untuk mengembalikan form ke kondisi awal (mengosongkan
nilai semua elemen yang ada pada form). Pembuatan tombol dilakukan sama persis
seperti pada tombol submit, dengan perbedaan nilai pada atribut type, yang diisikan
dengan reset pada tombol penghapusan ini.
<input type="reset" name="reset" value="Kosongkan Form">

9
2.2.6 Organisasi Elemen Form
Mengetahui bagaimana membuat elemen-elemen masukan / input pada form masih
merupakan langkah awal dalam pembuatan form HTML. Elemen-elemen masukan
form jika ditampilkan tanpa informasi tambahan tidaklah berguna, karena pengguna
tidak dapat mengetahui data apa yang harus diisikan ke dalam elemen-elemen
tersebut.
Untuk memberikan informasi tambahan kepada pengguna, HTML juga menyediakan
elemen-elemen yang dapat digunakan sebagai penanda dari elemen masukan form.
Adapun elemen-elemen yagn dapat digunakan untuk tujuan tersebut yaitu label,
fieldset, dan legend.

2.2.6.1 Label
Elemen label memberikan fasilitas untuk menambahkan teks pada elemen masukan
form. Elemen ini diisikan dengan deskripsi dari elemen masukan yang ingin
ditambahkan, dan harus memiliki atribut for. Atribut for pada elemenlabel berisikan
nilai yang sama dengan atribut id pada elemen masukan form. Pengisian nilai yang
sama akan mengikatkan elemen label dengan elemen masukan, sehingga pengguna
dapat langsung mengisikan nilai dengan melakukan klik pada teks yang dihasilkan
oleh elemen label.
Perhatikan kode berikut di mana isi dari atribut for pada label adalah sama dengan
isi atribut id pada elemen input.
<label for="username">Username</label>
<input type="text" name="username" id="username">

2.2.6.2 Fieldset
Elemen fieldset merupakan elemen yang digunakan untuk membungkus beberapa
elemen masukan form, untuk menandakan bahwa elemen-elemen tersebut
merupakan elemen masukan yang berada pada satu grup yang sama, atau saling
berhubungan.
Secara standar, elemen fieldset akan memberikan border di sekitar grup elemen-
elemen di dalamnya, yang tentunya dapat diubah dengan menggunakan CSS.
Berikut adalah contoh penggunaan fieldset :
<fieldset>
<label for="username">Username</label>
<input type="text" name="username" id="username">
<label for="password">Password</label>
<input type="text" name="password" id="password">
</fieldset>

yang hasil eksekusinya adalah:

gambar 2.8 Contoh Penggunaan Fieldset


2.2.6.2 Legend
Elemen legend digunakan untuk memberikan judul pada sebuah fieldset. Pengunaan
elemen legend sangat sederhana, hanya dengan menambahkan elemen tersebut
sebagai child pertama dari fieldset, seperti berikut:
<fieldset>
<legend>Login</legend>
<label for="username">Username</label>
<input type="text" name="username" id="username">
<label for="password">Password</label>
<input type="text" name="password" id="password">
</fieldset>

yang akan menghasilkan tampilan seperti berikut:

Gambar 2.9 Contoh Penggunaan Legend

dan tentunya tampilan dari legend dapat diubah dengan menggunakan CSS.
2.2.7 Validasi Masukan pada Form
Seringkali dalam pengembangan form pada aplikasi, terdapat elemen-elemen yang
tidak wajib diisikan oleh pengguna dan elemen-elemen yang wajib diisikan oleh
pengguna. Aplikasi kemudian akan melakukan pengecekan terhadap nilai masukan
dari pengguna, apakah nilai yang wajib ada sudah diisikan atau belum. Jika nilai
belum diisikan maka aplikasi akan menolak form pengguna, dengan pesan kesalahan
yang menjelaskan bahwa terdapat isian yang wajib diisi oleh pengguna. Proses
pengecekan kewajiban isi atau berbagai batasan lain ini dikenal dengan nama
validasi.
Validasi pada elemen-elemen form HTML dilakukan dengan beberapa cara, yaitu:
1. Atribut requied pada elemen-elemen masukan yang wajib diisikan. Jika
pengguna tidak mengisikan elemen maka browser secara otomatis akan
memberikan peringatan kepada pengguna dan membatalkan pengiriman
form. Contoh penggunaan atribut ini yaitu:
<input type="text" name="username" requied>

2. Pengunaan atribut type yang benar, untuk memastikan browser dapat


melakukan pengecekan nilai yang diisikan pengguna dengan format sesuai
dengan yang dispesifikasikan pada standar HTML. Misalnya, jika
menggunakantype="email", maka pengguna tidak dapat mengisikan
bukanemail sebagai masukan form.

Gambar 2.10 Contoh Pesan Kesalahan Pengisian Email pada HTML


LATIHAN

1. Penggunaan input text dalam sebuah form.


Simpan dengan nama latihan14.html

Gambar 2.11. Contoh skrip untuk penggunaan input text dalam sebuah form

2. Penggunaan Input Text berupa Password.


Simpan dengan nama latihan15.html

Gambar 2.12. Contoh skrip untuk penggunaan input text dalam


sebuah passwordmenu
3. Penggunaan Input text berupa radio button
Simpan dengan nama latihan16.html

Gambar 2.13. Contoh skrip untuk penggunaan input text berupa radio button

4. Penggunaan checkbox dalam HTML.


Simpan dengan nama latihan17.html

Gambar 2.14. contoh skrip untuk penggunaan input text berupa checkbox
5. Penggunaan submit, reset, dan image sebagai
button. Simpan dengan nama latihan18.html

Gambar 2.15. Contoh skrip penggunaan input berupa button

6. Penggunaan Text area dalam Form.


Simpan dengan nama latihan19.html

Gambar 2.16. Contoh skrip penggunaan input berupa text area


7. Penggunaan Select Dropdown dalam Form. Simpan
dengan nama latihan20.html

Gambar 2.17. Contoh skrip penggunaan Select Dropdown.


MODUL 3
CASCADING STYLE SHEETS
(CSS)

Tujuan :
1. Memahami tentang konsep CSS
1. Memahami aturan penulisan pada CSS
2. Memahami selector sebagai pengontrol design
3. Memahami pembuatan background
4. Memformat text pada web
5. Memahami pengaturan bentuk font
6. Membuat pengaturan tabel dan pewarnaannya
7. Membuat hyperlink dan tombol yang menarik

I. KONSEP
CSS Apa itu
CSS :
 Feature untuk membuat dynamic HTML.
 Style sheet mendeskripsikan bagaimana tampilan document HTML di layar (template)
 Membuat special efek (mendefinisikan style untuk <H1> dengan style bold dan
italic dan berwarna biru)
 Support ke semua
browser.

Aturan penulisan :
 Nilai untuk property tidak boleh dalam tanda
petik. contoh : color : green;
 Nama property bersifat case
sensitive. color : green;
property :
color value
: green

Cara penggunaan CSS :


 External Style Sheet
Bentuk :
<link rel=“stylesheet” type=“text/css”
href=“css_files.css”>
dimana :
 <link, merupakan tag pembuka diakhiri dengan tanda “>”
 rel=“stylesheet”, menerangkan halaman ini akan dikenai efek style sheet
 type=“text/css”, file yang dipanggil berupa css
 href=“css_files.css”, alamat dokumen stylesheet yang dipanggil

Contoh Penggunaan :
script efek.css
 Internal Style Sheet
Bentuk umum :
<style type=“text/css”>
…definisi style…
</style>

Contoh Penggunaan :

 Inline Style sheet


Contoh Penggunaan
:

18
II. ATURAN PENULISAN PADA CSS
Syntaxis CSS dibagi dalam 3 bagian :

selector {property : value}

dimana :
selector : tag HTML yang akan didefinisikan (body, H1, Link , dll).
property : atribut yang akan diubah

Cara penulisan :
FONT-FAMILY : sans-serif;
FONT-SIZE : small;

Cara penulisan yang salah :


FONT-FAMILY : “sans-serif”;
FONT-SIZE : „small‟;

Cara mendeklarasikan kelompok : (tanda koma serta &)


H1, H2 {color : green};
H3, H4 & H5 {color : red};

Cara menuliskan komentar :


• Menggunakan tanda : /* ….. */
• Menggunakan tanda : <!------------->
Bentuk ukuran :
Ukuran Keterangan
em Untuk menentukan ukuran yang pecahan (desimal)
ex x-height, digunakan untuk menentukan ukuran yang
sifatnya vertikal
px Pixels, menentukan ukuran yang bersifat pixel (layar
monitor) seperti ukuran huruf.

III. SELECTOR SEBAGAI PENGONTROL DESIGN


1. Selector untuk merubah body. color: red;
BACKGROUND-COLOR: green;
<HTML> }
<HEAD> </style>
<TITLE> Selector </TITLE> </HEAD>
<style type="text/css">
body <BODY>
{ Halaman efect CSS
FONT-FAMILY: Geneva, Arial; </BODY>
FONT-SIZE: 20px; </HTML>
2. Jenis-jenis selector </HEAD>
a. Selector bebas
<HTML> <BODY id="BODY_115">
<HEAD> Menggunakan ID Selector
<TITLE> Selector </TITLE> </BODY>
<style type="text/css"> </HTML>
gbawah{
TEXT-DECORATION: underline; IV. MEMFORMAT HALAMAN WEB
} 1. Format dengan margin
</style> <HTML>
</HEAD> <HEAD>
<TITLE>Pengaturan Margin</TITLE>
<BODY> <STYLE ="text/css">
<gbawah> Efect Garis Bawah dengan BODY
Selector Bebas </gbawah> {
</BODY> margin-top : 1cm;
</HTML> margin-right : 2cm;
margin-bottom : 1cm;
b. Selector dengan class margin-left : 2cm;
<HTML> }
<HEAD> </STYLE>
<TITLE> Selector </TITLE> </HEAD>
<style type="text/css"> <BODY>
.right { text-align : right } Pengaturan Margin Halaman
</style> (1cm,2cm,1cm,2cm)
</HEAD> </BODY>
</HTML>
<BODY>
<h2 class="right">Class Heading 2 </h2> 2. Pemetaan menggunakan padding
<p class="right"> Class Paragraf</p> Padding hampir sama dengan margin :
a. Margin hanya digunakan untuk membuat
</BODY> batasan-batasan sisi halaman.
</HTML> b. Padding dapat membuat batasan-batasan pada
komponen web lain seperti tabel, disamping
c. Selector Id pengaturan batas halaman.
<HTML>
<HEAD> <HTML>
<TITLE> Selector </TITLE> <HEAD>
<style type="text/css"> <TITLE>Pengaturan Margin</TITLE>
#BODY_115 { <STYLE ="text/css">
FONT-SIZE: 20px; BODY {
TEXT-DECORATION: underline; padding-top : 10%;
COLOR: blue; padding-right : 20%;
FONT-FAMILY:Comic Sans MS; padding-bottom : 40%;
} padding-left: 20%;
</style> }
</STYLE> 3. Background gambar
</HEAD> Properties Value Keterangan
<BODY> background- url Alamat gambar
image yang dituju
Text ini berada di tengah halaman , background- repeat Diulang dlm hal
karna di lakukan pengaturan halaman repeat repeat-x Diulang sumbu x
dengan menggunakan padding atas 10%, repeat-y Diulang sumbu y
no-repeat Tampil 1 gbr
kanan 20%,bawah 40%,dan kiri 20%.
</BODY> Background- top left Atas kiri hal
position top center Atas tngh hal
</HTML> top right Atas kanan hal
center left Tgh kiri hal
V. MEMBUAT BACKGROUND center center Pusat hal
1. Background warna center right Tngh kanan hal
bottom left Bwh kiri hal
<HTML> bottom center Bwh tgh hal
<HEAD> bottom right Bwh kanan hal
<TITLE>Menggunakan Background x-% y-% Pakai nilai %
x-pos y-pos
Warna</TITLE>
Contoh 1 :
<STYLE type="text/css">
<HTML>
BODY { background-color : yellow}
<HEAD>
</STYLE>
<TITLE>Menggunakan Background
</HEAD>
Gambar</TITLE>
<BODY>
<STYLE ="text/css">
Halaman ini di buat Berwarna Kuning
BODY
</BODY>
{
</HTML>
background-image:
url("drums.jpg");
2. Background campuran
<HTML> background-repeat: repeat-x;
<HEAD> }
</STYLE>
<TITLE>Menggunakan Background
</HEAD>
Warna</TITLE>
<BODY>
<STYLE ="text/css">
Background Berulang pada Sumbu X
body {background-color : #99CCFF}
</BODY>
h2 {background : green}
</HTML>
h3 {background-color : transparent}
p {background : rgb(240,248,255)}
Contoh 2 :
</STYLE>
<HTML>
</HEAD>
<HEAD>
<BODY>
<TITLE>Menggunakan Background
<h2>Header 2,Background Hijao</h2>
Gambar</TITLE>
<h3>Header 3 , Bakground Transparan</h3>
<STYLE ="text/css">
<p>Background pada paragraph</p>
BODY
</BODY>
{
</HTML>
background-image:url ("motor.jpg");
background-repeat: no-repeat;
background-position: center center;
}

Teknik Informatika UIN Maulana Malik Ibrahim Malang | Web Programming Practicum 21
</STYLE> Contoh 2 :
</HEAD> <HTML>
<BODY> <HEAD>
Background di Pusat Halaman <TITLE>Format Text </TITLE>
</BODY> <STYLE ="text/css">
</HTML> h1 {text-align: center}
h2 {text-align: left}
VI. FORMAT TEXT PADA WEB h3 {text-align: right}
Properties Value Keterangan </STYLE>
Pengaturan warna
color green, dll </HEAD>
Pengaturan Spasi (jrk antar karakter) <BODY>
letter-spacing Normal Ukrn standar HTML
Length Ukrn panjang <h1>Header 1,Di tengah</h1>
(cm,px) <h2>Header 2 , Di kiri</h2>
Perataan Text <h3>Header 3 ,Di kanan</h3>
text-align left
right </BODY>
center </HTML>
justify
text-decoration none Bentuk standar
underline Bergaris bwh Contoh 3 :
overline Bergaris atas <HTML>
line-through Text dicoret <HEAD>
blink Text berkedip
<TITLE>Format Text </TITLE>
Pengaturan text indentasi <STYLE ="text/css">
text-indent length Dengn cm, px em {text-decoration : overline}
% Dengan persentase
Pengubahan Bentuk Karakter h2 {text-decoration: blink}
text-transform capitalize h3 {text-decoration: underline}
uppercase
lowercase
a {text-decoration: none}
none </STYLE>
</HEAD>
Contoh 1 : <BODY>
<HTML> <em>Bentuk Overline</em>
<HEAD> <h2>Header 2, Bentuk Line-
<TITLE>Format Text </TITLE> through</h2>
<STYLE ="text/css"> <h3>Header 3,Bentuk Underline</h3>
p {color : green; letter-spacing: 0.5cm} <p> <a href="http://lecturer.eepis-
h4 {letter-spacing: -2px} its.edu/~zenhadi">
</STYLE> Penggunaan Dalam Link,Nilai NONE</a></p>
</HEAD> </BODY>
<BODY> </HTML>
<p>Pengaturan Spasi Pada Paragraph
</p> Contoh 4 :
<h4> Header 4</h4> <HTML>
</BODY> <HEAD>
</HTML> <TITLE>Format Text </TITLE>
<STYLE ="text/css">
p.besar {text-transform: uppercase}

22
p.kecil {text-transform: lowercase} <BODY>
</STYLE> <P class="italic">Menggunakan Style
</HEAD> Italic</P>
<BODY> <P class="normal">Menggunakan Style Normal
<p class="besar"> </P>
pengubahan kedalam hurup Besar <P class="oblique">Menggunakan Style
</p> Oblieque</P>
<p class="kecil"> </BODY>
PENGUBAHAN KEDALAM HURUF KECIL </HTML>
</p>
</BODY> Contoh 2 :
</HTML> <HTML>
<HEAD>
VII. PENGATURAN FONT <TITLE>Pengaturan Font</TITLE>
<STYLE ="text/css">
Properties Value Keterangan
Jenis Font p.normal
font-family arial, dll {
Ukuran Huruf font-family : verdana ;
Font-size Small Kecil
Medium Menengah font-weight: normal;
Large Besar }
Length Besar font (pt,px) p.thick
% Persentase
Pengaturan gaya pada font {
font-style normal font-family : verdana ;
italic
oblique
font-weight: bold;
}
Ketebalan huruf p.thicker
font-weight normal
bold
{
100 ~ 900 font-family : times ;
font-weight: 900;
Contoh 1 : }
<HTML> </STYLE>
<HEAD> </HEAD>
<TITLE>Pengaturan Font</TITLE> <BODY>
<STYLE ="text/css"> <p class="normal">
p.italic This is a paragraph</p>
{ <p class="thick">
font-size :200 % ; This is a paragraph</p>
font-style: italic; <p class="thicker">
} This is a paragraph</p>
p.normal{ </BODY>
font-family : verdana ; </HTML>
font-style: normal;
}
p.oblique {font-style: oblique}
</STYLE>
</HEAD>
VIII. PENGATURAN TABEL background-color : #E6E6FA;
border-width: 1px ;
Yang perlu diperhatikan adalah border-style:solid;
pengaturan border, padding dan margin suatu border-color :blue ;
tabel. font-size: 9pt;
1. Pengaturan padding }
<HTML>
<HEAD> File html yang akan memanggil file css
<TITLE>Pengaturan Padding Table</TITLE> <HTML>
<style type="text/css"> <HEAD>
td.kiri{ <TITLE>Pengaturan Table spec</TITLE>
padding-top: 2cm; <LINK REL="STYLESHEET"
padding-right: 2cm; TYPE="text/css"
padding-bottom: 2cm; HREF="table_specbody.css">
padding-left: 2cm ;
background-color : #F0F8FF; </HEAD>
} <BODY>
</style> <table width="468" border="0"
</HEAD> cellpadding="5" cellspacing="0" >
<BODY> <tr>
<TABLE BORDER="1"> <th width="112" >Nama Computer</th>
<TR> <th width="91">Prossesor</th>
<TD class="kiri">Pading dengan jarak 2cm <th width="96">Ram</th>
dari kiri,atas,kanan,dan bawah</TD> <th width="137" >System Operasi</th>
<TD>Tanpa jarak </TD> </tr>
</TR> <tr>
</TABLE> <td>Clnt-1</td>
</BODY> <td >IP 4 1,8 Ghz</td>
</HTML> <td >10 GB</td>
<td >Redhat Linux</td>
2. Menggunakan file css untuk </tr>
mempercantik pembuatan tabel. <tr>
<td >Clnt-2</td>
File table_specbody.css <td >IP 2 Ghz C</td>
/* CSS Document */ <td >6 GB</td>
<td >Mandrake Linux</td>
TH { </tr>
color : #FFFFFF; <tr>
background-color : #336699; <td >Clnt-2</td>
border-width: 1px ; <td >XP 2000+ </td>
border-style:solid; <td >20 GB</td>
border-color :red ; <td>Windows</td>
font-size: 9pt; </tr>
} </table>
TD { </BODY>
color : red; </HTML>

24
IX.PENGATURAN HYPERLINK
& TOMBOL YANG MENARIK </STYLE>

Syntax penulisan pada CSS : </HEAD>


a:link {property : value} <BODY>
<TABLE border="1">
Selector Keterangan
a:link Keadaan awal pemicu link aktif <TR>
a:visited Keadaan pemicu link setelah <TD width="144">
dikunjungi <a href="#">Arahkan Mouse ke
a:active Keadaan pemicu yang sedang aktif
a:hover Kejadian pada pemicu link saat mouse sini</a>
digerakkan diatasnya </TD>
</TR>
1. Penggunaan property selector <TR>
<HTML>
<HEAD> <TD width="144">
<TITLE>Pengaturan pada link</TITLE> <a href="#">Arahkan Mouse ke
sini</a>
<STYLE type="text/css"> </TD>
/*Konversi pengaturan Link pada contoh </TR>
sebelumya menggunakan css */ </TABLE>
A:link {color : green;} </BODY>
A:hover { color : pink;} </HTML>
</STYLE>
</HEAD>
<BODY>
<a href="http://lecturer.eepis-its.edu/~zenhadi" 3. Membuat tombol visual 3D
target="_self">Contoh Hyperlink a. Pembuatan file css
menggunakan CSS</a> /* CSS Document */
</BODY> .leftlinks {
</HTML> border:1px solid #22476C;
padding:5px;
2. Pembuatan tombol dengan tabel margin:5px;
text-align:middle;
<HTML> background-color:#336699;
<HEAD> width:150px;
<TITLE>Pengaturan Pada Link }
background</TITLE> .leftlinks a {
display:block;
<STYLE ="text/css"> margin:3px 0px;
A:link {text-decoration: none} border-top:1px solid #4C86C0;
A:visited {text-decoration: none} border-left:1px solid #4C86C0;
A:active {text-decoration: none} border-right:1px solid #22476C;
A:hover { border-bottom:1px solid #22476C;
font-weight:none; padding: 4px 10px;
color: red; text-align:center;
background-color:blue;} background-color:#336699;

25
color:#EDEDED; </BODY>
text-decoration:none; </HTML>
}
.leftlinks a:link { Fungsi tag <div> : hampir sama dengan tag
color:#EDEDED; paragraf <p>, berguna untuk mengelom pokkan
} sejumlah baris teks yang memiliki karakteristik
.leftlinks a:visited { yang sama.
color:#EDEDED;

26
}
.leftlinks a:hover { display:block; margin:3px 0px;
border-top:1px solid #22476C; border-left:1px solid #22476C; border-
bottom:1px solid #4C86C0; border-right:1px solid #4C86C0; padding: 5px 9px
3px 11px;
text-align:center; background-color:#336699; color:#EED929;
text-decoration:none;
}

b. Pembuatan file HTML utk memanggil css


<HTML>
<HEAD>
<TITLE>Pengaturan Pada Link Visualisasi tombol</TITLE>

<LINK REL="STYLESHEET" TYPE="text/css"


HREF="link_frtombol.css">

</HEAD>
<BODY>

<div class="leftlinks">
<a href="index.htm">Teras Wamika</a>
<a href="profil.htm">Pssrofil Organisasi</a>
<a href="struktur.htm">Struktur</a>
<a href="pembimbing.htm">Pembimbing
Org</a>
<a href="dpo.htm">DPO Organisasi</a>
<a href="kegiatan.htm">Kegiatan Rutin</a>
<a href="berita.htm">Berita UKM</a>
</div>
TUGAS :
Buatlah web pribadi anda, lengkapi dengan pembuatan tombol link menggunakan css.
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 informasi lain, untuk menambah nilai anda.

Anda mungkin juga menyukai