You are on page 1of 25

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

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

chatting dan lain-lain. Sedangkan Internet adalah jaringan komputer global dari seluruh dunia yang tergabung dalam WAN (Wide Area Network). harddisk. Untuk dapat mengakses internet kita membutuhkan perangkat-perangkat sebagai berikut. Windows. Internet Explorer. untuk merubah data . 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. dalam hal ini yang berkaitan dengan 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. 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. Perkembangan terakhir dengan melalui internet kita dapat mendapatkan program-program gratis (freeware) yang mungkin akan sangat berguna. Apple dll. Selain itu kita dapat juga berhubungan dengan teman melalui email (electronic mail = surat elektronik) . Menggunakan internet kita dapat mencari dan memberi informasi baik berupa teks. video conference (percakapan secara langsung (video dan audio)). CD/DVD-ROM. maupun video. Modem (Modulator Demodulator) Pada umumnya jalur transmisi menyalurkan data dalam bentuk analog. Navigator dll c. Personal Komputer (PC) Perangkat keras pada komputer. contoh DOS. sedangkan data yang dihasilkan oleh komputer adalah data yang berbentuk digital. Perangkat utama (Komputer) a. yaitu : 1.). Firefox. motherboard. Dari kebutuhan akan hal ini munculah teknologi yang disebut dengan intranet dan internet. Kebutuhan akan hal tersebut dapat dilakukan dengan menggunakan bantuan Komputer.BAB I DEFINISI INTERNET DAN WEB A. Contohnya Opera. Yang termasuk dalam hardware adalah monitor. WAN adalah jaringan komputer pribadi dan LAN yang terhubung melalui sistem komunikasi. Linux. 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. Netscape. b. RAM. Pada banyak perusahaan dan organisasi hubungan antar komputer baik dalam satu gedung/ruangan maupun antar wilayah bahkan negara sangat dibutuhkan. Software Perangkat Lunak yang memungkinkan komputer mengerjakan hal-hal yang bersifat khusus. gambar.

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

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

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

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

Notepad 2. a. Klik File. dapat diisi dengan informasi yang ingin kita tampilkan </body> </html> 3. kemudian klik save. klik open. c. Soal-Soal Latihan : 1. American Standard Computer for Information Internet d. Untuk menampilkan informasi tertulis b.. pilih Programs. Simpan file tersebut dengan cara : klik File. Untuk menampilkan file html tersebut : aktifkan Internet Explorer kemudian klik file. a.. klik New. Pada kotak “ save in ” ganti dengan folder yang telah kamu buat b. American Standard Code for Information Interchange c. klik Folder. File-file html yang akan kita buat harus berada dalam satu folder. klik Windows Explorer. klik browse. klik open. Pada kotak “File Name” ketik “praktek2. 4. accessories.. Oleh karena itu kita harus membuat folder khusus terlebih dahulu. program. Untuk melakukan perhitungan d. Untuk menghubungkan setiap komputer yang tergabung dalam jaringan 2. 4. Aktifkan Notepad dengan cara klik start.html. ikuti langkah-langkah berikut 1. selanjutnya ikuti langkah-langkah untuk membuat file html sebagai berikut : 1. klik C: 3. Pernyataan berikut yang merupakan fungsi khusus dari file html adalah .1.1. klik Save as. Klil Start.. pada kotak look in ganti dengan folder kamu.. Untuk menentukan tata letak dan hubungan dengan dokumen lain. Klik My Computer. Ketik Nama kamu. American Standard Code for Information Internet b.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. a. 2. kemudian klik nama file praktek2.html ” sebagai nama file. American Standard Computer for Information Interchange . ASCII kependekan dari . Ketikan dalam notepad kode perintah seperti gambar di samping : <html> <head> ini contoh header <title> ini contoh judul </title> </head> <body> ini contoh body. enter Setelah kamu berhasil membuat folder.

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

..2 Aktifkan Notepad.1 Buatlah file html untuk mendapatkan tampilkan berikut : sebagai 2.....html dan perhatikan tampilannya dalam Internet Explorer (IE) Latihan 3. Tag <br> berguna untuk pindah baris baru ( linebreak). Tag <nobr> berguna untuk mencegah ganti baris (nolinebreak).. Pada <p> akan memberi ruang spasi setiap kali pindah baris sedangkan <br> tidak memberi ruang spasi..BAB III Tag Dasar Dalam File Html A. </h2>. </h4>. teks akan ditampilkan tanpa pindah baris ke bawahnya... <h5> . dan <h6> . <h2> .html Hasil tampilan pada browser adalah sebagai berikut : . </h1>. Elemen blok bertingkat : 1.. ketik tag-tag berikut dan simpan dengan nama file gantibaris. </h6>.. <br>. dan <nobr> Tag <p> berguna untuk membuat paragraf baru atau ganti alinea (page).... </h5>. Membuat Heading Heading dalam dokumen html dapat kita buat dalam 6 tingkatan header.. <h3> . kemudian simpan dengan nama file praktek31.. Tag <p>. Praktek 3.</h3>. Adapun cara penulisan tag untuk header adalah sebagai berikut : <h1> . <h4> ...1 : Aktifkan Notepad dan ketikan tagtag html berikut untuk melihat perbedaan tingkatan dalam heading. Tag ini boleh diberi akhiran </p>. Praktek 3.

dan perhatikan layout hasil tampilan melalui internet explorer : File html : Hasil tampilan dalam IE : Latihan 3. Perhatikan cara penggunaan tag <pre> berikut : . Buat file html untuk menampilkan bentuk tampilan sebagai berikut : 3.File html sebagai source : Latihan 3.2 Buatlah file html 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.

Tag <OL> ordered list : Tag <ol> .html” kemudian perhatikan tampilan pada internet explorer : Latihan 3.. c. Jika ditambah dengan tag <li> maka akan menghasilkan tanda bulatan ( bullet) pada daftar item yang dibuat.4 Buat file html untuk membuat tampilan berikut : : seperti b. </ol> digunakan untuk membuat tampilan daftar item yang menjorok ke dalam dengan urutan yang terurut. disc untuk menampilkan bentuk disk.4 Buat file html berikut. Tag <li> didalam tag <ol> memiliki beberapa atribut type. Tag <UL> Unordered List Tag <ul> ..... simpan dengan nama file “praktek34. </ul> digunakan untuk membuat tampilan daftar item yang menjorok ke dalam. circle untuk menampilkan bentuk lingkaran.Praktek 3.. Atribut pada tag <ul> yang dapat digunakan adalah : compact type=square untuk menampilkan bentuk persegi. .

. <li type=A> </ol> <li type=a> <li type=I> <li type=i> Praktek 3.000... <compact type=disc> </ul> <compact type=circle> <ol> <li type=1> .. Rp.. Muatan Lokal..-<br> <li>Jus Tomat ...500..2.-<br> <li type=1>Jus Tomat . Rp.. 3. <dl> </body> </html> Latihan 3... Struktur kurikulum disusun berdasarkan Standar Kompetensi Lulusan (SKL) dan Standar Kompetensi Mata Pelajaran.500. Rp.. simpan dengan nama praktek35. <dt> Kurikulum <dd>Kurikulum SMP Negeri 23 Bekasi memuat 10 Mata Pelajaran.....000...000.-<br> -------------------------------</ul> Contoh Penggunaan tag UL dan LI atribut Type A <ol> <li type=A>Jus Jeruk .. Buat file html berikut.Rangkuman Tag Atribut <ul> <compact type=square> ... dimpan dengan nama praktek36.iv.-<br> <li type=A>Jus Tomat . <dt> Definition Term. Rp.. dan <dd> Tag <dt> dan <dd> yang berurutan akan membuat tampilan yang zig zag menjorok ke dalam.. 3. Rp.-<br> <li>Jus Tomat . dst menampilkan urutan huruf kapital A.. dst menampilkan penomoran romawi I.-<br> -------------------------------</ol> Contoh Penggunaan Atribut Type=1 <ol> <li type=1>Jus Jeruk ......500. ..html kemudian perhatikan tampilan dengan Internet Explorer... 3...-<br> -------------------------------</ul> Contoh Penggunaan tag UL atribut Type square <ul compact type=square> <li>Jus Jeruk ... 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... <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.. Rp... 3..c.html dan perhatikan tampilannya pada Internet Explorer.. II.000. 3... 3..3.B.C dst menampilkan urutan huruf standar a.. dan Pengembangan Diri..5 Buat File html dengan tag berikut..ii.500.6....... Tag <dl> Definition List. 3.b.....5..iii. Kegunaan Bullet berbentuk persegi Bullet berbentuk titik Bullet berbentuk lingkaran menampilkan urutan angka 1.. Rp. Tag <dt> dan <dd> harus dibuat diantara tag <dl> dan </dl> Praktek 3. 3.-<br> --------------------------------</ol> </body> </html> d.... III dst menampilkan penomoran romawi kecil i.

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

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

. Agar kita mendapatkan tampilan urutan huruf standar a. a. Pada <br> terdapat garis mendatar antar baris d. tersedia heading dalam .. Huruf d.b. <3> .... dan seterusnya dalam tampilan file html.. <ol> .. Pada <p> terdapat ruang spasi antar baris SMP Neger 23 Kota Bekasi c. Dalam dokumen html. <dl>.. a. Garis mendatar dengan panjang 45. </3> c... <pra> . a.. bentuk persegi d.. a. 6 tingkatan 2. <p> Kota Bekasi </body> SMP Negeri 23 Kota Bekasi <p> Jalan Jatikramat Indah II Jatiasih. <li type=a> c.. 4.. bentuk lingkaran 8. </pre> 7. <p> c. Daftar item c. Perbedaan hasil tampilan antara penggunaan tag <p> dan <br> adalah ... <body> SMP Negeri 23 Kota Bekasi <nobr> Jalan Jatikramat Indah II Jatiasih. . tebal 2.. Pindah baris baru b.. <dt> dan <dd> jika digunakan dalam dokumen html akan menampilkan . <body> SMP Negeri 23 Kota Bekasi <br> Jalan Jatikramat Indah II Jatiasih. <3> 3. </3> ..e. panjang 2.. Pada <p> terdapat garis mendatar antar baris Jalan Jatikramat Indah II 5. Pada <br> terdapat ruang spasi antar baris b.Soal-soal Latihan : 1. a. Garis baru. Tag <ul> ditambah dengan tag <li> akan menampilkan . <ul> .. <body> a. Tag <p> berfungsi untuk membuat . kita harus menggunakan tag .. Penulisan tag dalam <body>. Tag yang berguna untuk menampilkan dokumen yang berbentuk daftar item seperti daftar menu pada rumah makan adalah . <pre> . Garis mendatar dengan tebal 45. posisi rata kiri d. posisi rata tengah c...</h3> b. tebal 2. 3 tingkatan b. <br> b. Penulisan tag untuk membuat heading tingkat ke 3 adalah .. Paragraf baru c.c. <h3> . a.. Garis mendatar dengan tebal 45... 5 tingkatan d.. posisi rata kiri Soal Essay Tuliskan tag-tag untuk membuat file html. agar diperoleh tampilan seperti gamber berikut : . <br> Kota Bekasi </body> d.. a.. </ol> b.f. dst d. <li type=i> 9.. Tag <hr width=”45” size=”2” align=”center”> akan memberikan tampilan . <br> Kota Bekasi </body> b.. <p> Kota Bekasi </body> 6. Halaman baru d. Kota Bekasi menampilkan tampilan seperti gambar di sebelah kanan adalah : c... </pra> d. Garis mendatar dengan panjang 45.. </ul> d. a. Bentuk lingkaran 10. daftar item c. tanda bullet b. 4 tingkatan c. panjang 2. </h3> .. Dokumen zig zag b.</body> yang benar untuk Jatiasih. <body> SMP Negeri 23 Kota Bekasi <p> Jalan Jatikramat Indah II Jatiasih.. a. posisi rata tengah b.. <h3> d.

dan 5 masingmasing ukuran panjangnya 200 2. kemudian perhatikan tampilannya pada internet explorer. Ketentuan : gunakan empat buah garis horizontal dengan size 5.BAB IV Pengaturan Tampilan File html A.1 Buat file html untuk menampilkan tampilan disamping.html . posisi di kiri (left). 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). Praktek 4. <br> break row Berguna untuk memutus baris kalimat dan memulai kalimat baru yang masih tergabung dalam 1 paragraf. Pengaturan letak dokumen 1. Perhatikan perbedaan penggunaan tag “noshade” pada garis dengan ukuran yang sama dibawah kalimat “POSISI NETRAL” dan di bawah “Posisi di kanan” Latihan 4. 3.1 : Buat file html berikut. Format teks Format teks adalah pengaturan bentuk-bentuk tampilan dari suatu teks. simpan dengan praktek41. dan posisi serta ukuran garis yang dibuat. Tag yang berhubungan dengan format teks dan contoh bentuk teksnya seperti pada contoh praktek berikut : a. posisi di kanan (right). . Perhatikan posisi tampilan header.

simpan dengan nama file praktek43. Tag Atribut Keterangan <font> color Menentukan warna huruf . 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.b. dan Justify (rata dikiri dan kanan)... green.d 7..html.<br> Color untuk mengatur warna font.html kemudian tampilkan dalam internet explorer dan perhatikan hasil tampilan <html> <head> <title> Praktek 4. 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<sup>Posisi text supperscript</sup><br> Menampilkan text subscript : posisi text biasa<sub>posisi text subsript</sub><br> </body> </html> .2</title> </head> <body> Judul dibawah ini menggunakan huruf “Comic Sans MS” ukuran 4. dan blue atau ditentukan dalam nilai hexadesimal.3 </title> </head> <body> Membuat huruf tebal : <b>"SMP Negeri 23 Kota Bekasi"</b><br> Membuat huruf miring :<i>"Jl. Sedangkan warna background kita atur menggunakan atribut bgcolor dalam tag body. #000000 (black).d 7 </font> face Menentukan jenis font misalnya : times new romans... c.. size Menentukan ukuran huruf dengan nilai 1 s. #0000FF (blue). right(rata dikanan). <br> </font> </body> </html> Praktek 4.d 7.3 : Buat file html berikut. Aligment (perataan) Perataan teks meliputi atribut left (rata kiri).<br> maksimal 3 jenis font masing-masing dipisahkan oleh tanda koma. Praktek 4. 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. maksimal 3 jenis font masing-masing dipisahkan oleh tanda koma. Atribut yang dapat digunakan adalah : Size untuk mengatur ukuran font berkisar 1 s. #FFFFFF (white) Jika dalam satu dokumen kita menggunakan warna teks yang sama kita gunakan atribut text pada tag body. arial dll Value dalam color ditentukan dengan warna primer yaitu red. <font> . #00FF00 (green). d. </font> Tag <font> diakhiri </font> digunakan mengatur font. center (rata ditengah). yaitu : #FF000 (red). 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> <sup> Teks </sup> <sub> Teks </sub> 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.. Face untukmengatur jenis font..2 Buat file html berikut. simpan dengan nama file praktek42. Face untukmengatur jenis font. kemudian perhatikan tampilannya pada internet explorer.

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

dalam pengelolaan dan pengeditan pun jauh lebih rumit karena banyaknya tag-tag yang dihasilkan.Baris 1 Kolom 2</td> 3 . 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. Untuk lebar dan tinggi dari td kita gunakan atribut style dengan properti width dan height. Berikut adalah contoh tabel yang terdiri dari 3 baris dan 2 kolom. Untuk mengatur lebar table digunakan atribut width atau bisa juga dengan style CSS dengan properti width. 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. Dulu sebelum adanya CSS. tr dan td. kolom-kolom hasil dari tr dan td ini disebut dengan table cell yaitu sebagai lokasi dimana kita memasukkan data-data yang akan di tampilkan. <table border="1"> <tr> <td>Cell <td>Cell </tr> <tr> <td>Cell <td>Cell </tr> <tr> <td>Cell <td>Cell </tr> </table> 1 . <table border="1" width="75%"> <tr> <td style="width:50%. Cara membuat tabel.Baris 1 Kolom 1</td> 2 .height:40px. karena secara default nilai dari border ini adalah 0 jika tidak disertakan dengan tag <table>.">Baris 1 Kolom 1</td> <td>Baris 1 Kolom 1</td> .Tabel (table) HTML Sekilas tentang tabel. Berikut adalah contoh tabel dengan lebar 75% dari lebar dokumen dan lebar kolom masing 50% dengan tinggi pada baris pertama adalah 40px.Baris 3 Kolom 1</td> 6 . Mengatur lebar dan tinggi tabel.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. Tabel (table) sangat diperlukan ketika kita ingin menampilkan data yang berbentuk kolomkolom. Untuk membuat table yang sederhana ada 3 elemen utama yaitu table.Baris 2 Kolom 2</td> 5 .Baris 2 Kolom 1</td> 4 .

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

Cellpadding adalah untuk pengaturan sisi dari bagian dalam cell.</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.">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. Baris 1 Kolom 2 Baris 2 Kolom 2 . <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. <table border="1" width="75%" cellpadding="8"> <tr> <td style="width:50%.

Untuk tabel yang lengkap dengan titel.">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 .width:50%. Caption dan th akan secara otomatis berada pada posisi tengah dan th akan menghasilkan tulisan tebal.">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 border="1" width="75%"> <caption>Disini adalah titel tabel ini</caption> <tr> <th style="width:50%. <table style="background:#ffc" width="75%" border="1"> <tr> <th style="background:red. 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.">Header Kolom 1</th> <th style="background:red.

Jadi untuk menghilangkannya kita harus memasukkan kedua atribut tersebut dengan nilai 0. </table> Atau kita juga bisa menggunakan style CSS yaitu dengan properti border-collapse:collapse.">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..">Header Kolom 1</th> <th style="background:red. ..width:50%. Ini terjadi karena secara default atribut cellpadding dan cellspacing pada elemen table memiliki nilai masing-masing 1px. <table style="border-collapse:collapse.background:#ffc" width="75%" border="1"> <tr> <th style="background:red. <table cellpadding="0" cellspacing="0" style="background:#ffc" width="75%" border="1"> .Seperti kita lihat bahwa border dari cell tersebut terlihat terlalu tebal padahal kita membuat nilai dari atribut border adalah 1px.