pengembangan web (it133) ramos somya, s.kom., m.cs. · html hypertext markup language html bahasa...
TRANSCRIPT
Pengembangan Web (IT133)
Ramos Somya, S.Kom., M.Cs.
HTML Dasar & Layouting
(tag, elemen, atribut, link, frame, table)
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
<br>
Tag berpasangan
<p> teks </p>
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>
<p>My first paragraph</p>
</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: <p>paragraf</p>
Suatu paragraf akan terlihat dibatasi oleh satu baris kosong
sebelum dan sesudahnya.
...
<br> : 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).
<font color=“blue” size=“7” face=“arial”>Test</font>
Font Tag
Memformat suatu bagian kalimat dengan ukuran, jenis
huruf, atau warna tertentu.
Tag : font Parameter : size, face, color
...
...
...
Tag lain untuk manipulasi Font:
<b> tulisan tebal</b>
<i> tulisan miring </i>
<u> tulisan bergaris bawah</u>
<sub> subscript </sub>
<sup> superscript </sup>
...
...
<sup>bagian yang dicetak tinggi</sup>
<sub>bagian yang dicetak rendah</sub>
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 <p> </p> )
Value dari align : absbottom, absmiddle, baseline, bottom, left,
middle, right, texttop, top
Contoh : <p> Fakultas Teknologi Informasi <img src=”logo.gif ”
align=”bottom”> UKSW</p>
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 bentukpixel.
<p><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.</p>
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.
<!--komentar-->
Contoh:
<!--Ini adalah contoh paragraf-->
<p> paragrafpertamainimenjelaskantentang…
</p>
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:
<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: [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.