HTML Dasar & Layouting (tag, elemen, atribut, link, frame, table) Pengembangan Web (IT133) Ramos Somya, S.Kom., M.Cs.

HTML HyperText Markup Language HTML bahasa pemrograman HTML markup language Digunakan untuk memberi tahu web browser bagaimana menampilkan halaman web. Sebuah HTML file harus mempunyai ekstensi.htm atau.html. dapat dibuat menggunakan text editor (notepad, edit plus, dsb).

Web Browser Tugas dari web browser (IE, Mozilla) adalah membaca dokumen HTML dan menampilkannya sebagai halaman web. Web browser tidak menampilkan tag HTML, tapi menggunakan / membaca tag tersebut untuk menginterprestasi sebuah halaman web.

HTML: Penulisan Tag Tag dibentuk oleh suatu kata (keyword) yang diapit oleh tanda kurung lancip (<tag>) Tag boleh ditulis dalam huruf kecil maupun kapital. Tag tunggal Tag berpasangan teks Penulisan tag berpasangan tidak boleh tumpang tindih: <tag1><tag2> teks </tag1></tag2> penulisan yang salah <tag1><tag2> teks </tag2></tag1> penulisan yang benar

Struktur HTML Document Information <html></html> Document Header <head></head> Document Body <body></body>

Contoh HTML Dasar <html> <HEAD> <TITLE>Facebook</TITLE> </HEAD> <body> <h1>my First Heading</h1> my first paragraph </body> </html>

Penjelasan Ditulis dalam tag <html></html> yang menunjukkan sebuah halaman web. Tag <header></header> menandai bagian header dokumen html. Text di antara <body></body> merupakan konten halaman yang ditampilkan.

Tag, Atribut, Elemen

Heading (tag judul) <hn>judul paragraf</hn> n = 1,2,3,4,5,6 (tingkat judul) Untuk menuliskan judul suatu paragraf.

Paragraph, HR, dan BR Tag Untuk membuat paragraf baru, membuat text berada dalam sebuah paragraf: paragraf Suatu paragraf akan terlihat dibatasi oleh satu baris kosong sebelum dan sesudahnya.

... : break-line (untuk berpindah ke baris selanjutnya)

... <hr> membentuk garis pemisah mendatar. Bentuk penulisan lain yang dianjurkan (XML style) : <hr />

Font Tag Untuk mengatur penggunaan tulisan dalam halaman web (jenis tulisan, ukuran, warna, dll). Test

Font Tag Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu. Tag : font Parameter : size, face, color

... Tag lain untuk manipulasi Font: tulisan tebal tulisan miring tulisan bergaris bawah subscript superscript

... bagian yang dicetak tinggi bagian yang dicetak rendah Untuk menandai bagian karakter agar dicetak tinggi atau rendah, biasanya untuk rumus matematika atau kimia.

Image Tag Untuk memuat gambar ke dalam halaman web. <img src="namafilegambar"> Atribut src digunakan untuk menentukan source dari image yang akan ditampilkan. Image: ekstensi.gif,.jpg, atau.png. Value lokasi image bisa merujuk ke absolute path src = c:/gambar/logo.gif src = http://www.google.co.id/intl/id_id/images/logo.gif Value lokasi image bisa juga merujuk ke relative path src= images/logo.gif src=../../images/logo.gif

... Atribut alt Alt digunakan untuk mendefinisikan alternate text untuk sebuah image Contoh : <img src="boat.gif" alt="big Boat"> Alt juga akan memberitaukan kepada pengunjung web bila gambar yang apa yang sedang ditampilkan bila gambarnya tidak muncul

... Atribut align Gunakan atribut align untuk mentukan posisi dari gambar bila diletakan dalam paragraf (tag ) Value dari align : absbottom, absmiddle, baseline, bottom, left, middle, right, texttop, top Contoh : Fakultas Teknologi Informasi <img src= logo.gif align= bottom > UKSW Align juga bisa digunakan untuk mengatur float dari gambar dalam paragraf, bandingkan kedua contoh berikut :

... Atribut width dan height Digunakan untuk menyesuaikan besar image Width (lebar) dan height (tinggi) didefinisikan dalam bentuk pixel. <img src ="logo.gif" align ="left" width="48px" height="48px"> A paragraph with an image. The align attribute of the image is set to "left". The image will float to the left of this text.

Hyperlink Tag Dipergunakan untuk menghubungkan (linking) text dan image ke halaman lain atau bagian tertentu dari halaman yang sama dalam satu website atau website yang lain. <a href="link">kata yang di-click</a> <a name="#acuan">kata yang dituju</a> Link = Alamat URL atau nama file dan/atau acuan yang dituju. Acuan = Kata sembarang sebagai penanda membentuk link ke URL/file/bagian dokumen lain.

Menggunakan image sebagai sebuah link Image juga bisa digunakan untuk menggantikan teks pada link. Contoh : <a href= http://www.google.com ><img src= logo.gif border= 0 ></a> Perhatikan atribut border= 0 digunakan untuk mengilangkan border pada image yang akan muncul secara otomatis bila image digunakan pada link

Tag Komentar Berfungsi sebagai komentar, agar tidak terbaca oleh browser.  Contoh:  paragrafpertamainimenjelaskantentang

Enumerasi (List, Unnumbered List, Ordered List List item di gunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list). Ada tiga macam list yang bisa anda tambahkan ke document HTML: 1. Unordered List (Bullet) 2. Ordered List (Numbering) 3. Definition List

Unordered List

Ordered List

contoh

Frame Dipergunakan untuk menggabungkan lebih dari satu halaman web ke dalam halaman lain. Frame membagi layar dalam beberapa jendela, di mana masingmasing layar menampilkan web page yang berbeda.

... Tag Dasar: <frameset>.... </frameset> <frame/> <noframes>.... </noframes> Basic Atributes - cols = values. (value biasanya dituliskan dalam % menunjukkan besar pembagian area. - rows = values - name = frame_name - src = frame_source(url) - target = frame_name

Tabel Digunakan untuk menyajikan data dalam bentuk kolom dan baris, tujuannya agar informasi dapat ditampilkan secara lebih terstruktur dan tabular.

Table Elements

contoh

colspan dan rowspan Colspan dan rowspan adalah html attribute yang digunakan untuk memperlebar atau menggabungkan beberapa kolom atau row menjadi satu, sehingga satu unit kolom atau row ini menjadi lebih lebar. Colspan adalah kependekan dari column span yang bisa mengartikan sebagai berapa kotak ke samping sedangkan rowspan mengartikan berapa kotak ke bawah. Attribute colspan diletakkan dalam tag <td> dan anda bisa mengatur value nya berapa kotak yang akan di span.

contoh

... Rowspan tugasnya untuk menyatukan kotak- kotak row kebawah sehingga menjadi satu unit yang panjang.

Tugas Take Home

Ketentuan Dikerjakan maksimal 2 mahasiswa. Dikirimkan ke email: ramos.somya@gmail.com paling lambat hari Rabu, 5 Februari 2014 pukul 12.00WIB. Subject email:tgs<spasi>1<spasi>pw<spasi>kelas contoh:tgs 1 PW A Nama file:tgs_pw_1_kelas_nim1_nim2.html contoh:tgs_pw_1_a_672014001_672014002.html Subject email dan nama file yang dikirimkan harus sesuai ketentuan, jika tidak sesuai maka tidak akan dinilai.