2. Bahasa yang digunakan untuk menampilkan informasi pd
halaman web.
bahasa ini menggunakan tanda (markup) untuk menandai
perintah-perintahnya
menentukan tampilan suatu teks dan tingkat kepentingan dari
teks tersebut dalam suatu dokumen.
Software yang diperlukan:
Text editor sederhana.
Contoh:
Windows: Notepad
Linux: gEdit, mcedit
Web browser untuk menampilkan dokumen web yang dibuat.
Contoh:
Windows: Internet Explorer, dan Firefox
Linux: Firefox dan Conqueror.
2
3. 3
Tag - Digunakan untuk menentukan tingkah laku web
browser. Dinyatakan dengan tanda lebih kecil “<“ (tag
awal) dan tanda lebih besar “>” (tag akhir).
<namatag> ..... </namatag>
Element – Jenis-jenis dari tag. Element terdiri atas tiga
bagian, yaitu tag pembuka, isi, dan tag penutup.
Contoh :
<title> ini adalah tag pembuka judul dokumen HTML
Disini Judul Dokumen HTML ini adalah isi judul dokumen HTML
</title> ini adalah tag penutup judul dokumen HTML
Attribute - Digunakan untuk memodifikasi nilai dari
elemen HTML. Suatu elemen biasanya akan mempunyai
banyak atribut.
4. 4
<html>
<!– untuk menyatakan suatu dokumen HTML -->
<head>
<!-- memberikan informasi mengenai dokumen HTML >
</head>
<body>
<!-- menyimpan informasi atau data yang akan ditampilkan
dalam dokumen HTML >
</body>
</html>
6. 6
Format:
<! -- >
Fungsi:
Memberi nama aplikasi
Mendeskripsikan tujuan pengkodean tertentu di
dalam file
Memberi nama pengarang
Memberi tanggal pembuatan
Memberi nomer versi
Memberi informasi hak cipta
7. 7
Untuk warna latar belakang
Untuk heading
Untuk paragraf
Untuk preformatted text
Untuk blockquote
Untuk break
Untuk font
Untuk format dokumen
Untuk garis pemisah horisontal
Untuk list/daftar
Untuk memuat gambar
Untuk hypertext link
Dan lain-lain
8. <body text="v" bgcolor="w" background="uri" link="x"
alink="y" vlink="z">
..............
</body>
- Attribute text memberikan warna pada teks,
- bgcolor memberikan warna pada latarbelakang dokumen
HTML, - background memberikan latarbelakang dokumen HTML
dalam
bentuk gambar
- link memberikan nilai warna untuk link,
- alink memberikan warna untuk link yang sedang aktif,
- vlink memberikan warna untuk link yang telah dikunjungi.
Jika attribute bgcolor dan background keduanya dispesifikasikan
maka attribute background yang akan digunakan, akan tetapi
jika nilai attribute background (gambar) tidak ditemukan pada
dokumen HTML maka attribute bgcolor yang akan digunakan.
8
9. 9
Menggunakan warna
<body text = #nnnnnn bgcolor=#nnnnnn> . . . </body>
Script:
<html>
<head>
<title> Penggunaan Latar Belakang
Warna </title>
</head>
<body text="red" bgcolor="cyan">
Kami sedang mulai belajar
Pemrograman Web
</body>
</html>
Tampilan:
10. 10
Menggunakan gambar
<body background=“nama_file_gambar”> . . . </body>
Script:
<html>
<head>
<title> Penggunaan Latar Belakang
Gambar </title>
</head>
<body background="./gambar/picture01.jpg">
Kami sedang mulai belajar
Pemrograman Basis Data Berbasis Web
</body>
</html>
Tampilan:
11. 11
Untuk judul atau sub judul dalam dokumen HTML
<h1 [align=”left”|”center”|”right”]> . . . </h1>
<h2 [align=”left”|”center”|”right”]> . . . </h2>
.
.
<h6 [align=”left”|”center”|”right”]> . . . </h6>
Script:
<html>
<head>
<title> Heading </title>
</head>
<body>
<h1 align="center"> Heading 1: Materi HTML </h1>
<h2 align="center"> Heading 2: Materi HTML </h2>
<h3 align="center"> Heading 3: Materi HTML </h3>
<h4 align="center"> Heading 4: Materi HTML </h4>
<h5 align="center"> Heading 5: Materi HTML </h5>
<h6 align="center"> Heading 6: Materi HTML </h6>
</body>
</html>
Tampilan:
12. 12
Paragraf yang bisa diatur perataannya (kiri, tengah,
kanan):
<p [align=”left”|”center”|”right”]> . . . </p>
Script:
<html>
<head>
<title> Paragraf </title>
</head>
<body>
<h2 align="center"> Materi HTML </h2>
<p align="right">Kami sedang mulai
belajar Pemrograman Basis Data Berbasis
Web. Pada awal materi kami diperkenalkan
pada konsep dasar Web </p>
<p align="left">Saat ini masuk ke
materi Dasar-dasar HTML </p>
</body>
</html>
Tampilan:
13. 13
Untuk menampilkan teks sama seperti
yang diketikkan dalam dokumen HTML:
<pre> . . . </pre>
14. 14
Untuk menulis kutipan teks:
<blockquote> . . . </ blockquote >
<HTML><BODY>
Ini adalah paragraf normal
<BLOCKQUOTE>
<P>Ini paragraf yang agak masuk ke dalam.
<P align="justify">Ini juga contoh paragraf yang agak masuk ke dalam. Dengan
kalimat yang agak panjang, kita lihat bahwa <b>semua baris</b> dalam paragraf
ini letaknya agak masuk ke dalam. <i>Sama rata sama jauhnya</i>.
</BLOCKQUOTE>
<P>Nah, paragraf ini kembali normal, karena tag <i>blockquote</i> sudah berlalu
alias sudah ditutup di atas. Ngerti, kan?
</HTML></BODY>
19. 19
Garis horisontal untuk memisahkan teks
dengan teks lain.
<hr [align=“left”|”center”|”right”] [size=“n”] [width=“nnn”]
[noshade]> </hr>
20. 20
Unordered lists <UL>: daftar item dengan tanda bullet.
<ul [type=“disc”|”square”|”circle”] > . . . </ul>
Ordered Lists <OL>: untuk membuat daftar item yang terurut.
<ol [type=“1”|”a”|”A”|”I”|”i"] [start=“n”] > . . . </ol>
Definition Lists <DL>: untuk menjelaskan istilah-istilah.
<dl> . . . </dl>
<dt> . . . </dt>
<dd> . . . [</dd>]
Menu List: menampilkan item-item yang mempunyai link ke
page lain.
<menu> . . . </menu>
Directory List (DIR): untuk daftar item yang pendek atau kurang
dari 20 karakter.
<dir> . . . </dir>
21. 21
Memuat gambar ke dalam halaman Web
<img src=”URL”|”name” height=”n” width=”n” align=”top”|”center”|”bottom”] />
Script:
<html>
<head>
<title> Insert Gambar </title>
</head>
<body>
<b> Aloooo ... </b>
<img src="./TFR2A.gif" >
</body>
</html>
Tampilan:
22. 22
Format:
<a href=”address” > . . . </a>
Link ke dokumen lain
<a href=”nama_dokumen” > . . . </a>
Link ke bagian tertentu dalam dokumen yang sama
<a href=”#target” > . . . </a>
<a href=”target” > . . . </a>
Link ke alamat URL atau WebSite
<a href=”alamat_URL” > . . . </a>
Link ke alamat Email
<a href=”mailto:alamat_email” > . . . </a>
Link File yang akan didownload
<a href=”nama_file” > . . . </a>
23. Chris Bates [2006]. Web Programming:
Building Internet Applications, Third
Edition, John Wiley & Sons Ltd, England.
Husni [2007]. Pemrograman Database
Berbasis Web, Graha Ilmu, Yogyakarta.
Sebesta, R.W. [2002], Programming
the World Wide Web, Addison Wesley.
Sutarman, S.Kom [2003]. Membangun
Aplikasi Web dengan PHP dan
MySQL, Graha Ilmu, Yogyakarta
23
![11
Untuk judul atau sub judul dalam dokumen HTML
<h1 [align=”left”|”center”|”right”]> . . . </h1>
<h2 [align=”left”|”center”|”right”]> . . . </h2>
.
.
<h6 [align=”left”|”center”|”right”]> . . . </h6>
Script:
<html>
<head>
<title> Heading </title>
</head>
<body>
<h1 align="center"> Heading 1: Materi HTML </h1>
<h2 align="center"> Heading 2: Materi HTML </h2>
<h3 align="center"> Heading 3: Materi HTML </h3>
<h4 align="center"> Heading 4: Materi HTML </h4>
<h5 align="center"> Heading 5: Materi HTML </h5>
<h6 align="center"> Heading 6: Materi HTML </h6>
</body>
</html>
Tampilan:](https://image.slidesharecdn.com/pertemuan-2-html-hypertext-markup-language1-250630045208-27326976/85/pertemuan-2-html-hypertext-markup-language-1-ppt-11-320.jpg)
![12
Paragraf yang bisa diatur perataannya (kiri, tengah,
kanan):
<p [align=”left”|”center”|”right”]> . . . </p>
Script:
<html>
<head>
<title> Paragraf </title>
</head>
<body>
<h2 align="center"> Materi HTML </h2>
<p align="right">Kami sedang mulai
belajar Pemrograman Basis Data Berbasis
Web. Pada awal materi kami diperkenalkan
pada konsep dasar Web </p>
<p align="left">Saat ini masuk ke
materi Dasar-dasar HTML </p>
</body>
</html>
Tampilan:](https://image.slidesharecdn.com/pertemuan-2-html-hypertext-markup-language1-250630045208-27326976/85/pertemuan-2-html-hypertext-markup-language-1-ppt-12-320.jpg)
![19
Garis horisontal untuk memisahkan teks
dengan teks lain.
<hr [align=“left”|”center”|”right”] [size=“n”] [width=“nnn”]
[noshade]> </hr>](https://image.slidesharecdn.com/pertemuan-2-html-hypertext-markup-language1-250630045208-27326976/85/pertemuan-2-html-hypertext-markup-language-1-ppt-19-320.jpg)
![20
Unordered lists <UL>: daftar item dengan tanda bullet.
<ul [type=“disc”|”square”|”circle”] > . . . </ul>
Ordered Lists <OL>: untuk membuat daftar item yang terurut.
<ol [type=“1”|”a”|”A”|”I”|”i"] [start=“n”] > . . . </ol>
Definition Lists <DL>: untuk menjelaskan istilah-istilah.
<dl> . . . </dl>
<dt> . . . </dt>
<dd> . . . [</dd>]
Menu List: menampilkan item-item yang mempunyai link ke
page lain.
<menu> . . . </menu>
Directory List (DIR): untuk daftar item yang pendek atau kurang
dari 20 karakter.
<dir> . . . </dir>](https://image.slidesharecdn.com/pertemuan-2-html-hypertext-markup-language1-250630045208-27326976/85/pertemuan-2-html-hypertext-markup-language-1-ppt-20-320.jpg)
![21
Memuat gambar ke dalam halaman Web
<img src=”URL”|”name” height=”n” width=”n” align=”top”|”center”|”bottom”] />
Script:
<html>
<head>
<title> Insert Gambar </title>
</head>
<body>
<b> Aloooo ... </b>
<img src="./TFR2A.gif" >
</body>
</html>
Tampilan:](https://image.slidesharecdn.com/pertemuan-2-html-hypertext-markup-language1-250630045208-27326976/85/pertemuan-2-html-hypertext-markup-language-1-ppt-21-320.jpg)
![ Chris Bates [2006]. Web Programming:
Building Internet Applications, Third
Edition, John Wiley & Sons Ltd, England.
Husni [2007]. Pemrograman Database
Berbasis Web, Graha Ilmu, Yogyakarta.
Sebesta, R.W. [2002], Programming
the World Wide Web, Addison Wesley.
Sutarman, S.Kom [2003]. Membangun
Aplikasi Web dengan PHP dan
MySQL, Graha Ilmu, Yogyakarta
23](https://image.slidesharecdn.com/pertemuan-2-html-hypertext-markup-language1-250630045208-27326976/85/pertemuan-2-html-hypertext-markup-language-1-ppt-23-320.jpg)