SESION 3 : Memformat Dokumen html (lanjutan) PEMROGRAMAN WEB SESION 3 : Memformat Dokumen html (lanjutan) STMIK MERCUSUAR By : Abdur Rohman, S.Kom E-mail Contact : 1. abdurrohman.ypni@gmail 2. oman@mercusuar.ac.id 3. bang_oman_ypni@yahoo.com 1
Memformat Dokumen HTML Physical Format Physical format adalah format terhadap fisik suatu font. Tag-tag yang termasuk physical format adalah sebagai berikut : <B> untuk menampilkan huruf tebal. <I> untuk menampilkan huruf miring. <U> untuk menampilkan garis bawah pada teks. <TT>untuk menampilkan huruf seperti huruf mesin ketik. <STRIKE>untuk membuat garis horizontal di tengah huruf. <BIG>untuk menampilkan ukuran huruf yang lebih besar. <SMALL>untuk menampilkan ukuran huruf yang lebih kecil. <SUB>untuk menampilkan subscript. <SUP>untuk menampilkan superscript. Semua tag-tag tersebut memerlukan penutupnya masing-masing.
Memformat Dokumen HTML
Memformat Dokumen HTML Tag <BLOCKQUOTE> Digunakan untuk menandai bagian yang dikhususkan pada sebuah dokumen, misalnya kutipan kitab suci, kata mutiara dll. Teks yang diberi ini akan menjorok ke dalam.
Memformat Dokumen HTML Tag <FONT> Digunakan untuk mengatur jenis, ukuran dan warna font
Memformat Dokumen HTML Menggunakan Tabel HTML menyediakan tag-tag untuk membuat sebuah tabel, yaitu : Tag <TABLE> : untuk mendefinisikan sebuah tebel Tag <TR> : untuk mendefinisikan baris tabel Tag <TH> : untuk mendefinisikan judul tiap kolom atau baris Tag <TD> : untuk mendefinisikan isi tiap kolom Atribut untuk tag <TABLE> adalah sebagai berikut : ALIGN : Posisi horizontal tabel BACKGROUND : Menentukan gambar latar belakang tabel BGCOLOR : Menentukan warna latar belakang tabel BORDER : Menentukan tebal bingkai tabel BORDERCOLOR : Menentukan warna bingkai tabel BORDERCOLORLIGHT: Menentukan warna depan bingkai tabel BORDERCOLORDARK: Menentukan warna bayangan bingkai tabel CELLSPACING : Menentukan jarak spasi antar sel CELLPADDING : Menentukan jarak isi sel dengan bingkai HEIGHT : Menentukan tinggi tabel WIDTH : Menentukan lebar tabel VALIGN : Menentukan posisi vertikal teks dalam sel
Memformat Dokumen HTML
Memformat Dokumen HTML Menggunakan Merger pada Tabel Pada saat kita hendak membuat table, ada kalanya kita membutuhkan format-format tertentu. Format tersebut disesuaikan dengan kebutuhan dari form-form yang hendak dipakai. Seperti : JUDUL NO Nama Alamat No. Telp Atribut yang digunakan untuk menggabungkan cell pada tabel adalah : Colspan (untuk menggabungkan beberapa kolom) Rowspan (untuk menggabungkan beberapa baris)
Memformat Dokumen HTML <head> <title>Untitled Document</title> </head> <body> <table width="535" border="1"> <tr> <td colspan="4"><div align="center">JUDUL</div></td> </tr> <td width="28"><div align="center">No</div></td> <td width="103">Nama</td> <td width="149">Alamat</td> <td width="122">No. Telp</td> <td> </td> </table> </body> </html>
Memformat Dokumen HTML Images Pertengahan tahun 90'an website-website yang ada tidak memiliki gambar, karena browser yang ada tidak memiliki kemampuan untuk menampilkan gambar. Tetapi sekarang website tanpa gambar akan terlihat membosankan, tetapi website dengan banyak gambar akan terlihat menyebalkan. Jadi, gunakan gambar seperlunya, keluarkan semua imajinasi dan nilai seni anda untuk dapat membuat website yang nyaman dilihat. Saya tidak akan mengajarkan bagaimana cara membuat gambar disini, ada kategori lain diwebsite ini untuk belajar mendesain, anda dapat belajar menggunakan Photoshop. Gambar yang dipasang di website disarankan menggunakan bertipe file gif atau jpg. Untuk memasang image anda memerlukan tag <img>. Tag <img> tidak memerlukan penutup dan memiliki atribut src untuk mengambil gambar dari suatu alamat. ] Coba contoh berikut ini: <img src="images/artikel/introhtml_02.gif" width="313" height="43" alt="Contoh Gambar">
Memformat Dokumen HTML Images Atribut src disini sama dengan atribut href pada tag <a> yang berisi alamat posisi gambar. Pada contoh kode diatas anda memiliki gambar introhtml_02.gif yang berada pada folder images. Jika anda tidak memiliki file tersebut maka gambar tidak ditampilkan. Atribut width dan height merupakan opsional, tapi saya sarankan untuk mencantumkannya agar browser mengetahui ukuran gambar apabila gambar gagal ditampilkan. Atribut alt berguna untuk menampilkan teks pada gambar jika gambar gagal ditampilkan atau belum selesai ditampilkan. Anda dapat memberikan garis tepi pada gambar dengan menambahkan atribut border <a href="http://www.belajarweb.com"> <img border="1"src = "images/introhtml_02.gif" width="313" height="43"></a>
Komentar Anda dapat menuliskan komentar dikode HTML, komentar berguna apabila anda ingin kembali mengutak-atik kode maka anda ingat kode tersebut fungsinya apa. Komentar hanya untuk memudahkan anda saja. Komentar tidak ditampilkan oleh browser. Untuk menulis komentar diawali dengan <!-- dan diakhiri dengan --> lihat contoh berikut ini: <!--Kode untuk menampilkan nama saya--> <p>Nama saya <b>Dhimas Anggara</b></p>
Memformat Dokumen HTML
Copyright : © NamaAnda_belajarweb-2013 TUGAS ! BUATLAH TAMPILAN WEB SEDERHANA BERISI DATA PRIBADI ANDA MENGGUNAKAN TABEL! Subject : tugas tabel BIODATA PRIBADI Nama Nama Anda NIM NIM Anda Jurusan Jurusan Anda Jenjang Jenjang Anda Jenis Kelamin Jenis Kelamin Anda T.T.L T.T.L Anda Alamat Alamat Anda Hobby Hobby Anda Copyright : © NamaAnda_belajarweb-2013