Çılpaq Bones Web Səhifəsi: 10 addım

2024 Müəllif: John Day | [email protected]. Son dəyişdirildi: 2024-01-30 07:47

Bu gün sıfırdan çox sadə, çılpaq sümüklər veb səhifəsi yaradacağıq. HTML elementləri, veb səhifənizi tərtib etmək (rənglər, şriftlər, uyğunlaşdırma və s.) Və nəhayət veb səhifənizə necə bir şəkil əlavə etmək barədə danışacağıq!

Bu təlimatın sonunda, sıfırdan bir veb səhifəsi yaratmaq üçün əsas bacarıqlara sahib olacaqsınız və kodlaşdırmanın göründüyü qədər çətin olmadığını kəşf edəcəksiniz!

Addım 1: Notepaddan istifadə edin

İlk veb səhifəmizi yaratmaq üçün Windows -da Notepaddan istifadə edəcəyik. Hər hansı bir mətn redaktoru edəcəyinə baxmayaraq, notepad Windows maşınlarında əvvəlcədən quraşdırılmışdır, buna görə əla bir başlanğıc nöqtəsidir.

Notepad açmaq üçün ekranın sol alt küncündəki axtarış çubuğuna gedin və "Notepad" yazın. Sonra axtarış nəticələrində görünən "Notepad" tətbiqini seçin. Yeni bir pəncərə açılmalıdır.

Addım 2: Əsas HTML Sənəd Ağacının əlavə edilməsi

Veb brauzerinizin (Chrome, Firefox, Edge, Internet Explorer, Safari …) veb səhifənizi işlətməsi və göstərməsi üçün bütün veb səhifələr standart bir skelet quruluşuna uyğun olmalıdır.

Buna html sənəd ağacı deyilir. Notepadda, ekran görüntüsündə göstərildiyi kimi html "elementləri" və ya "etiketləri" yazın. Kopyalayıb yapışdırmaqdan da çekinmeyin:

Addım 3:.html Səhifəsi kimi qeyd edin

İndi Notepad -da əsas html quruluşumuza sahib olduğumuz üçün heç bir işi itirməmək və Təlimatla birlikdə irəlilədikcə dəyişikliklərimizi görmək üçün onu saxlayaq.

1. 'Fayl'> 'Farklı Saxla…' seçin (Ekran Görüntüsü 1)
2. Fayl növünü 'Bütün Fayllar' olaraq dəyişdirin (Ekran Görüntüsü 2)
3. Faylınıza istədiyiniz ad verin. Sənədi kompüterinizdə harada saxladığınızı qeyd etdiyinizə əmin olun ki, sonra aça biləsiniz. NOT: Bu faylı saxlamağın ən vacib hissəsi fayl adının sonuna ".html" əlavə etməkdir. Bu, kompüterinizin veb səhifəsi kimi tanımasına imkan verəcəkdir. Faylınıza "my_webpage" adını vermək istəyirsinizsə, bunun sonuna.html əlavə etməyi unutmayın, məsələn. "my_webpage.html"

Addım 4: Veb səhifənizə bir başlıq əlavə edin

Beləliklə, veb brauzerlərin veb səhifəmizi şərh etməsi və göstərməsi üçün lazım olan əsas html quruluşuna sahibik, lakin heç bir məzmunumuz yoxdur. Gəlin bunu dəyişək!

Etməli olduğumuz ilk şey veb səhifəmizə bir başlıq verməkdir. Bütün veb səhifələrin çoxunun adı var. Veb brauzerinizdəki nişanda görünən budur (ekran görüntüsünə baxın). Veb səhifəmə "Taylorun Veb saytı" adını verəcəyəm. Bunu etmək üçün bir 'başlıq' elementi əlavə etməliyik.

Taylor Veb saytı

Bu nöqtədə hər bir etiketin "açılış" və "bağlama" etiketinin olduğunu görəcəksiniz. Kimi

və.

Bu başlığın haradan başladığını və harada bitdiyini ayırd etməkdir. Demək olar ki, bütün html etiketləri bunu izləyir, lakin bəzi istisnalar var.

Addım 5: Veb səhifənizə məzmun əlavə edin

Veb səhifəmiz üçün bir Başlığımız var, amma hələ də bunun üçün heç bir faktiki məzmunumuz yoxdur. Gəlin bir az bacarıq əlavə edək!

Veb səhifəmizə 'title' elementi istifadə edərək bir başlıq əlavə etdik. Başlıq elementi olan 'h1' elementini istifadə edərək veb səhifəmizə böyük, diqqəti cəlb edən bir başlıq verək.

Taylor Veb saytı

Veb səhifəmə xoş gəldiniz

Addım 6: Dəyişikliklərimizi İndiyə qədər Baxırıq

Bir başlığımız var, bir az məzmunumuz var, bu günə qədər necə gəldiyini öyrənmək üçün veb səhifəmizə baxaq.

1. Faylınızı notepadda qeyd edin
2. Faylınızı saxladığınız yerə gedin və üzərinə iki dəfə vurun. Varsayılan veb brauzerinizdə avtomatik olaraq açılmalıdır. Yaxşı görünür!

Addım 7: Paraqraf etiketi əlavə edin

Başlığımız, başlığımız var, indi daha bir mətni olan bir paraqraf əlavə edək. Paraqrafın element adı 'p' dir. İstifadəsini aşağıda görə bilərsiniz:

Taylor Veb saytı

Veb səhifəmə xoş gəldiniz

Bu gün bu çox sadə veb səhifənin necə yaradılacağını öyrənəcəyik!

Qeyd: Notepad saxlayaraq faylı açaraq istədiyiniz vaxt dəyişikliklərinizə baxa bilərsiniz.

Addım 8: Bir az rəng verin

Veb səhifəmiz düz yayılır, amma olduqca sadədir. Paraqraf etiketimizə bir az rəng verək!

Aşağıda ətraflı şəkildə 'p' etiketinə 'stil' atributu əlavə edərək fərqli elementləri rəngləndirə bilərik:

Taylor Veb saytı

Veb səhifəmə xoş gəldiniz

Bu gün bu çox sadə veb səhifənin necə yaradılacağını öyrənəcəyik!

Addım 9: Şəkil əlavə edin

Şəkilləri olmayan veb sayt nədir? Veb saytımıza bir şəkil əlavə edək!

İlk addım bəyəndiyiniz bir şəkil tapmaqdır. Qızıl retriever axtarmaq üçün google şəkillərindən istifadə etdim. Şəkli yuxarı çəkin və url -in.jpg,.png,.gif,-j.webp

Şəkilinizi seçdikdən sonra 'img' etiketi istifadə edərək html səhifəsinə əlavə etməliyik. Mənim şəklim:

'Src' atributlu 'img' etiketi istifadə edərək səhifənizə əlavə edin:

Taylor Veb saytı

Veb səhifəmə xoş gəldiniz

Bu gün bu çox sadə veb səhifənin necə yaradılacağını öyrənəcəyik!

Addım 10: Son Məhsulu Baxın

Notepad faylını qeyd edin və son məhsulu açın. Veb səhifənizi görməlisiniz!