HTML (HYPERTEXT MARKUP LANGUAGE) Oleh : Asep Erlan Maulana, S.Kom

Transkripsi

1 HTML (HYPERTEXT MARKUP LANGUAGE) Oleh : Asep Erlan Maulana, S.Kom 1

2 DAFTAR ISI BAB I : PENGENALAN HTML... 1 A. Pengertian HTML... 1 B. Sejarah HTML... 3 C. Penggunaan HTML... 3 D. Strukture Documen HTML...4 E. Contoh HTML... 4 BAB II : PENGOLAHAN BACKGROUND... 9 A. Background Warna... 1 B. Background Gambar...10 BAB III : PENGOLAHAN HURUF A. Heading...10 B. Paragraf...10 C. Preformatte Text...10 D. Blokquote...10 E. BR (Break)...10 F. Font...10 G. Garis Pemisah Horisontal...10 H. List/Daftar 1. OL

3 2. UL DL...10 I. Link...10 J. Image(Gambar)...10 BAB IV PENGOLAHAN TABEL...45 A. Bagian-Bagian Tabel : 1. Tag TR dan TD Contoh Tag TR dan TD...10 B. Atribut Tabel : 1. Border Align Width & Height Bgcolor & Background Colspan Rowspan Bordercolor Cellpadding & Cellspasing...10 BAB V : PENGOLAHAN FORM A. Pengertian Form...10 B. Tag-Tang didalam form Tag <FORM> Tag <INPUT>

4 3. Tag <TEXTAREA> Tag <SELECT>...10 DAFTAR PUSTAKA

5 BAB I : PENGENALAN HTML A. PENGERTIAN HTML HTML adalah Hypertext Markup Language adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi didalam sebuah browser internet. HTML merupakan pengembangan dari standar pemformatan dokumen teks yaitu Standard Generalized Markup Language (SGML). HTML sebenarnya adalah dokumen ASCII atau teks biasa yang dirancang untuk tidak tergantung pada suatu sistem operasi tertentu. B. SEJARAH HTML HTML dibuat oleh Tim Barners-Lee ketika masih bekerja untuk CERN. HTML dipopulerkan pertama kali oleh browser Mosaic. Selama awal tahun 90 an, HTML mengalami perkembangan yang sangat pesat. Setiap pengembangannya pasti akan menambahkan kemampuan dan fasilitas yang lebih baik daripada versi sebelumnya. C. PENGGUNAAN HTML Sebuah dokumen atau file HTML agar dapat dibaca langsung oleh browser disimpan dalam ekstensi.htm atau.html. Untuk menulis HTML tidak dibutuhkan perangkat lunak yang spesifik, cukup dengan text editor sederhana seperti Notepad (pada Microsoft Windows) atau beragam text editor yang ada di platform Linux dan Apple Mac OS, seperti vi, nano, joe, gedit, leafpad, notepad++, editplus dan lainlain. Ada juga perangkat lunak yang membantu dalam pembuatan halaman HTML seperti macromedia dreamweaver, adobe dreamweaver dll. 5

6 D. Struktur dokumen HTML E. Contoh HTML 1. Contoh Script <HTML> <HEAD> <TITLE>Homepage</TITLE> </HEAD> <BODY> Ini halaman index pertamaku </BODY> 6

7 </HTML> 2. Hasilnya Tag <TITLE> digunakan untuk memberi judul dokumen HTML dan judul ini dapat dilihat pada pojok kiri atas (title bar) Browser 7

8 F. Soal Latihan 1. Apa yang dimaksud dengan HTML? 8

9 BAB II : PENGOLAHAN BACKGROUND A. Background Warna Untuk membuat Latar belakang (Background) menggunakan atribut BGCOLOR pada tag <BODY>. Nilai atribut BGCOLOR berupa kode heksadesimal RGB atau bisa nama warna yang disediakan. Seperti pada contoh dibawah ini : a. Contoh Script <html> <head> <title>body_atribut Bgcolor</title> </head> <body bgcolor="#00ff00"> </body> </html> b. Hasilnya B. Background Gambar Latar belakang dengan menggunakan gambar kita menambahkan atribut BACKGROUND pada tag <BODY> nilai atribut BACKGROUND berupa file gambar (*.gif, *.jpg, *.png dan lainnya). Seperti pada contoh dibawah ini: 9

10 a. Contoh Script <html> <head> <title>body_atribut background</title> </head> <body background="petadunia.jpg"> </body> </html> b. Hasilnya : BAB III : PENGOLAHAN HURUF C. Heading Heading adalah sekumpulan kata yang menjadi judul atau subjudul dalam sebuah dokumen HTML. HTML menyediakan enam tingkatan heading, dimana 10

11 heading level 1 (<H1>) adalah yang terbesar dan heading level 6 ( <H6>) adalah yang terkecil. Seperti pada contoh dibawah ini: D. Paragraf Paragraf dalam HTML dibuat dengan tag<p>. Tag ini akan membuat baris baru dengan menyisipi satu baris kosong. Penulisan isi paragraf diapit oleh <P> dan </P>. Pengaturan posisi paragraf dapat dilakukan dengan atribut ALIGN yang diikuti dengan posisi yang diinginkan, yaitu left untuk rata kiri, center untuk rata tengah horisontal dan right untuk rata kanan. Seperti pada contoh dibawah ini: 11

12 E. Preformatted Text Tag <PRE>, membuat tampilan dokumen HTML pada browser sama dengan tampilan pada teks editor. Dengan tag <PRE>, maka tag <P> dan tag <BR> jadi tidak diperlukan lagi. a. Contoh Script <HTML> <HEAD> <TITLE> pre </TITLE> </HEAD> <BODY> <PRE> Tampilan Ini sama dengan yang ada ditext editor Team main Menang Seri kalah ============================================================= = Team A Team B Team c

13 ============================================================= == </BODY> </HTML> b. Hasilnya Output Document Html memakai tag <PRE> Output Document Html tidak pakai tag <PRE> F. Blockquote Perintah tag<blockquote> digunakan untuk menulis kutipan teks. Dengan Perintah <BLOCKQUOTE> browser akan menampilkan teks menjorok kedalam. a. Contoh Script 13

14 <HTML> <HEAD> <TITLE> Penggunaan Blockquote </TITLE> </HEAD> <BODY> <PRE> Definisi Sistem menurut Steven B Shop adalah : <BLOCKQUOTE>Sistem adalah kumpulan dari komponen-komponen saling bekerjasama untuk mencapai suatu tujuan. </BLOCKQUOTE> </BODY> </HTML> b. Hasilnya E. BR (Break) Break digunakan untuk menuliskan teks pada baris berikutnya. Break dibuat dengan tag tunggal <BR>. Tag ini akan membuat baris baru tanpa memberi baris kosong sebagaimana pada tag <P> 14

15 a. Contoh script <html> <head> <title>break</title> </head> <body> Selamat Datang di<br> smk negeri 2 <br> Tangerang Selatan <p>jl. Pondok Aren</p> </body> </html> b. Hasilnya F. FONT 15

16 HTML menyediakan fasilitas pengaturan huruf yang ditampilkan dalam document pengaturan ini dilakukan dengan tag berpasangan <FONT> dan </FONT>. Tag ini memiliki beberapa atribut untuk mengatur ukuran, jenis dan warna huruf yang digunakan. Diantarnya: 3. Atribut SIZE untuk mengatur ukuran huruf. Dimana nilai 1 untuk huruf terkecil dan nilai 7 untuk huruf terbesar. 4. Atribut FACE untuk mengatur jenis huruf yang diinginkan. Dimana nilainya berupa string nama font seperti Arial, Tahoma dll. 5. Atribut COLOR untuk mengatur warna teks yang dikehendaki, dimana nilainya dapat diisi dengan 2 cara dengan menyebut warna dalam bahasa Inggris seperti Red, Blue, dan Green atau dengan menggunakan nilai RGB (Red Blue Green) seperti #FF0000 untuk Merah a. Contoh Script <html> <head> <title>font</title> </head> <body> <font size=3>xi Multimedia</font><br> <font size=5 face="umpush">xi Multimedia</font><br> <font size=7 face="purisa" color="#ff0000">xi Multimedia</font> </body> </html b. Hasilnya 16

17 G. Garis Pemisah Horisontal Untuk mempercantik tampilan halaman HTML, kita dapat menambahkan garis horizontal dengan tag <HR>. Tag <HR> mempunyai atribut SIZE untuk menentukan ketebalan garis, atribut WIDTH untuk menentukan lebar garis, Atribut ALIGN untuk menentukan letak teks dalam garis, dan atribut NOSHADE untuk mengatur agar garis tidak disertai bayangan. a. Contoh Script <html> <head> <title>horizontal line</title> </head> <body> <h1 align="center">welcome</h1> <hr align="center" width="30%" size="5"><br> <font size=5 face="umpush">ini adalah kelas XI Multimedia</font><br> <font size=5 face="purisa" color="#ff0000">xi Multimedia</font> 17

18 <hr align="left" width="40%" size="5" noshade> </body> </html b. Hasilnya 18

19 c. List/Daftar Jenis List Atribut Fungsi Ordered list TYPE=I Daftar berurutan dengan angka romawi besar (I,II,III,...) TYPE=i Daftar berurutan dengan angka romawi kecil (i,ii,iii,...) TYPE=A Daftar berurutan dengan abjad besar (A,B,C,...) TYPE=a Daftar berurutan dengan abjad kecil (a,b,c,...) Unordered list TYPE=Circle Daftar dengan tanda lingkaran 19

20 TYPE=Square Daftar dengan tanda tanda kotak TYPE=Disk Daftar dengan tanda cakram HTML menyediakan 2 cara untuk membuat daftar atau list, yaitu: 1. Ordered list Ordered list digunakan untuk membuat daftar dimana setiap bagian memiliki nomor secara berurutan. Ordered list dimulai dengan tag <OL> dan diakhiri dengan tag </OL>, sedangkan setiap bagiannya digunakan tag <LI> tanpa tag penutup. Tag ini menggunakan angka sebagai urutan secara default, tapi bisa dirubah dengan merubah nilai atribut TYPE a. Contoh Script <html> <head> <title>ol</title> </head> <body> Daftar Program Keahlian SMK TI <OL> <LI>Teknik Komputer Jaringan <LI>Rekayasa Perangkat Lunak <LI>Multimedia <LI>Animasi <LI>Broadcast </OL> </body> 20

21 </html> b. Hasilnya Contoh OL dengan Angka Contoh OL dengan Huruf Romawi 21

22 2. Unordered list Unordered list digunakan untuk membuat daftar yang disajikan tanpa nomor urut, melainkan dengan secara default dengan tanda bulatan utuh (bullet). Tanda ini bisa dirubah dengan merubah nilai atribut TYPE untuk unordered list. Unordered list dimulai dengan tag <UL> dan diakhiri dengan tag </UL>, sedangkan setiap bagiannya digunakan tag <LI> tanpa tag penutup. Tipe lain dari list yang termasuk Unordered list adalah Directory list dan Menu list. Directory list merupakan daftar tak bernomor yang digunakan untuk menangani direktori. Tag yang digunakan adalah <DIR>... </DIR>. Menu list umumnya digunakan untuk menu pilihan. Tag yang digunakan adalah <MENU>... </MENU>. Baik Direktori list maupun Menu list menghasilkan tampilan yang sama dengan Unordered list. Berikut type-type dari Ordered list dan Unordered list. a. Contoh Script UL <html> <head> <title>ul</title> </head> <body> 22

23 Daftar Program Keahlian SMK TI <UL> <LI>Teknik Komputer Jaringan <LI>Rekayasa Perangkat Lunak <LI>Multimedia <LI>Animasi <LI>Broadcast </UL> </body> </html> b. Hasilnya c. Link Link merupakan acuan untuk membuka atau memanggil halaman web atau file tertentu. Link merupakan tag yang sangat penting dalam penggunaan HTML, karena disinilah letak perbedaan antara dokumen HTML dengan dokumen teks yang lain. Link dapat dibuat dengan memberi perintah tag anchor <A>. Anchor memiliki beberapa atribut, diantaranya 23

24 1. HREF yang berfungsi untuk membuat link ke dokumen HTML tertentu. HREF dapat juga kita gunakan untuk memanggil halaman lain diluar sistem kita atau memanggil situs-situs lain di internet. Caranya dengan mengetikkan alamat URL situs yang akan kita panggil. 2. TITLE yang berfungsi untuk memberi tanda/nama titik tertentu pada dokumen HTML yang sama. a. Contoh Script <html> <head><title>link</title> </head> <body> <h1 align="center">daftar Link</h1> <hr align="center" width="80%" size="2"> <ul disc> <li><a href=" title="google">situs google</a> <li><a href=" title="detik">situs detik</a> <li><a href="smkn2.html" title="smkn2">situs sekolah</a> </ul> </body> </html> b. Hasilnya 24

25 d. Image (gambar) Tag yang digunakan untuk menampilkan gambar pada halaman website. 1. Atribut SRC digunakan untuk menentukan sumber file gambar yang akan ditampilkan. 2. Atribut ALT berfungsi untuk memberi tulisan pengganti, apabila gambar tidak ditampilkan. Untuk pengaturan gambar yang lebih baik, tag IMG menyediakan beberapa atribut, antara lain: 1. Atribut ALIGN untuk mengatur penempatan teks pada gambar. 2. Atribut BORDER untuk memberi bingkai pada gambar. 25

26 3. Atribut HEIGHT dan WIDTH untuk mengatur tinggi dan lebar gambar. c. Contoh Script <html> <head><title>tag gambar</title></head> <body> <h1 align="center">daftar logo OS</h1> <hr align="center" width="70%" size="3" noshade> <ul> <li>logo gambar linux <img src="image/logo.png" alt="logo linux" align="bottom" height="100" width="200" border="2"> <li>logo gambar Windows <img src="/image/logo.png" alt="logo Windows" align="middle" height="100" weight="80" border="2"> </ul> <br> <center> Copyright by rlan7</center> </body> </html> d. Hasilnya 26

27 27

28 BAB IV PENGOLAHAN TABEL A. Bagian-Bagian pada Tabel 1. Tag TR dan TD e. Tag TR (Table Row) = tag untuk membuat baris. f. Tag TD (Table Data)= tag untuk membuat kolom/cell. 2. Contoh Tag TR dan TD g. Contoh Script <html > <head> <title>tag tr dan td</title> </head> <body> <table border="1"> <tr> <td>1</td> <td>2</td> </tr> <tr><td>3</td> <td>4</td> </tr></table> </body> </html> h. Hasilnya 28

29 B. Atribut Tabel 1. Border Secara default tabel ditampilkan tanpa ada garis pada tabel tersebut. Kita dapat menambahkan garis dengan menggunakan atribut border. Seperti pada contoh dibawah ini : a. Contoh Script <html > <head> <title>tag tr dan td</title> </head> <body> <table border= 5"> <tr> <td>1</td> <td>2</td> </tr> <tr><td>3</td> 29

30 <td>4</td> </tr></table> </body> </html> b. Hasilnya 2. Align Pengaturan tabel (rata tengah,kanan atau kiri) Seperti pada contoh dibawah ini : a. Contoh Script <html > <head> <title>tag tr dan td</title> </head> <body> <table border="1"> 30

31 <tr> <td>1</td> <td>2</td> </tr> <tr><td>3</td> <td>4</td> </tr></table> </body> </html> b. Hasilnya 3. Width & Height Width digunakan untuk mengatur lebar tabel pada halaman sedangkan height digunakan untuk mengatur tinggi tabel pada halaman. Kita dapat menggunakan satuan persen (%) atau pixel (px). Seperti pada contoh dibawah ini : a. Contoh Script <html> <head> <title>table_atribut height dan width</title> </head> 31

32 <body> <table width="200" height="100" border="1"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> </body> </html> b. Hasilnya 32

33 4. Bgcolor & Background Bgcolor digunakan untuk memberikan Warna background tabel,baris atau cell sedangkan atribut background digunakan untuk memberikan background gambar pada tabel. Seperti pada contoh : a. Contoh Script <html> <head> <title>table_atribut bgcolor dan background</title> </head> <body> <table width="200" height="100" border="1" bgcolor="#00ff33"> <tr> <td>1</td> <td background="image_39.jpg">2</td> </tr> <tr> <td bgcolor="#ffff33">3</td> <td>4</td> </tr> </table> </body> </html> 33

34 b. Hasilnya 5. Colspan Digunakan untuk menggabungkan kolom pada tabel. Seperti contoh dibawah ini : a. Contoh Script <html> <head> <title>table_atribut colspan</title> </head> <body> <table width="200" height="100" border="1"> <tr> <td colspan="2">1dan 2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> 34

35 </table> </body> </html> b. Hasilnya Tampilan dibrowser sebelum menggunakan colspan Tampilan dibrowser sesudah menggunakan colspan 6. Rowspan Digunakan untuk menggabungkan Baris pada tabel a. Contoh Script <html> <head> 35

36 <title>table_atribut rowspan</title> </head> <body> <table width="200" height="100" border="1"> <tr> <td rowspan="2">1dan 3</td> <td>2</td> </tr> <tr> <td>4</td> </tr> </table> </body> </html> b. Hasilnya Tampilan dibrowser sebelum menggunakan rowspan 36

37 Tampilan dibrowser sesudah menggunakan rowspan 7. Bordercolor Digunakan untuk memberikan warna pada garis atribut border. Seperti pada contoh dibawah ini: a. Contoh Script <html> <head> <title>table_atribut bordercolor</title> </head> <body> <table width="200" height="100" border="1" bordercolor="#ff0000"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> 37

38 </body> </html> b. Hasilnya 8. Cellpadding & Cellspasing Cellpadding digunakan untuk menentukan jarak antara teks dan tepi kiri sebuah sel. Sedangkan Cellspasing digunakan untuk menentukan jarak bagian sel terhadap tepi dalam bingkai tabel. Seperti pada contoh dibawah ini : a. Contoh Script <html> <head> <title>table_atribut cellpadding dan cellpasing</title> </head> <body> <table width="200" height="100" border="1" cellpadding="10" cellspacing="10"> <tr> 38

39 <td>abc</td> <td>bca</td> </tr> <tr> <td>cab</td> <td>cba</td> </tr> </table> </body> </html> b. Hasilnya 39

40 BAB V : PENGOLAHAN FORM A. Pengertian Form Form adalah sebuah daftar isian. Daftar isian ini untuk meminta informasi dari user untuk kemudian diolah. Umumnya pengolahan form dilakukan pada server dengan menggunakan script yang bersifat server-side. Untuk membuat sebuah form, tag-tag yang diperlukan adalah 1. Tag <FORM> 2 Tag <INPUT> 3 Tag <TEXTAREA> 4 Tag <SELECT> 1. Tag <FORM> Tag <FORM> merupakan tag yang digunakan untuk mendefinisikan sebuah form. Tag ini mempunyai dua atribut, yaitu METHOD dan ACTION. ATRIBUT KETERANGAN METHOD ACTION Untuk menentukan metode pengolahan form Untuk menentukan URL atau direktori dari file yang digunakan untuk mengolah form tersebut 2. Tag <INPUT> Tag <INPUT> digunakan untuk membuat komponen-komponen yang digunakan untuk meminta informasi dari user, misalnya kotak teks, kotak pilihan, tombol dan lain-lain. Tag ini tidak memerlukan tag penutup. Tag ini mempunyai beberapa atribut, yaitu : 40

41 ATRIBUT NAME SIZE MAXLENG TH VALUE CHECKED TYPE KETERANGAN Mendefinisikan nama dari objek input. Atribut ini harus dituliskan kecuali untuk tipe submit dan clear Menentukan ukuran kotak teks Menentukan jumlah maksimum karakter yang dapat dimasukkan pada kotak teks Untuk kotak teks, menentukan teks yang tertulis. Untuk check box atau radio, menentukan nilai item yang dipilih. Untuk Submit dan Reset,menentukan teks yang tertulis pada tombol. Hanya digunakan untuk check box atau radio. Menentukan pilihan yang terpilih secara default. Menentukan tipe input yang dibuat Tipe input yang dapat dibuat adalah : 1. Text, digunakan untuk membuat kotak teks 2. Password, digunakan untuk membuat kotak teks, tetapi semua karakter akan ditampilkan dengan tanda *. 3. Check Box, digunakan untuk membuat suatu daftar pilihan yang dapat dipilih lebih dari satu. 4. Radio, digunakan untuk membuat suatu daftar pilihan yang hanya dapat dipilih satu saja. 5. Reset, digunakan untuk membuat tombol yang fungsinya untuk menghapus semua isian form yang telah diberikan. 6. Submit, digunakan untuk membuat tombol yang fungsinya untuk mengirimkan data form agar diolah. 41

42 a. Contoh Script <HTML> <HEAD><TITLE>Belajar Form</TITLE></HEAD> <BODY><FORM> <PRE> Silakan masukkan data pribadi Anda : Nama :<INPUT TYPE=text NAME=txtnama> Alamat :<INPUT TYPE=text NAME=txtalamat SIZE=50> No Telpon :<INPUT TYPE=text NAME=txttelpon SIZE=10> Masukkan Password Anda : <INPUT TYPE=password MAXLENGTH=6> Hobby Anda (boleh lebih dari satu) : <INPUT TYPE=checkbox NAME=hobby VALUE=baca> Membaca <INPUT TYPE=checkbox NAME=hobby VALUE=ORaga> Olah Raga <INPUT TYPE=checkbox NAME=hobby VALUE=nonton> Nonton Film <INPUT TYPE=checkbox NAME=hobby VALUE=travel> Travelling  Jenis Kelamin : <INPUT TYPE=radio NAME=jk VALUE=pria> Laki-laki <INPUT TYPE=radio NAME=jk VALUE=wanita> Perempuan <HR> <INPUT TYPE=submit VALUE=kirim> <INPUT TYPE=Reset VALUE=hapus> </FORM></BODY></HTML> 42

43 b. Hasilnya 3. Tag <TEXTAREA> Tag <TEXTAREA> digunakan untuk membuat sebuah kotak teks multi baris. Tag ini mempunyai beberapa atribut, yaitu : ATRIBUT NAME ROWS KETERANGAN Mendefinisikan nama objek textarea Menentukan jumlah baris textarea 43

44 COLS Menentukan lebar textarea a. Contoh Script <HTML> <HEAD> <TITLE>form_Text Area</TITLE> </HEAD> <BODY> <FORM> <TEXTAREA NAME=teksarea1 ROWS=10 COLS=40> Teks ini akan tertulis di dalam textarea </TEXTAREA> </FORM> </BODY> </HTML> b. Hasilnya 44

45 4. Tag <SELECT> Tag <SELECT> digunakan untuk membuat sebuah daftar pilihan. Tag ini memiliki beberapa atribut, yaitu : ATRIBUT NAME SIZE MULTIPLE KETERANGAN Mendefinisikan nama dari objek select Menentukan berapa pilhan yang akan ditampilkan. Jika atribut ini tidak disertakan atau diberi nilai 1, pilihan akan ditampilkan sebagai dropdown list. Jika diberi nilai 2 atau lebih, pilihan akan ditampilkan sebagai scroll box. Jika nilai SIZE lebih besar dari jumlah pilihan yang ada pada <SELECT>, pilihan kosong akan ditambahkan. Jika user memilih pilihan ini maka nilainya adalah kosong. Mengizinkan untuk memilih lebih dari satu Pilihan yang disediakan oleh tag <SELECT> diberikan di dalam tag <OPTION>. Tag <OPTION> sendiri mempunyai dua atribut yaitu VALUE yang digunakan untuk memberi nama item pilihan dan SELECTED yang menunjukkan pilihan yang terpilih secara deafult. Tag <OPTION> tidak perlu ditutup dengan </OPTION>. a. Contoh Script <HTML> <HEAD><TITLE>SELECT</TITLE></HEAD> <BODY> Umur Anda : <FORM> <SELECT NAME= Umur > <OPTION VALUE= Umur TH >Umur th <OPTION VALUE= 22 TH >22 TH 45

46 <OPTION VALUE= 24 TH >24 TH <OPTION VALUE= 28 TH >28 TH <OPTION VALUE= 30 TH >30 TH </SELECT> </FORM> </BODY> </HTML> b. Hasilnya Daftar Pustaka 1. Gustiawan, Ferry, Modul Internet dan HTML 2. Mulyanto, Ainur Rofiq, Rekayasa Perangkat Lunak 46