Macam ni lah!

Jumaat, 2 Disember 2016

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

<h2>Biodata<h2>

gambaran keseluruhan

<!DOCTYPE html>

<html>

<head>

</head>

<body>

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

<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

<h2>Biodata<h2>

gambaran keseluruhan

<!DOCTYPE html>

<html>

<head>

</head>

<body>

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

<h2>Biodata<h2>

<ol>

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

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

<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

<h2>Utama<h2>

<h3>Mengenai diri saya</h3>

gambaran keseluruhan

<!DOCTYPE html>

<html>

<head>

</head>

<body>

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

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

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