İlk veb saytınızı yaratmaq: 10 addım

2025 Müəllif: John Day | [email protected]. Son dəyişdirildi: 2025-01-23 12:54

Bu dərslikdə əlaqəli üslub cədvəli və interaktiv javascript faylı olan əsas bir veb səhifəsi qurmağı öyrənəcəksiniz.

Addım 1: Qovluğunuzu yaradın

Yaratacağımız faylların saxlanması üçün qovluq yaradın. İstədiyiniz kimi adlandırmaqdan çekinmeyin, yalnız harada olduğunu xatırlayın, çünki sonra faylları saxlayacağıq.

Addım 2: İlk Dosyanızı Yarat

Sevdiyiniz mətn redaktorunu açın. Mənim vəziyyətimdə sadəcə Windows 10 -un quraşdırılmış notepadını istifadə edəcəyəm. Yeni bir fayl əldə etdikdən sonra aşağıdakıları yazın:

Bu, öyrədici tərəfindən sizə gətirilən ilk veb səhifəmdir

HTML etiketi olaraq bilinən budur. Başlıq 1 deməkdir. Bu etiketə qoyduğumuz mətn səhifədə bir başlıq olaraq görünəcək. Bu şəkildə açılır və bağlanır. İki etiket arasındakı mətn veb brauzerinizdə görünəcəkdir. Deyilən hissə, bu etikete x addımında istinad edəcəyimiz bir xüsusiyyət verir. Bunu etdikdən sonra davam edin və faylı 1 -ci addımda etdiyimiz qovluğa index.html olaraq qeyd edin.

Addım 3: Faylı açın

Yaratdığımız qovluqdakı fayla keçməyi başa vurduqdan sonra, faylı sağ vurun və "aç" seçimini seçin və istifadə etdiyiniz veb brauzerini seçin. Mənim vəziyyətimdə bu Google xromdur. İndi bu günə qədər çəkdiyiniz zəhmətin zəhmətini görün!

Addım 4: Səhifənizi tərtib edin

Necə ki, veb saytımız olduqca sadədir. Hər şeyi bir az dadlandırmaq üçün kaskad üslubu vərəqi olaraq bilinənləri əlavə edəcəyik. Yeni bir mətn faylı yaradın və aşağıdakıları yazın:

h1 {rəng: mavi; mətn hizalama: mərkəz;}

Burada brauzerə söylədiyimiz şey, h1 etiketində (2 -ci addımda öyrəndiyimiz) hər hansı bir elementi tapmaq və ona mavi rəng vermək və səhifənin ortasına hizalamaqdır. Bu faylı 1 -ci addımda yaratdığımız qovluğa style.css olaraq qeyd edin.

Addım 5: Style.css faylını Index.html ilə əlaqələndirin

Bu nöqtədə bir -birimizdən xəbəri olmayan iki ayrı sənədimiz var. İndeks.html faylımıza istinad etməsini istədiyimiz bir style.css faylımız olduğunu söyləmək və bəzi üslubu götürmək lazımdır. Bunu etmək üçün index.html faylımızı mətn redaktorumuzda açacağıq və h1 etiketimizin üstünə link etiketi olaraq əlavə edəcəyik. Bağlantı etiketi, adının nəzərdə tutduğu kimi edir, bir şeylə əlaqələndirir. Bizim vəziyyətimizdə bir üslub cədvəli. Davam edin və yazın. Bağlantı etiketi özünü bağlayan bir etiketdir, buna görə də bitmə etiketinə ehtiyac yoxdur. Rel əlaqəni ifadə edir və href, istinad etdiyimiz xarici faylımızın yerləşdiyi indeks faylını bildirir. İndi index.html faylını qeyd edin.

Addım 6: Yeni tərtib edilmiş səhifənizə baxın

Addım 3 -ə yenidən baxın və veb səhifənizi yenidən yükləyin və dəyişikliklərin necə əks olunduğuna baxın.

Addım 7: Bir Düymə Yaratmaq

Mətn redaktorunuzda index.html faylınızı yenidən açın və aşağıdakıları yazın:

Məni basın!

və faylı saxla. Bu səhifədə bir düymə elementi yaradır. Saxlandıqdan sonra, faylı 3 -cü addımda göstərildiyi kimi yenidən açın və düymənin səhifənizin sol alt tərəfində olduğundan əmin olun.

Addım 8: Javascript faylınızı yaradın

Nəhayət, javascript faylımızı yaradacağıq. Saytımızı interaktiv hala gətirəcək budur. Bir mətn redaktoru açın və aşağıdakıları yazın:

document.querySelector ("#düymə"). addEventListener ("klik", funksiya () {

document.querySelector ("#heading"). innerText = "Başlığı anında dəyişmək"

})

Etdiyimiz iş, sənəddən bizə düymənin ID -si olan bir element tapmasını istəməkdir və düyməni "ID -nin başlığını dəyişdirməklə" başlığı dəyişməklə bir düyməni basaraq klik hadisəsinə cavab verəcəyik. ". Faylı 1 -ci addımda yaratdığımız qovluğa button.js olaraq qeyd edin.

Addım 9: Javascript və İndeks Dosyalarınızı Bağlayın

Style.css faylı ilə etdiyimiz kimi, index.html faylımıza javascript faylımız haqqında məlumat verməliyik. İndiyə qədər etdiyimiz hər şeyin altına aşağıdakıları yazın:

Skript etiketi, səhifəmizə funksionallıq təmin etmək üçün bir skript dili (bizim vəziyyətimizdə, javascript) əlavə etməyə imkan verir. Button.js adlı bir fayl axtarmağı və içindəki bütün kodu indeks sənədimizə əlavə etməsini söyləyirik. Bunu yazdıqdan sonra, faylı qeyd edin və 3 -cü addımda göstərildiyi kimi yenidən açın.

Addım 10: Yeni Yaradılmış Düyməni sınayın

İndi davam edin və düyməni basın və başlığın dəyişməsini izləyin!

Təbrik edirəm !! İndi ilk interaktiv veb səhifənizi yaratdınız! Maraqlıdır, indi bildiklərinizi bilməklə nə qədər irəli gedə bilərsiniz?