HTML(Hyper Text Markup Language)
-
Upload
ilham-d-rianjaya -
Category
Documents
-
view
41 -
download
0
description
Transcript of HTML(Hyper Text Markup Language)
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