Materi HTML

PEMROGRAMAN WEB - HTML I-1
Mengenal HTML
I. MENGENAL HTML
HTML (Hypertext Markup Language) :
Hypertext sering disebut juga teks interaktif, merupakan suatu bahasa pemrograman untuk
membangun sebuah dokumen dalam bentuk halaman web.
HTML dapat dipergunakan untuk hypertext link artinya dapat membentuk hubungan antara teks
dan dokumen lain, sehingga pengguna (user) bisa melompat dari satu dokumen ke dokumen
lain dengan mudah.
Struktur dasar penulisan HTML :
Head
File
html
Bagian
body
 Bagian awalan HTML :
<html> dan diakhiri dengan </html>
 Bagian Head :
Merupakan informasi header dan tidak ditampilkan pada windows browser.
<head> dan </head>
 Bagian Title :
Merupakan judul yang akan ditampilkan di dokumen.
<title> dan </title>
 Bagian Body :
Merupakan isi dokumen html. Semua informasi, baik itu teks, gambar, sound, maupun lainnya
dapat ditampilkan pada halaman ini.
<body> dan </body>
Parameter Tag Body :

Mengenal HTML
Parameter Kegunaan
Teks Menentukan jenis teks
Bgcolor Menentukan warna latar belakang dokomen
Background Merujuk pada direktori dari file gambar yang digunakan sebagai latar
belakang
Contoh :
Skrips bisa diketik dengan teks editor NOTEPAD.
<html>
<head>
<title>
Nama judul yang akan muncul pada browser
</title>
</head>
<body>
Semua data, baik itu tulisan, gambar, suara akan ditampilkan di sini !
</body>
</html>
Untuk melihat hasilnya, skrips di buka dengan Internet Explorer.

Mengenal HTML
 Headline <hn>
HTML mendukung enam tingkat headline <h1> sampai dengan <h6>.
{ simpan dengan nama file headline.html }
<html>
<head>
<title>
Penggunaan tag headline
</title>
</head>
<body>
<h1 align=”center”>model tulisan dengan h1</h1>
<h7 align=”center”>model tulisan dengan h7 akhir kode</h7>
</body>
</html>
 Tag <br>
Digunakan untuk penggantian baris baru.
 Tag <hr>
Digunakan untuk membuat garis batas horisontal sekaligus membuat baris baru.
Atribut pendukung dalam tag <hr>
Atribut Kegunaan
Align Menentukan posisi vertikal garis pemisah, dengan nilai left, right,
maupun center
Size Menentukan tebalnya garis batas
Color Menentukan warna teks
Width Menentukan lebar garis batas bisa menggunakan pixel maupun persen.
Noshade Menonaktifkan efek tiga dimensi
Mencoba dengan tag <hr> :

{ simpan dengan nama file horisontal.html }
<html>
<head>
<title> Model Tag pada Hr </title>
</head>
<body>
<center>
Mengenal HTML
<h2> Mengenal atribut pada hr </h2>

garis batas biasa<hr>
</center>
garis dengan lebar 300 pada posisi kanan

<hr align=”right” width=”300”>
garis dengan lebar 30% pada layar browser posisi kiri
<hr align=”left” width=”30%”>
garis tebal 5 pixel <hr size=”5” color=”blue”>
garis dengan warna merah <hr color=”red”>
garis dengan efek tiga dimensi <hr> noshade>
</body>
</html>
 Tag List
Format bullet (bulleted list) <LI> dan Ordered List <OL>
{ simpan dengan nama file bullet.html }
<html>
<head>
<title> Judul yang tampil pada halaman web </title>
</head>
<body>
<center>
<h2> Daftar Nama Teman </h2>
adapun nama teman-temanku antara lain :<hr>
</center>
<h2> Teman sepermainan :</h2>

<div align=”left”>
<OL>
<LI> Ucil Marucil
<LI> Unyil
<LI> Melani
<LI> Ucrit
</OL>
</div>
<br> <br>
<UL>
<LI> Usro
<LI> Dora
<LI> Micky
<LI> Dora Emon
</UL>
</div>
</body>
</html>
 Menempatkan Image dengan html
Agar tidak membosankan, ada baiknya menempatkan image (gambar) dalam homepage yang
dibuat.
Format image yang digunakan : GIF dan JPG.
Mengenal HTML
Format : <img src=”/URL/nama_file”>
URL : Universal Resources Locator
Atribut pendukung dalam tag <image>
Atribut Kegunaan
Align Menentukan posisi vertikal garis pemisah, dengan nilai left, right dan center
Border Menentukan garis pinggir sekitar gambar
Width Menentukan ukuran lebar gambar
Hight Menentukan ukuran vertikal gabar
{ simpan dengan nama file image.html }
<html>
<head>
<title> Membuat gambar </title>
</head>
<body>
<center>
<h2> Penempatan gambar dengan html </h2>
</center>
<img src=”image/keluarga1.gif” alt=”gambar tidak muncul” align=”middle” width=”10%”>
teks ini akan terletak dibagian tengah.
<hr>
<img src=”image/keluarga2.gif” alt=”gambar tidak muncul” align=”bottom” width=”10%”>
teks ini akan terletak dibagian bawah.
<hr>
<img src=”image/keluarga3.gif” alt=”gambar tidak muncul” align=”right” width=”20%”>
teks ini akan terletak dibagian kanan.
</div>
</body>
</html>
 Membuat Link
Kelebihan HTML yaitu dapat berpindah-pindah dari satu dokumen ke dokumen yang lainnya.
- Model link yang lengkap (absolut) :
<a href=”http://www.polman-bandung.ac.id”>
artinya link ke web site lain di Internet.
- Model link dengan berpindah halaman :
<a href=”halaman_berikut.html”>
Mengenal HTML
{ simpan dengan nama file link.html }
<html>
<head>
<title> Membuat link di html </title>
</head>
<body>
<left>
<h2> Halaman Web Site </h2>
</left>
Beberapa pilihan link ke dokumen :<br><br>
Belajar <a href=”headline.html”>Menggunakan Headline</a><br>
Belajar <a href=”horisontal.html”>Menggunakan Horisontal</a><br>
Belajar <a href=”bullet.html”>Menggunakan Bullet</a><br><br>
<a href=”image.html”>
<img src=”image/keluarga1.gif” alt=”gambar tidak muncul” align=”middle” width=”10%”>
</a>
Anda akan di bawa ke link gambar-gambar.<br><br>
Homepage Polman : <a href=”http://www.polman-bandung.ac.id”>Go</a>
</div>
</body>
</html>
Mengenal HTML
Membuat Tabel :
{ simpan dengan nama file tabel.html }
<html>
<title>Membuat Tabel</title>
</head>
<body>
<table width="100%" border="1">
<tr align="center" bgcolor="#009933">
<td width="37">No</td>
<td width="164">Nama</td>
<td width="261">Alamat</td>
</tr>
<tr>
<td align="center">1</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2">kolom digabung</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="2">baris digabung</td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<p> </p>
</body>
</html>
Hasilnya :
Mengenal HTML
Menampilkan Gambar dalam IFRAME :
<html>
<title>Iframe</title>
</head>
<body>
Menampilkan gambar dalam Frame : <a href="image/re.jpg" target="tampil"> Tampilkan </a>
<br>
<iframe src="image/polman.gif" name="tampil" scrolling="auto" width="500" height="400" frameborder="0">
</iframe>
</body>
</html>
Keterangan :
Di dalam folder image, ada file polman.gif dan re.jpg
Hasilnya :
Jika meng-klik Tampilkan :

Mengenal HTML
TUGAS :
Buat tampilan sebaik mungkin !
Logo Judul
1. Pilihan -1 Link ke web lain :
2. Pilihan -2
3. Pilihan -3 Tempat menampilkan pilihan 1 sd ….
4. Pilihan -4
5. Pilihan -5
6. Pilihan -6
7. dst
Keterangan pembuat

Materi HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Materi HTML

Uploaded by

Copyright:

Available Formats

PEMROGRAMAN WEB - HTML I-1

Struktur dasar penulisan HTML :

<html> dan diakhiri dengan </html>

Merupakan informasi header dan tidak ditampilkan pada windows browser.

<head> dan </head>

Merupakan judul yang akan ditampilkan di dokumen.

<title> dan </title>

<body> dan </body>

Parameter Tag Body :

Teks Menentukan jenis teks

Bgcolor Menentukan warna latar belakang dokomen

Skrips bisa diketik dengan teks editor NOTEPAD.

Untuk melihat hasilnya, skrips di buka dengan Internet Explorer.

HTML mendukung enam tingkat headline <h1> sampai dengan <h6>.

{ simpan dengan nama file headline.html }

Digunakan untuk penggantian baris baru.

Size Menentukan tebalnya garis batas

Color Menentukan warna teks

Noshade Menonaktifkan efek tiga dimensi

Mencoba dengan tag <hr> :

<h2> Mengenal atribut pada hr </h2>

garis dengan lebar 300 pada posisi kanan

Format bullet (bulleted list) <LI> dan Ordered List <OL>

{ simpan dengan nama file bullet.html }

<h2> Teman sepermainan :</h2>

 Menempatkan Image dengan html

Format : <img src=”/URL/nama_file”>

URL : Universal Resources Locator

Atribut pendukung dalam tag <image>

Border Menentukan garis pinggir sekitar gambar

Width Menentukan ukuran lebar gambar

Hight Menentukan ukuran vertikal gabar

{ simpan dengan nama file image.html }

- Model link yang lengkap (absolut) :

artinya link ke web site lain di Internet.

- Model link dengan berpindah halaman :

{ simpan dengan nama file link.html }

{ simpan dengan nama file tabel.html }

Menampilkan Gambar dalam IFRAME :

Jika meng-klik Tampilkan :

Buat tampilan sebaik mungkin !

1. Pilihan -1 Link ke web lain :

You might also like