8/9/2019 Modul TIK XI Versi 02.00.03.01(Revisi)

1/23

BAB 1IBAB 1IPEMROGRAMAN HTMLPEMROGRAMAN HTML

((HHyperyperTTextext MMarkuparkup LLanguage)anguage)

Part IIIPart III

Oleh:

M. Ade Erik, S.Pd.

NIP. 19870911 2010 01 1006Doc versi: 02.00.03.01/TIK/XI-1/2010-2011

TEKNOLOGI INFORMASI DAN

KOMUNIKASISMA NEGERI 1 TEGAL

2010

8/9/2019 Modul TIK XI Versi 02.00.03.01(Revisi)

2/23

yHTML Links (Lanjutan)

Gunakan tanda / setelah nama folder. Ex

x Link index1

x Bila ingin membuat link terhadap file index1.htmlyang berada dalam folder folderku

Gunakan tanda ../

x Link index2

x Bila ingin membuat link terhadap file index2.html

yang berada diluar folder satu tingkat.

8/9/2019 Modul TIK XI Versi 02.00.03.01(Revisi)

3/23

yHTML Links (Lanjutan)

Bila ingin membuat link dan membuka padajendela baru, maka gunakan attribut

target=_blank Ex.x ke

Index1

8/9/2019 Modul TIK XI Versi 02.00.03.01(Revisi)

4/23

yHTML Links (Lanjutan)

Bila ingin membuat link terhadap bagiantertentu pada dokumen yang sama, maka

gunakan attribut name dan # definiskan terlebih dahulu bagian tertentu

tersebut dengan attribut name Ex.

x Part I

dan untuk membuat link terhadap bagian part1 gunakan tanda # Ex.

x Ke Part 1

8/9/2019 Modul TIK XI Versi 02.00.03.01(Revisi)

5/23

8/9/2019 Modul TIK XI Versi 02.00.03.01(Revisi)

6/23

yHTML Image (Lanjutan)

Untuk menampilkan background berupagambar, gunakan attribut background Ex.

x

Untuk memberikan alignment pada gambar gunakan

attribut align=bottom/middle/top Ex

x Ini Gambar

8/9/2019 Modul TIK XI Versi 02.00.03.01(Revisi)

7/23

yHTML List

HTML List terdiri atas 2 jenis, yaitu jenisunordered list dan ordered list.Untuk

unordered list menggunakan tag sedangkan untukordered list menggunakan tag . Kemudian gunakan tag

untuk mendefinisikan item list nya.

8/9/2019 Modul TIK XI Versi 02.00.03.01(Revisi)

8/23

y Ex.

Unordered List

x Disc bullets list:

x

x Apples

x Bananas

x Lemons

x Oranges

x

8/9/2019 Modul TIK XI Versi 02.00.03.01(Revisi)

9/23

y Ex.

Ordered List

x Letters list:

x

x Apples

x Bananas

x Lemons

x Oranges

x

8/9/2019 Modul TIK XI Versi 02.00.03.01(Revisi)

10/23

y Ex

List1

SubList1List2

SubList2-1Sublist2-2

Sublist2-2-1Sublist2-2-2

8/9/2019 Modul TIK XI Versi 02.00.03.01(Revisi)

11/23

y HTML Form

Untuk mendefinisikan suatu form, gunakan tagform dengan struktur dasar berikut ini.

x

x

x

8/9/2019 Modul TIK XI Versi 02.00.03.01(Revisi)

12/23

y Macam-macam tipe elemen input

Input Element Type DeskripsiType=text Input tipe jenis text field

Type=password Input tipe jenis password field

Type=radio Input tipe jenis radio button

Type=checkbox Input tipe jenis checkboxes

Type=submit Input tipe jenis submit button

Type=button Input tipe jenis button

Type=file Input tipe jenis upload file

8/9/2019 Modul TIK XI Versi 02.00.03.01(Revisi)

13/23

y Ex.

Nama:

Password:

Jenis Kelamin:

Pria

Wanita

Hobi:

Renang

Bersepeda

Upload Photo:

8/9/2019 Modul TIK XI Versi 02.00.03.01(Revisi)

14/23

yHTML Form (Lanjutan)

y Untuk membuat menu dropdown. Ex.

Januari

Maret

8/9/2019 Modul TIK XI Versi 02.00.03.01(Revisi)

15/23

y Untuk membuat text area. Ex

test

8/9/2019 Modul TIK XI Versi 02.00.03.01(Revisi)

16/23

y Untuk membuat fieldset

Personal information:

Male

Female

8/9/2019 Modul TIK XI Versi 02.00.03.01(Revisi)

17/23

8/9/2019 Modul TIK XI Versi 02.00.03.01(Revisi)

18/23

y Buatlah contoh halaman web sepertidiatas dengan menggunakan notepad ++

y Save dengan nama dan ektensi filesample3.html

8/9/2019 Modul TIK XI Versi 02.00.03.01(Revisi)

19/23

8/9/2019 Modul TIK XI Versi 02.00.03.01(Revisi)

20/23

8/9/2019 Modul TIK XI Versi 02.00.03.01(Revisi)

21/23

8/9/2019 Modul TIK XI Versi 02.00.03.01(Revisi)

22/23

8/9/2019 Modul TIK XI Versi 02.00.03.01(Revisi)

23/23