:::: MENU ::::

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>

 <img src="test.jpg" alt="laguniler" width="104" height="142">

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

Isnin, 7 November 2016

2:54 PTG | No comments

TEXT EDITOR

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

Sememangnya Text Editor adalah salah satu alat terpenting untuk devoloper. Pelbagai jenis Text Editor diluar sana menyajikan tool yang terbaik untuk pelbagai aplikasi iaitu dari txt, c++ ke PHP.

Text editor bukan sekadar untuk kegunaan menaip fail txt, kini pengguaannya diperluaskan untuk pembinaan aturcara den dipermudahkan dengan pelbagai tool seperti spelling checker, command example dan sebagainya.

Berikut adalah 7 TEXT EDITOR terbaik.


SUBLIME TEXT



SUBLIMETEXT adalah yang terbaik buat masa ini, Bukan sahaja ia penuh dengan peralatannya ia juga mempunyai kecekapan dan performance yang amat baik, ia ringan dan tidak membebankan komputer. Dengan pelbagai plugin dibina oleh penggemarnya ia boleh dikira Editor yang teragung. Namun ia mengenakan bayaran sebanyak USD70 untuk satu salinan dan hanya diberi percuma secara masa terhad, untuk terus menggunakannya pengguna perlu mendapatkan lesen. Ia adalah multiplatform dimana ia boleh diinstall pada Windows, Mac dan Linux.

versi terkini adalah v3

www.sublimetext.com 


NOTEPAD++

notepad++ menyajikan pengguna dengan antaramuka yang hampir sama dengan notepad biasa, namun ia penuh dengan ciri yang diperlukan untuk developer. Ia adalah aplikasi sumber terbuka dan boleh dimiliki secara percuma. Namun masih mempunyai ruang untuk penambahan supaya pembinaan aturcara lain dapat di sokong, buat masa ini masih banyak coding yang masih tidak disokong dan antaramuka yang disediakan agak ketinggalan. Ia hanya menyokong Windows.

https://notepad-plus-plus.org

TEXT WRENGLER

Tidak ketinggalan pada pengguna MAC, anatara yang terbaik sebaris dengan SUMBLIME TEXT, tetapi hanya disajikan kepada pengguna MAC sahaja. Ianya Percuma dan boleh dimuaturun melalui AppStore.

APP STORE

GEdit


Tidak ketinggalan juga kepada penggemar LINUX , Gedit kebiasaanya didatangi sekali dengan Distro yang popular sepertu UBUNTU, ia sepenuhnya percuma namun dengan sikit rumit apabila mahu menambah plugin kerana ia perlu melalui proses manual seperti menggunakan Terminal (apt-get install) atau melalui ubuntu software center, dimana pengguna perlu menyelak beberapa muka surat mengenainya sampai jumpa apa yang di ingini.

KOMODO EDIT


Komodo Edit adalah perisian sumber terbuka namun ia menyediakan dua perisa berbeza, KOMODO EDIT didukungi sebagai Opensource dan KOMODO IDE hanya diberikan 15hari percubaan dan anda perlu membuat bayaran untuk terus menggunanya. Ia boleh dijalankan pada semua platform iaitu windows 32/64, MAC, dan linux 32/64.

http://www.activestate.com/komodo-edit

BRACKETS


Pendatang baru yang memiliki ciri yang hampir serupa dengan SUBLIME TEXT namun ia masih belum matang, sebagai pendatang baru, buat masa ini ia hanya menyokong aturcara web, Ia adalah perisian sumber terbuka dan percuma.

http://brackets.io/



LIME TEXT

kesedaran komuniti terhadap perisian sumber terbuka, dari kejayaan SUBLIME TEXT maka wujud sebuah lagi perisian yang mana ia klon aplikasi asal dan ianya adalah percuma, LIME TEXT dihostkan di github sebagai repository supaya ia boleh dibina oleh orang ramai. Dengan ciri-ciri yang menarik ia mungkin akan manjadi salah satu Text Editor yang tebaik pada masa akan datang. Ia menyokong pelbagai platform termasuk rasbarryPi 2 memang menarik!

https://github.com/limetext/lime/wiki/Building   <-- cara install