Pengenalan Dasar Hypertext Markup Language (HTML)


Hypertext Markup Language atau yang lebih dikenal dengan HTML merupakan sebuah bahasa pemrograman yang digunakan untuk membuat suatu halaman web yang dapat menampilkan informasi berupa teks, gambar atau video. Dalam pemrogramannya, HTML diawali dengan menuliskan perintah-perintah HTML atau yang disebut dengan Tag. Tag digunakan untuk menandai elemen-elemen didalam sebuah dokumen HTML. Sebagai contoh apabila Anda mengetik di Word dengan atribut cetak tebal (bold), maka didalam HTML Anda harus mengetikkannya dengan menggunakan Tag seperti berikut:

<b>Contoh penulisan cetak tebal dalam HTML</b>

Beberapa tag yang umum digunakan dalam pemrograman HTML adalah:

  • <p>, untuk mendefinisikan paragraf.
  • <b>, untuk mencetak tebal pada teks.
  • <i>, untuk mencetak miring pada teks.
  • <u>, untuk mencetak miring pada teks.
  • <small>, untuk membuat tulisan dengan ukuran kecil, biasanya pada catatan kaki.
  • <center>, mencetak teks rata tengah. Untuk justify, left, dan right digunakan bersamaan dengan tag paragraf, misal untuk rata kanan dan kiri <p align=”justify”>
  • <font>, untuk memberikan pengaturan huruf, dapat dilengkapi dengan jenis huruf (face), ukuran (size), dan warna (color) pada huruf. Apabila ingin menggunakan semua atributnya maka penulisannya menjadi <font face=”chiller” size=”14″ color=”red”>
  • <H1>, atau heading untuk mencetak teks judul dengan ukuran font maksimal dan cetak tebal. Ada beberapa tingkatan heading selain h1, yaitu h2, h3, h4, dan h5.
  • <br>, digunakan untuk melakukan pindah baris.
  • <marquee>, mencetak teks berjalan dari kanan ke kiri layar. Dapat juga menambahkan atribut behavior = “alternate” untuk membuat efek teks memantul pada kedua sisi layar dan direction untuk menentukan arah teks berjalan.
  • <hr>, untuk mencetak garis horizontal.

Berikut contoh program sederhana pengenalan dasar HTML yang akan menghasilkan tampilan seperti dibawah ini.

Program dasar HTML

<body bgcolor="yellow">
<marquee behavior="alternate"><h1>Pengenalan Dasar HTML</h1></marquee>
<hr>
<center><font face="chiller" size="18" color="blue">Talk is cheap. Show me the code.</font></center>
<center><i>Latihan HTML pertama</i></center>
</body>

Berikut contoh program HTML disertai dengan tabel dan gambar.

Program dasar HTML2


<html>
<head>
<title>Dasar HTML</title>
</head>
<body>
<h1 align="center">Pengenalan Bahasa HTML</h1>
<hr>
<center>
<h2><i>Talk is cheap. Show me the code.</i></h2>
<small><u>Linus Trovalds</u></small>

Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
nisi ut aliquid ex ea commodi consequatur?
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,
vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</center>

<table border="1" width=50% align="center">
<thead>
<tr>
<th bgcolor="aqua">Name</th>
<th bgcolor="grey"><font color="white">Email</font></th>
<th bgcolor="yellow">Address</th>
</tr>
</thead>

<tbody>
<tr>
<td>Jhon</td>
<td>jhon@gmail.com</td>
<td>North Carolina</td>
</tr>

<tr>
<td>Shawn</td>
<td>shawn@live.com</td>
<td>New York</td>
</tr>

<tr>
<td>Samantha</td>
<td>samantha@gmail.com</td>
<td>Canberra</td>
</tr>

<tr>
<td>Rey</td>
<td>rey@yahoo.com</td>
<td>Chicago</td>
</tr>

</tbody>
</table>

<center><img src="../../wp1/pert1/programming.jpg" width=50%></center>
</body>
</html>

Untuk dapat menampilkan gambar yang diinginkan, terlebih dahulu copy file gambar kedalam folder proyek.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s