Scribd Logo
Unggah

Selamat datang di Scribd!

  • OPTIMIZED TITLE

    Diunggah oleh

    Lizawati Masroni
    238 tayangan72 halaman
    nota

    Judul Asli

    344006558 Kod Arahan HTML

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PPTX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    nota

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PPTX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    238 tayangan72 halaman

    OPTIMIZED TITLE

    Diunggah oleh

    Lizawati Masroni
    nota

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PPTX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 72

    ASAS SAINS

    KOMPUTER

    BAB 04 :
    KOD ARAHAN
    4.2.
    1

    MELAKAR
    PAPAN
    CERTITA
    PAPAN CERITA
    Papan cerita ialah satu siri lakaran yang
    menggambarkan isi kandungan untuk setiap
    paparan skrin suatu laman sesawang.

    PAPAN CERITA

    • MEMBERIKAN SUATU GAMBARAN VISUAL KEPADA PENGATUR CARA


    DENGAN LEBIH TERATUR
    • MENGGAMBARKAN REKA BENTUK DAN REKA LETAK ANTARA MUKA BAGI
    SETIAP PAPARAN YANG AKAN DIBINA
    • MENENTUKAN ALIRAN NAVIGASI SESUATU LAMAN SESAWANG
    Sebelum membina satu laman
    sesawang,anda harus melakar
    papan cerita laman sesawang
    terlebih dahulu. Rajah dibawah
    menunjukkan kebaikan
    melakar papan cerita.
    Langkah ini penting dan akan
    memudahkan pembinaan lama
    sesawang.
    KEBAIKAN MELAKAR PAPAN CERITA
    BUKU
    GURU RUJUKAN
    MENGETAHUI MAKLUMAT
    YANG HARUS DIMASUKKAN

    MELAKAR
    MEMBERIKAN PAPAN MENGETAHUI
    PENJELASAN KASAR ALIRAN ANTARA
    TENTANG STRUKTUR CERITA LAMAN
    LAMAN SESAWANG SESAWANG
    MENGETAHUI BILANGAN
    LAMAN SESAWANG YANG
    DIPERLUKAN
    LAMAN
    SESAWANG
    STRUKTUR MAKLUMAT DAN PAUTAN LAMAN SESAWANG

    1. STRUKTUR LINEAR
    • MENGHUBUNGKAN SETIAP LAMAN DENGAN DUA PILIHAN PENGEMUDIAN
    IAITU BERGERAK KE HADAPAN ATAU KE BELAKANG

    2. STRUKTUR CABANG
    • BERSIFAT DINAMIK DAN BERKEUPAYAAN MENGEMUDI KE LAMAN LAIN
    DENGAN MUDAH.
    • LAMAN UTAMA DIPAUTKAN KE LAMAN-LAMAN LAIN MELALUI SISTEM
    MENU
    3. STRUKTUR RODA
    • BERBENTUK SEPERTI RUJI BASIKAL.
    • LAMAN UTAMA DIPAUTKAN KE LAMAN-LAMAN LAIN TETAPI PENGUNJUNG
    TERPAKSA KEMBALI KE LAMAN UTAMA SEBELUM DIPAUTKAN KE LAMAN
    SETERUSNYA.

    4. STRUKTUR HIERARKI
    • MEMPUNYAI MODEL PENGEMUDIAN ATAS KE BAWAH .
    • BERMULA DENGAN LAMAN UTAMA, PENGUNJUNG DIPAUTKAN KE
    LAMAN-LAMAN LAIN. PENGUNJUNG ADA PILIHAN UNTUK KE LAMAN-
    LAMAN SETERUSNYA TANPA KEMBALI KE LAMAN UTAMA.
    APA ITU
    INTERNET?
    SATU SALURAN
    ATAU MEDIA
    PENYEBARAN
    MAKLUMAT…
    LANGKAH-LANGKAH
    YANG PERLU DIAMBIL
    SEBELUM MELAKAR
    PAPAN CERITA
    1. KUMPUL MAKLUMAT YANG
    DIKEHENDAKI

    TEKS,IMEJ,AUDIO,VIDEO,ANIMASI
    2. SUSUN SEMUA MAKLUMAT
    MENGIKUT TOPIK

    DARI UMUM KE KHUSUS


    3. TENTUKAN TAJUK-TAJUK
    UTAMA,TAJUK KECIL DAN ISI
    KANDUNGAN UNTUK SETIAP LAMAN
    4. RANCANGKAN STRUKTUR
    MAKLUMAT DAN PAUTAN LAMAN
    SESAWANG

    STRUKTUR LINEAR,STRUKTUR
    HIERARKI,STRUKTUR CABANG DAN STRUKTUR
    RODA
    REKA BENTUK STRUKTUR MENU
    6. RANCANGKAN RUPA DAN
    REKA BENTUK LAMAN

    SKEMA WARNA,JENIS,SAIZ DAN WARNA


    TEKS
    7. LAKARKAN ALIRAN PAUTAN
    BAGI KESEMUA LAMAN DALAM
    TAPAK SESAWANG
    4.2.
    2

    TAG DALAM
    HTML
    HTML
    -Bahasa pengaturcaraan yang menggunakan kod-kod arahan yang dipanggil TAG HTML.
    -TAG Ini mudah difahami dan ditulis dalam tulisan biasa.
    -pembinaan aturcara HTML tidak diperlukan perisian yang khusus.
    -boleh menggunakan perisian NOTEPAD dan menyimpan dalam bentuk HTML (.html).
    Tag HTML boleh ditulis dalam huruf besar
    atau huruf kecil

    MAKSUDNYA,
    <BODY> MEMPUNYAI KESAN YANG SAMA
    SEPERTI <body>

    TAG HTML DITULIS DALAM KURUNGAN < >


    TAG HTML WUJUD DALAM PASANGAN
    TAG AWAL < > DAN TAG AKHIR < / >
    4.2.
    3

    PARANGRAPH
    HEADINGS
    DALAM HTML
    LANGKAH-LANGKAH MENGATUR CARA HTML UNTUK
    MENGHASILKAN ENAM SAIZ PARAGRAPH HEADINGS
    DI ANTARA TAG
    GUBAKAN
    <body> DAN
    PERISIAN APLIKASI
    </body>,MASUKKA
    NOTEPAD DAN
    N TAG HEADINGS KE
    LANCARKAN SATU
    DALAM DOKUMEN
    DOKUMEN
    BAHARU
    BAHARU

    BUKA FOLDER HTML PILIH MENU FILE>SAVE AS UNTUK


    MENYIMPAN DOKOMEN ANDA
    SAYA.DWIKLIK FAIL
    DALAM FOLDER HTML
    HEADINGS.HTML UNTUK SAYA.NAMAKAN DOKUMEN ANDA
    MEMBUKANYA DALAM PELAYAR HEADINGS.html
    WEB
    4.2.
    4

    BANNER,FRAME
    DAN MENU
    DALAM HTML
    Banner,frame
    dan menu
    digunakan
    sebagai
    tarikan kepada
    pengguna
    untuk malawat
    laman
    sesawang
    BANNER
    • Biasanya berbentuk segi empat dan
    terletak sama ada di bahagian
    atas ,bawah atau pada sisi laman
    sesawang.
    • Mengandungi teks,grafik,animasi
    dan bunyi.
    • Biasanya digunakan untuk
    mengiklankan sesuatu produk.
    • Sepanduk web yang diletakkan
    dalam laman sesawang dan boleh
    digunakan sebagai tajuk pada
    FRAME
    • Bingkai dalam paparan laman sesawang
    • Wujud dalam bentuk lajur
    mendatar,melintang atau gabungan
    kedua-duanya.
    • Membahagikan paparan laman sesawang
    kepada bahagian-bahagian yang khusus
    seperti menu utama,pautan,berita dan
    sebagainya.
    • Memudahkan pengguna membuat
    navigasi dalam paparan semasa melawat
    laman sesawang.
    MENU
    • Pautan mudah ke bahagian-
    bahagian lain dalam laman
    sesawang yang sama.
    • Dibina untuk memudahkan
    pengguna membuat navigasi
    antara laman-laman sesawang
    dalam tapak sesawang atau ke
    bahagian-bahagian lain dalam
    Jenis Menu Ciri- ciri
    Menu senarai • Berbentuk jalur mendatar atau menegak
    pautan statik seperti bar menu.
    (static links) • Satu senarai pautan hiperteks ke
    destinasi lain dalam laman sesawang.

    Menu jenis jadual bawah • Berbentuk bar menu tetapi apabila diklik
    (drop-down menu) satu kotak yang menyenaraikan pilihan
    akan muncul.

    Menu pelbagai tingkat • Setiap pilihan dalam jadual boleh


    (multilevel menu) dikembangkan ke pilihan yang lain
    menjadikannya berkembang pelbagai
    tingkat.

    Menu terapung (floating • Berbentuk bingkai yang satatik


    menu) • Tidak bergerak bersama scrool bar
    • Sbgai elemen navigasi laman sesawang.
    4.2.
    5

    PAUTAN TEKS
    DAN IMEJ
    DALAM HTML
    PAUTAN IMEJ DAN TEKS

    • Menjadikan satu laman sesawang berinteraktif dan


    dinamik.
    • Digunakan sebagai alat navigasi di dalam laman
    sesawang yang sama ataupun antara beberapa
    laman sesawang dalam tapak sesawang yang sama
    atau berlainan.
    • Pautan teks digunakan untuk memudahkan
    kefahamanisi kandungan laman destinasi.
    • Pautan imej digunakan untuk memberikan
    gambaran isi kandungan laman destinasi.
    • Tag HTML yang digunakan ialah <a> </a>
    LANGKAH-
    LANGKAH
    MENGATUR HTML
    UNTUK MEMBINA
    PAUTAN TEKS DAN
    PAUTAN TEKS
    PAUTAN TEKS

    1. GUNAKAN PERISIAN APLIKASI NOTEPAD DAN


    LANCARKAN FAIL BARU.
    TAIPKAN KOD ARAHAN ASAS HTML
    2. TAIPKAN MEMBINA PAUTAN TEKS DI DALAM
    TAG <tittle> </tittle>
    3. DALAM TAG <body> </body>,TAIPKAN TAG
    PAUTAN <a href=http://moe.gov.my>
    KEMENTERIAN PENDIDIKAN MALAYSIA</a>.
    3. PILIH
    MENU FILE>SAVE AS UNTUK MENYIMPAN DUA
    DOKUMEN ANDA SEBAGAI FAIL HTML DALAM FOLDER HTML
    SAYA.
    4. BUKA FOLDER HTML SAYA .DWIKLIK FAIL DOKUMEN-
    DOKUMEN HTML UNTUK MEMBUKANYA DALAM PELAYAR
    WEB.
    5. BAIKI RALAT JIKA ADA
    PAUTAN IMEJ

    1. GUNAKAN PERISIAN APLIKASI NOTEPAD DAN


    LANCARKAN FAIL BARU.
    TAIPKAN KOD ARAHAN ASAS HTML.
    2. TAIPKAN MEMBINA PAUTAN TEKS DI DALAM
    TAG <tittle> </tittle>
    3. DALAM TAG <body> </body>,TAIPKAN TAG
    PAUTAN <a href=“http://moe.gov.my”>
    <img scr=“logoKPM.jpg”>
    </a>
    3. PILIH
    MENU FILE>SAVE AS UNTUK MENYIMPAN DUA
    DOKUMEN ANDA SEBAGAI FAIL HTML DALAM FOLDER HTML
    SAYA.
    4. BUKA FOLDER HTML SAYA .DWIKLIK FAIL DOKUMEN-
    DOKUMEN HTML UNTUK MEMBUKANYA DALAM PELAYAR
    WEB.
    5. BAIKI RALAT JIKA ADA
    4.2.
    6

    MEMASUKKAN
    IMEJ DALAM
    HTML
    IMEJ BOLEH
    DIMASUKKAN KE
    DALAM LAMAN
    SESAWANG DENGAN
    MENGGUNAKAN KOD
    ARAHAN HTML.TIGA
    JENIS FORMAT HTML
    YANG BIASA
    DIGUNAKAN IALAH
    GIF,JPEG DAN PNG
    GIF • GIF sesuai digunakan dalam jaringan
    sejagat World Wide Web kerana imej
    GIF adalah format merantas platform
    yang membolehkan imej GIF dapat
    dilihat dalam hampir semua sistem
    komputer yang ada.
    • Kelemahan format GIF ialah ia terhad
    kepada 256 warna sahaja.
    • Variasi format GIF membolehkan
    beberapa imej GIF disimpan bersama
    dan dipaparkan secara berturutan
    untuk memberi kesan animasi
    JPEG
    • Format merentas platform tetapi
    mempunyai dua kelemahan iaitu
    bukan semua sistem komputer
    boleh menggunakannya dan imej
    JPEG adalah dalam bentuk fail
    termampat dan ini mengurangkan
    kualiti imej.
    • Format ini boleh menggunakan
    spektrum warna penuh iaitu 16.7
    juta warna.
    PNG
    • Singkatan bagi Portable Network
    Graphics.
    • Format fail imej bitmap yang
    termampat tetapi kualiti imej
    tetap sama.
    • Format ini seakan-akan fail GIF
    tetapi tidak mempunyai
    keupayaan animasi.
    DALAM TAG <IMJ> IALAH
    ATURCARA TAG KOSONG
    HTML,IMEJ DAN HANYA
    DIMASUKKAN MENGANDUNGI
    DGN ATRIBUT ATRIBUT
    MENGGUNAKAN TERTENTU
    TAG <IMJ>. SAHAJA.

    TAG <IMJ> TIDAK


    PERLUKAN TAG
    PENUTUP.
    • ATRIBUT ALT DIGUNAKAN UNTUK MEMAPARKAN TEKS
    SEKIRANYA IMEJ TIDAK DAPAT DIPAPARKAN OLEH SEBAB-
    SEBAB TERTENTU ,SEPERTI TIADA RANGKAIAN INTERNET..
    • ATRIBUT STYLE,WIDTH DAN HEIGHT DIGUNAKAN UNTUK
    MENTAKRIFKAN SAIZ ABGI IMEJ.
    • LEBAR DAN TINGGI IMEJ DINYATAKAN DALAM UNIT
    PIKSEL (PX)
    • TERDAPAT 2 CARA UNTUK MEMASSUKKAN ATRIBUT
    • CARA PERTAMA, MENGGUNAKAN ATRIBUT STYLE.
    • CARA KEDUA, MENGGUNAKAN ATRIBUT WIDTH DAN
    HEIGHT.
    4.2.
    7

    PULL-DOWN
    MENU DALAM
    HTML
    • DIKENALI SEBAGAI DROP-DOWN MENU,DROP-
    DOWN LIST DAN DROP-DOWN BOX.
    • MENGANDUNGI SATU SENARAI ITEM YANG AKAN
    MUNCUL APABILA PENGGUNA MENGKLIK PADA
    SATU BUTANG ATAU PILIHAN TEKS.
    • MENYENANGKAN PROSES MEMASUKKAN DAN
    MEMILIH ITEM YANG DIPERLUKAN DARIPADA
    SATU SENARAI YANG PANJANG.
    • TAG <SELECT> </SELECT> UNTUK
    MENGHASILKAN PULL-DOWN MENU.
    • TAG <OPTION>DIMASUKKAN DALAM TAG
    <SELECT> UNTUK MENUNJUKKAN JENIS
    PILIHAN YANG ADA DALAM PULL-DOWN
    MENU YANG DIBINA.
    • BERFUNGSI SEBAGAI ALAT PILIHAN UNTUK
    MEMUDAHKAN PENGGUNA MEMASUKKAN
    DATA
    • PULL-DOWN MENU JUGA DAPAT
    MENGHINDARI PENGGUNA DARIPADA
    MEMASUKKAN MAKLUMAT YANG TIDAK
    TEPAT ATAU KESILAPAN EJAAN.
    4.2.
    8

    RUANG KOMEN
    DALAM HTML
    • BERTUJUAN UNTUK PELAWAT MEMBERI
    MAKLUM BALAS.
    • PELAWAT YANG MELAYARI SESUATU LAMAN
    SESAWANG BOLEH MEMBERIKAN PENDAPAT
    MEREKA DALAM BENTUK TEKS DI RUANG
    KOMEN.
    • KOMEN YANG DIHANTAR AKAN DITUJUKAN
    KEPADA PENTADBIR LAMAN TERSEBUT .
    • DALAM ATUR CARA HTML,TAG <FORM>
    </FORM> DAN <TEXTAREA> </TEXTAREA>
    DILETAKKAN DALAM TAG <BODY> </BODY>
    UNTUK MEMBINA RUANG KOMEN
    • TEXTAREA BOLEH MEMUATKAN
    BILANGAN AKSARA YANG TIDAK TERHAD
    .
    • SAIZ UNTUK RUANG TEXTAREA BOLEH
    DITETAPKAN DENGAN MENGGUNAKAN
    ATRIBUT COLS AND ROWS.
    4.2.
    9

    MENGESAN
    RALAT
    JIKA OUTPUT ATUR CARA
    TIDAK SEPERTI YANG
    DIKEHENDAKI, MAKA INI
    BERMAKSUD ATUR CARA
    INI MEMPUNYAI RALAT.
    2.BANDINGKAN LAMAN
    1.UJI LARI ATUR CARA SESAWANG YANG
    YANG DIBINA DIPAPARKAN OLEH
    (BUKA FAIL HTML DGN PELAYAR WEB DGN APA YG
    MENGGUNAKAN SATU DIJANGKAKAN.KENAL
    PELAYAR WEB. PASTI RALAT.

    3.TELITI SEMULA 4.BAIKI RALAT PADA


    KOD-KOD HTML. ATUR CARA HTML.
    • LANGKAH-LANGKAH MEMBAIKI RALAT
    MENYERUPAI SUATU KITAR YANG
    BERTERUSAN SEMASA
    MEMBANGUNKAN SESUATU LAMAN
    SESAWANG.
    • JENIS RALAT YG DIJUMPAI IALAH
    DALAM PENGATURCARAAN HTML
    ADALAH RALAT SINTAKS DAN
    PENGGUNAAN TEKS DI TEMPAT YG
    SALAH.
    • RALAT SINTAKS BIASANYA TERLIBAT DGN
    KESILAPAN DALAM CARA KOD ARAHAN
    DITULIS.
    • KESILAPAN INI AKAN MENYEBABKAN
    PELAYAR WEB TIDAK DAPAT
    MELAKSANAKAN KOD-KOD ATUR CARA YG
    DIHASILKAN.
    • RALAT SINTAKS JUGA TERMASUK
    KESALAHAN EJAAN DAN PENGGUNAAN
    TANDA BACA YANG TIDAK BETUL.
    4.2.
    10
    MEMBINA
    LAMAN
    SESAWANG
    YANG
    INTERAKTIF
    APA ITU
    DOMAIN?
    ??
    DOMAIN

    • DOMAIN IALAH SEKUMPULAN KOMPUTER


    DAN PERANTI DLM SATU RANGKAIAN YANG
    MENTADBIRKAN SEBAGAI SATU UNIT DAN
    MEMPUNYAI PERATURAN DAN PROSEDUR
    YANG SAMA .
    • DALAM INTERNET,DOMAIN DI TAKRIFKAN
    MENGIKUT ALAMAT INTERNET PROTOCOL
    (IP)
    • NAMA DOMAIN DIGUNAKAN DALAM URL
    UNTUK MENGENAL PASTI SESUATU LAMAN
    SESAWANG.
    • TAPAK SESAWANG IALAH SATU
    HIMPUNAN FAIL WWW DENGAN SATU
    LAMAN SESAWANG UTAMA YG DIKENALI
    SEBAGAI HOMEPAGE.
    • PADA LAMAN HOMEPAGE TERDAPAT
    PAUTAN KE LAMAN-LAMAN SESAWANG
    LAIN YG TERDAPAT DLM LAMAN
    SESAWANG YG SAMA.
    LANGKAH-LANGKAH
    MEMBINA SATU
    LAMAN SESAWANG
    YG INTERAKTIF
    1. PILIH TAJUK DAN TOPIK
    LAMAN SESAWANG

     FIKIRKAN TOPIK, TOPIK KECIL


    DAN TAJUK BAGI LAMAN
    SESAWANG
     LAKARKAN PAPAN CERITA YG
    LENGKAP.
    2.KUMPULKAN MAKLUMAT-
    MAKLUMAT

     KUMPULKAN TERLEBIH
    DAHULU SEMUA MAKLUMAT
    YG PERLU.
     CONTOHNYA TEKS,IMEJ DAN
    GRAFIK,PAUTAN LUARANDAN
    DALAMAN SERTA AUDIO DAN
    VIDEO,JIKA PERLU
    3.LANCARKAN PERISIAN
    APLIKASI NOTEPAD

     MULA MENULIS KOD


    ARAHAN HTML YG
    LENGKAP.
     MASUKKAN
    BANNER,MENU,FRAME DAN
    RUANGAN KOMEN DAN
    PULL-DOWN MENU
    4.LAYARI LAMAN
    SESAWANG YANG TELAH
    ANDA BINA.

     KLIK PADA FAIL HTML YG


    DISIMPAN
    5.BAIKI RALAT (JIKA ADA)

     JIKA RALAT ATAU OUTPUT


    BERLAINAN DENGAN
    JANGKAAN,PERIKSA KOD
    ATUR CARA DAN BAIKI
    RALAT
    6.LAYARI INTERNET

     CARI DAN PILIH SATU


    TAPAK SESAWANG YANG
    SESUAI
     DAFTAR UNTUK
    MENGGUNAKAN TAPAK
     IKUT LANGKAH-
    LANGKAH YG
    DITUNJUKKAN
    7.MUAT NAIK FAIL

     MUAT NAIK SEMUA FAIL YG


    DIPERLUKAN DGN
    MENGKLIK PADA BUTANG
    UPLOAD FILE
     KLIK PADA BUTANG
    PREVIEW UNTUK MELIHAT
    FAIL YG DIMUAT NAIK.
     KLIK BUTANG SAVE UNTUK
    MENYIMPAN FAIL FAIL DI
    LAMAN SESAWANG
    LAWAT TAPAK SESAWANG
    YANG TELAH SIAP DIBINA

     SEMAK DAN PASTIKAN SEMUA


    PAUTAN BERFUNGSI DENGAN
    BETUL
     SEMAK DAN PASTIKAN SEMUA
    KANDUNGAN TEKS,GRAFIK DAN
    SEBAGAINYA BERFUNGSI
    DENGAN BETUL
     BAIKI RALAT JIKA ADA DAN
    MUAT NAIK

    Anda mungkin juga menyukai