Cara Membuat Tabel Sederhana Menggunakan HTML

Website atau situs dapat diartikan sebagai kumpulan halaman-halaman yang digunakan untuk menampilkan informasi teks, gambar diam atau gerak, animasi, suara, dan atau gabungan dari semuanya, baik yang bersifat statis maupun dinamis yang membentuk satu rangkaian bangunan yang saling terkait, yang masing-masing dihubungkan dengan jaringan-jaringan halaman.

HTML merupakan singkatan dari Hypertext Markup Language. Singkatan ini terdiri dari 3 komponen kata, yakni: Hypertext, Markup dan Language.

Kata Hypertext dari HTML menekankan pengertian: text yang lebih dari sekedar teks (‘hyper’- text). Maksudnya selain berfungsi sebagai teks biasa, sebuah teks di dalam HTML juga bisa berfungsi sebagai penghubung ke halaman lain atau dikenal dengan istilah link. Nantinya kita juga akan melihat bahwa tidak hanya teks saja yang bisa digunakan sebagai link, tetapi bisa berupa gambar. Link inilah yang menjadi inti dari HTML.
 

Kata kedua dari singkatan HTML adalah Markup. Markup dapat diterjemahkan sebagai tanda atau penanda (bahasa inggris: mark). Di dalam HTML, kita akan menggunakan tanda-tanda khusus seperti <p>, <a>, atau <li>. Tanda ini diperlukan untuk mengatur format dan membuat struktur halaman web. 

Bagian terakhir dari HTML adalah Language. Istilah language jika diterjemahkan berarti: bahasa. Khusus bagi anda yang pernah berkenalan dengan bahasa pemrograman komputer, disini HTML tidak menggunakan ‘Programming Language’, tetapi hanya ‘Language’ saja.

Pada kesempatan kali ini saya akan membuat sebuah tabel sederhana menggunakan bahasa HTML, berikut cara membuatnya :

1. Buka aplikasi Notepad ++, jika anda belum mempunyainya maka anda download terlebih dahulu di google.

2. Pilih menu bahasa diatas, klik lalu cari huruf h dan pilih HTML seperti pada gambar dibawah.

 

3. Setelah itu kita buat kodingan seperti pada gambar dibawah

Pada line 1 sampai 12 kita membuat tulisan tebal di pojok kiri atas dan membuat sebuah tabel dengan dua kolom dan dua baris yang dimana pada kolom pertama berisi ini kolom 1 pada baris 1 dan ini kolom 1 pada baris 2 dan pada kolom kedua berisi ini kolom 2 pada baris 1 dan ini kolom 2 pada baris 2. Pada line 1 terdapat <p> yang berfungsi sebagai paragraf, lalu ada <b> yang berfungsi untuk menebalkan paragraf. Lalu pada line 2 terdapat <table> yang berfungsi untuk membuat tabel, border ="1" diartikan web browser akan menampilkan garis tepi sebesar 1 pixel pada sisi atas, bawah, kiri dan kanan tabel., bordercolor="black" diartikan border kita beriwarna hitam, bgcolor="White" diartikan warna background berwarna putih, cellspadding="8" dan cellspasing="0" diartikan  web browser akan membuat jarak sebesar 8 pixel dari border sisi dalam tabel dengan isi text tabel dan web browser akan menampilkan jarak sebesar 0 pixel diantara garis border tabel, dan width="100%" diartikan lebar table ukurannya 100 persen. Pada line 4 dan lima kita membuat <tr> dan <td>, <tr> digunakan untuk membuat kolom sedangkan <td> digunakan untuk membuat baris. Pada line 14 sampai 54 kita membuat tulisan tabel tersebut sebagai bingkai paragraf yang kita beriwarna biru dan terletak di bawah tabel yang tadi dibuat, selanjutnya kita membuat tulisan Dalam menyelesaikan tugas kelompok softskill ini kami membuat halaman dengan tujuan melakukan tutorial website yang dimana kita beri border, selanjutnya kita membuat tulisan Kelas 2ia21 dan selanjutnya kita membuat sebuah tabel yang dimana pada baris pertama kita isi Nama Kelompok dan NPM Kelompok kita beriwarna pada tabelnya dengan warna ungu, pada baris ke 2 kita beri tulisan ABDUL AZIZ dan NPMnya yaitu 50417014, selanjutnya pada baris ke 3 kita beri tulisan AZHAR RAFI SYABAN dan NPMnya yaitu 51417098, selanjutnya pada baris ke 4 kita beri tulisan MUHAMAD ANDYKA BAKRY dan NPMnya yaitu 53417754, selanjutnya pada baris ke 5 kita beri tulisan MUHAMMAD HABIB CAHYA HERDIKA dan NPMnya yaitu 51417098, selanjutnya pada baris ke 6 kita beri tulisan SULISTIO RACHMADI dan NPMnya yaitu 55417795. Pada line 14 terdapat front color="blue" diartikan warna dari tulisan yang kita buat berwarna biru, pada line 15 kita membuat style="border-collapse: collapse" diartikan kita memilih style border yang collapse, pada line 24 align digunakan untuk menentukan tata letak tulisan.

4. Setelah itu save dan simpan file di tempat yang anda inginkan dengan format nama file.html.

5. Yang terakhir anda buka file yang anda simpan tadi dan akan otomatis masuk ke browser.

Hasilnya sebagai berikut:

Analisa web
 
1. Tipe Web

Pada web yang kita buat, web tersebut bertipe statis kenapa? karena pada web yang kita buat tidak terdapat database dan tampilan pada web tidak akan berubah, kecuali kita rubah kodingan web tersebut.

2. Isi Konten

Disini isi kontennya hanya berisi tabel dan sebuah tulisan tidak ada hal lain, karena disini kita hanya membuat sebuah tabel sederhana menggunakan HTML.

3. Speed

Untuk speed dalam membuka web ini cepat kenapa? karena cara membuka web ini kita hanya membuka file HTML yang kita buat.  

Sekian tutorial yang bisa saya berikan, kurang lebihnya saya meminta maaf apabila ada kesalahan atau kekurangan dari apa yang saya jelaskan karena saya juga masih belajar. Terima Kasih.          

Link Video:
https://youtu.be/gWQZkXBIndI

Daftar Pustaka :

-    - Hidayat, Rahmat. 2010. Cara Praktis Membangun Website Gratis. Jakarta: Elek Media Komputindo.

- Pratama, Andre. 2015. Paduan Belajar Untuk Pemula.
- https://www.duniailkom.com/ (di akses 18 Juli).