Mencipta Fail HTML


Perkara yang penting sebelum bermula adalah mempunyai keperluan asas terlebih dahulu iaitu:
  • sebuah komputer sendiri untuk memudahkan proses belajar
  • perisian pelayar (sama ada Internet Explorer, Firefox, Safari, Opera atau Chrome)
  • perisian suntingan teks asas -- dicadangkan Notepad atau Notepad++
  • capaian internet untuk merujuk tutorial di sini.

Mencipta fail HTML

Satu fail HTML akan dikenali dan dikendali oleh sistem berdasarkan kepada jenis sambungan (extension) untuk fail tersebut. Untuk HTML mempunyai dua jenis sambungan iaitu .htm (fail versi lama) atau .html (fail versi baru). Bagi mencipta fail HTML yang baru, kita perlu membuka perisian suntingan teks ringkas iaitu Notepad.

 
Buat masa sekarang belum ada sebarang kod pengaturcaraan ditulis. Kita hasilkan fail HTML kosong sebagai latihan pertama. Klik pada menu File dan kemudian terus ke pilihan Save As...




Seterusnya berikan nama untuk fail ini. Katakan sebagai contoh laman-utama.html. Kemudian tukarkan bentuk simpanan fail sebagai All Files (*.*) di bawah pilihan Save as type.
Ini sangat penting. Sekiranya anda tidak menukarkan kepada format All files, Notepad akan menyimpan fail ini dalam format perisiannya dan tidak menukar kepada fail HTML.

                      Seterusnya buat pilihan untuk Encoding kepada UTF-8 bagi membolehkan fail HTML di akses oleh apa jua peranti sama ada di komputer, tablet atau telefon mobil. Setelah selesai, klik butang Save. Anda boleh menyimpan fail ini dalam mana-mana direktori yang boleh dicipta dalam komputer anda.

 

Menyunting kembali fail HTML

Ini adalah fail HTML yang telah kita hasilkan sebentar tadi. Jika anda perhatikan dalam contoh ini, ikon fail mempunyai logo perisian Firefox. Ini kerana saya telah menjadikan perisian pelayar Mozilla Firefox sebagai perisian utama dalam melayari internet. Mungkin paparan ikon anda mempunyai lambang Internet Explorer atau Chrome, bergantung kepada tetapan dan perisian yang anda gunakan.

Perhatikan juga fail ini telah mempunyai sambungan .html. Bagi pengguna Windows, secara asasnya anda tidak dapat melihat sambungan fail ini. Nama fail yang akan ditunjukkan adalah laman-utama sahaja. Tidak menjadi masalah kerana dalam contoh ini saya telah mengaktifkan tetapan agar Windows menunjukkan sambungan fail Baiklah, seterusnya kita ingin menyunting fail tersebut. Terdapat dua cara untuk melakukan suntingan.
Pertama: Melalui perisian Notepad.



Buka perisian Notepad semula, kemudian navigasi ke menu File > Open.

Tukarkan menu pilihan daripada Text Documents (*.txt) kepada All files (*.*) untuk memaparkan semua fail yang wujud dalam direktori tersebut dan tidak terhad kepada fail Notepad sahaja. Seterusnya cari direktori yang menempatkan fail HTML tersebut, klik pada fail itu dan klik butang Open.
Kedua: Melalui Windows Explorer.



Kaedah ini lebih mudah dan pantas. Pergi ke direktori yang menyimpan fail HTML tersebut. Seterusnya klik kanan (right click) pada tetikus anda. Cari pilihan untuk Open with. Satu tetingkap pilihan akan muncul dan klik pada perisian Notepad.

Sekiranya senarai Notepad tidak muncul, klik pada Choose default program... yang terletak dibahagian paling bawah. Kemudian klik pada ikon Notepad.

Comments

Post a Comment

Popular posts from this blog

Membuat Tulisan Blink

Image
Membuat Tulisan Blinking Blinking Text using css BajaDigrow.com Blinking Image using css <div dir="ltr" style="text-align: left;" trbidi="on"> <html> <head> <title>Membuat Tulisan Blinking </title> <style> .blink_text {   animation: blinker 1s linear infinite; } .blink_img {   animation: blinker 2s linear infinite; } @keyframes blinker {   50% { opacity: 0; } } @keyframes blin {   50% { opacity: 0; } } </style> </head> <body> <div class="wrapper"> <h1> Blinking Text using css</h1> <span class="blink_text">BajaDigrow.com</span><br /> <h1> Blinking Image using css</h1> <span class="blink_img"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFlha4VDgSTOBZM9JFfC-lw5KTom8r4oySPN9SGQ5K69QC6-pDnUrchF92mwuQ1uXsJM781IQSFAsgTc2JnnEeTxksAqPOvjp4OQR6zyY6
Read more

Kaunter Jumlah Pelawat

Image
Untuk mendapatkan kaunter kod yang lain , anda bolehlah klik pada gambar diatas. Selamat mencuba <!-- hitwebcounter Code START --> <a href="https://www.hitwebcounter.com" target="_blank"> <img src="https://hitwebcounter.com/counter/counter.php?page=7278348&style=0001&nbdigits=5&type=page&initCount=0" title="User Stats" Alt="PHP Hits Count"   border="0" > </a>                                            
Read more

Rekabentul HTML

Image
Setiap laman web yang dibina mempunyai struktur tertentu. Rekaan dan struktur asas bagi sesuatu laman web, reka bentuknya adalah seperti berikut. Penggunaan  <HTML>  dan  </HTML>  akan memberitahu pelayar atau " web browser " dimana ia patut bermula dan berakhir. Pengunaan tag ini hanya terhad kepada satu pasang sahaja. Walaupun ianya boleh digunakan berulang kali, masalah atau ralat mungkin dipaparkan kerana pihak pelayar tidak dapat menentukan dengan tepat di mana dokumen HTML bermula dan berakhir.Head adalah ruangan untuk meletakkan tajuk, koding tambahan seperti JavaScript, ruangan ini tidak akan dipaparkan. Jadi ianya amat sesuai untuk dimasukkan informasi mengenai struktur dan rekaan untuk paparan kandungan. Body adalah ruangan untuk paparan sesuatu laman web di mana ke semua elemen-elemen atau koding yang dimasukkan akan dibaca oleh pelayan ( browser ) dan diterjemahkan dalam bentuk visual. Aturcara yang paling
Read more