Assalammualaikum Warahmatullahi Wabarakatuh. Semoga dengan mengunjungi blog ini dapat menambah pengetahuan bagi kita semua. Amiiin.

Kamis, 26 Maret 2015

Membuat Halaman Web Sederhana

   

    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>

Keterangan:
  1. Pada <html>kode HTML</html> semua yang berada di dalam <html> akan dianggap dokumen HTML.
  2. Pada <head>kode HTML</head> kode HTML akan dianggap sebagai informasi mengenai halaman web.
  3. Pada <title>kode HTML<./title> merupakan kode untuk mendefinisikan judul halaman web yang akan kita buat.
  4. Pada <body>kode HTML</body> digunakan untuk memasukkan konten pada halaman web yang akan kita buat.
  5. Pada <body> terdapat style = "background-color: #33CCCC" kode tersebut digunakan untuk menampilkan background warna pada bagian body halaman web yang kita buat.
  6. Pada <h1>kode HTML</h1> digunakan untuk menampilkan heading pada konten halaman web.
  7. 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.
  8. Pada kode HTMl <ul><li>Kode HTML</li></ul> digunakan untuk membuat list berjenis unorder list yaitu list bulletsedangkan <ol><li>Kode HTML</li></ol> digunakan untuk membuat list berjenis order list yaitu angka.
  9. Pada bagian kode HTML yang digunakan untuk membuat tabel adalah pada bagian :
  10. <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>

Berikut hasil dari kode diatas:


Tidak ada komentar:

Poskan Komentar

Related Posts Plugin for WordPress, Blogger...

Daftar Isi