November 2016 ~ Macam ni lah!

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

Khamis, 17 November 2016

3:55 PTG |

No comments

HTML : Headings

Heading atau tajuk adalah penting dalam dokumen HTML.

Jenis-Jenis Headings

Seperti dalam pengenalan yang lalu terdapat beberapa jenis headings iaitu dari tag <h1> hingga <h6>

Dimana <h1> adalah berupa tajuk berkepentingan yang tinggi sehingga <h6> sebagai berkepentingan yang rendah.

contoh

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

Pelayar dengan automatik membentuk jarak antara heading mengikut kepentingan.

Headings Adalah

Penting untuk Enjin carian, ia akan menggunakan heading untuk meng-indeks struktur dan kandungan laman web anda. Pengguna akan membuat carian dengan enjin carian berdasarkan heading, ia juga penting untuk menggambarkan struktur dokumen anda.

<h1> haruslah digunakan untuk tajuk utama, diikuti dengan <h2> untuk sub tajuk, <h3> untuk sub kepada sub tajuk dan seterusnya.

INGAT: gunakan heading untuk tajuk sahaja, jangan gunakan heading untuk membesarkan font atau untuk BOLD font.

Element HTML <head>

<head> tiada kaitan dengan headings, ia terletak antara tag <html> dan <body>. Ia juga tidak kelihatan pada paparan pelayar tetapi ia mendiakan maklumat tentang dokumen HTML tersebut, ia digelar metadata. metadata kebiasaanya menyediakan maklumat dokumen seperti tajuk dokumen, character ser, style, links, script, dan banyak lagi jenis tag metadata.

contoh

<!DOCTYPE html>
<html>

<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>

<body>

TIPS:

Anda pasti tertanya bagaimana pembangun membina laman web, untuk kita melihat kod HTML hanyalah dengan menekan butang kanan mouse dengan pointer diatas laman web seseorang, pilih "view page source" (di dalam chrome) atau "view source" pada internet explorer.

Rabu, 16 November 2016

4:59 PTG |

No comments

HTML : Attributes

Attribute memberikan maklumat arahan tambahan kepada elemen.

HTML attributes

semua elemen HTML boleh diberi attribute
attribute membekalkan maklumat tambahan kepada elemen
attribute kebiasaanya berada didalam tag pemula
kebiasaan atribut adalah berganding seperti nama/julat (nama="nilai")

Attribute LANG

Lang atau bahasa boleh diisytiharkan didalam tag <html> untuk mengiystiharkan bahasa dokumen.

Attribute ini berguna bagi memudahkan ajen carian mengenalpasti bahasa laman web dan aplikasi kurang upaya (screen reader).

<!DOCTYPE html>
<html lang="en-US">
<body>

...

</body>
</html>

Dua huruf pertama 'en' adalah jenis bahasa dan huruf tambahan 'US' dikhusukan lagi untuk jenis dialek.

Title Artibutes

Apabila elemen <p> diberikan artibute title ia akan mencipta popup tooltips apabila tetikus berada ada paragraf tersebut.

<p title="I'm a tooltip">
This is a paragraph.

</p>

href atributes

Untuk mencipta link untuk takrif <a> pula, href perlu dinyatakan didalamnya.

<a href="http://www.w3schools.com">This is a link</a>

penerangan terpeinci menganai tag <a> akan saya terangkan lebih lanjut pada tutorial akan datang.

Size attributes

Image Html ditakrifkan sebagai tag <img> , tag <src> pula sebagai punca fail, dan saiz (hight, width) kesemuamya akan dibekalkan didalam tag <img>

<img src="w3schools.jpg" width="104" height="142">

saiz image ersebut disetkan dengan width="104" height="142", semua angka diukur dalam unit pixel.

saya akan terangkan lebih lagi tentang tag <img> dalam tutorial lain.

Alt Artibutes

Alt digunakan bagi mengeluarkan test alternatif selain text yang terpapar, jika image tidak kelihatan.
dan ia sangat membantu untuk pengguna kurang upaya (screen reader)

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

tanda qoute atau (") adalah penting untuk mengtakrif nilai pada atribute bagi mengelakkan masalah yag tidak diingini.

Selasa, 15 November 2016

4:58 PTG |

No comments

HTML : element

Element kebiasaanya terdiri dari permulaan tag dan penutup tag, dengan isi kandungan dimasukkan diantaranya.

<namatag>Isi kandungan disini</namatag>

Element adalah segalanya dari permulaan tag hingga ke penutup tag.:

<p>Ini perenggan saya</p>

Pemula tag	Kandungan Elemant	Penutup tag
<h1>	Heading pertama saya	</h1>
<p>	Baris peranggan pertama saya	</p>
<br>

Nested HTML Elements

Untuk element yang tiada isi kandungan seperti baris kosong (didalam word seperti kita menekan enter) ia tidak menpunyai sebarang pemula tag dan penutup tag tetapi hanya dengan element ini sahaja digunakan <br> iaitu dikenali sebagai "line break"

HTML elements juga boleh dibina secara bersarang(nested element),iaitu element didalam element, Hampir semua dokumen HTML terdiri dari element html bersarang.

Ini adalah sebahagian contoh elemen bersarang; elements:

<!DOCTYPE html>
<html>
<body>

<h1>Ini Heading pertama saya</h1>
<p>Ini perenggan pertama saya.</p>

</body>
</html>

Penerangan Contoh Diatas

<html> element mengtakrif keseluruhan dokument, ia bermula dengan tag pemula <html> dan diakhiri dengan penutup tag </html> dan diantaranya mengandungi satu lagi element iaitu element <body>

<html>
<body>

<h1>Ini Heading pertama saya</h1>
<p>Ini perenggan pertama saya.</p>

</body>
</html>

element <body> pula ditakfirkan sebagai badan kepada dokumen (document body), ia dimulakan dengan tag pemula <body> dan diakhiri dengan tag penutup </body>. Diantaranya mengandungi dua lagi element lain iaitu <h1> dan <p>

<body>

<h1>Ini Heading pertama saya</h1>
<p>Ini perenggan pertama saya.</p>

</body>

<h1> ditakrifkan sebagai headings dimana ia bermula dengan tag pemula <h1> dan diakhiri dengan tag penutup </h1> dan kandungan element tersebuat adalah : Heading pertama saya

<h1>Ini Heading pertama saya</h1>

element <p> ditakrifkan sebagai paragraf dan ia dimulakan dengan tag pemula <p> dan diakhiri dengan tag penutup </p> dan isi kandugan element tersebut adalah: baris paragraf pertama saya

<p>Ini perenggan pertama saya.</p>

Syarat ringan penutup tag

sesetengah elemen akan dipaparkan tanpa masalah walau tiada tag penghujung,:

<html>
<body>

<h1>Ini Heading pertama saya
<p>Ini perenggan pertama saya.

</body>
</html>

contoh diatas boleh pada semua jenis pelayar, kerana tah penghujung ini dianggap pilihan, Namun ia tidak digallakkan bagi mengelakkan masalah yang tidak dijangka.

Element HTML kosong

Element HTML yang tiada isi dikenali sebagai element kosong (empty elements).
Dengan menggunakan tag <br> sahaja dan tanpa penghujung tag sudah mencukupi, <br> ditakrifkan sebagai "line break". Fungsi element ini adalah untuk menjarakkan baris antara perengan.
HTML elements with no content are called empty elements. Pnghujung tag tersebut adalah </br>.

Didalam HTML5 ia tidak memerlukan penghujung tag namun jika ingin dokumen anda boleh dibaca dengan XML parsers, seua element harus mempunyai penghujung tag.

<html>
<body>

<h1>Ini Heading pertama saya</h1>
<br>
<p>Ini perenggan pertama saya.</p>

</body>
</html>

Huruf kecil sahaja untuk tag

tag HTML adalah jenis lalai, iaitu <P> adalah sama dengan <p>. jadi bagi memudahkan pengenalan, pengecaman, untuk menyemak dan memudahkan masa menaip,gunakan sahaja arkasa kecil tidak perlu bersusah payah menekan SHIFT atau CAPS LOCK.

Selamat berjaya!

3:55 PTG |

No comments

HTML : Headings, Paragraph, link dan image

HTML Documents

Semua dokumen HTML mestilah bermula dengan mengisytihar jenis dokumen.

<!DOCTYPE html>.

dan selepas itu isi dokumen itu sendiri akan dimulai dengan <html> dan diakhiri dengan </html>.

bahagian yang akan kelihatan pada pelayar web adalah di antara <body> dan </body>.

contoh

<!DOCTYPE html> <---- pengisytiharan jenis dokumen
<html> <---- pemula dokumen html
<body> <---- pemula isi kandungan

<h1>My First Heading</h1> <-- isi yang bakal terpapar
<p>My first paragraph.</p> <-- isi

</body> <---- penutup isi kandungan
</html> <---- penutup dokumen html

HTML Headings

Headings ditakrifkan dengan tag <h1> hingga <h6>, Dimana <h1> adalah tajuk utama (besar) dan <h6> adalah tajuk atau sub tajuk (kecil).

contoh

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

<h4>This is heading 4</h4>
<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

</body>
</html>

HTML Paragraphs

Paragraf atau baris ditakrifkan dengan tag <p> dan diakhiri dengan </p> bagi setiap baris perkataan yang akan dipaparkan

contoh

<!DOCTYPE html>
<html>
<body>

<p>Ini adalah Paragraph.</p>
<p>Ini adalah satu lagi paragraf lain.</p>

</body>
</html>

HTML Links

Untuk mewujudkan link didalam page, <a> adalah takrifan untuk mewujudkan link

contoh

<!DOCTYPE html>
<html>
<body>

<a href="http://laguniler.blogspot.com">Ini adalah link</a>

</body>

</html>

destinasi link dinyatakan didalam atribut href. Atribut adalah penyataan untuk maklumat tambahan tentang eliment HTML.

HTML Images

Untuk memasukkan imej gambar adalah dengan tag < img> dengan maklumat atribut tambahan seperti "punca fail/ source file" = src , "text alternatif / alternative text" = alt, "lebar" = width , "tinggi" = hight.

contoh

<!DOCTYPE html>
<html>
<body>

</body>

</html>