Computer Engineering and Network SMK Tunas Harapan Pati 2011

MODUL “ WEB DASAR “

Untuk Peserta Didik Kelas XI Sekolah Menengah Kejuruan Bidang Keahlian Teknik Komputer & Jaringan (TKJ)

Pengampu : Muhamad Slamet Riyadi, S.Kom

muhamadslametriyadi@yahoo.co.id

Computer Engineering and Network SMK Tunas Harapan Pati 2011

BAB 1

Sejarah Web

Tujuan Pembelajaran :

- Dapat mendefinisikan berbagai teori yang melandasi sebuah web, sehingga nantinya mengetahui arah dan tujuan daripada pembelajaran ini dan dapat membuat sebuah hasil akhir yaitu sebuah halaman web.

- Dapat menjabarkan tentang protokol yang digunakan dalam sebuah website dan cara pengaksesan informasi melalui hypertext. - Dapat mengoperasikan software pendukung yang dibutuhkan dalam pembuatan sebuah web.

1.1. Pendahuluan

Untuk memulai belajar pemrograman maupun membuat sebuah halaman web khususnya HTML,selain diperlukan

penguasaan tentang perintah-perintah pemrograman HTML tersebut, seorang pemrogram web juga harus mengetahui arah dan tujuan serta distribusi terhadap hasil yang akan diperoleh. Untuk mencapai tujuan tersebut seorang pemrogram harus mengetahui juga teknologi yang tepat untuk digunakan dalam membantu pekerjaannya. Untuk membantu penguasaan akan hal itu khususnya para pemula dibidang web, pada bab ini akan dibahas mengenai cikal bakal adanya sebuah web, teori-teori yang berkaitan dengan web, bahkan sampai dengan aplikasi-aplikasi maupun teknologi yang terlibat didalamnya. Untuk mendukung pembelajaran pada bab ini diperlukan software-software yang sudah harus terinstal pada komputer yang dimiliki, adapaun software tersebut diantaranya : - Sistem Operasi yang disarankan Windows 95 ke atas, meskipun Anda dapat

menggunakan sistem operasi yang lain seperti linux, karena pembahasan pada buku ini menggunakan sistem operasi Windows.

- Browser dapat menggunakan Internet Explorer, tetapi jika anda mempunyai Browser yang lain juga dapat digunakan, seperti : Opera, Netscape, Mozila, dan lain sebagainya.

- Editor text untuk pemula disarankan menggunakan Notepad, karena untuk mencegah supaya para pemula lebih terlatih mengetik program yang dibuat dan tidak ketergantungan software tertentu, yang cenderung selalu instant dalam membentuk kode program tertentu.

- Serta dapat menginstal software lainya yang mendukung untuk merancang sebuah halaman web.

1.2. Sejarah Web

Awal perkembangan web dimulai pada bulan maret 1989 saat tim berner-lee yang bekerja di laboratorium fisika partikel eropa atau yang dikenal dengan nama CERN (consei european pour la recherce nuclaire) yang terletak di genewa swiss, mengajukan protokol (bahasa atau prosedur yang digunakan untuk menghubungkan antara komputer yang satu dengan lainnya) sistem distribusi informasi internet yang digunakan untuk berbagai informasi di antara para fisikawan.

Protokol inilah yang selanjutnya dikenal sebagai protokol world wide web dan dikembangkan oleh world wide web consortium (w3c). w3c adalah konsorsium dari sejumlah organisasi yang berkepentingan dalam pengembangan berbagai standar yang berkaitan dengan web. HTTP (hypertext transfer protocol) merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser. Protokol ini mentransfer dokumen- dokumen web yang ditulis atau berformat HTML (hypertext markup language). Dikatakan markup language karena HTML berfungsi untuk memperindah file teks biasa untuk ditampilkan pada program web browser. Hal ini dilakukan dengan menambahkan tag-tag (perintah khusus) pada file teks biasa tersebut.

1.3. Pengenalan Web

Sumber daya yang ada di Internet jumlahnya sangat banyak, seperti Chating, E-mail, Milis, dan sebagainya. Salah satu sumber daya internet yang perkembangannya sangat pesat adalah www (world wide web) atau sering disebut dengan istilah web saja. Web didistribusikan dengan menggunakan pendekatan hypertext. Dimana hanya dengan menggunakan suatu teks yang tidak terlalu banyak/singkat bisa dijadikan acuan untuk membuka dokumen yang lain. melalui pendekatan hypertext ini seorang user dapat memperoleh informasi yang diinginkan dengan cepat. Caranya bisa berpindah dari suatu dokumen

dokumen yang lain. Dokumen-dokumen yang diperlukan informasinya tersebut dapat terletak dilokasi manapun, asalkan terletak pada jaringan internet. Pengaksesan informasi melalui pendekatan hypertext dapat dilihat pada ilustrasi gambar berikut ini :

ke

Gambar 1. Pengaksesan informasi melalui hypertext. seseorang tidak harus membaca isi dokumen secara berurutan

Jaringan web telah membentang ke seluruh penjuru dunia. Tidak hanya terbatas pada situs-situs pribadi maupun kelompok saja yang ingin mempublikasikan karya- karyanya, web juga banyak digunakan oleh perusahaan baik skala kecil maupun besar yang ingin mempromosikan produk atau untuk melakukan transaksi bisnisnya.

1.4. Aplikasi Web

Banyak aplikasi web dibuat hanya dengan menggunakan bahasa yang disebut HTML (hypertext markup language) dengan menggunakan protokol yang disebut HTTP (Hypertext Transfer Protocol). Bagaimana sebuah web dapat diakses oleh user dapat dilihat pada ilustrasi berikut ini :

Keterangan : - Browser meminta sebuah halaman(informasi) ke suatu situs web melalui

protokol http.

- Permintaan sampai dan diterima oleh sebuah web server - Web server segera mengirimkan dokumen html yang diminta ke klien bila ada,

jika tidak akan memberikan pesan error bila dokumen yang diminta tidak ada - Browser pada sisi klien segera menampilkan dokumen(informasi) yang diterima

berdasarkan kode-kode pemformat yang terdapat pada dokumen html.

1.5. Software yang digunakan

Software yang digunakan untuk membuat web banyak sekali jumlahnya, seperti : frontpage, dreamweaver, adobe golive, dll. Namun bagi para pemula dianjurkan untuk tidak menggunakan software-software tersebut terlebih dahulu. Karena kalau digunakan diawal anda belajar akan berdampak ketergantungan software bagi anda sendiri sebab semuanya serba instant untuk membuat sebuah halaman web. Oleh sebab itu disarankan menggunakan text editor notepad yang terdapat pada paket windows. Tampilan notepad dapat dimunculkan dengan cara : klik START – PROGRAM – ACCESSORIES – NOTEPAD atau bisa juga dibuka dengan cara lain sesuai dengan setingan komputer Anda misalnya tinggal klik double pada icon notepad di desktop apabila Anda sudah meletakkan icon di desktop, dan mungkin ada cara lainya. Tampilan Notepad dapat dilihat pada gambar berikut :

Gambar 3. Membuka Notepad

Gambar 4. Tampilan Notepad

Sedangkan web browser yang akan digunakan pada latihan yang ada pada buku ini menggunakan Internet Explorer, namun apabila anda memiliki browser lain selain Internet Explorer, seperti Netscape, Opera, Mozila, dan lain sebagainya juga dapat Anda gunakan. Tampilan Internet Explorer dapat anda lihat pada gambar berikut ini :

Gambar 5. Tampilan Web Browser Internet Explorer

Latihan Soal :

Apakah Yang dimaksud dengan World Wide Web (www) ?

Ketika kita mengakses sebuah situs di internet (misalnya www.darmajaya.ac.id ), biasanya di depan tulisan www terdapat tulisan http (lengkapnya

http://www.darmajaya.ac.id ). Apakah maksud tulisan http tersebut ?

Jelaskan mekanisme kerja pengaksesan sebuah dokumen html ?

Apakah yang dimaksud dengan Web Server ?

Apakah yang dimaksud Web Browser ?

Selamat Mengerjakan … !

BAB 2 Pengantar Web

Tujuan Pembelajaran : - Bisa menuliskan struktur dokumen HTML dan tag HTML dengan benar kedalam software pendukung untuk pembuatan sebuah halaman web. - Bisa mendefinisikan fungsi berbagai tag HTML. - Bisa menggunakan berbagai tag beserta atribut yang ada dalam dokumen/kode- kode

HTML.

2.1. Pendahuluan

Hypertext Markup Language

merupakan dasar untuk membuat sebuah halaman website. Dokumen dan aplikasi yang dapat berjalan di atas web browser umumnya memiliki format hypertext markup language (HTML). Meskipun sekarang terdapat banyak tool atau software yang

(HTML)

dapat digunakan untuk merancang sebuah halaman secara WYSIWYG (what you see is what you get), jadi apa yang anda lihat itulah yang akan anda dapatkan seperti frontpage, dreamweaver, adobe golive, dll. Namun anda harus tetap menguasai HTML karena HTML merupakan dasar apabila Anda ingin mempelajari dan lebih mendalami tentang web programming. Hal ini menunjukan bahwa sangat pentingnya mempelajari dasar-dasar HTML. Karena itu untuk dapat melakukan pemrograman aplikasi di atas web anda harus terlebih dahulu menguasai HTML.

Pada bab ini akan dipelajari dasar-dasar penggunaan kode-kode HTML daiantaranya : Struktur dasar HTML, dasar penggunaan TAG, penggunaan komentar, penggunaan tag break row, penggunaan tag paragraf, penggunaan tag center, penggunaan tag heading, menampilkan garis horizonatal dan penggunaan tag divisi.

2.2. Struktur Dokumen HTML

Setiap dokumen atau halaman HTML memiliki struktur atau susunan file seperti terlihat pada contoh berikut :

Struktur.html

<html>

<head>

<title>judul

pada title bar web browser</title>

yang

ingin ditampilkan

</head> <body>

pada bagian

perintah-perintah untuk menampilkan: Text, gambar, suara dan lain-lain.

ini

dapat

berisikan

</body> </html>

Seperti terlihat, struktur file HTML diawali dengan sebuah tag <html> dan ditutup dengan </html>. Di dalam tag ini terdapat dua buah bagian besar, yaitu yang diapit oleh tag <head> … </head> dan tag <body> … </body>. Header dari halaman HTML diapit oleh tag <head> dan bagian ini tidak ditampilkan pada browser. Bagian ini berisi tag-tag header seperti <title> … </title> yang berfungsi untuk menampilkan judul pada title bar window pada web browser. Tag lain misalnya<meta> dan tag-tag lainya yang akan kita pelajari selanjutnya. Bagian kedua yang diapit oleh tag body merupakan bagian yang akan ditampilkan pada halaman web browser nantinya. Pada bagian ini anda dapat menuliskan semua jenis informasi berupa teks dengan bermacam format maupun gambar yang ingin anda sampaikan pada pengguna nantinya.

Untuk lebih memperjelas perhatikan gambar berikut ini :

2.3. Dasar Penggunaan TAG

Tag HTML umumnya berupa tag yang berpasang-pasangan dan diapit dengan simbol < dan >. Pasangan atau penutup perintah dari sebuah tag ditandai dengan tanda / . misalnya pasangan dari tag <example> adalah </ example >. Sebagian tag telah digunakan pada contoh kode HTML di atas. Sekarang marilah kita kenali berbagai hal yang mendasar tentang tag. Setiap tag memiliki nama, nama tag ditulis dalam tanda < dan >. Antara nama tag dan tanda < ditulis tanpa spasi sama sekali. Nama tag dapat ditulis dengan huruf kecil, kapital maupun campuran. Beberapa tag ada yang menggunakan atribut di dalamnya. Contoh : <P align=”center”>, pada contoh ini P adalah nama tag, sedangkan align adalah Tag HTML umumnya berupa tag yang berpasang-pasangan dan diapit dengan simbol < dan >. Pasangan atau penutup perintah dari sebuah tag ditandai dengan tanda / . misalnya pasangan dari tag <example> adalah </ example >. Sebagian tag telah digunakan pada contoh kode HTML di atas. Sekarang marilah kita kenali berbagai hal yang mendasar tentang tag. Setiap tag memiliki nama, nama tag ditulis dalam tanda < dan >. Antara nama tag dan tanda < ditulis tanpa spasi sama sekali. Nama tag dapat ditulis dengan huruf kecil, kapital maupun campuran. Beberapa tag ada yang menggunakan atribut di dalamnya. Contoh : <P align=”center”>, pada contoh ini P adalah nama tag, sedangkan align adalah

2.4. Pemberian Catatan/Komentar pada Dokumen HTML

Catatan adalah bagian dari kode HTML yang diabaikan oleh browser. Kegunaan catatan/komentar dalam kode HTML adalah sebagai keterangan yang berguna untuk pembaca kode. Misalnya, catatan digunakan untuk memberikan catatan apa saja dan bahkan bisa mencakup beberapa baris.

Komentar.html <!--Program ini dibuat pada tanggal 06 Oktober 2005 -->

<html>

<head>

<title>Hai</title>

<Body>

<!-- Catatan bisa diletakan dimana saja --> Saya Sedang Belajar HTML </body>

</html>

2.5. Penggunaan Tag Break Row (pindah baris)

Tag ini digunakan untuk menurunkan teks sebanyak yang kita inginkan, dengan kata lain satu tag <BR> sama dengan anda menekan tombol Enter satu kali. Untuk lebih jelas sekarang perhatikan contoh berikut ini :

Breakrow.html

<html>

<head>

<title>belajar tag br</title>

</head>

<body>

Mudah- mudahan anda cepat bisa belajar HTML <br> Amin …! </body>

</html>

2.6. Penggunaan Tag Paragraf

Tag <P> berguna untuk membuat paragraf. Jarak paragraf/tek pertama dengan paragraf/tek kedua sama dengan anda menggunakan tag <br> dua kali. Untuk lebih jelasnya perhatikan contoh di bawah ini.

Paragraf1.html

<html> <head>

<title>belajar tag paragraf</title> </head>

<body> Senja Telah Tiba<p> Mentari kian temaram<br>

Samar disela-sela daun cemara<br> Angin mulai berhembus dari samudera<br> Pertanda malam telah tiba </body> </html>

Atribut Align juga bisa diterapkan pada tag paragraf. Yang berguna untuk mengatur peletakan teks di dalam masing-masing baris. Sebagai contoh : tambahkan pada kode HTML di atas dengan kode seperti yang terlihat pada contoh program HTML berikut :

Paragraf2.html

<html>

<head>

<title>belajar tag paragraf</title>

</head>

<body>

Senja Telah Tiba <p align = “center”> Mentari kian temaram<br>

Samar disela-sela daun cemara<br> Angin mulai berhembus ke samudera<br> Pertanda malam telah tiba<br> </p>

Bandar Lampung, 2004

</body>

</html>

2.7. Penggunaan Tag Center

Untuk meratakan teks ketengah, kita juga bisa menggunakan tag <Center>. Dan untuk mengakhiri penengahan teks (yakni agar teks berikutnya tidak terletak ditengah), kita perlu menambahkan tanda penutup berupa tanda slash (/), cara penulisannya adalah : </center>. Untuk jelasnya perhatikan latihan di bawah ini :

center.html

<html>

<head>

<title>belajar tag center </title>

</head>

<body>

<center> Addres : <hr>

Green Kost Production<br>

<hr size = 5 width = 25% align = left noshade> Jl. Jambu 1 No. 12<br> Gedung Meneng<br> Bandar Lampung 35145 </center>

</body>

</html>

2.8. Penggunaan Tag Heading

Tag ini digunakan untuk mengatur ukuran teks yang dijadikan sebagai judul dalam badan dokumen. Ukuran yang ada pada tag heading ada 6 buah ukuran yang paling besar ditunjukan dengan penomoran yang paling kecil yaitu angka 1 dan yang paling kecil ditandai dengan nomor terbesar yaitu 6. anda juga bisa menggunakan angka lebih dari enam misal 7 atau 8, tetapi hasilnya adalah tetap seukuran angka 6 karena standarnya adalah ukuran 6 yang terkecil. Bentuk tag-tag heading dimulai dari yang terbesar sampai terkecil dapat dilihat pada tatacara penulisan berikut ini :

• <H1> … </H1> (Heading 1)

• <H2> … </H2> (Heading 2)

• <H3> … </H3> (Heading 3)

• <H4> … </H4> (Heading 4)

• <H5> … </H5> (Heading 5)

• <H6> … </H6> (Heading 6)

Untuk memperjelas kegunaan tag heading ini perhatikan pada contoh di bawah ini :

heading.html

<html>

<head>

<title>belajar tag heading</title>

</head>

<body>

<h1>ukuran heading 1</h1>

<h2>ukuran heading 2</h2>

<h3>ukuran heading 3</h3>

<h4>ukuran heading 4</h4>

<h5>ukuran heading 5</h5>

<h6>ukuran heading 6</h6>

</body>

</html>

seperti halnya pada tag <P>, tag heading juga memiliki atribut. Salah satu atribut yang bisa digunakan adalah atribut align yang bisa bernilai : center, left, right, justify. Cara menuliskan pada dokumen HTML adalah <h1 align =”center”>.

2.9. Menampilkan Garis Horisontal (Horizontal Row)

Agar tampilan dokumen HTML yang kita buat menjadi lebih menarik, seorang pembuat dokumen web sering menambahkan garis horisontal biasanya Agar tampilan dokumen HTML yang kita buat menjadi lebih menarik, seorang pembuat dokumen web sering menambahkan garis horisontal biasanya

• Size

: Untuk merubah Ketebalan garis

• Width

: Untuk merubah lebar garis

• Align

: Untuk mengatur tataletak teks dalam baris

• Noshade : Untuk merubah agar garis yang dibuat tidak disertai bayangan

Berikut adalah contoh kode HTML yang menggunakan tag ini :

Garis.html <html>

<head> <title>belajar membuat garis </title>

</head> <body> Addres :

<hr>

Green Kost Production<br>

<hr size = 5 width = 25% align = left noshade> Jl. Jambu 1 No. 12<br> Gedung Meneng<br> Bandar Lampung 35145 </body>

</html>

2.10. Penggunaan Tag Divisi

Tag ini digunakan untuk mengelompokkan sejumlah baris teks yang memiliki tipe sama. Fungsinya bisa juga disamakan dengan tag <P>. perhatikan pada contoh berikut ini :

Divisi.html

<html>

<head>

<title>belajar tag div </title>

</head>

<body> <div align=”right”> Addres :

<hr>

Green Kost Production<br>

<hr size = 5 width = 25% noshade> Jl. Jambu 1 No. 12<br> Gedung Meneng<br> Bandar Lampung 35145 </div>

</body>

</html>

Latihan Soal :

Dengan menggunakan kode-kode HTML, buat tampilan di browser seperti gambar

berikut ini :

Selamat Mengerjakan … !

BAB 3 Pengaturan Text pada dokumen HTML

Tujuan Pembelajaran : - Bisa menggunakan tag yang berfungsi untuk mengatur teks pada dokumen HTML.

Bisa menjelaskan dan membedakan tag-tag dasar dan tag-tag untuk mengatur teks yang ada pada dokumen HTML.

- Dapat melakukan pengaturan teks pada dokumen HTML sehingga tampilan dokumen HTML yang dibuat menjadi lebih indah.

3.1. Pendahuluan

Untuk memperoleh suatu tampilan yang menarik dalam dokumen HTML, diperlukan kemampuan khusus salah satunya yaitu kemampuan untuk memformat/mengatur teks pada dokumen HTML. Untuk melakukan pengaturan teks tidak terlepas dari penggunaan tag-tag HTML Setelah kita mengetahui cara dan fungsi tag-tag dasar HTML seperti yang telah kita pelajari pada bab sebelumnya. selanjutnya pada bab ini akan dipelajari penggunaan tag yang lain, yang dipergunakan untuk pengaturan teks pada dokumen HTML.

3.2. Pengaturan Teks

Pada HTML terdapat sejumlah tag yang berguna untuk mengatur bentuk-bentuk teks. Bentuk-bentuk teks tersebut terbagi dalam dua jenis, yaitu bentuk teks secara fisik dan bentuk teks secara logis. Pada tabel berikut ini merupakan contoh TAG yang digunakan untuk mengatur bentuk teks secara fisik :

Tag Keterangan

<Strike>Teks</Strike> Teks menjadi strikethrough/ bergaris tengah <I>Teks</I>

Teks menjadi terlihat miring

<B>Teks</B>

Teks menjadi tebal

<SMALL>Teks</SMALL> Teks terlihat lebih kecil daripada ukuran normal <BIG>Teks</BIG>

Teks terlihat lebih besar dari ukuran normal <TT>Teks</TT>

Teks terlihat seperti ketikan mesin ketik <U>Teks</U>

Teks menjadi bergaris bawah

<SUB>Teks</SUB>

Teks menjadi subskrip

<SUP>Teks</SUP>

Teks menjadi superskrip

Tabel 1 . Daftar Tag Fisik

Penerapan penggunaan tag-tag pada tabel dapat dilihat pada program berikut :

BentukTeksfisik.html

<html>

<head><title>mengatur teks secara fisik </title></head>

<body>

<p><strike> strikethrough </strike></p>

<i>Teks Miring</i><br>

<b>Teks yang ditebalkan</b><br>

<small>Teks dengan tag small</><br> Teks Normal<br> <big>Teks dengan tag Big</big><br>

Teks Normal _subskrip<br> Teks Normal ^superskrip<br> <tt>Teks seperti mesin ketik</tt><br>

<u>Teks yang diberi garis bawah</u><br>

<b><u><i>Teks garis bawah, miring, tebal</u></i></b>

</body>

</html>

Pada tabel berikut ini merupakan contoh TAG yang digunakan untuk mengatur bentuk teks secara logis :

3.3. Penggunaan Tag Pre

Tag ini digunakan untuk menampilkan keadaan yang telah anda format di dalam kode HTML akan ditampilkan seperti itu pula di web browser. Untuk memperjelas kegunaan tag tersebut kerjakan latihan berikut :

Tagpre.html <html>

<head>

<title>praformat</title>

</head>

<body>

<h2>Daftar Harga Komputer :</h2>

<pre> Intel Pentium I

Intel Pentium II

Intel Pentium III

Intel Pentium IV – 1,7 ………. 3.000.000

</pre>

Harga sewaktu-waktu dapat berubah </body> </html>

3.4. Penggunaan Tag Blockquote

Paragraf/kutipan

diletakan dalam dokumen

yang panjang

umumnya

dengan menempatkan dalam tag <BLOCKQUOTE> … </BLOCKQUOTE>. Teks akan ditampilkan menyesesuaikan dengan ruangan dengan menempatkan dalam tag <BLOCKQUOTE> … </BLOCKQUOTE>. Teks akan ditampilkan menyesesuaikan dengan ruangan

Blockquote.html

<html>

<head>

<title>blockquote</title>

</head>

<body>

<h2>Pagi Di Kotaku :</h2> <blockquote>

Bulan yang sudah tidak bulat lagi tampak bersinar pucat di langit- langit bumi, mungkin inilah yang disebut bulan kes iangan, yah…!

karena memang mentaripun mulai terlihat sinarnya di ufuk timur pertanda pagi sudah tiba. Kalau kita berada di perkampungan atau di pinggiran hutan saat-saat seperti ini yang kita dengar adalah suara-suara binatang pagi, kicauan burung-burung menyambut fajar, dan mungkin desiran angin pagi yang menggugurkan embun nan jernih. Namun ditempat ini kicauan burung ataupun suara binatang pagi susah sekali terdengar. Yang sesekali terdengar hanyalah lolongan anjing meneriaki penarik gerobak sampah keliling yang hilir mudik mengangkut sampah yang tak kunjung habis, kicauan klakson mobil di jalanan, dan teriakan-teriakan mulut manusia mencari nafkah. Beginilah suasana pagi di kotaku. </blockquote>

Kotaku pagi ini </body> </html>

3.5. Penggunaan Tag Acronym

Tag Acronym digunakan untuk memberikan keterangan terhadap suatu teks yang dianggap merupakan singkatan atau juga bisa teks yang bukan singkatan tetapi memerlukan penjelasan tertentu. Untuk melihat singkatan atau keterangan terhadap suatu teks tertentu adalah dengan meletakan pointer mouse tepat berada di teks yang sudah kita berikan perintah tag Acronym, kemudian secara otomatis akan muncul sebuah keterangan yang terblok warna kuning dan letaknya biasanya berada di bawah teks tersebut.

Bentuk pendefinisian singkatan dan kepanjangan atau keterangan suatu istilah adalah sebagai berikut :

<ACRONYM TITLE = ”Kepanjangan”>Singkatan</ACRONYM>

Contoh lengkap penggunaan tag ini dapat dilihat pada kode-kode HTML berikut :

Acronym.html

<html>

<head>

<title>singkatan</title> </head>

<body>

<acronym title=”Televisi Republik Indonesia”>TVRI</acronym> adalah telivisi pemerintah, sedangkan <acronym title=”Televisi Pendidikan

Indonesia”>TPI</acronym> adalah telivisi swasta. </body>

</html>

3.6. Penggunaan Tag Font

Tag font digunakan untuk mengatur jenis, ukuran, maupun warna font. • Untuk menentukan jenis font, atribut font yang digunakan adalah Face.

Contoh : <font face = “arial”>teks yang ditampilkan</font>

• Untuk menentukan ukuran, atribut yang digunakan adalahSize.

Contoh : <font size = “10”>teks yang ditampilkan</font>

• Untuk menentukan warna, atribut yang digunakan Color.

Contoh : <font color = “blue”>teks yang ditampilkan</font>

Nama warna RGB Nama Warna RGB

Aqua

00FFFF Navy

C0C0C0

Tabel 3 . Daftar nama warna dan kode rgbnya

Font.html

<html>

<head>

<title>mengatur font html</title>

</head>

<body> <font face=”caurier” size=10 color=”green”> Ini adalah latihan

memberikan<br> efek font seperti : <br>

jenis font, ukuran, warna<br>

pada dokumen HTML

</font>

</body>

</html>

Selain pengaturan color font diatas terdapat juga tag untuk menentukan background warna dan textnya yaitu BGCOLOR dan TEXT, seperti terlihat dalam kode berikut :

Bgcolor.html

<html>

<head>

<title>singkatan</title>

</head> <body bgcolor=”black” text=”white”> Normal font<br>

<font color=”blue”>warna biru</font><br>

<font color=”red”>warna merah</font><br>

<font color=”green”>warna hijau</font>

</body>

</html>

3.7. Penggunaan Tag Basefont

Tag basefont berfungsi menentukan ukuran default font untuk seluruh halaman. Tatacara penulisan tag ini dapat dilihat pada kode html berikut ini

Basefont.html

<html>

<head>

<title>basefont</title>

</head>

<body> <basefont size=”5” face=”verdana” color=”pink”>

teks Normal<br> <font color=”blue”>Warna biru </font><br>

3.8. Penggunaan karakter Spesial

Karakter spesial disebut juga dengan entity yaitu karakter yang dalam pembuatannya menggunakan kode-kode tertentu. Pada HTML terdapat sejumlah simbol yang digunakan untuk memunculkan karakter-karakter khusus yang menerangkan suatu entitas karakter seperti β ataupun numerik seperti ¾. Untuk contoh lain dapat dilihat pada Tabel berikut ini :

Simbol HTML Simbol HTML Simbol HTML

Simbol HTML Ä

x × Ï

Ë TM Ë ï ï ™

Spasi  

Tabel 4 . Simbol dan kode HTML penggunaan Entitas Karakter dan Numerik

Hasil dari kode-kode tersebut sebagian dapat dilihat dalam kode program berikut :

Character.html

<html>

<head><title>char</title></head>

<body>

<h1>Messag Ë From Kahlil Gi ß ran</h1>

ß unga-bunga Padang<br>

Adalah Anak-anak kasih sang Mentari<br>

Dan © inta Kasih Semesta Alam, & <br> Anak-anak Manusia Adalah<br> Bunga-bunga © inta & Kasih Sayang<br><hr>

© 2005<br>

»<br>

«<br>

÷<br>

ä

</body>

</html>

Latihan Soal :

Sebutkan dan Jelaskan fungsi Tag untuk mengatur teks pada dokumen HTML, yang tidak ada pada pembahasan di bab ini dari berbagai sumber. Dengan menggunakan kode-kode HTML, buat tampilan di browser seperti gambar

berikut ini :

Selamat Mengerjakan … !

BAB 4 Bullet and Numbering pada Dokumen HTML

Tujuan Pembelajaran : - Bisa menggunakan tag yang berfungsi untuk membuat Bullet dalam berbagai bentuk dan cara. - Bisa menggunakan tag yang berfungsi untuk membuat Numbering dalam berbagai bentuk dan cara.

4.1. Pendahuluan

Pada tampilan dokumen HTML terkadang kita menginginkan terlihat lebih unik dan terlihat menarik. Selain itu mungkin kita hanya ingin memperjelas informasi tertentu, dalam hal ini misalnya kita ingin informasi tersebut diletakan pada poin- poin khusus atau list-list khusus. Untuk membuat poin atau list tersebut pada bab ini kita menggunakan dua model, yaitu Bullet dan Numbering. Bullet dan Numbering tersebut merupakan simbol atau karakter khusus yang diletakkan didepan suatu teks tertentu.

4.2. Daftar Item dengan Bullet

Pada HTML untuk membuat Bullet atau yang sering dikenal dengan tanda daftar list, kita dapat menggunakan tag <UL>. Dan untuk mengakhiri penggunaan tag <UL> diakhir teks yang diberi tanda bullet diberikan tanda </UL>. cara penulisan pada dokumen HTML dapat dilihat di bawah ini :

Bullet.html

<html>

<head>

<title>pemakaian tag ul</title>

</head>

<body>

<h2>Daftar Nama Ikan :</h2>

<ul> Louhan<br> Sepat<br> Betok<br> Nila<br> Lele Dumbo

Pada netscape navigator, jenis bullet dapat ditentukan melalui atribut type pada tag <li>. Kemungkinan nilai untuk type diperlihatkan pada kode-kode dan hasil program berikut :

Bullet2.html

<html>

<head>

<title>pemakaian tag ul</title>

</head>

<body>

<h2>Daftar type li :</h2>

<ul>

<li>hasil li tanpa diberi atribut type</li><br>

<li type="circle">Circle<br>

<li type="disk">Disk<br>

<li type="square">Square<br>

Adakalanya daftar suatu item dikehendaki agar ditampilkan dengan nomor urut. Dengan menggunakan tag <OL>, pemberian nomor dapat diotomatiskan tanpa anda harus menuliskannya. Untuk lebih jelasnya kerjakan latihan berikut :

Numbering.html

<html>

<head>

<title>pemakaian tag ol</title>

</head>

<body>

<b>Cara Memasak Mie Instant</b>

<ol>

<li>Masak air di panci sampai mendidih<br>

<li>Buka pembukus mie instant<br>

<li>Masukan Mie + bumbu kedalam Panci<br>

<li>Tunggu +- 3 menit<br>

<li>Mie siap dihidangkan

4.4. Daftar Definisi

HTML menyediakan jenis daftar khusus yang disebut daftar definisi (definition list). Daftar ini menyediakan tampilan dengan format mirip kamus, dengan definisi suatu istilah diletakan agak menjorok ke kanan. Tiga buah pasangan tag yang terkait dengan daftar definisi dapat dilihat pada HTML menyediakan jenis daftar khusus yang disebut daftar definisi (definition list). Daftar ini menyediakan tampilan dengan format mirip kamus, dengan definisi suatu istilah diletakan agak menjorok ke kanan. Tiga buah pasangan tag yang terkait dengan daftar definisi dapat dilihat pada

Tag Catatan

<DD>…<DD> Digunakan untuk menyatakan wadah bagi definisi istilah <DT>…</DT> Digunakan untuk menyatakan wadah bagi istilah yang akan

didefinisikan

<DL>…</DL> Digunakan untuk menyatakan wadah bagi daftar

Tabel 5 . Daftar Tag Definition List Sebagai contoh perhatikan kode berikut :

Definisi.html

<html>

<head>

<title>definisi</title>

</head>

<body>

<b>Kamus Teknologi Informasi</b>

<dl>

<dt>HTML</dt>

<dd>Bahasa yang digunakan untuk menyusun web</dd>

<dt>HTTP</dt>

<dd>Protokol yang dipakai untuk mentransfer HTML</dd>

</dl>

</body>

</html>

Latihan Soal :

Dengan menggunakan kode-kode HTML, buat tampilan dokumen HTML seperti gambar berikut ini :

Dengan menggunakan kode-kode HTML, buat tampilan dokumen HTML seperti gambar berikut ini :

Selamat Mengerjakan … !

BAB 5 Menampilkan Gambar

Tujuan Pembelajaran :

- Dapat menampilkan gambar pada dokumen HTML dengan menggunakan tag tertentu. - Bisa memformat tampilan gambar dalam berbagai bentuk dan ukuran serta tatacara peletakan pada naskah/dokumen HTML sehingga diperoleh tampilan web yang komplek.

5.1. Pendahuluan

Untuk menambah daya tarik tampilan dokumen HTML kita, yang harus dilakukan adalah selain bisa menampilkan informasi yang menarik dan memformat teks juga dibutuhkan unsur lain yaitu adanya gambar. Selain itu, adanya gambar ditampilan dokumen HTML kita mungkin akan menunjang atau memperjelas terhadap informasi yang ditampilkan. Untuk menampilkan gambar tersebut yang diperlukan selain gambar itu sendiri, kita juga membutuhkan tag-tag HTML yang berperan untuk menampilkan gambar. Pada bab ini akan dipelajari : Mengenal jenis gambar, tag yang digunakan dalam menampilkan gambar, memformat gambar, menempatkan teks pada gambar, membuat bingkai pada gambar dan menyediakan teks alternatif.

5.2. Mengenal Jenis Gambar.

Tipe gambar banyak jumlahnya, tetapi tidak semua tipe gambar dapat ditampilkan dalam dokumen HTML. Sebelum kita mulai belajar menampilkan gambar kedalam tampilan dokumen kita, sebaiknya kita mengenal tipe gambar yang sering atau umum digunakan pada sebuah dokumen HTML agar tidak terjadi masalah pada tampilan kita di browser nantinya. Berikut ini dapat dilihat beberapa format atau tipe gambar yang dapat digunakan, namun ini hanya sebagian tipe gambar saja.

Jenis Gambar Ekstensi Kepanjangan Ekstensi JPEG

.jpg/.jpeg Joint Photographic Expert Group TIFF/TIF

Tagged Image File Format PNG

.tif

Portable network Graphics GIF

.png

.gif

Graphis Interchange Format

Tabel 6. Daftar jenis gambar

5.3. Menampilkan Gambar

Tag yang digunakan untuk menampilkan gambar pada dokumen HTML adalah <img>. Atribut yang menyertai tag ini banyak sekali, tetapi tag yang harus selalu disertakan hanya ada satu, yaitu atribut src. Bentuk penulisan dari tag <img> adalah sebagai berikut :

<IMG SRC = “nama_gambar”>

Kode berikut memberikan contoh pemakaian tag <IMG> :

Gambar.html

<html>

<head>

<title>gambar</title>

<body> Dragon Ball <img src = "C:\gambar\goten.jpg">

</body>

</html>

Keterangan : setelah anda menuliskan kode HTML di atas, gambar yang diinginkan akan muncul apabila di drive tujuan yang ditulis tersebut ada file gambar “ goten.jpg “ pada drive c: dan folder gambar. Pada baris program <img

src="C:\gambar\goten.jpg">, anda bisa merubah lokasi yang ada sesuai dengan lokasi letak gambar yang diinginkan yang ada pada komputer masing- masing.

5.4. Background Gambar

Background atau latar belakang sebuah web selain menggunakan warna kita juga bisa menggunakan background berupa gambar. hal ini diperlukan untuk menambah daya tarik sebuah dokumen yang dibuat. Namun untuk membuat background yang berupa gambar kita harus pandai memilih gambar yang digunakan, jangan sampai dengan adanya gambar membuat orang yang melihat menjadi kurang nyaman. Untuk menyertakan suatu gambar sebagai latar belakang, anda bisa menggunakan atribut background pada tag <img>. Bentuknya sebagai berikut :

<body background = “nama berkas gambar”>

Contoh kode HTML yang menggunakan gambar latar belakang dapat dilihat pada kode berikut :

Background.html

<html>

<head>

<title>gambar latarbelakang</title>

<body background="C:\gambar\clamp02.jpg">

</body>

</html>

5.5. Penggunaan Atribut Pada Tag

5.5.1. Atribut Border

Untuk memberikan border/bingkai pada sebuah gambar, kita dapat menggunakan atribut border pada tag <img>. Untuk menampilkan border tersebut caranya adalah dengan memberikan bilangan pada atribut border, misalnya angka 1, 2, 3, dan seterusnya sesuai dengan yang kita inginkan. Nilai pada atribut tersebut menyatakan ketebalan bingkai dalam satuan piksel. Kode berikut memberikan contoh penggunaan atribut border :

<img src="D:\gambar\logos\test.jpg" border=5>

5.5.2. Atribut Pengatur Teks Terhadap Gambar

Pada tag <IMG> terdapat atribut bernama align yang digunakan untuk mengatur penempatan teks terhadap gambar. Nilai yang terdapat pada atribut align adalah :

• BOTTOM : Teks terletak pada bagian bawah

• MIDDLE : Teks terletak di tengah-tengah

• TOP

: Teks terletak di bagian atas

Untuk lebih jelasnya perhatikan penulisan kode berikut ini :

Letakteks.html

<html>

<head>

<title>peletakan teks</title>

<body>

Dragon Balls

<img src = "C:\gambar\ clamp02.jpg" align=”top”> </body>

</html>

Pada atribut align, top dapat diganti dengan middle dan bottom untuk mendapatkan posisi yang kita inginkan.

5.5.3. Menyediakan Teks Alternatif

Gambar yang telah ditampilkan ada kemungkinan tidak bisa muncul atau terlihat pada kondisi tertentu, misalnya browser yang digunakan tidak mendukung adanya gambar. Untuk mengantisipasi hal seperti ini, dapat diberikan teks alternatif sebagai pengganti gambar. Caranya adalah dengan memberikan atribut ALT pada tag <IMG>. Sebagai contoh, perhatikan kode berikut :

Alternatif.html

<html>

<head>

<title>membuat teks alternatif</title>

<body>

halo my friend

<img src = "..\clamp02.jpg"

alt ="(gambar dian sastro)" align ="middle">

ini adalah gambar yang

telah diberi alternatif teks<br>

selamat mencoba

</body>

</html>

5.5.4. Atribut Untuk Mengatur Ukuran gambar

Ukuran gambar yang tampil umumnya menyesuaikan pada keadaan asli gambar tersebut. Bila kita menginkan perubahan ukuran gambar tersebut sesuai dengan area yang kita sediakan, kita bisa memberikan atribut pada tag <IMG> yang terdiri dari atribut height dan width.

• HEIGHT untuk mengatur tinggi gambar

• WIDTH untuk mengatur lebar gambar

Untuk mengatur ukuran gambar tersebut kita harus memberikan nilai tertentu pada kedua atribut tersebut. Nilai yang diberikan pada kedua atribut berupa nilai dengan satuan piksel. Untuk mengetahui penggunaan kedua atribut tersebut perhatikan pada baris program berikut :

<img src = "C:\gambar\dian\Dian.jpg" ><br>

<img src = "C:\gambar\dian\Dian.jpg" height=100 width=100 >

<img src = "C:\gambar\dian\Dian.jpg" height=50 width=50 >

5.5.5. Atribut Untuk mengatur Ruang Gambar

Atribut yang akan digunakan dalam hal ini adalah Atribut VSPACE dan HSPACE. Atribut ini dapat digunakan untuk mengatur jarak gambar terhadap teks. Untuk memberikan jarak secara vertikal sesuai dengan nilai Atribut yang akan digunakan dalam hal ini adalah Atribut VSPACE dan HSPACE. Atribut ini dapat digunakan untuk mengatur jarak gambar terhadap teks. Untuk memberikan jarak secara vertikal sesuai dengan nilai

<img src="C:\gambar\dian\Dragon.jpg"

hspace="25" align="left"> <img src="C:\gambar\dian\Dragon.jpg"

vspace="25" align="left">

5.6. Gambar Animasi

Jenis tampilan gambar ada bermacam-macam, ada gambar yang diam dan ada gambar yang bergerak. Gambar bergerak biasanya disebut dengan gambar animasi. Format gif merupakan format gambar bergerak yang sering digunakan dalam dokumen HTML. Gambar animasi dengan format gif, dapat dibuat dengan software-software pembuat animasi misalnya Macromedia Flash, Adobe Premier, Ulead Gif Animator, dsb. Selain menggunakan ekstensi .gif, juga ekstensi lain juga bisa digunakan salah satunya adalah yang berekstensi .swf yang dihasilkan oleh software keluaran macromedia yaitu Macromedia Flash. Untuk menampilkan gambar yang berbentuk animasi dalam browser caranya sama seperti anda mengetikan kode-kode untuk meletakan gambar yang bukan animasi. untuk jelasnya lihat kode-kode berikut :

Animasi.html

<html>

<head>

<title>gambar animasi</title></head>

<body> <img src=”…/gambar/anima.gif”>

</body>

</html>

Latihan Soal :

Buatlah sebuah halaman web yang disertai dengan background gambar.

Dengan menggunakan kode-kode HTML, buat tampilan halaman seperti gambar- gambar berikut ini :

Ukuran normal

Selamat Mengerjakan … !

BAB 6 Menggunakan Tabel

Tujuan Pembelajaran : - Dapat membuat dan menampilkan informasi yang berbentuk tabel pada sebuah halaman web. - Bisa memformat tabel dalam berbagai bentuk. - Bisa memanipulasi tabel untuk mengatur bentuk template suatu halaman web.

6.1. Pendahuluan

Untuk mendapatkan tampilan yang lebih menarik diperlukan perencanaan yang baik. Salah satunya adalah diperlukan penguasaan terhadap kode-kode program HTML serta tepatnya penggunaan dari kode yang ada tersebut. Semua hal tersebut harus diperhatikan secara benar supaya hasilnya terlihat lebih profesional.

Kode-kode HTML yang digunakan untuk mendapatkan suatu tampilan dokumen HTML jumlahnya banyak, seperti yang sebagian besar telah kita pelajari pada bab-bab sebelumnya. Pada bab ini akan dibahas tentang teknik-teknik pembuatan tabel pada dokumen HTML. Tabel dapat digunakan untuk membuat suatu bentuk informasi yang ditampilkan dalam bentuk kotak-kotak, yang biasanya terdiri kolom dan baris. Selain itu dengan tabel kita bisa mengatur tampilan yang ada pada sebuah halaman web kedalam bentuk tampilan tertentu.

6.2. Tag Pada Tabel

Tabel biasa digunakan dalam pembuatan sebuah halaman web untuk memperindah tampilan ataupun untuk mengatur agar informasi dapat disajikan dengan tampilan yang enak dilihat dan dibaca. Tag-tag yang digunakan untuk pembuatan tabel dapat dilihat pada tabel berikut :

Tag Catatan

<TABLE> …</TABLE> Mengawali dan mengakiri sebuah tabel <CAPTION>…</CAPTION> Menentukan judul pada tabel <TD>…</TD>

Membuat sebuah sel data

<TH>…</TH>

Membuat judul kolom

<TR>…<TR>

Membuat sebuah baris dalam tabel

Tabel 7. Daftar Tag Untuk Tabel

Contoh sederhana penggunanan tabel dapat dilihat pada kode berikut :

Tabel1.html

<html>

<head>

<title>tabel</title>

<caption>Daftar Harga Buah </caption>

<tr><th>Nama Buah</th><th>

Harga/Kg</th></tr>

<tr><td>Jeruk</td><td>7.500</td></tr>

<tr><td>Anggur</td><td>15.000</td></tr>

<tr><td>Aple</td><td>8.500</td></tr>

<tr><td>Peer</td><td>10.500</td></tr>

<tr><td>Melon</td><td>6.500</td></tr>

6.3. Garis pada Tabel

I n f o r m a s i yang ditampilkan pada sebuah tabel bentuknya bervariasi, pada tabelnya ada yang menggunakan garis dan ada yang tidak. Untuk mengatur apakah garis tabel dimunculkan atau tidak kita bisa menggunakan atribut border pada tag table. Adapun bentuk penulisan tag ini adalah <table border = “bilangan”>. Kalau border tidak disertakan dalam tag <table>, nilai border dianggap sama dengan nol, maka hasil yang diperoleh garis tidak akan ditampilkan. Dengan kata lain, <table> sama dengan kita menggunakan perintah <table border=”0”>. Contoh dalam bentuk program sebagai berikut :

Tabel2.html

<html>

<head>

<title>tabel</title>

</head>

<body> <table border = “1”>

<caption>Daftar Harga Buah </caption>

<tr><th>Nama Buah</th><th>

Harga/Kg</th></tr>

<tr><td>Jeruk</td><td>7.500</td></tr>

<tr><td>Anggur</td><td>15.000</td></tr>

<tr><td>Aple</td><td>8.500</td></tr> <tr><td>Peer</td><td>10.500</td></tr>

<tr><td>Melon</td><td>6.500</td></tr>

6.4. Judul Table

Biasanya untuk membuat sebuah tabel selalu disertai dengan judul tabel. Judul tabel letaknya bisa di atas tabel atau di bawah tabel. Untuk membuat judul tabel tag yang digunakan adalah <caption>. Apabila anda hanya menggunakan tag <caption> dan diakhiri dengan penutup </caption> maka judul secara otomatis berada di atas tabel. Sedangkan untuk membuat judul yang letaknya di bawah tabel kita tinggal menambahkan atribut align yang diberikan nilai “botom”. Bentuk penulisannya dapat dilihat pada satu baris kode berikut ini : -

Kode untuk membuat judul di atas tabel

<caption>Daftar Harga Buah </caption>

- Kode untuk membuat judul di bawah tabel

<caption align=”bottom”>Daftar Harga Buah </caption>

6.5. Warna Latar belakang Tabel

Tabel yang dibuat tidak mutlak hanya berwarna putih/transparan dengan garis berwarna hitam saja, melainkan warna background tabel juga bisa berubah. Untuk menambahkan warna latar belakang tersebut tabel, anda bisa menggunakan atribut bgcolor pada tag <table>. Untuk pemberian nilai(warna) pada atribut bgcolor dapat dilihat kembali pada tabel warna yang sudah dibahas pada bab sebelumnya. Cara penulisan kodenya dapat diperhatikan pada penggalan kode program berikut ini. ……….

<table bgcolor =”Green” border = “3”>

<caption>judul tabel

</caption>

<tr><th>……………………………</th><th>……………………………/Kg</th></tr> <tr><td>……………………………</td><td>……………………………</td></tr> <tr><td>……………………………</td><td>……………………………</td></tr>

</table>

Kode program di atas digunakan untuk memberikan warna background/seluruh tabel. Sedangkan apabila kita hanya ingin memberikan warna pada sebuah sel saja atau warna teks dalam sebuah tabel, penulisan kode program ddapat dilihat pada penggalan kode program berikut ini :

<table bgcolor =”blue” border = “1”>

<tr><td>kolom 1</td><td>kolom 2</td></tr>

<tr> <td bgcolor=”green”>kotak hijau</td>

<td><font colo

r =”white”>teks putih</td>

6.6. Pengaturan Teks Pada Tabel

Untuk mengatur peletakan teks di dalam sebuah sel, kita dapat menggunakan atribut “VALIGN” yang dapat diletakan pada tag <td>. Posisinya dapat diatur menjadi atas, tengah dan bawah. Untuk menentukan posisi tersebut kita harus memberikan nilai tertentu pada atribut valign. Nilai yang dapat diberikan adalah : “top” untuk posisi atas, “Middle” untuk posisi tengah dan “Bottom” untuk posisi bawah. Contoh kode

HTMLnya : …………………………

<table border =”1” height=”200”> <tr><td valign=”top”>Valign adalah Top</td></tr> <tr><td valign=”Middle”>Valign adalah Middle</td></tr> <tr><td valign=”Bottom”>Valign adalah Bottom</td></tr>

6.7. Penggabungan Sel

Dengan menggunakan kode-kode HTML, sejumlah baris dan kolom pada tabel dapat digabungkan. Untuk menggabungkan sel baik itu baris maupun kolom, kita hanya menambahkan atribut tertentu pada tag <td> yang ada pada tabel. Atribut rowspan digunakan untuk menggabungkan beberapa baris, sedangkan atribut colspan digunakan untuk menggabungkan kolom. Penggunaan rowspan dan colspan dapat dilihat pada baris program berikut : rowspan

<table border = "1">

<caption>judul kolom</caption>

<tr><Td rowspan = "3">brs1gabung kol1</td><td> brs1 kol2</td></tr>

<tr><td> brs2 kol2</td></tr>

<tr><td> brs3 kol2</td></tr>

<tr><td rowspan = "4"> brs4gabung kol1</td><td> brs5 kol2</td></tr>

<tr><td> brs6 kol2</td></tr>

<tr><td> brs7 kol2</td></tr>

<tr><td> brs8 kol2</td></tr>

</table>

<table border = "1">

<caption>Daftar Harga </caption>

<tr><th colspan = "2">brs 1 kol 1&2</th></tr>

<tr><td>brs2 kol1</td><td> brs2 kol2</td></tr> <tr><td>brs3 kol1</td><td> brs3 kol2</td></tr> <tr><td>brs4 kol1</td><td> brs3 kol2</td></tr> <tr><th colspan = "2"> brs 5 kol 1&2</th></tr> <tr><td> brs6 kol1</td><td> brs6 kol2</td></tr> <tr><td> brs7 kol1</td><td> brs7 kol2</td></tr> <tr><td> brs8 kol1</td><td> brs8 kol2</td></tr> </table>

Pada penggunaannya rowspan dan colspan juga dapat digabungkan sekaligus dalam pembuatan tabel.

6.8. Alignment Tabel

Untuk mengatur alignment atau perataan teks dalam sebuah tabel, dapat digunakan atribut align. Atribut tersebut dapat digunakan pada <tr>, <th> dan <td>. Untuk mengatur perataannya, baik rata kanan, kiri dan rata tengah kita harus memberikan nilai tertentu pada atribut align. Nilai yang ada pada atribut ini adalah “left” untuk rata kiri, “right” untuk rata kanan dan “center” untuk rata tengah.. Untuk lebih jelasnya lihat pada penggalan kode program berikut : Penggunaan pada <TH>

<th align=”left”>Teks akan menjadi rata kiri</th> <th align=”center”> Teks akan menjadi rata tengah </th> <th align=”right”> Teks akan menjadi rata kanan </th>

Penggunaan pada <TD>

<td align=”left”>Teks akan menjadi rata kiri</td> <td align=”center”> Teks akan menjadi rata tengah </td>

<td align=”right”> Teks akan menjadi rata kanan </td>

6.9. Pengaturan Sel Pada Tabel

Untuk mengatur tinggi sel pada sebuah tabel, caranya kita hanya menambahkan atribut “HEIGHT” pada tag <table> dan memberikan nilai pada atribut tersebut dengan sebuah bilangan bulat. Nilai atribut yang diberikan dinyatakan dalam satuan pixel. Tata cara penulisan kode HTMLnya perhatikan kode-kode berikut ini :

<table border = "1" height=”150”>

<tr><th>nama</th><th>Usia</th></tr>

<tr><td>Larnoo</td><td>24</td></tr>

<tr><td>Nurul</td><td>22</td></tr>

<tr><td>Friend</td><td>21</td></tr>

</table>

Bentuk di atas digunakan untuk memberikan tinggi secara keseluruhan pada tabel. Sedangkan untuk memberikan ukuran tinggi pada baris/sel tertentu kita bisa memberikan atribut height pada tag <tr> saja. Seperti terlihat pada penggalan kode HTML berikut ini :

<table border = 1>

<tr><th height=50>Nama</th><th>Usia</th></tr>

<tr><td>Larnoo</td><td>24</td></tr>

<tr><td>Nurul</td><td>22</td></tr>

<tr><td>Yoto</td><td>21</td></tr>

</table>

Untuk mengatur lebar sel dapat digunakan atribut “WIDTH”. Pemberian nilai pada atribut ini selain bisa ditentukan dengan bilangan dengan satuan pixel juga bisa diberikan dalam persen (%). Untuk penggunaannya dapat dilihat pada baris program berikut ini : ……………………

<table border = "1" width="50%">

<tr><th height="50">Nama</th><th>Usia</th></tr>

<tr><td>Larnoo</td><td>24</td></tr>

<tr><td>Nurul</td><td>22</td></tr>

<tr><td>Yoto</td><td>21</td></tr>

</table> ……………………

WIDTH juga dapat digunakan pada sel tertentu, dengan cara menyebutkannya pada tag <TD> atau <TH>. Contoh : ……………………

<table border = "1" width="50%">

<tr><th height="50">nama</th><th>Usia</th></tr> <tr><td width=”200”>Larnoo</td><td>24</td></tr>

<tr><td>Nurul</td><td>22</td></tr>

<tr><td>Friend</td><td>21</td></tr>

</table> ……………………

6.10. Pengaturan Jarak Tabel

Untuk mengatur jarak teks terhadap tepi kiri dan untuk mengatur jarak sel terhadap tepi dalam

bingkaitabel, kita dapat menggunakan atribut “Cellpadding”

dan “Cellspacing”. Cara penggunaannya dapat dilihat pada kode-kode berikut ini :

……………………

<table border = "5" cellspacing="20" cellpadding="10" >

<caption>Cellpadding = 10 dan cellspacing=20</caption>

<tr><th>Nama</th><th>Usia</th></tr>

<tr><td>Larnoo</td><td>24</td></tr>

<tr><td>Nurul</td><td>22</td></tr>

<tr><td>Yoto</td><td>21</td></tr>

</table> ……………………

6.11. Tabel dan Gambar