Scribd Logo
Upload

Welcome to Scribd!

  • HTML

    Uploaded by

    Mohd Khir Zainun
    143 views5 pages
    Dokumen tersebut memberikan panduan langkah demi langkah untuk membina laman web menggunakan HTML dengan Notepad++. Ia menerangkan perisian dan folder yang diperlukan, tag asas HTML serta fungsinya, dan langkah untuk menambah tag tambahan seperti heading, garis melintang, perenggan dan senarai bernombor.

    Original Description:

    Pengenalan tags asas html

    Original Title

    Pengenalan Kepada Tag Asas HTML

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Dokumen tersebut memberikan panduan langkah demi langkah untuk membina laman web menggunakan HTML dengan Notepad++. Ia menerangkan perisian dan folder yang diperlukan, tag asas HTML serta fungsinya, dan langkah untuk menambah tag tambahan seperti heading, garis melintang, perenggan dan senarai bernombor.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    143 views5 pages

    HTML

    Uploaded by

    Mohd Khir Zainun
    Dokumen tersebut memberikan panduan langkah demi langkah untuk membina laman web menggunakan HTML dengan Notepad++. Ia menerangkan perisian dan folder yang diperlukan, tag asas HTML serta fungsinya, dan langkah untuk menambah tag tambahan seperti heading, garis melintang, perenggan dan senarai bernombor.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    Guna tag HYPERTEXT MARKUP LANGUAGE (HTML) untuk membina laman web

    Pelajar-pelajar mesti boleh:

    1. Sedia perisian Notepad++ dan perisian pelayar web (web browser)


    2. Sedia satu folder khusus untuk menyimpan fail html yang telah dibina
    3. Guna tag asas html menggunakan Notepad++
    4. Guna tag html tambahan pada laman web untuk :
    a. menghasilkan teks pengepala (heading)
    b. melukis garis melintang
    c. membuat perenggan baru
    d. membuat baris baru
    e. menetapkan saiz dan warna tulisan
    f. menganimasikan teks
    g. menetapkan nombor (ordered list)
    5. Simpan fail html dalam folder yang telah disediakan dengan nama yang sesuai
    6. Buka fail html menggunakan pelayar web

    LANGKAH KERJA/STEPS BUTIRAN KERJA/DETAILS

    1. Sedia perisian 1.1 Tentukan perisian Notepad++ dan perisian pelayar web (web browser)
    Notepad++ dan perisian boleh digunakan.
    pelayar web (web browser)

    2. Sedia satu folderkhusus 2.1 Buka folder ”My Documents”.


    untuk menyimpan fail html
    yang telah dibina

    2.2 Sedia satu folder baru dengan nama ”Asas HTML”.

    2.2.1 Klik kanan ketikus  pilih New  pilih Folder

    2.2.2 Taip nama folder : Asas HTML

    3 Taip tag asas html 3.1 Guna perisian Notepad++ untuk menaip kod html seperti di bawah :
    menggunakan Notepad++

    <html>
    <head>
    <title>Kursus ICT KV Perdagangan</title>
    </head>
    <body>Kursus yang ditawarkan oleh KV Perdagangan :
    </body>
    </html>

    3.2 Simpan fail dengan nama “Kursus.html” dalam folder “Asas HTML”

    3.3 Buka fail “Kursus.html” untuk melihat laman web yang terhasil :

    3.3.1 Buka pelayar Internet Explorer dan buka fail “Kursus.html” dalam folder
    “Asas HTML” ATAU

    3.3.2 Buka folder “Asas HTML” dan pilih fail “Kursus.html”

    4. Guna tag html 4.1 untuk menghasilkan teks pengepala (heading), melukis garis melintang,
    tambahan pada laman web membuat perenggan baru, memulakan baris baru :
    untuk : a) Tambahkan kod html berikut pada fail “Kursus.html” :
    4.1. menghasilkan teks
    pengepala (heading), <h1>Kursus yang ditawarkan oleh KV Perdagangan :
    melukis garis melintang, </h1><br><hr><p><p>
    membuat perenggan baru, Pangkalan Data dan Aplikasi Web<br>
    memulakan baris baru Perniagaan<br>
    4.2. menetapkan saiz dan Kesetiausahaan<br>
    warna tulisan Perakaunan<br><br>
    4.3. menganimasikan teks
    4.4. menetapkan nombor
    (ordered list)
    b) Simpan fail tersebut

    c) Buka fail “Kursus.html” untuk melihat laman web yang terhasil

    4.2 menetapkan saiz dan warna tulisan :

    a) Tambahkan kod html berikut pada fail “Kursus.html” :

    <font color ="blue" size= "4">


    Pangkalan Data dan Aplikasi Web<br>
    Perniagaan<br>
    Kesetiausahaan<br>
    Perakaunan<br><br>
    </font>
    <font color ="red" size= "6">Modul Pangkalan Data dan Aplikasi
    Web Semester 2
    </font<p>

    b) ulangi langkah 4.1 (b) dan (c).

    4.3. menganimasikan teks :

    a) Tambahkan kod html berikut pada fail “Kursus.html” :

    <marquee><font color ="red" size= "6">Modul Pangkalan Data


    dan Aplikasi Web Semester 2
    </font></marquee

    b) ulangi langkah 4.1 (b) dan (c).

    4.4. menetapkan nombor (ordered list) :

    a) Tambahkan kod html berikut pada fail “Kursus.html” :

    <ol>
    <li>KPD 201</li><br>
    <li>KPD 202</li><br>
    <li>KPD 203</li><br>
    <li>KPD 204</li><br>
    </ol>

    b) ulangi langkah 4.1 (b) dan (c).


    Pengenalan kepada tag asas HTML

    U TUJUAN : 1) Mendefinisikan HTML berdasarkan kod piawai HTML.

    1) Menerangkan fungsi bagi setiap tag asas HTML

    PENERANGAN :

    1. Definisi HTML

    Merupakan satu bahasa yang mengarahkan pelayar web untuk memaparkan laman web
    pada tetingkap pelayar web

    2. Menerangkan fungsi bagi setiap tag asas HTML :

    2.1. HTML tag - Membina rangka halaman web


    2.1.1. Tag <HTML> menyatakan pelayar web bahawa kod disertakan antara <HTML> dan </ HTML> adalah
    kod HTML
    2.2. Head - Menandakan bahagian kepala halaman web
    2.2.1. Bahagian HEAD mengandungi beberapa maklumat asas mengenai halaman web. Bahagian HEAD
    dilampirkan antara tag <HEAD> dan </ HEAD>.

    2.3. Title - Tajuk kepala halaman web


    2.3.1. Tag <TITLE> diletakkan di dalam seksyen HEAD. Teks yang anda berikan dalam seksyen TITLE akan
    muncul dalam bar tajuk tetingkap pelayar. Tajuk laman web yang diberikan dalam seksyen TITLE.

    2.4. Body - Menandakan badan halaman web

    Contoh :

    <html>
    <head>
    <title>Let’s learn HTML</title>
    </head>
    <body>
    Welcome to my web page….
    </body>
    </html>

    2.5 Tag HTML tambahan

    <h1></h1> The largest heading


    <h6></h6> The smallest heading
    Attribute : Left, right, center
    i) Heading tag
    Example <h1 align=”center”>Learning HTML</h1>
    <h6 align=”right”>written by :</h1>

    ii) Horizontal Rule <hr> Melukis garisan melintang

    Attribute : <hr size=”5” width=”50%” align=”left” noshade>


    Size, width, align, noshade Draw line size 5, length 50% of the windows, align
    left (default = center)
    iii) paragraph <p> Memulakan perenggan baru
    iv) line break <br> Memulakan baris baru
    v) scrolling text <marquee> Melungsur teks (animasi teks)
    Attribute :
    Bgcolor Set warna latarbelakang kawasan yang dilungsur

    Menentukan ketinggian dan keluasan kawasan


    Height, width yang dilungsur

    Direction=right Set arah animasi teks, dari kiri ke kanan

    <marquee bgcolor =”yellow” height=”60” direction=”right”>

    Text = “red” Set warna teks ke merah


    Bgcolor = “blue” Set warna latarbelakang ke biru

    vi) Color <body bgcolor="blue">


    Background=”picture.jpg” Set latarbelakang mengikut imej

    <body background=”image.jpg”>
    vii) Text formatting <b></b> Text bold
    <i></i> Italic style
    <u></u> underline text
    <font face=”Arial”></font> modify font face/type
    <font size=”5”></font> modify font size
    <font color=”red”></font> modify font color
    <pre></pre> display text in the browser in the same
    format as in the html document
    viii) List <ol> Ordered list
    <li>type text here.. </li> List numbered, eg : 1, 2, 3
    <li>type text here.. </li>
    </ol>

    Persembahan Power Point Cara membina laman web menggunakan Notepad++

    You might also like