Yeni başlayanlar üçün öz veb saytınızı qurmaq: 5 addım

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

İstər kompüter proqramçısı olmaq arzusunda olsanız da, istərsə də üz tutduğumuz bir veb saytdan istifadə etməyinizdən asılı olmayaraq, demək olar ki, hamımızın, informasiya texnologiyaları işin onurğasına çevrilmişdir. Proqramlaşdırma əvvəlcə bir az qorxunc görünsə də, məqsədim sizə veb dizaynının əsaslarını öyrətməkdir ki, bu dərsdən sonra öz veb səhifənizi edə biləsiniz. Bunun xaricində, gəlin gələk!

Təchizat

• Bir Macintosh və ya Windows PC (Linux dağıtımları da istifadə oluna bilsə də, bir başlanğıc təqdimatı olduğu üçün hələlik bunları atlayıram).
• Mətn redaktoru seçiminiz (Windows -da Notepad, Mac -da TextEdit) və ya IDE seçiminiz. Təcrübəmdə, Visual Studio Kodunun özüm üçün ən yaxşı işlədiyini gördüm, buna görə də burada yoxlamağı məsləhət görürəm: https://code.visualstudio.com/ bütün OS platformalarında işlədiyini qeyd etməmək.

Addım 1: Etiketlər və Biraz Tarix

Mətn redaktoru və ya IDE seçiminizə qərar verdikdən sonra əsaslarla başlayaq.

İnanın ya da inanmayın, HTML və ya HyperText İşaretleme Dili təxminən 30 ildir ki, mövcuddur və hər il dildə daha çox təkmilləşdirmələr gəlir. İndi soruşa bilərsiniz, bir brauzer ekranda nə qoyulacağını necə şərh edir? Bu bir neçə hissədə aparılır:

HTML sənədlərinin formatlanması asandır. Baş və bədən olaraq bilinən iki hissəniz var. Veb saytın başında istifadəçiyə görünməyən kod var. Bu üslub cədvəllərini əlaqələndirmək və saytın düzgün göstərilməsi üçün lazım olan digər zəruri bitləri elan etmək üçün istifadə olunur. Başın ardınca bədən, veb saytının gövdəsi səsləndiyi kimi olur. Səsinizi danışa və tamaşaçılara fantastik HTML bacarıqlarınızı göstərə biləcəyiniz yer budur! İndi bədənə mətn yazmaq və istədiyiniz kimi göstərməyiniz asan deyil, ancaq etiket adlandırdığımız şeylərin istifadəsi ilə demək olar ki, bu qədər asandır.

Budur əsas HTML etiketlərindən bəziləri:

• başlıq - səhifənin başlığının nə olduğunu brauzerə bildirmək üçün istifadə olunur. Bir veb səhifəsinin sekmesine baxanda da gördüyünüz budur.
• h1, h2, h3, h4 - h1 ən böyük və h4 ən kiçik olmaqla fərqli başlıq ölçüləri üçün istifadə olunur. Növbəti hissədə bu barədə daha çox məlumat verəcəyəm.
• p - paraqraf, mətnin paraqraflarını yazmaq üçün istifadə olunur. Kağızdakı paraqraflar kimi.
• br - mətnə uyğun olaraq fasilə daxil edən fasilə.
• a - tıklanabilen bir bağlantı kimi digər səhifələrə bağlantılar yaratmaq üçün istifadə olunur.
• img - şəkli veb səhifəyə bağlamaq üçün istifadə olunur.
• ul, ol, li - sıralanmamış siyahılar, sifarişli siyahılar və siyahı elementləri.
• - kodda son istifadəçi tərəfindən görünməyən şərhlər etmək üçün istifadə olunur.

Və burada bəzi CSS etiketləri (vizual):

• rəng - müəyyən bir elementə və ya veb səhifədə müəyyən bir rəng təyin etmək üçün istifadə olunur.
• font-size-səhifədəki font ölçüsünü dəyişdirmək üçün istifadə olunur.
• background-color-müəyyən elementin və ya bütün səhifənin fon rəngini dəyişdirmək üçün istifadə olunur.

Bir az itkin düşdüyünüz halda sizə kömək etmək üçün kiçik bir fırıldaqçı vərəqi də əlavə etdim, amma narahat olmayın, qısa müddətdə həllini alacaqsınız! Əlavə olaraq, www.w3schools.com hər hansı bir proqramlaşdırma sualınız üçün də fantastik bir qaynaqdır. Məni bir dəfə və ya çox vaxt xilas etdilər.

Əslində brauzerin faylı necə oxuması asandır. Satırdan xəttə gedir və funksiyanı funksiyaya görə işlədir. Simvollar kimi bir etiket elan etmək üçün istifadə olunur

kimi etiketləri bağlamaq üçün istifadə olunur

. Bu vacibdir, əks halda brauzer harada dayanacağını bilmir. Arasında

və

etiketlər, istədiyinizi daxil etdiyiniz yerdir!

Addım 2: Redaktorun Qurulması

Bir HTML veb saytının əsas elementləri haqqında bir az danışdığımıza görə, gəlin özümüz üçün cəhd edək. Bu növbəti addım üçün veb saytı proqramlaşdırmaq üçün Visual Studio Kodundan istifadə edəcəyəm, ancaq Notepad və ya TextEdit istifadə etməkdən daha rahat olsanız kodun düzeni eyni olacaq.

Notepad daxilində:

• Notepad ilə proqram boş bir faylla başlayır və bu da işə başlamağı çox asanlaşdırır. Bu, VS Kodunu istifadə etməklə müqayisədə bir neçə addım atlamağımıza da imkan verəcək. Dosyanı düzgün formatda saxlayaraq başlayaq.
• Fayl> Saxla vurun
• Faylınız üçün bir ad daxil edin və ardınca.html daxil edin və Yazın kimi saxla altında bütün faylları seçin. Saxla düyməsini basın.

VS Kodu daxilində:

• IDE -nin bütün xüsusiyyətlərindən faydalanmağın ən yaxşı yolu, faylı yaratmaq və IDE -yə hansı növ fayl olduğunu söyləməklə başlamaqdır. Bu aşağıdakı kimi edilə bilər:
• Fayl> Yeni Fayl vurun
• Boş bir fayl açılır
• Sonra, IDE -nin son məhsulun hansı fayl olacağını anlaya bilməsinə imkan verəcəyi üçün boş olsa da, faylı saxlamaqla başlamaq istəyəcəksiniz. Saxlayarkən fayl adının sonuna.html uzantısını daxil etməyi unutmayın. Saxla düyməsini basın.

Addım 3: Planlar

Filename.html faylınızı uğurla saxladıqdan sonra veb səhifəmiz üçün çərçivə yaratmaqla başlayaq. HTML səhifəsinin qalan hissəsini yaratmağa başlamazdan əvvəl faylın hansı əsas hissələrini elan etməyimiz lazım olduğunu yuxarıdan xatırlayın. Pro-tip: saytın çərçivəsinə başlayarkən! DOCTYPE HTML etiketi brauzerə oxuduğu faylın html faylı olduğunu bildirir. Eyni faylda fərqli kod növləriniz varsa və tərcüməçilər arasında keçid etmək istəsəniz bu faydalı ola bilər. Bu təlimatın əhatə dairəsi üçün bu mövzuya çox toxunmayacağıq, ancaq bu təlimatdan sonra HTML inkişaf etdirilməsi haqqında daha çox məlumat əldə etmək istəyirsinizsə, çəkinməyin. Ən yaxşı təcrübə üçün! DOCTYPE HTML etiketini faylın üstünə daxil edəcəyəm. İlə açmağı və bağlamağı unutmayın.

Proqramlaşdırmaya başlamazdan əvvəl faylı saxlamağın lazımlı olduğu yer budur, indi IDE bir HTML faylı ilə işlədiyini bildikdə, ifadəni bitirmək üçün intellisense istifadə edəcək və təsadüfən bir etiketi bağlamağı unutmamalısınız.. Qeyd edək ki, Notepad istifadə edənlər üçün intellisense IDE -də olduğu kimi mövcud deyil. Baş və bədən etiketlərini aşağıdakı kimi daxil etməklə başlayırıq: (ikinci şəklə baxın).

Sənədin qurulması başa çatdıqdan sonra yarışlara çıxa və əylənə bilərik!

Addım 4: Kod; Kod; Kod;

Yeni yaradılmış faylımıza bir başlıq əlavə edərək başlaya bilərik. İstədiyinizi daxil edin. Unutmayın ki, bu brauzer sekmesinde görünür. Saytımıza bir başlıq girərək başlayaq. Bunu necə etdiyimizi əvvəldən xatırlayın. H1/2/3/4 eşitdimmi? Bu doğrudur!

Davam etməzdən əvvəl, dəyişikliklərimizin brauzerdə necə əks olunduğunu real vaxtda görə bilməyimiz üçün faylımızı bir brauzer pəncərəsində açmağın faydalı olduğunu düşünürəm. Dosyanı saxlamaq üçün Fayl> Saxla düyməsini basaraq HTML faylının saxlandığı qovluğa gedərək bunu edə bilərsiniz, mənim üçün bu masa üstüdür və faylı açmaq üçün seçdiyiniz brauzerdən istifadə edirsiniz və buna baxardınızmı?, veb səhifəniz var! Qeyd: Mən şəxsən kompüterimdə seçim etdiyim brauzer olaraq Safari -dən istifadə edirəm, lakin veb inkişafında Firefox, demək olar ki, hər bir veb skript dili ilə işlədiyi üçün test üçün qızıl standart brauzerdir.

Gördüyünüz kimi, başlıq h1 başlığımızı görməklə yanaşı nişanda da göstərilir. Faylın həm brauzer pəncərəsinin IDE -nin yanında açılmasını üstün tuturam, çünki IDE -də dəyişiklik edib saxladığınız zaman dəyişikliklər dərhal brauzerdə olur.

Etiketlər əlavə etməyi və HTML ilə edə biləcəyiniz fərqli şeylərlə oynamağı sınayın. Aşağıda görə biləcəyiniz kimi, Instructables.com saytına bir neçə paraqraf, fasilə, xarici hiperlink, bir görüntü əlavə etdim (ya xarici mənbədən, ya da. HTML faylının saxlandığı kataloqla əlaqələndirilə bilər), sıralanmamış bir siyahı, sifarişli bir siyahı və son olaraq bir şərh nümunəsi.

Bəzi rəng və tənzimləmə variantları əlavə etmək istəsəniz, faylın başına bir stil etiketi daxil edə bilərsiniz. Bunun HTML -dən CSS -ə keçdiyi məqamdır, ancaq vizual olaraq bir neçə sətir daxil edəcəyəm ki, bunun necə işlədiyini görə biləsiniz. Əsasən CSS -in necə işlədiyi, kodunuzu müəyyən bir HTML elementi daxil etmək üçün mötərizədən istifadə edərək {} funksiyalar daxilində HTML elementlərini idarə etməyə imkan verir.

Addım 5: Son Fikirlər

Və orada var; ilk veb səhifənizi uğurla yaratdınız! Bu yeni başlayanlar üçün bələdçi olduğu üçün HTML ilə ilk təcrübənizi xoş bir təcrübə etmək istəyirəm. Təcrübəmdə öyrənməyin ən yaxşı yolu, əllərinizə dalmaq və sınamaq, kodunuzla nə edə biləcəyinizi görmək və kodunuzu necə poza biləcəyinizi görməkdir. Bu, bütövlük yaradır və kodun necə və niyə işlədiyini daha yaxşı başa düşməyinizə kömək edir. Unutmayın ki, www. W3Schools.com suallar üçün əla bir qaynaqdır və hətta kodunuzu sınamaq üçün brauzer daxilində virtual bir sandbox da təklif edirlər. Ümid edirəm bir şey öyrəndiniz və xoşbəxt kodlaşdırma!