Bab5 transparansi

(1)

1

WEBSITE

Layanan World Wide Web (WWW) adalah layanan yang mampu menampilkan dokumen dalam bentuk teks, grafis dan dapat bersifat interaktif.

Pembuatan website ini menggunakan sebuah bahasa yang dinamakan Hyper Text Markup Language

(2)

2

PENGENALAN HTML

Dengan menggunakan HTML, kita dapat :

 Mendesain tampilan website beserta isinya

 Membuat form interaktif untuk formulir pendaftaran,

belanja online, dan lain-lain

 Menambahkan gambar, suara maupun video

(3)

3

PENULISAN HTML

 Memerlukan sebuah editor sebagai media penulisan

dokumen HTML. Editor yang dapat digunakan antara lain Notepad, Macromedia Dreamweaver, Frontpage.

 Hasil penulisan sebuah dokumen HTML ditampilkan

(4)

4

TAG (PERINTAH) HTML

Bentuk dasar :

<BEGIN TAG>….</END TAG>

Bentuk lengkap :

<ELEMEN ATTRIBUTE=VALUE>

elemen  nama tag

attribute  attribute dari tag value  nilai suatu attribute

(5)

5

STRUKTUR DOKUMEN HTML

 Tag HTML : <HTML> ... </HTML>

 Tag HEAD _:<HEAD> ... <HEAD>

 Tag TITLE : <TITLE> ... <TITLE>

(6)

6

STRUKTUR DOKUMEN HTML

<HTML>

<HEAD>

<TITLE>...judul...</TITLE> </HEAD>

<BODY>

...isi... </BODY>

(7)

7

ELEMEN DASAR HTML (1)

 Blok Level Elemen

tag : <h1>....</h1>

 Paragraf

tag : <p>...</p>

 Huruf :

tag : <font atribut>...</font>

(8)

8

ELEMEN DASAR HTML (2)

Beberapa contoh tag untuk memformat teks :

<B>...</B> Memformat teks untuk dicetak

tebal

<U>...</U> Memformat teks dengan garis bawah

(9)

9

LINKS

 Digunakan untuk membuat link ke halaman lain.

 Tag :

 Tulisan yang terletak antara <A HREF> dan </A> akan

terdapat garis bawah.

(10)

10

LISTS

 Unordered Lists

Membuat daftar item dengan tanda bullet

 Ordered Lists

membuat daftar item, yang memiliki nomor secara urut.

 Definition Lists

(11)

11

CONTOH LISTS (1)

<HTML> <BODY>

<H4>An Unordered List:</H4> <UL>

<LI>Coffee</LI> <LI>Tea</LI> <LI>Milk</LI> </UL>

</BODY> </HTML>

An Unordered List

• Coffee

• Tea

(12)

12

CONTOH LISTS (2)

<HTML> <BODY>

<H4>An Ordered List :</H4> <OL>

<LI>Coffee</LI> <LI>Tea</LI> <LI>Milk</LI> </OL>

</BODY> </HTML>

An Ordered List :

(13)

13

CONTOH LISTS (3)

<HTML> <BODY>

<H4>A Definition List :</H4> <DL>

<DT>Coffee</DT>

<DD>Black hot drink</DD> <DT>Milk</DT>

<DD>White cold drink</DD> </DL>

</BODY> </HTML>

A Definition List :

Coffee

Black hot drink Milk

(14)

14

IMAGES

Digunakan untuk menampilkan gambar atau animasi pada halaman web. Format gambar yang dapat digunakan :

PICT, GIF, JPEG, BMP, dan lain-lain

Tag : <IMG>

disertai dengan atribut :

SRC  menentukan sumber gambar yang akan ditampilkan

ALT  alternatif bila browser berbasis teks

ALIGN  mengatur perataan teks (LEFT/CENTER/RIGHT)

Contoh :

(15)

15

TABLES

Berguna untuk membuat halaman web “terbagi” pada beberapa kolom/baris.

Tag : <TABLE>...</TABLE>

Elemen utama dalam pembuatan table :

<TR>.. </TR>  table row : membuat baris baru pada tabel

<TD>.. </TD>  table data : membuat kolom baru pada tabel

(16)

16

<TD>Lab. Internet Dasar</TD> <TD>Gd 3 Lt 2 Depok</TD> </TR>

</TABLE>

Nama Lab. Lokasi

Lab. Internet Dasar

(17)

17

FRAMES

Digunakan untuk membagi-bagi window browser menjadi beberapa bagian sehingga berbagai informasi dapat ditampilkan pada satu saat.

Tag :

untuk membentuk baris frame

<FRAMESET ROWS=”val1,val2,…”>

untuk membentuk kolom frame

(18)

18

CONTOH FRAMES (1)

<html>

<frameset rows="25%,50%,25%">

<frame src="frame_a.htm" />

<frame src="frame_b.htm" />

<frame src="frame_c.htm" />

</frameset>

</html>

Frame a

Frame b

(19)

19

CONTOH FRAMES (2)

<html>

<frameset cols="25%,50%,25%">

</frameset>

</html>

Frame

(20)

20

CONTOH FRAMES (3)

<html>

<frameset rows="50%,50%">

<frameset cols="25%,75%">

</frameset>

</html>

Frame a