:::: MENU ::::

Jumaat, 2 Disember 2016

7:31 PG | No comments

latihan 1: menambahkan ciri pada page didalam tag "head"

Untuk menambahkan lagi ciri-ciri lain pada page yang sedang kita bina, kita akan masukkan tag <title> supaya akan tertera tajuk pada TAB google chrome seperti ini..



mari kita mulakan

buka fail index.html

<!DOCTYPE html>

 <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>

didalam tag head kita akan masukkan tag seperti berikut

<title></title>

dan mauskkan maklumat seperti berikut My Page - Utama

gambaran seperti berikut

<title>My Page - Utama</title>


masukkan kepada semua page dengan merubah maklumat didalamnya berpandukan fail apa yang dikandung.

dan buat periksa dengan pelayar

memasukkan data meta kedalam <head>


meta fail adalah maklumat untuk digunakan oleh pelayar dan ajen carian (google/yahoo), ia tidak akan terpapar dan tidak dapat dilihat oleh pengguna pada paparan pelayar.

pertama masukkan meta charset

<meta charset="UTF-8">

kemudian memasukkan meta keyword untuk memudahkan ejen carain mengenalpasti apakah kandungan didalam page kita

<meta name="keyword" content="juruteknik komputer, KPM, komputer, html, tutorial">

dan siapa pencipta laman web ini

<meta name="author" content="nama anda">

dan meta supaya page anda refresh mengikut jangkamasa yang ditentukan, ia penting jia anda sedang membuat perubahan dan perubahan tersebut akan terus terpapar pada pelayar pengguna tanpe mereka perlu menekan butang refresh dalam kes ini setiap 30 saat

<meta http-equiv="refresh" content="30">



 gambaran keseluruhan page anda

<!DOCTYPE html>

 <html>

 <head>
<title>MyPage - Utama</title>
<meta charset="UTF-8">
<meta name="keyword" content="juruteknik komputer, KPM, komputer, html, tutorial">
<meta name="author" content="nama anda">
<meta http-equiv="refresh" content="30">
</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>




masukkan tag yang baru kita ubah suai kepada semua page lain..


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>



8:30 PTG | No comments

HTML : Paragraph, Line Break, Pre

Paragraph


Paragraft <p> adalah tag yang menyatakan perenggan text anda.

contoh

<p> Ini adalah perenggan.</p>
<p> Ini perenggan berikutnya.</p>

secara automatiknya pelayar akan menentukan jarak antara baris setiap peranggan yang ditetapkan.

 Apa yang akan kelihatan pada PAPARAN


setiap perenggan yang telah dibuat akan dipaparkan mengikut peraturan yang ditetapkan oleh pelayar itu sendiri, walaupun anda meletakkan jarak, baris lain dan sebagainya bagi perenggan didalam tan <p>, pelayar akan mengabaikannya.


contoh

<p>
Ini adalah perenggan
ia menpunyai bayak baris
didalam kod punca,
tetapi pelayar 
tetap mengabaikannya.
</p>

<p>
Perenggan ini pula
mempunyai            jarak yang jauh        antara perkataan
di dalam      kod      punca,
tetap          pelayar 
tetap mengabaikannya.
</p>

TIPS*
anda boleh mengabaikan penutup tag </p> dan ia tidak memberikan sebarang masalah namn adalah menjadi amalan baik bagi pembagun membuat penutup </p> bagi mengelakkan masalah yang tidak dijangka.

LINE BREAK

tag <br> adalah line break, ia digunakan bagi memisahkan perenggan baru tanpa membuka tag <p> yang baru.

contoh

<p>This is<br>a paragraph<br>with line breaks.</p>

<br> juga dikenali sebagai element kosong juga boleh digunakan untuk menjarakkan/memisahkan perenggan atau baris perkataan. ia tidak perlu tag penutup.

Masalah Sajak Dalam Satu Barisan <pre>

<p>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</p>

Kod seperti ini akan tetap dipaparkan dalam satu barisan jika mengikut peraturan <p> ada dua cara menyelesaikannya iaitu dengan meletakkan <br> pada setiap satu baris yang dikehendaki di baris yang baru, atau menggunakan tag <pre> 

contoh

<pre>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</pre>

semua paparan akan terpapar sepertimana perenggan yang dikehendaki.


Selamat mencuba