Bagaimana Mahu Membina Laman Sesawang Bahagian II

0
848
views

Pada bahagian I, saya telah berkongsi apa itu HTML dan bagaimana ia dibina serba sedikit. Bagi yang terlepas contoh kod yang telah saya kongsikan, boleh lihat di sini.

https://www.thepatriots.asia/archives/4324

Kali ini saya akan berkongsikan bagaimana ingin mengubah kod pada borang yang telah saya kongsikan kepada yang lebih kemas dan juga bagaimana gambar serta pautan untuk dimasukkan ke dalam HTML.

Table

Untuk melihat kedudukan form itu dalam keadaan kemas, kita boleh memasukkan kod <table> sebagai permulaan dan </table> untuk penutupnya. Di dalam table akan ada <tr> atau dipanggil sebagai table row manakala <th> adalah row heading. Seperti biasa, setiap permulaan label perlu ada penutupnya dengan hanya menambah </tr> dan </th>. Row heading adalah dikhaskan sebagai tajuk kepada data yang ingin kita tujukan. Untuk data pula, labelnya adalah <td> bagi permulaan dan </td> penutupnya. Saya sertakan contoh bagaimana form dikemaskan dengan menggunakan cara table.

Contoh borang yang dikemas kini dengan menggunakan borang

Dalam sesebuah jadual atau table, ia boleh mempunyai dua lajur atau lebih. Sebagai contoh, dalam sesebuah jadual, kita ingin masukkan lebih daripada 2 lajur. Kita hanya perlu masukkan kod colspan. Jika untuk baris pula, kita hanya perlu masukkan rowspan. Contohnya:

Contoh
Hasilnya

Gambar, Pautan dan Gambar besertakan Pautan

Untuk gambar, label yang harus diletakkan adalah <img> besertakan src sebagai sifat atau attribute di dalam label <img>. Src digunakan untuk memanggil pautan secara atas talian ataupun memanggil gambar daripada fail yang disimpan pada window. Contohnya:

Waqaf Saham

Contoh kod dan hasil yang dikeluar

Bagi pautan pula, caranya agak mudah. Anda hanya perlu menggunakan label anchor serta href untuk memanggil pautan tersebut. Contohnya,

<a href=”http://www.google.com.my/”> Cuba tekan pada pautan ini </a>

Jika ingin memasukkan pautan pada gambar, anda hanya perlu gabungkan kod gambar dan juga kod pautan. Contohnya,

<a href=”http://www.google.com.my/” <img src=”https://media.licdn.com/media/p/7/005/04e/208/147c6ed.png“> </a>

Lihat hasilnya dengan simpan ke dalam notepad dan jangan terlupa .html.

Jika anda ingin tahu, setiap elemen HTML mempunyai 2 jenis nilai paparan yang mungkir. Kebanyakannya elemen tersebut ialah :

Elemen pada tahap blok

  • Sentiasa dimulakan dengan baris yang baru
  • Digunakan sebagai bekas untuk mengisi elemen-elemen HTML
  • Contohnya,
    • <div></div>
    • <p></p>
    • <form></form>

Elemen dalam barisan

  • tidak digunakan pada baris yang bari
  • contohnya,
    • <img />
    • <a> </a>

Sebagai seorang programmer, HTML adalah lebih kepada scripting manakala Javascript pula bahasa pengaturcaraan untuk membina sesebuah laman sesawang. Bagi pemprosesan HTML ia memerlukan back-end. Back-end biasanya menggunakan bahasa pengaturcaraan PHP. Dari segi penyimpanan data pula lain caranya. Jadi, setakat ini perkongsian yang saya dapat kongsikan bersama. Jika anda ingin mempelajari lebih lanjut, anda boleh melayari laman sesawang https://www.w3schools.com

-MAF

 

Previous articleDeathstroke: Definisi Sebenar Antihero
Next articleUndang-Undang Yang Memanusiakan Perang
Nama penuh : Muhd Ammerul Faizal, Nama pena : MAF, Negeri kelahiran : Johor, Sedang menuntut di Universiti Teknikal Malaysia Melaka (UTeM). Mengambil jurusan IT dalam bidang Pembangunan perisian, Minat ke arah Zoologist (Haiwan purba dan Haiwan Istimewa).
SHARE

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.