Pintar Web: Zero to Hero - Susun Folder Projek Anda

Susun Folder dan Fail Projek Anda

Apa itu HTML?

HTML ialah bahasa asas untuk membina laman web. HTML digunakan untuk:
1. - Papar teks
  - Papar gambar
  - Papar video
  - Buat pautan (link)
  - Bina borang (form)
  - Susun struktur laman web

Step 1: Susun File Projek

Cipta satu folder di dalam htdoc seperti berikut:
1. - Buka folder XAMMP C:\xampp\htdocs dan cipta nama folder anda.
  - Kenapa di htdocs? Sebab htdocs ialah document root untuk web server Apache.
  - Contoh: Folder websayur
  - Di dalam folder berkenaan mesti ada folder berikut (tidak wajib tetapi projek anda akan lebih kemas)
    1. - index.html (file html anda)
      - folder image
      - folder css

Step 2: Buka IDE anda, dan cipta html pertama anda

Buka IDE seperti Visual Studio Code
Kemudian, klik file, dan open folder untuk masukkan folder websayur ke environment IDE anda.
Right Click pada folder projek dan cipta file pertama web iaitu index.html

Step 3: Taip Code berikut di index.html

Masukkan gambar kubis.jpg di dalam folder image di dalam web sayur.
Pastikan nama file kubis, dan extension jpg. Jika png atau jpeg, code anda juga wajib memanggil nama penuh extension seperti yang anda set.
Save file index anda dan run projek anda yang pertama.

Cara Run dalam IDE:

Cara pertama: Click butang F5
Cara kedua: Click menu Run > Start Debugging > Pilih browser anda...
Cara ketiga (paling baik): Buka browser, taip URL berikut:
1. - http://localhost/websayur/index.html
  - http://127.0.0.1/websayur/index.html

Nota Penting:

<!DOCTYPE html> - Wajib untuk beritahu browser bahawa dokumen ini ialah HTML5.
<html></html> - Elemen induk (root) semua kod HTML mesti berada di dalam tag ini.
<head></head> - Maklumat belakang tabir, tidak dipaparkan pada laman web
<title></title> - Tajuk laman web, dipaparkan pada Tab browser
<body></body> - Kandungan yang dipaparkan kepada pengguna. Contoh: Teks, Gambar, Video, Form, Button dan lain-lain elemen.

Menarik bukan??? Ia mudah saja... Jadi kekal positif untuk belajar benda baru seterusnya!

Page updated

Google Sites

Report abuse