Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Tuesday, 29 June 2021

SK T5 : PENGENALAN HTML, CSS, JAVASCRIPT

Get the idea:

Mahir (2021) | Menengah Atas - Sains Komputer, Tajuk : Menengah Atas - Sains Komputer
CSS dan HTML oleh Cikgu Che Noor Ashikin Binti Zakaria

Mahir (2021) | Menengah Atas : Sains Computer Laman Web Interaktif (Siri 2) : JAVASCRIPT

Guru : Wan Rafik Bin Wan Ismail


https://www.youtube.com/watch?v=hSkjAZXjI1s

https://www.youtube.com/watch?v=GWB1zJCeBT0

https://www.youtube.com/watch?v=1wAbUzHBu3Y


HTML (Hypertext Mark up Language)

  • HTML atau Hypertext Markup Language ialah bahasa markup standard yang digunakan oleh pereka web profesional bagi mereka bentuk laman web.
  • Dokumen HTML adalah mengenai konsep bagaimana dokumen dipaparkan. 
  • Dokumen HTML juga ialah konsep bagaimana elemen teks, audio, video serta grafik disusun agar mudah dibaca dan difahami oleh pelawat laman web. 
  • Untuk menerangkan struktur bagi setiap laman web, kod HTML atau elemen HTML digunakan. 
  • Elemen biasanya terdiri daripada dua tag yang berpasangan, iaitu: start tag dan close tag. 
  • Kandungan yang akan dipaparkan pada web akan berada di antara start tag dengan close tag.
  • Semua elemen HTML mengandungi atribut. Atribut mengandungi maklumat tambahan bagi setiap elemen HTML dan biasanya ditempatkan di start tag. Terdapat dua bahagian atribut:
  • Atribut nama 
  • Atribut nilai










  • CSS (Cascading Style Sheets)
  • Cascading Style Sheet (CSS) ialah salah satu bahasa pengaturcaraan yang merupakan tambahan (extension) kepada HTML. 
  • CSS membenarkan perubahan kepada gaya sesuatu halaman web dan menerangkan persembahan bagi sesuatu dokumen HTML.
  • HTML dengan CSS (kiri) dan tanpa CSS (kanan)
    Sumber : https://www.dummies.com/programming/what-does-css-do/


    Laman web yang bagus untuk bacaan tentang Inline CSS, Internal CSS dan External CSS.

    Sintaks CSS terdiri daripada selector dan declaration block. 

    Selector ialah apa/bahagian tag HTML mana yang kita hendak style/hias.
    Elemen dalam declaration block memberitahu bagaimana untuk stylekan/hiaskan. Cth warna, saiz dll.
    Setiap declaration block mengandungi property dan value(nilai).






    Declaration block boleh ada satu atau lebih declaration(property dan value) dan diasingkan menggunakan semikolon (;)
    CSS declaration mesti berakhir dengan semikolon, dan declaration block mesti berada dalam curly braces {}







    JAVASCRIPT

  • JavaScript menyediakan keupayaan pengaturcaraan untuk memproses sesuatu tugas berdasarkan permohonan yang diterima daripada klien.

  • Kod JavaScript akan ditulis bersama-sama dalam kod HTML. 


    Jika HTML tidak mempunyai sebarang skrip yang ditulis di dalamnya, browser akan menghasilkan laman web berdasarkan kod HTML tersebut.
      Kod JavaScript ditulis di antara tag ‘<script>’ dengan ‘</script>’

      Terdapat dua cara kod JavaScript ditulis dalam HTML:
      1 Explicit embedding - kod JavaScript diletakkan dalam atau bersama-sama kod HTML
      2 Implicit embeddingmeletakkan kod JavaScript dalam satu fail sendiri
      yang mempunyai extension “.js” seperti contoh myScript.js dan akan dipanggil jika ingin digunakan.

      Saturday, 28 September 2019

      SK T5 : BAB 3 : KEPERLUAN BAHASA PENSKRIPAN KLIEN DALAM LAMAN WEB

      NOTA

      3.1.1 KEPERLUAN BAHASA PENSKRIPAN KLIEN DALAM LAMAN WEB
      BT ms124


      HTML
      1. HTML (Hypertext Markup Language)  - digunakan untuk membangunkan laman web. (@ menerbitkan dokumen dalam talian)
      2. Dokumen HTML ialah konsep bagaimana elemen teks, audio, video serta grafik disusun supaya mudah dibaca dan difahami oleh pelayar laman web.(@ konsep bagaimana dokumen dipaparkan pada laman web)
      3. Dalam HTML, kod HTML atau elemen HTML digunakan. 
      4. Elemen terdiri daripada 2 tag yang kebiasaannya berpasangan, iaitu start tag dan close tag. Di tengah-tengah antara start tag dan close tag ialah kandungan yang akan dipaparkan.
      5. Semua elemen HTML mempunyai atribut. 
      6. Atribut ialah maklumat tambahan bagi setiap elemen HTML dan biasanya ditempatkan di start tag. Terdapat 2 jenis atribut:
        • Atribut nama  : contohnya a href
        • Atribut nilai : contohnya www.google.com







      CSS
      1. CSS (Cascading Style Sheet) ialah bahasa pengaturcaraan yang merupakan tambahan kepada HTML.
      2. CSS membenarkan perubahan kepada gaya / style sesuatu lama web dan menerangkan persembahan sesuatu dokumen HTML






      Javascript

      1. Interaksi merujuk permohonan untuk mendapatkan sesuatu maklumat dari laman web.
      2. Bahasa pengaturcaraan akan memproses permohonan (request) klien melalui laman web.
      3. Bahasa yang digunakan dikenali sebagai bahasa penskripan. Antara bahasa penskripan ialah:
        • Javascript
        • PHP
        • ASP
      4. Javascript menyediakan keupayaan memproses sesuatu tugas berdasarkan permohonan klien.
      5. Kod Javascript akan ditulis bersama-sama kod HTML.
      6. Kod Javascript ditulis antara tag <script> dengan </script>
      7. Ada 2 cara kod Javascript ditulis dalam HTML:
        • Explicit embedding
        • Implicit embedding









      Konsep Aplikasi Pelanggan/Pelayan (Client/Server)
      1. Rekabentuk laman web dibangunkan berteraskan pelanggan/pelayan.
      2. Pelanggan  (Client) = pelayar/browser
      3. Aplikasi pelayan (Server) berada di mana-mana di seluruh dunia dan berfungsi untuk memproses permintaan daripada klien @ menghantar laman web yang diminta oleh klien.
      4. Pangkalan data digunakan untuk menyimpan data.







      Bahasa Penskripan
      1. Terdapat 2 jenis laman web:
        • laman web statik -  laman web yang direka menggunakan HTML sahaja.
        • laman web dinamik - laman web yang direka menggunakan penskripkan pelayan seperti PHP dan ASP. Kebaikannya : pemilik laman web boleh kemaskini kandungan laman web dengan mudah.
      Perbezaan Laman Web Statik vs Laman Web Dinamik:
      Laman Web Statik
        Laman Web Dinamik
        Dibina menggunakan HTML sahajaDibina menggunakan penskripkan pelayan seperti ASP dan PHP
        Kandungan paparan mengikut tag HTML yang digunakanKandungan paparan boleh dipanggil dari pangkalan data atau mengikut tindakan pengguna
        Contohnya :  laman web yang memaparkan latar belakang organisasiContohnya : Aktiviti akan datang yang dipaparkan di laman utama yang berubah mengikut tarikh kalendar

        2. Penskripan dilaksanakan berdasarkan interaksi pengguna dengan laman web
        3. Penskripan ditempatkan di 2 bahagian:
        • Penskripan Klien (di sebelah pelanggan - bekerja di bahagian hadapan pembangunan web dan dilaksanakan oleh pelayar web)
        • Penskripan Pelayan (di sebelah pelayan - bekerja di bahagian belakang pembangunan web dan dilaksanakan oleh pelayan web)


        4. Proses kerja:
          1. Pengguna taip alamat URL di browser (klien)
          2. Browser/Klien hantar URL ke server untuk diproses
          3. Server memproses permintaan Klien menggunakan bahasa  penskripan pelayan
          4. Server menghantar laman web kepada klien **langkah 3 dan 4 berlaku di belakang laman web, dan dilaksanakan oleh pelayan web(server)
          5. Klien/Pelayar terjemah dan laksanakan HTML termasuk penskripan klien  untuk dipaparkan kepada pengguna. **langkah 5 bekerja di bahagian depan dan dilaksanakan oleh pelayar web(klien) - dipapar pada skrin pengguna




        Untuk bacaan lanjut, rujuk : 







        Perbezaan Bahasa Penskripan Klien vs Bahasa Penskripan Pelayan
        Bahasa Penskripan Klien
          Bahasa Penskripan Pelayan
          Dilaksanakan dibahagian klien atau web browser / pelayarDilaksanakan di bahagian back end server /pelayan web
          Contoh HTML, CSS, JavascriptContoh PHP, Python, Java, Ruby, ASP
          Keselamatan data kurang terjaminKeselamatan data lebih terjamin.


          Bahasa Penskripan Klien (BPK)
          1. Bahasa Penskripan Klien - program komputer dalam web yang dilaksanakan oleh komputer klien.
          2. Program ini memanipulasi dan memapar kandungan laman web yang telah dimuat turun dalam komputer klien.
          3. BPK memberi keupayaan laman web untuk menukar @ beri respon kepada kandungan web mengikut input yang dberikan oleh pengguna dengan lebih pantas.
          4. Contoh  kegunaan BPK:
            • proses pengesahan input yang dimasukkan oleh pengguna apabila mengisi borang dalam talian
            • melaksanakan tugas-tugas mudah seperti menukar elemen, seperti jenis font, warna latar web yang tidak melibatkan pelayan.
            • penggunaan  shopping cart dalam laman web yang menawarkan pembelian secara atas talian. Cth kita ingin menambah atau mengurangkan item belian, maka jumlah kos  akan berubah secara automatik.
                5. Walaubagaimana pun, tugas-tugas yang melibatkan pangkalan data pada bahagian pelayan atau capaian ke atas fail sistem yang terdapat dalam pelayan web ialah contoh tugasan yang tidak mampu dilaksanakan oleh BPK.





          Kesimpulannya.........

          Kelebihan Bahasa Penskripan Klien:
          1. menjadikan laman web lebih interaktif (web more interactive)
          2. meningkatkan kebolehgunaan web bagi browser yang support banyak jenis BPK. (web more practical)
          3. Perlaksanaan tugas jadi lebih pantas, kerana tidak melibatkan komputer server. (more faster)
          4. Pembangun laman web berupaya menentukan reka bentuk dan ciri-ciri web. (web designer more capable to create awesome web  with added value)

          SK T5 : BAB 3 : BAHASA PENSKRIPAN KLIEN (isihan, carian, nilai maksimum, minimum, mean dan count, QUEUE)

          NOTA

          3.1.2 BAHASA PENSKRIPAN KLIEN 
          BT ms132
          1. Contoh Aturcara Penskripan Klien:
          • proses pengisihan
          • pencarian
          • mencari nilai maksimum dan nilai minimum
          • mengira purata serta bilangan unsur dalam senarai
          2. Suatu senarai unsur diisih untuk memudahkan carian.
          3. ISIHAN ada 2 : Isihan Buih & Isihan Pilih 

          4. ISIHAN BUIH:
          • membandingkan unsur-unsur bersebelahan dan akan menukar kedudukan (swap)
          • Ada 2 proses perbandingan:
            • banding adakah unsur pertama > unsur kedua, jika YA.. tukar tempat! (Ini untuk turutan menaik, sebab kita bandingkan no[j]>no[j+1].. dan tukar kedudukan)
                • Senarai belum diisih [5,1,4,3,2] akan menjadi [1,2,3,4,5] setelah diisih
            • banding adakah unsur pertama < unsur kedua, jika Ya.. tukar tempat! (Ini untuk urutan menurun, sebab kita bandingkan no[j[<no[j+1]?.. dan tukar kedudukan)
                • Senarai belum diisih [2,4,1,5,8] akan menjadi [8,5,4,2,1] setelah diisih
          • Kebaikan:
              • lebih mudah dibina dan lebih mudah difahami
              • sesuai untuk bilangan unsur yang sedikit kerana perlu membuat perbandingan satu per satu unsur hingga akhir senarai.
              • Contoh untuk menyusun buku-buku di rak yang kecil.

          ##maaf, terdapat kesilapan dalam nota tulisan pen ini,...document.write(no) hanya wujud sekali sahaja, iaitu setelah keluar terus dari gelung luar..  (BUKANnya pada setiap kali keluar gelung luar!)

          ##maaf, terdapat kesilapan dalam nota tulisan pen ini,...document.write(no) hanya wujud sekali sahaja, iaitu setelah keluar terus dari gelung luar..  (BUKANnya pada setiap kali keluar gelung luar!)


          ##maaf, terdapat kesilapan dalam nota tulisan pen ini,...document.write(no) hanya wujud sekali sahaja, iaitu setelah keluar terus dari gelung luar..  (BUKANnya pada setiap kali keluar gelung luar!)

          ##maaf, terdapat kesilapan dalam nota tulisan pen ini,...document.write(no) hanya wujud sekali sahaja, iaitu setelah keluar terus dari gelung luar..  (BUKANnya pada setiap kali keluar gelung luar!)

          ##Sepatutnya document.write(no) hanya wujud di akhir sekali, dengan jawapan 1,2,3,4,5..



          4. ISIHAN PILIH:
          • membandingkan satu  unsur dengan unsur terkecil/terbesar daripada unsur lain dalam senarai, seterusnya tukar kedudukan jika urutan salah.
          • Ada 2 proses perbandingan:
            • banding unsur sama ada  lebih besar daripada unsur terkecil (Untuk urutan menaik)  
            • banding unsur sama ada lebih kecil daripada unsur terbesar (Untuk urutan menurun)
          • Kebaikan:
              • sesuai untuk isihan  jika bilangan unsur adalah sedikit
              • Contoh untuk menyusun murid mengikut ketinggian semasa beratur  dalam kelas.
          5. CARIAN PERDUAAN / CARIAN BINARI
          • digunakan untuk bilangan data yang banyak dan telah diisih
          • Ada 3 proses perbandingan:
            • bandingkan adakah unsur di tengah = unsur yang dicari?
            • bandingkan adakah unsur di tengah < unsur yang dicari?
            • bandingkan adakah unsur di tengah > unsur yang dicari?
          6. Mendapatkan nilai Maksimum
          • Nilai maksimum ialah nilai terbesar dalam senarai
          • Proses kerja:
            • beri nilai awal maksimum
            • banding nilai dalam senarai dengan nilai awal maksimum
            • Dapat nilai maksimum terkini
          • Sesuai juga untuk mencari  nilai bangunan tertinggi dan jarak terpanjang.

          7. Mendapatkan nilai Minimum
          • Nilai minimum ialah nilai terkecil dalam senarai
          • Proses kerja:
            • beri nilai awal minimum
            • banding nilai dalam senarai dengan nilai awal minimum
            • Dapat nilai minimum terkini
          • Sesuai juga untuk mencari  nilai kotak paling ringan dan sungai terpendek
          8. Mendapatkan nilai Mean @ purata
          • Mean ialah purata nilai dalam senarai
          • Proses kerja:
            • jumlahkan nilai-nilai dalam senarai
            • dapatkan bilangan nilai dalam senarai
            • Nilai mean dikira dengan membahagikan jumlah dengan bilangan (Mean = jumlah unsur/bilangan unsur)
          9. Mendapatkan nilai Count
          • Count mengira bilangan nilai dalam senarai
          • Proses kerja:
            • gunakan satu perwakilan sebagai pembilang dan beri nilai awal pembilang = 1
            • count dikira dengan menambah  pembilang dengan 1 bagi setiap nilai yang dirujuk (pembilang = pembilang +1)
            • memaparkan nilai akhir pembilang, iaitu nilai count
          10. Pengumpukan nilai dalam struktur giliran(Queue)
          • Queue ialah struktur data linear, iaitu pengumpukkan nilai dalam ruang ingatan secara teratur.
          • Queue boleh membuang nilai lama, iaitu nilai terawal yang dimasukkan. Kaedah ini dipanggil FIFO (First In, First Out)
          • Ada 2 operasi queue:
            • enqueue - memasukkan data ke dalam queue
            • dequeue - membuang data lama dalam queue
          • Operasi queue menggunakan fungsi:
              • push() - memasukkan nilai, dari arah belakang ke dalam queue
              • shift() - mengeluarkan nilai terawal yang dimasukkan (dikeluarkan melalui depan,sebab dah lama masuk melalui belakang, dan dah tergerak ke depan...)
              • unshift() - memasukkan nilai dari arah hadapan ke dalam queue
              • pop() - mengeluarkan nilai terawal yang dimasukkan(dikeluarkan melalui belakang sekali, sebab dah lama masuk melalui depan, dan dah tergerak ke belakang...)
          • Kebaikan fungsi-fungsi push(), shift(), unshift() dan pop()
                • sangat mudah digunakan kerana hanya perlu panggil sahaja fungsi-fungsi tersebut
          • Kekangan:
                • fungsi-fungsi tidak sesuai digunakan jika saiz  queue adalah besar
                • nilai-nilai perlu digerakkan kedudukannya setiap kali fungsi shift() dipanggil dan digunakan.










           

          Sunday, 15 September 2019

          SK T5: Cascading Style Sheet(CSS)

          Bab 3: PENGATURCARAAN BERASASKAN WEB

          ms298

          3.3.4 Menggunakan Cascading Style Sheet (CSS) untuk menggayakan Text, Font, Backgroud, Table, Borders dan Position 

          CSS

          • salah satu bahasa pengaturcaraan yang merupakan tambahan (extension) kepada HTML.
          • membenarkan perubahan kepada gaya laman web dan menerangkan persembahan bagi sesuatu dokumen HTML.

          3 Cara penulisan CSS dalam aturcara HTML

          External Style Sheet
          • Tag gaya ditulis dan disimpan dalam satu fail dan fail itu mesti mempunyai extension CSS (*.css).
          • Seterusnya, fail css ini akan dipanggil melalui tag HTML seperti berikut
                    <link rel="stylesheet" type="text/css" href="style1.css">

          • Kelebihan External Style Sheet:
          1. boleh mengawal beberapa dokumen sekaligus
          2. boleh membina kelas untuk style yang boleh digunakan pada elemen HTML yang berbeza
          3. boleh mengumpulkan style dengan mudah untuk dijadikan lebih efisien.



          Internal Style Sheet

          • Tag gaya boleh ditulis sama ada dalam kawasan <head> atau <body>.
          • boleh menulis tag gaya dalam kedua-dua kawasan tersebut
          • Kelebihan Internal Style Sheet:
          1. hanya memberi kesan pada laman yang dpaparkan sahaja
          2. boleh menggunakan kelas dan ID
          3. tidak perlu memuatnaik fail yang banyak

          Inline Style
          • Tag gaya ditulis pada bahagian/elemen tag
          • Contohnya kita hendak menukar warna pada suatu kepada <h1>. Oleh itu, tag gaya perlu ditulis dalam tag <h1> seperti berikut:
          <h1 style="color: blue;"> Laman Web Sekolah</h1>



          Featured post

          SK T4 subtopik 1.4 STRUKTUR KAWALAN IF-ELSE, SWITCH-CASE, FOR, WHILE, DO-WHILE

          BUKU TEKS - SUBTOPIK 1.4 STRUKTUR KAWALAN SLAID STRUKTUR KAWALAN NOTA STRUKTUR KAWALAN KUIZ  INTERAKTIF 1 : STRUKTUR KAWALAN KUIZ INTERA...

           

          SAINS KOMPUTER & ASAS SAINS KOMPUTER Template by Ipietoon Cute Blog Design