00000011110000111101010001110

01110000111010101000011111010

11100011001001010000111101011

01100011100111111100011000010

10101010100110010101010101010

10101000011110001111000111001

10011001100110011000111110001

11110111010100011111111100010

10101010101010101010101010101

01010101010101010101011111111

01000011100001111101010111110

00000111110111100001111000111

11110000011111011100000111000

0000011111100101010101010101

HTML

Kelompok 2

Ilham D. Rianjaya

Kavian Kadmaer

Richard Situmorang

Rudi Renwarin

Topan H. Nicholas

i

Daftar Isi

Daftar Isi................................................................................................................... i

Daftar Gambar ........................................................................................................ iii

Daftar Tabel ........................................................................................................... vi

1 HTML (Hypertext Markup Language) dan HTTP (Hypertext Transfer

Protokol) .......................................................................................................... 1

2 Cara Membuat Halaman Web .......................................................................... 1

3 Struktur Dasar HTML ...................................................................................... 4

4 Kode Warna ..................................................................................................... 5

5 Body ................................................................................................................. 6

5.1 Bgcolor ...................................................................................................... 7

5.2 Background ............................................................................................... 8

5.3 Text ........................................................................................................... 9

5.4 Link ........................................................................................................... 9

5.5 Vlink ....................................................................................................... 10

5.6 Alink ....................................................................................................... 11

5.7 Leftmargin............................................................................................... 11

5.8 Topmargin ............................................................................................... 11

6 Heading .......................................................................................................... 12

7 Paragraf Baru ................................................................................................. 13

8 Line Break ...................................................................................................... 14

9 No Line Break ................................................................................................ 15

ii

10 Font ................................................................................................................ 15

10.1 Size .......................................................................................................... 16

10.2 Face ......................................................................................................... 17

10.3 Color ....................................................................................................... 17

11 Marquee ......................................................................................................... 18

11.1 DIRECTION ........................................................................................... 19

11.2 BEHAVIOR ............................................................................................ 19

11.3 SCROLL DELAY ................................................................................... 20

11.4 BGCOLOR ............................................................................................. 20

12 Horizontal Line .............................................................................................. 20

13 List ................................................................................................................. 22

13.1 Ordered List ............................................................................................ 22

13.2 Unordered List ........................................................................................ 23

13.3 Definition List ......................................................................................... 24

14 Preformatted Text .......................................................................................... 25

15 Extended Quote .............................................................................................. 26

16 Hypertext Link ............................................................................................... 27

17 Tabel .............................................................................................................. 29

17.1 Membuat tabel ......................................................................................... 29

17.2 Menambahkan Heading cell .................................................................... 30

17.3 Pemformatan table .................................................................................. 30

18 Image .............................................................................................................. 32

iii

Daftar Gambar

Gambar 1 .................................................................................................... 2

Gambar 2 .................................................................................................... 2

Gambar 3 .................................................................................................... 3

Gambar 4 .................................................................................................... 3

Gambar 5 .................................................................................................... 4

Gambar 6 .................................................................................................... 4

Gambar 7 .................................................................................................... 4

Gambar 8 .................................................................................................... 5

Gambar 9 .................................................................................................... 6

Gambar 10 .................................................................................................. 7

Gambar 11 .................................................................................................. 7

Gambar 12 .................................................................................................. 8

Gambar 13 .................................................................................................. 8

Gambar 14 .................................................................................................. 8

Gambar 15 .................................................................................................. 9

Gambar 16 .................................................................................................. 9

Gambar 17 .................................................................................................. 9

Gambar 18 ................................................................................................ 10

Gambar 19 ................................................................................................ 10

Gambar 20 ................................................................................................ 10

Gambar 21 ................................................................................................ 11

Gambar 22 ................................................................................................ 11

Gambar 23 ................................................................................................ 11

Gambar 24 ................................................................................................ 12

Gambar 25 ................................................................................................ 12

Gambar 26 ................................................................................................ 13

Gambar 27 ................................................................................................ 13

Gambar 28 ................................................................................................ 14

Gambar 29 ................................................................................................ 14

iv

Gambar 30 ................................................................................................ 14

Gambar 31 ................................................................................................ 15

Gambar 32 ................................................................................................ 15

Gambar 33 ................................................................................................ 16

Gambar 34 ................................................................................................ 16

Gambar 35 ................................................................................................ 17

Gambar 36 ................................................................................................ 17

Gambar 37 ................................................................................................ 17

Gambar 38 ................................................................................................ 18

Gambar 39 ................................................................................................ 18

Gambar 40 ................................................................................................ 19

Gambar 41 ................................................................................................ 20

Gambar 42 ................................................................................................ 20

Gambar 43 ................................................................................................ 21

Gambar 44 ................................................................................................ 22

Gambar 45 ................................................................................................ 23

Gambar 46 ................................................................................................ 23

Gambar 47 ................................................................................................ 24

Gambar 48 ................................................................................................ 24

Gambar 49 ................................................................................................ 25

Gambar 50 ................................................................................................ 25

Gambar 51 ................................................................................................ 26

Gambar 52 ................................................................................................ 26

Gambar 53 ................................................................................................ 27

Gambar 54 ................................................................................................ 27

Gambar 55 ................................................................................................ 28

Gambar 56 ................................................................................................ 28

Gambar 57 ................................................................................................ 28

Gambar 58 ................................................................................................ 29

Gambar 59 ................................................................................................ 29

Gambar 60 ................................................................................................ 30

v

Gambar 61 ................................................................................................ 31

Gambar 62 ................................................................................................ 31

Gambar 63 ................................................................................................ 31

Gambar 64 ................................................................................................ 32

Gambar 65 ................................................................................................ 32

Gambar 66 ................................................................................................ 33

Gambar 67 ................................................................................................ 33

Gambar 68 ................................................................................................ 34

Gambar 69 ................................................................................................ 34

vi

Daftar Tabel

Tabel 1 ......................................................................................................... 5

Tabel 2 ......................................................................................................... 5

Tabel 3 ......................................................................................................... 6

Tabel 4 ....................................................................................................... 30

Tabel 5 ....................................................................................................... 33

1

1 HTML (Hypertext Markup Language) dan HTTP (Hypertext

Transfer Protokol)

HTML (Hypertext Markup Language) merupakan salah satu format yang

digunakan dalam pembuatan dokumen dan aplikasi yang berjalan dihalaman web.

Sebenarnya, dokumen HTML hanyalah sebuah dokumen teks biasa dan disebut

sebagai Markup Language yakni bahasa yang mengandung tanda (tag) tertentu

yang digunakan untuk mengatur format tampilan suatu dokumen.

HTTP atau Hypertext Transfer Protokol merupakan protokol yang

digunakan untuk mentransfer data atau dokumen yang berformat HTML dari web

server ke browser. Dengan HTTP inilah yang memungkinkan terjadinya browsing

data di internet dan melihat halaman web.

Untuk membuat dokumen HTML hanya dibutuhkan sebuah aplikasi teks

editor biasa. Namun sekarang ini di pasaran terdapat banyak sekali HTML

authoring (software yang digunakan untuk membuat atau mendesain halaman

web).

2 Cara Membuat Halaman Web

Dokumen HTML atau halaman web membutuhkan aplikasi untuk

membuatnya, salah satunya dengan menggunakan notepad. Adapun langkah-

langkah membuat dokumen HTML dengan menggunakan notepad adalah sebagai

berikut:

1. Klik Start Notepad

2. Ketik tag-tag perintah dalam notepad seperti berikut ini:

2

Gambar 1

3. Kemudian klik menu File Save As

Gambar 2

4. Muncul dialog box seperti berikut ini

3

Gambar 3

5. Pada kolom File name ketik nama file dengan ekstensi .html atau .htm

misalnya percobaan1.html, kemudian ganti tipe menjadi All File pada

Save as type

Gambar 4

6. Klik Save

7. Jika ingin melihat halaman web yang telah dibuat, klik dua kali pada file

yang telah dibuat

4

Gambar 5

Gambar 6

3 Struktur Dasar HTML

Dalam penggunaannya, sebagian besar kode HTML harus terletak di

antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan

</namatag> (terdapat tanda “/”). Struktur dasar dokumen HTML berisi elemen-

elemen atau tag sebagai berikut:

Gambar 7

Hasil yang diperoleh adalah

Setelah klik dua kali

5

Gambar 8

Keterangan:

<html>..</html> Mendefinisikan bahwa teks yang berada diantara tag tersebut adalah

file HTML.

<head>..</head> Sebagai informasi page header. Tag Di dalam tag ini kita bisa

meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT,

STYLE & META.

<title>..</title> Sebagai judul halaman. Kalimat yang terletak di dalam tag ini akan

muncul pada bagian paling atas browser anda (pada title bar)

<body>..</body> Mendefinsikan teks beserta formatnya yang hendak ditampilkan

sebagai isi halaman web. Di dalam tag ini bisa diletakkan berbagai

page attribute seperti bgcolor, background, text, link, vlink, alink,

leftmargin dan topmargin.

Tabel 1

4 Kode Warna

Pengaturan warna dalam dokumen HTML menggunakan mode kombinasi

RGB (Red/merah, Green/hijau, Blue/biru). Setiap warna ditampilkan dalam dua

digit nilai heksadesimal (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). Setiap dua

digit kode menunjukkan banyak intensitas dari kombinasi warna merah, hijau dan

biru. Untuk dua digit pertama mewakili warna merah, kemudian dua digit

berikutnya mewakili warna hijau dan dua digit terakhir mewakili warna biru.

Misalnya untuk warna jingga, dibuat dengan pencampuran warna sebagai berikut:

Merah Hijau Biru

FF A5 00

Tabel 2

Berarti untuk memperoleh warna jingga, kode warna yang dituliskan

adalah #FFA500. Selain warna jingga, banyak warna yang dapat dihasilkan

6

dengan percobaan pada intensitas dari kombinasi warna merah, hijau, biru.

Berikut ini beberapa contoh warna yang dapat diperoleh beserta kode warnanya:

Warna Kode

Biru #0000FF

Hitam #000000

Cyan #00FFFF Emas #FFD700

Abu-abu #808080

Hijau #008000

Magenta #FF00FF Merah Muda #FFC0CB

Ungu #800080

Jingga #FFA500

Merah #FF0000 Hitam #000000

Putih #FFFFFF

Silver #C0C0C0

Kuning #FFFF00 Tabel 3

5 Body

Body adalah bagian isi dari suatu halaman web yang akan dibuat. berikut

merupakan contoh dari penggunaan tag <body>

Gambar 9

Berikut adalah hasilnya

7

Gambar 10

Dalam tag <body> terdapat beberapa attribut yaitu BGCOLOR,

BACKGROUND, TEXT, LINK, VLINK, ALINK, LEFTMARGIN dan

TOPMARGIN.

5.1 Bgcolor

Attribut bgcolor berguna untuk mengubah warna latar dari isi halaman

web yang dibuat. Berikut adalah contoh dari penggunaan attribut bgcolor

Gambar 11

Hasilnya seperti berikut

8

Gambar 12

5.2 Background

Attribut background berguna untuk mengubah latar dari isi halaman web

yang akan dibuat. Isi dari background ini berupa alamat gambar yang akan

dijadikan gambar latar. Berikut adalah contoh penggunaan attribute

Gambar 13

Hasilnya adalah sebagai berikut

Gambar 14

9

5.3 Text

Attribut text digunakan untuk mengatur warna teks pada body atau isi dari

halaman web. Warna default teks pada isi halaman web adalah warna hitam.

Berikut contoh penggunaan attribute text

Gambar 15

Berikut adalah hasilnya

Gambar 16

5.4 Link

Attribute link digunakan untuk mengatur warna link pada body atau isi

dari halaman web. Warna default link adalah biru. Berikut adalah contoh

penggunaan attribute link

Gambar 17

10

Berikut adalah hasilnya

Gambar 18

5.5 Vlink

Attribute vlink digunakan untuk mengatur warna link yang telah

dikunjungi. Warna default link yang telah dikunjungi adalah ungu. Berikut adalah

contoh penggunaan attribute vlink

Gambar 19

Berikut adalah hasilnya

Gambar 20

11

5.6 Alink

Attribut alink digunakan untuk mengatur warna link yang diklik dan

halaman link belum terbuka. Warna default link yang aktif adalah merah.

5.7 Leftmargin

Attribut leftmargin digunakan untuk mengatur margin kiri dari body.

Berikut adalah contoh penggunaan attribute leftmargin

Gambar 21

Berikut adalah hasilnya

Gambar 22

5.8 Topmargin

Attribute topmargin digunakan untuk mengatur margin atas dari body.

Berikut adalah contoh penggunaan attribute topmargin

Gambar 23

12

Berikut adalah hasilnya

Gambar 24

6 Heading

Heading digunakan untuk mengatur header. Header adalah huruf-huruf

berukuran khusus yang digunakan untuk menulis judul bab atau sub bab. Ada

enam tingkatan header, mulai dari h1 sampai h6. h1 adalah header yang paling

besar dan h6 adalah header yang paling kecil. Berikut merupakan contoh

penggunaan heading

Gambar 25

Berikut adalah hasilnya

13

Gambar 26

7 Paragraf Baru

Untuk membuat sebuah paragraf baru pada dokumen HTML, diperlukan

tag <p>. Dalam tag ini terdapat attribute ALIGN, yaitu attribute yang berguna

untuk mengatur perataan paragraf. Pada attribute ALIGN, perataan dapat diatur

menjadi empat jenis perataan yaitu rata kanan (RIGHT), rata kiri (LEFT), rata

tengah (CENTER) dan rata kanan-kiri (JUSTIFY). Berikut adalah contoh

penggunaan tag <p>

Gambar 27

14

Berikut adalah hasilnya

Gambar 28

8 Line Break

Line break digunakan untuk pindah ke baris baru. Untuk menggunakan

line break digunakan tag <br>. Berikut adalah contoh penggunaan line break

Gambar 29

Berikut adalah hasilnya

Gambar 30

15

9 No Line Break

No line break digunakan agar teks panjang tidak otomatis berada di baris

dibawahnya. Untuk menggunakan perintah ini, digunakan tag <nobr>. Berikut

adalah contoh penggunaan no line break

Gambar 31

Berikut adalah hasilnya

Gambar 32

10 Font

Font digunakan untuk mengatur huruf yang akan digunakan. Untuk dapat

menggunakan perintah font diperlukan tag <font>. Dalam perintah font, terdapat

atribut-atribut yang dapat ditambahkan yaitu atribut size, face, dan color

16

10.1 Size

Attribute size digunakan untuk mengatur ukuran tulisan. Dalam atribut ini

terdapat 7 ukuran berbeda, dengan ukuran terkecil adalah 1 dan ukuran terbesar

adalah 7. Berikut adalah contoh penggunaan attribute size

Gambar 33

Berikut adalah hasilnya

Gambar 34

17

10.2 Face

Attribute face digunakan untuk memilih jenis huruf yang akan digunakan.

Berikut adalah contoh penggunaan attribute face

Gambar 35

Berikut adalah hasilnya

Gambar 36

10.3 Color

Attribute color digunakan untuk mengganti warna teks. Berikut

merupakan contoh penggunaan attribute color

Gambar 37

Berikut adalah hasilnya

18

Gambar 38

Selain tag font, terdapat beberapa tag untuk memodifikasi teks, tag-tag tersebut

antara lain:

<b> : Tag ini digunakan untuk membuat teks dicetak tebal, tag ini harus

diakhiri dengan menggunakan </b>

<u> : Tag ini digunakan untuk membuat teks dicetak dengan geris bawah, tag

ini harus diakhiri dengan menggunakan </u>

<i> : Tag ini digunakan untuk membuat teks dicetak miring, tag ini harus

diakhiri dengan menggunakan </i>

11 Marquee

Marquee digunakan untuk membuat teks berjalan, berikut merupakan

contoh penggunaan tag marquee

Gambar 39

Dalam marquee terdapat beberapa attribute, antara lain direction, behavior, scroll

delay, bgcolor, hspace, vspace.

19

11.1 DIRECTION

Atribut ini digunakan untuk menentukan arah gerak dari tampilan apakah

ingin ke kiri (left), kanan (right), atas (up), atau bawah (down). Berikut

merupakan contoh penggunaan atribut direction

Gambar 40

11.2 BEHAVIOR

Atribut ini digunakan untuk menentukan bagaimana tampilan bergerak,

jika sebelumnya yang ditentukan adalah arahnya maka pada atribut BEHAVIOUR

yang ditentukan adalah perilaku geraknya. Adapun jenis pergerakannya yaitu:

Scroll : Tampilan akan bergerak sesuai arah yang ditentukan dan akan

kembali mengulangi gerakan dari titik awal gerakan

Slide : Tampilan akan bergerak sesuai arah yang ditentukan lalu

kemudian berhenti di titik akhir tanpa mengulangi gerakan

sebelumnya

Alternate : Tampilan akan bergerak bolak-balik

Berikut adalah contoh penggunaan atribut behavior

20

Gambar 41

11.3 SCROLL DELAY

Atribut ini digunakan untuk menentukan jeda waktu antara tiap gerakan

dari tampilan.,nilai yang di isi untuk atribut ini adalah berupa angka dalam mili

detik. Berikut adalah contoh penggunaan atribut scroll delay

Gambar 42

11.4 BGCOLOR

Atribut BGCOLOR pada tag MARQUEE akan menghasilkan jalur

gerakan memiliki warna,prinsip kerja atribut ini sama dengan atribut BGCOLOR

pada tag BODY yaitu memberikan warna latar.

12 Horizontal Line

Tag horizontal line (<hr>) digunakan untuk memberikan garis horisontal

pada halaman web. Tag ini memiliki atribut SIZE, ALIGN, WIDTH, dan

NOSHADE.

Size : Atribut ini digunakan untuk menentukan panjang garis dalam

satuan pixel

21

Align : Atribut ini digunakan untuk menentukan perataan letak garis.

Width : Atribut ini digunakan untuk menentukan ketebalan garis

Noshade : Atribut ini digunakan agar garis yang ditampilkan tidak

menampilkan bayang-bayang 3D

Berikut merupakan contoh penggunaan tag <hr>

Gambar 43

22

Berikut adalah hasilnya

Gambar 44

13 List

Daftar/list adalah susunan yang disusun sedemikian rupa sehingga

penulisan dapat terlihat lebih rapi. Ada tiga macam daftar yang tersedia dalam

pembuatan dokumen HTML yaitu ordered list, unordered list, dan definition list.

13.1 Ordered List

Ordered list adalah suatu metode mengurutkan daftar dengan

menggunakan angka, abjad dan angka romawi pada html. Sedangkan Unordered

list adalah kebalikannya yaitu metode mengurutkan daftar dengan menggunakan

simbol atau special character pada html. Pembuatan daftar pada ordered list dan

unordered list pada html menggunakan <li> untuk menampilkan isi dari daftar.

Ordered list di bagi atas beberapa macam yaitu dengan tipe angka, abjad, angka

romawi.

Macam-macam type ordered list :

Jika type="1" maka akan menampilkan 1, 2, 3, ...

Jika type="a" maka akan menampilkan a, b, c, ...

Jika type="A" maka akan menampilkan A, B, C, ...

Jika type="i" maka akan menampilkan i, ii, iii, ...

Jika type="I" maka akan menampilkan I, II, III, ...

23

Berikut ini adalah contoh penggunaan tag ondered list

Gambar 45

Berikut adalah hasilnya

Gambar 46

13.2 Unordered List

Unordered list dibagi atas beberapa macam yaitu dengan tipe berbentuk

lingkaran dengan warna hitam (default), lingkaran berwarna putih dan bentuk

kotak.

Macam macam type unordered list :

24

type=“circle” untuk bentuk lingkaran

type=“disc” (default) untuk bentuk lingkaran berwarna hitam

type=“square” untuk bentuk lingkaran kotak

Berikut contoh penggunaan tag unordered list

Gambar 47

Berikut adalah hasilnya

Gambar 48

13.3 Definition List

Definition list digunakan untuk menjelaskan istilah-istilah. Defintion list

dinyatakan dengan tag <dl>. Dalam tag definition list ditambahkan definition

25

term <dt>, yaitu bagian istilah yang dijabarkan dan definition data <dd> yang

merupakan penjabaran dari istilah.

Berikut adalah contoh penggunaan definition list

Gambar 49

Berikut adalah hasilnya

Gambar 50

14 Preformatted Text

Preformatted text digunakan untuk membuat tulisan yang ditampilkan

sesuai dengan bentuk tulisan yang diketik.

Berikut merupakan contoh penggunaan preformatted text

26

Gambar 51

Berikut adalah hasilnya

Gambar 52

15 Extended Quote

Extended quote digunakan untuk membuat kutippan yang panjang,

sehingga penulisannya terlihat menjorok ke dalam. Untuk dapat menggunakan

extended quote diperlukan tag <blockquote>.

27

Berikut contoh penggunaan extended quote

Gambar 53

Berikut adalah hasilnya

Gambar 54

16 Hypertext Link

Hypertext link digunakan untuk membuat link untuk menghubungkan satu

dokumen HTML ke dokumen HTML atau juga ke web tertentu. Cara penulisan

hypertext link ini adalah sebagi berikut

<a href=”URL tujuan”>nama link </a>

Untuk hypertext link yang ditujukan ke halaman yang berada pada satu folder,

maka cukup menuliskan nama dokumen tersebut, namun jika halaman tersebut

berada pada folder yang berbeda, maka harus menyertakan alamat dokumen

secara rinci Warna dari link tersebut dapat diatur pada tag <body>.

28

Berikut adalah contoh penggunaan hypertext link

Gambar 55

Berikut adalah hasilnya

Gambar 56

Heading.html

Gambar 57

29

Program Studi MIPA.html

Gambar 58

http://www.google.com

Gambar 59

17 Tabel

17.1 Membuat tabel

Tag <TABLE> digunakan untuk membuat table dalam document HTML

, bagian pokok dari table adalah cell yang didefinisikan dengan menggunakan tag

<TD>.

30

Attribute Value

Align Center | justify | left | right

Valign

BASELINE | TOP | BOTTOM | MIDDLE

Berikutnya apabila anda ingin membuat beberapa baris cell dalam table

gunakan tag <TR>.

17.2 Menambahkan Heading cell

Untuk menambahkan heading pada table tambahkan tag <TH> pada table

yang sudah di buat.

17.3 Pemformatan table

Untuk memformat perataan text di dalam table anda bisa gunakan

attribute Align dan Valign (vertical Alignment)

Tag-tag yang digunakan :

<TABLE> : Untuk pembuatan tabel, dengan atribut BORDER utk

memberi bingkai.

<CAPTION> : Menentukan judul tabel

<TR> : Membuat baris dalam tabel

<TH> : Membuat judul kolom

<TD> : Membuat sebuah sel data

Berikut adalah contoh penggunaan tabel

Gambar 60

Tabel 4

31

Berikut adalah hasilnya

Gambar 61

Contoh penggunaan ROWSPAN dan COLSPAN

Attribute ROWSPAN ditempatkan pada tag <td>

Gambar 62

Berikut adalah hasilnya

Gambar 63

32

Atribut COLSPAN bisa ditempatkan pada tag <TD> atau <TH>

Gambar 64

Berikut adalah hasilnya

Gambar 65

18 Image

Ada banyak format image, tapi ada tiga jenis format yang paling sering

digunakan :

1. GIF (Graphical Interchange Format) (.GIF)

2. JPEG (Joint Photographic Expert Image) (.JPG)

3. PNG (Portable Network Graphics)

Adapun cara memasukkan gambar pada halaman web menggunakan tag

<IMG SRC=”URL”>

33

Attribute Value Description

Align Center | justify | left | right | Baseline | top | bottom | middle

Top, bottom, middle digunakan untuk menentukan posisi image terhadap text

Left, right, center untuk menentukan posisi image di document

Contoh penggunaan <IMG SRC> untuk menampilkan gambar.

Gambar 66

Berikut adalah hasilnya

Gambar 67

Tabel 5

34

Pengaturan ukuran gambar dengan atribut HEIGHT dan WEIGHT, serta

penggunaan atribut BORDER untuk memberi bingkai gambar.

Gambar 68

Berikut adalah hasilnya

Gambar 69