Jika kamu belum membaca tentang Seri Belajar Membuat Website Codeigniter Halaman Pertamamu maka kami sarankan untuk membacanya terlebih dahulu supaya paham akan istilah-istilah codeigniter.
Pada pembahasan kali ini, kita akan belajar mengenai html dasar sebagai layout untuk web kita. Kenapa kita belajar html? html ini merupakan ilmu dasar jika kita ingin ahli dalam membuat website terutama tampilan layout. Ibarat belajar kungfu kita belajar kuda-kuda tiap jurusnya. Oke kita akan belajar dengan point-perpoint supaya sobat-sobat netizen jelas memahaminya.
1. Pergi ke view codeigniter kita.
Untuk menulis html pertama kita, pergi ke folder view pada codeigniter. Lokasi pada komputer admin ada di c:\xampp\htdocs\firstweb\application\view. Lalu pilih file belajar.php ( karena ini file yang saya pakai pada contoh artikel sebelumnya ).
2. Buka file belajar.php dengan notepad++ atau editor lainnya.
3. Tulis stuktur dasar html pertama.
Dalam pembuatan website terdapat stuktur standart html yang biasa digunakan. Stuktur tersebut dapat anda ketik sebagai berikut:
<HTML>
<Head>
</head>
<body>
</body>
</HTML>
4. Tag ( untuk menunjuk pada object seperti <head></head> ) head pada diatas biasanya digunakan untuk menulis meta , library javascript, dan library style css yang nantinya akan admin bahas pada lain kesempatan.
5. Untuk penulisan html dasar kita menulis tag-tag htmlnya di bagian <body>.
6. HTML yang akan kita bahas adalah <p> paragraph, <img> image, dan <table> table.
7. <p> yang merupakan kepanjangan dari paragraph adalah tag html untuk menulis sebuah paragraph. Contohnya adalah sebagai berikut:
<body>
<p> Hallo nama saya admin partheon, sudahkan anda menginstall aplikasi kami?</p>
</body>
Berikut adalah gambar hasil dari penulisan tag tersebut dibrowser:
8. <img> merupakan tag html yang cukup penting, dan sering dipakai. img digunakan untuk menampilkan gambar pada layout website kita. Syntax tag img adalah sebagai berikut <img src="" alt="" width="" height="" />. Dimana penjelasan dari src, alt, width, height adalah sebagai berikut:
Berikut adalah contoh penulisannya:
<img src="http://localhost/firstweb/latihan/logo.png" alt="gambar pertama" width="500px" height="500px" />
tampilan dibrowser:
9. Berikutnya kita akan belajar tentang tag table. Tag table sering dipakai untuk memvisualkan sebuah data supaya lebih rapi. Biasanya untuk kepentingan laporan keuangan. Syntax dari table adalah sebagai berikut:
<table border="1" width="100px" height="100px">
<tr>
<th></th>
</tr>
<tr>
<td></td>
</tr>
</table>
Penjelasan tag penyusun table adalah sebagai berikut:
Contoh penulisan html adalah seperti berikut:
<table>
<tr>
<th>TH col 1</th>
<th>TH col 2</th>
</tr>
<tr>
<td>TD col 1</td>
<td>TD col 2</td>
</tr>
</table>
Hasilnya akan menjadi seperti ini
TH COL 1 | TH COL 2 |
TD COL 1 | TD COL 2 |
Terdapat beberapa teknik modifikasi table, diantaranya adalah rowspan dan colspan. Berikut adalah penjelsan dari 2 hal tersebut:
<table>
<tr>
<th>TH col 1</th>
<th>TH col 2</th>
</tr>
<tr>
<td colspan="2">TD col 1</td>
</tr>
</table>
Hasilnya akan seperti berikut:
TH col 1 | TH col 2 |
TD COLSPAN 2 |
<table>
<tr>
<th>TH col 1</th>
<th>TH col 2</th>
</tr>
<tr>
<td rowspan="2">TD Rowspan 2</td>
<td>TD 2</td>
</tr>
<tr>
<td>TD Row 2</td>
</tr>
</table>
Hasilnya akan seperti berikut:
TH COL 1 | TH COL 2 |
TD ROWSPAN 2 | TD 2 |
TD ROW 2 |
Untuk sesi ini cukup sampai segini dulu sobat, moga-moga dalam waktu dekat admin bisa menulis seri belajar website lainnya lagi. Terima kasih.
Bagi anda yang ingin mengaplikasikan sistem komputer dalam usaha anda, silahkan dicoba aplikasi kami partheon stok 100% gratis, tap/klik link dibawah ini untuk install di android anda: