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 menginterprestasi sebuah halaman web.

untuk

HTML: Penulisan Tag  Tag dibentuk oleh suatu kata (keyword) yang diapit oleh

tanda kurung lancip ()  Tag boleh ditulis dalam huruf kecil maupun kapital.  Tag tunggal
 Tag berpasangan

teks

Penulisan tag berpasangan tidak boleh tumpang tindih: teks → penulisan yang salah teks → penulisan yang benar

Struktur HTML  Document Information

 Document Header

 Document Body



Contoh HTML Dasar <TITLE>Facebook

My First Heading

My first paragraph

Penjelasan  Ditulis dalam tag yang menunjukkan

sebuah halaman web.  Tag

menandai bagian header

dokumen html.  Text di antara merupakan konten

halaman yang ditampilkan.

Tag, Atribut, Elemen

Heading (tag judul)  Judul paragraf  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)

... 

---

membentuk garis pemisah mendatar. Bentuk penulisan lain yang dianjurkan (XML style) : 

---

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 <sub> subscript <sup> superscript

...

...  <sup>bagian yang dicetak tinggi  <sub>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.  

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 :  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 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.

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.  Kata yang di-click  Kata yang dituju  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 :  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

contoh

Frame  Dipergunakan untuk menggabungkan lebih dari satu halaman web

ke dalam halaman lain.  Frame membagi layar dalam beberapa jendela, di mana masing-

masing layar menampilkan web page yang berbeda.

...  Tag Dasar:

. . . . <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 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: [email protected] 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.