Scribd Logo
Unggah

Selamat datang di Scribd!

  • Projek HTML Utk PBD 2021

    Diunggah oleh

    Coco Cheong
    5 tayangan15 halaman

    Judul Asli

    PROJEK HTML UTK PBD 2021

    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

    Hak Cipta:

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

    Projek HTML Utk PBD 2021

    Diunggah oleh

    Coco Cheong

    Hak Cipta:

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

    TINGKATAN 1 ZENFONE

    PBD
    PENGENALAN
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    </head>
    <body>
    </body>
    </html>
    Ini merupakan asas html (lihat ada beberapa maklumat…)
    1. Ada tag buka dan tutup html
    2. Ada tag buka dan tutup untuk head dan body juga
    3. Di dalam tag head ada title
    Mari belajar menulis paragraph <p></p>
    NOTA
    <!doctype html> Semua yang kita lihat di skrin komputer kita adalah hasil
    daripada apa yang kita tulis antara tag ‘body’
    <html>
    <head>
    <title>BELAJAR PARAGRAF</title>
    </head>
    <body>
    <p> hello world ! </p>
    </body>
    </html>
    Tambah sifat (attribute ) warna kepada text atau font <p></p>

    NOTA
    <!doctype html> Untuk menukar warna tulisan kita menambahkan tag
    <html> font color =“”
    <head>
    <title>BELAJAR PARAGRAF</title>
    </head>
    <body>
    <p> hello world ! </p>
    <p><font color="red"> saya menulis warna merah !</font> </p>
    <p><font color="blue"> tulisan ini pula berwarna biru !</font> </p>

    </body>
    </html>
    Tambah sifat (attribute ) saiz kepada text atau font <p></p>
    NOTA
    Untuk menukar size tulisan kita beri tag font size =“”

    <!doctype html>
    <html>
    <head>
    <title>BELAJAR PARAGRAF</title>
    </head>
    <body>
    <p> hello world ! </p>

    <p><font color="blue"><font size="5"> tulisan ini pula berwarna biru yang besar !</font> </p>
    <p><font color="red"><font size="20"> tulisan ini pula berwarna biru yang besar !</font> </p>

    </body>
    </html>
    Mengganti latar/background
    NOTA
    <!doctype html> Untuk menukar background kita menambah tag
    bgcolor=“ yellow” pada tag body
    <html>
    <head>
    <title>BELAJAR PARAGRAF</title>
    </head>
    <body bgcolor="yellow">
    <p> hello world ! </p>
    </body>
    </html>
    Mengganti latar/background dengan gambar
    NOTA
    <!doctype html> Untuk menukar background kita menambah tag
    background pada tag body
    <html> Pastikan nama fail tepat

    <head>
    <title>BELAJAR PARAGRAF</title>
    </head>
    <body background="gambar BACKGROUND.jpg">
    <p> hello world ! </p>
    </body>
    </html>
    Tambah sifat (attribute ) ALIGNMENT kepada text atau font
    <p></p>

    NOTA
    <!doctype html>
    Kita boleh letakkan teks kita di sebelah kiri, kanan atau
    <html> tengah dengan menambah arahan tag align=“”
    <head>
    <title>BELAJAR PARAGRAF</title>
    </head>
    <body>
    <p> hello world ! </p>
    <p align="left">kiri </p>
    <p align="center">tengah</p>
    <p align="right">kanan</p>

    </body>
    </html>
    Mari belajar memasukkan gambar dengan tag <img src=“>
    NOTA
    1.Usahakan gambar yang mahu dimasukkan berada pada
    folder yang sama
    2. Pastikan nama fail gambar sama dengan yang ditulis
    dalam html
    3. Img src bermaksud image source (nama fail gambar
    anda)
    <!doctype html>
    <html>
    <head>
    <title>masukkan gambar</title>
    </head>
    <body>
    <p> hello world ! </p>
    <img src="logo.jpg">

    </body>
    </html>
    Mari belajar ubah saiz gambar dengan tag <img width=“”
    height=“”>
    NOTA
    1.Gambar / imej yang kita masukkan, boleh diubah
    siaznya mengikut kemahuan kita
    2. Contoh width=“5px” atau width=“50%”
    px ialah pixel dan % ialah peratus daripada skrin
    3. Boleh tulis sama ada width saja atau height saja atau
    kedua-duanya sekali
    <!doctype html>
    <html>
    <head>
    <title>masukkan gambar</title>
    </head>
    <body>
    <p> hello world ! </p>
    <img src="logo.jpg">
    <img src="logo.jpg" width="20%">

    </body>
    </html>
    Mari belajar letak gambar di atas dan di bawah dengan tag <br>
    NOTA
    1.Gambar / imej yang kita masukkan boleh disusun
    secara row atau column / vertical atau horizontal
    2. Tambahkan saja tag <br> selepas gambar pertama…br
    bermaksud baris yang baru

    <!doctype html>
    <html>
    <head>
    <title>masukkan gambar</title>
    </head>
    <body>
    <p> hello world ! </p>
    <img src="logo.jpg"><br>
    <img src="logo.jpg" width="20%">

    </body>
    </html>
    Mari belajar letak gambar dengan tag <align> dan <center>
    NOTA
    1.Gambar / imej yang kita masukkan boleh disusun
    secara row atau column / vertical atau horizontal
    2. Tambahkan saja tag <br> selepas gambar pertama…br
    bermaksud baris yang baru

    <!doctype html>
    <html>
    <head>
    <title>align imej</title>
    </head>
    <body>
    <p> hello world ! </p>

    <img src="logo.jpg" align="right"> <br>


    <br>
    <center>
    <img src="logo.jpg">
    </center>
    </body>
    </html>
    TUGASAN ANDA
    1. Hasilkan dua set website ringkas yang mempunyai tema berbeza.
    contohnya biodata anda dan tempat menarik di Sabah
    Tema bebas….yang penting dua set.

    Apa yang perlu dihantar :


    2. 2 set Folder yang mengandungi
    a. fail gambar yang anda masukkan
    b. fail html anda
    Contoh tugasan pelajar yang lalu

    Ini hasilnya
    Anda boleh hantar atau share dalam google drive menggunakan
    1. google drive delima cikgu iaitu
    g-65275187@moe-dl.edu.my atau

    telegram atau whatsapp

    Anda mungkin juga menyukai