Minggu, 29 September 2019

Membuat Tabel Biodata Sederhana dengan HTML

Disini saya akan mencoba sedikit memaparkan bagaimana cara membuat sebuah tabel di HTML, disini saya contohkan dengan membuat sebuah biodata sederhana, biar tidak memakan banyak waktu kita coba langsung kerjakan untuk pembelajaran kita kali ini outputnya mungkin seperti ini :

Kemudian untuk untuk scriptnya kurang lebih seperti ini :

<!DOCTYPE html>
<html>
<head>
<title>Profilku</title>
</head>
<body bgcolor="D2C4DD" text="black">
<h1>Profil | Mahasiswa Univ. "AMIKOM" Yogyakarta </h1>
<hr size="2.5px" color="blue" width="2000px">
<img src="male_icon1.PNG" align="left" alt="Logo Amikom"
width="200px" height="250px">

<table>
<tr>
<td>NIM</td>
<td>:</td>
<td>1*.**.****</td>
</tr>

<tr>
<td>Nama</td>
<td>:</td>
<td>SHOIM ASYHARI</td>
</tr>

<tr>
<td>Prodi</td>
<td>:</td>
<td>Teknik Komputer</td>
</tr>

<tr>
<td>Kelas</td>
<td>:</td>
<td>18-S1TK01</td>
</tr>

<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td>Laki-laki/<del>perempuan</td>
</tr>

<tr>
<td>No Hp</td>
<td>:</td>
<td>08********</td>
</tr>

<tr>
<td>Email Amikom</td>
<td>:</td>
<td>shoim.asyhari@students.amikom.ac.id</td>
</tr>

<tr>
<td>Hobi</td>
<td>:</td>
<td>
<ul>
<li>Liburan</li>
<li>Ngegame</li>
<li>Tidur</li>
</ul>
</td>
</tr>

</table>
<hr size="2.5px" color="blue" width="2000px">

<div id='tabel'>
<tr>
<table border="2" width="1000px" height="80">
<th>Jadwal Kuliah Ganjil T.A 2019-2020</th>
</table>
</tr>

<div id="tabel">
<table border="2" width="1000px" height='85'>
<tr> 
<td widht='10%' align="center">NO</td>
<td widht='25%' align="center">Hari,Jam</td>
<td widht='900%' align="center">Nama Mata Kuliah</td>
<td widht='50%' align="center">Dosen Pegampu</td>
</tr>

<tr>
<td widht='10%' align="center">1.</td>
<td widht='50%' align="center">Senin, 07:00 - 08:40</td>
<td widht='50%' align="center">Program web</td>
<td widht='50%' align="center">Anggit Ferdita Nugraha, M.Eng</td>
</tr>

<tr>
<td widht='10%' align="center">2.</td>
<td widht='10%' align="center">Senin, 10:40 - 12:20</td>
<td widht='50%' align="center">Pengolahan Basis Data</td>
<td widht='50%' align="center">Anggit Ferdita Nugraha, M.Eng</td>


</table>
</div>
</table>
<hr size="2.5px" color="blue" width="2000px">

<p align="center">
&copy; Shoim asyhari@Tekkom
</p>
<p align="center">
<b>Universitas "Amikom" Yogyakarta</b>
</p>
<p align="center">
-2019-
</p>


</body>

</html>




1. <!DOCTYPE html>, Di gunakan untuk menginformasikan web browser bahwa dokumen yang di berikan adalah dokumen HTML.
2. <html> … </html>, Adalah perintah dasar HTML yang di gunakan sebagai wadah untuk semua elemen dari keseluruhan dokumen HTML, semua elemen HTML harus ada dalam tag <html> … </html> (kecuali DOCTYPE, itulah yang dimaksud dengan ‘tag DOCTYPE bukan elemen HTML’).
3. <head> … </head>, Adalah perintah dasar HTML yang berisi informasi tentang dokumen HTML yang digunakan oleh web browser dan web crawlers namun sebagian besar tidak ditampilkan ke pengunjung situs web. Tujuan dari penggunaan tag <head> adalah memberikan informasi tentang dokumen itu sendiri. Seperti favicon, judul halaman (tag ‘title’), meta tags, style (CSS), dan javascript.
4.  <title> … </title>, Adalah perintah dasar HTML yang di butuhkan untuk menetapkan judul dokumen HTML. Judul halaman tidak di tampilkan di halaman web, namun di gunakan sebagai nama halaman oleh search engine dan di tampilkan pada tab web browser juga di gunakan sebagai nama halaman dari halaman web yang di bookmark.
5.  <body> … </body>, Adalah perintah dasar HTML yang berisi keseluruhan isi halaman web. Ini harus menjadi elemen kedua di dalam elemen induk <html>, hanya mengikuti elemen <head>. Tag <body> merupakan elemen HTML yang paling penting. Isi elemen <body> adalah apa yang di tampilkan kepada pengguna yang mengunjungi halaman web melihat dokumen web.
6. <h1>...</h1>, Digunakan untuk Nama Blog jika berada pada Home Page.
7. <hr>...</hr>, Digunakan untuk memisahkan konten atau paragraf satu dengan lainnya berdasarkan pengelompokkan tema atau topik masing-masing.
8. <img/>, Adalah perintah yang di gunakan untuk menampilkan gambar statis pada halaman web. Semua tag <img> harus memiliki atribut “src” yang di tentukan. Atribut “src” mendefinisikan gambar yang akan di tampilkan.
9. <table> … </table>, Digunakan untuk mendefinisikan tabel, sebuah tabel setidaknya terdiri dari satu kolom dan satu baris, dalam HTML sebuah baris di definisikan dengan tag <tr>, sedangkan kolom di definisikan dengan tag <td> atau <th> .
10. <tr> … </tr>, Adalah perintah dasar HTML yang di gunakan untuk mendefinisikan baris pada tabel (table row), tag <tr> harus di simpan tepat di dalam tag <table>, dalam satu baris (satu pasang tag <tr>) bisa terdapat satu atau lebih tag <td> atau tag <th>.
11. <td> … </td>, Di gunakan untuk mendefinisikan tabel data, tag <td> harus di simpan tepat di dalam tag <tr>, tag <td> lebih mirip dengan cell pada Microsoft Office Excel, kumpulan cell yang linier (horizontal) membentuk suatu kolom.
12. <div> , Dapat dijadikan "wadah" untuk menempatkan beberapa elemen menjadi satu bagian, yang penggunaannya ditujukan untuk mempermudah aplikasi style dengan CSS dan perlakuan khusus lainnya yang kemudian dapat diberi atribut classidtitle dan lain sebagainya.
13. <p> … </p>, Di gunakan untuk mengidentifikasi blok teks. Tag <p> mendefinisikan sebuah paragraf teks (belupa blok). Akhir paragraf di tandai dengan tag </p>. Secara teknis tag </p> bersifat opsional, namun ada baiknya menyertakan tag penutup untuk memastikan dokumen HTML tersebut valid.


Sekian penjelasan kali ini tentang Membuat Tabel Biodata Sederhana Dengan HTML semoga dapat bermanfaat. 

Membuat Tabel Biodata Sederhana dengan HTML

Disini saya akan mencoba sedikit memaparkan bagaimana cara membuat sebuah tabel di HTML, disini saya contohkan dengan membuat sebuah biodata...