Membuat Halaman Web dengan HTML

Standard

Internet merupakan hal yang tidak asing lagi bagi masyarakat Indonesia terutama masyarakat perkotaan. Internet merupakan salah satu media yang paling di gemari terutama dalam hal mencari informasi karena dengan menggunakan internet, informasi yang di inginkan akan cepat ditemukan. Ini karena Internet dilengkapi sebuah mesin pencari, sehingga pengguna cukup memberikan sebuah kata kunci dan menekan enter, kemudian akan keluarlah informasi-informasi yang berkaitan tersebut. Informasi-informasi dalam internet di taruh dalam halaman web. Informasi ini tentunya akan di kelola oleh pemilik web masing-masing. Tahukan bagaimana membuat sebuah halaman web? Membuat halaman web dapat menggunakan bahasa Hypertext Markup Language atau sering di sebut HTML. Seperti sebuah sumber menjelaskan HTML adalah symbol-simbol atau tag-tag yang dituliskan dalam sebuah file yang dimaksudkan untuk menampilkan halaman pada web browser.

Bagi pembaca yang belum mengenal HTML tulisan ini sangat tepat untuk anda baca, karena tulisan ini akan memberikan informasi cara-cara membuat halaman web dengan bahasa HTML. Agar mudah di pahami tentu halaman web yang dibuat adalah halaman web yang sederhana.

Sebelumnya akan dijelaskan terlebih dahulu halaman web yang akan dibuat. Halaman web ini terdiri dari dua halaman, halaman pertama berisi Curriculum Vitae dan halaman yang kedua akan berisi foto-foto. Dan kedua halaman ini akan saling berhubungan dengan dibuatnya link pada masing-masing halaman.

Tak usah berlama-lama, mari kita mulai. O ya, untuk mencoba menggunakan HTML dapat digunakan notepad, atau notepad++. Dengan notepad++ akan lebih mudah dalam penggunaan. Seperti dalam bahasan tulisan ini.

Untuk memudahkan membuat halaman web, terlebih dahulu membuat sketsanya. Membuat sketsa ini tidak perlu bagus, tetapi cukup memberikan gambaran tentang halaman web yang akan di bentuk.

Sketsa halaman web yang akan dibuat adalah sebagai berikut

 sketsa1

Gambar 1. Sketsa halaman CV

Dari gambar di atas terdapat bagian-bagian, diantaranya tempat hiasan yang berfungsi sebagai hiasan dari sebuah web agar halaman web tampak lebih menarik, link digunakan untuk membuka halaman lain, judul yang dalam hal ini akan di isi dengan Curriculum Vitae, begitu juga dengan data diri dan Foto.

sketsa2

Gambar2. Sketsa halaman foto

Setelah mengetahui sketsanya, mari kita mulai menulis kode HTML. Buat terlebih dahulu sebuah folder dengan nama New Folder pada desktop. Folder ini digunakan untuk menyimpan file html dan foto yang akan di tampilkan pada web. Masukkan 7 buah gambar yang berformat *.jpg dan beri nama dari masing-masing gambar tersebut adalah pas, hummer1, hummer2, hummer3, hummer4, hummer5 dan hummer6.

Aktifkan Notepad++ dan mari kita mulai menulis kode HTML. Kode HTML selalu diawali dan di akhiri tag <html></html>. Kemudian tag-tag lain yang selalu ada misalnya <head></head> yang berisi informasi umum dari sebuah halaman web. Tag <title></title> yang berfungsi untuk menuliskan judul halaman. Tag<body></body> yang digunakan untuk mengawali dan mengakhiri tag-tag yang digunakan untuk mengimplementasikan halaman web. Dari masing-masing tag akan  memiliki atribut tertentu. Dari tag-tag yang sudah dijelaskan, dapat dibuat bentuk umunya sebagai berikut

<html>

<head>

<title> judul halaman </title>

</head>

<body>

……………………………………………….

………………………………………………

……………………………………………..

</body>

</html>

Untuk mengimplementasikan sketsa pada gambar1 dan gambar 2 digunakanlah table. Tag yang digunakan untuk membuat table adalah <table></table>. Untuk membuat baris menggunakan tag <tr></tr> dan membuat kolomnya menggunakan tag <td></td>. Untuk gambar satu dibuat kode HTML sebagai berikut:

<html>

<head>

<title>CV</title>

</head>

(Judul halaman yang akan digunakan adalah CV)

<body>

<table width=”100%” height=”239″ border=”0″>

(membuat table dengan atribut width=100% adalah lebar table akan penuh, height=239 adalah tinggi sebesar 239 dan border=0 adalah tebal garis sebesar 0)

<tr>

<td height=”41″ colspan=”4″><marquee>***** Selamat Datang ***** </marquee></td>

</tr>

(membuat baris dengan atribut colspan=4 adalah baris ini akan memiliki lebar yang sama dengan 4 kolom yang ada. Kemudian terdapat tag<marquee></marquee> yang befungsi untuk menggerakkan teks yang diampit oleh tag tersebut, sehingga terkesan lebih menarik)

<tr>

<td valign=”top” width=”77″ rowspan=”11″><a href=”tugas.html”>Lihat Foto</a> </td>

(Dalam kolom ini terdapat atribut valign=top adalah teks yang di ampit oleh tag yang memiliki atribut ini akan rata atas, rowspan=11 adalah kolom yang digunakan akan sama tingginya dengan 11 baris. Kemudian ada tag <a></a> dengan atribut href =tugas.html yang berfungsi untuk membuka halaman yang bernama tugas.html dengan menekan teks yang diampit oleh tag ini)

<td colspan=”2″><p align=”center”><font face=”arial” size=”10″><b>CURRICULUM VITAE </b></font></p></td>

(Dalam kolom ini terdapat tag <p></p> dengan atribut align=center adalah teks yang diampit oleh tag ini akan rata tengah, kemudian ada tag <font></font>dengan aribut face=arial adalah teks yang akan ditampilkan dengan menggunakan model arial dan size=10 adalah ukuran yang digunakan adalah 10), tag<b></b> digunakan untuk menebalkan tulisan)

<td width=”178″ rowspan=”11″><img src=”file:///C:\Documents and Settings\salamun_hasan\Desktop\New Folder\pas.jpg” alt=”pas foto” width=”178″ height=”218″ /></td>

(Dalam kolom ini digunakan tag<img>yang digunakan dalam menampilkan gambar/foto. Digunakan atribut src untuk menentukan lokasi gambar yang akan di tampilkan)

</tr>

<tr>

<td width=”191″>Nama</td>

<td width=”528″>Salamaun Hasan </td>

</tr>

<tr>

<td>Tempat, Tanggal Lahir </td>

<td>Indramayu, 14 Mei 1990 </td>

</tr>

<tr>

<td>Jenis Kelamin </td>

<td>Laki-laki</td>

</tr>

<tr>

<td>Agama</td>

<td>Islam</td>

</tr>

<tr>

<td>Kewarganegaraan</td>

<td>Indonesia</td>

</tr>

<tr>

<td>Alamat</td>

<td>Pamayahan RT 12/03 Lohbener Indramayu </td>

</tr>

<tr>

<td>Telepon</td>

<td>0859 2313 3250 </td>

</tr>

<tr>

<td>Latar Belakang Pendidikan </td>

<td>1996-2002 : SD Negeri Pamayahan 2 </td>

</tr>

<tr>

<td></td>

<td>2002-2005 : SMP Negeri 1 Lohbener </td>

</tr>

<tr>

<td></td>

<td>2005-2008 : SMA Negeri 1 Sindang </td>

</tr>

<tr>

<td height=”43″ colspan=”4″><marquee>##### Halaman Curriculm Vitae ##### </marquee></td>

</tr>

</table>

</body>

</html>

Dengan membuat kode HTML diatas pada notepad anda kemudian simpan pada folder yang telah dibuat dengan nama dalam hal ini adalah tugas4.html, maka akan tampil halaman sebagai berikut

hal1 CV

Sekarang giliran sketsa pada gambar 2 yang diimplementasikan dengan kode HTML adalah sebagai berikut

<html>

<head>

<title>Halaman Foto</title>

</head>

<body>

<table width=”100%” height=”239″ border=”0″>

<tr>

<td height=”45″ colspan=”3″><p align=”center”><font face=”arial”><b>FOTO-FOTO</b></font></p></td>

</tr>

<tr>

<td width=”400″><img src=”file:///C:\Documents and Settings\salamun_hasan\Desktop\New Folder\hummer1.jpg” width=”400″ height=”300″ alt=”hummer1″ /></td>

<td width=”400″><img src=”file:///C:\Documents and Settings\salamun_hasan\Desktop\New Folder\hummer2.jpg” width=”400″ height=”300″ alt=”hummer 2″ /></td>

<td width=”402″><img src=”file:///C:\Documents and Settings\salamun_hasan\Desktop\New Folder\hummer3.jpg” width=”400″ height=”300″ alt=”hummer 5″ /></td>

</tr>

<tr>

<td height=”45″><p align=”center”>Gambar 1 </p></td>

<td height=”45″><p align=”center”>Gambar 2 </p></td>

<td height=”45″><p align=”center”>Gambar 3 </p></td>

</tr>

<tr>

<td height=”45″><img src=”file:///C:\Documents and Settings\salamun_hasan\Desktop\New Folder\hummer4.jpg” width=”400″ height=”300″ alt=”hummer 3″ /></td>

<td height=”45″><img src=”file:///C:\Documents and Settings\salamun_hasan\Desktop\New Folder\hummer5.jpg” width=”400″ height=”300″ alt=”hummer 4″ /></td>

<td height=”45″><img src=”file:///C:\Documents and Settings\salamun_hasan\Desktop\New Folder\hummer6.jpg” width=”400″ height=”300″ alt=”hummer 6″ /></td>

</tr>

<tr>

<td height=”45″><p align=”center”>Gambar 4 </p></td>

<td height=”45″><p align=”center”>Gambar 5 </p></td>

<td height=”45″><p align=”center”>Gambar 6 </p></td>

</tr>

<tr>

<td height=”45″ colspan=”3″><a href=”tugas4.html”>Kembali</a></td>

</tr>

</table>

</body>

</html>

Simpan kode ini dengan nama tugas.html. Dan hasil tampilan dari file tugas.html kira-kira sebagai berikut

hal2 foto

Demikian pembelajaran singkat mengenai pembuatan halaman web dengan HTML, jika ada kesalahan mohon koreksi dengan memberi komentar. Terima Kasih atas perhatiannya.

Sumber gambar dari Internet

About these ads

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s