OPTIMASI HTML

DESAIN
WEBSITE
Dasar HTML, DHTML, dan
JavaScript
BAB 1
DASAR-DASAR HTML
1. Dasar Teori
HTML (Hypertext Markup Language) merupakan sebuah bahasa markup bukan bahasa
pemrograman. Bahasa markup (Indonesia : markah) adalah bahasa yang menkombinasikan
teks dan informasi tambahan mengenai teks tersebut. HTML merupakan dokumen standart
yang digunakan untuk mendesain halaman web.
Pada awal tahun 2000 W3C (Worl Wide Web Consortium) membuat perubahan besar
melalui XHTML (eXtensible Hypertext Markup Language). Ide dasarnya, dalam upaya
meningkatkan kompabilitas dokumen HTML. W3C menambahkan struktur dan
ekstensibilitas XML (eXtensible Markup Language) ke HTML.
Materi Pemrograman web ini untuk mengenal elemen, tag, dan atribut HTML. Perlu
digarisbawahi fungsi HTML dalam sebuah halaman web adalah menangani data/informasi
yang disajikan (content), bukan tampilan. Berikut akan diberikan beberapa table yang berisi
tag HTML dalam beberapa kategori.
2. Struktur Dokumen HTML
Setiap dokumen HTML harus diawali dengan tag <html> dan diakhiri dengan
komplemennya, yakni tag </html> tag. Sebagai tambahan, dokumen HTML juga
menyertakan tiga pasang tag.
· Tag <head> dan </head>: digunakan untuk menyatakan informasi mengenai

dokumen HTML.
· Tag <title> dan </title>: digunakan untuk menambahkan title di title bar browser.
· Tag <body> dan </body>: digunakan untuk melingkupi semua teks yang terdapat di
halaman HTML.
Setelah mengenal tag-tag yang digunakan dalam HTML, Anda dapat belajar
menggunakannya dalam beberapa contoh kasus di bawah ini. Tulislah kode HTML pada
editor teks yang tersedian dan simpan dalam format file HTML. Untuk melihat hasil dari
kode yang Anda tulis, bukalah file HTML pada sebuah browser.
3. Latihan Membuat dokumen HTML

Secara garis besar, struktur dokumen HTML terdiri dari dua bagian: header dan bodi. Di
mana header mendefinisikan informasi mengenai dokumen, sedangkan bodi mendefinisikan
tubuh atau isi dokumen.
Langkah-langkah pembuatan dokumen HTML diperlihatkan sebagai berikut:
a. Buka Editor Teks (Notepad, Notepad++)

b. Ketikkan Teks/Kode HTML dalam editor teks tersebut
c. Simpan Dengan Save as Type = “Nama File.html”
Lakukan dengan urut latihan-latihan yang telah di sediakan pada modul ini.
a) Latihan 1. Dasar Dokumen HTML
<html>
<head>

<title>Ini judul dokumen</title>
</head>
<body>
Ini adalah teks di body
</body>
</html>
Untuk mengetahui hasil pembuatan dokumen HTML, klik ganda file yang telah Anda
buat. Hasilnya akan terlihat seperti Gambar 1.
b) Latihan 2. Formating Teks
HTML menyediakan beragam elemen yang dapat dimanfaatkan untuk pemformatan

teks.
Ø Heading
Heading merupakan salah satu elemen penting di dalam dokumen HTML. Heading
didefinisikan menggunakan tag <hn> dan diakhiri dengan </hn>, di mana menyatakan
tipe dengan nilai 1-6.
Untuk mengetahui bentuk semua jenis heading, buat kode HTML seperti di bawah ini.
Perhatikan, kode HTML ini sengaja diringkas guna memudahkan penulisan. Jadi, dalam
implementasinya harus mendeklarasikan semua elemen-elemen dasar.
Ø Latihan 2.1
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
Dari pengkodean diatas dapat diperoleh Tampilan :
Elemen heading menyediakan atribut align yang dapat digunakan untuk mengatur
posisi teks.
Ø Latihan 2.2
<body>
<h1 align="right">Heading 1</h1>
<h2 align="left">Heading 2</h2>
<h3 align="center">Heading 3</h3>
</body>
Ø Latihan 2.3 Paragraf

Sebagaimana teks pada umumnya, dokumen HTML dapat terdiri dari
kumpulan paragraf. Dalam konteks HTML, paragraf direpresentasikan melalui tag
<p>. Tag <p> sebenarnya merupakan tag pasangan, meski dalam implementasinya
kerap kali diabaikan.
Pada latihan ini kita akan membuat desain teks menggunakan spasi teks,
tetapi dalam memunculkannya browser akan mengabaikannya.
<body>
<p>
Paragraf ini
mengandung spasi dan baris
dalam kode sumbernya,
tetapi browser
akan mengabaikannya.
Mengapa begitu?
</p>
<p>
Sedangkan yang ini memiliki
spasi
panjang.
</p>
<p align=”center”>
Jumlah baris dalam setiap paragraf tergantung pada
ukuran window browser Anda. Bila Anda mengubah ukuran
window browser, jumlah baris dalam paragraf
akan berubah.
</p>
<p align=”right”>
Untuk memotong <br> baris <br> dalam sebuah <br>
paragraf, <br> gunakan tag br.
</p>
</body>
</html>
c) Latihan 3. Fontase
HTML menyediakan sejumlah elemen yang dapat dimanfaatkan untuk mengatur
font, seperti huruf tebal, huruf miring, garis bawah, dan masih banyak lagi.
Sebagai tambahan, di sini juga akan dijelaskan mengenai cara mencetak tag.
Seperti diketahui, tag <p> di dokumen secara otomatis akan diterjemahkan sebagai
paragraf. Adapun untuk mencetak karakter <p> di layar, kita perlu menggunakan nama
entitas. Sebagai contoh, karakter < dinyatakan dengan nama entitas < dan karakter >
dinyatakan dengan >
Ø Latihan 3.1
<body>
<b>Menggunakan tag <b>...</b></b> <br />
<strong>Menggunakan tag
<strong>...</strong></strong>
<br />
<i>Menggunakan tag <i>...</i></i> <br />
<em>Menggunakan tag <em>...</em></em> <br />
<u>Menggunakan tag <u>...</u></u> <br />
<strike>Menggunakan tag
<strike>...</strike></strike> <br />
</body>
Ø Latihan 3.2
<body>
<b>Teks ini tebal </b>
<br>
<strong> Teks ini juga tebal </strong>
<br>
<big> Teks ini hurufnya besar </big>
<br>
<em> Teks ini miring </em>
<br>
<i> Teks ini juga miring </i>
<br>
<small> Teks ini hurufnya kecil </small>
<br>
Teks ini berisi <sub> subscript </sub>
<br>
Teks ini berisi <sup> superscript </sup>
</body>
d) Latihan 4. Performatted Text

Adakalanya kita menginginkan agar teks yang tertulis di editor teks dapat ditampilkan
apa adanya. Pada kasus seperti ini, kita bisa memanfaatkan keberadaan tag <pre>. Tag
ini akan menampilkan teks dengan font Courier dan tetap mempertahankan spasi
serta baris baru.
Ø Latihan 4.1
<body>
<pre>
------------------------------------------------
No | Nama | Alamat
------------------------------------------------
1 | PT. Bintang | Jl. Terusan Surabaya
2 | PT. Sinar Jaya | Jl. Tidar
3 | PT. Mitra | Jl. Galunggung
4 | PT. Harapan | Jl. Jombang
5 | PT. Barokah | Jl. Bondowoso
------------------------------------------------
</pre>
</body>
Ø Latihan 4.2
<body>
<pre>
Ini adalah
Teks yang di-preformat.
Preformat akan menampilkan spasi
dan
line break apa adanya.
</pre>
<p>Tag pre cocok untuk menampilkan kode komputer di
bawah ini:</p>
<pre>
If a = 5 dan b = 10
Then b > a
</pre>
</body>
TUGAS 1
Buat website dengan tampilan seperti di bawah ini :
e) Latihan 5. Garis Horisontal

Di HTML, garis horizontal direpresentasikan melalui tag <hr />. Meskipun kebanyakan
browser me-render elemen ini dengan visualisasi yang sedikit berbeda, namun pada
hakekatnya mencerminkan sebuah bentuk garis horizontal.
Ø Latihan 5.1
<body>
Membuat garis horizontal <hr />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit,
<br />
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
<br />
Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris
nisi ut aliquip ex ea commodo consequat.
<hr />
</body>
Ø Latihan 5.2
<body>
<p>Tag hr mendefinisikan sebuah garis horisontal,
default-nya adalah rata tengah:</p>
<hr>
<p align=”left”>Terdapat paragraf disini</p>
<hr width=”80%” size=”10” align=”left”>
<p align=”right”>Terdapat paragraf disini</p>
<hr width=”400” size=”6” align=”right” color=”red”>
<center>
<p>Terdapat paragraf disini</p>
</center>
<!— Ini adalah komentar yang tidak akan ditampilkan di
layar browser -->
</body>
f) Latihan 6. Menggunakan List

HTML mendukung list dalam bentuk terurut (ordered), tak terurut (unordered), dan
definisi (definition). Untuk setiap bentuk list ini, terdapat list item—dinyatakan melalui
tag <li> berpasangan—yang merepresentasikan item-item list.
Ø Latihan 6.1
<body>
Ordered List
<ol>
<li>Satu</li>
<li>Dua</li>
</ol>
<hr />
Unordered List
<ul>
<li>Satu</li>
<li>Dua</li>
</ul>
<hr />
Definition List
<dl>
<dt>Satu</dt>
<dd>Satu Satu</dd>
<dt>Dua</dt>
<dd>Dua Dua</dd>
</dl>
</body>
Code diatas dapat di tampilkan seperti ini :
g) Latihan 7. Pewarnaan
Untuk memberikan warna background, HTML menyediakan atribut bgcolor di tag
<body>. Atribut ini dapat diisi dengan nama warna—misalnya red— atau kode
heksadesimal—misalnya #FFFFFF.
Khusus untuk elemen-elemen lain tertentu, tersedia atribut color yang
memungkinkan kita melakukan pewarnaan. Sama seperti bgcolor, nilai atribut ini juga
dapat berupa nama warna atau kode heksadesimal.
Ø Latihan 7.1

<body bgcolor="aqua">
<h3 align="center">Heading 3</h3>
<font color="red">Font berwarna merah</font> <br />
<font color="#FF0000">
Font berwarna merah (menggunakan nilai heksa)</font>
</body>
Ø Latihan 7.2
<body>
<body bgcolor="yellow">
<p>
Perhatikan bahwa halaman ini seharusnya berwarna kuning.
</p>
<hr color=”green” >
<p align=”left”>Terdapat paragraf disini</p>
<hr width=”80%” size=”20” align=”left”>
<p align=”right”> Untuk memberikan warna background,
HTML menyediakan atribut bgcolor di tag <body>.
Atribut ini dapat diisi dengan nama warna—misalnya
red— atau kode heksadesimal—misalnya #FFFFFF.
</p>
<hr width=”400” size=”6” align=”right” color=”red”>
<p>Gunakan tag heading hanya untuk membuat heading saja.
Jangan
menggunakan tag tersebut hanya untuk membuat tampilan
huruf tebal. Gunakan
tag lain untuk keperluan itu. </p>
4
<h1 align="center" color=”green”>Ini adalah heading
1</h1>
<p color=”red”>Heading di atas telah diposisikan untuk
berada di tengah halaman ini. </p>
</body>
TUGAS 2
Buat desain web seperti gambar di bawah ini :
h) Latihan 8 Bekerja Dengan Gambar

Tak hanya teks, kita juga bisa menyisipkan gambar di dalam dokumen HTML. Untuk
keperluan ini, HTML menyediakan tag <img> yang didukung dengan sejumlah atribut.
<body>
<p>


<img src="kucing.jpg" />
elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
<hr />
<p>


<img src=" file:///C|/Users/Public/Pictures/Sample
Pictures/Hydrangeas.jpg" />
magna aliqua.
</body>
Dari pengkodean di atas akan di peroleh hasil :
STUDI KASUS I
Buat halaman web sederhana yang melibatkan elemen teks, garis, warna, dan gambar.
Di mana terdapat minimal sebuah heading dan garis berwarna, gambar dengan garis
tepi (border), dan halaman utama dengan latar belakang gambar sembarang. Contoh
tampilannya diperlihatkan seperti Gambar dibawah ini :
Kumpulkan pada masing-masing instruktur dengan format penyimpanan :
studikasus1.namakalian.kelas.html
BAB 2
KOMPONEN HTML
A. Elemen-Elemen HTML
Pada pertemuan sebelumnya telah dijelaskan mengenai elemen-elemen
fundamental dari HTML/XHTML dan implementasinya. Selain elemen elemen
tersebut, masih terdapat elemen-elemen lain yang juga memiliki peran cukup
penting di dalam menghasilkan dokumen HTML.
Di bagian ini akan dijelaskan mengenai dasar-dasar dan cara penggunaan
elemen-elemen yang nantinya akan sering kita gunakan. Secara garis besar,
elemen-elemen ini mencakup:
· Link: Untuk mengaitkan satu dokumen dengan dokumen-dokumen lainnya
(atau bisa juga mengaitkan blok-blok di dalam satu dokumen)
· Tabel: Untuk menghasilkan data dalam bentuk tabular.
· Frame: Untuk membagi halaman web secara independen.
· Form: Untuk menghasilkan form masukan data.
B. LATIHAN
1. Menggunakan Link
Fitur fundamental dari hypertext adalah hyperlink dokumen-dokumen; kita dapat
menunjuk lokasi-lokasi lain. Sebagaimana diketahui, hyperlink merupakan teks
yang memungkinkan kita untuk melakukan navigasi dari satu halaman ke halaman
lainnya.
· Menciptakan Link
HTML menyediakan tag <a> (atau disebut anchor) untuk mendefinisikan sebuah
link. Dalam implementasinya, pembuatan link memerlukan atribut href yang
menyatakan lokasi tujuan. Lokasi ini bisa berupa alamat lengkap (absolut) atau
singkat (relatif).
Untuk mengetahui cara membuat dan mengaitkan dokumen, ikuti langkahlangkah
berikut:
1. Buka editor teks.

2. Ketikkan teks (kode-kode HTML) berikut:
<head>
<title>Demo Link</title>
</head>
<body>
<a href="link2.html">Klik di sini</a>
</body>
3. Simpan dokumen HTML dengan nama link1.html dan letakkan di lokasi direktori
web.
4. Langkah selanjutnya, buat halaman kedua (link2.html) yang nantinya akan
dikaitkan.
<head>
<title>Demo Link 2</title>
</head>
<body>
Untuk kembali ke halaman pertama
<a href="link1.html">Klik di sini</a>
</body>
5. Simpan dengan nama link2.html.

6. Untuk menguji hasilnya, buka browser dan arahkan ke alamat link1.html.
7. Klik link yang ada secara bergantian.
· Atribut Link
Elemen anchor menyediakan sejumlah atribut guna mendukung
fungsionalitasnya, dua di antaranya yang kerap digunakan adalah target dan title.
Atribut target digunakan untuk mengatur apakah link akan di buka di window yang
sama (default) atau di window (atau tab) baru. Di sisi lain, title berfungsi untuk
menampilkan teks manakala kursor mouse berada di atas link.
<head>
<title>Demo Atribut Link</title>
</head>
<body>
<a href="link2.html" target="_blank" title="Title
link">Klik di sini</a>
</body>
· Link Internal
Elemen anchor juga memungkinkan kita untuk melakukan navigasi di dalam satu
dokumen (layaknya bookmark). Untuk mengimplementasikan hal ini, kita
memerlukan atribut id.
Langkah pertama untuk mengimplementasikan link internal adalah dengan
mendefinisikan lokasi di atribut href yang diberi prefiks #. Langkah berikutnya
adalah menetapkan nilai atribut id di blok yang akan dituju, di mana nilainya sama
dengan href namun tanpa prefiks #. Untuk lebih jelasnya, perhatikan dokumen
berikut:
<head>
<title>Demo Link Internal</title>
</head>
<body>
Menu
<ul>
<li><a href="#pendahuluan">Pendahuluan</a></li>
<li><a href="#pembahasan">Pembahasan</a></li>
<li><a href="#kesimpulan">Kesimpulan</a></li>
</ul>
<h3 id="pendahuluan">Pendahuluan</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<h3 id="pembahasan">Pembahasan</h3>
<p>
<h3 id="kesimpulan">Kesimpulan</h3>
<p>
</body>
Perlu diperhatikan, nilai atribut id tidak boleh sama atau harus unik di dalam
lingkupnya.
· Link Email
Link tak hanya sebatas pada dokumen, tetapi juga bisa dimanfaatkan untuk
menunjuk ke suatu alamat email. Adapun dalam implementasinya, kita tinggal
mengubah alamat URL dengan alamat email—yang terlebih dahulu diberi
prefiks mailto.
<head>
<title>Demo Link Email</title>
</head>
<body>
<a href="mailto:priyatmoko.dwi88@gmail.com" >Email
Saya</a>
</body>
· Link Gambar
Link tidak hanya direpresentasikan dalam bentuk teks, tetapi juga bisa berupa
gambar. Langkah pembuatan link gambar pun sangat sederhana, cukup mengapit
tag <img> di antara tag <a>.
<head>
<title>Demo Link Gambar</title>
</head>
<body>
<a href="http://google.co.id" title="Search with
Google">
<img src="google.jpg" border="0" />
</a>
</body>
2. Tabel
Pada umumnya, tabel digunakan untuk menampilkan data tabular dalam bentuk
baris dan kolom. Perpotongan baris dan kolom di dalam tabel disebut sebagai sel.
Bagaimanapun, fleksibilitas HTML memungkinkan kita untuk menampilkan data di
dalam tabel secara atraktif. Artinya, tak hanya sebatas pada data tabular saja,
namun juga mengizinkan kita melakukan pemformatan.
· Menciptakan Tabel
Pada prinsipnya, pembuatan tabel sangat sederhana sekali, hanya masalah
pengorganisasian. Semua tabel harus diawali dengan tag <table>, kemudian ada
tiga tag dasar yang mengikutinya, meliputi:
· Tag <th> atau table heading yang berfungsi mendefinisikan header.

· Tag <tr> atau table row yang berfungsi mendefinisikan baris.
· Tag <td> atau table data yang berfungsi mendefinisikan sel.
Struktur pembentuk tabel dapat dilihat seperti pada Gambar dibawah ini :
Contoh pembuatan tabel diperlihatkan sebagai berikut:
<head>
<title>Demo Tabel</title>
</head>
<body>
<table border=1>
<caption>Label dari tabel</caption>

<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>

<tr>
<td>1</td>
<td>Ibnu</td>
<td>Jl. Jombang</td>
</tr>
</table>
</body>
· Pemformatan Tabel
Elemen tabel menyediakan sejumlah atribut yang dapat digunakan untuk
memformat visualisasi tabel. Tiga atribut pertama yang sering digunakan adalah
align (untuk mengatur posisi), cellspacing (untuk mengatur spasi antarsel) dan
cellpadding (untuk mengatur spasi antara border sel dengan isinya).
<head>
<title>Demo Spasi Tabel</title>
</head>
<body>
<table border=1 align="center" cellspacing=0
cellpadding=10>

<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
<tr>
<td>1</td>
<td>Ibnu</td>
</tr>
</table>
</body>
Atribut lain yang juga cukup penting adalah width (untuk menentukan lebar tabel
atau sel).
<head>
<title>Demo Ukuran Tabel</title>
</head>
<body>
cellpadding=5>
<tr>

<th width="50">No</th>
<th width="150">Nama</th>
<th width="200">Alamat</th>
</tr>
<tr>
<td>1</td>
<td>Ibnu</td>
</tr>
</table>
</body>
· Desain Tabel
Sebuah tabel tidak selalu memiliki ukuran dan jumlah sel yang sama dalam setiap
baris ataupun kolomnya. Sebagai contoh, mungkin kita perlu melakukan
penggabungan (merge) sel. Dalam konteks elemen tabel, penggabungan sel dapat
dilakukan berdasar baris (rowspan) atau kolom (colspan).
<head>
<title>Demo Span/Merge Sel</title>
</head>
<body>
cellpadding=5>
<tr>
<th width="50">No</th>

<th width="350" colspan=2>Span Nama dan Alamat</th>
</tr>
<tr>

<td rowspan=2>Span baris 1 dan 2</td>
<td>Ibnu</td>
</tr>

<tr>
<td>Vita</td>
<td>Jl. Jakarta</td>
</tr>
</table>
</body>
Fitur lain yang ada pada tabel adalah pengelompokan sel berdasarkan kolom
maupun baris. Untuk pengelompokan kolom menggunakan elemen COLGROUP
sedangkan pada baris memanfaatkan TBODY.
TUGAS 3
Buat desain web seperti gambar di bawah ini :
3. Frame
Frame memungkinkan kita untuk menampilkan lebih dari satu halaman dokumen
dalam satu waktu. Tidak seperti di tabel, tiap-tiap frame mencerminkan halaman
yang independen.
Untuk menciptakan frame, kita terlebih dahulu menciptakan tipe baru yang disebut
frameset. Penjelasan lebih detail mengenai penggunaan frame dapat dilihat pada
kode berikut:
<head>
<title>Demo Frame</title>
</head>
<frameset cols="20%,*">
<!—frame kiri -->
<frame src="link1.html" name="left" id="left" />
<!—frame kanan -->
<frame src="link_internal.html" name="main" id="main"
/>

<noframes>
Browser Tidak Support Frame
</noframes>
</frameset>
4. Form
Tak ubahnya form (formulir) konvensional, form HTML merupakan suatu media
untuk memasukkan data. Di sini form juga terdiri dari komponenkomponen seperti
text field, button, check box, radio button, dan sejenisnya. Pembuatan form dapat
dilakukan secara langsung atau memanfaatkan table guna memperoleh hasil yang
rapi. Contoh pembuatan form yang melibatkan
tabel diperlihatkan sebagai berikut:
<head>
<title>Template Desain Form</title>
</head>
<body>
<h3>Formulir Pendaftaran</h3>
<form action="" method="post">
<table border=0>
<tr>
<td>NIK</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>
<input type="radio" />Pria
<input type="radio" />Wanita
</td>
</tr>
<tr>
<td>Pekerjaan</td>
<td>
<select name="job">
<option>Guru</option>
<option>Wiraswasta</option>
<option>Lainnya</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" value="ok" />
<input type="submit" value="cancel" />
</td>
</tr>
</table>
</form>
Bagian ini hanya menjelaskan secara garis besar bentuk form sederhana dan cara
pembuatannya.
STUDI KASUS III

a. Buat Kelompok @2 siswa, Buat Tampilan Website seperti pada gambar di
bawah ini.
BAB 3
Cascading Style Sheet (CSS)
A. Cascading Style Sheet

Cascading style sheet (CSS) merupakan sekumpulan aturan yang menyatakan
bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen. Rekomendasi CSS
menguraikan tiga jenis style:
· Embedded: properti style diletakkan di dalam satu blok di dokumen HTML.

· Inline: properti style diterapkan secara langsung per baris atau per elemen HTML.
· Linked: properti style diletakkan di file berekstensi css dan dikaitkan dengan dokumen
HTML.
Selain mengulas tentang pemanfaatan CSS, bagian ini juga menekankan pada
pembuatan desain dengan menggunakan division. Bagaimanapun, untuk menghasilkan
desain halaman web yang baik, penggunaan tabel tidak disarankan dan sebagai gantinya
adalah dengan memanfaatkan division.
B. Menggunakan Style Sheet

Sebagaimana diketahui, ada tiga pendekatan yang bisa digunakan untuk mengim-
plementasikan style sheet. Bagian ini akan menjelaskan langkah penerapan ketiga
pendekatan tersebut.
· Inline
Pada pendekatan ini, kita menerapkan style per baris atau per tag melalui atribut style.
<head>
<title>Inline Style</title>
</head>
<body>

<p style="color:red; font-style:italic">
Ini paragraf pertama

<p style="color:blue; font-weight:bold">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
<p>
Ini paragraf ketiga
</body>
Pendekatan inline sangat cocok digunakan untuk pemberian style khusus pada beberapa
tag saja.
· Embedded
Pada pendekatan ini, keseluruhan aturan style didefinisikan ke dalam satu blok baru
kemudian digunakan di elemen-elemen HTML.
<head>
<title>Embedded Style</title>
<style type="text/css">

</style>
</head>
<body>
<p>
<p>
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
<p>
Ini paragraf ketiga
</body>
Terlihat bahwa pendefinisian style berdampak pada seluruh elemen paragraf. Bagaimana
jika hanya ingin memberikan style pada elemen tertentu? Untuk lebih menspesifikasikan
pemberian style, kita bisa menggunakan atribut class atau id. Tekniknya, class dinotasikan
dengan titik (.); id dinotasikan dengan pagar (#).
<head>
<title>Embedded Style</title>

</style>
</head>
<body>
<p class="style1">
<p id="style2">
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
<p class="style1">
Ini paragraf ketiga
</body>
· Linked
Pendekatan ini mirip dengan embedded, kecuali style-nya diletakkan di file terpisah dan
berekstensi css. Pemisahan style ini juga menjadikan pendekatan ini sangat efektif dan
efisien, khususnya ketika akan digunakan oleh lebih dari satu dokumen.
Langkah-langkah pembuatan file css diperlihatkan sebagai berikut:

1. Buka editor teks.
2. Ketikkan rule style seperti berikut:
.style1 {
color: red;
font-style: italic;
}
#style2 {
color: blue;
font-weight: bold;
}
3. Simpan di satu folder dengan ekstensi css, misalnya style.css.
Setelah selesai mendefinisikan file style, kita bisa menggunakannya di dokumen HTML
melalui suatu link .
<head>
<title>Linked Style</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<p class="style1">
<p id="style2">
aliqua.
<p class="style1">
Ini paragraf ketiga
</body>
· Initial Cap
Jika diperlukan, kita bisa mengatur huruf pertama dari paragraph merepresentasikan huruf
besar (initial cap) seperti layaknya di majalah.
<head>
<title>Style Font</title>

</style>
</head>
<body>
<p>
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</body>
· Border
Properti border merepresentasikan batas dari suatu bidang area, misalnya paragraf. Properti
ini menyediakan beberapa style yang bisa dimanfaatkan untuk membuat variasi border.
<head>
<title>Style Sheet</title>

</style>
</head>
<body>
<p class="border1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
<p class="border2">
<p class="border3">
</body>
· Padding
Seperti halnya di tabel, padding berfungsi untuk menetapkan jarak antara border dengan
konten.
Sintaks padding:
o padding: nilai_semua_sisi
o padding: nilai_atas nilai_kanan nilai_bawah nilai_kiri
o padding-top: nilai_atas
o padding-right: nilai_kanan
Contoh penggunaan padding:
<head>
<title>Style Sheet</title>

</style>
</head>
<body>
<p class="border1">
<p class="border2">
</body>
· List
Kemampuan menarik lainnya dari CSS adalah memformat list menjadi struktur menu yang
elegan.
<head>
<title>Style List</title>

</style>
</head>
<body>
List Normal
<ul>
<li>Satu</li>
<li>Dua</li>
</ul>
<hr />
Style List
<div id="leftmenu">
<ul>
<li><a href="#">Menu Satu</a></li>
<li><a href="#">Menu Dua</a></li>
<li><a href="#">Menu Tiga</a></li>
</ul>
</div>
</body>
B. Menggunakan Division
Pendekatan yang efektif untuk memformat elemen-elemen HTML—termasuk juga
division—adalah dengan menggunakan CSS.
· Ukuran Area
Seperti di kebanyakan elemen, kita bisa memanfaatkan atribut width dan height untuk
menspesifikasikan ukuran area. Selain itu, atribut-atribut seperti padding dan margin juga
bisa dimanfaatkan di sini.
<head>
<title>Demo Ukuran Division</title>

</style>
</head>
<body>
<div class="box1">
Paragraf ini di dalam tag <div>
</div>
<div class="box2">
</div>
</body>
· Posisi Area
Seperti halnya paragraf, elemen-elemen div akan menghasilkan area secara berurutan dari
atas ke bawah. Adapun jika dikehendaki, kita bisa mengatur posisi area secara fleksibel
dengan memanfaatkan atribut float CSS.
<head>
<title>Demo Posisi Division</title>

</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
aliqua.
laboris
</div>
</body>
Perlu diperhatikan, atribut float normalnya akan mencoba memampatkan area sepanjang
masih bisa dilakukan. Misalkan di dokumen sebelumnya kita tambahkan sebuah area kecil,
maka hasilnya akan terlihat seperti Gambar dibawah ini.
Bergantung kebutuhan, perilaku normal dari float bisa sesuai keinginan atau sebaliknya.
Apabila dua kotak pertama dikehendaki sejajar sehingga penambahan baru akan dilakukan
setelah batas kota terluas (kotak kanan), kita bisa me-reset atribut float dengan
menggunakan atribut clear.
<head>
<title>Demo Posisi Division</title>

</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
aliqua.
laboris
</div>
<div class="box3">
</div>
</body>
C. Desain Layout
Setelah mempersiapkan wrapper, langkah selanjutnya adalah membuat desain layout.
Sebagai contoh, kita akan membuat layout standar (header, menu, content, dan footer)
dengan style terpisah. Definisikan style seperti berikut dan simpan dengan nama
mystyle.css.
#wrapper {
margin: auto;
width: 750px;
}
#header {
height: 80px;
border: 1px solid blue;
}
#inner {
float: left;
margin: 5px 0;
border: 1px solid black;
}
#sidebar {
float: left;
margin-right: 20px;
width: 180px;
height: 330px;
}
#content {
float: left;
width: 544px;
height: 330px;
border: 1px solid green;
}
#footer {
clear: both;
height: 50px;
border: 1px solid blue;
}
Buat desain layout seperti berikut:
<head>
<title>Desain Layout Sederhana</title>
<link rel="stylesheet" href="mystyle.css"
type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
Header
</div>
<div id="inner">
<div id="sidebar">
Sidebar
</div>
<div id="content">
Content
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
D. TUGAS
Buat desain layout web seperti gambar dibawah, serta hasil akhir dari tampilan web
tersebut. Kumpulkan pada masing-masing instruktur dengan format nama file
Tugaslayout.”kelas”.”namasiswa”.html
Hasil akhir layout web :

OPTIMASI HTML

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

OPTIMASI HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

DESAIN

· Tag <head> dan </head>: digunakan untuk menyatakan informasi mengenai

3. Latihan Membuat dokumen HTML

a. Buka Editor Teks (Notepad, Notepad++)

a) Latihan 1. Dasar Dokumen HTML

b) Latihan 2. Formating Teks

HTML menyediakan beragam elemen yang dapat dimanfaatkan untuk pemformatan

Dari pengkodean diatas dapat diperoleh Tampilan :

Ø Latihan 2.3 Paragraf

d) Latihan 4. Performatted Text

e) Latihan 5. Garis Horisontal

f) Latihan 6. Menggunakan List

h) Latihan 8 Bekerja Dengan Gambar

Dari pengkodean di atas akan di peroleh hasil :

1. Buka editor teks.

5. Simpan dengan nama link2.html.

· Tag <th> atau table heading yang berfungsi mendefinisikan header.

Contoh pembuatan tabel diperlihatkan sebagai berikut:

STUDI KASUS III

A. Cascading Style Sheet

· Embedded: properti style diletakkan di dalam satu blok di dokumen HTML.

B. Menggunakan Style Sheet

Langkah-langkah pembuatan file css diperlihatkan sebagai berikut:

Contoh penggunaan padding:

Buat desain layout seperti berikut:

Anda mungkin juga menyukai