Membuat Laman Web Pertama Anda: 10 Langkah

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:08

Dalam tutorial ini, anda akan belajar membina laman web asas yang mempunyai helaian gaya yang dipautkan dan fail javascript interaktif.

Langkah 1: Membuat Folder Anda

Buat folder agar fail yang akan kita buat disimpan. Jangan ragu untuk menamakannya sesuka hati, ingat di mana ia berada kerana kami akan menyimpan fail ke sana kemudian.

Langkah 2: Membuat Fail Pertama Anda

Buka penyunting teks kegemaran anda. Dalam kes saya, saya hanya akan menggunakan notepad Windows 10. setelah anda mempunyai fail baru, ketik perkara berikut:

Ini adalah laman web pertama saya, yang dibawakan kepada anda oleh seorang instruksional

Inilah yang dikenali sebagai tag HTML. Singkatan dari Tajuk 1. Teks yang kami masukkan ke dalam tag ini akan muncul sebagai tajuk di halaman. Ia dibuka dan ditutup seperti ini. Teks di antara dua tag adalah apa yang akan dipaparkan di penyemak imbas web anda. Bahagian yang mengatakan adalah memberi tag itu atribut yang akan kita rujuk pada langkah x. Setelah selesai, teruskan dan simpan fail dalam folder yang kami buat pada langkah 1 sebagai index.html.

Langkah 3: Buka Fail

Setelah selesai menavigasi ke fail dalam folder yang kami buat, klik kanan fail dan pilih pilihan "buka dengan" dan pilih penyemak imbas web yang anda gunakan. Dalam kes saya ini adalah google chrome. Sekarang lihatlah kerja keras anda selama ini!

Langkah 4: Menggayakan Halaman Anda

Seperti yang ada, laman web kami cukup jelas. Kami akan menambahkan apa yang dikenali sebagai lembaran gaya bertingkat untuk membumbui sesuatu. Buat fail teks baru dan taipkan yang berikut:

h1 {warna: biru; text-align: center;}

Apa yang kami sampaikan pada penyemak imbas di sini adalah mencari unsur apa pun dalam tag h1 (yang kami pelajari dalam langkah 2) dan memberikannya warna biru dan sejajarkan di tengah halaman. Simpan fail ini dalam folder yang kami buat pada langkah 1 sebagai style.css.

Langkah 5: Pautkan Style.css ke Indeks Anda.html

Pada ketika ini kami mempunyai dua fail terpisah yang tidak saling mengenali. Kita perlu memberitahu fail index.html bahawa kita mempunyai fail style.css yang ingin kita rujuk dan mengambil beberapa gaya. Untuk melakukan ini, kami akan membuka fail index.html di editor teks kami, dan di atas tag h1 kami akan menambahkan apa yang dikenali sebagai tag pautan. Teg pautan sama seperti yang disiratkan oleh namanya, ia menghubungkan ke sesuatu. Dalam kes kami, helaian gaya. Teruskan dan taip. Tanda pautan adalah teg penutup diri sehingga tag penamat tidak diperlukan. Rel bermaksud hubungan dan href memberitahu fail indeks di mana fail luaran yang kita rujuk berada. Sekarang simpan fail index.html itu.

Langkah 6: Lihat Halaman Anda yang Baru Bergaya

Lihat semula langkah 3 dan muatkan semula laman web anda dan lihat bagaimana perubahan tersebut dapat dilihat.

Langkah 7: Membuat Butang

Buka semula fail index.html anda di editor teks anda dan taipkan yang berikut:

Klik saya!

dan simpan failnya. Ini membuat elemen butang di halaman. Setelah disimpan, buka semula fail seperti yang ditunjukkan pada langkah 3 dan pastikan butang berada di sebelah kiri bawah halaman anda.

Langkah 8: Buat Fail Javascript Anda

Terakhir kami akan membuat fail javascript kami. Inilah yang akan menjadikan laman web kita interaktif. Buka editor teks dan taipkan yang berikut:

document.querySelector ("# butang"). addEventListener ("klik", fungsi () {

document.querySelector ("# heading"). innerText = "Mengubah tajuk dengan cepat"

})

Yang kami lakukan adalah meminta dokumen untuk menemukan elemen dengan ID butang kepada kami, dan kami akan meminta butang bertindak balas terhadap peristiwa klik dengan mengubah teks elemen dengan ID menuju ke "Mengubah judul dengan cepat ". Simpan fail sebagai button.js dalam folder yang kami buat pada Langkah 1.

Langkah 9: Pautkan Fail Javascript dan Indeks Anda

Seperti yang kita lakukan dengan file style.css, kita perlu memberitahu fail index.html mengenai fail javascript kita. Di bahagian bawah semua yang telah kami lakukan setakat ini taipkan perkara berikut:

Tag skrip membolehkan kami menambahkan bahasa skrip (dalam kes kami, javascript) untuk memberikan fungsi ke halaman kami. Kami memintanya untuk mencari fail bernama button.js dan menambahkan semua kod yang terdapat di dalamnya ke fail indeks kami. Setelah anda memasukkannya, simpan fail tersebut dan buka semula fail seperti yang ditunjukkan pada langkah 3.

Langkah 10: Uji Butang Baru Dibuat

Sekarang teruskan dan klik butang dan perhatikan perubahan tajuk!

Tahniah !! Anda kini telah membuat laman web interaktif pertama anda! Saya tertanya-tanya sejauh mana anda dapat mengambilnya dengan mengetahui apa yang anda tahu sekarang ??