HTML Dasar Pertemuan - 2

Ukuran: px

Mulai penontonan dengan halaman:

Download "HTML Dasar Pertemuan - 2"

Djaja Hardja
9 tahun lalu
Tontonan:

1 HTML Dasar Pertemuan - 2 Semester Ganjil 2009/2010

3 HTML? Sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser. HTML berupa kode kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).

4 HTML 2.0 (RFC1866) disetujui sebagai standard pada 22 September 1995 HTML Januari 1996 HTML Desember 1997 ISO/IEC 15445:2000 ISO HTML berdasar padahtml 4.01 Strict 15 Mei 2000

5 XHTML 1.0 gabungan HTML & XML 24 Januari 2000 XHTML February 2007

6 Ekstensi file berupa.htm atau.html Non case sensitive. Terdiri atas tag tag pembuka dan penutup (walaupun ada beberapa tag yang tidak memiliki penutup). Tag tag saling berpasangan & bersarang.

7 Document Information <html></html> Document Header <head></head> Document Body <body></body>

8 contoh.html

9 Page Title Judul dari halaman web cth : <title></title> Scripting Tempat client side script yang disertakan (javascript, vbscript, jscript) cth : <script></script>

10 Style Dipergunakan untuk mengatur bagaimana sebuah halaman web dengan berbagai komponennya hendak ditampilkan ke dalam browser cth : <style></style> Meta Meta tags, descriptions & keywords untuk mempermudah search engine dalam melakukan indexing. cth : <meta></meta>

12 Bagian dari dokumen web yang akan ditampilkan ke user cth : <body></body> Bagian ini memuat : Teks & gambar Link Server Side Script Multimedia and Special Programmed Events (Shockwave, SWFs, Java Applets, online video)

13 <body bgcolor = blue > tag attribute element attribute value

15 Berfungsi untuk menuliskan judul & sub judul

16 Untuk membuat paragraf baru, membuat text berada dalam sebuah paragraf. Tag paragraf bisa memiliki tag penutup, bisa juga tidak. <p>isi paragraf</p> cth : <p>ini adalah tulisan yang berada dalam paragraf. Dengan tag ini maka tampilan dalam web akan menjadi lebih rapi</p> <BR> : break-line (untuk berpindah ke baris selanjutnya) <HR> : Horizontal-line (untuk menambahkan garis horizontal)

17 Untuk mengatur penggunaan tulisan dalam halaman web (jenis tulisan, ukuran, warna, dll) cth : <font color=blue size=7 face= arial >Test</font> Tag lain untuk manipulasi Font: <b> tulisan tebal </b> <i> tulisan miring </i> <u> tulisan bergaris bawah </u> <sub> subscript </sub> <sup> superscript </sup>

19 Untuk memuat gambar ke dalam halaman web. cth : <img src= logo-unpas.jpg > Tag image memiliki beberapa attribute antara lain : src lokasi gambar yang akan ditampilkan width ukuran lebar gambar height ukuran tinggi gambar alt deskripsi tentang gambar title judul gambar

21 Dipergunakan untuk menghubungkan (linking) text dan image ke halaman lain atau bagian tertentu dari halaman yang sama dalam satu website atau website yang lain. cth : Link ke halaman website lain <a href= >website</a> Link ke file lain dalam satu website <a href= halaman2.html >Halaman 2</a>

22 Untuk mengakses bagian tertentu dalam sebuah halaman website, maka bagian halaman tersebut harus diberi penanda. cth : Penanda pada bagian halaman <a name= atas >ini adalah alinea pertama</a> atau <p name= atas>ini adalah alinea pertama</p> Link ke file yang sama <a href= #atas >Kembali ke Atas</a>

23 Berfungsi sebagai pembungkus komentar, agar tidak terbaca oleh browser.  cth :  <p> paragraf pertama ini menjelaskan tentang </p>

25 Dipergunakan untuk menggabungkan lebih dari satu halaman web kedalam halaman lain. cth : halaman3.html

26 halaman3.html

27 Digunakan untuk membuat daftar. Terdiri atas : Ordered List Unordered List Definition List

28 Digunakan untuk membuat daftar dimana tiap bagiannya memiliki nomor secara terurut. Contoh : <ol> <li>pemrograman Web</li> <li>sistem Informasi</li> <li>rekayasa Perangkat Lunak</li> </ol>

29 Digunakan untuk membuat daftar dimana tiap bagiannya ditandai dengan sebuah simbol. Contoh : <ul> <li>jaringan Komputer</li> <li>sistem Multimedia</li> <li>basis Data</li> </ul>

30 Digunakan untuk membuat daftar dimana tiap bagiannya ditandai dengan sebuah simbol. Contoh : <ul> <li>jaringan Komputer</li> <li>sistem Multimedia</li> <li>basis Data</li> <li>sistem Operasi</li> </ul>

31 Digunakan untuk membuat daftar dimana tiap daftar tersebut memiliki penjelasan (sub bagian). Contoh : <dl> <dt>ft</dt> <dd>teknik <dd>teknik <dd>teknik <dd>teknik <dd>teknik <dd>teknik </dl> Informatika</dd> Industri</dd> Mesin</dd> Pangan</dd> Planologi</dd> Lingkungan</dd>

32 List Atribut Value Hasil Ordered List type I I,II,III,IV, i i,ii,iii,iv, A A,B,C,D, a a,b,c,d, start 1/2/3/4/.. nilai awal list type square disc circle Unordered List

34 Digunakan untuk menyajikan data dalam bentuk kolom dan baris, tujuannya agar informasi dapat ditampilkan secara lebih terstruktur dan tabular. table row column cell

35 Elemen Penjelasan <table> </table> Mendefinisikan sebuah tabel dalm dokumen HTML. Atribut : border, cellpadding, cellspacing <th> </th> Membuat judul kolom <tr> </tr> Mendefinisikan baris dalam tabel. Atribut : align (left, center, right), valign (top, middle, bottom) <td> </td> Mendefinisikan kolom tabel. Atribut : align (left, center, right), valign (top, middle, bottom), colspan, rowspan.

36 Baris 1 Baris 1 Kolom 1 Kolom 2 Baris 2 Baris 2 Kolom 1 Kolom 2 <table> <tr> <td>baris1 <td>baris1 </tr> <tr> <td>baris2 <td>baris2 </tr> </table> kolom1</td> kolom2</td> kolom1</td> kolom2 </td>

37 Colspan Menggabungkan beberapa cell (column) dalam satu baris. Rowspan Menggabungkan beberapa cell (row) dalam satu kolom. 5 rowspan = colspan = 2

38 Cellspacing Jarak antara satu cell dengan cell yang lain. Cellpadding Jarak antara tepi cell dengan isi cell.

39 Digunakan untuk membungkus tag-tag lain agar memiliki perilaku yang sama. <div style: color:red > <h3>pemrograman Web</h3> <p>ini adalah kuliah pemrograman web</p> </div>

40 Digunakan sebagai sistem blok untuk membuat lapisan layout pada halaman. <div id= header >... </div> <div id= content >... </div> <div id= footer >... </div>

41 Salhazan Nasution, SKom., Pemrograman Web. Teknik Informatika Universitas Islam Indonesia. Herman Tolle, Sejarah dan Perkembangan Internet. Teknik Elektro Universitas Brawijaya.

dokumen-dokumen yang mirip

HTML. Hypertext Markup Language. Pemrograman Web 1. Genap

HTML. Hypertext Markup Language. Pemrograman Web 1. Genap HTML Hypertext Markup Language Pemrograman Web 1 Genap 2009 2010 HTML HTML? Sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser.