Macam ni lah!

Sabtu, 19 November 2016

8:30 PTG |

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>

Isnin, 14 November 2016

10:33 PTG |

No comments

HTML : Pengenalan

sambungan dari tutorial yang lepas mari kita membina page pertama kita dengan HTML dimana HTML adalah asas kepada pembinaan laman web.

mari kita mulakan

buka command prompt yang baru dengan menekan start - run - taip CMD

taip "cd\" dan cd "web"

taip "copy NUL index.html

anda telah berjaya mencipta fail HTML pertama anda.

tahukan anda INDEX adalah fail yang pertama akan dibaca oleh server semasa alamat dipohon oleh pelayar web

mari kita buka fail tersebut untuk kita memulakan aturcara pertama kita

saya akan menggunakan applikasi Sublimetext3 anda boleh manggunakan notepad jika tidak mahu menghabiskan kuota internat anda... hahahaha

mari kita mulakan
taip kod berikut didalam fail index.html didalam folder web anda saya akan edit menggunakan aplikasi text editor pilihan saya dan anda perlu menggunakan juga mengikut kegemaran anda.

<!DOCTYPE html>
<html>
<head>
<title>Tajuk Page</title>
</head>
<body>

<h1>Heading pertama saya</h1>
<p>paragraf pertama saya, selamat berjaya!.</p>

</body>
</html>

setelah selesai save dan buka semula pelayar anda dengan alamat berikut
localhost:8888

perhatikan
1. pada tab browser diatas tertera tajuk page
2. pada baris pertama itu adalah heading
3. baris kedua adalah paragraft

selamat mencuba!

bagi mereka yang masih belum menyediakan persekitaran server sila ke

1. menyediakan persekitaran sever tempatan XAMPP
2.MYphpadmin - pengenalan dan tutorial

3. Text Editor
4.menghos folder secara manual

10:02 PTG |

No comments

Menghost folder secara manual

Sebelum saya mulakan, jika anda tertinggal catatan sebelum ini sila ke:
1. menyediakan persekitaran sever tempatan XAMPP
2.MYphpadmin - pengenalan dan tutorial
3. Text Editor

Hari ini kita belajar buat coding HTML tapi sebelum tu mari kita sediakan server percubaan kita dahulu, bagi yang belum lagi menyediakan persekitaran ini sila ke SINI ,

baik mari kita mulakan

setelah selesai, buka command prompt dengna mnekan start - run - type "cmd"

kebiasaan command prompt akan terus berada pada folder pengguna, seperti kes saya iaitu

taip "cd\"

supaya ia menjadi "c:\>" sahaja

dan kemudian

taip "mkdir web"

taip "cd web"

dan ia akan menjadi "c:\web\>"

anda telah berjaya mewujudkan folder baru dan anda sekarang didalam folder tersebut menggunakan command prompt

dan sekarang kita akan menghostkan folder tersebut supaya ia boleh dilayari menggunakan pelayar web kesukaan anda

untuk host server pada folder tertentu command adalah seperti berikut

php [option] <address>:<port>

option adalah -S

address adalah localhost keranan ia adalah untuk kegunaan tempatan (pc anda)

port ikut kehendak anda dimana dalam kes ini saya akan menggunakan port 8888

jadi mari kita taip

taip "php -S localhost:8888"

dan akan keluar pesanan seperti berikut

ini menunjukkan anda telah berjaya menghost folder yang dipilih "web" ke localhost:8888
jangan padamkan command prompt hanya kecilkan sahaja dengan minimize

sekarang buka browser pilihan anda dan masukkan alamat berikut pada petak alamat

"localhost:8888"

sekarang anda telah berjaya menghost web anda dari folder yang kita kehendaki, Ia kelihatan kosong kerana kita masih belum mencipta fail lagi didalamnya..

selamat berjaya