Pada kesempatan kali ini saya akan memberikan cara membuat halaman web sederhana dengan menggunakan bahasa pemrograman HTML. Sedikit tentang html, HTML atau HyperText Markup Languange adalah bahasa yang digunakan pada dokumen web sebagai bahasa untuk pertukaran dokumen web.
Berikut struktur dokumen HTML:
<html>
<head>
<title></title>
</head>
<body></body>
</html>
Struktur diatas adalah satu kesatuan uyang harus ada dalam setiap dokumen HTML. Dokumen HTML terdiri dari komponen yaitu tag, element, dan atribut.
Tag adalah tanda awal < dan tanda akhir > yang digunakan sebagai pengapit suatu element.
<head> Tag Element Pembuka HEAD
</head> Tag Element Penutup HEAD
<input type = "text" /> Tag Element Tunggal
Element adalah nama penanda yang diapit oleh tag yang memiliki fungsi dan tujuan tertentu pada dokumen HTML.
<head> Element HEAD
<title> Element Anak dari Element HEAD
Judul Dokumen Nilai dari Element HEAD
</title>
</head>
Atribut adalah properti element yang digunakan untuk mengkhususkan suatu element.
<body id = "mybody" class = "bodycontent"> Element body dengan atribut id dan class
<p> Atribut class pada Element P
Membuat HTML sederhana
</p>
</body>
Selanjutnya kita akan membuat contoh halaman web, pada contoh kali ini
kita akan membuat CV sederhana. Untuk editor text yang saya gunakan yaitu editor text yang ada pada situs htmlinstant.com.
Perhatikan
contoh kode halaman berikut :
<html>
<head>
<title>Curriculum Vitae</title>
</head>
<body style= "background-color :#33CCCC">
<div style= "background-color :#FFFFCC" align="center"><h1>CURICULUM VITAE</h1>
</div>
<div style="margin-left:150;">
<h2>Identitas Pribadi</h2>
<table width="500">
<tr>
<td>Nama </td>
<td> : Heru Hidayat </td>
</tr><tr>
<td>Tempat, tanggal lahir </td>
<td> : Bukittinggi, 28-05-1993 </td>
</tr>
<tr>
<td>Jenis Kelamin </td>
<td> : Laki-laki </td>
</tr>
<tr>
<td>Agama </td>
<td> : Islam </td>
</tr>
<tr>
<td>Alamat </td>
<td> : Jalan Soekarno Hatta</td>
</tr>
<tr>
<td>Email </td>
<td> : tisyuforever@gmail.com</td>
</tr>
</table>
<h2>Riwayat Pendidikan</h2>
<ul>
<br/>
<table border="1" cellpadding="1" cellspacing="1.5" width="450">
<tr>
<td><b>Tingkatan Pendidikan<b/></td>
<td><b>LULUS</b></td>
</tr>
<tr>
<td>SDN 03 Pakan Kurai</td>
<td>2006</td>
</tr>
<tr>
<td>MTsN 1 Bukittinggi</td>
<td>2009</td>
</tr>
<tr>
<td>SMA Negeri 79 Jakarta</td>
<td>2011</td>
</tr>
<tr>
<td>Universitas Gunadarma</td>
<td>Perkuliahan Semester 8</td>
</tr>
</table>
<br/>
</table>
</ul>
</div>
</div>
</body>
</html>
<head>
<title>Curriculum Vitae</title>
</head>
<body style= "background-color :#33CCCC">
<div style= "background-color :#FFFFCC" align="center"><h1>CURICULUM VITAE</h1>
</div>
<div style="margin-left:150;">
<h2>Identitas Pribadi</h2>
<table width="500">
<tr>
<td>Nama </td>
<td> : Heru Hidayat </td>
</tr><tr>
<td>Tempat, tanggal lahir </td>
<td> : Bukittinggi, 28-05-1993 </td>
</tr>
<tr>
<td>Jenis Kelamin </td>
<td> : Laki-laki </td>
</tr>
<tr>
<td>Agama </td>
<td> : Islam </td>
</tr>
<tr>
<td>Alamat </td>
<td> : Jalan Soekarno Hatta</td>
</tr>
<tr>
<td>Email </td>
<td> : tisyuforever@gmail.com</td>
</tr>
</table>
<h2>Riwayat Pendidikan</h2>
<ul>
<br/>
<table border="1" cellpadding="1" cellspacing="1.5" width="450">
<tr>
<td><b>Tingkatan Pendidikan<b/></td>
<td><b>LULUS</b></td>
</tr>
<tr>
<td>SDN 03 Pakan Kurai</td>
<td>2006</td>
</tr>
<tr>
<td>MTsN 1 Bukittinggi</td>
<td>2009</td>
</tr>
<tr>
<td>SMA Negeri 79 Jakarta</td>
<td>2011</td>
</tr>
<tr>
<td>Universitas Gunadarma</td>
<td>Perkuliahan Semester 8</td>
</tr>
</table>
<br/>
</table>
</ul>
</div>
</div>
</body>
</html>
Keterangan:
- Pada <html>kode HTML</html> semua yang berada di dalam <html> akan dianggap dokumen HTML.
- Pada <head>kode HTML</head> kode HTML akan dianggap sebagai informasi mengenai halaman web.
- Pada <title>kode HTML<./title> merupakan kode untuk mendefinisikan judul halaman web yang akan kita buat.
- Pada <body>kode HTML</body> digunakan untuk memasukkan konten pada halaman web yang akan kita buat.
- Pada <body> terdapat style = "background-color: #33CCCC" kode tersebut digunakan untuk menampilkan background warna pada bagian body halaman web yang kita buat.
- Pada <h1>kode HTML</h1> digunakan untuk menampilkan heading pada konten halaman web.
- Pada <div>kode HTML</div> digunakan untuk memisahkan bagian satu dengan bagian lainnya, seperti pada <div style= "background-color :#FFFFCC" align="center"><h1>CURICULUM VITAE</h1></div> hanya kata "CURICULUM VITAE" yang rata tengah dan memiliki bakground merah.
- Pada kode HTMl <ul><li>Kode HTML</li></ul> digunakan untuk membuat list berjenis unorder list yaitu list bullet, sedangkan <ol><li>Kode HTML</li></ol> digunakan untuk membuat list berjenis order list yaitu angka.
- Pada bagian kode HTML yang digunakan untuk membuat tabel adalah pada bagian :
- <table width="500"><tr><td>Nama </td>.....
.....
.....
<tr><td>Universitas Gunadarma</td><td>Perkulihaan Semester 8</td></tr></table>
Pada bagian tag <table> adalah tag pembungkus pada pembuatan tabel. Di tabel ada 2 istilah yaitu row (baris) yang dibuat dengan tag <tr> dan sel-sel data (kolom) yang di buat dengan tag <td>
Tidak ada komentar:
Posting Komentar