:::: MENU ::::

Jumaat, 2 Disember 2016

7:02 PG | No comments

Latihan 1: membina menu dengan list dan link

Sekarang kita telah mewujudkan 3 fail didalam folder, bagaimana kita membuat menu untuk fail-fail tersebut dan seterusnya link fail-fail tersebut supaya mudah untuk pengguna mengakses fail tersebut.

mari kita mulakan dengan membuka fail index.html

<!DOCTYPE html>

<html>

<head>
</head>
<body>

<h1>My Page</h1>

<h2>Utama</h2>
<p>Selamat datang ke laman web saya..... sila tambah jika anda rajin...</p>

<h3>Mengenai Diri Saya</h3>
<p>saya adalah seorang juruteknik komputer di sekolah A, berlhidmat sebagai penjawat awam sejak dari tahun xxxx dengan gred FT19/FA29, kini saya sedang mempelajari html untuk pembangunan sistem akan datang.</p> 

</body>
</html>

mari kita mulakan


dibawah tag <h1>My Page<h2> masukkan tag <ul> seperti berikut,

<ul>
<li>Utama</li>
<li>Biodata</li>
<li>Skop tugas juruteknik</li>
</ul>




dan gambaran sepenuhnya seperti berikut



<html>

<head>
</head>
<body>

<h1>My Page</h1>


          <ul>
<li>Utama</li>
<li>Biodata</li>
<li>Skop tugas juruteknik</li>
</ul>

<h2>Utama</h2>
<p>Selamat datang ke laman web saya..... sila tambah jika anda rajin...</p>

<h3>Mengenai Diri Saya</h3>
<p>saya adalah seorang juruteknik komputer di sekolah A, berlhidmat sebagai penjawat awam sejak dari tahun xxxx dengan gred FT19/FA29, kini saya sedang mempelajari html untuk pembangunan sistem akan datang.</p> 

</body>
</html>




berikutnya kita perlu memasukkan link kepada fail lain dengan tag <a> didalam <li> atau list item seperti berikut


asal
                <li>Biodata</li>

kepada
          <li><a href="biodata.html">biodata</a></li>


buat pada semua kecuali pada <li> Utama iaitu untuk page itu sendiri




<html>

<head>
</head>
<body>

<h1>My Page</h1>

          <ul>
<li>Utama</li>
<li><a href="biodata.html">Biodata</a></li>
<li><a href="skop.html">Skop Tugas Juruteknik</a></li>
</ul>

<h2>Utama</h2>
<p>Selamat datang ke laman web saya..... sila tambah jika anda rajin...</p>

<h3>Mengenai Diri Saya</h3>
<p>saya adalah seorang juruteknik komputer di sekolah A, berlhidmat sebagai penjawat awam sejak dari tahun xxxx dengan gred FT19/FA29, kini saya sedang mempelajari html untuk pembangunan sistem akan datang.</p> 

</body>
</html>

mari kita cuba dipelayar


kita dapat lihat menu "Utama" tiada link kerana kita sudah berada pada mukasurat index (utama) itu sendiri, dan anda boleh cuba klik pada link "biodata" dan link "skop tugas juruteknik".

sila buat perubahan pada page-page lain supaya ia mempunyai link antara satu sama lain dan pastikan tiada link untuk page pada mukasurat sendiri.

6:30 PG | No comments

Latihan 1 : mencipta page tambahan

LANGKAH 1 : mewujudkan fail anda

  • buka folder atau wujudkan folder untuk projek pertama anda.
  • buka notepad atau text editor pilihan anda dan save as "skop.html" dan save didalam folder yang anda baru wujudkan tadi.


LANGKAH 2 : mula menulis

  • mula menulis  kod anda

pada index fail ini kita akan membina lman pertama untuk pengunjung dialukan, 

susunan adalah seperti berikut

<!DOCTYPE html>
<html>
<head>
</head>
<body>

</body>
</html>

ini adalah kerangka asas sesuatu fail html.


didalam BODY


masukkan tajuk 

<h1>My Page</h1>

<h2>Biodata<h2>


gambaran keseluruhan 


<!DOCTYPE html>
     <html>
     <head>
     </head>
     <body>
          <h1>My Page</h1>

         <h2>Skop<h2>
         
     </body>
</html>


save didalam folder yang anda kehendaki dalam contoh ini kita akan menyimpan file ini pada folder
C:\test.

menguji laman web anda

ikut langkah dan contoh pada link tutorial sebelum ini.




hasil adalah seperti berikut








kita teruskan lagi dengan menambah list dengan tag <ol> di dalam page ini, tag <ol> adalah ordered list, dimana ia akan memberikan nombor kepada isi kandungan list yang akan dimasukkan (setiap kandungan perlu dimasukkan kedalam tag <li> </li>, contoh seperti berikut.

<ol>
<li>membuat speed test </li>
<li>memeriksa network </li>
<li>memeriksa komputer rosak</li>
<li>membuat laporan</li>
</ol>

(sila buat penambahan megikut citarasa anda)

dibawah <h2> masukkan tajuk list <lo> anda



gambaran keseluruhan 


<!DOCTYPE html>
     <html>
     <head>
     </head>
     <body>
          <h1>My Page</h1>

         <h2>Biodata<h2>
              <ol>
           <li>membuat speed test </li>
           <li>memeriksa network </li>
           <li>memeriksa komputer rosak</li>
           <li>membuat laporan</li>
             </ol>
         
     </body>
</html>



 TIPS* tetapkan setiap tag bersarang dengan menekan butang TAB pada keyboard supaya ia tersusun seperti diatas, ia bertujuan untuk memudahkan kita membaca dan membuat pembetulan jika ada kesalahan atau inign membuat perubahan lain. 


hasil adalah seperti berikut




5:50 PG | No comments

Latihan 1 : mencipta list pada page

Sebelum ini kita telah mecipta halaman index.html, index adalah fail yang pertama yang akan dibaca oleh pelayar apabila mengakses satu-satu hos laman web, berikut kita akan membina muka kedua untuk laman web My Page.


LANGKAH 1 : mewujudkan fail anda


  • buka folder atau wujudkan folder untuk projek pertama anda.
  • buka notepad atau text editor pilihan anda dan save as "biodata.html" dan save didalam folder yang anda baru wujudkan tadi.


LANGKAH 2 : mula menulis

  • mula menulis  kod anda

pada index fail ini kita akan membina lman pertama untuk pengunjung dialukan, 

susunan adalah seperti berikut

<!DOCTYPE html>
<html>
<head>
</head>
<body>

</body>
</html>

ini adalah kerangka asas sesuatu fail html.


didalam BODY


masukkan tajuk 

<h1>My Page</h1>

<h2>Biodata<h2>


gambaran keseluruhan 


<!DOCTYPE html>
     <html>
     <head>
     </head>
     <body>
          <h1>My Page</h1>

         <h2>Biodata<h2>
         
     </body>
</html>


save didalam folder yang anda kehendaki dalam contoh ini kita akan menyimpan file ini pada folder
C:\test.

menguji laman web anda

ikut langkah dan contoh pada link tutorial sebelum ini.




hasil adalah seperti berikut







kita teruskan lagi dengan menambah list dengan tag <ol> di dalam page ini, tag <ol> adalah ordered list, ia akan memberikan nombor kepada isi kandungan list yang akan dimasukkan (setiap kandungan perlu dimasukkan kedalam tag <li> </li>, contoh seperti berikut.

<ol>
<li>nama:........ </li>
<li>umur:....... </li>
<li>tempat bertugas:......</li>
<li>Jawatan:......</li>
</ol>

(sila buat penambahan megikut citarasa anda)

dibawah <h2> masukkan tajuk list <lo> anda



gambaran keseluruhan 


<!DOCTYPE html>
     <html>
     <head>
     </head>
     <body>
          <h1>My Page</h1>

         <h2>Biodata<h2>
              <ol>
                 <li>nama:........ </li>
                 <li>umur:....... </li>
                 <li>tempat bertugas:......</li>
                 <li>Jawatan:......</li>
               </ol>
         
     </body>
</html>






hasil adalah seperti berikut




5:29 PG | No comments

Latihan 1 : paragraft didalam page

Latihan sebelum ini LINK


MENERUSKAN LATIHAN SEBELUM INI DENGAN MEMBUKA SEMULA FAIL index.html


<!DOCTYPE html>
     <html>
     <head>
     </head>
     <body>
          <h1>My Page</h1>

         <h2>Utama<h2>

         <h3>Mengenai diri saya</h3>
     </body>
</html>


menambahkan isi kandungan ke dalam laman utama (sila masukkan / kemaskini isi kandungan mengikut kehendak anda.)


masukkan isi kandungan ini dibawah tag h2


<p>Selamat datang ke laman web saya..... (sila tambah jika anda rajin)...</p>


dan berikutnya dibawah tag h3

<p>saya adalah seorang juruteknik komputer di sekolah A, berlhidmat sebagai penjawat awam sejak dari tahun xxxx dengan gred FT19/FA29, kini saya sedang mempelajari html untuk pembangunan sistem akan datang.</p> 




gambaran keseluruhan


<!DOCTYPE html>
     <html>
          <head>
          </head>
          <body>
               <h1>My Page</h1>

              <h2>Utama<h2>
                    <p>Selamat datang ke laman web saya..... sila tambah jika anda rajin...</p>

              <h3>Mengenai diri saya</h3>
                   <p>saya adalah seorang juruteknik komputer di sekolah A, berlhidmat sebagai penjawat awam sejak dari tahun xxxx dengan gred FT19/FA29, kini saya sedang mempelajari html untuk pembangunan sistem akan datang.</p> 
          </body>
     </html>

save didalam folder yang anda kehendaki dalam contoh ini kita akan menyimpan file ini pada folder
C:\test.

menguji laman web anda

ikut langkah dan contoh pada link tutorial sebelum ini.


hasil adalah seperti berikut





5:13 PG | No comments

Latihan 1 : kerangka asas

Membina laman pertama anda


Tajuk: laman web peribadi



LANGKAH 1 : mewujudkan fail pertama anda


  • buka folder atau wujudkan folder untuk projek pertama anda.
  • buka notepad atau text editor pilihan anda dan save as "index.html" dan save didalam folder yang anda baru wujudkan tadi.


LANGKAH 2 : mula menulis

  • mula menulis  kod anda

pada index fail ini kita akan membina lman pertama untuk pengunjung dialukan, 

susunan adalah seperti berikut

<!DOCTYPE html>
<html>
<head>
</head>
<body>

</body>
</html>

ini adalah kerangka asas sesuatu fail html.


didalam BODY


masukkan tajuk 

<h1>My Page</h1>

<h2>Utama<h2>

 <h3>Mengenai diri saya</h3>


gambaran keseluruhan 


<!DOCTYPE html>
     <html>
     <head>
     </head>
     <body>
          <h1>My Page</h1>

         <h2>Utama<h2>

          <h3>Mengenai diri saya</h3>
     </body>
</html>


save didalam folder yang anda kehendaki dalam contoh ini kita akan menyimpan file ini pada folder
C:\test.

menguji laman web anda

ikut langkah dan contoh pada link tutorial sebelum ini.




hasil adalah seperti berikut




Sabtu, 19 November 2016

9:18 PTG | No comments

HTML : Format Text

Format text adalah seperti berikut :

This text is bold

This text is italic

This is subscript and superscript







formating alement



dalam capter yang lalu, kita mempelajari atribut STYLE yang perlu diisytihar didalam elemen, kali ini ia akan mambantu menentukan maksud sesuatu kepentingan perkataan ia membantu memaparkan paparan istimewa perkataan atau keseluruhan pereggan, antaranya:
  • <b> - Bold text
  • <strong> - Important text
  • <i> - Italic text
  • <em> - Emphasized text
  • <mark> - Marked text
  • <small> - Small text
  • <del> - Deleted text
  • <ins> - Inserted text
  • <sub> - Subscript text
  • <sup> - Superscript text


BOLD dan STRONG

berikut adalah contoh BOLD tanpa kepentingan(importance)

<b>Text ini bold</b>


manakala ini adalah contoh STRONG dengan menambah semantik "strong" sebagai penting.

<strong>Text ini strong</strong>

italic dan emphasized


berikut adalah contoh italic tanpa kepentingan(importance)

<i>This text is italic</i>


manakala ini adalah contoh emphasized dengan menambah semantik sebagai penting.


<em>This text is emphasized</em>

walaupun didalam pelayar <strong> akan dipaparkan sebagai <b> dan <em> sebagai <i>, <b> dan <i> hanyalah menentukan jenis tulisan tetapi tidak membawa kepentingan seperti <strong> dan <em> keranan ia menyatakan text tersebut adalah PENTING.

Elemen <small>


elemen ini menetukan supaya text yang dikurung lebih kecil dari yang lain.

contoh

<h2>HTML <small>Small</small> Formatting</h2>

Elemen <mark>

elemen ini adalah untuk HIGHLIGHT test anda.

contoh

<h2>HTML <mark>Marked</mark> Formatting</h2>

Elemen <del>

menentukan text yang telah dibuang seperti dalam text terdahulu  seperti ini.

contoh

<p>My favorite color is <del>blue</del> red.</p>

Elemen <ins>

menentukan text yang baru ditambah, ia sama dengan underline tapi bermaksud dan berkepentingan sebaggai baru ditambah.


contoh

<p>My favorite <ins>color</ins> is red.</p>

Elemen Subscrip


menentukan text yang dipilih dalam keadaan subscrip; iaitu <sub>

contoh

<p>This is <sub>subscripted</sub> text.</p>

Eleman superscrip


mementukan text dipilih sebagai superscrip iaitu <sup>

contoh

<p>This is <sup>superscripted</sup> text.</p>



8:47 PTG | No comments

HTML : atribute style

Style adalah salah satu atribute atau maklumat tambahan didalam elemen, sebagai contoh

Saya berwarna Merah

Saya berwarna biru


cara memasukkan adalah dengan

    
     <namatag style="jenis:nilai;">

style adaalh komponen CSS yang saya akan cuba sampaikan pada tutorial akan datang..


Mewarnakan latar belakang (background) dokuman anda


background-color adalah jenis dan perludimasukkan nilai samaada warna dalam perkataan atau dengan warna hex #000000, dalam contoh ini kita mahukan latar belakang berwarna powderblue.

contoh 

<body style="background-color:powderblue;">

<h1>Ini adalah tajuk</h1>
<p>Ini adalah perenggan.</p>

</body>

HTML text-color


ia digunakan untuk menentukan warna pada text melalui elemen yang ditetapkan

contoh

<h1 style="color:blue;">Ini adalah tajuk</h1>
<p style="color:red;">Ini adalah perenggan.</p>

HTML font

ia digunakan untuk menetepkan jenis font text 

contoh

<h1 style="font-family:verdana;">Ini adalah tajuk</h1>
<p style="font-family:courier;">Ini adalah perenggan.</p>


HTML text-size

ia bagi menetapkan saiz font untuk text, nilai saiz font boleh ditentukan dalam bentuk % atau px.


contoh

<h1 style="font-size:300%;">Ini adalah tajuk/h1>
<p style="font-size:35px;">Ini adalah perenggan.</p>


HTML text-align


ia digunakan bagi menentukan kedudukan text anda, sama ada kiri, kanan, atau ditengah

contoh

<h1 style="text-align:center;">Ini adalah tajuk</h1>
<p style="text-align:center;">Ini adalah perenggan./p>