Nama Kelas e-mail

: : :

KATA PENGANTAR Ucap Syukur Alhamdulillah penyusun panjatkan kehadirat Allah SWT yang telah melimpahkan segala kemudahan bagi penyusun untuk menyelesaikan buku ini. Buku ini dimaksudkan sebagai buku panduan siswa dalam melaksanakan praktek mata pelajaran TIK kelas IX. Dalam buku ini disajikan teori ringkas untuk menyusun dokumen html, kemudian dilanjutkan dengan penyajian pedoman praktek untuk menerapkan teori tersebut. Hasil tampilan dari dokumen html yang telah disusun dapat dilihat menggunakan web browser, sehingga untukmengatur dan memperbaiki tampilannya dapat dilakukan dengan mengedit langsung dokumen html tersebut. Harapan penyusun, buku ini dapat membantu siswa kelas IX untuk memahami langkah-langkah dalam penyusunan dokumen html, kemudian dengan modal pengetahuan tersebut dapat dikembangkan lebih lanjut sehingga akan muncul webmasters (ahli pembuat halaman web) yang handal dan berkualitas. amin. Tak lupa penyusun mengucapkan banyak terima kasih kepada : 1. Sdr. Nurhasyim dan Artivisi Media (http://courseware. artivisi.com) dalam e-book yang berjudul "HTML dan CSS" yang menginpsirasi penyusun. 2. 3. Drs. Nurhasan, selaku Kepala SMP Negeri 23 Kota Bekasi yang telah memberikan ijin penyusun. Semua pihak yang telah membantu penyusun. Atas bantuan dari semua pihak, penyusun mengucapkan terima kasih yang sebesar-besarnya, semoga bantuan tersebut menjadi amal bakti dan mendapat balasan dari Allah SWT yang setimpal. amin Bekasi, Juli 2009 Penyusun

DAFTAR ISI KATA PENGANTAR............................................................................................... DAFTAR ISI............................................................................................................. BAB I DEFINISI INTERNET DAN WEB .............................................................. A. i ii 1

BAB I DEFINISI INTERNET DAN WEB

A. Pengertian Internet Pada perkembangan ilmu pengetahuan dewasa ini telah memasuki era informasi dan komunikasi yang melibatkan banyak sekali disiplin ilmu dengan data-data yang sangat besar dan saling terkait dalam waktu yang singkat dan bersamaan. Kebutuhan akan hal tersebut dapat dilakukan dengan menggunakan bantuan Komputer. Pada banyak perusahaan dan organisasi hubungan antar komputer baik dalam satu gedung/ruangan maupun antar wilayah bahkan negara sangat dibutuhkan. Dari kebutuhan akan hal ini munculah teknologi yang disebut dengan intranet dan internet. Intranet adalah jaringan komputer dari suatu perusahaan/organisasi yang tidak dapat diakses oleh umum dan hanya dapat diakses oleh komputer yang berada dalam LAN (Local Area Network) perusahaan atau organisasi tersebut. Sedangkan Internet adalah jaringan komputer global dari seluruh dunia yang tergabung dalam WAN (Wide Area Network). WAN adalah jaringan komputer pribadi dan LAN yang terhubung melalui sistem komunikasi. Menggunakan internet kita dapat mencari dan memberi informasi baik berupa teks, gambar, maupun video. Selain itu kita dapat juga berhubungan dengan teman melalui email (electronic mail = surat elektronik) , video conference (percakapan secara langsung (video dan audio)), chatting dan lain-lain. Perkembangan terakhir dengan melalui internet kita dapat mendapatkan program-program gratis (freeware) yang mungkin akan sangat berguna. Untuk dapat mengakses internet kita membutuhkan perangkat-perangkat sebagai berikut, yaitu : 1. Perangkat utama (Komputer) a. Personal Komputer (PC) Perangkat keras pada komputer. Yang termasuk dalam hardware adalah monitor, motherboard, RAM, harddisk, CD/DVD-ROM. b. Software Perangkat Lunak yang memungkinkan komputer mengerjakan hal-hal yang bersifat khusus, dalam hal ini yang berkaitan dengan internet. Yang termasuk kedalam software untuk koneksi internet adalah Operating System (Software yang melakukan tugas-tugas untuk menjalankan komputer dan mengatur hubungan antara software dan hardware, contoh DOS, Windows, Linux, Apple dll.), Web browser (Program Aplikasi yang berfungsi untuk pengaksesan dokumen HTML(Hypertext Markup Language) dari web server dengan format Hypertext dan menjadikannya sebagai tampilan web page. Contohnya Opera, Firefox, Internet Explorer, Netscape, Navigator dll c. Modem (Modulator Demodulator) Pada umumnya jalur transmisi menyalurkan data dalam bentuk analog, sedangkan data yang dihasilkan oleh komputer adalah data yang berbentuk digital, untuk merubah data

tersebut menjadi data dalam bentuk analog maka diperlukan sebuah modem. Diujung yang lain, informasi analog ini dikonversi ke bentuk digital. Sebagai contoh Sebuah komputer A dengan modem A dihubungkan melalui line telepon ke komputer B dengan modem B, pada saat komputer A mengirimkan data ke komputer B modem A berfungsi sebagai pengkonversi sinyal digital ke analog sedangkan modem B berfungsi sebagai pengkonversi sinyal analog ke digital, dan sebaliknya jika komputer B mngirimkan data ke komputer A, modem B berfungsi sebagai pengkonversi sinyal digital ke analog dan modem A berfungsi sebagai pengkonversi sinyal analog ke digital. Modem adalah rangkaian elektronik yang digunakan untuk menerima maupun mengirim data dari satu komputer ke komputer lainnya melalui saluran telepon, gelombang radio, serat optik, gelombang mikro(Microwave), Kabel listrik (dalam pengembangan). Menurut Fungsinya Modem adalah perangkat yang mampu menerjemahkan/mengonversi informasi digital menjadi sinyal analog dan sebaliknya, untuk bisa dikirimkan melalui jalur transmisi. Secara fisik modem dapat dibedakan menjadi dua yaitu : a. Modem Internal ( Modem yang terpasang langsung didalam CPU. Contoh modem PCI ) b. Modem Eksternal ( Modem yang letaknya diluar kotak CPU. Contoh modem CDMA, modem GSM ) 2. Jaringan ISP ( Internet Service Provider ) ISP adalah suatu jasa sambungan yang menyediakan layanan akses internet. Contoh Telkomnet instant, Lintasarta, Indosat M2 dll. B. Pengertian WEB WEB atau selengkapnya disebut WWW/3W ( World Wide Web ) adalah sebuah koleksi hubungan antar dokumen-dokumen yang disimpan di internet berbasis hypertext dengan menggunakan protocol HTTP, FTP, Gopher dan Telnet. WEB dikembangkan pertama kali dilaboratorium CERN (Laboratorium Fisika Partikel Eropa) di Geneva, Swiss. Dan sekarang diatur oleh Word Wide Web Consortium (W3C). Pada perkembangannya saat ini web tidak hanya berfungsi sebagai media untuk mencari informasi, tetapi juga dapat digunakan oleh perusahaanperusahaan di seluruh dunia untuk memperkenalkan perusahaan dan produk mereka. Pengguna internet bisa memanfaatkan berbagai macam informasi dengan biaya yang murah tanpa harus datang ketempatnya langsung. Setiap dokumen pada www ditulis menggunakan suatu format standar bahasa markup yang disebut HTML 3.2 (Hipertext Markup Language 3.2) dikembangkan oleh CERN. WWW bekerja berdasarkan pada tiga mekanisme berikut: 1. Protocol utama yang digunakan untuk berkomunikasi pada jaringan komputer. HTTP adalah Protocol utama disamping File Transfer Protocol (FTP), Gopher dan Telnet.

2. Alamat www memiliki aturan standar penamaan alamat web yaitu URL (Uniform Resource Locator) 3. HTML digunakan untuk membuat dokumen yang bisa diakses melalui web. Dari definisi diatas dapat kita ambil kesimpulan bahwa pengertian internet tidak sama dengan web, memang terdapat keterkaitan antara keduanya tetapi konsepnya tetap berbeda. Internet berhubungan dengan perangkat keras sedangkan web lebih ke perangkat lunaknya. Soal-soal Latihan : 1. Salah satu manfaat utama penggunaan Komputer adalah ... a. Membuat surat menyurat dalam jumlah yang banyak c. Mengedit naskah b. Mempercepat pengolahan data yang berukuran besar d. Melakukan perhitungan 2. Jaringan komputer yang tidak dapat diakses oleh umum disebut ... a. Intranet b. Internet c. Infonet d. Network 3. LAN kependekan dari ... a. Local Area Netscape c. Local Area Network b. Line Area Network d. Line Area Netscape 4. Komputer yang terkoneksi di dalam Internet, terhubung dengan bantuan .... a. Sistem jaringan b. Sistem interkoneksi c. Sistem Informasi d. Sistem komunikasi 5. Software berikut yang bukan merupakan web browser adalah ... a. Opera b. Firefox c. Linux d. Netscape 6. Hardware yang berfungsi mengkonversi informasi digital menjadi analog atau sebaliknya disebut .... a. Modem b. VGA card c. RAM d. Harddisk 7. Perusahaan yang menyediakan jasa sambungan untuk mengakses layanan internet disebut ... a. GSM b. ISP c. Telkomnet d. Intranet 8. Hubungan antar dokumen yang disimpan di Internet yang berbasis hypertext dengan menggunakan protocol tertentu disebut ... a. HTTP b. Telnet c. W3C d. 3W 9. Aturan standar penamaan alamat web disebut ... a. http b. www c. URL d. HTML 10. Terdapat beberapa protocol yang digunakan untuk berkomunikasi dalam internet. Berikut ini yang bukan merupakan protocol dalam berkomunikasi pada jaringan komputer adalah ... a. Telnet b. Telkomnet c. Speedy d. Indosat M2

BAB II PENGANTAR HTML A. Pengertian HTML Pada saat kita mengakses sebuah dokumen web, sebenarnya kita mengakses dokumen yang dibuat oleh seorang atau sekelompok orang dalam tim webmasters yang ditulis dalam format file HTML. Kemudian dokumen dalam format html tersebut diubah menjadi sebuah tampilan web page oleh web browser, sehingga yang kita lihat adalah sebuah tampilan yang menarik dan bukan sebuah tampilan yang berisi barisan-barisan kode perintah pada penulisan kode html. HTML berfungsi sebagai : a. Kode perintah untuk menentukan tata letak dokumen seperti jenis huruf, gambar, dan komponen dokumen lainnya. b. Perintah untuk menentukan hubungan ke dokumen lain. HTML merupakan suatu bahasa komputer yang termasuk dalam kategori SGML (Standard Generalized Markup Language) dimana bentuknya merupakan file standar ASCII yang berisi kodekode untuk mengatur dokumen. File html dapat dibuat dengan menggunakan program editor biasa seperti editor dari DOS, atau Notepad dari Microsoft Windows, Ms Word dsb. HTML adalah bahasa yang digunakan untuk menyusun dokumen web berbasiskan teks yang diterjemahkan/ditampilkan oleh browser. Jika kita ingin menampilkan sebuah informasi di internet, maka urutan kerja yang harus kita lakukan adalah (1) membuat kode perintah tentang informasi tersebut dalam format file html, (2) menempatkan file html tersebut dalam situs yang kita miliki ( upload), (3) web browser dapat menampilkan informasi yang kita berikan tersebut dengan cara mengakses situs yang kita miliki. B. Struktur HTML Untuk membuat file html kita antara lain dapat menggunakan software Notepad yang tersedia dalam OS Windows. Cara mengaktifkan notepad adalah : klik start, klik program, klik acessoris, klik notepad. Setelah Notepad aktif, barulah kita mulai menyusun kode-kode perintah html. Langkah terakhir adalah menyimpan kode perintah tersebut dengan menggunakan file ekstensi .html 1. Cara Penulisan Kode-kode Perintah dalam HTML Tag adalah kode atau simbol yang digunakan untuk meletakkan perintah html. Perintah dalam tag dituliskan diantara tanda < dan >. Tag dalam html harus dihafal dan dipahami kegunaannya oleh orang yang ingin membuat file html. Tag yang mengenalkan struktur dan tipe isi (content) terdiri atas dua macam, yaitu : a. Tag tertutup (tidak berpasangan) dengan penulisan <perintah>, contoh <img src=gambar.gif/> b. Tag berpasangan degan tanda permulaan dan akhiran. Contoh tag <title> harus berpasangan dengan tag </title> berguna untuk menampilkan judul. Dalam tag

berpasangan awal nama tag tidak menggunakan tanda / sedangkan akhir nama tag menggunakan tanda /. Penulisan tag berpasangan selalu mengikuti bentuk : <nama
tag> ..... </nama tag>

Penulisan tag bersifat non sensitive case artinya penulisan tag tidak membedakan antara penulisan menggunakan huruf besar dan kecil. C. Struktur tag dasar Document HTML bisa di bagi menjadi tiga bagian utama, yaitu : 1. HTML Setiap document HTML harus di awali dengan tag <HTML> dan di tutup dengan tag </HTML>. Tag <HTML> dan </HTML> memberi tahu browser bahwa yang di dalam kedua tag tersebut adalah document HTML. 2. HEAD Bagian header dari document HTML dituliskan diantara tag <HEAD> dan diakhiri tag </HEAD>. Di dalam header biasanya dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser. Selain itu Bookmark juga megunakan tag TITLE untuk memberi mark suatu web site. Browser menyimpan title sebagai bookmark dan juga untuk keperluan pencarian (searching) biasanya title di gunakan sebagai keyword. Header juga memuat tag META yang biasanya di gunakan untuk menentukan informasi tertentu mengenai document HTML, anda bisa menentukan author name, keywords, dan lainya pada tag META. Contoh: <META name=Author contents=Bocah Gunung> Author dari document tersebut adalah Bocah Gunung Atribut http-equiv dapat di gunakan untuk meletakkan nama HTTP Server atribut untuk menciptakan HTTP header. Contoh: <META http-equiv=Expires content=Wed, 7 May 2003 20:30:40 GMT> yang akan menciptakan HTTP header : Expires: Wed, 7 May 2003 20:30:40 GMT Sehingga jika documents di cached, HTTP akan megetahui kapan untuk mengupdate document tersebut pada cache. 3. BODY Content atau isi dari dokumen html yang ingin kita tampilkan kepada user dituliskan di antara tag <body> dan </body>. Pada bagian ini kita dapat <html> menampilkan text, image <head> link dan semua informasi yang <title>Welcome to HTML</title> akan </head> di tampilkan pada web page. <body bgcolor="laveder"> Contoh dokumen html <p>Document HTML yang Pertama</p> </body> selengkapnya adalah :
</html>

Rangkuman : Untuk menyusun sebuah file html minimal harus memuat 4 buah tag dasar yaitu :
Kode tag Cara penulisan
<html> .......... </html> <head> ........ </head> <title> ....... </title> <body> ........... </body>

Keterangan
Tanda awal dokumen Tag lain dalam dokumen Tanda akhir dokumen (terletak dibawah akhir body) Tanda awal header Tag lain dalam header Tanda akhir header Judul halaman akan ditampilkan pada title bar browser Tanda awal body dokumen Informasi dokumen Tanda akhir body dokumen

<html> dan </html> <head> dan </head> <title> dan </title> <body> dan </body>

Praktek 2.1

Kita akan membuat sebuah tampilan dalam browser seperti contoh berikut :

Untuk membuat tampilan seperti diatas kita harus membuat file html seperti pada gambar di samping kanan. File-file html yang akan kita buat harus berada dalam satu folder. Oleh karena itu kita harus membuat folder khusus terlebih dahulu, ikuti langkah-langkah berikut 1. Klil Start, pilih Programs, klik Windows Explorer. 2. Klik My Computer, klik C: 3. Klik File, klik New, klik Folder. 4. Ketik Nama kamu, enter Setelah kamu berhasil membuat folder, selanjutnya ikuti langkah-langkah untuk membuat file html sebagai berikut : 1. Aktifkan Notepad dengan cara klik start, program, accessories, Notepad 2. Ketikan dalam notepad kode perintah seperti gambar di samping :
<html> <head> ini contoh header <title> ini contoh judul </title> </head> <body> ini contoh body, dapat diisi dengan informasi yang ingin kita tampilkan </body> </html>

3. Simpan file tersebut dengan cara : klik File, klik Save as, a. Pada kotak save in ganti dengan folder yang telah kamu buat b. Pada kotak File Name ketik praktek2.1.html sebagai nama file, kemudian klik save. 4. Untuk menampilkan file html tersebut : aktifkan Internet Explorer kemudian klik file, klik open, klik browse, pada kotak look in ganti dengan folder kamu, kemudian klik nama file praktek2.1.html, klik open. Soal-Soal Latihan : 1. Pernyataan berikut yang merupakan fungsi khusus dari file html adalah .... a. Untuk menampilkan informasi tertulis b. Untuk menentukan tata letak dan hubungan dengan dokumen lain. c. Untuk melakukan perhitungan d. Untuk menghubungkan setiap komputer yang tergabung dalam jaringan 2. ASCII kependekan dari ... a. American Standard Code for Information Internet b. American Standard Code for Information Interchange c. American Standard Computer for Information Internet d. American Standard Computer for Information Interchange

3. Program editor yang dapat digunakan untuk menyusun file html yang dikeluarkan oleh Microsoft Windows adalah ... a. Editor b. Ms Word c. Internet Explorer d. Notepad 4. Langkah untuk menempatkan file html yang telah kita susun ke dalam situs internet disebut ... a. Upload b. Reload c. Download d. Overload 5. Penulisan tag dalam dokumen html tidak membedakan penggunaan huruf kapital dan huruf kecil. Sifat demikian disebut ... a. Tag b. Non sensitive case c. Title d. Non sensitive 6. Setiap dokumen html selalu dimulai dan diakhiri dengan tag ... a. <head> dan </head> c. <body> dan </body> b. <title> dan <title> d. <html> dan </html> 7. Judul dokumen html yang tertulis diantara tag <title> dan </title> akan ditampilkan dalam browser sebagai ... a. Task bar b. Title bar c. Menu bar d. Toolbar 8. Langkah untuk mengaktifkan program Notepad pada Windows 98 adalah ... a. Klik start, program, accessories, Notepad c. Klik Program, Acessories, Notepad, Start b. Klik Start, Program, Notepad d. Klik Program, Notepad, Start 9. Langkah untuk menyimpan tag yang telah kita susun dalam Notepad menjadi file dengan format html adalah ... a. Klik file, save in c. Klik file save as, nama file.html, save b. Klik file, save in, save as d. Klik file save as, save 10. Web Browser yang disediakan oleh Windows adalah ... a. Internet connections b. Internet browser c. Internet web d. Internet Explorer Soal Essay : Tuliskan tag untuk membuat tampilan seperti pada gambar berikut :

BAB III Tag Dasar Dalam File Html

A. Elemen blok bertingkat : 1. Membuat Heading Heading dalam dokumen html dapat kita buat dalam 6 tingkatan header. Adapun cara penulisan tag untuk header adalah sebagai berikut : <h1> ..... </h1>; <h2> .... </h2>; <h3> ....</h3>; <h4> .... </h4>; <h5> .... </h5>; dan <h6> .... </h6>. Praktek 3.1 : Aktifkan Notepad dan ketikan tagtag html berikut untuk melihat perbedaan tingkatan dalam heading, kemudian simpan dengan nama file praktek31.html dan perhatikan tampilannya dalam Internet Explorer (IE)

Latihan 3.1 Buatlah file html untuk mendapatkan tampilkan berikut :

sebagai

2. Tag <p>, <br>, dan <nobr> Tag <p> berguna untuk membuat paragraf baru atau ganti alinea (page). Tag ini boleh diberi akhiran </p>. Tag <br> berguna untuk pindah baris baru ( linebreak). Tag <nobr> berguna untuk mencegah ganti baris (nolinebreak), teks akan ditampilkan tanpa pindah baris ke bawahnya. Pada <p> akan memberi ruang spasi setiap kali pindah baris sedangkan <br> tidak memberi ruang spasi. Praktek 3.2 Aktifkan Notepad, ketik tag-tag berikut dan simpan dengan nama file gantibaris.html

Hasil tampilan pada browser adalah sebagai berikut :

File html sebagai source :

Latihan 3.2 Buatlah file html berikut, dan perhatikan layout hasil tampilan melalui internet explorer : File html : Hasil tampilan dalam IE :

Latihan 3.3. Buat file html untuk menampilkan bentuk tampilan sebagai berikut :

3. Mengatur daftar item a. Teks Preformat Tag <pre> yang diakhiri dengan </pre> digunakan untuk menampilkan dokumen berbentuk daftar item seperti bentuk daftar menu pada rumah makan. Perhatikan cara penggunaan tag <pre> berikut :

Praktek 3.4 Buat file html berikut, simpan dengan nama file praktek34.html kemudian perhatikan tampilan pada internet explorer :

Latihan 3.4 Buat file html untuk membuat tampilan berikut : :

seperti

b. Tag <UL> Unordered List Tag <ul> .... </ul> digunakan untuk membuat tampilan daftar item yang menjorok ke dalam. Jika ditambah dengan tag <li> maka akan menghasilkan tanda bulatan ( bullet) pada daftar item yang dibuat. Atribut pada tag <ul> yang dapat digunakan adalah : compact type=square untuk menampilkan bentuk persegi, disc untuk menampilkan bentuk disk, circle untuk menampilkan bentuk lingkaran. c. Tag <OL> ordered list : Tag <ol> .... </ol> digunakan untuk membuat tampilan daftar item yang menjorok ke dalam dengan urutan yang terurut. Tag <li> didalam tag <ol> memiliki beberapa atribut type.

Rangkuman Tag Atribut <ul> <compact type=square> ...... <compact type=disc> </ul> <compact type=circle> <ol> <li type=1> ....... <li type=A> </ol> <li type=a> <li type=I> <li type=i> Praktek 3.5 Buat File html dengan tag berikut, simpan dengan nama praktek35.html kemudian perhatikan tampilan dengan Internet Explorer.

Kegunaan Bullet berbentuk persegi Bullet berbentuk titik Bullet berbentuk lingkaran menampilkan urutan angka 1,2,3, dst menampilkan urutan huruf kapital A,B,C dst menampilkan urutan huruf standar a,b,c, dst menampilkan penomoran romawi I, II, III dst menampilkan penomoran romawi kecil i,ii,iii,iv, dst
<html> <head>Contoh Penggunaan Tag UL dan LI<br> <title> Praktek 35</title> </head> <body text="yellow" bgcolor="red"> Daftar Menu <ul> <li>Jus Jeruk ......... Rp. 3.500,-<br> <li>Jus Tomat ....... Rp. 3.000,-<br> -------------------------------</ul> Contoh Penggunaan tag UL atribut Type square <ul compact type=square> <li>Jus Jeruk ......... Rp. 3.500,-<br> <li>Jus Tomat ....... Rp. 3.000,-<br> -------------------------------</ul> Contoh Penggunaan tag UL dan LI atribut Type A <ol> <li type=A>Jus Jeruk ......... Rp. 3.500,-<br> <li type=A>Jus Tomat ....... Rp. 3.000,-<br> -------------------------------</ol> Contoh Penggunaan Atribut Type=1 <ol> <li type=1>Jus Jeruk ......... Rp. 3.500,-<br> <li type=1>Jus Tomat ....... Rp. 3.000,-<br> --------------------------------</ol> </body> </html>

d. Tag <dl> Definition List, <dt> Definition Term, dan <dd> Tag <dt> dan <dd> yang berurutan akan membuat tampilan yang zig zag menjorok ke dalam. Tag <dt> dan <dd> harus dibuat diantara tag <dl> dan </dl> Praktek 3.6. Buat file html berikut, dimpan dengan nama praktek36.html dan perhatikan tampilannya pada Internet Explorer.
<html> <head> <title>Praktek 36</TITLE> MEMBUAT TULISAN SECARA ZIG ZAG </head> <body> <dl> <dt> Struktur Kurikulum <dd>Struktur Kurikulum SMP Negeri 23 Bekasi meliputi substansi pembelajaran yang ditempuh dalam satu jenjang pendidikan selama tiga tahun mulai kelas VII sampai dengan kelas IX. Struktur kurikulum disusun berdasarkan Standar Kompetensi Lulusan (SKL) dan Standar Kompetensi Mata Pelajaran. <dt> Kurikulum <dd>Kurikulum SMP Negeri 23 Bekasi memuat 10 Mata Pelajaran, Muatan Lokal, dan Pengembangan Diri. <dl> </body> </html>

Latihan 3.5.

Buat file html untuk menampilkan halaman web berikut :

4. Membuat garis horizontal Untuk membuat garis horisontal dalam dokumen html kita gunakan tag <hr> Horizontal ruler. Untuk mengatur ukuran panjang garis digunakan atribut width, sedangkan ketebalan garis digunakan atribut size, atribut noshade untuk menampilkan garis tanpa bayangan. Bentuk tagnya adalah <hr align=.... width=... size=... noshade> Rangkuman :
Tag <hr> Atribut Align Width Size Noshade Keterangan Menentukan posisi garis horisontal, dengan value : left, center, right Menentukan panjang garis Menentukan tebal tipis garis Menampilkan garis tanpa bayangan

Praktek 3.6 : Buat file html untuk mendapatkan tampilan berikut :

<html> <head> <title> Praktek 3.6</title> <h3>Membuat garis Horizontal</h3> </head> <body> <hr align="left" width="200" Size="3" noshade> Hai ... Sobatku ......<br> Hari ini kita telah belajar membuat header bertingkat. Ternyata gampang and mudah, kita harus rajin berlatih biar banyak pengalaman. Kreatifitas kita tingkatkan dengan banyak mencoba untuk membuat berbagai macam bentuk tampilan.<br> Tuangkan kreatifitas kita agar tampilan yang kita buat menjadi lebih indah dan menarik. <hr align="center" width="200" size="3" noshade> So .....<br> Dengan membuat file html kita bisa berbagi ide, dan informasi dengan orang lain. Dengan menggunakan fasilitas internet ide dan informasi yang kita tampilkan dapat dibaca orang lain di seluruh dunia. Asyiik khan ...?? Selamat belajar lebih keras ya... <hr align="right" width="200" size="3"> </body> </html>

Soal-soal Latihan : 1. Dalam dokumen html, tersedia heading dalam .... . a. 3 tingkatan b. 4 tingkatan c. 5 tingkatan d. 6 tingkatan 2. Penulisan tag untuk membuat heading tingkat ke 3 adalah ... a. <h3> ....</h3> b. <3> ... </3> c. </h3> ... <h3> d. </3> ... <3> 3. Tag <p> berfungsi untuk membuat ... a. Pindah baris baru b. Paragraf baru c. Halaman baru d. Garis baru. 4. Perbedaan hasil tampilan antara penggunaan tag <p> dan <br> adalah ... a. Pada <br> terdapat ruang spasi antar baris b. Pada <p> terdapat ruang spasi antar baris SMP Neger 23 Kota Bekasi c. Pada <br> terdapat garis mendatar antar baris d. Pada <p> terdapat garis mendatar antar baris Jalan Jatikramat Indah II 5. Penulisan tag dalam <body>...</body> yang benar untuk Jatiasih, Kota Bekasi menampilkan tampilan seperti gambar di sebelah kanan adalah : c. <body> a. <body>
SMP Negeri 23 Kota Bekasi <br> Jalan Jatikramat Indah II Jatiasih, <p> Kota Bekasi </body> SMP Negeri 23 Kota Bekasi <p> Jalan Jatikramat Indah II Jatiasih, <br> Kota Bekasi </body>

b. <body>
SMP Negeri 23 Kota Bekasi <nobr> Jalan Jatikramat Indah II Jatiasih, <br> Kota Bekasi </body>

d. <body>
SMP Negeri 23 Kota Bekasi <p> Jalan Jatikramat Indah II Jatiasih, <p> Kota Bekasi </body>

6. Tag yang berguna untuk menampilkan dokumen yang berbentuk daftar item seperti daftar menu pada rumah makan adalah ... a. <br> b. <p> c. <pra> .... </pra> d. <pre> ... </pre> 7. Tag <ul> ditambah dengan tag <li> akan menampilkan ... a. tanda bullet b. daftar item c. bentuk persegi d. bentuk lingkaran 8. Agar kita mendapatkan tampilan urutan huruf standar a,b,c, dan seterusnya dalam tampilan file html, kita harus menggunakan tag ... a. <ol> ... </ol> b. <li type=a> c. <ul> ... </ul> d. <li type=i> 9. <dl>, <dt> dan <dd> jika digunakan dalam dokumen html akan menampilkan ... a. Dokumen zig zag b. Daftar item c. Huruf d,e,f, dst d. Bentuk lingkaran 10. Tag <hr width=45 size=2 align=center> akan memberikan tampilan ... a. Garis mendatar dengan panjang 45, tebal 2, posisi rata tengah b. Garis mendatar dengan tebal 45, panjang 2, posisi rata tengah c. Garis mendatar dengan panjang 45, tebal 2, posisi rata kiri d. Garis mendatar dengan tebal 45, panjang 2, posisi rata kiri Soal Essay Tuliskan tag-tag untuk membuat file html, agar diperoleh tampilan seperti gamber berikut :

BAB IV Pengaturan Tampilan File html

A. Pengaturan letak dokumen 1. Tag <center> dan Perataan (align) pada Heading Tag <center> berguna untuk menempatkan dokumen tepat ditengah layar. Sedangkan atribut align pada heading berfungsi untuk perataan header untuk posisi ditengah (center), posisi di kiri (left), posisi di kanan (right). Praktek 4.1 : Buat file html berikut, simpan dengan praktek41.html , kemudian perhatikan tampilannya pada internet explorer. Perhatikan posisi tampilan header, dan posisi serta ukuran garis yang dibuat. Perhatikan perbedaan penggunaan tag noshade pada garis dengan ukuran yang sama dibawah kalimat POSISI NETRAL dan di bawah Posisi di kanan Latihan 4.1 Buat file html untuk menampilkan tampilan disamping. Ketentuan : gunakan empat buah garis horizontal dengan size 5, 1, 3, dan 5 masingmasing ukuran panjangnya 200

2. Format teks Format teks adalah pengaturan bentuk-bentuk tampilan dari suatu teks. Tag yang berhubungan dengan format teks dan contoh bentuk teksnya seperti pada contoh praktek berikut : a. <br> break row Berguna untuk memutus baris kalimat dan memulai kalimat baru yang masih tergabung dalam 1 paragraf.

b. <font> .... </font> Tag <font> diakhiri </font> digunakan mengatur font. Atribut yang dapat digunakan adalah : Size untuk mengatur ukuran font berkisar 1 s.d 7, Face untukmengatur jenis font, maksimal 3 jenis font masing-masing dipisahkan oleh tanda koma, color untuk mengatur warna font. Tag Atribut Keterangan <font> color Menentukan warna huruf ...... size Menentukan ukuran huruf dengan nilai 1 s.d 7 </font> face Menentukan jenis font misalnya : times new romans, arial dll Value dalam color ditentukan dengan warna primer yaitu red, green, dan blue atau ditentukan dalam nilai hexadesimal, yaitu : #FF000 (red), #00FF00 (green), #0000FF (blue), #000000 (black), #FFFFFF (white) Jika dalam satu dokumen kita menggunakan warna teks yang sama kita gunakan atribut text pada tag body. Sedangkan warna background kita atur menggunakan atribut bgcolor dalam tag body. c. Aligment (perataan) Perataan teks meliputi atribut left (rata kiri), center (rata ditengah), right(rata dikanan), dan Justify (rata dikiri dan kanan). d. Format tampilan teks : Tag Keterangan <b> Teks </b> Teks akan tampil dalam huruf tebal (bold) <i> Teks </i> Teks akan tampil dalam huruf miring (Italic) <u> Teks </u> Teks akan tampil dalam huruf bergaris bawah (underline) <tt> Teks </tt> Teks akan tampil dalam huruf typewriter <s> Teks </s> Teks akan tampil dalam huruf bergaris (strike) <big> Teks </big> Teks akan tampil dengan ukuran lebih besar <small> Teks </small> ^Teks _Teks
Teks akan
Teks

tampil dengan ukuran lebih kecil akan tampil dengan posisi diatas dari posisi normal Teks akan tampil dengan posisi dibawah dari posisi normal
<html> <head> <title>Praktek 4.2</title> </head> <body> Judul dibawah ini menggunakan huruf Comic Sans MS ukuran 4, warna merah : <br> <Font face="Comic Sans MS" size="4" color="red"> <CENTER>PENGATURAN FONT</CENTER></font><br> Teks dibawah ini menggunakan huruf "Lucida Console" ukuran 2 warna biru : <br> <font face="Lucida Console" size="2" color="blue"> Atribut yang dapat digunakan adalah : Size untuk mengatur<br> ukuran font berkisar 1 s.d 7, Face untukmengatur jenis font,<br> maksimal 3 jenis font masing-masing dipisahkan oleh tanda koma.<br> Color untuk mengatur warna font.<br> </font> Teks dibawah ini menggunakan huruf Tahoma ukuran 2 warna hijau : <br> <font face="Tahoma" size="2" color="green"> Format teks adalah pengaturan bentuk-bentuk tampilan dari suatu teks. <br> </font> </body> </html>

Praktek 4.2 Buat file html berikut, simpan dengan nama file praktek42.html, kemudian perhatikan tampilannya pada internet explorer. Praktek 4.3 : Buat file html berikut, simpan dengan nama file praktek43.html kemudian tampilkan dalam internet explorer dan perhatikan hasil tampilan
<html> <head> <title> Praktek 4.3 </title> </head> <body> Membuat huruf tebal : <b>"SMP Negeri 23 Kota Bekasi"</b><br> Membuat huruf miring :<i>"Jl. Jatikramat Indah II Jatiasih"</i><br> Membuat huruf bergaris bawah : <u>"Kode Pos 17421"</u><br> Menampilkan huruf typewriter :<tt>"Nomor Telepon (021) 84994818"</tt><br> Menampilkan huruf bergaris : <s>"Ini contoh huruf bergaris"</s><br> Menampilkan ukuran text lebih besar : <big>"Yang ini hurufnya lebih besar"</big><br> Menampilkan huruf lebih kecil :<small>"Yang ini hurufnya lebih kecil"</small><br> Menampilkan text superscript : Posisi text biasa^{Posisi text supperscript}<br> Menampilkan text subscript : posisi text biasa_{posisi text subsript}<br> </body> </html>

Latihan 4.2 : Buat file html untuk menampilkan informasi berikut ini :

Soal-soal Latihan : 1. Berikut ini yang bukan merupakan pilihan dalam atribut align pada heading adalah ... a. Left b. Center c. Right d. Justify 2. Tag break row <br> berguna untuk ... a. Ganti baris b. Ganti huruf c. Ganti file d. Ganti angka 3. Tag font mempunyai 3 pilihan atribut. Berikut ini yang bukan merupakan atribut font adalah ... a. Aligment b. Color c. Size d. Face 4. Jika dalam tag font terdapat atribut color=blue, maka akan tampil ... a. Huruf dengan ukuran 5 c. Huruf dengan warna coklat b. Huruf dengan warna biru d. Huruf dengan ukuran 3

Tabel (table) HTML

Sekilas tentang tabel. Tabel (table) sangat diperlukan ketika kita ingin menampilkan data yang berbentuk kolomkolom. Dulu sebelum adanya CSS, table digunakan untuk membuat layout website namun saat ini sudah jarang dipakai sebagai layout karena faktor file yang cenderung lebih besar sehingga mempengaruhi waktu akses yang lebih lama, dalam pengelolaan dan pengeditan pun jauh lebih rumit karena banyaknya tag-tag yang dihasilkan. Cara membuat tabel. Untuk membuat table yang sederhana ada 3 elemen utama yaitu table, tr dan td. Tag <table> adalah untuk membuat tabel kemudian di ikuti dengan tag <tr> (table rows) adalah untuk membuat baris pada tabel kemudian tag <td> (table data) adalah untuk membuat kolom pada tabel, kolom-kolom hasil dari tr dan td ini disebut dengan table cell yaitu sebagai lokasi dimana kita memasukkan data-data yang akan di tampilkan. Berikut adalah contoh tabel yang terdiri dari 3 baris dan 2 kolom.
<table border="1"> <tr> <td>Cell <td>Cell </tr> <tr> <td>Cell <td>Cell </tr> <tr> <td>Cell <td>Cell </tr> </table>

1 - Baris 1 Kolom 1</td> 2 - Baris 1 Kolom 2</td> 3 - Baris 2 Kolom 1</td> 4 - Baris 2 Kolom 2</td> 5 - Baris 3 Kolom 1</td> 6 - Baris 3 Kolom 2</td>

Hasil: Cell 1 Baris 1 Kolom 1 Cell 2 Baris 1 Kolom 2 Cell 3 Baris 2 Kolom 1 Cell 4 Baris 2 Kolom 2 Cell 5 Baris 3 Kolom 1 Cell 6 Baris 3 Kolom 2 Dalam contoh sengaja ditambah dengan atribut border agar kita dapat melihat posisi dari tabel tersebut, karena secara default nilai dari border ini adalah 0 jika tidak disertakan dengan tag <table>. Mengatur lebar dan tinggi tabel. Untuk mengatur lebar table digunakan atribut width atau bisa juga dengan style CSS dengan properti width. Untuk lebar dan tinggi dari td kita gunakan atribut style dengan properti width dan height. Berikut adalah contoh tabel dengan lebar 75% dari lebar dokumen dan lebar kolom masing 50% dengan tinggi pada baris pertama adalah 40px.
<table border="1" width="75%"> <tr> <td style="width:50%;height:40px;">Baris 1 Kolom 1</td> <td>Baris 1 Kolom 1</td>

</tr> <tr> <td>Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td> </tr> <tr> <td>Baris 3 Kolom 1</td> <td>Baris 3 Kolom 2</td> </tr> </table>

Hasil: Baris 1 Kolom 1 Baris 2 Kolom 1 Baris 3 Kolom 1 Baris 1 Kolom 1 Baris 2 Kolom 2 Baris 3 Kolom 2

Untuk satuan ukuran widht dan height dari atribut maupun style tersebut kita dapat menggunakan px atau %. Untuk pengaturan lebar dan tinggi pada td kita cukup memasukkan pada kolom pertama secara otomatis kolom-kolom berikutnya akan mengikuti pengaturan tersebut. Menggabungkan kolom pada tabel Table Cell atau baris dan kolom dari tabel tersebut dapat kita gabungkan sesuai kebutuhan bentuk tabel yang diinginkan. Untuk menggabungkan kolom dalam tabel digunakan atribut colspan.
<table border="1" width="75%"> <tr> <td colspan="2">Gabungan Kolom 1&amp;2 pada Baris 1</td> </tr> <tr> <td style="width:50%">Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td> </tr> <tr> <td>Baris 3 Kolom 1</td> <td>Baris 3 Kolom 2</td> </tr> </table>

Hasil: Gabungan Kolom 1&2 pada Baris 1 Baris 2 Kolom 1 Baris 3 Kolom 1 Baris 2 Kolom 2 Baris 3 Kolom 2

Sedangkan untuk menggabungkan baris dalam tabel digunakan atribut rowspan.

<table border="1" width="75%"> <tr> <td style="width:50%" rowspan="2">Gabungan Baris 1&amp;2 pada Kolom 1</td> <td>Baris 1 Kolom 2</td> </tr> <tr>

</tr> <tr> </tr> </table>

<td>Baris 2 Kolom 2</td> <td>Baris 3 Kolom 1</td> <td>Baris 3 Kolom 2</td>

Hasil: Gabungan Baris 1&2 pada Kolom Baris 1 Kolom 2 1 Baris 2 Kolom 2 Baris 3 Kolom 1 Baris 3 Kolom 2

Mengatur jarak kolom pada tabel Untuk mengatur posisi cell dalam tabel digunakan atribut cellpadding dan cellspacing. Cellpadding adalah untuk pengaturan sisi dari bagian dalam cell.
<table border="1" width="75%" cellpadding="8"> <tr> <td style="width:50%;">Baris 1 Kolom 1</td> <td>Baris 1 Kolom 2</td> </tr> <tr> <td>Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td> </tr> </table>

Hasil: Baris 1 Kolom 1 Baris 2 Kolom 1 Baris 1 Kolom 2 Baris 2 Kolom 2

Sedangkan Cellspacing adalah pengaturan sisi dari bagian luar cell.

<table border="1" width="75%" cellspacing="8"> <tr> <td style="width:50%">Baris 1 Kolom 1</td> <td>Baris 1 Kolom 2</td> </tr> <tr> <td>Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td> </tr> </table>

Hasil: Baris 1 Kolom 1 Baris 2 Kolom 1 Membuat titel pada tabel. Baris 1 Kolom 2 Baris 2 Kolom 2

Untuk tabel yang lengkap dengan titel, kita bisa menambahkan tag <caption> tepat setelah tag <table> dan kita juga bisa mengganti td dengan th (table heading) sebagai titel dari baris maupun kolom. Caption dan th akan secara otomatis berada pada posisi tengah dan th akan menghasilkan tulisan tebal.
<table border="1" width="75%"> <caption>Disini adalah titel tabel ini</caption> <tr> <th style="width:50%;">Header Kolom 1</th> <th>Header Kolom 2</th> </tr> <tr> <td>Baris 1 Kolom 1</td> <td>Baris 1 Kolom 2</td> </tr> <tr> <td>Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td> </tr> </table>

Hasil: Disini adalah titel tabel ini Header Kolom 1 Baris 1 Kolom 1 Baris 2 Kolom 1 Header Kolom 2 Baris 1 Kolom 2 Baris 2 Kolom 2

Membuat background pada tabel Untuk membuat background pada tabel kita gunakan atribut style dengan properti background. Berikut adalah contoh table dengan background warna kuning muda dengan heading warna merah.
<table style="background:#ffc" width="75%" border="1"> <tr> <th style="background:red;width:50%;">Header Kolom 1</th> <th style="background:red;">Header Kolom 2</th> </tr> <tr> <td>Baris 1 Kolom 1</td> <td>Baris 1 Kolom 2</td> </tr> <tr> <td>Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td> </tr> </table>

Hasil: Header Kolom 1 Baris 1 Kolom 1 Baris 2 Kolom 1 Header Kolom 2 Baris 1 Kolom 2 Baris 2 Kolom 2

Seperti kita lihat bahwa border dari cell tersebut terlihat terlalu tebal padahal kita membuat nilai dari atribut border adalah 1px. Ini terjadi karena secara default atribut cellpadding dan cellspacing pada elemen table memiliki nilai masing-masing 1px. Jadi untuk menghilangkannya kita harus memasukkan kedua atribut tersebut dengan nilai 0.
<table cellpadding="0" cellspacing="0" style="background:#ffc" width="75%" border="1"> ... </table>

Atau kita juga bisa menggunakan style CSS yaitu dengan properti border-collapse:collapse.
<table style="border-collapse:collapse;background:#ffc" width="75%" border="1"> <tr> <th style="background:red;width:50%;">Header Kolom 1</th> <th style="background:red;">Header Kolom 2</th> </tr> <tr> <td>Baris 1 Kolom 1</td> <td>Baris 1 Kolom 2</td> </tr> <tr> <td>Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td> </tr> </table>

Hasil: Header Kolom 1 Baris 1 Kolom 1 Baris 2 Kolom 1 Header Kolom 2 Baris 1 Kolom 2 Baris 2 Kolom 2

Pada link berikut ini kita akan membuat contoh tabel dengan CSS baik itu dengan atribut style (inline) maupun internal dan eksternal CSS.