Birinchi veb -saytingizni yaratish: 10 qadam

2025 Muallif: John Day | [email protected]. Oxirgi o'zgartirilgan: 2025-01-23 15:14

Ushbu qo'llanmada siz bog'langan uslublar jadvali va interaktiv javascript fayli bo'lgan asosiy veb -sahifani yaratishni o'rganasiz.

1 -qadam: Sizning papkangizni yaratish

Biz saqlaydigan fayllar uchun papka yarating. O'zingiz xohlagancha nom bering, faqat qaerda joylashganligini eslang, chunki biz keyinchalik fayllarni saqlaymiz.

2 -qadam: Birinchi faylni yarating

Sevimli matn muharririni oching. Mening holimda men Windows 10 -ning o'rnatilgan bloknotidan foydalanaman. Sizda yangi fayl paydo bo'lganda quyidagilarni yozing:

Bu mening birinchi veb -sahifam, sizga ko'rsatma bergan

Bu HTML yorlig'i sifatida tanilgan. Bu 1 -sarlavha degan ma'noni anglatadi, biz bu tegga joylashtirgan matn sahifada sarlavha sifatida ko'rsatiladi. U shunday ochiladi va yopiladi. Ikki teg orasidagi matn - bu sizning veb -brauzeringizda ko'rsatiladigan matn. Aytilgan qism bu yorliqqa atributni beradi, biz x bosqichda murojaat qilamiz. Bu bajarilgandan so'ng, davom eting va faylni index.html sifatida 1 -qadamda biz yaratgan papkaga saqlang.

3 -qadam: Faylni oching

Biz yaratgan papkadagi faylga o'tishni tugatganimizdan so'ng, faylni o'ng tugmasini bosing va "ochish" variantini tanlang va siz foydalanadigan veb -brauzerni tanlang. Mening holimda bu google chrome. Endi shu paytgacha qilgan mehnatingizni ko'ring!

4 -qadam: O'z sahifangizni uslublash

Xuddi shunday, bizning veb -saytimiz juda aniq. Biz narsalarni biroz ziravorlash uchun kaskadli uslublar jadvalini qo'shamiz. Yangi matnli fayl yarating va quyidagilarni kiriting:

h1 {rang: ko'k; matnni tekislash: markaz;

Bu erda biz brauzerga aytmoqchimizki, h1 tagidagi har qanday elementni (biz 2 -bosqichda bilib oldik) va unga ko'k rang berib, sahifaning o'rtasiga tekislang. Ushbu faylni 1 -qadamda biz yaratgan papkada style.css sifatida saqlang.

5 -qadam: Style.css -ni Index.html -ga ulang

Bu vaqtda bizda bir -birimizni bilmaydigan ikkita alohida fayl bor. Biz index.html faylimizga style.css fayli borligini aytishimiz kerak, u bizga havola qilishni xohlaydi va ba'zi uslublarni oladi. Buni amalga oshirish uchun biz index.html faylini matn tahrirlovchisida ochamiz va h1 tegining ustiga biz havola tegini qo'shamiz. Bog'lanish yorlig'i xuddi o'z ismidan ko'rinib turibdi, u biror narsaga havola qiladi. Bizning holatda, uslublar jadvali. Davom eting va yozing. Havola yorlig'i o'z -o'zidan yopiladigan yorliqdir, shuning uchun tugatish yorlig'i shart emas. Rel - bu munosabat degan ma'noni anglatadi va href biz ko'rsatayotgan tashqi fayl qaerda joylashganini ko'rsatadi. Endi index.html faylini saqlang.

6 -qadam: Yangi uslubdagi sahifangizni ko'ring

3 -qadamni qayta ko'rib chiqing va veb -sahifangizni qayta yuklang va o'zgarishlarni qanday aks ettirishini ko'rib chiqing.

7 -qadam: tugma yaratish

Matn muharririda index.html faylini qayta oching va quyidagilarni yozing:

Menga bosing!

va faylni saqlang. Bu sahifada tugma elementini yaratadi. Saqlagandan so'ng, faylni 3 -qadamda ko'rsatilgandek qayta oching va tugma sahifangizning chap pastki qismida joylashganligiga ishonch hosil qiling.

8 -qadam: Javascript faylini yarating

Va nihoyat, biz javascript faylini yaratamiz. Bu bizning saytimizni interaktiv qiladi. Matn muharririni oching va quyidagilarni kiriting:

document.querySelector ("#tugma"). addEventListener ("bosish", funksiya () {

document.querySelector ("#sarlavha"). innerText = "Sarlavhani tezda o'zgartirish"

})

Biz qilayotgan ishimiz - hujjatdan tugmachasining identifikatori bo'lgan elementni topishni so'rash, biz esa tugmachani bosish hodisasiga javob beramiz, uning elementi matnini "Sarlavhani o'zgartirish" ga o'zgartiramiz. ". Faylni 1 -qadamda biz yaratgan papkada button.js sifatida saqlang.

9 -qadam: Javascript va indeks fayllarini bog'lang

Style.css fayli bilan bo'lgani kabi, biz ham index.html faylimizga javascript fayli haqida aytib berishimiz kerak. Biz hozirgacha qilgan barcha ishlarimiz ostiga quyidagilarni yozamiz:

Skript yorlig'i bizning sahifamizga funksionallikni ta'minlash uchun bizga skript tilini (bizning holatda, javascript) qo'shish imkonini beradi. Biz unga button.js nomli faylni qidirishni va undagi barcha kodlarni indeks faylimizga qo'shishni aytayapmiz. Siz kiritganingizdan so'ng, faylni saqlang va 3 -bosqichda ko'rsatilgandek faylni qayta oching.

10 -qadam: Yangi yaratilgan tugmani sinab ko'ring

Endi davom eting va tugmani bosing va sarlavhaning o'zgarishini ko'ring!

Tabriklayman !! Siz hozir birinchi interaktiv veb -sahifangizni yaratdingiz! Qiziq, endi bilganlaringni bilib, qancha uzoqqa borishing mumkin?