Tech: HTML, CSS & Sistem Grid

Hari Jumaat lepas adalah kali pertama aku masuk dalam sesi perkongsian pendek yang dibuat di OST. Golongan sasaran sesi ini adalah untuk memberikan idea dan kefahaman kepada intern dan juga junior programmer tentang apakah itu HTML, CSS dan juga sistem grid yang sering digunakan di dalam template sistem web yang mereka bina. Ini kerana kebanyakkan golongan ini tidak memahami kaedah yang digunakan dalam membuat dan menentukan apakah kelas yang sesuai untuk digunakan dalam tugasan mereka. Maka dalam entri ini aku tulis sedikit nota kepada sesi tersebut.

HTML

HTML ada sejarahnya tersendiri, daripada tahun 90an sehingga kini terdapat 5 versi utama yang telah bertukar daripada sekadar satu protokol yang hanya mampu mengeluarkan tulisan secara asas sehingga mampu menjalankan canvas sendiri seperti memainkan video dan audio tanpa memerlukan library tambahan seperti Flash.

Perkongsian diteruskan dengan memperkenalkan secara terperinci tentang struktur asas sesebuah fail HTML.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>OST Grid Training</title>
    <meta name="description" content="OST's grid styling training">
    <meta name="keyword" content="OST, training, grid">
    <meta name="author" content="OST">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="icon" type="image/png" href="favicon.png">
    <link rel="apple-touch-icon" href="icon.png">
</head>
<body>

</body>
</html>

Doctype

Doctype mempunyai dua jenis versi. Versi HTML 4 dan 5. Untuk HTML 4, mempunyai 3 jenis doctype. Tetapi untuk HTML 5 hanya ada satu jenis sahaja iaitu <!doctype html> (syukur). Tugas utamanya adalah untuk memberitahu kepada pelayar internet anda apakah jenis dokumen yang sedang dibuka.<

<HTML>

Tag HTML adalah antara sebagai pemula kepada dokumen HTML. Sebenarnya untuk pelayar internet yang moden, tidak wajib untuk meletakkan tag HTML kerana pelayar internet anda akan menambahnya secara automatik tetapi tiada ada baiknya anda meletakkan tag HTML kerana memberi ruang untuk pelayar internet cuba membaiki tag HTML yang hilang selalunya akan menjadikan dokumen HTML tersebut akan mempunyai masalah untuk kes cross browser.

lang=”en”

Ini adalah untuk memberitahu kepada pelayar internet bahawa dokumen ini ditulis dalam bahasa inggeris. Jika anda mahukan di dalam bahasa Malaysia, maka gunakan ms_MY. Kesannya dapat dilihat apabila pelayar internet moden seperti Chrome mencadangkan untuk membuat pentafsiran bahasa secara automatik. Tidak wajib tetapi tiada salahnya jadikan sebagai satu standart.

<HEAD>

HEAD adalah di mana perkara yang akan dibaca dan diselesaikan terlebih dahulu dan akan dibaca oleh robot terlebih dahulu sebelum masuk ke bahagian lain. Antara perkara yang dimasukkan ke dalam HEAD adalah META, TITLE dan LINK.

<META>

META atau metadata adalah di antara data yang akan digunakan oleh enjin carian untuk membuat pengiraan bagi tujuan SEO dan SERP. Terdapat banyak contoh data META yang boleh dimasukkan ke dalam HEAD yang mempunyai tugas tertentu.

<TITLE>

Apa yang anda tulis disini akan dikeluarkan di tab pelayar internet anda. Juga untuk tugas SEO.

<LINK>

LINK adalah pautan kepada sebarang jenis dokumen luar. Selalunya digunakan untuk memanggil fail CSS masuk ke dalam fail HTML yang asal.

<BODY>

Ini adalah di mana segala perkara yang mahu di paparkan kepada pengguna diletakkan.

CSS

Jika HTML itu boleh dikatakan sebagai dinding rumah, maka tugas CSS adalah untuk mencantikkan rupanya seperti meletakkan jenis pintu, jenis tingkap, warna cat, saiz frame gambar, permaidani, tile, dan dengan menggunakan CSS versi 3, arah putaran kipas pun boleh ditentukan menggunakan CSS animation.

Tiga kaedah yang boleh digunakan untuk mencantikkan HTML adalah:

  1. Elemen Tag
  2. Class
  3. Id
h1 {
    font-size: 24px;
}

.my-class {
    display: flex;
}

#my-id {
    display: none;
}

Dan di dalam perkongsian ada di terangkan penggunaan @media sebagai contoh penggunaan CSS3 dalam proses membuat laman yang menyokong kemampuan untuk responsive.

.ost-2 {
    float: left;
    width: 50%;
}

@media only screen and (min-width: 601px) and (max-width: 800px) {
    .ost-2 {
        width: 100%;
    }
}

Mungkin di lain masa boleh diterapkan pula penggunaan SASS atau LESS untuk menjadikan lebih mudah difahami seperti ini:

.ost-2 {
    float: left;
    width: 50%;
    @media only screen and (min-width: 601px) and (max-width: 800px) {
        width: 100%;
    }
}

Sempat juga kelas masuk ke dalam pengenalan Twitter Bootstrap selepas mereka memahami kaedah yang digunakan di dalam Bootstrap untuk membuat class seperti col-md-6, col-sm-12.

One thought on “Tech: HTML, CSS & Sistem Grid

Leave a Reply

Your email address will not be published. Required fields are marked *

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