Edisi 1 UNIVERSITAS NEGERI SEMARANG Badan Pengembangan Teknologi Informasi dan Komunikasi Modul Pelatihan H T M L
U N I V E R S I T A S N E G E R I S E M A R A N G Modul Pelatihan HTML Akhmad Munawar http://about.me/akhmad.munawar
M O D U L P E L A T I H A N H T M L Bagian 1 Berkenalan dengan HTML H ypertext Markup Language (HTML) adalah bahasa yang digunakan untuk menulis halaman web. Ciri utama dokumen HTML adalah adanya tag dan elemen. Elemen dalam dokumen HTML dikategorikan menjadi dua yaitu elemen <HEAD> yang berfungsi memberikan informasi tentang dokumen tersebut dan elemen <BODY> yang menentukan bagaimana isi suatu dokumen ditampilkan oleh browser, seperti paragraf, list(daftar), tabel dan lain-lain. Sedangkan tag dinyatakan dengan tanda lebih kecil < ( tag awal ) dan tanda lebih besar > (tag akhir). Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda "/"). Dokumen HTML mempunyai tiga buah tag utama yang membentuk struktur dari dokumen HTML yaitu HTML,HEAD dan BODY Tag HTML berfungsi untuk menyatakan suatu dokumen HTML, tag HEAD berfungsi untuk memberikan informasi tentang dokumen HTML dan tag BODY berfungsi untuk menyimpan informasi atau data yang akan ditampilkan dalam dokumen HTML. Contoh penulisan tag HTML sederhana : <html> <head> <title> Letakkan judul situs di sini </title> </head> <body> </body> </html> 1
LISTS Terdapat lima tipe list yang dapat digunakan, yaitu : Unordered Lists <UL> : Membuat daftar item dengan tanda bullet. List entries didefinisikan dengan tag <li>. <ul> <li> item nomer 1 <li> item nomer 2 <li> item nomer 3 </ul> Hasil dari kode di atas adalah: Item nomer 1 Item nomer 2 Item nomer 3 Ordered Lists <OL> : Juga digunakan untuk membuat daftar item, dengan tiap item dapat menggunakan angka arab atau romawi. List entries juga didefinisikan dengan <li> tag. <ol type=i> <li> item nomer 1 <li> item nomer 2 <li> item nomer 3 </ol> Hasil dari kode di atas adalah : 1. Item nomer 1 2. Item nomer 2 3. Item nomer 3 Definition Lists <DL> : <dl> <dt> item pertama. <dd> penjelasan tentang item pertama. <dt> item kedua. <dd> penjelasan tentang item kedua </dl> Hasil dari kode di atas adalah : Item pertama. Penjelasan tentang item pertama. Item kedua. Penjelasan tentang item kedua 2
IMAGES Digunakan untuk menampilkan image atau animasi gif pada halaman web Anda. Atribut : alt, align=(center, left, right), hspave, vspace, border, width & height <img src="logo.gif" alt="ini adalah logo halaman pembuka" width=200 height=100> <img src="logo.gif" hspace=10 vspace=5 align=right border=2> TABLE Dalam pembuatan homepage, tabel memiliki fungsi yang tidak kalah penting dengan tag-tag HTML lainnya. Pertama tabel berfungsi untuk menampilkan informasi secara terstruktur, ringkas dan mudah dibaca, kedua berfungsi untuk mengatur tampilan homepage agar lebih menarik. Tag utama untuk tabel yaitu <TABLE> </TABLE> dan untuk membuat judul tabel tag-nya table header <TH> </TH> lalu untuk membuat data tabel atau isi tabel menggunakan tag table Data <TD></TD> dan untuk membuat baris adalah memakai tag Table Rows <TR> </TR>. <table border ="1" width= "500" align="center"> <td> baris 1 kolom 1 </td> <td> baris 1 kolom 2 </td> <td> baris 2 kolom 1 </td> <td> baris 2 kolom 2 </td> </table> Beberapa perintah penting untuk membuat tabel: 1. <table border= 1 >... </table> merupakan perintah utama d alam pembuatan tabel, tabel dengan ketebalan 1px 2.... tag untuk membuat baris 3. <td>... </td> tag untuk membuat kolom/cell 4. colspan tag untuk merge/melebarkan kolom/cell 5. rowspan tag untuk merge/melebarkan baris perintah HTML untuk membuat tabel seperti berikut ini: Satu Dua Tiga Empat 3
<html> <head> <title> Latihan Table </title> </head> <body> <table border= 1 > <td align= center >Satu</td> <td align= center >Dua</td> <td align= center >Tiga</td> <td align= center >Empat</td> </table> </body> </html> Perintah HTML untuk membuat tabel seperti berikut ini: Satu Dua Tiga <html> <head> <title> Latihan Table Dua </title> </head> <body> <table border= 1 > <td colspan= 2 align= center >Satu</td> <td align= center >Dua</td> <td align= center >Tiga</td> </table> </body> </html> 4