Modul 1 Pengenalan Web

Modul Pemrograman Web 1
BAB II
BASIC TAG HTML
2.1 Struktur Dasar HTML
HTML digunakan untuk membangun suatu halaman web. Banyak orang

menyebutnya sebagai suatu bahasa pemrograman, HTML sama sekali bukan
bahasa pemrograman, tapi merupakan bahasa markup (penandaan), terhadap
sebuah dokumen teks. Simbol markup yang digunakan oleh HTML ditandai
dengan tanda lebih kecil ( <) dan tanda lebih besar ( > ) , dan disebut tag.
Tag biasanya merupakan suatu pasangan, yang disebut tag awal dan tag akhir.
Tag awal dinyatakan dalam bentuk <nama_elemen> dan tag akhir dinyatakan
dalam bentuk </nama_elemen>. Ada beberapa macam bentuk tag yang dikenal
dalam HTML, yaitu :
§ Tag berpasangan
Format : <nama_elemen> teks </nama_elemen>
§ Tag tunggal
Format : <nama_elemen>
§ Tag yang disertai attribut
Format : <nama_elemen nama_attribut=argumen> teks </nama_elemen>
Atribut adalah properti dari suatu elemen HTML
2.1.1 HEAD
Bagian Head sebenarnya tidak harus ada pada dokumen HTML, tetapi pemakaian
head yang benar akan meningkatkan kegunaan suatu dokumen HTML. Isi bagian
head kecuali judul dokumen tidak akan terlihat oleh pembaca dokumen tersebut.
Elemen-elemen pada bagian head akan mengerjakan tugas-tugas sebagai berikut :
§ Menyediakan judul dokumen
§ Menjembatani hubungan antar dokumen
§ Memberitahu browser untuk membuat form pencarian
§ Menyediakan metode untuk mengirim pesan ke tipe browser
S1 Teknik Informatika
1
Elemen yang mungkin terdapat pada bagian head :
§ Tag <TITLE>, digunakan untuk memberi judul dokumen.

Bentuk umumnya : <TITLE> Judul </TITLE>
§ Tag <BASE>, digunakan untuk menentukan basis URL sebuah dokumen.
Bentuk umumnya : <BASE HREF=”URL”>
Contoh :<BASE HREF=”//www.alamat.com/direktori”>
§ Tag <LINK>, digunakan untuk menunjukkan relasi antar dokumen HTML.
§ Tag <META>, digunakan untuk mendefinisikan informasi-informasi di luar
HTML.
Penggunaan elemen <META> yang paling populer adalah penggunaan properti

Keyword dan Description. Kedua properti ini sangat berguna untuk membantu
kerja search engine. Biasanya search engine akan menggunakan teks yang
disebutkan pada properti Keyword untuk mengindeks dokumen dan
menggunakan teks yang terdapat pada properti Description untuk
mendeskripsikan indeks tersebut.
2.1.2 BODY
Berfungsi untuk menyimpan informasi atau data yang akan ditampilkan dalam
web page. Bentuk Umum :
<body bgcolor=”……” background=”….”>
</body>
Bgcolor à latar belakang: warnaBackground à latar belakang: gambar
2.2 Format Dokumen HTML
§ <BR> : membuat baris baru, tidak memerlukan penutup </BR>

§ <P align=left|right|center |justify> : memulai paragaraf baru, tidak
memerlukan penutup </P>
§ <HR align=left|right|center width = ... size = ... noshade color = ... >
§ <Hn> : heading sebuah dokumen, nilai n berkisar antara 1 hingga 6.
§ <PRE> : membuat tampilan dokumen HTML pada browser sama dengan
tampilan padateks editor. Dengan tag <PRE>, maka tag <P> dan tag <BR>
tidak diperlukan lagi.
2
§ <BLOCKQUOTE> : membuat tampilan menjorok ke dalam seperti identasi.

Bentuk umum : <blcokquote> .... </blockquote>
Latihan 1
<html>
<head>
<title>The Cool Web Movie Database</title>
</head>
<body>
Welcome to the Cool Web Movie Database. So far we
offer<br>
information on the many brilliant films of David
Lean:<br>
soon, a lot more will be online.
<hr width=75% size=3 color="blue" align=left>
<h1>Films with Sam Spiegel Productions</h1>
<h2>The Bridge on the River Kwai (1957)</h2>
<p>Produced by Sam Spiegel, this film was the first of
the Lean blockbuster movies, and featured a young Alec
Guinness, William Holden, and a brilliant performance
from Sessue Hayakawa.
<h3>Lawrence of Arabia (1962)</h3>
One of my all-time favorite movies, this epic
adventure starring Peter O’Toole established Lean as
a director who could truly envision film on a grand
scale.
<hr>
<h4>The Later Years</h4>
<h5>Doctor Zhivago (1965)</h5>
<h6>Ryan’s Daughter (1970)</h6>
<hr>
This information maintained by Dave Taylor
</body>
</html>
Tampilan pada browser :
3
Latihan 2
<html>
<head>
<title>Penggunaan Pre</title>
</head>
<body bgcolor="cyan">
<h2>Ini adalah awal dari suatu paragraph lho</h2>
<p>Kalo ini adalah paragraph kedua.
<p>Nah ini nih paragrap terakhir.
<p align="left">
Teks dengan Align="left" akan diratakan pada margin
kiri.
<p align="center">
Teks dengan Align="center" akan diratakan pada margin
tengah.
<p align="right">
Teks dengan Align="right" akan diratakan pada margin
kanan.
<pre>
Teks ini mempergunakan s p a s i dan juga tombol ENTER
untuk
berpindah ke baris ini.
Asisten Status
=======================
4
Frans Single
Budi Single juga
Riyo Double, lho?
Chandra duda, he he he...
</pre>
</body>
</html>
Tampilan pada browser
Latihan 3
q Buatlah halaman web dengan tampilan sebagai berikut :
5
q Simpan dengan nama : home.html
6

Modul 1 Pengenalan Web

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul 1 Pengenalan Web

Diunggah oleh

Hak Cipta:

Format Tersedia

Modul Pemrograman Web 1

2.1 Struktur Dasar HTML

HTML digunakan untuk membangun suatu halaman web. Banyak orang

Elemen yang mungkin terdapat pada bagian head :

§ Tag <TITLE>, digunakan untuk memberi judul dokumen.

Penggunaan elemen <META> yang paling populer adalah penggunaan properti

2.2 Format Dokumen HTML

§ <BR> : membuat baris baru, tidak memerlukan penutup </BR>

§ <BLOCKQUOTE> : membuat tampilan menjorok ke dalam seperti identasi.

Tampilan pada browser :

Tampilan pada browser

q Buatlah halaman web dengan tampilan sebagai berikut :

q Simpan dengan nama : home.html

Anda mungkin juga menyukai