Belajar membuat website HTML dasar-TABLE

Oleh: adminpartheon - 12-05-2021   -   13:56

Bagikan :

belajar membuat website html dasar table

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:

belajar website tag paragraph html

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:

  • Src, lokasi gambar, isi dengan url path
  • alt, judul gambar untuk kepentingan SEO supaya gambarmu bisa terindex oleh mesin pencarian.
  • width, lebar gambar yang ditampilkan di web
  • height, tinggi gambar yang ditampilkan di web

Berikut adalah contoh penulisannya:

<img src="http://localhost/firstweb/latihan/logo.png" alt="gambar pertama" width="500px" height="500px" />

tampilan dibrowser:

belajar website tag img html

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:

  • <table> merupakan tag pembuka, perintah border=1 membuat tabel memiliki garis-garis penyusun pada tampilannya. 
  • <tr> tag untuk membuat row / baris dalam tabel
  • <th> tag menandakan column head column pada tabel
  • <td> tag untuk membuat column pada baris

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:

  • Colspan, Menggabungkan 2 atau lebih kolom kedalam satu gambaran kolom, contohnya adalah sebagai berikut:

<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

  • Rowspan, Menggabungkan 2 atau lebih baris dalam satu baris. Yuk kita lihat contohnya: 

<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:

install partheon stok playstore

Artikel terkait

tutorial cara mengukur tegangan DC dengan multimeter digital
tutorial cara mengukur tegangan DC dengan multimeter digital
Belajar membuat website setting install xampp webserver
Belajar membuat website setting install xampp webserver
Belajar elektro mengukur tegangan AC dengan multimeter digital
Belajar elektro mengukur tegangan AC dengan multimeter digital
Tutorial php cara membuat thousand separator nominal uang
Tutorial php cara membuat thousand separator nominal uang
tutorial belajar javascript level dasar
tutorial belajar javascript level dasar
Belajar membuat website HTML dasar-TABLE
Belajar membuat website HTML dasar-TABLE
Artikel lainnya
cek kabel putus dengan multimeter atau avometer digital visero a830L
Seringkali peralatan elektronik kita tidak berfungsi karena adanya ganggunan dalam komponennya, salah satunya adalah kabel putus. Artikel kali ini akan membahas cara cek kabel putus dengan multimeter digital.
cara membuat function mysql database
selain query kita dapat membuat sebuah fungsi untuk mempermudah operasi database, bagaimana caranya ? yuks kita baca artikel berikut ini.
fungsi resistor beserta cara ukur lewat kode warna resistor dan multimeter
Kali ini kita akan bahas pengertian komponen elektro yaitu resistor beserta cara ukurnya berdasarkan kode warna dan multimeter digital
5 youtuber cerita menarik tuk menemani harimu
Sambil kerja dikomputer mendengarkan cerita-cerita menarik dapat kamu coba untuk mengusir kebosanan dan meningkatkan produktifitasmu, yuk coba dengarkan 5 youtuber Indonesia yang pandai bercerita ini.
Khasiat tanaman pecut kuda
Jarang orang mengetahui tanaman pecut kuda, padahal khasiat dan kegunaannya sangat banyak. berikut adalah kegunaan pecut kuda
5 lagu barat klasik romantis
Kangen sama pasangan? cobain lagu-lagu klasik ini supaya makin kangen dengan pasanganmu. Lagu klasik barat yang memorable dan romantis habis
input date html tutorial dan cara pakainya
Dalam membuat website pasti ada saatnya kita menggunakan isian tanggal, dalam artikel berikut kita akan mengupas cara dan petunjuk pengunaan input date untuk mempermudah operasi tanggal.
4 youtuber bule yang cerita tentang indonesia mulai dari wisata, budaya sampai makanan
pesona indonesia mampu memikat hati orang asing, 4 youtuber ini membuat vlog tentang beberapa wisata didaerah Indonesia. Siapakah 4 youtuber tersebut, yuks kita simak youtuber yang sering ditonton admin..
5 youtuber review film untuk menambah list film yang akan kamu tonton
ga ada waktu buat nonton film atau bingung film yang bagus yang mana, yuk cek 5 youtuber spesialist membahas film-film yang menarik lewat artikel ini.
belajar javascript membuat fungsi untuk merubah angka menjadi kalimat terbilang
Sesi belajar javascript kali ini akan membahas pembuatan fungsi untuk merubah sebuah angka menjadi kalimat terbilang.
tutorial cara mengukur tegangan DC dengan multimeter digital
artikel berikut akan mereview multimeter digital visero A830L dan petunjuk pemakaian untuk mengukur tegangan DC
isi tinta printer canon e400 hitam
Simak artikel berikut ini untuk mengisi tinta cartidge hitam printer canon e400 beserta cara reset manual
4 film barat dengan jagoan yang tak terkalahkan
Anda senang dengan film barat? suka dengan aksi perkelahian yang memacu adrenalin? berakhir happy ending? yuk simak artikel berikut ini buat menambah list film yang akan kamu tonton
Tutorial php cara membuat thousand separator nominal uang
Artikel berikut akan membahas cara merubah nominal uang menjadi lebih enak dibaca dengan menambah separator ribuan, ratusan ribu, dll didalam pemprograman PHP.
Raline Shah profil
Raline shah dikenal sebagai artis Indonesia yang pergaulannya luas, dari mohammad hadid sampai artis asia internasional lainnya masuk lingkaran pertemanannya. Berikut adalah biodata raline shah artis yang bukan kaleng-kaleng