Reka Bentuk HTML menggunakan HTML dan CSS

Assalamualaikum dan Salam Sejahtera,

Ok, aku dah skip beberapa minggu untuk posting ni. Mungkin minggu ni agak kalut dengan aktiviti2 berorganisasi mungkin sebab tu penat sangat kot. Tapi maaf bagi yang menunggu (Bajet2 mcm blog orang follow la). Tanpa buang masa, eloklah kita mulakan perkongsian kita kali ni. Macam minggu ke berapa aku x ingat, aku janji nak ajar pasal reka bentuk laman web kan?

Untuk pengetahuan hampa, ada beberapa cara nak reka laman web seperti :

  • <Table> HTML (cara yang paling aku tak cadangkan, disebabkan banyak formatting dalam table akan merumitkan hampa nak maintance. Dulu2 waktu ‘muda’2 aku guna table la, ya la noob tp lepas lama2 baru aku faham rupanya tak praktikal langsung)
  • CSS Framework (cara kebanyakkan web designer guna cara ni nak reka laman web, antara css framework yang paling terkenal adalah Bootstrap. InshaAllah klu ada kesempatan aku kongsi macammana nak guna. Aku pun slalu guna dan mudah)
  • CSS “Style : float” (pernah guna sekali, tapi sebab ang kena ada pemahaman yang agak mendalam dalam CSS, aku dah skip part ni dan guna CSS Framework)
  • CSS Flexbox (jujurnya x pernah pakai, tapi baca2 review ada kata tak berapa serasi (compatible) dengan IE (suka buat standard sendiri aku rasa, sebab tu x berapa nak ngamm) ).

Jadi perkongsian yang agak singkat ni aku nak kongsi macammana nak reka laman web menggunakan cara CSS “Style : float”

img_sem_elements

  • <header> – Defines a header for a document or a section
  • <nav> – Defines a container for navigation links
  • <section> – Defines a section in a document
  • <article> – Defines an independent self-contained article
  • <aside> – Defines content aside from the content (like a sidebar)
  • <footer> – Defines a footer for a document or a section
  • <details> – Defines additional details
  • <summary> – Defines a heading for the <details> element

Aku copy dan paste direct dari sini, sangat mudah dan aku harap hampa dapat faham.

Paling mudah nak aku terangkan ialah guna cara praktikal.

Macam biasa, buka sublime text suma dan tulis code ni.

code

Code aku ambil dari W3School

Bagi yang x nampak boleh muat turun gambar, aku faham hampa x masuk bab CSS lagi. Cuba hampa just go through dulu code ni, minggu depan mungkin kita akan mula dengan CSS jadi hampa boleh kaitkan dengan CSS yang kita buat ni.

Hampa akan dapat output macam ni nanti :

Capture

Contoh output Chrome

Sampai sini dulu ya, minggu ni jadual aku agak pack jadi mungkin aku tak sempat nak buat penerangan yang jelas. Kalau hampa x berapa faham sangat boleh komen kat bawah, nanti aku akan buat post yang khas untuk soalan2 hampa tu.

Sekian buat masa ni… 😉

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s