Veb saytı necə kodlaşdırmaq olarHTML və CSS ilə veb sayt yaratmağı öyrənmək istəyirsiniz?


Doğru yerdəsiniz. Bu təlimatda sizə boş bir ekrandan eyni vaxtda optimallaşdırılmış və olduqca yaxşı görünən bir veb sayt əldə etmək üçün bütün addımları göstəririk..

Ancaq əvvəlcə HTML və CSS nədir?

Yaxşı, sadəcə Vikipediyada hər iki terminə baxa bilərdiniz, amma bu təriflər çox oxucuya yaraşmaz. Bir az sadələşdirək:

  • HTML (Hypertext Markup Language) veb səhifənin quruluşunu və məzmununu müəyyənləşdirir – harada işlər gedir, Necə onlar qoyulur və nədir səhifədə
  • CSS (Cascading Style Sheets) müəyyənləşdirir üslub / təqdimat bir veb səhifənin və üzərindəki elementlərin

Həqiqətən başqasız birinə sahib ola bilməzsiniz – son veb səhifəni, tərtibatını və içindəki məzmunu düzəltmək üçün iki iş birlikdə iş.

Qeyd; “veb səhifə” dedikdə bir HTML sənəddir – veb saytınızın bir hissəsi olan bir səhifədir. Halbuki “veb sayt” tam bir şeydir – bütün saytınızı fərdi veb səhifələri ilə birlikdə.

HTML və CSS (məzmun cədvəli) istifadə edərək veb sayt necə yaradılır:

  1. HTML əsaslarını öyrənin
  2. HTML sənəd quruluşunu anlayın
  3. CSS seçiciləri ilə tanış olun
  4. CSS üslub cədvəlini birlikdə qoyun
  5. Çəkmə kəmərini alın
  6. Bir dizayn seçin
  7. Veb saytınızı HTML və CSS ilə dəyişdirin
  8. Məzmun və şəkillər əlavə edin
  9. Rəngləri və şriftləri incələyin
  10. Əlavə səhifələr yaradın

Veb sayt yaratmağın ümumi vaxtı: 4-5 saat
Bacarıq səviyyəsi: Aralıq

Bunun çox mürəkkəb olduğunu düşünürsənsə ya WordPress istifadə edərək veb sayt yaratmağı və ya veb sayt qurucularından birini seçməyi məsləhət görürük. Veb inkişafı üçün seçilmiş ən yaxşı IDE siyahısını da yoxlaya bilərsiniz. 

Contents

Başlamazdan əvvəl, Resurslarınızı toplayın:

Beləliklə, HTML və CSS ilə veb sayt yaratmadan əvvəl ehtiyacınız olan ilk şey veb serverdir (hosting). Narahat olma; öz maşınını almaq məcburiyyətində deyilsən. Bir çox veb hosting şirkəti sizə maşınlarında sadə bir hosting xidməti satacaq. Yalnız “veb hosting” üçün google-dan istifadə edin və çox bahalı olmayan bir şey seçin.

Sıralanan server ilə sizə lazım olan növbəti şey bir domen adıdır. Domen adı vebin vebdə müəyyənləşdirildiyi şeydir. Məsələn, bu saytın domen adı veb saytları veb saytı.

Həm domen adı, həm də bir server olduğunuz zaman ikisini birlikdə bağlaya bilərsiniz.

Tam açıqlama: Bu təlimatdakı müraciət bağlantılarımız vasitəsilə Bluehost satın almağınızla nəticələnərsə biz bir komissiya qazanırıq. Bu, WebsiteSetup-u yeniləməyə və işləməyə kömək edir. Destek üçün təşəkkür edirik.

Bunun sonunda heç bir ağrısı olmadan sıralanmaması üçün bir şirkət kimi qeydiyyatdan keçməyi məsləhət görürük Bluehost.

Bütün qurğuları sizin üçün idarə edəcəklər. Olacaqları mənası: (a) sizin üçün hosting hesabı qurun, (b) adınızdan bir domen adını qeyd edin, (c) birlikdə işləmək üçün hər şeyi konfiqurasiya edin və (d) istifadəsi asan bir tablosuna giriş imkanı verir.

Gedin və qeydiyyatdan keçin Bluehost, gözləyəcəyik. Geri qayıdıb veb serverinizi konfiqurasiya edib hazır olmağınızdan sonra növbəti addıma keçin.

P.S. Yalnız kompüterinizdə bir HTML veb saytı ilə təcrübə etmək istəyirsinizsə, və açıq etmək niyyətində deyil, yerli veb server proqramından istifadə edin. Tövsiyə etdiyimiz və istifadə etməyi xoşladığımız adlanır XAMPP. Həm Mac, həm də PC üçün versiyaları var və istifadəsi asandır. Budur bir bələdçi kompüterinizdə necə quraşdırılacağına dair.

1. HTML əsaslarını öyrənin

HTML quruluşunun əsas elementi HTML-dir etiket.

Məsələn bir etiket belə görünür:

NƏZƏR

Burada bir ilə məşğul oluruq etiket. Bu bir olacaq cəsur açılış etiketi arasındakı mətn parçası () və bağlama etiketi (). Bu vəziyyətdə o mətn parçasıdır NƏZƏR.

Ancaq bir neçə ad vermək üçün başqa etiketlər var:

  • ... mətni açılış və bağlama etiketləri arasında itivləşdirəcəkdir
  • ... vurğulayacaq
  • ...

    mətnin bir abzasıdır


  • ...

    səhifədəki əsas başlıqdır

Bu sadə etiketlərdən başqa daha mürəkkəb etiketlər də var. Məsələn, aşağıdakı kimi bir siyahı qurmaq istəyirsinizsə:

  • 1-ci bənd
  • 2-ci bənd
  • 3-cü bənd

… aşağıdakı HTML kodu ilə bunu edə bilərsiniz:

  • 1-ci bənd
  • 2-ci bənd
  • 3-cü bənd

Və ya başqa bir səhifəyə bir keçid əlavə etmək istəyirsinizsə, bu kimi:

Bu, ana səhifəmizə bir link

… kodu bu parça ilə edə bilərsiniz:

Bu mənim ana səhifəmə bir keçiddir

Bu almaq üçün oxuyun HTML etiketlərinin tam siyahısı. HTML və CSS ilə veb sayt yaratdığınız zaman faydalı olacaq.

2. HTML sənəd quruluşunu anlayın

HTML səhifənizi sanki Legosdan tikilmiş kimi düşünün. Verilmiş daha böyük bir quruluşla bitmək üçün bir-birinin üstünə müxtəlif kərpiclər qoyursunuz.

Ancaq Lego kərpic əvəzinə HTML etiketləri alırsınız …

Ən sadə HTML sənəd quruluşu:





Salam dünya!


Salam dünya!

İlk veb səhifəm.

Yuxarıdakı kodu götürə bilərsiniz, yeni bir sənədə kopyalayabilir və sənəd kimi saxlaya bilərsiniz indeks.html, və mükəmməl etibarlı HTML səhifəsi olacaqdır.

Bu kodun ayrı-ayrı hissələrini izah edək:

  • – sənədin ilkin bəyannaməsi
  • – başqa bir bəyannamə; deyəcək ki, bundan sonra gələn şey ingilis dilində yazılmış HTML sənəddir
  • – başlanğıcını qeyd edir baş bölmə; the baş bölmə, səhifənin bütün əsas parametrlərinin getdiyi yerdir; bunların əksəriyyəti ekranda göstərilməyəcək; yalnız başlıq altında nə baş verdiyini müəyyənləşdirirlər
  • – sənədi yazmaq üçün hansı xarakter dəstindən istifadə olunduğunu müəyyənləşdirir; buna çox vaxt sərf etməyə ehtiyac yoxdur; sadəcə bu bəyannaməni olduğu kimi istifadə edin
  • Salam dünya! – səhifənin adı; insanların brauzerlərinin başlıq panelində görəcəyi şey budur, məsələn:

HTML və CSS ilə veb sayt yaratarkən veb brauzerdə başlıq

  • – başlanğıcını qeyd edir bədən bölmə; səhifənin bütün məzmunu hara gedirsə; bu HTML sənədinin əsas hissəsidir; bunu vurğulamaq üçün bu bölmədə səhifədə görünmək üçün nəzərdə tutulmuş bütün məzmunu ehtiva edən yerdəyik

  • Salam dünya!

    – səhifədəki əsas başlıq

  • İlk veb səhifəm.

    – mətnin sadə bir abzası

  • – bütün HTML sənədinin yekun etiketi

Burada əhəmiyyətli bir qeyd. Təməl mətn tətbiqetməsində və ya MS Word kimi mürəkkəb bir mətn prosessorunda HTML faylı üzərində işləmək yaxşı təcrübə deyil. Özünüzü asanlaşdırmaq üçün adlı bir vasitə quraşdırın Möhtəşəm Mətn. Həm Mac, həm də PC üçün versiyaları var və pulsuzdur.

Niyə daha yaxşıdır? Digər şeylər arasında, HTML faylının sintaksisini rəngləndirəcəkdir. Yəni HTML etiketlərinizi mətn məzmunundan, etiket parametrlərindən və digər dəyərlərdən vizual olaraq fərqləndirəcəkdir. Əsasən, hamısı oxunacaqdır. Budur, sadə HTML quruluşumuz Sublime Text-də necə görünür:

HTML və CSS ilə bir veb sayt yaratarkən üstün sintaksis əladır

Tamam, yenidən mövzuya. Yenisini götürə bilərsiniz indeks.html faylınızı, veb serverinizin əsas qovluğunun olduğu yerə kopyalayın və sonra veb brauzer vasitəsilə gedərək həmin səhifəyə baxın. Buna baxmayaraq çox həyəcanlanmayın; bu səhifə olduqca çirkin olacaq (aşağıya bax).

bu səhifə çirkindir

Tamam, səhifəni çirkin, necə etmək olmaz?

3. CSS seçiciləri ilə tanış olun

HTML-nin etiketləri olduğu kimi, CSS də var seçicilər.

Seçicilər verilmiş elementin xarici görünüşü ilə necə davranacağını təsvir edir. CSS seçicisinə bir nümunə:

p {
şrift ölçüsü: 18px;
}

Bu seçici bütün HTML olduğunu göstərir

sənəd daxilində etiketlər 18px ölçülü bir şriftə sahib olacaqdır.

Bununla birlikdə, CSS seçicilərindən istifadə etməyin daha praktik bir yolu, müəyyən bir üsluba görə bütün tip etiketləri məhdudlaşdırmaq deyil, fərqli “siniflər” yaratmaq və onları etiketlərə bir-bir təyin etməkdir..

Məsələn, CSS-də sinif seçicisi belə görünür:

.normal mətn {
şrift ölçüsü: 18px;
}

Nöqtəyə diqqət yetirin (.) sinif adından əvvəl (normal mətn). “Normal mətn” sinfi təyin edildikdə, indi bu sinifi, ölçüsü 18px etmək istədiyimizi xüsusi HTML yazılarına təyin edə bilərik..

Misal üçün:

Bu mətn 18px olacaq.

Yuxarıdakı CSS kodunun həmin elementinin bütün elementlərini izah etmək üçün bir dəqiqə daha davam edək:

  • .normal mətn – sinif tərifi; sinif adından sonra və açılan və bağlanan mötərizələr arasındakı hər şey {} bu sinfə təyin edilmiş elementlərin necə görünəcəyini müəyyənləşdirir
  • şrift ölçüsü – nümunə CSS mülkiyyəti
  • 18px – əmlaka verilən dəyər

Yuxarıda göstərilənlərdən başqa bir ton CSS xüsusiyyətləri var şrift ölçüsü. Budur tam siyahı maraqlansan.

4. Birlikdə bir CSS üslub cədvəlini qoyun

HTML sənəd çox quruluşludur – hər elementin öz yeri var və elementlərin sırası, veb səhifənin son qurulması və görünüşü üçün çox vacibdir. CSS sənədi daha azdır.

CSS sənədlərinə çox vaxt deyilir üslub cədvəlləri. Əsasən, CSS üslub cədvəli, müvafiq HTML sənədində istifadə olunan bütün sinif təriflərinin siyahısıdır. Sinif təriflərinin qaydası çox vaxt vacib deyildir (ən azı sadə dizaynlar üçün).

Bir CSS üslub cədvəlini bir yerə qoymağınız, hər sinfi bir-bir müəyyənləşdirmək və sonra səhifə dizaynındakı nəticə istədiyinizi yoxlamaqdır..

Bu yorucu iş kimi səslənir və belədir.

Ancaq işinizi asanlaşdıracağıq və HTML və CSS dizaynını əl ilə öyrənməyə məcbur etməyəcəyik. Hər şeyi sıfırdan öyrətmək əvəzinə, canlı bir orqanizmi götürüb onun elementlərini parçalayacağıq.

Bootstrap adlı bir şeyin işə girdiyi yer budur.

5. Bootstrap yükləyin / quraşdırın

Bootstrap HTML və CSS ilə veb sayt yaratmaq üçün açıq mənbəli bir vasitədir.

Düz İngilis dilində, Bootstrap HTML sənədinin əsas quruluşuna və CSS üslub cədvəlinə diqqət yetirir. Veb səhifənizin əsas iskala hazırlığını və sonrakı inkişafı üçün optimallaşdırıldığını təmin edən bir çərçivə təqdim edir..

Əsasən, Bootstrap sıfırdan başlamamağa və bunun əvəzinə əyləncəli hissəyə keçməyə imkan verir. Bununla, HTML və CSS ilə veb sayt yaratmağın tez-tez darıxdırıcı erkən mərhələlərində işləmək lazım deyil.

Götürə biləcəyiniz iki yol var:

  • Seçim (a): Bootstrapı öyrənin – Bootstrap səhifəsinə keçin, əsas Bootstrap paketini yükləyin və üstündə qurulmağa başlayın.
  • Seçim (b): qısa yol alın – yaxşı görünüşlü dizayn və artıq qurulmuş bir demo veb səhifəsi olan Bootstrap üçün bir başlanğıc paketi əldə edin..

Seçim (a) əvvəlində bir öyrənmə əyrisi ola bilər, ancaq HTML və CSS ilə veb sayt yaratmağa yaxınlaşmaq heç bir şəkildə pis deyil. Əsas Bootstrap quruluşunu mənimsədikdən sonra yeni səhifələr yaratmaq və onları istədiyiniz kimi göstərməyiniz asanlaşa bilər. The Çəkmə sənədləri bu yola başlamaq üçün əla bir yerdir.

Seçimlə gedəcəyik (b) bu təlimat üçün. Bunu bir neçə səbəbə görə edirik, bunların rəhbəri:

Hazır bir quruluşdan başlamağınız, HTML sənədinin əsas ehtiyaclarını anlamağa çalışarkən çox ağrıdan xilas olur. Bu, maraqlı materiallara diqqət yetirməyə imkan verir – məzmunu düzəltmək və gözəl görünmək kimi.

Bir sözlə, hər şeyi bu şəkildə öyrənmək, istədiyinizi təxmin etdiyimiz nəticəni daha sürətli bir nəticə verəcəkdir.

6. Dizayn seçin

HTML və CSS ilə veb sayt yaratarkən istədiyiniz hər hansı bir Bootstrap şablonunu istifadə etməkdə azadsınız. Hamısı eyni dərəcədə işləməlidir.

Bununla birlikdə, bu təlimat üçün şablonlardan birini istifadə edəcəyik Çəkməyə başlayın. Optimallaşdırılmış, işsiz və işlənmiş pulsuz şablonların gözəl bir seçimi var.

İstifadə edəcəyimiz mövzu deyilir Yaradıcıdır. Gedəcəyimiz son təsir bu kimi bir şeyə bənzəyəcək:

HTML və CSS ilə veb sayt yaratdıqdan sonra son ana səhifə

Başlamaq üçün, yaradıcı şablon, vurun Pulsuz Yüklə sağdakı düyməni (yandırın) bu səhifə) və zip paketini masaüstünüzə qeyd edin.

Paketi açın və məzmunu yerli veb serverinizin əsas qovluğuna və ya veb hosting hesabınıza köçürün.

İndi veb brauzeriniz vasitəsilə bu yeri açın. Şablonun birja versiyasını görəcəksiniz:

başlanğıc şablonu başlayın

Artıq olduqca görünüşlüdür, amma indi HTML və CSS-dən istifadə etmək istədiyinizi dəqiqləşdirmək üçün vaxt gəldi..

7. Veb saytınızı HTML və CSS ilə düzəldin

Əvvəlcə dizaynın ana səhifəsində işləyək. Bu, qrafikləri, mətnləri necə əvəz edəcəyimizi və ümumiyyətlə hər şeyi düzəltməyimizi göstərmək üçün gedir.

Bir HTML sənədinin baş hissəsi haqqında qısa bir şəkildə danışdıq. Burada daha dərindən araşdıraq.

Açanda indeks.html Bootstrap saytınızın Sublime Text-dəki faylı, başlıq kimi bir bölmə görərsiniz (aydınlıq gətirmək üçün bütün vacib olmayan şeyləri bu koddan çıxartdıq *):






Yaradıcı - Başlatma mövzusuna başlayın





* Yuxarıda göstərilənlərdən başqa, Google Fonts, Font Zəhmli nişanlar və səhifədə görüntülənən şəkillər üçün bir işıq qutusu modulu yükləmək üçün kod da var idi.

Buradakı bəyannamələrin çoxunu artıq bilirik, amma bir neçə yenisi var:

  • Əvvəlcə hər şey arasında mötərizədə bir HTML şərhidir. Son səhifədə görünmür.
  • – bu Bootstrapın öz elan etiketlərindən biridir. Veb saytın görünmə yerinin ölçüsünü müəyyənləşdirir.
  • – bu xətt yaradıcı şablonun CSS üslub cədvəlini yükləyir və eyni zamanda Bootstrap-ın standart üslub cədvəlini özündə cəmləşdirir..

Daha sonra işləməyi asanlaşdırmaq üçün bu son bəyannaməni – CSS-i yükləyən xətti dəyişdirək.

O xətti dəyişdirin:


Bu yalnız kiçik bir fərqdir – eyni CSS hesabatının qısaldılmamış versiyasını yükləyəcəkdir. Bu versiyanı dəyişdirmək sadəcə asandır.

İndi ən aşağı hissəsinə aşağı diyirləyin indeks.html fayl. Bağlanmadan dərhal sonra aşağıdakı sətirləri görəcəksiniz bədən etiket:

        

Dizaynın daha vizual qarşılıqlı əlaqələrini idarə edən JavaScript sənədlərinin yüklənməsi üçün məsuliyyət daşıyırlar. Məsələn, vurduğunuz zaman Haqqında yuxarı menyudakı linkdən, eyni səhifədəki bloka maneəsiz keçəcəksiniz – bu digər şeylər arasında JavaScript vasitəsi ilə edilir. Bu kodu anlamaqda çətinlik çəkməyimizə ehtiyac yoxdur. Bunu başqa bir müddət buraxaq.

Bunun əvəzinə səhifəmizə öz məzmunumuzu əlavə etmək üçün çalışaq:

8. Məzmun və Şəkillər əlavə edin

Etmək istədiyiniz ilk şey səhifənin başlığını dəyişdirməkdir.

1. Başlığı dəyişdirin

Tapın başlıq baş hissədə etiketləyin və etiketlər arasındakı mətni özünüzə uyğun bir şeyə dəyişdirin:

HTML saytım

2. Qəhrəman Bölməsini dəyişdirin

Qəhrəman bölməsi bu blok dediyimiz şeydir:

qəhrəman bölməsi

İçəridə öz içimizə sahib olmaq çox xoş olar. Bu bloku dəyişdirmək üçün geri qayıdın indeks.html fayl seçin və bu bölməni tapın:

...


...

Daha çox məlumat tapın

Kodun bu bütün bloku qəhrəman hissəsində olanları idarə edir.

Burada yeni etiketlər var:


  • – bu, bütün bu hissənin səhifənin başlığı olduğunu müəyyən edən etiketdir; Bu etiket şəklində bir neçə qardaş və bacı var

    etiket və

    etiket
  • – ümumi bir CSS etiketidir ki, bunun ardından ayrı bir bölmə (aka) var bölmə) HTML sənədində; istifadə edərək səhifədəki fərdi bölmələri vizual olaraq ayırmağı asanlaşdırır

Ayrıca (əvvəllər bildiyimiz) bəzi etiketlərin bir az daha mürəkkəb göründüklərini və çoxsaylı CSS dərsləri təyin etdiklərini də görəcəksiniz. Misal üçün:

...

Təyin olunmuş siniflər

etiket burada mətn-böyük mətn-ağ şrift-çəki-qalın.

Bu siniflər Bootstrap və Creative tema tərtibatçısı tərəfindən yaradılıb. Yaxşı xəbər budur ki, HTML və CSS ilə veb sayt yaratarkən siz də onlardan sərbəst istifadə edə bilərsiniz.

Açıqca, səhifənizin quruluşuna əlavə etdiyiniz hər hansı bir etiketi özünüzə çox sayda sinif təyin etməklə düzəldə bilərsiniz.

Mövcud siniflərin tam siyahısını görmək istəyirsinizsə, əsasını aça bilərsiniz yaradıcı.css olan fayl css Yaradıcılıq mövzusunun alt bölməsi.

Bütün bu sinifləri dərk etmək əvvəlcə qorxulu görünə bilər, amma göründüyündən daha asandır.

Məsələn, bizim bəzi paraqraflara təyin olunan siniflərdən biri indeks.html sənəddir şrift-çəki-yüngül. Siz atladığınız zaman yaradıcı.css fayl və ctrl + f bu sinif adını axtarırsan, bunun sadəcə təyin etdiyini görərsən şrift çəkisi kimi parametr

.font-weight-light {
şrift çəkisi: 300;
}

Defolt mətnlərin dəyişdirilməsi indeks.html fayl çox sadədir. Redaktə etmək istədiyiniz etiketi tapın və açılış və bağlama etiketləri arasında olanları dəyişdirin.

Məsələn, əsas başlığı dəyişdirmək üçün bunu dəyişdirin:

Sənin sevimlin ...

Aşağıdakı kimi bir şeyə:

HTML veb saytımı heyran edin!

Səhifədəki bütün bəndlərə və digər yazılara eyni şeyi edə bilərsiniz.

Əhəmiyyətli olan budur ki, sərbəst olaraq yeni abzaslar da əlavə edə bilərsiniz. Məsələn, səhifədəki paraqrafı götürə bilərik, bir nüsxəsini düzəldə bilərik və orijinal abzasın altına yapışdıra bilərik; kimi:

Bootstrap can başlayın ...

2-ci bənd

İndi diqqətli olan mətnlərlə arxa planda olan şəkli əvəz edək.

Bunu etmək bir az daha mürəkkəbdir, çünki CSS üslub cədvəlinə daxil olmağı və orada dəyişiklik etməyi tələb edir. Göründüyü kimi, HTML kodu Başlıq bölmə, heç bir etiket səhifəyə bir şəkildə hər hansı bir şəkildə şəkil daxil edilməsini göstərmir. Bütün bunlar CSS vasitəsilə edilir.

Kodun işlənməsinin bütün blokuna başqa bir nəzər saldıqda Başlıq bölməsində, deyilən bir sinfə təyin olunduğunu görəcəksiniz başlıq. Bu kod xətti sinif tapşırığını idarə edir:

The başlıq sinif bütün blokun fonunda bir şəkil qoyan biridir.

Qoy açaq yaradıcı.css yenidən sənəd verin və “masthead” sinifini axtarın:

başlıq.masthead {
padding-top: 10rem;
padding-alt: cal (10rem - 72px);
fon: xətti-gradient (aşağıya, rgba (92, 77, 66, 0.8) 0%, rgba (92, 77, 66, 0.8) 100%), url ("../ img / bg-masthead.jpg" );
fon-mövqe: mərkəz;
fon-təkrar: təkrar-təkrar;
background-əlavə: fırladın;
fon ölçüsü: örtük;
}

Bu kod, görüntüyümüzə hər cür xəyali şeylər edir (üst-üstə düşmə, kölgə əlavə etmək və s.), Lakin vacib hissə budur: url ("../ img / bg-masthead.jpg"). Bu fon şəklinin harada tapılacağını göstərən xəttdir. Bu olacaq img alt bölmə.

Bu fon şəklini dəyişdirmək üçün özünüzün hər hansı bir görüntüsünüzü götürün, onu surətinə köçürün img alt bölmə və sonra orijinalın yerinə öz adını kopyalayın və yapışdırın bg-masthead.jpg fayl. Bir sözlə, bunu dəyişdirin: url ("../ img / bg-masthead.jpg") buna: url ("../ img / YOURFILE.jpg").

3. Səhifədəki digər blokları fərdiləşdirin

Siz keçmək kimi indeks.html fayl, səhifədə artıq çox sayda bölmənin olduğunu görəcəksiniz. Biz üçün bir bölmə var naviqasiya, və haqqında bir blok, bəziləri xidmətlər, a portfeli, a fəaliyyətə çağırış, a əlaqə blok və a altbilgi.

Bütün bu bölmələrdə fərqli məzmun mövcud olsa da, bölmələrin özü də quruluşa bənzəyir. Hamısında təxminən eyni HTML etiketləri var – yalnız onlara təyin olunmuş fərqli CSS sinifləri.

Səhifəni ehtiyaclarınıza uyğun şəkildə dəyişdirməyin ən yaxşı yolu, blokları tək-tək gəzmək və ətrafdakıları dəyişdirərək təcrübə aparmaqdır.

Mətnləri dəyişdirməkdən əlavə, bütün bölmələri ətrafındakı (arasında olan hissələr) hərəkət edə bilərsiniz

etiketlər). Əlbəttə ki, bunu əl ilə etməlisiniz (elementləri kəsib sonra yerə yapışdıraraq), bunu etmək hələ də düzdür.

Bununla əlaqədar hələ danışmadığımız iki əsas dəyişiklik var. Gəlin bunları əhatə edək:

9. İncə rənglər və şriftlər

Rəngləri və ya şriftləri dəyişdirmək HTML və CSS-də etmək çox asandır. Görə biləcəyiniz ən sadə şey, HTML etiketinə bəzi in-line üslubu təyin etməkdir. Misal üçün:

Qırmızı mətn

HTML-də rənglər hex dəyərləri ilə təmsil olunur; “# FF0000” qırmızıdır. Budur bütün digər bir masa standart rənglər.

Rəngləri təyin etmək üçün daha yaxşı bir yol, CSS üslub cədvəli vasitəsilə bunu etməkdir. Məsələn, yuxarıdakı kodla eyni effekti əldə etmək üçün bunu CSS üslub cədvəlimizdə yerləşdirə bilərik:

p.red {
rəng: # FF0000;
}

Və sonra əsas sənəddə aşağıdakı HTML kodu istifadə edin:

Qırmızı mətn

Bu ikinci üsul əsasən işlərin Bootstrap-da necə aparılmasından ibarətdir.

Səhifədəki hər hansı bir mətnin rəngini dəyişdirmək üçün əvvəlcə həmin mətnin dizaynına cavab verən etiketi tapın və sonra tərz cədvəlinə daxil olun və müvafiq sinfə dəyişiklik edin və ya yeni bir sinif yaradın.

Bir nümunə; “Xidmətinizdə” deyərək başlıq rəngini dəyişdirmək istədiyinizi söyləyin. Hal hazırda qara rəngdədir və bu kodla işləmə qaydası belədir:

Xidmətinizdədir

Rəngini dəyişdirmək üçün ən yaxşı yol deyək ki, yeni bir sinif yaratmaqdır, .mətn-narıncı və orada rəng dəyərini təyin et, məsələn:

.mətn-narıncı {
rəng: # f4623a! vacib;
}

* Bu !vacibdir bu rəng parametrinin əvvəldən gələn hər hansı digər rəng parametrlərini yazacağına əmin olacaq.

İndi başlığımıza qayıda və kodunu dəyişdirə bilərik:

Xidmətinizdədir

Bu dəyişikliklərlə başlıq indi narıncı olacaq:

narıncı h2

Şrifti və ölçüsünü dəyişdirmək üçün çox oxşar bir şey edə bilərsiniz. Ancaq əvvəlcə bir yazı tərifi blokunun CSS-də göründüyü nümunə:

.SOMECLASS {
font-ailə: "Merriweather", Roboto, sans-serif;
şrift ölçüsü: 18px;
}
  • şriftləri yükləyin Merriweather, Roboto, və bir sistem-default sans-serif şrift (veb-təhlükəsiz şriftlər haqqında məlumat əldə etmək üçün oxuyun)
  • şriftin ölçüsünü 18px-a təyin edin

Bu cür tərif, rəng tərifi kimi hər hansı bir CSS sinfinə yerləşdirilə bilər. Əslində şrift və rəng tərifləri çox vaxt eyni sinif bəyannamələrində olur.

Əvvəlki nümunəmizə qayıdaraq, “Xidmətinizdə” deyən başlıq üçün şrift ölçüsünü dəyişdirmək üçün əvvəlcə bu kimi bir sinif yarada bilərik:

.mətn-xxl {
şrift ölçüsü: 50px;
}

Və sonra bu sinfi başlığa təyin edin:

Xidmətinizdədir

B Bootstrap hazırlanmış şablonunuzdakı rəngləri və şriftləri dəyişdirərkən əvvəlcə alternativ ölçülər və ya rənglər verə biləcək siniflər üçün CSS üslub cədvəlinə baxın. Mövcud olanları istifadə edin.

10. Əlavə səhifələr yaradın

İndi ana səhifənizi düzəldin, əlavə səhifələrdə işləməyə başlamağın və onları ana səhifəyə bağlamağın vaxtı gəldi.

HTML və CSS ilə veb sayt yaratarkən istənilən sayda alt səhifəni qura və sonra hamısını birləşdirə bilərsiniz.

Ən çox veb saytın ehtiyac duyduğu bəzi ümumi səhifələr:

  • səhifə haqqında
  • əlaqə
  • portfeli
  • məhsullar / xidmətlər
  • komanda
  • siyasətlər (məxfilik siyasəti, şərtlər və s.)

1. Layout ilə başlayın

Yeni bir veb səhifə qurarkən, ilk qərarınız, düzenin olmasını istəməyinizdir.

HTML və CSS ilə bir veb sayt yaratarkən heç bir şey sənətkarlığınızı dayandırmır nəysə istədiyiniz layout. Yeganə çətinlik əslində bir yerə qoymaqdır.

Boş ekrandan başlayanda HTML və CSS ilə işləmək çətin ola bilər, buna görə də burada Bootstrap istifadə edəcəyik. Əvvəlcə sizə plan hazırlamağın bəzi prinsiplərini göstərəcəyik və sonra bunu Bootstrap ilə necə edəcəyinizi göstərəcəyik.

Veb səhifənizin tərtibatını düşünə biləcəyiniz yol, onu fərdi blokların ardıcıllığı hesab etməkdir – birini digərinin üstündədir. Bu kimi bir şey (dörd fərqli bloka diqqət yetirin):

HTML və CSS ilə veb sayt yaratarkən nizam

Bootstrap’ın ən yaxşı tərəfi, bu blokları doğru yerlərə qoymağınıza diqqət yetirməyiniz üçün sizin əsas quruluş prinsiplərinizi və görünüş detallarınızı idarə etməsidir..

Təlimatın bu hissəsində yeni “haqqında” səhifə hazırlayırıq.

Başlamaq üçün, yalnız layoutun ən əsas layihəsini hazırlayacağıq. Yuxarıdakı kimi bir şey.

  • yuxarıda naviqasiya menyusu var,
  • menyunun altındakı tam genişlikdə bir başlıq bloku,
  • ortada əsas məzmun bölməsi, ekranın ortasında qutu (geniş deyil),
  • və altbilgi.

İndi bu düzeni HTML-də quraq.

2. Yeni səhifə yaradın

Yeni bir səhifədə işə başlamağın ən asan yolu, mövcud bir səhifəni kopyalamaq və şablon kimi istifadə etməkdir. Bunu edəcəyik.

Bir surətini yaradın indeks.html faylını dəyişdirin və adını dəyişin haqqında.html.

Səhifələrin bu erkən mərhələdə ayırd edilməsini asanlaşdırmaq üçün yenisini düzəldin haqqında.html sənədləşdirin və içərisində olanı dəyişdirin </code> etiket. Misal üçün, <code><title>Mənim haqqımda.

İndi sənəd xətti ilə xətt boyunca keçək və nəyi tərk edəcəyimizi və nəyi sökəcəyimizə qərar verək:

  • The naviqasiya menyu (aşağıda ). Yəqin ki, naviqasiya təcrübəsini bütün səhifələrdə vahid hala gətirmək üçün bu bölməni qorumaq istərdiniz.
  • The əsas qəhrəman bölmə (aşağıda ). Layihə layihəmizə görə bizə ehtiyac olmayacaq. Gedib bütün hissəni silə bilərsiniz.
  • The haqqında bölmə (aşağıda ). Bu bölümdən əsas başlıq blokumuz kimi istifadə edəcəyik.
  • The xidmətlər bölmə, portfeli bölmə, fəaliyyətə çağırış bölmə, və əlaqə bölmə (arasındakı hər şey ). Bu hissələrə ümumiyyətlə ehtiyacımız yoxdur. Daha qabağa gedib onları silə bilərsiniz.
  • The altbilgi bölmə və onun altındakı hər şey (aşağıda ). Bunu saxlamaq lazımdır.

Bu, hazırkı kodumuzu olduqca sadə hala gətirir. Əsasən yalnız budur:



























Burada itkin olduğumuz şey budur əsas məzmun bölmə. Qurmaq üçün təxminən bölmədən yenidən istifadə edəcəyik.

Gedin və təxminən bölmə bir nüsxəsini hazırlayın. Bu bir:

...


...

İndi ilk iki satırı dəyişdirin:

Ehtiyac olmadığımız üçün

başlıq orada və


element, yalnız çıxarın. Bütün bu blokun içərisində qalan tək şey mətn abzası olacaqdır. Kimi:

Mətnin bir abzası.

Faylı saxladığınızda və brauzerinizdən istifadə etdiyiniz zaman əsasən eyni rəngli fonda digərinin altında iki oxşar oxşar blokun olduğunu görürsünüz:

səhifə başlığı haqqında

Əsas məzmun hissəsində ağ bir fonun olması daha yaxşıdır. Onu dəyişdirmək üçün etməli olduğumuz yeganə şey silinməlidir bg-ibtidai əsasdan sinif

etiket. Başqa sözlə, etiketi bu hala gətirin:

Bu daha yaxşıdır:

səhifə başlığı haqqında 2

Səhifəyə bir az daha çox doldurmaq üçün bir neçə dummy abzas əlavə edək.

Lorem ipsum dolor amet oturur, adipiscing elit...

Zülal fermenti, felis müvəqqəti faretra lobortis...

Subhead

Lorem ipsum dolor amet oturur, adipiscing elit...

Budur səhifədəki görünüş:

təxminən 1 ver

Mətnin mərkəzləşdirilməsini istəmirsinizsə, sadəcə çıxarın mətn mərkəzi birindən sinif

etiketlər.

təxminən 2 ver

Bu mətn bloklarına daha çox qüsur qoymaq istəyirsinizsə, yeni CSS dərsləri (əvvəlki kimi) yarada və onları blokdakı paraqraflara təyin edə bilərsiniz. Və ya, mövcud üslub cədvəlinə nəzər sala və bu məqsəd üçün artıq hansı siniflərin olduğunu görə bilərsiniz. Budur, təyin etdiklərimiz

etiketlər:

Lorem ipsum dolor oturmaq amet...

Zülal fermenti, felis müvəqqəti faretra lobortis...

Subhead

Və təsiri budur:

təxminən 3 ver

Burada edəcəyimiz daha bir şey səhifənin bir yerində şəkil əlavə etməkdir.

Budur, HTML-də nümunə şəkli etiketi necə görünür:


Olduqca sadə, elə deyilmi? Oradakı yeganə parametr görüntü faylına gedən yoldur. Şeyi yaxşı təşkil etmək üçün, görünüşünüzü içinizə qoya bilərsiniz img qovluğu yenidən (bir müddət əvvəl bu fonda etdiyiniz kimi). Bu vəziyyətdə görüntü etiketi:


Bu konfiqurasiyada təsvir etiketi olduqca məhduddur. Biraz daha mükəmməlləşdirmək üçün bir neçə Bootstrap siniflərini təyin edək. Xüsusilə:


Bu iki sinif şəklinizi yuvarlaq künclərə bəxş edəcək və görüntünün ölçüsünün oturduğu blokun ölçüsündən çox olmadığına əmin olacaq.

Artıq səhifənizin əsas məzmun bölməsinə bu kimi bir etiket əlavə edə bilərsiniz. Məsələn, burada:

Lorem ipsum dolor oturmaq amet...

Zülal fermenti, felis müvəqqəti faretra lobortis...

Subhead

Və səhifədəki son təsir:

təxminən 4 ver

Şöhrət içərisində səhifəmiz budur:

səhifə tamamlandı

3. Yeni səhifəyə keçid

Yeni səhifə hazırlandıqdan sonra onu ana səhifədən (və.) Əlaqələndirək indeks.html fayl). Təbii ki, bu linki əlavə etmək üçün ən yaxşı yer naviqasiya menyusundadır (aşağıda) ).

Xüsusilə, bu xətti axtarın:

Haqqında

Bunu buna dəyişdirəcəyik:

Haqqında

Bu, hələ danışmadığımız bir şeydir, amma etiket HTML-də bir etiket etiketidir. Ondan istifadə edərək, həmin səhifənin ünvanını təmin etməklə istənilən veb səhifəyə qoşula bilərsiniz href parametr. Bağlantının mətni – linkin tıklanabilir hissəsi – açılış və bağlanış arasındakı mətn olacaqdır etiketlər.

İndi ana səhifəni yenilədikdə, səhifənizi göstərən yeni linkinizi görəcəksiniz.

Əlavə oxu:

Bu mərhələdə əsasən özünüzü iki səhifədən ibarət sadə bir veb sayt yaratdınız – a ana səhifə və bir haqqında səhifə.

İndi nə etməlisiniz, yeni səhifələr yaratmaq, düzəltmək, onlara məzmun əlavə etmək və sonra naviqasiya menyusundan hər şeyi əlaqələndirməklə yuyun və təkrarlayın.

Bu addımlardan keçməyiniz üçün lazım olan digər şeylər HTML və CSS prinsiplərini daha da öyrənmək, yoxlama siyahısından keçmək və həmçinin Bootstrap və onun strukturlarını və siniflərini öyrənməkdir. Bunun üçün bəzi mənbələr:

  • HTML5 fırıldaqçı vərəqi
  • CSS fırıldaqçı vərəqi
  • Javascript fırıldaqçı vərəqi
  • HTML dərsliyi
  • Çəkmə təlimatı
  • Çəkmə fırıldaqçı vərəqi

Bootstrapı mənimsəmək, çox güman ki, HTML və CSS ilə optimallaşdırılmış və gözəl veb saytlar qurmaq üçün ən yaxşı yol.

HTML və CSS ilə veb sayt yaratmaqla bağlı hər hansı bir sualınız varsa, şərhlərdə təqdim etməkdən çəkinməyin.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me