i Pengantar Website – Muatan Lokal Kelas XII

Pengantar Website – Muatan Lokal Kelas XII
i
Kata Pengantar
Puji dan sukur kami panjatkan kehadirat Allah SWT karena atas berkah,
rahmat dan kuasanyalah buku Muatan Lokal SMA Budhi Warman II ini
dapat diselesaikan.
Buku ini disusun sebagai salah satu bahan ajar dalam pelaksanaan kegiatan
belajar mengajar mata pelajaran Muatan Lokal SMA Budhi Warman II,
Jakarta
Dalam buku ini, disajikan materi pembelajaran Muatan Lokal secara
sederhana, efektif dan mudah dimengerti. Symbol, gambar, diagram dan
grafik disajikan untuk mempermudah peserta didik mengerti materi yang
sedang dipelajari.
Disusun sesuai dengan standard kompetensi dan kompetensi dasar mata
pelajaran Muatan Lokal, peserta didik diharapkan bisa menggunakan buku
ini sebagai panduan dalam mengerjakan tugas-tugas yang diberikan oleh
guru pembimbing.
Akhirnya, kami menyampaikan terimakasih kepada semua pihak yang telah
membantu sekolah menerbitkan buku ini.
Jakarta, Agustus 2012
Yogi Adi Nugroho, S.Kom
Pengantar Website – Muatan Lokal Kelas XII
i
Daftar Isi
Kata Pengantar…………………………………………………….. i
Daftar Isi…………………………………………………………… ii
Bab 1 Pengantar Website...………………………………………... 1
1.1 Dasar Pengembangan Website…………………………. 2
1.2 Batasan-batasan desain halaman website……………….6
1.3 Pemilihan bahasa situs…………………………………. 7
Bab 2 Dasar HTML…….…………………………………………. 9
2.1. Struktur HTML……………………..…………………. 11
2.2 Aturan Penulisan HTML……………………………….. 13
2.3 Tag HTML……...……………………………………… 14
2.4 Penambahan Objek..…………………………………… 20
2.5 Tabel……..……...……………………………………… 21
2.6 Link antar dokumen….………………………………… 25
Bab 3 Pengantar CSS..……………………………………………. 27
3.1 Struktur CSS…………………………………………… 28
3.2 Aturan penulisan CSS…………………..……………… 29
3.3 Selector Class dan ID…………………..……………… 31
Bab 4 Identifikasi Dreamweaver.…………………………………. 33
4.1 Membuka Dreamweaver CS 3………………………… 34
4.2 Mengenal area kerja Dreamweaver..…………………… 36
4.3 Pengaturan penyimpanan website..…………………….. 38
4.4 Membuat dan menyimpan dokumen HTML.………….. 41
4.5 Menutup dan membuka kembali halaman website..…… 46
Bab 5 Membangun Website..………………………………………48
5.1 Pembuatan Table……………..………………………… 49
5.2 Desain tampilan Layout………………...……………… 52
5.3 Memasukan elemen website…………………………… 61
Pengantar Website – Muatan Lokal Kelas XII
ii
Pengantar Website – Muatan Lokal Kelas XII
iii
BAB 1
PENGANTAR WEBSITE
 Dasar Pengembangan Website
 Pengantar website
Pengantar Website – Muatan Lokal Kelas XII
1
1.1. Dasar pengembangan Website
Desain halaman web ditujukan kepada kebutuhan untuk
memberikan
informasi
kepada
pembaca/pengunjung
situs
berdasarkan kriteria-kriteria dan batasan-batasan media halaman
web. Dua diantara batasan halaman web yang dimaksud pertama
adalah bahwa halaman web disajikan di sebuah monitor komputer
yang merupakan media elektronis yang menghasilkan radiasi
elektromagnetis dengan luas tampilan yang terbatas yang dijalankan
disebuah platform komputer dengan dukungan perangkat lunak
browser tertentu. Kriteria kedua yang perlu diperhatikan adalah
akses kepada situs untuk sebagian besar pengunjung membutuhkan
biaya akses internet yang relatif masih cukup mahal untuk
kebanyakan orang Indonesia dan berjalan dengan kecepatan yang
lambat.
Dua kriteria atau batasan media halaman web menyebabkan
proses desain halaman web ditujukan kepada kemudahan mengakses
informasi dan daya tarik untuk setiap unsur situs. Faktor kemudahan
mengakses informasi yang sesuai
bagi pengunjung untuk menuju informasi yang dibutuhkan serta
tidak membutuhkan waktu yang lama, sedangkan faktor daya tarik
ditujukan agar pengunjung bersedia meluangkan waktu untuk
membaca informasi yang disediakan situs. Apabila suatu situs tidak
memiliki dua faktor diatas, dapat dipastikan situs menjadi
membosankan dan tidak banyak pengunjung yang mau mengakses
Pengantar Website – Muatan Lokal Kelas XII
2
situs tersebut.
Sebuah halaman web dapat dikategorikan menjadi halaman
web statis atau halaman web dinamis. Halaman web statis adalah
halaman web yang tidak mengalami perubahan isi dari waktu ke
waktu. Jenis ini adalah halaman situs yang sesuai untuk memberi
informasi yang tetap, seperti peraturan atau pengumuman lainnya.
Halaman web dinamis adalah halaman yang mengalami perubahan
dari waktu ke waktu, baik sekedar bentuk penampilan atau
perubahan isi dari halaman web tersebut.
Untuk membuat halaman web statis, kita dapat sepenuhnya
mengandalkan kepada HTML(HyperText Marking Language), dan
agar lebih menarik dapat disertai dengan sejumlah gambar.
Sedangkan untuk halaman web dinamis, kita tidak cukup
mengandalkan HTML, tetapi harus didukung dengan bahasa
pemrograman dan basis data untuk web. Tentu saja mengembangkan
web dinamis, jauh lebih komplek dibanding mengembangkan
halaman web statis. Untuk mengembangkan sebuah halaman web
sederhana
yang
sepenuhnya
berbasis
HTML,
kita
cukup
menggunakan program editor teks sederhana seperti notepad.
Namun beberapa perangkat lunak terintegrasi telah dikembangkan
untuk membuat halaman web atau mengembangkan sebuah situs
yang jauh lebih kompleks. Dua diantaranya yang paling populer
adalah Macromedia Dreamweaver.
Pengantar Website – Muatan Lokal Kelas XII
3
Gambar 1.1 Aplikasi Notepad dan Dreamweaver
Selain
HTML,
terdapat
beberapa
standar,
bahasa
pemrograman dan basis data untuk mengembangkan halaman web.
Standar yang dimaksud diantaranya adalah CSS(Cascading Style
Sheet) yang digunakan untuk standarisasi atribut htm! agar tampilan
web lebih menarik dan XML( extended Markup Language) standar
untuk mengelola data internet.
Seluruh file, kode prorgram, basis data serta unsur-unsur lain
sebuah web disimpan di sebuah web server, yaitu komputer server
yang memiliki alamat tertentu pada sebuah jaringan atau internet.
Pengantar Website – Muatan Lokal Kelas XII
4
Web Client, komputer pengguna yang akan mengakses halaman
web, melalui web browser akan memanggil alamat web server untuk
menampilkan isi dari web.
Bahasa pemrograman yang khusus atau populer dalam
pengembangan web adalah PHP, ASP, Java, atau pemrograman script
seperti Javascript dan VBScript. PHP dan ASP adalah contoh jenis
bahasa pemrograman web sisi server(server-side programming}.
Sedangkan Javascript dan VBScript adalah contoh jenis bahasa
pemrograman sisi k!ien(Client-Side Programming). Server Side
Progsmming melakukan proses di server dan server hanya
mengirimkan hasil akhir dalam bentuk html ke web client(web
browser). Sedangkan client side programming mengharuskan web
server mengirimkan seluruh kode program ke web client.
Selanjutnya Web browser akan menerjemahkan program yang
dikirimkan server dan menampilkan hasil akhirnya di layar. Server
side programming memiliki fasilitas dan kemampuan yang jauh
lebih baik ketimbang client side programming. Bahasa pemrograman
PHP, beserta basis data MySQL dan Apache web server adalah
pasangan
pengembangan
yang
paling
popuper.
Ketiganya
merupakan aket yan bersifat open source dan gratis. Untuk
lingkungan Windows, ketiganya disatukan ke dalam paket Apache
XAMPP.
Pengantar Website – Muatan Lokal Kelas XII
5
1.2. Batasan-Batasan Desain Halaman Web
Kreativitas desain web dihasilkan dari kemampuan desainer
mengatasi batasan-batasan halaman web. Pemahaman batasanbatasan web dalam berkreasi akan menghasilkan haiaman web yang
menjadikan mengakses halaman web adalah sesuatu hal yang mudah
dan menyenangkan. Batasan-batasan tersebut misalnya:
Platform user yang beragam:
•
Komputer Macintosh menampilkan huruf lebih kecil dari PC
•
PC mempunyai font default yang berbeda denga Macintosh
•
Unix dengan X windowsnya tidak mempunyai font default.
Browser user yang beragam:
•
Netscape menguasai JavaScript, Microsoft selalu satu
langkah tertinggal.
•
Microsoft
mempunyai
Jscript
dan
VBScript
dan
ActiveX, semuanya tidak berjalan di Netscape
•
Tidak ada browser satu pun yang menguasai Java
•
Microsoft tidak mengharuskan menggunakan penutup pada
kebanyakan tag HTML. Netscape mengharuskannya.
•
Browser memiliki versi, versi yang lebih baru mendukung
teknologi yang lebih baru.
•
Tidak setiap teknologi web didukung oleh seiuruh browser.
Untuk mengatasi batasan-batasan diatas, desainer biasa memilih satu
dari dua buah solusi.
a. Membuat
sesederhana
halaman
web
dengan
teknologi
yang
mungkin, sehingga dapat diakses oleh
Pengantar Website – Muatan Lokal Kelas XII
6
pengunjung dari berbagai platform dan browser. Konsekuensi
dari pilihan ini adalah halaman web yang dihasilkan dari sisi
tapilan tidak terlalu menarik.
b. Dengan dukungan web programming, buat beberapa versi
halaman web untuk beberapa variasi teknologi, platform dan
browser. Konsekuensi dari pilihan ini adalah pengembangan
menjadi jauh lebih kompleks.
1.3. Pemilihan Bahasa Situs
Faktor yang harus diperhatikan juga adalah pemilihan bahasa
dalam situs. Meledaknya jumlah situs di internet dan masih
mahalnya biaya akses internet menyebabkan pengunjung situs tidak
akan berlama-lama membaca setiap tulisan yang ada di situs. Bahasa
yang tidak baik akan memberikan opini kepada pengunjung bahwa
situs tersebut tidak banyak memberi manfaat dan segera beralih ke
situs lain, oleh sebab itu bahasa yang digunakan dalam situs
sebaiknya memenuhi kriteria-kriteria sebagai berikut :
1. Singkat, memilih kalimat yang langsung kepada pokok
permasalahan dan menghindari penjelasan bertele-tele.
2. Padat,
memberikan
informasi
yang
lengkap,
tidak
menggantung, menerapkan 5 W(what, when, why, where,
who, how) dan membuang kata-kata mubazir.
3. Sederhana, demngam kalimat tunggal dan sederhana mudah
dipahami, bukan kalimat majemuk yang panjang, rumit dan
kompleks dan sulit dipahami.
Pengantar Website – Muatan Lokal Kelas XII
7
4. Lugasm mampu menyampaikan pengertian atau makna
informasi secara langsung dengan menghindari bahasa yang
berbunga-bunga.
5. Menarik, menggunakan pilihan kata yang masih hidup,
tumbuh, dan berkembang, menghindari kata-kata yang sudah
mati.
6. Jelas, informasi yang disampaikan dengan mudah dapat
dipahami
oleh
khalayak
umum(pengunjung).
Struktur
kalimatnya tidak menimbulkan penyimpangan/pengertian
makna yang berbeda, menghindari ungkapan bersayap atau
bermakna ganda(ambigu). Menggunakan kata-kata yang
bermakna denotatif.
7. Hal lain yang perlu diperhatikan adalah penentuan ragam
berdasar situasi. Ragam bahasa disesuaikan dengan sifat situs
dan target pengunjung situs. Situs pemerintah tentu saja
menggunakan ragam bahasa formal, sebaliknya situs "anak
gaul" menggunakan ragam bahasa non formal. Satu jenis
ragam yang lain adalah ragam semiformal atau yang dikenal
dengan istilah ragam populer, yaitu ragam
Pengantar Website – Muatan Lokal Kelas XII
8
BAB 2
Dasar HTML
 Dasar Pengembangan Website
 Dasar HTML
Pengantar Website – Muatan Lokal Kelas XII
9
Gambar 2.1 Langkah membuat website sederhana
Gambar diatas menunjukkan pada kalian bagaimana membuat
halaman web sederhana. Halaman web yang kalian buat ini menggunakan
bahasa yang disebut HTML (Hypertext Markup Language). HTML
merupakan pengembangan dari standar pemformatan dokumen teks yaitu
Standard Generalized Markup Language (SGML). HTML sebenarnya
adalah dokumen ASCII atau teks biasa yang dirancang untuk tidak
tergantung pada suatu sistem operasi tertentu.
Sebuah dokumen atau file HTML agar dapat dibaca langsung oleh
browser disimpan dalam ekstensi .htm atau .html. Untuk menulis HTML
tidak dibutuhkan perangkat lunak yang spesifik, cukup dengan text editor
sederhana seperti Notepad (pada Microsoft Windows). Beberapa editor
menyediakan fitur-fitur tambahan seperti syntax coloring (memberi warna
pada kode-kode HTML) dan code completion (melengkapi secara otomatis
Pengantar Website – Muatan Lokal Kelas XII
10
kode yang akan dituliskan). Saat ini telah banyak perangkat lunak berbasis
GUI yang sangat membantu dalam pembuatan halaman-halaman HTML.
Macromedia Dreamweaver dan Microsoft Frontpage merupakan dua nama
yang cukup populer di platform Microsoft Windows.
2.1.
Struktur HTML
HTML adalah bahasa yang disisipkan (embedded language) pada
dokumen dengan memberi tanda tertentu yang disebut tag. Tag merupakan
aturan penulisan kode yang ditulis dengan diawali tanda lebih kecil dan di
akhiri dengan tanda lebih besar (<tag>). Browser akan menentukan tampilan
teks atau dokumen berdasarkan tag yang digunakan.
Dokumen HTML secara umum akan terdiri dari dua bagian yaitu Header
dan Body
Gambar 2.3 Dengan tag <title> </title>
a) Header
Header biasanya berisi berbagai macam keterangan tentang
dokumen seperti title (judul dokumen), posisinya dalam sekumpulan
halaman web dan hubungannya dengan dokumen lain. Bagian ini
ditandai dengan tag <head> …. </head>. Tag ini tidak memiliki
Pengantar Website – Muatan Lokal Kelas XII
11
atribut. Didalam tag head kita dapat meletakkan beberapa tag lain
seperti tag title dan tag link.
Gambar 2.2 Tanpa tag <title> </title>
Gambar 2.2Dengan tag <title>
</title>
b) Body
Body adalah bagian dari dokumen HTML tempat dimana
kita meletakkan isi dari dokumen. Bagian ini ditandai dengan tag
<body> dan diakhiri dengan </body>. Apapun yang berada diantara
dua tanda ini disebut sebagai body content. Dokumen HTML yang
paling sederhana mungkin hanya berisi sebaris atau dua baris teks
saja tanpa format apapun). Pada dokumen yang lebih kompleks,
body content bisa berisi teks yang terformat, gambar, tabel atau
bahkan animasi yang rumit.
Pengantar Website – Muatan Lokal Kelas XII
12
Gambar 2.4 Penggunaan tag <body> </body>
2.2.
Aturan Penulisan HTML
Penulisan tag HTML mengikuti aturan-aturan umum berikut ini:
a) Setiap tag memiliki nama yang spesifik, terkadang diikuti
opsi-opsi yang disebut atribut. Baik nama maupun opsi harus
berada dalam tanda < >.
Contoh :
<a href=”home.html” title=”Home”>Home</a>
Pada contoh diatas, tag yang digunakan adalah <a>
sedangkan atribut untuk tag <a> adalah href dan title. Baik nama
tag ataupun atributnya harus berada di dalam tanda < >, ditulis
setelah tag a seperti pada contoh diatas.
b) Sebagian besar tag berpasangan. Contoh penulisan untuk tag
yang
berpasangan
adalah
sebagai
berikut
:
<namatag>….</namatag>
Contoh :
<title> Paragraf </title> ---- tag “title” berpasangan
<b> Cetak Tebal </b> ---- tag “b” berpasangan
Pengantar Website – Muatan Lokal Kelas XII
13
Pada tag yang berpasangan seperti pada contoh diatas,
<title> adalah tag awal dan </title> adalah tag akhir. Perhatikan
tanda / pada tag akhir.
c) Nama tag dan atribut-nya tidak bersifat case sensitive.
Penulisan <strong>Cetak Tebal</strong> memberikan hasil yang
sama dengan <STRONG>Cetak Tebal</STRONG>.
d) Penulisan atribut suatu tag diletakkan setelah nama tag. Jika
ada lebih dari satu atribut maka digunakan spasi untuk
memisahkannya. Nilai dari atribut ditulis setelah tanda sama
Contoh : (=).
dengan
<font size=”3”>Teks Baru</font>
<font size=”5” face=“verdana“>Teks Baru </font>
Pada contoh diatas, terlihat bahwa atribut size dari tag font
memiliki nilai 5 sedangkan atribut face memiliki nilai
“verdana”.
2.3.
Tag HTML
Ada banyak sekali Tag HTML yang tersedia, baik itu
berhubungan dengan deskripsi dokumen atau yang berhubungan dengan
format tampilan dokumen. Tidak semuanya akan dibahas dalam modul
ini. Berikut ini akan dibahas beberapa tag yang biasa dipakai dalam
format tampilan dokumen.
a) Heading  <h>……….</h>
Heading adalah sekumpulan kata yang menjadi judul atau
Pengantar Website – Muatan Lokal Kelas XII
14
subjudul dalam sebuah dokumen HTML. HTML menyediakan enam
tingkatan heading, dimana heading level 1 (<h1>) a dalah yang
terbesar dan heading level 6 (<h6>) adalah yang terkecil. Perhatikan
gambar dibawah ini :
Gambar 2.5 Penggunaan tag heading
b) Paragraph  <p>……….</p>
Paragraf dalam HTML dibuat dengan tag <p>. Tag ini akan
membuat baris baru dengan menyisipi satu baris kosong. Penulisan
isi paragraf diapit oleh <p> …. </p>. Pengaturan posisi paragraf
dapat dilakukan dengan atribut align yang diikuti dengan posisi yang
diinginkan, yaitu left untuk rata kiri, center untuk rata tengah dan
right untuk rata kanan.
Gambar 2.6 Penggunaan tag Paragraph
Pengantar Website – Muatan Lokal Kelas XII
15
c) Line Break (Enter)  <br>…….
Line break digunakan untuk menuliskan teks pada baris
berikutnya. Line break dibuat dengan tag tunggal <br>. Tag ini akan
membuat baris baru tanpa memberi baris kosong sebagaimana pada
tag <p>
Gambar 2.7 Penggunaan tag Line Break <br>
d) List
HTML menyediakan 3 cara untuk membuat daftar atau list, yaitu

Ordered list  <ol> <li>…..</li></ol>
Ordered list digunakan untuk membuat daftar dimana
setiap bagian memiliki nomor secara berurutan. Ordered list
dimulai dengan tag <ol> dan diakhiri dengan tag </ol>,
sedangkan setiap bagiannya digunakan tag <li> tanpa tag
penutup. Secara default, tag ini menggunakan angka sebagai
pengurut listing, namun kalian bisa mengubahnya dengan
merubah nilai atribut type. Nilai-nilai atribut yang diijinkan
dapat dilihat pada Tabel dibawah ini :
Pengantar Website – Muatan Lokal Kelas XII
16
Gambar 2.8 Penggunaan tag Ordered List <ol><li></ol>

Unordered list  <ul><li>……….</li></ul>
Unordered list digunakan untuk membuat daftar yang
disajikan tanpa nomor urut, melainkan dengan secara default
dengan tanda bulatan utuh (bullet). Tanda ini bisa dirubah
dengan merubah nilai atribut type untuk unordered list. Nilainilai atribut yang diijinkan dapat dilihat pada tabel 13.1.
Unordered list dimulai dengan tag <ul> dan diakhiri dengan
tag </ul>, sedangkan setiap bagiannya digunakan tag <li>
tanpa tag penutup.
Pengantar Website – Muatan Lokal Kelas XII
17
Gambar 2.9 Penggunaan tag Unordered List <ul><li></ul>

Definition list  <dl> <dt> <dd> ……… </dd> </dt></dl>
Definition list membuat daftar definisi mirip seperti
tampilan pada kamus, dengan definisi suatu istilah agak
menjorok ke kanan. Tiga buah pasang tag yang terkait
dengan definition list adalah:
-
<dl> ... </dl> untuk menyatakan tempat bagi daftar
definisi.
-
<dt> ... </dt> untuk menyatakan tempat bagi istilah
yang akan didefinisikan.
-
<dd> ... </dd> untuk menyatakan tempat bagi
definisi dari istilah.
Gambar 2.10 Penggunaan tag Definition List
Pengantar Website – Muatan Lokal Kelas XII
18
e) Font  <font>……….</font>
HTML menyediakan fasilitas pengaturan huruf yang akan
ditampilkan dalam dokumen. Pengaturan ini dilakukan dengan tag
berpasangan <font> dan </font>. Tag ini memiliki beberapa atribut
untuk mengatur ukuran, jenis dan warna huruf yang digunakan.

Atribut size untuk mengatur ukuran huruf, dimana nilai 1
untuk huruf terkecil dan nilai 7 untuk huruf terbesar.

Atribut face untuk mengatur jenis huruf yang diinginkan,
dimana nilainya berupa string nama font seperti Arial,
Tahoma dan sebagainya.

Atribut color untuk mengatur warna teks yang dikehendaki,
dimana nilainya dapat diisi dengan dua cara dengan
menyebut nama warna dalam bahasa Inggris seperti red, blue
dan green atau dengan menggunakan nilai RGB (Red Green
Blue) seperti FF000 untuk merah.
Gambar 2.11 Penggunaan tag Font
Pengantar Website – Muatan Lokal Kelas XII
19
2.4.
Penambahan Objek
a) Horizontal Ruler  <hr>
Untuk mempercantik tampilan halaman HTML, kita dapat
menambahkan garis horizontal dengan tag <hr>. Tag <hr>
mempunyai atribut size untuk menentukan ketebalan garis, atribut
width untuk menentukan lebar garis, Atribut align untuk
menentukan letak teks dalam garis, dan atribut noshade untuk
mengatur agar garis tidak disertai bayangan.
Gambar 2.12 Penggunaan tag horizontal Ruler
b) Image  <img src=”……….”>
Dokumen HTML dapat diperindah dengan menyertakan
gambar pada halaman web yang dibuat. Tag <IMG> dapat
digunakan untuk memanggil dan menampilkan gambar pada
halaman web. Sintaks penulisan tag <IMG> adalah:
<img src=”file_gambar” alt=”text alternatif”>
Atribut src digunakan untuk menentukan sumber file gambar yang
akan ditampilkan. Atribut alt berfungsi untuk memberi tulisan
pengganti apabila gambar tidak dapat ditampilkan.
Pengantar Website – Muatan Lokal Kelas XII
20
Untuk pengaturan gambar yang lebih baik, tag img menyediakan
beberapa atribut, antara lain:

Atribut align untuk mengatur penempatan teks pada gambar.

Atribut border untuk memberi bingkai pada gambar.

Atribut height dan width untuk mengatur tinggi dan lebar
gambar.
Contoh dibawah
ini memperlihatkan penggunaan atribut-atribut
tersebut.
Gambar 2.13 Penggunaan tag Image
2.5.
Tabel  <table> <tr><td>……….</td></tr></table>
Tabel dalam HTML dibuat dengan menggunakan tag awal
<tabel> dan tag penutup </table>. Tag ini memiliki beberapa bagian
penting, seperti dapat dilihat pada keterangan dibawah ini.
Tag
<caption> …………… </caption>
<th> …………… </th>
<tr> …………… </tr>
Fungsi
Membuat judul table
Membuat judul kolom
Membuat baris pada suatu table
Pengantar Website – Muatan Lokal Kelas XII
21
<td> …………… </td>
Membuat sebuah sel data
Gambar 2.14 Penggunaan tag Tabel
Tabel diatas adalah tabel sederhana dengan dua buah kolom
dan 3 buah baris (perhatikan ada 3 buah pasangan tag <tr> … </tr>.
Secara default tabel ditampilkan tanpa ada garis pada tabel tersebut.
Kita dapat menambahkan garis dengan menggunakan atribut border
pada tabel.
Gambar 2.15 Penggunaan tag Tabel
Pengantar Website – Muatan Lokal Kelas XII
22
Pada Gambar diatas, terlihat tabel yang tampilannya lebih
baik daripada Gambar sebelumnya. Ada beberapa atribut yang kita
tambahkan pada tabel yaitu :

Atribut width untuk mengatur lebar tabel pada halaman. Kita
dapat menggunakan satuan persen (%) atau pixel (px).

Atribut border untuk memberikan garis pada tabel. Nilai
untuk atribut ini dari dimulai dari 0 yang berarti tidak ada
garis. Semakin besar angka semakin tebal garis.

Atribut bgcolor untuk menambahkan warna latar belakang
pada tabel.

Atribut cellpadding untuk menentukan jarak antara teks dan
tepi kiri sebuah sel.

Atribut cellspacing untuk menentukan jarak bagian sel
terhadap tepi dalam bingkai tabel.
Gambar 2.16 Attribute pada Tabel
Pengantar Website – Muatan Lokal Kelas XII
23
Seperti halnya perangkat lunak pengolah kata, pada HTML
kita dapat menggabungkan dua atau lebih sel menjadi satu buah sel.
Untuk menggabung baris dapat digunakan atribut rowspan dan
untuk menggabung kolom dapat digunakan atribut colspan. Contoh
penggunaannya dapat dilihat pada gambar dibawah ini.
Gambar 2.17 Penggabungan Tabel
Pengantar Website – Muatan Lokal Kelas XII
24
2.6.
Link antar Dokumen  <a href=”...”>……….</a>
Link merupakan pautan untuk membuka atau memanggil
halaman web atau file tertentu. Link merupakan tag yang sangat penting
dalam penggunaan HTML, karena disinilah letak perbedaan antara
dokumen HTML dengan dokumen teks yang lain. Link dapat dibuat
dengan memberi perintah tag anchor <a>. Anchor memiliki beberapa
atribut, diantaranya HREF yang berfungsi untuk membuat link ke
dokumen HTML tertentu dan NAME yang berfungsi untuk memberi
tanda/nama titik tertentu pada dokumen HTML yang sama.
Gambar 2.17 Pengguanaan tag Link
Atribut href dapat digunakan untuk memanggil halaman web
pada sistem yang sama (pada satu komputer). Pada kasus ini kita
tinggal menuliskan lokasi dimana halaman yang akan kita panggil
berada. href dapat juga kita gunakan untuk memanggil halaman lain
diluar sistem kita atau memanggil situs-situs lain di internet.
Caranya dengan mengetikkan alamat URL situs yang akan kita
panggil.
Contoh :
<a href=”http://www.google.com”> Halaman Google </a>
<a href=”http://www.detik.com”> Halaman Detik dot com</a>
Pengantar Website – Muatan Lokal Kelas XII
25
Catatan :
Pengantar Website – Muatan Lokal Kelas XII
26
BAB 3
PENGANTAR WEBSITE
 Dasar Pengembangan Website
 Mengenal CSS
Pengantar Website – Muatan Lokal Kelas XII
27
CSS (Cascading Style Sheet) adalah suatu tag (penanda) yang
digunakan untuk memperindah tampilan halaman website. Singkatnya
dengan menggunakan CSS ini, kalian dapat dengan mudah mengubah
secara keseluruhan warna dan tampilan website kalian.
3.1.
Struktur CSS
Tag CSS terdiri dari dua bagian, yakni selector dan declaration.
Selector berfungsi untuk memberi tahu browser bahwa pada elemen
html mana aturan CSS akan diterapkan sedangkan declaration
marupakan pengaturan CSS yang akan diterapkan, declaration terdiri
atas property dan value.
Beberapa contoh sintaks property pada CSS
Property
background-color
Value
/ red,
blue,
Fungsi
green, Mengubah warna atau
background-image
yellow, dll
border
thin, dotted, double, Membuat garis tepi /
dll
gambar background
border
Pengantar Website – Muatan Lokal Kelas XII
28
font-family
Arial,
comic
sans Mengubah jenis teks
serinf,
times
new yang akan ditampilkan
romans, dll
text-align
center,
inherit,
right
3.2.
left, Mengatur posisi
dari
text
Aturan Penulisan CSS
Penulisan tag CSS dapat dilakukan dengan dua cara, yaitu :
 Internal Style Sheet (Disatukan dalam dokumen HTML)
o Menggunakan tag <style>… </style>
 External Style Sheet (Terpisah dari dokumen HTML)
o Menggunakan tag <link>
1. Internal Style Sheet (Disatukan dalam dokumen HTML)
 Cara 1
Bila menggunakan tag <style>…</style>, tag CSS diletakan
diantara tag <head> dari dokumen HTML. Contoh :
Contoh :
<head>
<style type=”text/css”>
p {color : red; background-color:blue};
</style>
</head>
<body>
<p> Contoh penggunaan CSS dengan Internal CSS
</body>
Pengantar Website – Muatan Lokal Kelas XII
29
 Cara 2
Selain cara diatas, kalian juga dapat menambahkan kode CSS
langsung kedalam tag HTML. Contoh :
Contoh :
<head>
</head>
<body>
<p style=”color:red; background-color:blue”>
Contoh penggunaan CSS dengan External CSS
</p>
</body>
2. Menggunakan tag <link>
Bila nantinya kalian memiliki banyak halaman web dan ingin
menggunakan CSS, tentunya akan sangat merepotkan bila harus
menuliskan tag CSS satu persatu di setiap halaman web yang kalian
buat. Untuk memudahkan hal ini, kalian dapat menggunakan tag <link>
agar kalian tidak perlu lagi mengetik ulang setiap tag CSS untuk
diterapkan di setiap halaman. Kalian hanya harus memanggil dokumen
yang berektensi .css pada bagian <head> website.
Contoh :
Contoh :
<head>
<link rel=”stylesheet” href=”style.css”>
</head>
Pengantar Website – Muatan Lokal Kelas XII
30
3.3.
Selector Class dan ID
CSS dapat menyatukan elemen-elemen style secara bersamaan
dalam sebuah kelas selector untuk kemudian kita panggil pada sintaks
HTML dengan menggunakan Class atau ID.
 Selector Class
Selector Class ditandai dengan tanda
 (titik)
Contoh :
<head>
<style type=”text/css”>
.merah {
color:red;
}
</style>
</head>
<body>
<p class=”merah”>
Tulisan ini berwarna merah
</p>
</body>
Perhatikan tanda
(titik) didepan kata merah dan
penulisan kata class setelah tag paragraph
Pengantar Website – Muatan Lokal Kelas XII
31
 Selector ID
Selector ID ditandai dengan tanda #  (Pagar)
Contoh :
<head>
<style type=”text/css”>
#merah {
color:red;
}
</style>
</head>
<body>
<p id=”merah”>
Tulisan ini berwarna merah
</p>
</body>
Perhatikan tanda # (pagar) didepan kata merah dan
penulisan kata id setelah tag paragraph
Pengantar Website – Muatan Lokal Kelas XII
32
BAB 4
Identifikasi Dreamweaver
 Menggunakan Perangkat Lunak Pembuat
Website
 Pengenalan Dreamweaver
Pengantar Website – Muatan Lokal Kelas XII
33
Dreamweaver CS 3 merupakan web editor untuk membuat dan
mendesain website dengan mudah dan cepat. Kemampuannya dalam
membuat website tanpa menuliskan tag-tag HTML satu-persatu menjadikan
program ini merupakan salah satu web editor favorit banyak pengguna web.
Dreamweaver menggunakan metode klik dan drag untuk mempermudah kita
dalam membuat website dengan cepat, mudah, menarik dan interaktif.
Selain
mudah
digunakan
dalam
membuat
dan
mendesain
web,
Dreamweaver CS3 juga telah menambah fleksibilitas-nya terhadap bahasa
pemograman web dan dapat berintegrasi pada beberapa software lainnya.
4.1. Membuka Dreamweaver CS 3
Untuk membuka dreamweaver CS 3, lakukan langkah dibawah ini :
No
1
Langkah
Keterangan
Click tombol start
pada taskbar
windows kalian.
2
Klik menu All
programs 
Adobe Master
Collection CS 3 
Adobe Dreamwaver
CS3
Pengantar Website – Muatan Lokal Kelas XII
34
3
Tampilan awal
jendela
Dreamweaver akan
ditampilkan.
4
Setelah
itu,
click
pilihan HTML pada
bagian Create New.
5
Dreamweaver
akan
menampilkan
area
kerja baru.
Pengantar Website – Muatan Lokal Kelas XII
35
4.2. Mengenal Area Kerja Dreamweaver
Tampilan dreamweaver tidak banyak mengalami perubahan dari
versi-versi sebelumnya, bila kalian sudah terbiasa menggunakan
dreamweaver versi lama, kalian tidak akan mengalami kesulitan untuk
beradaptasi dengan tampilan dreamweaver CS 3 ini.
Nama
Insert Bar
Keterangan
Adalah kumpulan menu yang digunakan untuk
me-masukkan sebuah objek atau fungsi lainnya
ke
dalam
jendela
dokumen.
Insert
bar
mempunyai tujuh menu di dalamnya yaitu
common, layout, forms, data, spry, text, dan
favorites.
Pengantar Website – Muatan Lokal Kelas XII
36
Document Toolbar
Adalah tempat menampilkan file-file dokumen
yang Anda buat berupa jendela dokumen
(berbentuk
tab).
Document
Toolbar
mempunyai tiga buah tab yang dapat membantu Anda mendesain web dengan mengubah
tampilan dari jendela dokumen, yaitu Code,
Split dan Design.
Panel Groups
Adalah
kumpulan
panel-panel
pelengkap
lainnya dan berfungsi untuk mengorganisir,
mengatur serta pelengkap website yang akan
Anda buat. Contoh : Panel CSS, berfungsi
untuk mempercantik tampilan web yang dibuat
Documents Windows Atau biasa disebut jendela dokumen, berfungsi
sebagai tempat meletakkan objek-objek atau
komponen untuk membuat dan merancang
website.
Property Inspector
Berfungsi untuk mengetahui serta mengubah
properti dari sebuah objek. Contoh : untuk
penulisan sebuah teks, anda dapat mengubah
jenis font, warna dan ukuran dari teks tersebut.
Pengantar Website – Muatan Lokal Kelas XII
37
4.3. Pengaturan penyimpanan website
Sebelum melangkah lebih jauh, kalian perlu melakukan penyetingan
penyimpanan website agar nantinya halaman-halaman website yang
kalian buat bisa terorganisir dengan baik. Lakukan langkah dibawah ini.
 Langkah 1, Membuat Folder Penyimpanan
No
1
Langkah
Buka
Keterangan
Windows
Explorer
2
Buat folder baru pada
drive
D:\
hardisk
komputer kalian, lalu
berikan nama folder
tersebut sesuai dengan
nama
yang
kalian
inginkan
3
Selesai
Pengantar Website – Muatan Lokal Kelas XII
38

Langkah 2, Pengaturan Dreamweaver Site
No
1
Langkah
Keterangan
Buka Aplikasi
Dreamweaver
kalian.
2
Click pilihan
Dreamweaver
Site
3
Pada jendela site
definition, ketikan
nama website
kalian, setelah itu
click next. Kalian
tidak perlu
mengisi HTTP
Address.
Pengantar Website – Muatan Lokal Kelas XII
39
4
Langkah
berikutnya, pilih
“No, I don’t
want to use a
server
technology”, lalu
click next.
5
Pada langkah
berikutnya,
setting seperti
gambar
disamping.
ketikan alamat folder yang telah kalian
buat pada langkah 1, membuat folder
penyimpanan.
6
Pada pilihan “how
do you connect to
your remote
server ?” pilih
pilihan none.
7
Click done
Pengantar Website – Muatan Lokal Kelas XII
40
4.4. Membuat dan menyimpan dokumen HTML
Setelah membuat pengaturan pada dreamweaver site, sekarang kita
akan membuat dokumen baru lalu menyimpannya.
 Membuat dokumen baru
No
Langkah
1
Buka Aplikasi
Keterangan
Dreamweaver
kalian.
2
Click HTML
pada bagian
Create New
3
Jendela dokumen baru akan ditampilkan.
4
Pada document
toolbar, click
Tab Design
5
Ketik teks
Selamat datang di website saya.
seperti
Saya adalah siswa Budhi Warman 2 Jakarta. Saat ini, saya
sedang membuat website dengan software Adobe
Dreamweaver CS3, dan ini adalah halaman pertama saya.
Dreamweaver mudah untuk digunakan.....
Seorang manusia pernah berkata "Barangsiapa yang tidak
pernah melakukan kesalahan, maka dia tidak pernah
mencoba sesuatu yang baru". (Albert Einstein)
disamping :
Pengantar Website – Muatan Lokal Kelas XII
41
6
Blok teks
“Selamat Datang di
website saya”
7
Lihat ke bagian property inspector
set bagian format dengan “Heading 3” dan ubah Align menjadi
rata kanan.
8
Nantinya, layar
akan berubah
menjadi seperti
disamping ini :
Pengantar Website – Muatan Lokal Kelas XII
42
9
Lakukan bloking
teks dimulai dari
“Saya adalah
siswa….”
Sampai “(Albert
Einstein)”.
10 Pada bagian
Property
Inspector, ubah
format menjadi
Paragraph, lalu
set align dengan
rata kanan-kiri
.
11
Nantinya, layar
akan berubah
menjadi seperti
disamping ini :
12 Terakhir, blok teks “Barangsiapa yang tidak pernah melakukan
kesalahan, maka dia tidak pernah mencoba sesuatu yang
baru”.
Pengantar Website – Muatan Lokal Kelas XII
43
13 Pada bagian
Property
Inspector, ubah
format teks
menjadi Italic.
14 Nantinya, layar
akan berubah
menjadi seperti
disamping ini :
Pengantar Website – Muatan Lokal Kelas XII
44
 Menyimpan dokumen
No
1
Langkah
Keterangan
Click File  Save
Atau tekan ctrl + s
2
Click Icon My
Computer, pilih
driver D:\
lalu klik dua kali
pada folder yang
kalian buat
sebelumnya
3
Pada file name,
tuliskan nama
kalian.
Setelah itu klik
Click Save
tombol save
4
Tekan tombol F12
pada keyboard
kalian untuk
melihat website
yang kalian buat
Pengantar Website – Muatan Lokal Kelas XII
45
4.5. Menutup dan Membuka Kembali Halaman Web
Setelah kalian membuat halaman baru pada website kalian, sekarang
kita akan menutup halaman yang telah kita buat tadi lalu mencoba
untuk membukanya kembali untuk di edit. Lakukan hal dibawah ini.
No
1
Langkah
Keterangan
Click windows
close pada
halaman kerja
yang akan ditutup.
2
Untuk membuka
halaman web yang
ingin kalian edit,
pada halaman
awal
Dreamweaver,
Click icon folder
open pada pilihan
Open a Recent
Item.
Pengantar Website – Muatan Lokal Kelas XII
46
3
Pada kotak dialog
open, pilih
halaman web
yang ingin kalian
edit, lalu click
open.
4
Halaman yang
diedit akan
ditampilkan
Pengantar Website – Muatan Lokal Kelas XII
47
BAB 5
Membangun Website
 Dasar Pengembangan Website
 Membangun Website
Pengantar Website – Muatan Lokal Kelas XII
48
Pada modul ini, kalian akan membangun sebuah website dengan
menggunakan Dreamweaver CS3. Beberapa hal yang akan kalian pelajari
pada modul ini yaitu sebagai berikut :
-
Pembuatan Tabel
-
Mendesain tampilan layout
-
Memasukan elemen website seperti link, gambar, teks dan hal-hal
lainnya.
-
Mengenal panel dreamweaver.
5.1. Pembuatan Tabel
Tabel adalah bagian yang cukup penting dalam pembuatan website,
karena tabel digunakan untuk tata letak sebuah website. Pada modul
sebelumnya, kalian sudah mempelajari cara membuat tabel dengan
menggunakan HTML. Sekarang, kalian akan membuat tabel dengan
bantuan software Dreamweaver CS3. Untuk membuat tabel dalam
Dreamweaver CS3, ikuti langkah dibawah ini :
No
Langkah
Keterangan
1
Buatlah sebuah halaman kerja HTML baru.
2
Pada menu insert bar,
aktifkan tab Common,
lalu klik Tabel untuk
menampilkan kotak
dialog tabel.
Pengantar Website – Muatan Lokal Kelas XII
49
3
Pada kotak dialog
tabel, isi kotak dialog
tersebut dengan
settingan Rows : 3,
Columns : 2, Table
Width : 800 Pixels dan
Border Thickness : 1
Pixels.
4
Click Ok.
5
Dremweaver akan
membentuk tabel
seperti disamping:
Untuk memudahkan
langkah berikutnya,
saya memberikan
nomor kolom agar
tabel diatas lebih
mudah dipahami.
6
Klik kotak TI, lalu pada property tabel, isi property W dengan 200.
Hal ini akan membuat lebar kolom T1, T3 dan T5 berukuran 200
pixel.
Pengantar Website – Muatan Lokal Kelas XII
50
7
Blok kotak T1 dan T2 dengan menekan tombol ctrl (tahan) kemudian
klik kotak T1 dan T2, sehingga kotak T1 dan T2 ter-blok.
8
Pilih menu Modify
 Table  Marge
Cells sehingga tabel
T1 dan T2 bisa
digabungkan (marge
cells).
9
Lakukan hal yang sama pada tabel T5 dan T6, sehingga nantinya
tabel akan menjadi seperti gambar dibawah ini.
10
Masuk ke tab
code, lalu klik
di tag <table>.
11
Ubah
property
align
dengan
Pengantar Website – Muatan Lokal Kelas XII
51
settingan
center.
Save halaman kerja yang telah kalian buat dengan nama “index”
12
pada folder yang telah kalian buat
5.2.
Desain Tampilan Layout.
Setelah membuat tabel, langkah berikutnya yang akan kita
lakukan yaitu membuat desain untuk tampilan website dari tabel yang
telah kita buat pada bagian A modul ini. Tabel yang telah kita buat pada
bagian A akan dibagi menjadi beberapa section / bagian, yaitu sebagai
berikut :
Nama
Header
Keterangan
Merupakan bagian atas dari website. Pada bagian ini, kita akan
meletakan gambar yang merupakan identitas dari website yang
akan kita buat, bisa berupa logo ataupun teks yang di ikuti
dengan gambar background.
Body
Merupakan bagian yang berisi navigasi dari website yang akan
kita buat. Navigasi website standard biasanya berisi Home |
Tentang Kami | Hubungi Kami.
Content / Bagian ini adalah bagian utama dari website, karena pada
Pengantar Website – Muatan Lokal Kelas XII
52
Isi
bagian inilah kita akan meletakan segala informasi yang akan
ditampilkan di website kita.
Footer
Pada bagian ini biasanya berisi Copyright dari website.
Setelah keempat section / bagian website tersebut dimasukan
kedalam tabel, tampilannya akan tampak seperti gambar dibawah ini
Pengantar Website – Muatan Lokal Kelas XII
53
1
Bagian Header
Langkah pertama, kita akan membuat header dari website.
Header yang akan dibuat terdiri dari warna background dan text.
Ikuti langkah dibawah ini :
No
1
Langkah
Keterangan
buka file
index.html.
2
Pastikan
kalian ada
pada tab
Design.
3
Klik kotak
Header
Click kotak Header
Pengantar Website – Muatan Lokal Kelas XII
54
4
Ubah settingan property dengan settingan seperti gambar dibawah ini :
5
Ketik teks di bagian header, tulis [nama kalian]. Contoh : “Yogi Adi
Nugroho”.
6
Save halaman kalian dengan menekan tombol Ctrl (tahan) + S atau
melalui menu File  Save
Pengantar Website – Muatan Lokal Kelas XII
55
2
Bagian Menu
Langkah kedua, kita akan membuat menu / navigasi website.
Menu yang akan kita buat akan berisi link “| Home | Tentang Kami |
Hubungi Kami | ”. Ikuti langkah dibawah ini :
N
Langkah
Keterangan
o
1
Klik kotak
menu
Click kotak Menu
2
Ubah settingan property menjadi seperti gambar dibawah ini :
3
Ketik “Home”, “Tentang Kami”, dan “ Hubungi Kami” sehingga
nantinya kotak menu akan menjadi seperti gambar dibawah ini.
Tampilannya akan tampak
seperti gambar disamping
4
Save halaman kalian dengan menekan tombol Ctrl (tahan) + S atau
melalui menu File  Save
Pengantar Website – Muatan Lokal Kelas XII
56
3
Bagian Content
Setelah membuat header dan menu, sekarang kita akan
membuat bagian utama dari website kita, content. Ikuti
langkah-langkah dibawah ini :
No
1
Langkah
Keterangan
Klik
kotak
content /
Click kotak Content
isi
website.
2
Ubah settingan property menjadi seperti gambar dibawah ini :
3
Ketikan teks seperti gambar dibawah ini :
Selamat datang di website saya
[Tulis kata-kata yang kalian inginkan disini, bebas]
Pengantar Website – Muatan Lokal Kelas XII
57
5
Tampilan website akan menjadi seperti gambar dibawah ini :
6
Save halaman kalian dengan menekan tombol Ctrl (tahan) + S atau
melalui menu File  Save
Pengantar Website – Muatan Lokal Kelas XII
58
4
Bagian Footer
Terakhir, kitaakan membuat bagian footer website. Ikuti
langkah-langkah dibawah ini :
No
Langkah
1
Klik kotak
Keterangan
footer.
Click kotak Footer
2
Ubah settingan property menjadi seperti gambar dibawah ini :
3
Klik menu Insert  HTML  Special Characters  Copyright
untuk menuliskan simbol © (copyright) pada bagian footer.
Pengantar Website – Muatan Lokal Kelas XII
59
4
Tuliskan nama kalian setelah simbol ©.
5
Tampilan website akan menjadi seperti gambar dibawah ini :
6
Save halaman kalian dengan menekan tombol Ctrl (tahan) + S atau
melalui menu File  Save
Pengantar Website – Muatan Lokal Kelas XII
60
5.3.
Memasukan Elemen Website
Elemen website terdiri dari 3 bagian, yaitu :
1. Format Text
2. Link
3. Objek website
1. Format Text
Format text digunakan untuk mengatur tampilan content /
berita website. Dalam HTML, terdapat beberapa format yang dapat
kita gunakan untuk mengatur tampilan content / berita, diantaranya
yaitu :
-
Format teks Bold,
Italic.
-
Paragraf
-
Blockquote
-
Preformatted
-
Heading
-
Listing
-
Definition List
-
Penyingkatan kata
-
Karakter khusus
Pengantar Website – Muatan Lokal Kelas XII
61
Untuk mengaktifkan menu format text pada dreamweaver, klik
tab text pada insert bar, kemudian pilih tag yang ingin kalian
gunakan dengan mengklik icon yang tertera pada tab text.
2. Link
Link digunakan untuk mengarahkan pengunjung ke halaman
yang telah kita tentukan. Sekarang, kita akan membuat link
untuk menu-menu yang telah kita buat pada tahap desain
tampilan layout. Lakukan langkah-langkah dibawah ini :
N
Langkah
Keterangan
o
Bab 1
Dasar pengembangan website
49
1
buka file
index.html
2
Perhatikan pada bagian menu, blok teks Home
Blok menu Home
3
Isi link pada property dengan alamat home.html.
4
Lakukan hal yang sama pada teks Tentang Kami dan Hubungi Kami.
Untuk tentang kami, isi link dengan alamat tentang_kami.html dan
untuk hubungi kami, isi link dengan alamat hubungi_kami.html.
Bab 1
Dasar pengembangan website
50
5
Click menu File
 Save As
6
Buka folder tempat kalian menyimpan file index.html, Pada
file name, tulis nama home lalu klik tombol Save
Bab 1
Dasar pengembangan website
51
Simpan di folder yang
sama dengan file
index.html
Simpan dengan nama home
7
Clik kembali
menu File  Save
As
8
Buka folder tempat kalian menyimpan file index.html, Pada
file name, tulis nama tentang_kami lalu klik tombol Save
Bab 1
Dasar pengembangan website
52
Simpan di folder yang
sama dengan file
index.html
Simpan dengan nama tentang_kami
9
Clik kembali
menu File  Save
As
10
Buka folder tempat kalian menyimpan file index.html, Pada
file name, tulis nama hubungi_kami lalu klik tombol Save
Bab 1
Dasar pengembangan website
53
Simpan di folder yang
sama dengan file
index.html
Simpan dengan nama hubungi_kami
11
Buka folder kalian menggunakan windows explorer, bila langkah
yang lakukan benar, pada folder kalian terdapat tiga (3) file baru,
yaitu home.html, tentang_kami.html dan hubungi_kami.html
File yang
baru dibuat
Bab 1
Dasar pengembangan website
54