Si të kodoni një faqe në internetDëshironi të mësoni se si të krijoni një faqe në internet me HTML dhe CSS?


Ju jeni në vendin e duhur. Në këtë udhëzues, ne ju tregojmë të gjitha hapat për të marrë nga një ekran bosh në një uebfaqe pune që është e optimizuar dhe mjaft e mirë në të njëjtën kohë.

Por së pari, çfarë është HTML dhe CSS?

Epo, ju thjesht mund të shikoni të dy termat në Wikipedia, por ato përkufizime nuk janë shumë miqësore për lexuesit. Le t’i thjeshtojmë gjërat pak:

  • HTML (Hypertext Markup Language) përcakton strukturën dhe përmbajtjen e një faqe në internet – ku gjërat shkojnë, si ata janë shtruar, dhe çfarë është në faqe
  • CSS (Sheets Style Cascading) përcakton styling / Prezantimi të një faqe në internet dhe elementet në të

Ju nuk mund të keni me të vërtetë pa tjetrën – të dy punojnë së bashku për të përbërë faqen e fundit, modelin e saj dhe përmbajtjen që është në të.

Shënim; kur themi “një faqe në internet”, ajo që duam të themi është një dokument i vetëm HTML – një faqe e vetme që është pjesë e faqes suaj të internetit. Ndërsa, “një faqe në internet” është gjëja e plotë – e tërë faqja juaj me të gjitha faqet e saj individuale të internetit.

Si të krijoni një faqe në internet duke përdorur HTML dhe CSS (tabela e përmbajtjes):

  1. Mësoni bazat e HTML
  2. Kuptoni strukturën e dokumentit HTML
  3. Njihuni me përzgjedhësit CSS
  4. Vendosni një fletë stili CSS së bashku
  5. Merrni Bootstrap
  6. Zgjidh një model
  7. Rregulloni faqen tuaj te internetit me HTML dhe CSS
  8. Shtoni përmbajtje dhe imazhe
  9. Ngjyra dhe shkronja të sakta
  10. Krijoni faqe shtesë

Koha totale për të krijuar një faqe në internet: 4-5 orë
Niveli i aftësive: i ndërmjetëm

Nëse mendoni se kjo është shumë e ndërlikuar, ju rekomandojmë të krijoni një uebfaqe duke përdorur WordPress ose të zgjidhni një prej krijuesve të faqes në internet. Ju gjithashtu mund të shikoni një listë të IDE më të mirë të zgjedhur për zhvillimin e uebit. 

Contents

Para se të filloni, mbledhni burimet tuaja:

Pra, gjëja e parë që ju nevojitet edhe përpara se të krijoni një faqe në internet me HTML dhe CSS është një server në internet (pritje). Mos u shqetëso, sidoqoftë; nuk keni pse të blini makinën tuaj. Shumë kompani të mbajtjes së faqes në internet do t’ju shesin një shërbim të thjeshtë pritës në makinat e tyre. Thjesht google për “web hosting” dhe zgjidh diçka që nuk është shumë e kushtueshme.

Me serverin e renditur, gjëja tjetër që ju nevojitet është një emër domain. Emri i domain është ajo që faqja e internetit është identifikuar në internet. Për shembull, emri i domain-it të kësaj faqe është websitesetup.org.

Kur të keni një emër domain dhe një server, ju mund t’i lidhni të dy së ​​bashku.

Shpalosje e plotë: Ne fitojmë një komision nëse përfundoni blerjen e Bluehost përmes lidhjeve tona të referimit në këtë udhëzues. Kjo na ndihmon të mbajmë faqet e internetitSetup dhe të funksionojnë dhe azhurnuar. Faleminderit per mbeshtetjen.

Për ta zgjidhur këtë pa dhimbje në fund, ju rekomandojmë të regjistroheni me një kompani si Bluehost.

Ata do të trajtojnë të gjitha rregullimet për ju. Do të thotë që ata do të: (A) vendosni një llogari pritjeje për ju, (B) regjistroni një emër domaini në emrin tuaj, (C) konfiguroni gjithçka për të punuar së bashku, dhe (D) t’ju japin mundësinë e një kontrolli të lehtë për t’u përdorur.

Shkoni përpara dhe regjistrohuni Bluehost, ne do të presim Kur riktheheni dhe serveri juaj i konfiguruar dhe i gatshëm për të shkuar, shkoni te hapi tjetër.

P.S. Nëse thjesht doni të eksperimentoni me një faqe në internet në kompjuterin tuaj, dhe nuk keni ndërmend ta bëni atë publik, përdorni një softuer lokal të serverit në internet. Ai që ne rekomandojmë dhe na pëlqen ta përdorim quhet XAMPP. Ka versione si për Mac ashtu edhe për PC, dhe është i lehtë për t’u përdorur. këtu është një udhëzues se si ta instaloni atë në kompjuterin tuaj.

1. Mësoni Bazat e HTML

Elementi kryesor i një strukture HTML është një HTML etiketë.

Një etiketë, për shembull, duket si kjo:

DIÇKA

Këtu kemi të bëjmë me një tag. Ky do guximtar një pjesë e tekstit që është midis etiketës së hapjes () dhe etiketa përmbyllëse (). Në këtë rast, ajo pjesë e tekstit është DIÇKA.

Por ka edhe etiketa të tjera, vetëm për të përmendur disa:

  • ... do të italizojë tekstin midis etiketave hapëse dhe mbyllëse
  • ... do ta nënvizojë atë
  • ...

    është një paragraf i tekstit


  • ...

    është titulli kryesor në faqe

Përveç atyre etiketave të thjeshta, ka edhe etiketa më komplekse. Për shembull, nëse doni të ndërtoni një listë si në vijim:

  • Pika 1
  • Pika 2
  • Pika 3

… Ju mund ta bëni atë me kodin e mëposhtëm HTML:

  • Pika 1
  • Pika 2
  • Pika 3

Ose, nëse doni të shtoni një lidhje në një faqe tjetër, si kjo:

Kjo është një lidhje në faqen tonë

… Ju mund ta bëni atë me këtë kod kodi:

Kjo është një lidhje në faqen time

Lexoni këtë për të marrë lista e plotë e etiketave HTML. Do të bëhet e dobishme pasi krijoni një faqe në internet me HTML dhe CSS.

2. Kuptoni strukturën e dokumentit HTML

Mendoni për faqen tuaj HTML sikur të ishte ndërtuar nga Legos. Ju vendosni tulla të ndryshme mbi njëra-tjetrën për të përfunduar me një strukturë të dhënë më të madhe.

Por në vend të tullave Lego, ju merrni etiketat HTML…

Këtu është struktura më e thjeshtë e dokumentit HTML:





Përshendetje Botë!


Përshendetje Botë!

Faqja ime e parë në internet.

Ju mund ta merrni kodin më lart, ta kopjoni dhe ngjitur në një skedar të ri, ruajeni dokumentin si index.html, dhe do të jetë një faqe HTML e përkryer e vlefshme.

Le të shpjegojmë pjesët individuale të këtij kodi:

  • – Deklarata fillestare e dokumentit
  • – një deklaratë tjetër; thotë se ajo që do të vij më pas është një dokument HTML i shkruar në anglisht
  • – shënon fillimin e kokë seksioni; kokë Seksioni është aty ku shkojnë të gjithë parametrat bazë të faqes; shumica e tyre nuk do të shfaqen në ekran; ata thjesht përcaktojnë se çfarë po ndodh nën kapuç
  • – përcakton se çfarë karakteri është përdorur për të shkruar dokumentin; nuk ka nevojë të shpenzoni shumë kohë për këtë; thjesht përdorni këtë deklaratë siç është
  • Përshendetje Botë! – titulli i faqes; kjo është ajo që njerëzit do të shohin në shiritin e titullit të shfletuesve të tyre, p.sh .:

titull në shfletuesin e uebit kur krijoni një faqe në internet me HTML dhe CSS

  • – shënon fillimin e trup seksioni; kjo është ajo ku shkon e gjithë përmbajtja e faqes; është pjesa kryesore e një dokumenti HTML; le ta theksojmë këtë, kjo pjesë është ajo ku do të përfshini të gjithë përmbajtjen që synohet të shfaqet në faqe

  • Përshendetje Botë!

    – titulli kryesor në faqe

  • Faqja ime e parë në internet.

    – një paragraf i thjeshtë i tekstit

  • – etiketa përmbyllëse e të gjithë dokumentit HTML

Një shënim i rëndësishëm këtu. Puna në një skedar HTML në një aplikacion bazë të tekstit ose një procesor kompleks tekstesh si MS Word nuk është një përvojë e mirë. Për t’i lehtësuar gjërat vetë, instaloni një mjet të quajtur Teksti sublim. Ka versione si për Mac ashtu edhe për PC, dhe është falas.

Pse është më mirë? Ndër të tjera, ajo do të ngjyrosë sintaksën e një skedari HTML. Do të thotë, do të dallojë vizualisht etiketat tuaja HTML nga përmbajtja e tekstit, parametrat e etiketave dhe vlerat e tjera. Në thelb, të gjitha do të bëhen të lexueshme. Ja si duket struktura jonë e thjeshtë HTML në Tekstin Sublime:

Sintaksa sublime është e shkëlqyeshme kur krijoni një faqe në internet me HTML dhe CSS

Mirë, përsëri në temë. Ju mund ta merrni atë të re index.html skedarin tuaj, kopjojeni atë ku gjendet direktoria kryesore e serverit tuaj të internetit, dhe më pas shihni atë faqe duke lundruar në të përmes një shfletuesi të internetit. Mos u emociononi shumë; kjo faqe do të jetë mjaft e shëmtuar (shiko më poshtë).

kjo faqe është e shëmtuar

Në rregull, kështu që faqja është e shëmtuar, si ta bëjmë jo ashtu?

3. Njihuni me Zgjedhësit CSS

Ashtu si HTML ka etiketat e saj, CSS ka Selectors.

Zgjedhësit përshkruajnë se si një element i caktuar duhet të sillet i mençur nga pamja. Këtu është një shembull i një përzgjedhësi CSS:

p {
madhësia e fontit: 18px;
}

Ky përzgjedhës tregon që të gjithë HTML

etiketat brenda dokumentit do të kenë një madhësi fonti 18px.

Sidoqoftë, një mënyrë më praktike për të përdorur zgjedhësit CSS nuk është që të kufizoni të gjitha etiketat e një lloji të caktuar në një stil të caktuar, por përkundrazi të krijoni “klasa” të ndryshme dhe t’i caktoni ato në etiketa një nga një..

Për shembull, një përzgjedhës klasash në CSS duket si ky:

.teksti normal {
madhësia e fontit: 18px;
}

Vini re pikën (.) para emrit të klasës (normal-text). Me klasën “tekst me tekst” të përcaktuar, ne tani mund ta caktojmë atë klasë në ato etiketa HTML specifike që duam të bëjmë 18px në madhësi.

Për shembull:

Ky tekst do të jetë 18px.

Le të bëjmë një minutë më shumë për të shpjeguar të gjithë elementët e asaj pjese të kodit CSS më lart:

  • .normal-text – përkufizimi i klasës; gjithçka pas emrit të klasës dhe midis kllapave hapëse dhe mbyllëse {} përcakton se si do të duken elementët e caktuar në këtë klasë
  • përmasa e germave – një pronë e CSS-së
  • 18px – një vlerë e caktuar në pronë

Ekziston një ton i pronave CSS, përveç sa më sipër përmasa e germave. Ja lista e plotë nëse je kurioz.

4. Vendosni së bashku një fletë shkrimi CSS

Një dokument HTML është shumë strukturor – çdo element ka vendin e vet, dhe rendi i elementeve është thelbësor për ndërtimin përfundimtar dhe paraqitjen e faqes në internet në fjalë. Një dokument CSS është shumë më pak.

Dokumentet CSS shpesh përmenden si Stylesheets. Në thelb, një fletë stili CSS është një listë e të gjitha përkufizimeve të klasës që janë duke u përdorur në dokumentin përkatës HTML. Rendi i përkufizimeve të klasës nuk është aq i rëndësishëm në shumicën e kohës (të paktën për dizajne të thjeshta).

Mënyra se si vendosni një fletë stile CSS së bashku është duke përcaktuar secilën klasë një nga një, dhe pastaj të testoni nëse rezultati në hartimin e faqes tuaj është ajo që keni dashur.

Kjo tingëllon si punë e lodhshme, dhe është.

Por ne do t’i bëjmë gjërat më lehtë, dhe nuk do t’ju detyrojmë të mësoni me dorë hartimin HTML dhe CSS. Në vend që t’ju mësojmë gjithçka nga e para, ne do të marrim një organizëm të gjallë dhe do t’i shpërndajmë elementët e tij.

Kjo është ajo ku një gjë e quajtur Bootstrap hyn në lojë.

5. Shkarkoni / Instaloni Bootstrap

Bootstrap është një paketë mjetesh me burim të hapur për krijimin e një faqe në internet me HTML dhe CSS.

Në anglisht të thjeshtë, Bootstrap kujdeset për strukturën themelore të një dokumenti HTML dhe fletën e stilit CSS për ju. Ajo siguron një kornizë që siguron që skela kryesore e faqes tuaj të internetit është e gatshme dhe e optimizuar për zhvillim të mëtutjeshëm.

Në thelb, Bootstrap ju lejon të mos filloni nga e para, dhe përkundrazi të shkoni drejt në pjesën argëtuese. Me të, nuk duhet të punoni në fazat e hershme shpesh të mërzitshme të krijimit të një faqe në internet me HTML dhe CSS.

Ka dy rrugë që mund të merrni:

  • alternativë (A): mësoni Bootstrap – shkoni te faqja fillestare e Bootstrap, shkarkoni paketën kryesore të Bootstrap dhe filloni ndërtimin në krye të saj.
  • alternativë (B): merrni një shkurtore – merrni një paketë fillestare për Bootstrap me një dizajn të bukur dhe një faqe demo të krijuar tashmë.

alternativë (A) mund të ketë një kurbë mësimi në fillim, por nuk është në asnjë mënyrë mënyra më e keqe për t’iu qasur krijimit të një uebsajti me HTML dhe CSS. Sapo të zotëroni strukturën bazë të Bootstrap, mund të jetë më e lehtë për ju të ndërtoni faqe të reja dhe t’i bëni ato të duken ashtu siç dëshironi ato. Dokumentacioni i Bootstrap është një vend i shkëlqyeshëm për të filluar me këtë rrugë.

Ne do të shkojmë me Opsionin (B) për këtë udhëzues. Ne po e bëjmë këtë për disa arsye, shefi i tyre:

Fillimi me një strukturë të gatshme kursen shumë dhimbje në përpjekjen për të kuptuar nevojat themelore të një dokumenti HTML. Kjo ju lejon të përqendroheni në gjërat interesante – si të vendosni përmbajtje dhe ta bëni atë të duket e mirë.

Me pak fjalë, të mësuarit e gjërave në këtë mënyrë do t’ju japë një rezultat më të shpejtë duke kërkuar, i cili supozojmë se është ajo që dëshironi.

6. Zgjidh një model

Kur po krijoni një faqe në internet me HTML dhe CSS, jeni i lirë të përdorni çdo model Bootstrap që ju pëlqen. Ata të gjithë duhet të punojnë në mënyrë të barabartë.

Sidoqoftë, për këtë udhëzues, ne do të përdorim një prej shablloneve nga Filloni Bootstrap. Ata kanë një përzgjedhje të këndshme të modeleve falas, të cilat janë të optimizuara, pa probleme pa probleme, dhe gjithashtu janë të dizajnuara shumë mirë.

Tema që do të përdorim quhet Krijues. Efekti përfundimtar për të cilin ne do të duket diçka e tillë:

faqja fillestare përfundimtare pasi të krijoni një faqe në internet me HTML dhe CSS

Për të filluar, modeli Creative, klikoni në Shkarko falas butoni që është në të djathtë (në kjo faqe) dhe ruajeni paketën zip në desktopin tuaj.

Zhbllokoni paketën dhe zhvendosni përmbajtjen e saj në drejtorinë kryesore të serverit tuaj lokal lokal ose llogarinë tuaj të hostimit.

Tani hapeni atë vendndodhje përmes shfletuesit tuaj të internetit. Do të shihni versionin e aksioneve të modelit:

filloni modelin e bootstrap

Tashmë është mjaft mirë, por tani është koha të mësoni se si të përdorni HTML dhe CSS për t’i bërë ato pikërisht në atë që dëshironi të jetë.

7. Rregulloni faqen tuaj te internetit me HTML dhe CSS

Le të punojmë së pari në faqen kryesore të dizajnit. Kjo do të na tregojë se si të zëvendësojmë grafikat, tekstet dhe të akordojmë gjithçka në përgjithësi.

Ne kemi folur për pjesën kryesore të një dokumenti HTML pak më lart. Le ta hedhim një vështrim më të thelluar këtu.

Kur hapni index.html skedarin e faqes suaj të Bootstrap në Sublime Text, do të shihni një pjesë të tillë si kjo (ne kemi hequr të gjitha gjërat jo të rëndësishme nga ky kod për qartësi *):






Creative - Filloni Tema Bootstrap





* Përveç sa më sipër, ekzistonte gjithashtu një kod për të ngarkuar Fonts Google, ikona të Font Awesome dhe një modul të kutisë së dritës për imazhet e shfaqura në faqe.

Shumica e deklaratave këtu ne tashmë i dimë, por ka disa të reja:

  • Së pari, gjithçka midis kllapa është një koment HTML. Nuk shfaqet në faqen përfundimtare.
  • – është një nga etiketat e deklaratave të Bootstrap. Përcakton madhësinë e pamjes së faqes së internetit.
  • – kjo linjë ngarkon fletën e stilit CSS të shabllonit Creative dhe gjithashtu strehon fletën e stilit të parazgjedhur të Bootstrap.

Le ta modifikojmë atë deklaratë të fundit – linjën që ngarkon CSS – për ta bërë më të lehtë punën me vone.

Ndryshoni atë rresht në:


Ky është vetëm një ndryshim i vogël – do të ngarkojë versionin jo të shkurtuar të të njëjtës fletë CSS. Ky version është thjesht më i lehtë për tu modifikuar.

Tani lëvizni poshtë në fundin e index.html file. Do të shihni rreshtat e mëposhtëm menjëherë para mbylljes trup tag:

        

Ata janë përgjegjës për ngarkimin e skedarëve JavaScript që trajtojnë disa nga ndërveprimet më vizuale të dizajnit. Për shembull, kur klikoni në për lidhje në menunë e sipërme, do të çoheni lehtësisht në bllokun në të njëjtën faqe – kjo, ndër të tjera, bëhet përmes JavaScript. Nuk kemi nevojë të shqetësohemi për të kuptuar këtë kod tani. Le ta lëmë këtë për një herë tjetër.

Në vend të kësaj, le të punojmë për të shtuar përmbajtjen tonë në faqe:

8. Shtoni përmbajtjen dhe imazhet

Gjëja e parë që do të doni të bëni është të ndryshoni titullin e faqes.

1. Ndryshoni Titullin

Gjej titull shënoni në seksionin e kokës dhe zëvendësoni tekstin midis etiketimeve në diçka tuajin:

Siti im HTML

2. Rregulloni Seksionin Hero

Seksioni hero është ajo që ne e quajmë këtë bllok:

seksioni i heroit

Do të ishte mirë të kishim përmbajtjen tonë brenda tij. Për të modifikuar këtë bllok, kthehuni tek tuaj index.html skedar dhe gjeni këtë pjesë:

...


...

Zbulo me shume

Ky bllok i tërë kodi kontrollon ato që janë në seksionin e heroit.

Ka disa etiketa të reja këtu:


  • – kjo është një etiketë që përcakton që e gjithë kjo pjesë është titulli i faqes; kjo etiketë ka një çift vëllezër dhe motra në formën e

    etiketim dhe

    etiketë
  • – është një etiketë e përgjithshme CSS që tregon se ajo që vijon është një seksion i veçantë (aka) ndarje) në dokumentin HTML; duke përdorur atë e bën më të lehtë dallimin e seksioneve individuale në faqe vizualisht

Do të vini re gjithashtu se disa nga etiketat e tjera (të cilat ne tashmë i dimë) duken të jenë pak më komplekse, me klasa të shumta CSS të caktuara për to. Për shembull:

...

Klasat e caktuara në

tag këtu është teksti me shkronja të mëdha-font të bardhë-peshë të theksuar.

Këto klasa janë krijuar nga Bootstrap dhe nga zhvilluesi i Temës Creative. Lajmi i mirë është që edhe ju mund t’i përdorni lirisht kur krijoni një faqe në internet me HTML dhe CSS.

Sinqerisht, ju mund të rregulloni çdo etiketë që i shtoni strukturës së faqes tuaj duke caktuar çdo numër klasash në të.

Nëse doni të shihni listën e plotë të klasave në dispozicion, mund të hapni kryesorin creative.css skedar që është në css nëndrejtorinë e temës Krijuese.

Të kuptosh të gjitha këto klasa mund të duket frikësuese në fillim, por në të vërtetë është më lehtë sesa duket.

Për shembull, njëra nga klasat e caktuara për disa nga paragrafët në tonë index.html skedari është shkrimit-pesha-drita. Kur hidheni në creative.css skedar dhe ctrl + f duke kërkuar atë emër të klasës, do të shihni që ai thjesht përcakton shkrimit-pesha parametër si kështu:

.dritë font-peshe {
pesha e shkronjave: 300;
}

Modifikimi i teksteve të paracaktuar në index.html skedari është shumë i thjeshtë. Thjesht gjeni etiketën që dëshironi të redaktoni dhe ndryshoni ato që janë midis etiketave hapëse dhe mbyllëse.

Për shembull, për të ndryshuar titullin kryesor, thjesht ndryshoni këtë:

E preferuara jote ...

Për diçka si në vijim:

Admironi faqen time të internetit HTML!

Mund të bëni të njëjtën gjë me të gjitha paragrafët dhe etiketat e tjera në faqe.

Ajo që është e rëndësishme është që ju gjithashtu mund të shtoni paragrafë të rinj lirshëm. Për shembull, ne mund të marrim paragrafin që është tashmë në faqe, të bëjmë një kopje të tij dhe ta ngjisim menjëherë nën paragrafin origjinal; si keshtu:

Filloni Bootstrap mund ...

Paragrafi 2

Tani, me tekstet e kujdesur, le të zëvendësojmë imazhin që është në sfond.

Kjo është pak më e komplikuar për të bërë pasi kërkon që ne të futemi në skedarin e stilit CSS dhe të bëjmë modifikimin atje. Siç mund ta shihni në kodin HTML të kre direku seksion, asnjë etiketë nuk do të tregonte përfshirjen e një imazhi në faqe në çfarëdo mënyre. E gjitha kjo bëhet përmes CSS.

Kur hidhni një vështrim tjetër, në bllokun e tërë të trajtimit të kodit kre direku seksion, do të shihni se është caktuar në një klasë të quajtur kre direku. Kjo linjë kodesh trajton detyrën e klasës:

kre direku klasa është ajo që vendos një imazh në sfondin e tërë bllokut.

Le ta hapim creative.css paraqit përsëri dhe kërko klasën “kryetarin”:

header.masthead {
mbushje e sipërme: 10rem;
mbushje-fund: llog (10rem - 72px);
sfond: gradient linear (në fund, rgba (92, 77, 66, 0.8) 0%, rgba (92, 77, 66, 0.8) 100%), url ("../ img / bg-masterhead.jpg" );
sfond-pozicioni: qendër;
sfond-përsëritje: pa përsëritje;
sfond-shtojcë: lëviz;
madhësia e sfondit: mbulesë;
}

Ky kod i bën të gjitha llojet e gjërave të zbukuruara në imazhin tonë (si shtimi i një mbivendosjeje, hije, etj.), Por pjesa e rëndësishme është kjo: url ( "../ img / bg-masthead.jpg"). Kjo është linja që tregon se ku mund të gjeni imazhin e sfondit. Do të jetë në IMG subdirectory.

Për të ndryshuar këtë imazh të sfondit, merrni ndonjë imazh të tuajin, kopjoni atë në IMG nëndrejtori dhe më pas kopjoni dhe ngjitni emrin e tij në vend të origjinalit bg-masthead.jpg file. Me pak fjalë, ndryshoni këtë: url ( "../ img / bg-masthead.jpg") për këtë: url ( "../ IMG / YOURFILE.jpg").

3. Rregulloni Blloqet e Tjera në Faqe

Ndërsa kaloni nëpër index.html skedar, do të vini re se ka shumë seksione të ndryshme tashmë në faqe. Ne kemi një seksion për lundrim, dhe për një bllok, disa shërbimet, një portofol, një thirrje për veprim, një kontakt bllok, dhe a futboll.

Ndërsa ka përmbajtje të ndryshme në të gjitha këto seksione, vetë seksionet janë të ngjashme në strukturë. Të gjithë kanë afërsisht të njëjtin grup të etiketave HTML – klasa të ndryshme CSS të caktuara për ta.

Mënyra më e mirë për të modifikuar faqen për t’iu përshtatur nevojave tuaja është të kaloni nëpër blloqe një nga një dhe të eksperimentoni duke ndryshuar gjëra përreth.

Përveç modifikimit të teksteve, mund të lëvizni edhe seksione të tëra (pjesët ndërmjet

tags). Dhënë, ju duhet ta bëni atë me dorë (duke prerë dhe pastaj ngjitur elementët në vend), është akoma e thjeshtë të bëhet.

Me këtë të thënë, ekzistojnë dy modifikime mjaft themelore për të cilat nuk kemi folur ende. Le t’i mbulojmë këto në vazhdim:

9. Ngjyrat dhe fontet e rregullta

Ndryshimi i ngjyrave ose shkronjave është shumë i thjeshtë për tu bërë në HTML dhe CSS. Gjëja më e thjeshtë që mund të bëni është të caktoni disa stilim në linjë në një etiketë HTML. Për shembull:

Teksti i kuq

Në HTML, ngjyrat përfaqësohen nga vlerat e tyre hex; “# FF0000” është e kuqe. Këtu është një tabelë e të gjitha të tjerave ngjyra standarde.

Një mënyrë më e mirë për të caktuar ngjyrat është ta bëni atë përmes fletës së stilit CSS. Për shembull, për të marrë të njëjtin efekt me kodin e mësipërm, ne mund ta vendosim këtë në fletën tonë të stileve CSS:

p.red
ngjyra: # FF0000;
}

Dhe pastaj përdorni dokumentin vijues të kodit HTML në dokumentin kryesor:

Teksti i kuq

Kjo metodë e dytë është në thelb mënyra se si gjërat bëhen në Bootstrap.

Për të ndryshuar ngjyrën e çdo teksti në faqe, së pari gjeni etiketën përgjegjëse për styling atë tekst, dhe pastaj shkoni në fletën e stilit dhe modifikoni klasën përkatëse, ose krijoni një klasë të re.

Këtu është një shembull; thoni që dëshironi të ndryshoni ngjyrën e kokës duke thënë “Në shërbimin tuaj”. Aktualisht, është e zezë, dhe ky është kodi që e trajton:

Në shërbimin Tuaj

Për të ndryshuar ngjyrën e saj, mënyra më e mirë është krijimi i një klase të re të quajtur, të themi, .text-portokalli dhe vendosni vlerën e ngjyrave atje, si kështu:

.tekst-portokall {
ngjyra: # f4623a! e rëndësishme;
}

* Të !i rëndësishëm do të sigurohet që kjo përcaktim ngjyrash të mbishkruaj çdo cilësim tjetër ngjyrash që erdhi para tij.

Tani, mund të kthehemi te titulli ynë dhe ta ndryshojmë kodin e tij në:

Në shërbimin Tuaj

Me këto ndryshime, header tani do të jetë portokalli:

portokalli h2

Për të ndryshuar fontin dhe madhësinë e tij, mund të bëni diçka shumë të ngjashme. Por së pari, një shembull i asaj se si duket një bllok i përcaktimit të fontit në CSS:

.SOMECLASS
font-familje: "Merriweather", Roboto, sans-serif;
madhësia e fontit: 18px;
}
  • shkronjat e ngarkesës Merriweather, Roboto, dhe një parazgjedhje e sistemit sans-serif font (lexoni këtë për të mësuar rreth shkronjave të sigurta në internet)
  • vendosni madhësinë e shkronjave në 18px

Ky lloj përkufizimi mund të vendoset në çdo klasë CSS, ashtu si përkufizimi i ngjyrave. Në fakt, përkufizimet e shkronjave dhe të ngjyrave shpesh gjenden në të njëjtat deklarata të klasës.

Duke iu rikthyer shembullit tonë të mëparshëm, për të ndryshuar madhësinë e shkronjave për atë titull që thotë “Në Shërbimin Tuaj”, së pari mund të krijonim një klasë si kjo:

.tekst-xxl
madhësia e fontit: 50px;
}

Dhe pastaj caktoni këtë klasë në kokë:

Në shërbimin Tuaj

Kur ndryshoni ngjyrat ose shkronjat në shabllonin tuaj të bërë nga Bootstrap, së pari shikoni nëpër fletën e stilit CSS për klasa që mund t’ju ofrojnë tashmë madhësi ose ngjyra alternative. Përdorni ato ku është e mundur.

10. Krijoni faqe shtesë

Tani që e keni personalizuar faqen kryesore, është koha të filloni të punoni në disa faqe shtesë dhe pastaj t’i lidhni ato në faqen kryesore..

Kur krijoni një uebfaqe me HTML dhe CSS, mund të ndërtoni çdo numër nën-faqesh dhe pastaj t’i lidhni të gjitha së bashku.

Këtu janë disa nga faqet e zakonshme që u nevojiten më shumë faqeve të internetit:

  • rreth faqes
  • kontakt
  • portofol
  • produkteve / shërbimeve
  • ekip
  • politikat (politika e privatësisë, termat, etj.)

1. Filloni me Layout

Kur ndërtoni një faqe të re në internet, vendimi i parë që duhet të bëni është ajo që dëshironi që modelimi të jetë.

Kur krijoni një faqe në internet me HTML dhe CSS, asgjë nuk po ju ndalon të punoni cfaredo faqosja që ju dëshironi Vështirësia e vetme është në fakt mbledhja e saj.

HTML dhe CSS mund të jenë të vështira për t’u marrë kur filloni nga një ekran bosh, kështu që ne do të përdorim këtu edhe Bootstrap. Së pari, ne do t’ju tregojmë disa parime të hartimit të një plan urbanistik dhe pastaj të demonstrojmë se si ta bëni atë me Bootstrap.

Mënyra si mund të mendoni për paraqitjen e faqes suaj të internetit është ta konsideroni atë një sekuencë të blloqeve individuale – një në krye të tjetrës. Diqka e tillë (vini re katër blloqet e dallueshme):

paraqitja kur krijoni një faqe në internet me HTML dhe CSS

Gjëja më e mirë për Bootstrap është se ajo merret me parimet themelore të paraqitjes dhe detajet e paraqitjes për ju, në mënyrë që të mund të përqendroheni vetëm në vendosjen e atyre blloqeve në vendet e duhura.

Në këtë pjesë të udhëzuesit, ne do të krijojmë një faqe të re “rreth”.

Për të filluar, ne do të krijojmë vetëm një projekt shumë themelor të paraqitjes. Diqka si ajo më lart.

  • ka një menu navigimi në krye,
  • një bllok titull me gjerësi të plotë nën menu,
  • pjesa kryesore e përmbajtjes në mes, e boksuar në qendër të ekranit (jo me gjerësi të plotë),
  • dhe një footer.

Tani le ta ndërtojmë këtë plan urbanistik në HTML.

2. Ndërtoni një faqe të re

Mënyra më e lehtë për të filluar punën në një faqe të re është të kopjoni një faqe ekzistuese dhe ta përdorni atë si një shabllon. Kjo është ajo që ne do të bëjmë.

Krijoni një kopje të index.html skedar dhe riemërojeni atë about.html.

Vetëm për t’i bërë faqet më të thjeshta për t’u dalluar në këtë fazë të hershme, modifikoni të ri about.html skedar dhe ndrysho ato që janë në </code> tag. Për shembull, <code><title>Rreth meje.

Tani le të kalojmë nëpër rreshtin e skedarëve rresht dhe vendosim se çfarë do të lëmë dhe çfarë do të heqim:

  • lundrim menuja (më poshtë) ). Ju ndoshta dëshironi ta mbani të paprekur këtë seksion, vetëm për ta bërë përvojën e lundrimit të njëtrajtshme në të gjitha faqet.
  • heroi kryesor seksioni (më poshtë ). Ky nuk do të na duhet sipas projektit tonë të paraqitjes. Ju mund të shkoni përpara dhe të fshini të gjithë seksionin.
  • për seksioni (më poshtë ). Ne do të ripërdorim këtë pjesë si bllokun tonë kryesor të titullit.
  • shërbimet seksion, portofol seksion, thirrje për veprim seksion, dhe kontakt seksion (gjithçka midis dhe ). Ne nuk kemi nevojë për këto seksione fare. Ju mund të shkoni përpara dhe t’i fshini ato.
  • futboll seksion dhe gjithçka poshtë tij (më poshtë ). Këtë do të duhet ta mbajmë.

Kjo e bën kodin tonë aktual mjaft të thjeshtë. Në thelb është vetëm kjo:



























Gjëja që na mungon këtu është përmbajtja kryesore seksioni. Për ta ndërtuar atë, ne do të ripërdorim pjesën për të.

Shkoni përpara dhe bëni një kopje të seksionit për. Këtë:

...


...

Tani ndryshoni dy rreshtat e parë në këtë:

Meqenëse ne nuk na duhet

header atje dhe


element, le t’i heqim vetëm. E vetmja gjë që mbetet brenda këtij blloku do të jetë një paragraf i tekstit. Si kështu:

Një paragraf teksti.

Kur e ruani skedarin dhe lundroni në të përmes shfletuesit tuaj, do të shihni që në thelb keni dy blloqe shumë të ngjashme njëra poshtë tjetrës, me të njëjtën sfond ngjyrash:

në lidhje me kokën e faqes

Do të jetë më mirë të keni një sfond të bardhë në pjesën kryesore të përmbajtjes. Për ta ndryshuar atë, e vetmja gjë që duhet të bëjmë është të heqim bg-fillore klasa nga kryesore

tag. Me fjalë të tjera, bëni etiketimin në këtë:

Kjo eshte më mirë:

në lidhje me kokën e faqes 2

Le të shtojmë disa paragrafë të poshtër në faqe për ta populluar edhe më shumë, plus ndoshta një nën-kokë:

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

Fermentimi i parë, felis përkohshëm pharetra lobortis, magna quam hendrerit dolor...

nëntitull

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

Ja si duket kjo në faqe:

rreth ver 1

Nëse nuk ju pëlqen që teksti të përqendrohet, thjesht hiqni text-Qendra klasa nga njëra prej

tags.

rreth ver 2

Nëse dëshironi të vendosni një dhunti tjetër në këto blloqe teksti, mund të krijoni klasa të reja CSS (si më parë) dhe t’i caktoni ato në paragrafët në bllok. Ose, mund të shikoni në fletën e tanishme të stileve dhe të shihni se cilat klasa janë tashmë atje për këtë qëllim. Këtu janë ato që i kemi caktuar

dhe

tags:

Lorem ipsum dolor sit amet...

Fermentimi i parë, felis përkohshëm pharetra lobortis, magna quam hendrerit dolor...

nëntitull

Dhe këtu është efekti:

rreth ver 3

Një gjë tjetër që do të bëjmë këtu është të shtojmë një imazh diku në faqe.

Ja si duket një etiketë imazhi në HTML:


Mjaft e thjeshtë, apo jo? Parametri i vetëm atje është shtegu drejt skedarit të figurës. Për t’i mbajtur gjërat mirë të organizuara, mund ta vendosni imazhin tuaj IMG drejtori përsëri (ashtu si keni bërë me atë sfond pak kohë më parë). Në një rast të tillë, etiketa e figurës do të jetë:


Duke u thënë kështu, etiketa e figurës në këtë konfigurim të veçantë është mjaft e kufizuar. Për ta bërë atë pak më të rafinuar, le t’i caktojmë disa klasë Bootstrap. veçanërisht:


Këto dy klasa do t’i japin imazhit tuaj qoshe të rrumbullakosura dhe gjithashtu do të sigurohen që madhësia e figurës nuk tejkalon madhësinë e bllokut ku ai ulet.

Tani mund të shtoni një etiketë si kjo diku në pjesën kryesore të përmbajtjes së faqes suaj. Për shembull, këtu:

Lorem ipsum dolor sit amet...

Fermentimi i parë, felis përkohshëm pharetra lobortis, magna quam hendrerit dolor...

nëntitull

Dhe këtu është efekti përfundimtar në faqe:

rreth ver 4

Ja faqja jonë për tërë lavdinë e saj:

rreth faqes të plotë

3. Lidhje me faqen e re

Me faqen e re të bërë, le ta lidhim tani nga faqja kryesore ( index.html file). Natyrisht, vendi më i mirë për të shtuar këtë lidhje është në menunë e navigimit (më poshtë) ).

Në veçanti, shikoni për këtë linjë:

për

Ne do ta ndryshojmë atë në këtë:

për

Kjo është diçka për të cilën nuk kemi folur ende, por etiketa është një etiketë lidhëse në HTML. Duke përdorur atë, ju mund të lidheni me çdo faqe në internet duke siguruar adresën e asaj faqe në href parametër. Teksti i lidhjes – pjesa e klikueshme e lidhjes – do të jetë teksti midis hapjes dhe mbylljes tags.

Kur rifreskoni faqen kryesore tani, do të shihni lidhjen tuaj të re që tregon faqen në lidhje me.

Leximi më tej:

Në këtë fazë, ju keni ndërtuar vetë një uebsajt të thjeshtë i përbërë nga dy faqe – a Faqe Hyrëse dhe një për faqe.

Ajo që duhet të bëni tani është pije dhe përsëritje duke krijuar faqe të reja, akordimi i tyre, shtimi i përmbajtjes në to dhe më pas lidhja e gjithçkaje nga menyja e lundrimit.

Gjëra të tjera që ia vlen të bëni ndërsa po kaloni këto hapa është të mësoni më tej parime HTML dhe CSS, të kaloni nëpër listën e kontrollit dhe gjithashtu të mësoni Bootstrap dhe strukturat dhe klasat e tij. Disa burime për këtë:

  • Fletë mashtrimi HTML5
  • Fletë mashtrimi CSS
  • Fletë mashtrimesh Javascript
  • Udhëzues HTML
  • Udhëzues bootstrap
  • Fletë mashtruese bootstrap

Mastering Bootstrap, ka shumë të ngjarë rrugën më të mirë aktualisht në dispozicion për ndërtimin e faqeve të internetit të optimizuara dhe të bukura me HTML dhe CSS.

Nëse keni ndonjë pyetje në lidhje me krijimin e një faqe në internet me HTML dhe CSS, mos hezitoni t’i paraqisni ato në komente.

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