BAB II FORMAT TEKS HALAMAN WEB

BAB II FORMAT TEKS HALAMAN WEB Tujuan Pembelajaran Setelah mengikuti kegiatan belajar ini Peserta Didik diharapkan dapat : 1) Memahami Dasar-dasar HTML 2) Memahami Properti Dokumen Web 3) Menyajikan teks dalam format tertentu pada halaman dokumen web 4) Memformat teks pada halaman dokumen web Format teks halaman web digunakan untuk memanipulasi dokumen html. Misalnya untuk mengatur paragraf, ganti baris, dan lain-lain. Format teks pada halaman web antara lain: 1. Heading Tag Heading adalah tag yang digunakan untuk membuat judul dari isi sebuah dokumen html. Tag heading mempunyai 6 nilai yaitu
sampai dengan
. Semakin tinggi nilainya akan semakin kecil ukuran judulnya. Sama dengan kebanyakan tag lainnya, tag heading juga harus ditutup, disesuaikan dengan tag pembukanya. Keistimewaan dari tag heading yaitu tag heading akan membuat baris baru sebelum dan setelah judul dibuat serta judul yang dibuat akan secara otomatis menjadi tebal. Atribut yang ada di tag heading: Attribute Nilai/Value Description align left Mengatur perataan pada heading center right justify Contoh:
This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

Hasilnya:

Latihan 2.1: Ketikkan kode berikut dan simpan dengan nama teks1.html membuat judul dokumen
Judul Dokumen berada di kiri

Judul Dokumen berada di Tengah

Judul Dokumen berada di kanan

Tim RPL - SMKTakhassus Al-Qur’an Wonosobo

1

Tugas 1: Catatlah kode program pada lembar kerja untuk membuat tampilan berikut ini:

2. Paragraf Tag paragraf adalah tag yang digunakan untuk membuat paragraf dari sebuah dokumen html. Keistimewaan dari tag paragraf yaitu tag paragraf akan menambahkan baris baru sebelum dan setelah elemen
. Cara penulisan tag paragraf adalah sebagai berikut:
.........
Atribut yang ada di tag paragraf: Attribute Nilai/Value Description Align Left Mengatur perataan pada paragraf center right justify Contoh:
Tulisan ini secara otomatis akan rata kiri

Tulisan ini juga akan rata kiri

Tulisan ini akan rata tengah

Tulisan ini rata kanan

Tulisan ini akan rata kiri kanan (justiy) dan akan terlihat perbedaannya jika menuliskan tulisan yang panjang

Hasilnya:

Latihan 2.2: Ketikkan kode berikut dan simpan dengan nama teks2.html mengatur paragraf dalam html<P>


2

Teks ini berada di kiri

Teks ini berada di tengah

Teks ini berada di kanan

Paragraph ini bertipe justify. Dimana semua teks akan dibuat lurus sama dengan batas tepi halaman. Oh ya, tag
merupakan default atau bentuk baku tag
dimana teks atau paragraf akan berformat rata kiri. Jika anda tidak memberi atribut align pada tag
maka browser akan menganggap rata kiri.


3. Font Tag Font adalah tag yang digunakan untuk mengatur bentuk dan tampilan suatu huruf dalam dokumen html. Sintaknya adalah sebagai berikut: ......... Atribut yang ada di tag font: Attribute Nilai/Value Description Face Nama font Digunakan untuk mengubah bentuk dan nama huruf Size Angka Digunakan untuk mengatur ukuran huruf Color Colour Digunakan untuk memberi warna huruf Contoh:
face="Monotype Corsiva">Belajar HTML
size="5">Masih ingat materi sebelumnya?
color="red">Jangan malas belajar
face="Arial" size="4" color="#0000ff">pemrograman web

Hasilnya:

Latihan 2.3: Ketikkan kode berikut dan simpan dengan nama teks3.html font dalam html


3

Judul dengan warna hijau
Teks ini menggunakan font Monotype Corsiva
Teks ini berada di tengah dan menggunakan warna merah

Paragraph ini bertipe justify. Dimana semua teks akan dibuat lurus sama dengan batas tepi halaman. Oh ya, tag
merupakan default atau bentuk baku tag
dimana teks atau paragraf akan berformat rata kiri. Jika anda tidak memberi atribut align pada tag
maka browser akan menganggap rata kiri.


4. Marquee Marquee adalah sebuah teks yang berjalan pada dokumen html. Sintaknya adalah sebagai berikut: <marquee [atribut/properti]>.....tulisan/teks.... Atribut yang ada di tag marquee: Attribute Nilai/Value Description Behavior Slide Cara atau teknik dari marquee dalam menjalankan teks. Scroll Alternate Direction Top Arah teks berjalan Left Right Bottom BgColor Colour Digunakan untuk memberi warna latar dari marquee Height % atau px Tinggi dari marquee. Width % atau px Lebar dari marquee. Contoh: Penggunaan teks berjalan
<marquee bgcolor=”#C0C0C0”>Teks ini menggunakan marquee

<marquee behavior=”slide” direction=”left”>penggunaan marquee dengan arah dari kanan ke kiri

<marquee behavior=”alternate” direction=”right”>marquee dengan behavior alternate


4

5. Cetak Tebal / Bold Sintaknya adalah sebagai berikut: ..... teks.... Contoh: Cetak tebal Tulisan ini akan tercetak tebal

Hasilnya: 6. Cetak Miring / Italic Sintaknya adalah sebagai berikut: ..... teks.... Contoh: Cetak miring Tulisan ini akan tercetak miring

Hasilnya:

7. Cetak Garis Bawah / Underline Sintaknya adalah sebagai berikut: ..... teks.... Contoh: Garis bawah Tulisan ini akan bergaris bawah

Hasilnya:

8. Mencoret Teks / Strikethrough Sintaknya adalah sebagai berikut: <s>..... teks.... Contoh: mencoret teks


5

<s>Tulisan ini akan tercoret

Hasilnya:

9. Subscript dan Superscript Subscript digunakan untuk membuat tulisan kecil yang berada pada batas bawah teks. Contohnya: H20, CO2. Sedangkan superscript digunakan untuk membuat tulisan kecil yang berada pada atas teks. Contohnya untuk perpangkatan seperti 22, 52. Sintaknya adalah sebagai berikut: <sub>..... teks.... Contoh: Subscript H<sub>2SO<sub>4

Hasilnya:

<sup>..... teks.... Contoh: Superscript H<sup>2SO<sup>4

Hasilnya:

10. Preformated Text Menampilkan teks apa adanya. Sintaknya adalah sebagai berikut: <pre>..... teks.... Contoh: Preformated teks <pre>Tulisan akan muncul apa adanya berbeda dengan tulisan yang ini

Hasilnya:


6

11. Singkatan Untuk mendefinisikan sebuah singkatan pada dokumen html dapat menggunakan perintah / tag . Sintaknya adalah sebagai berikut: .....tulisan/teks.... Atribut yang ada: Attribute Nilai/Value Description Title Teks Mendefinisikan singkatan yang digunakan. Contoh: Penggunaan akronim
HTML harus dipahami dan dipraktekan sebagai dasar dalam belajar pemrograman web tingkat lanjut agar dapat menjadi seorang programer yang handal

Hasilnya:

12. Arah Teks Untuk mendefinisikan sebuah arah teks dalam dokumen html, digunakan perintah / tag . Sintaknya adalah sebagai berikut: .....tulisan/teks.... Atribut yang ada: Attribute Nilai/Value Description Dir rtl Arah teks dari kanan ke kiri (right to left) ltr Arah teks dari kiri ke kanan (left to right) Contoh: Arah teks belajar pemrograman web itu menyenangkan

Hasilnya:

13. List List adalah sebuah uraian yang terdiri dari atas item-item dari suatu daftar yang dilengkapi dengan nomor baik nomor alfabetik atau numerik. Dalam html, terdapat 3 bentuk daftar atau list, yaitu: Ordered List/ List bernomor Sintaknya:

isi list

isi list


7

Contoh: Pembuatan List Rukun Islam ada 5:

Syahadat

Sholat

Puasa

Zakat

Haji bagi yang mampu

Hasilnya:

Unordered List/ List tanpa nomor Sintaknya:

isi list

isi list

Contoh: Pembuatan List Rukun Islam ada 5:

Syahadat

Sholat

Puasa

Zakat

Haji bagi yang mampu

Hasilnya:


8

Definition List/ List Definisi Unordered List/ List tanpa nomor Sintaknya:

isi list
isi list
isi list
isi list
Contoh: Pembuatan List Sistematika penulisan laporan:

BAB I
pendahuluan
BAB II
Isi Laporan
BAB III
Penutup

Hasilnya:

Latihan 2.4: Ketikkan kode html berikut dan simpan dengan nama teks4.html: Latihan Formating Teks HTML <marquee behavior="alternate">
belajar web itu menyenangkan

nama: Toni Eko Mulyono
alamat:Wonosobo
pekerjaan:<s>tidak bekerja

Akan selalu <s>Malas Bersemangat dalam belajar dan patuh kepada orang tua.

3<sup>2+4<sup>2=25 atau 5<sup>2

Rumus kimia dari air adalah H<sub>2O sedangkan Oksigen adalah O<sub>2
<pre>Tanamkan selalu semangat belajar HTMLapakah tulisan ini dapat dibaca

juara satu


9

liburan ke bali

voucher pulsa 50 ribu

Sayangi Orang Tua
karena kita tidak pernah tahu kapan mereka akan pergi

Tugas 4: Buatlah cerita yang menarik yang bertemakan liburan sekolah. Tampilkan cerita tersebut dalam sebuah dokumen web yang dihias dengan formating teks agar lebih menarik. Kemudian simpan dengan nama teksnilai.html


10

BAB III HYPERLINK DAN MULTIMEDIA Tujuan Pembelajaran Setelah mengikuti kegiatan belajar ini Peserta Didik diharapkan dapat : 1) Memahami dasar pembuatan hyperlink 2) Memahami dasar menampilkan file multimedia pada dokumen web 3) Menyajikan file multimedia dalam format tertentu pada halaman dokumen web 4) Menyajikan komunikasi antar dokumen web dengan menggunakan hyperlink 1. Hyperlink Hyperlink atau lebih dikenal dengan link adalah suatu metode yang digunakan dalam HTML untuk membuat hubungan antar halaman yang terdapat dalam satu situs web. Secara umum, fungsi link adalah untuk memudahkan pengunjung web dalam menulusuri/menjelajahi seluruh isi atau informasi yang tersimpan dalam situs web bersangkutan. Dalam keadaan default (normal), suatu link akan ditandari dengan teks berwarna biru yang memiliki garis bawah. Jika kita mengarahkan kursor ke suatu link tertentu, maka penunjuk mouse akan berubah menjadi gambar tangan dengan satu jari yang sedang menunjuk, seperti yang ada gambar di bawah ini.

Konsep atau cara kerja link dalam HTML dapat diilustrasikan melalui gambar berikut :

Untuk membuat suatu link, HTML menyediakan satu tag khusus, yaitu tag , yang berpasangan dengan . Setiap teks yang diapit oleh tag ini akan ditampilkan sebagai link. Bentuk umum pembuat link dalam dokumen HTML adalah sebagai berikut :

Atribut yang ada: Attribute Nilai/Value href halaman/dokumen/URL

Description menentukan dokumen atau halaman mana yang akan dipanggil saat link tersebut di klik target _blank/_parent/_self/_top model cara dokumen akan ditempatkan atau ditampilkan Jenis-jenis link dalam HTML, yaitu : - Link absolut adalah link yang akan menunjuk ke halaman dari situs web lain W3 - Link relative adalah link ke dokumen internal, dan penulisan alamat tujuannya pun tidak perlu ditulis secara lengkap, cukup nama dokumennya saja, dan nama direktorinya Kontak Tim RPL - SMKTakhassus Al-Qur’an Wonosobo

11

- Link ke bagian dokumen tertentu atau internal link. Link seperti ini biasanya pada halaman web yang memiliki informasi yang panjang atau pada dokumen yang memiliki daftar isi di bagian atasnya. Tujuannya adalah agar para pengunjung tidak perlu melakukan scrolling pada halaman tersebut untuk menuju/kembali tertentu dalam dokumen bersangkutan. Yang perlu digunakan adalah atribut yang disebut id (identifikasi) dan simbol “#”. Gunakan atribut id untuk menandai elemen yang ingin ditautkan/link. Sebagai contoh:
heading 1
Sekarang kita dapat membuat link ke elemen dengan menggunakan ”#” di atribut link. Tanda “#” harus diikuti dengan id dari tag yang ingin ditautkan/link. Sebagai contoh: Menuju ke heading 1 Menjadikan Gambar sebagai Link Selain link berupa teks, gambar juga dapat dijadikan sebagai link. Konsepnya sebenarnya sama saja dengan link berupa teks, perbedaannya hanya perlu mengganti teks yang dijadikan sebagai link dengan tag . Link yang berupa teks: teks link Link yang berupa gambar: Latihan 3.1 Ketik kode program berikut dan simpan dengan nama link-dokumen1.html Link
Latihan Membuat Link

Dokumen 1

Klik link di bawah ini untuk melihat isi halaman dokumen2.html:

Lihat Dokumen 2

web

pada

Kemudian ketik kode program berikut dan simpan dengan nama link-dokumen2.html Link
Latihan Membuat Link

Dokumen 2

Ini adalah isi halaman yang terdapat pada dokumen 2. Untuk kembali ke dokumen 1, silahkan klik link di bawah ini.

Lihat Dokumen 1

Apa yang terjadi?? Latihan 3.2: Copy gambar ke folder Anda. Catatan: dalam contoh ini menggunakan file gambar koala.jpg link-gambar.html


12

Link
Latihan Membuat Link Berupa gambar

Klik gambar dibawah ini untuk melihat informasi detail:

detail-sahara.html link
Latihan Membuat Link Berupa Gambar

Merk: <strong>jeep
Seri: <strong>Wrangler
Tipe: <strong>Unlimited Sahara
Tahun: Pembuatan: 2011
Transmisi: Automatic
Silinder: 3.700
Kilometer: 0 km (baru)
Harga: Rp 975.000.00,-
Keterangan tambahan: Mewah dan Gagah (Ready Stock)

Kembali ke halaman utama

Latihan 3.3: Ketik kode berikut dan simpan dengan nama link-bagian.html link>/title> </head> <body> <h2>Latihan membuat ke bagian tertentu dalam satu dokumen</h2> <a id= “atas” rel="nofollow"></a> <p> pilih salah satu judul buku berikut untuk melihat deskripsi : </p> <a href=”#c” rel="nofollow"> pemrograman C</a><br /> <a href=”#cpp” rel="nofollow"> pemrograman C++</a><br /> <a href=”#bcb” rel="nofollow"> pemrogaraman Borland C++Builder</a> </p> <p><a id=”c” rel="nofollow"><strong>pemrograman C</strong> </a></p> <p> C merupakan bahasa pemrograman yang sudah tidak digunakan lagi kehandalannya dan banyak digunakan untuk membuat program-progarm dalam berbagai bidang, termasuk pembuatan kompilator (compiler) dan sistem operasi. Sampai saat ini, C masih tetap menjadi bahasa populer dan beribawah dalam kanca pemrograman. Sejauh ini, C juga telah menjadi inspirasi bagi kelahiran bahasa-bahasa pemrograman baru, seperti C++,<br /> <br /> Tim RPL - SMKTakhassus Al-Qur’an Wonosobo<br /> <br /> 13<br /> <br /> java, dan juga yang lainnya ; sehingga dari sisi sintak kontrol programnya, ketika bahasa ini bisa dikatakan sama. Bahasa pemrograman C sangatlah fleksibel dan portebel, sehingga dapat di tempatkan dan di jalankan di dalam beragam sistem operasi. Pada umum nya, C banyak digunakan untuk melakukan interfacing antar perangkat keras (hardwere) agar dapat berkomunikasi satu sama lainnya. <br /> <a href=”atas” rel="nofollow"> kembali ke atas</ a> </p> <p><a id=”cpp” rel="nofollow"><strong>pemrograman C++</strong></a</p> <p> C++ merupakan bahasa pemrograman yang sangat populer dan telah banyak digunakan untuk mengembangkan perangkat lunak di berbagai bidang; seperti : telekomunikasi, embedded system, bisnis, dan hiburan. Salah satu kehandalan dari C++ adalah bahasa ini mendukung sepenuhnya konsep pemrograman berorientasi objek, atau yang lebih di kenal dengan OPP (object oriented programming). (cross platform), C++ juga telah manjadi bagian hidup dari sebagian para pecinta linux.<br /> <a href=”#atas” rel="nofollow">kembali ke atas</a> </p> <p> <a id=”bcb” rel="nofollow"> <strong>pemrograman borland C++builder</strong> </a> </p> <p> C++builder adalah sebuah perangkat lunak berbasis C++ yang digunakan untuk melakukan pembuatan aplikasi (baik visual maupun non-visual) yang berjalan di atas platform microsoft windows. Selain itu, C++builder juga banyak di gunakan sebagai alat untuk pengembangan file-file DLL (Dynamic Link Library ). Dengan adanya kemudahan dan dukungan visual yang di tawarkan di dalamnya, C++builder banyak di gunakan oleh para programmer profesional untuk pengembangan aplikasi yang beraneka ragam jenisnya, seperti : openGL, multimedia, games, database, embedded system, dan banyak lagi yang lainnya.<br /> <a href=”#atas” rel="nofollow">kembali ke atas</a> </p > </body> </html><br /> <br /> Tugas 5: 1. Tulislah tag yang menyajikan hyperlink ke dokumen-dokumen berikut : a. profile 2.html b. staf/guru.html c. www.google.com d. profile.doc 2. Untuk soal 1.a) ternyata nama file yang dituju adalah “profile 2.html”, jadi ada spasi sebelum 2, apa yang terjadi? Apakah dokumen tetap dapat dibuka? 3. Untuk soal 1.d) apa yang terjadi jika ada file profile.doc? 4. Bagian apa yang penting dalam tag link?<br /> <br /> Tim RPL - SMKTakhassus Al-Qur’an Wonosobo<br /> <br /> 14<br /> <br /> Tugas 6: Buatlah 3 buah file dokumen web yang saling saling berhubungan satu dengan yang lainnya dengan ketentuan nama file dan isi sebagai berikut: a. home.html berisi tentang struktur kelas Anda. b. siswa.html berisi tentang cerita siswa yang pandai, bodoh, nakal, dan kreatif di kelas Anda. c. cerita.html berisi tentang cerita menyenangkan dan tidak menyenangkan di kelas Anda. 2. Menyisipkan Gambar Suatu halaman web akan terlihat kaku, terkesan formal, dan sedikit menjemukan bila tidak disertai dengan gambar. Untuk menampilkan format gambar digunakan tag <img>. Atribut terpenting dari tag <img> adalah SRC (source atau sumber), yang berisi file gambar yang akan ditampilkan ke dalam halaman web. Format gambar yang didukung oleh tag <img> antara lain JPEG(.jpg atau .jpeg), GIF(.gif) dan PNG(.png) Atribut yang ada: Attribute Nilai/Value Description src Nama file Sumber file gambar yang ditampilkan align Top/middle/bottom/left/right Mengatur posisi gambar terhadap suatu teks width Ukuran Digunakan untuk mengatur lebar gambar height Ukuran Digunakan untuk mengatur tinggi gambar alt Tulisan Memberikan keterangan pada gambar title Tulisan Memberikan keterangan pada gambar Atribut terpenting dari tag <img> adalah SRC (source atau sumber), yang berisi file gambar yang akan ditampilkan ke dalam halaman web. Bentuk umum penggunaan tag <img> adalah : <img src=”namafile”> Jika file yang akan ditampilkan berada di direktori lain, atau bahkan berada di situs web lain, makan perlu menyebutkan juga lokasi dari file tersebut. Contoh: <img src= “../image/komputer.jpg”> Atau <img src=http://www.abcde.com/image/kamera.jpg/> Latihan 3.4: Memasukkan Gambar ke dalam Halaman Web - Buat folder baru dengan nama gambar. - Copykan file gambar yang dibutuhkan ke dalam folder tersebut. - Catatan: pada contoh ini menggunakan file gambar Koala.jpg, Jam.gif dan Komputer.png - Buatlah dokumen html dengan nama gambar.html dan simpan ke dalam folder gambar - Ketikkan kode berikut <html> <head> <title>Gambar
Latihan Menambahkan Gambar GIF,
Menampilkan gambar dalam format

JPG, dan PNG GIF:
JPG:
PNG:


15

Latihan 3.5: Menggabung Gambar dan Teks (bagian 1) - Catatan: Dalam contoh ini menggunakan file yang sama seperti pada Latihan 3.4 - Buat folder baru dengan nama image yang disimpan di dalam folder gambar - Copykan file gambar pada folder image - Buat dokumen html dan simpan dengan nama gambar2.html - ketikkan kode berikut: Gambar
Latihan Menggabung Gambar dan teks (bag.1)

Komputer 1 (menggunakan align=TOP)

Komputer 2 (menggunakan align=MIDDLE)

Komputer 3 (menggunakan align=BOTTOM)

Latihan 3.6: Menggabung Gambar dan Teks (bagian 2) - Catatan: Dalam contoh ini menggunakan file yang sama seperti pada Latihan 3.5 - Buat dokumen html dan simpan dengan nama gambar3.html - ketikkan kode berikut: Gambar
Latihan Menggabung Gambar dan Teks (Bag. 2)

Gambar ada di sebelah kiri teks:

Pada paragraf ini gambar akan ditempatkan di sebelah kiri teks. Hal ini disebabkan atribut ALIGN diisi dengan nilai LEFT. Pada paragraf ini gambar akan ditempatkan di sebelah kiri teks. Hal ini disebabkan atribut ALIGN diisi dengan nilai LEFT. Pada paragraf ini gambar akan ditempatkan di sebelah kiri teks. Hal ini disebabkan atribut ALIGN diisi dengan nilai LEFT. Pada paragraf ini gambar akan ditempatkan di sebelah kiri teks. Hal ini disebabkan atribut ALIGN diisi dengan nilai LEFT. Pada paragraf ini gambar akan ditempatkan di sebelah kiri teks. Hal ini disebabkan atribut ALIGN diisi dengan nilai LEFT.

Gambar ada di sebelah kanan teks:

Pada paragraf ini gambar akan ditempatkan di sebelah kanan teks. Hal ini disebabkan atribut ALIGN diisi dengan nilai RIGHT. Pada paragraf ini gambar akan ditempatkan di sebelah kanan teks. Hal ini disebabkan atribut ALIGN diisi dengan nilai RIGHT. Pada paragraf ini gambar akan ditempatkan di sebelah kanan teks. Hal ini disebabkan atribut ALIGN diisi dengan nilai RIGHT. Pada paragraf ini gambar akan ditempatkan di sebelah kanan teks. Hal ini disebabkan atribut ALIGN diisi dengan nilai RIGHT. Pada paragraf ini


16

gambar akan ditempatkan di sebelah kanan teks. Hal ini disebabkan atribut ALIGN diisi dengan nilai RIGHT.

Latihan 3.7:Memperkecil gambar Ketikan kode berikut dan simpan dengan nama gambarkecil.html Catatan: pada contoh ini menggunakan file Komputer.png gambar
Latihan memperkecil gambar

gambar ukuran asli (500X375 pixel ):

gambar yang diperkecil (320X230 pixel) :

Latihan 3.8: Memperbesar gambar Ketikan kode berikut dan simpan dengan nama gambarbesar.html Catatan: pada contoh ini menggunakan file Komputer.png gambar
Latihan memperbesar gambar

gambar ukuran asli (500X375 pixel ):

gambar yang diperbessar (800X630 pixel) :

Tugas 7: Buatlah dokumen halaman web yang berisi tentang pariwisata di daerah tempat tinggalmu. Kemudian simpan dengan nama pariwisata.html. Lengkapi juga dengan gambar dan keterangan tentang tempat wisata tersebut. 3. Menyisipkan Audio Untuk memasukkan suara pada html bisa menggunakan tag
<--file animasi flash siboy.swf-->
<embed src="rose.gif">

Tugas 10: Buatlah 4 buah file dokumen web yang saling saling berhubungan satu dengan yang lainnya dengan ketentuan nama file dan isi sebagai berikut: a. home.html berisi tentang biodata Anda. b. gambar.html berisi tentang 10 gambar galeri yang Anda miliki. c. audio.html berisi tentang 5 audio lengkap dengan kontrol audio. d. video.html berisi tentang 5 video lengkap dengan kontrol video.


20

BAB IV TABLE Tujuan Pembelajaran Setelah mengikuti kegiatan belajar ini Peserta Didik diharapkan dapat : 1) Memahami dan Menyajikan Pembuatan Tabel 2) Memahami dan Menyajikan Teknik Spanning Tabel 3) Memahami dan Menyajikan Tabel di dalam Tabel 4) Memahami Desain Layout Halaman Web 5) Memahami dan Menyajikan Desain Web dengan Konsep Tabel Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Tabel digunakan untuk membuat tampilan agar terlihat lebih rapi dan teratur. 1. Pembuatan Table Untuk membuat table kita harus menggunakan tag

. Sedangkan untuk mendefiniskan baris (table row) pada table menggunakan tag yang ditulis diantara tag tag . Sedangkan untuk menampilkan kolom atau table data (table data) menggunakan tag yang ditulis diantara tag . Sehingga perintah yang digunakan untuk membuat 1 baris dan 1 kolom pada table adalah sebagai berikut:

data pada kolom 1

Untuk mendefinisikan kolom judul (table heading) pada setiap kolom dapat menggunakan tag yang ditulis diantara tag . Atribut yang ada tag : Attribute Nilai/Value Description height Pixel /persen mengatur tinggi tabel width Pixel / persen mengatur lebar tabel border Pixel mengatur garis tepi tabel cellspacing Pixel mengatur jarak antar cell cellpadding Pixel mengatur jarak di dalam cell align Left/Center/Right mengatur perataan letak tabel bgcolor Color/Kode mengatur warna latar belakang tabel Atribut yang ada tag : Attribute Nilai/Value valign Top/Middle/Bottom align Left/Center/Right bgcolor Color/Kode

Description Mengatur perataan sebaris secara vertikal mengatur perataan sebaris secara horisontal mengatur warna latar belakang baris

Atribut yang ada tag Latihan 4.2: - Ketik kode berikut dan simpan dengan nama colspan.html. tabel
: Attribute Nilai/Value height Pixel /persen width Pixel / persen align Left/Center/Right bgcolor Color/Kode

Description mengatur tinggi sel mengatur lebar sel mengatur perataan sel mengatur warna latar sel

Latihan 4.1: - Ketik kode berikut dan simpan dengan nama tabel.html.


21

tabel

Nama Nilai

Ani 90

Bambang 80

Tugas 11: - Buatlah kode program untuk membuat tampilan tabel berikut No Nama Tinggi 1 Desi 150 cm 2 Kintan 155 cm 3 Evita 156 cm - Kemudian simpan dengan nama tugas11.html.

Berat 45 kg 50 kg 50 kg

2. Teknik Spanning Teknik spanning digunakan untuk menggabungkan baris atau menggabungkan kolom. Pengunaan teknik spanning hanya dapat digunakan di dalam tag yakni dengan menambahkan atribut colspan untuk menggabungkan kolom dan rowspan untuk menggabungkan baris. Perintah yang digunakan adalah ..... .....

Benua EROPA

Negara Belanda Italia Inggris Jerman


22

-

Gambarkan hasilnya pada kotak berikut.

Latihan 4.3: - Ketik kode berikut dan simpan dengan nama rowspan.html. tabel

Benua Negara

ASIA Arab Saudi

India

Indonesia

Singapura

-

Gambarkan hasilnya pada kotak berikut.

Tugas 12: - Buatlah kode program untuk membuat tampilan tabel berikut 1 2 5 4 8 7 9 11 - Kemudian simpan dengan nama tugas12.html.

3 6 10 12


23

3. Pembuatan Tabel di dalam Tabel (Tabel bersarang) Teknik tabel bersarang adalah salah satu cara untuk menghasilkan layout tabel yang kompleks tanpa membuat tabel yang sangat kompleks. Sehingga ketika harus membuat tabel yang kompleks, maka cara sederhananya adalah membuat tabel di dalam sebuah sel (). Latihan 4.4: Berikut adalah contoh tabel bersarang. Baris 1 Kolom 1 Baris 2 Kolom 1 -

Baris 1 Kolom 2 Baris 1 Kolom 1 Baris 2 Kolom 1

Baris 1 Kolom 2 Baris 2 Kolom 2

Ketik kode berikut dan simpan dengan nama nestedtabel.html.

tabel


Baris 2 Kolom 1



Tabel yang dimasukkan ke dalam sel

Tugas 13: - Buatlah kode program untuk membuat tampilan tabel berikut

-

Kemudian simpan dengan nama tugas13.html.


24

4. Pembuatan Desain Halaman Web denganTabel Tabel pada umumnya digunakan untuk menampilkan data tabular dalam bentuk baris dan kolom. Pengorganisasian data yang baik dan benar pada sebuah tabel HTML akan sangat membantu dalam mengembangkan aplikasi web, terutama jika tabel yang ingin dibangun harus bersifat dinamis. Secara garis besar anatomi atau susunan dari suatu halaman web terdiri dari containing block, Logo, navigation, content, white space dapat digambarkan sebagai berikut

 Containing Block. Containing block merupakan bagian dari halaman web yang membungkus semua komponen halaman web. Umumnya dibuat dengan tag ,
atau .  Logo. Identitas perusahaan, organisasi, pemilik situs.  Navigation. Navigasi atau menu merupakan bagian penting dari situs yang memudahkan pengunjung berpindah-pindah halaman.  Content. Content atau isi adalah segalanya, karena disinilah sebagian besar informasi disajikan.  Footer. Footer merupakan bagian bawah dan berisi informasi singkat pemilik situs (copyright) dan beberapa link.  Whitespace. Whitespace merupakan area kosong yang membatasi antar-komponen. Whitespace menjadi penting agar pengunjung mempunyai ruang berhenti di antara bagian-bagian situs yang lain. Whitespace dapat juga diisi dengan banner atau animasi. Desain layout suatu halaman web meliputi penyusunan: - pembagian tempat pada halaman - pengaturan jarak sepasi - pengelompokan teks dan grafik - serta penekanan pada suatu bagian tertentu Beberapa model layout yang biasa digunakan dalam mendesain suatu halaman web, diantaranya adalah:  top index  digunakan untuk menampilkan link yang banyak ke situs lain, seperti search engine


25



bottom index  Biasanya digunakan apabila isi dari halaman banyak berhubungan dengan topik tunggal



left index  Digunakan untuk layar dengan resolusi yang lebar sehingga mudah dalam penyediaan navigasi, tanpa menimbulkan kekacauan penyajian pada halaman utama



layout split  Merupakan model yang banyak dipakai, karena terjaga keseimbangan dalam halaman web



alternating index  digunakan untuk halaman yang banyak menampilkan grafik, foto dan produk yang disertai dengan teks berupa keterangan, harga, jumlah, dan lain - lain.

Tugas 14: - Buat desain layout halaman web yang dengan tema web sekolah dengan menggunakan salah satu model layout tabel. Kemudian simpan dengan nama desaintabel.html. Tim RPL - SMKTakhassus Al-Qur’an Wonosobo

26

BAB V FORM Tujuan Pembelajaran Setelah mengikuti kegiatan belajar ini Peserta Didik diharapkan dapat : 1) Memahami penggunaan form HTML 2) Memahami anatomi dan cara kerja form 3) Menyajikan komponen entri teks 4) Menyajikan komponen entri pilihan 5) Menyajikan hasil dari format formulir halaman web 1. Form Form merupakan formulir yang digunakan sebagai perantara untuk memasukan data inputan ke server. Form dibuat dengan menggunakan tag . Atribut yang ada tag : Attribute Nilai/Value Description Action URL lokasi file yang memproses data dari form application/x-www-form-urlencoded bagaimana data form dikirim ke server Enctype multipart/form-data text/plain

Name Autocomplete Method Target

Text On/off Get/post _blank _self _parent _top

memberi nama pada form membaca data isian form sebelumnya metode untuk pengiriman data ke tujuan mengindikasikan dimana respon dari form akan ditampilkan

Novalidate

memperintahkan bahwa data form tidak divalidasi saat di submit. Untuk membuat tampilan dari sebuah form menjadi lebih tertata dengan rapi, umumnya digunakan elemen HTML

untuk memformat form tersebut. 2. Komponen Entri Teks a. Inputan satu baris Digunakan untuk membuat masukan satu baris Atribut yang dimiliki: Attribute Nilai/Value Description Name Text Memberi nama elemen Value Text Memberikan isian data Size Pixel/persen Mengatur panjang kotak masukan Maxlength Integer Mengatur panjang karakter maksimum b. Inputan multibaris Digunakan untuk membuat masukan banyak baris Atribut yang dimiliki: Attribute Nilai/Value Description Name Text Memberi nama elemen rows Integer Mengatur tinggi textarea cols Integer Mengatur lebar textarea disabled disabled Textarea tidak dapat diubah/tidak aktif Maxlength Integer Mengatur panjang karakter maksimum Placeholder Text Memberikan gambaran singkat tentang


27

Readonly Required

Readonly Required

nilai pada textarea Textarea tidak dapat diubah nilainya Menentukan text area tersebut harus diisi atau tidak.

c. Inputan password Digunakan untuk membuat masukan kata sandi Atribut yang dimiliki: Attribute Nilai/Value Description Name Text Memberi nama elemen Value Text Memberikan isian data Size Pixel/persen Mengatur panjang kotak masukan Maxlength Integer Mengatur panjang karakter maksimum d. Inputan tersembunyi Digunakan untuk membuat masukan yang tidak terlihat dan hanya dapat diisi secara langsung dari kode program. Atribut yang dimiliki: Attribute Nilai/Value Description Name Text Memberi nama elemen Value Text Memberikan isian data 3. Komponen Entri Pilihan a. Pilihan Checkbox Digunakan untuk membuat pilihan lebih dari satu opsi pilihan yang dapat dipilih/dibatalkan. Atribut yang dimiliki: Attribute Nilai/Value Description Name Text Memberi nama elemen Value Text Memberikan isian data Bentuk pilihannya:  checkbox   checkbox atau  checkbox   checkbox b. Pilihan Radio Digunakan untuk membuat pilihan yang hanya dapat dipilih atau diganti. Atribut yang dimiliki: Attribute Nilai/Value Description Name Text Memberi nama elemen Value Text Memberikan isian data Bentuk pilihannya:  radio   radio c. Pilihan Combo Digunakan untuk membuat pilihan dengan fitur dropdown. <select name=”text”> ....... Bentuk pilihannya:


28

Atribut yang dimiliki oleh tag
Hobi : voli basket
Foto :

Tugas 15: 1. Buatlah tampilan formulir berikut dan simpan dengan nama tugas15A.html:

2. Buatlah tampilan formulir berikut dan simpan dengan nama tugas15B.html:


30

BAB VI DIV DAN CASCADING STYLE SHEETS Tujuan Pembelajaran Setelah mengikuti kegiatan belajar ini Peserta Didik diharapkan dapat : 1) Memahami dan menyajikan tag DIV 2) Memahami anatomi dan cara kerja CSS 3) Menyajikan CSS untuk memformat tampilan 1. DIV Konsep div sebenarnya hampir mirip dengan penggunaan tabel. DIV lebih cocok digunakan untuk membuat desain halaman web dibandingkan dengan menggunakan tabel. Sifat div sendiri adalah dinamis, yakni apabila kita melakukan desain halaman web dengan menggunakan div akan lebih mudah dan leluasa dalam mengatur peletakkan bagian-bagian dengan menggunakan model layout tertentu. Satu sel dalam sebuah tabel dapat kita ibaratkan sebagai satu div (bagian/division). Untuk menamai dari setiap bagian (div) kita dapat menggunakan atribut id atau class. Contoh penggunaan:

Jika ditampilkan pada browser, tidak akan terlihat apa-apa karena tag div tidak akan menampilkan efek visual. Tag ini hanya digunakan untuk membuat dokumen HTML lebih terstruktur dengan membagi-bagi dokumen ke dalam bagian-bagian yang lebih spesifik. Penggunaan atribut ID dan CLASS Atribut ID digunakan untuk penamaan elemen HTML yang memiliki karakteristik unik/berbeda. Tidak boleh ada dua atau lebih elemen yang mempunyai ID yang sama. Atribut Class digunakan untuk penamaan elemen yang memiliki karakteristik/struktur sama dan dapat digunakan berulang kali dalam markup (Kode HTML). Contoh:

Dalam mengatur tata letak dan tampilan tag div harus digabungkan dengan penggunaan Cascading Style Sheets (CSS).


31

2. CSS Cascading Style Sheet atau lebih sering disebut dengan istilah CSS merupakan salah satu dokumen website yang bertujuan untuk mengatur gaya (style) tampilan website. CSS bukanlah sebuah bahasa pemrograman, melainkan sebuah aturan untuk mengendalikan beberapa komponen pada web sehingga akan lebih terstruktur, seragam dan mudah dalam pengaturan saat pendesain sebuah halaman web. Manfaat pengunaan CSS:  Kode HTML menjadi lebih sederhana dan lebih mudah diatur.  Ukuran file menjadi lebih kecil sehingga load file lebih cepat.  Mudah untuk mengubah tampilan, hanya dengan mengubah file CSS saja.  Dapat berkolaborasi dengan JavaScript dan merupakan pasangan setia HTML.  Dapat digunakan dalam hampir semua jenis web browser. Format penulisan kode CSS: Selector { Property : Value; } Selector adalah elemen/tag HTML yang ingin diberi style. Cukup menuliskan nama tag tanpa perlu menambahkan tanda <>. Jika tag HTML memiliki atribut ID kita dapat menuliskan selector nama ID tersebut dengan diawali tanda kress (#). Apabila tag HTML memiliki atribut Class kita dapat menuliskan selector nama Class tersebut dengan diawali tanda titik (.) Property adalah sifat-sifat yang ingin diterapkan pada selector, seperti warna text, warna background, jarak antar elemen, garis pinggir dan lain sebagainya. Nama property bersifat case sensitive. Value adalah hasil yang ingin didapatkan dari property yang ada. Nilai untuk property tidak boleh dalam tanda petik. Contoh 61: body { color: white; background: #000000; }

Maksud CSS di atas adalah bagian/elemen/tag yang akan diberi style adalah tag . Sifat yang akan terjadi pada tag adalah warna tulisan (color) menjadi warna putih (white) dan warna latar belakang dokumen (background) menjadi warna hitam (#000000). Contoh 62: #wrapper { width: 800px; margin: auto auto; } .menu{ height: 30px; align: center; background: red; }

Maksud CSS di atas adalah bagian/elemen/tag yang akan diberi style adalah tag dengan nama ID wrapper dan tag dengan nama class menu. Untuk tag dengan nama ID wrapper akan mempunyai sifat lebar 800px dan ditampilkan pada tengah layar. Untuk tag dengan nama Class menu akan mempunyai sifat tinggi 30px dengan perataan paragraf di tengah dan mempunyai warna latar belakang dokumen berwarna merah.


32

Ketika anda mempunyai dua atau lebih tag dengan property dan value yang sama : h1{ background-color: #666666; } p { background-color: #666666; } a { background-color: #666666; } Anda dapat menggabungkan selector dengan menambahkan tanda koma pada nama selector: h1, p, a { background-color: #666666; } Cara penggunaan CSS: Ada 3 cara/metode dalam penulisan kode CSS, yaitu inline, internal/embedded dan external style sheets. A. Inline Style Sheets Penulisan kode CSS dengan metode inline ini bisa dilakukan langsung pada tag yang ingin diberi style dengan menggunakan atribut style. Jadi Anda tidak perlu menuliskan selector.
Judul Situs
SMK Takhassus

Cara ini sangat tidak dianjurkan karena akan menyulitkan pengaturan style jika terjadi perubahan tampilan website dikemudian hari. B. Internal/Embedded Style Sheets Metode CSS internal ditulis di dalam tag style yang ditempatkan pada tag head. Belajar CSS <style> h1{ color : red; } p{ text-align : center; color : #303; font-size : 24px; }
Judul Situs
SMK Takhassus

Metode kedua ini sangat dianjurkan untuk pengujian style, atau ketika anda hanya memiliki satu halaman web. C. External Style Sheets Metode ini dilakukan dengan membuat file CSS secara terpisah (tersendiri) dan dipanggil di dalam tag head pada dokumen html yang ingin diberi gaya/style. File css harus memiliki ekstensi (akhiran) *.css misalnya namafile.css. Pemanggilan file css dilakukan dengan menggunakan tag link yang diletakkan pada tag head.

Cara ini umumnya digunakan pada satu aplikasi berbasis web sehingga tampilan antar halaman akan terlihat konsisten.


33

3. Menyajikan CSS untuk Format Tampilan A. Margin Property margin digunakan untuk memberikan jarak antar elemen/tag HTML. Misalnya jarak antar
dan tag-tag HTML lainnya. Latihan 6.1 - Ketikkan kode html berikut dan simpan dengan nama latihan61.html.
Box ke satu

Box ke dua

-

Jangan lupa tambahkan kode tersebut pada struktur dasar HTML yang memiliki tag , dan seterusnya. Tambahkan tag style pada tag head, dan ketikkan kode CSS berikut: .box{ background-color:green; color: yellow; width:100px; height:100px; margin-bottom:50px; }

-

Tampilan yang didapatkan

Kita juga dapat memberikan jarak dari kanan (right), kiri (left) dan atas (top). Misalnya margin-top:20px; margin-right:30px; margin-bottom:50px; margin-left:40px;

B. Padding Pada latihan sebelumnya, kita telah memberikan jarak antar elemen HTML dalam contoh sebelumnya jarak antar
, namun coba perhatikan antara text (Box ke x) dengan garis pinggir kotak, tidak ada jarak sama sekali, merapat ke sisi box tersebut. Untuk itu property paddinglah yang akan memberikan jarak antara konten elemen dengan elemen tersebut. Tambahkan kode CSS berikut, pada class box yang kita buat sebelumnya: .box{ background-color:green; color: yellow; width:100px;


34

height:100px; margin-bottom:50px; padding-left:20px; }

Maka hasilnya akan seperti pada gambar di bawah ini: Dan sekarang, anda dapat melihat jarak antara text yang berada di dalam box. Perlu diperhatikan juga, bahwa ketika kita menambahkan padding, ukuran .box juga akan berubah. Misalnya kita menentukan ukuran lebar dari .box sebesar 100px. Ketika kita menambahkan padding-left sebesar 20px, maka total lebar dari .box tersebut menjadi 120px. Jadi jika anda ingin ukuran .box tetap 100px, kita harus menghitung ulang width dari box tersebut. Misalnya kita ubah menjadi 80px. Dengan begitu, 80px + 20px menjadi 100px.

C. CSS Shorthand Pada pembahasan sebelumnya, bisa kita simpulkan bahwa setiap property dapat memiliki lebih dari satu jenis, misalnya margin dapat memiliki 4 jenis. margin-top, margin-right, margin-bottom, dan margin-left. margin-top:20px; margin-right:30px; margin-bottom:50px; margin-left:40px;

Daripada menuliskan seluruh property tersebut, kita bisa menggunakan CSS-Shorthand yaitu menggabungkan seluruh value (top, right, bottom, dan left) ke dalam satu property. Sebagai contoh, kita akan menggunakan CSS-shorthand untuk Property margin menjadi seperti berikut : margin : 20px 30px 50px 40px;

Masing-masing dari nilai tersebut adalah: margin : top right bottom left;

bisa kita simpulkan bahwa nilai dari CSS-shorthand margin ini memiliki urutan searah jarum jam dan dimulai dari margin-top. o Ketika kita memberikan satu nilai pada property margin, ini artinya kita memberikan nilai tersebut pada seluruh sisi. margin : 20px;

maka nilai dari margin-top, right, bottom dan left adalah 20px. o Ketika kita memberikan dua nilai pada property margin, berarti nilai selanjutnya mengikuti nilai sebelumnya. margin : 20px 30px;

maka nilai dari margin-top dan margin-bottom adalah 20px sedangkan nilai dari margin-right dan margin-left adalah 30px o Dan ketika kita menuliskan tiga nilai, maka nilai yang tidak diisi akan mengikuti nilai yang diisi, sama halnya ketika kita memberi 2 nilai. margin : 20px 30px 40px;

Pada contoh di atas, kita memberikan nilai untuk top, right dan bottom. Sedangkan untuk left akan disamakan dengan right. Penggunaan nilai seperti ini juga berlaku pada padding, dan property-property sejenis lainnya. Tim RPL - SMKTakhassus Al-Qur’an Wonosobo

35

D. Border Property border digunakan untuk memberikan garis pinggir pada elemen, setidaknya ada tiga property yang harus anda set, yaitu color, style dan width. border-color : black; border-style : solid; border-width : 5px;

namun anda juga dapat menggunakan CSS shorthand sehingga menjadi seperti format berikut : border : width style color; border : 5px solid black;

Cobalah tambahkan kode tersebut pada latihan sebelumnya dan yang akan anda dapatkan adalah seperti berikut : Sama halnya dengan Padding, penambahan property border juga akan merubah ukuran dari .box. Kali ini perhatikan bahwa kita memberikan border pada seluruh sisi .box, artinya jika kita tentukan ukuran border sebesar 5px, maka 10px (untuk width, karena 5px untuk left, dan 5px untuk right) akan ditambahkan pada ukuran .box tersebut. Sehingga ukuran .box berubah kembali menjadi 110px. Untuk itu kita kurangi width dari .box tersebut menjadi 70px sehingga : 70px (width) + 20px (padding) + 10px (border) = 100px.

E. Typhography Merubah font dengan property font-family font-family: calibri; font-family: calibri, arial, tahoma, verdana, sans-serif; font-family: “segoe ui”;

Merubah ukuran font dengan property font-size font-size: 12px;

Merubah ketebalan font dengan property font-weight. Nilai yang bisa dipakai pada property ini adalah normal, bold, bolder. font-weight: bold;

Merubah jarak antar huruf dengan property letter-spacing. Semakin besar nilai pixel yang diberikan semakin jauh jarak antar huruf. Andapun dapat menggunakan nilai negatif untuk memperdekat jarak antar huruf. letter-spacing: 12px;

Mengatur jarak antar baris line-height: 12px;

Membuat text menjadi rata kiri, tengah atau kanan, kita gunakan property text-align. Nilai yang dapat digunakan adalah left, center, right, dan justify untuk rata kiri-kanan. text-align: center;

Latihan 6.2 Buatlah dokumen html dan isi dengan beberapa paragraf beserta headingnya dan terapkan property-property yang telah anda pelajari di atas dan simpan dengan nama latihan62.html.


36

F. Background Untuk memberikan gambar sebagai latar belakang dokumen web. background: url(nama_file_background);

atau background-image: url(nama_file_background);

Ketika anda menggunakan gambar dengan ukuran kecil maka anda akan melihat background ditampilkan secara berulang untuk memenuhi seluruh element tersebut. Gunakan property background-repeat untuk mengatur pengulangan gambar background-repeat: repeat-x;

background-repeat: repeat-y;

background-repeat: no-repeat;

Mengatur letak posisi gambar background dari sumbu x (dari kiri) background-position-x: 50px;


37

Mengatur letak posisi gambar background dari sumbu y (dari atas) background-position-y: 50px;

menggunakan CSS-shorthand untuk background-position : background-position : nilaiX

nilaiY;

misalnya background-position: 50px 50px;

G. Image Sprite Image Sprite adalah sekumpulan gambar berbeda yang disatukan dalam satu file gambar. Teknik ini dilakukan untuk mempercepat loading website tanpa harus memanggil beberapa file gambar yang banyak. Cukup satu gambar dan kita tentukan lokasi gambar yang ingin ditampilkan. Contoh gambar sprite

Contoh penggunaan: Belajar CSS <style> #del{ width:100px; background:url(gb.gif); background-repeat: no-repeat; background-position: -80px -60px; } contoh penggunaan sprite

Hasil yang didapat:


38

H. Floating Float berarti melayang. Ketika kita memberikan float pada elemen maka elemen tersebut seolah-olah melayang dan elemen di atasnya (parent) menganggap tidak ada elemen didalamnya (child). Latihan 6.3: - Ketikkan kode berikut dan simpan dengan nama latihan63.html
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodomagna eros quis urna.

-

Lalu tambahkan css berikut:

img { float: left; }

-

Hasil yang didapat:

Style diatas akan meratakirikan elemen gambar dan membuat paragraf naik keatas. Ada satu permasalahan ketika anda menambahkan floating pada suatu elemen, permasalahan ini bisa anda temui pada latihan 6.4 berikut: Latihan 6.4: - Ketikkan kode berikut dan simpan dengan nama latihan64.html

-

Kemudian tambahkan style berikut

#wrapper{ width : 960px; margin : 0 auto; /*agar wrapper tetap berada ditengah */ } #header { width:100%; height:50px; background: orange; margin-bottom: 10px; } #content{ padding:20px; background : green; margin-bottom : 10px; } #artikel{ width : 600px; height : 700px; float : left; background: orange; } #sidebar { width : 300px;


39

height: 200px; float : right; background: orange; } #footer{ width : 100%; height: 50px; background: green; }

-

Apabila dibuka dalam browser, maka tampilan yang akan didapat seperti ini:

Ada yang janggal? Ya.. #content tidak memenuhi isi dari #artikel dan #sidebar. Seharusnya tinggi #content otomatis sama dengan tinggi dari elemen tertinggi di dalamnya, dalam kasus ini adalah artikel dengan tinggi 700px. Dengan begitu seharusnya tinggi dari #content adalah 740px (ditambah dengan padding-top dan padding-bottom). Jika anda tidak mengerti cobalah untuk membuang property float yang ada, dan perhatikan bahwa #artikel dan #sidebar berada di dalam #content. Hal ini dikarenakan kita menambahkan floating pada #artikel dan #sidebar, sehingga #content menganggap tidak ada element didalamnya. Ada dua cara untuk menyelesaikan kasus ini : 1. Menambahkan style overflow:hidden pada #content #content{ … overflow:hidden; }

2. Menambahkan div kosong dengan style clear:both; sebelum penutup content …

-

Maka hasil yang akan didapat menjadi seperti berikut:

I. CSS Reset CSS Reset berfungsi untuk mereset atau mengatur ulang seluruh property-property yang telah disetting oleh browser, seperti margin, padding, warna huruf (link) ukuran huruf heading dan lain sebagainya. Perhatikan CSS contoh berikut : * { margin:0; padding:0; }

Selector bintang (*) digunakan untuk memberikan style pada Seluruh elemen/Tag HTML.


40

BAB VII JAVASCRIPT Tujuan Pembelajaran Setelah mengikuti kegiatan belajar ini Peserta Didik diharapkan dapat : 1) Memahami dasar-dasar pengunaan Javascript 2) Menyajikan halaman dokumen web dengan menggunakan Javascript Javascript merupakan bahasa pemrograman berbasis web dan berorientasi objek atau sering juga isebut OOP (Object Oriented Programming). Dimana dianggap sebuah objek memiliki metode, properti dan event yang berbeda. 1. Keuntungan menggunakan javascript Javascript sering digunakan oleh para programmer karena javascript mempunyai keunggulan, antara lain: a. Menciptakan halaman web yang lebih interaktif dan menarik. b. Dapat memberikan text/content yang dinamis kedalam halaman HTML. c. Dapat memberikan reaksi tertentu pada suatu event. d. JavaScript bisa digunakan untuk validasi data pada form HTML sebelum dikirim ke server. Contoh pada validasi e-mail. e. Mendeteksi banyaknya pengunjung pada browser. f. JavaScript juga sering digunakan sebagai trik, misalnya memberikan efek mouseover pada suatu image atau link. Dengan efek ini, suatu gambar dapat berubah ketika mouse didekatkan ke gambar tersebut dan masih banyak lagi. 2. Cara Penulisan Javascript: Javascript sendiri mempunyai sifat khusus, yakni bersifat Case Sensitive yaitu besar kecil huruf yang digunakan mempengaruhi proses yang ada. Beberapa sintaks/cara penulisan kode program, yaitu: Cara 1: <SCRIPT> JavaScript statements................

Cara 2: <SCRIPT LANGUAGE="JavaScript"> JavaScript statements................

3. Peletakkan Kode Javascript: Kode javascript juga memiliki aturan cara peletakkan yang hampir sama dengan CSS, yaitu: Cara 1: Umumnya tag <script> diletakan diantara bagian kepala dari dokumen HTML, yaitu bagian antara tag dan . Pemanggilan fungsi JavaScript (atau disebut juga event) diletakkan di bagian badan dokumen HTML atau bisa kita sebut diantara tag dan . Cara 2: Menuliskan kode program JavaScript dalam suatu file teks dan kemudian file teks yang berisi kode JavaScript disimpan dengan ekstensi *.js kemudian dipanggil dari dalam dokumen HTML dengan mengetikkan kode berikut: <SCRIPT language="JavaScript" SRC="lokasi_file.js"> tag <script> tersebut juga diletakan diantara bagian kepala dari dokumen HTML, yaitu bagian antara tag dan .


41

4. Event Handler Seperti yang sudah kita ketahui, dengan menggunakan JavaScript, kita dapat membuat halaman web yang interaktif dan dinamis. Event adalah kejadian/aksi dari user yang bisa terdeteksi oleh JavaScript yang didefinisikan pada tag HTML. Beberapa contoh event handler yang sering digunakan antara lain : Event Event akan dijalankan ketika... onMouseover User meletakkan kursor mouse diatas suatu elemen. User memberikan focus kepada suatu elemen. onFocus Elemen kehilangan fokus, artinya user melakukan klik diluar elemen itu. onBlur User memodifikasi isi dari data dalam satu field data. onChange User melakukan klik mouse terhadap satu elemen yang berhubungan dengan onClick event. Navigator user meload/memanggil suatu halaman. onLoad Melakukan klik tombol submit. onSubmit onMouseout Kursor mouse meninggalkan posisinya dari atas suatu elemen. Menghapus data pada suatu form dengan bantuan satu tombol reset. onReset Contoh 7.1: SMK Takhassus <script language="javascript"> function tampil(){ window.alert("selamat datang di website saya"); } sebelum ini ditampilkan akan muncul pesan dulu

Hasilnya:

Latihan 7.1: Mengimplementasikan Event Handler, simpan dengan nama "js_event.html"

Hasilnya yang diharapkan:


42

Saat mouse focus pada input text

Saat mouse berada di atas tombol

Event saat tombol di klik


43

Latihan 7.2: - Javascript untuk Validasi Form, simpan dengan nama "js_validasi.html" SMK Takhassus <script language="javascript"> function validasi(){ if(document.getElementById("nm").value==""){ window.alert("nama harus diisi!"); return false; } if(document.getElementById("em").value==""){ window.alert("email harus diisi!"); return false; } return true; }

Nama

email

Komentar

-

Jalankan kode


44

BAB II FORMAT TEKS HALAMAN WEB

Recommend Documents

sampai dengan

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

Judul Dokumen berada di kiri

Judul Dokumen berada di Tengah

Judul Dokumen berada di kanan

Judul dengan warna hijau

belajar web itu menyenangkan

heading 1

Latihan Membuat Link

Dokumen 1

Latihan Membuat Link

Dokumen 2

Latihan Membuat Link Berupa gambar

Latihan Membuat Link Berupa Gambar

Latihan Menggabung Gambar dan teks (bag.1)

Latihan Menggabung Gambar dan Teks (Bag. 2)

Latihan memperkecil gambar

Latihan memperbesar gambar

Judul Situs

Judul Situs