7:49 PTG
| 
No comments
No comments
Jumaat, 2 Disember 2016
7:31 PG
|
No comments
No comments
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
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..
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
No comments
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.
dan gambaran sepenuhnya seperti berikut
<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
mari kita cuba dipelayar
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
No comments
LANGKAH 1 : mewujudkan fail anda
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.
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
- 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>
<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
No comments
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.
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.
hasil adalah seperti berikut
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
No comments
Latihan sebelum ini LINK
MENERUSKAN LATIHAN SEBELUM INI DENGAN MEMBUKA SEMULA FAIL index.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
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>
<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>
<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
No comments
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>
<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>
<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
