Hvernig á að kóða vefsíðu

Hvernig á að kóða vefsíðuLangar að læra hvernig á að búa til vefsíðu með HTML og CSS?


Þú ert á réttum stað. Í þessari handbók sýnum við þér öll skrefin til að komast frá tóman skjá að vinnandi vefsíðu sem er bjartsýn og er alveg ágæt á sama tíma.

En fyrst hvað er HTML og CSS?

Jæja, þú gætir bara flett upp báðum hugtökunum á Wikipedia, en þessar skilgreiningar eru ekki mjög lesendavænar. Við skulum einfalda hlutina aðeins:

  • HTML (Hypertext Markup Language) skilgreinir uppbyggingu og innihald vefsíðu – hvar hlutirnir fara, hvernig þeir eru lagðir út, og hvað er á síðunni
  • CSS (Cascading Style Sheets) skilgreinir stíl / kynningu af vefsíðu og þætti þess

Þú getur í raun ekki haft einn án hinna – þessar tvær vinna saman að því að búa til loka vefsíðuna, hönnun hennar og innihaldið sem er á henni.

Athugið; þegar við segjum „vefsíðu“ er átt við eitt HTML skjal – ein síða sem er hluti af vefsíðunni þinni. En „vefsíða“ er heill hluturinn – öll vefsíðurnar þínar með öllum einstökum vefsíðum.

Hvernig á að búa til vefsíðu með HTML og CSS (efnisyfirlit):

  1. Lærðu grunnatriði HTML
  2. Skilja uppbyggingu HTML skjals
  3. Kynntu þér CSS valmenn
  4. Settu CSS sniðmát saman
  5. Fáðu stígvél
  6. Veldu hönnun
  7. Sérsníddu vefsíðuna þína með HTML og CSS
  8. Bættu við efni og myndum
  9. Fínstilla litina og letrið
  10. Búðu til viðbótar síður

Heildartími til að búa til vefsíðu: 4-5 klukkustundir
Kunnátta stig: Millistig

Ef þér finnst þetta of flókið mælum við með að annað hvort stofna vefsíðu með WordPress eða velja einn af byggingarsíðum vefsíðunnar. Þú getur líka skoðað lista yfir valda bestu IDE fyrir þróun vefsins. 

Contents

Áður en þú byrjar skaltu safna saman auðlindum þínum:

Það fyrsta sem þú þarft jafnvel áður en þú býrð til vefsíðu með HTML og CSS er vefþjónn (hýsing). Ekki hafa áhyggjur; þú þarft ekki að kaupa þína eigin vél. Mörg hýsingarfyrirtæki munu selja þér einfalda hýsingarþjónustu á vélum sínum. Bara að google fyrir „vefþjónusta“ og velja eitthvað sem er ekki of dýrt.

Þegar miðlarinn er flokkaður er það næsta sem þú þarft lénsheiti. Lénið er það sem vefsíðan er auðkennd á vefnum. Sem dæmi er lén lénsins websitesetup.org.

Þegar þú ert bæði með lén og netþjón, geturðu tengt þetta tvennt saman.

Full upplýsingagjöf: Við vinnum þóknun ef þú endar að kaupa Bluehost í gegnum tilvísunartengla okkar í þessari handbók. Þetta hjálpar okkur að halda WebsiteSetup í gangi og uppfæra. Þakka þér fyrir stuðninginn.

Við mælum með að skrá þig hjá fyrirtæki eins og til að fá þetta úr vegi án verkja Bluehost.

Þeir munu sjá um allar uppsetningar fyrir þig. Sem þýðir að þeir munu: (a) settu upp hýsingarreikning fyrir þig, (b) skráðu lén fyrir þína hönd, (c) stilla allt til að vinna saman, og (d) veitir þér aðgang að stjórnborðinu sem auðvelt er að nota.

Fara á undan og skráðu þig Bluehost, við munum bíða. Þegar þú ert kominn aftur og hefur vefþjóninn þinn stillanlegan og tilbúinn til að fara, flettu að næsta skrefi.

P.S. Ef þú vilt bara gera tilraunir með HTML vefsíðu á tölvunni þinni, og ætla ekki að gera það opinbert, notaðu staðbundinn netþjónshugbúnað. Sá sem við mælum með og finnst gaman að nota heitir XAMPP. Það er með útgáfur fyrir bæði Mac og PC, og það er auðvelt í notkun. Hérna leiðarvísir um hvernig á að setja það upp á tölvuna þína.

1. Lærðu grunnatriði HTML

Uppistaðan í HTML uppbyggingu er HTML merki.

Merki lítur til dæmis svona út:

EITTHVAÐ

Hér erum við að fást við a merki. Þessi mun djörf texti sem er á milli opnunarmerkisins () og lokunarmerkið (). Í þessu tilfelli er þessi texti EITTHVAÐ.

En það eru önnur merki, bara til að nefna nokkur:

  • ... mun skáletra textann milli opnunar- og lokunarmerkjanna
  • ... mun undirstrika það
  • ...

    er málsgrein textans


  • ...

    er aðalhaus á síðunni

Burtséð frá þessum einföldu merkjum eru líka flóknari merkingar. Til dæmis, ef þú vilt byggja lista eins og eftirfarandi:

  • 1. liður
  • 2. liður
  • 3. liður

… Þú getur gert það með eftirfarandi HTML kóða:

  • 1. liður
  • 2. liður
  • 3. liður

Eða, ef þú vilt bæta við hlekk á aðra síðu, eins og þessa:

Þetta er hlekkur á heimasíðuna okkar

… Þú getur gert það með þessum kóða:

Þetta er hlekkur á heimasíðuna mína

Lestu þetta til að fá allur listi yfir HTML tags. Það mun verða gagnlegt þegar þú ert að búa til vefsíðu með HTML og CSS.

2. Skilja uppbyggingu HTML skjala

Hugsaðu um HTML síðuna þína eins og hún væri byggð af Legos. Þú setur mismunandi múrsteina ofan á annan til að enda með gefið stærra skipulag.

En í stað Lego múrsteina færðu HTML tags…

Hér er einfaldasta uppbygging HTML skjals:





Halló heimur!


Halló heimur!

Fyrsta vefsíðan mín.

Þú getur tekið kóðann hér að ofan, afritað og límt hann í nýja skrá, vistað skjalið sem index.html, og það mun verða fullkomlega gild HTML síðu.

Við skulum útskýra einstaka hluta þessa kóða:

  • – fyrstu yfirlýsing skjalsins
  • – önnur yfirlýsing; segir að það sem koma skal næst er HTML skjal skrifað á ensku
  • – markar upphaf höfuð kafla; the höfuð hlutinn er þar sem farið er yfir allar grunnfæribreytur síðunnar; flestir þeirra ætla ekki að verða sýndir á skjánum; þeir skilgreina bara hvað er að gerast undir hettunni
  • – skilgreinir hvaða stafasett er notað til að skrifa skjalið; engin þörf á að eyða of miklum tíma í þetta; notaðu bara þessa yfirlýsingu eins og hún er
  • Halló heimur! – titill síðunnar; þetta er það sem fólk mun sjá á titilstöng vafra sinna, td .:

titil í vafra þegar stofnað er vefsíðu með HTML og CSS

  • – markar upphaf líkami kafla; þetta er þar sem allt innihald síðunnar fer; það er megin hluti HTML skjals; við skulum leggja áherslu á þetta, þessi hluti er þar sem þú ætlar að vera með allt það efni sem er ætlað að birtast á síðunni

  • Halló heimur!

    – aðalhaus á síðunni

  • Fyrsta vefsíðan mín.

    – einföld málsgrein

  • – lokunarmerki alls HTML skjalsins

Mikilvæg athugasemd hér. Það er ekki góð reynsla að vinna að HTML skjali í grunntextaforriti eða flóknum textavinnsluaðila eins og MS Word. Til að gera hlutina auðveldan með sjálfum þér skaltu setja upp tól sem kallast Háleitar texti. Það hefur útgáfur fyrir bæði Mac og PC, og það er ókeypis.

Af hverju er það betra? Meðal annars mun það lita setningafræði HTML skjals. Sem þýðir að það munir greina HTML merkin þín frá textainnihaldi, merkisbreytum og öðrum gildum. Í grundvallaratriðum verður þetta allt læsilegt. Svona lítur einföld HTML uppbygging okkar út í Sublime Texti:

háleita setningafræði er frábært þegar þú býrð til vefsíðu með HTML og CSS

Allt í lagi, aftur um efnið. Þú getur tekið það nýja index.html skrá af þér, afritaðu hana þar sem aðalskrá vefþjónsins er og sjáðu þá síðu með því að fletta að henni í gegnum vafra. Ekki verða of spennt; þessi síða verður frekar ljót (sjá hér að neðan).

þessi síða er ljót

Allt í lagi, svo að síðunni er ljót, hvernig á að gera það ekki svo?

3. Kynntu þér CSS valmenn

Rétt eins og HTML hefur merkin sín, þá hefur CSS það val.

Valur lýsir því hvernig tiltekinn þáttur ætti að haga sér útlit. Hér er dæmi um CSS val:

p {
leturstærð: 18px;
}

Þessi valkostur gefur til kynna að allur HTML

merki innan skjalsins munu vera leturstærð 18px.

Hins vegar hagnýtari leið til að nota CSS valara er ekki að takmarka öll merki af tiltekinni gerð við ákveðna stíl, heldur búa til mismunandi „flokka“ og úthluta þeim við merki einn í einu..

Til dæmis lítur bekkjaval í CSS svona út:

.venjulegur-texti {
leturstærð: 18px;
}

Taktu eftir punktinum (.) á undan nafni bekkjarins (venjulegur-texti). Þegar „venjulegur texti“ flokkur er skilgreindur getum við nú úthlutað þeim flokki til þessara sérstöku HTML merkja sem við viljum gera 18px að stærð.

Til dæmis:

Þessi texti verður 18px.

Tökum eina mínútu í viðbót til að útskýra alla þætti þess CSS kóða hér að ofan:

  • .venjulegur-texti – skilgreining á bekknum; allt eftir nafni bekkjarins og milli opnunar og lokunar sviga {} skilgreinir hvernig þeir þættir sem úthlutað er til þessa flokks munu líta út
  • Leturstærð – dæmi um CSS eign
  • 18px – gildi sem úthlutað er eigninni

Það er tonn af CSS eiginleikum fyrir utan það sem að ofan greinir Leturstærð. Hérna er heill listi ef þú ert forvitinn.

4. Settu saman CSS stílblað

HTML skjal er mjög skipulagslegt – sérhver þáttur á sinn stað og röð þátta skiptir sköpum fyrir lokagerð og útlit viðkomandi vefsíðu. CSS skjal er miklu minna.

Oft er vísað til CSS skjala stílblöð. Í grundvallaratriðum er CSS sniðmát listi yfir allar bekkjaskilgreiningar sem eru notaðar í samsvarandi HTML skjali. Röð bekkjaskilgreininganna er ekki það áríðandi (að minnsta kosti fyrir einfaldar hönnun).

Leiðin sem þú setur CSS stílblað saman er með því að skilgreina hvern flokk einn í einu og prófa síðan hvort útkoman í síðuhönnun þinni sé það sem þú vildir.

Þetta hljómar eins og leiðinlegt verk og það er það.

En við munum gera það auðveldara fyrir þig og ekki neyða þig til að læra HTML og CSS hönnun handvirkt. Í stað þess að kenna þér allt frá grunni munum við taka lifandi lífveru og sundra þætti þess.

Þetta er þar sem hlutur sem kallast Bootstrap kemur inn í leikinn.

5. Hladdu niður / settu upp ræsistik

Bootstrap er tól fyrir opinn kóða til að búa til vefsíðu með HTML og CSS.

Á venjulegu ensku sér Bootstrap um grunnskipulag HTML skjals og CSS sniðmáts fyrir þig. Það skilar ramma sem tryggir að aðal vinnupallur vefsíðunnar þinnar sé tilbúinn og bjartsýni til frekari þróunar.

Í grundvallaratriðum, Bootstrap gerir þér kleift að byrja frá grunni og fara í staðinn rétt í skemmtilega hlutanum. Með því þarftu ekki að vinna á oft leiðinlegu fyrstu stigunum við að búa til vefsíðu með HTML og CSS.

Það eru tvær leiðir sem þú getur farið:

  • Valkostur (a): læra Bootstrap – farðu á Bootstrap heimasíðuna, halaðu niður aðal Bootstrap pakkanum og byrjaðu að byggja ofan á hann.
  • Valkostur (b): taktu flýtileið – fáðu byrjunarpakka fyrir Bootstrap með glæsilegri hönnun og kynningu vefsíðu sem þegar er byggð.

Valkostur (a) gæti verið með einhverja námsferil í byrjun, en það er ekki á nokkurn hátt verri leið að nálgast það að búa til vefsíðu með HTML og CSS. Þegar þú hefur náð góðum tökum á kjarna Bootstrap uppbyggingarinnar gæti það verið auðveldara fyrir þig að smíða nýjar síður og láta þær líta nákvæmlega út eins og þú vilt. The Ræsingargögn er frábær staður til að byrja á þessari braut.

Við ætlum að fara með Valkost (b) fyrir þessa handbók. Við erum að gera þetta af nokkrum ástæðum, höfðingi þeirra:

Byrjað er á tilbúinni uppbyggingu og sparar mikinn sársauka þegar reynt er að reikna út nauðsynjar HTML skjals. Þetta gerir þér kleift að einbeita þér að áhugaverðu hlutunum – eins og að setja upp efni og láta það líta vel út.

Í stuttu máli, að læra hlutina með þessum hætti mun gefa þér betri útkomu fljótari, sem við giskum á að er það sem þú vilt.

6. Veldu hönnun

Þegar þú ert að búa til vefsíðu með HTML og CSS er þér frjálst að nota hvaða Bootstrap sniðmát sem þú vilt. Þeir ættu allir að vinna nægilega svipað.

Hins vegar, fyrir þessa handbók, ætlum við að nota eitt af sniðmátunum eftir Ræstu ræsistikuna. Þeir hafa gott úrval af ókeypis sniðmátum sem eru fínstillt, vinna vandræðalaus og eru líka mjög vel hönnuð.

Þemað sem við ætlum að nota heitir Skapandi. Lokaáhrifin sem við erum að fara í munu líta svona út:

endanleg heimasíða eftir að búið var til vefsíðu með HTML og CSS

Til að byrja með, skapandi sniðmát, smelltu á Ókeypis niðurhal hnappinn sem er til hægri (á þessa síðu) og vistaðu zip-pakkann á skjáborðið þitt.

Tafaðu pakkann úr og færðu innihald hans í aðalskrá yfir vefþjóninn þinn eða vefþjónustureikninginn.

Opnaðu nú þann stað í gegnum vafrann þinn. Þú munt sjá lagerútgáfu sniðmátsins:

ræstu sniðmát fyrir ræsingu

Það er nú þegar nokkuð útlit, en nú er kominn tími til að læra að nota HTML og CSS til að gera það að nákvæmlega því sem þú vilt að það verði.

7. Sérsniðu vefsíðuna þína með HTML og CSS

Við skulum vinna fyrst á heimasíðu hönnunarinnar. Þetta mun sýna okkur hvernig á að skipta um grafík, texta og stilla allt upp almennt.

Við höfum talað um höfuðhluta HTML skjals í stuttu máli hér að ofan. Við skulum skoða það nánar hér.

Þegar þú opnar index.html skrá af Bootstrap vefsvæðinu þínu í Sublime Texti, þú sérð haushluta sem þennan (við fjarlægðum öll þau mikilvægu atriði úr þessum kóða fyrir skýrleika *):






Skapandi - Start Bootstrap Theme





* Burtséð frá ofangreindu voru einnig kóða til að hlaða Google leturgerðir, Font Awesome tákn og ljósboxseining fyrir myndirnar sem birtast á síðunni.

Flestar yfirlýsingarnar sem við þekkjum nú þegar, en það eru nokkrar nýjar:

  • Í fyrsta lagi, allt á milli sviga er HTML athugasemd. Það birtist ekki á lokasíðunni.
  • – það er eitt af eigin yfirlýsingamerkjum Bootstrap. Það skilgreinir stærð útsýnis vefsíðunnar.
  • – þessi lína hleður inn CSS sniðmát í skapandi sniðmát og það hýsir einnig sjálfgefna stílsnið Bootstrap.

Við skulum breyta síðustu yfirlýsingu – línunni sem hleður inn CSS – til að auðvelda að vinna með það síðar.

Breyta þeirri línu í:


Þetta er aðeins lítill munur – það mun hlaða útgáfuna sem ekki er stytt á sama CSS blað. Þessari útgáfu er bara auðveldara að breyta.

Skrunaðu nú niður að botni botnsins index.html skjal. Þú munt sjá eftirfarandi línur rétt fyrir lokun líkami merki:

        

Þeir eru ábyrgir fyrir því að hlaða JavaScript skrár sem sjá um fleiri sjónræn samskipti við hönnunina. Til dæmis þegar þú smellir á Um það bil tengilinn í efstu valmyndinni, þá verður þú tekinn með snöggum hætti að ummarkaðri reitnum á sömu síðu – þetta er meðal annars gert með JavaScript. Við þurfum ekki að vanda okkur við að skilja þennan kóða núna. Við skulum láta þetta vera í annan tíma.

Í staðinn skulum við vinna að því að bæta eigin efni okkar við síðuna:

8. Bættu við efni og myndum

Það fyrsta sem þú vilt gera er að breyta titli síðunnar.

1. Breyta titlinum

Finndu titil merktu í höfuðhlutanum og settu textann á milli merkjanna í eitthvað þitt eigið:

HTML síða minn

2. Sérsniðið hetjuhlutann

Hetjuhlutinn er það sem við köllum þennan reit:

hetja hluti

Það væri svalt að hafa okkar eigin efni inni í því. Til að breyta þessum reit, farðu aftur til þín index.html skrá og finndu þennan hluta:

...


...

Finndu Meira út

Allur kóðabálkurinn stjórnar því sem er í hetjuhlutanum.

Hér eru nokkur ný merki:


  • – þetta er merki sem skilgreinir að allur hlutinn sé haus á síðunni; þetta merki hefur nokkra bræður og systur í formi
    merki og
    merki
  • – er almennt CSS merki sem gefur til kynna að það sem á eftir kemur sé sérstakur hluti (aka deild) í HTML skjalinu; með því að nota það er auðveldara að greina á milli hluta á síðunni sjónrænt

Þú munt líka taka eftir því að sum hinna merkjanna (sem við þekkjum nú þegar) líta út fyrir að vera aðeins flóknari, með mörgum CSS flokkum úthlutað þeim. Til dæmis:

...

Námskeiðin sem úthlutað er til

merkið hérna er texti-hástafi texta-hvítur letur-þyngd-feitletrað.

Þessir flokkar eru búnir til af Bootstrap og af hönnuður skapandi þema. Góðu fréttirnar eru þær að þú getur líka notað þær að vild þegar þú býrð til vefsíðu með HTML og CSS.

Í hreinskilni sagt geturðu sérsniðið hvaða merki sem þú bætir við uppbyggingu síðunnar þinna með því að tengja hvaða fjölda flokka sem er.

Ef þú vilt sjá heildarlistann yfir þá flokka sem eru í boði geturðu opnað aðalinn skapandi.css skrá sem er í css undirmöppu Creative þema.

Það getur virst ógnvekjandi í fyrstu að ná tökum á öllum þessum flokkum, en það er í raun auðveldara en það lítur út.

Til dæmis einn flokkurinn sem úthlutað er nokkrum af málsgreinum í okkar index.html skjalið er letur-þyngd-létt. Þegar þú hoppar inn í skapandi.css skrá og ctrl + f Ef þú ert að leita að því nafni bekkjarins, þá sérðu að það einfaldlega setur leturvigt breytu eins og svo:

.letur-þyngd-ljós {
leturþyngd: 300;
}

Að breyta sjálfgefnum textum í index.html skráin er mjög einföld. Finndu bara merkið sem þú vilt breyta og breyttu því sem er á milli opna og loka merkjanna.

Til dæmis, til að breyta aðal fyrirsögn, breyttu bara þessu:

Uppáhalds þinn ...

Til eitthvað eins og eftirfarandi:

Dáist að HTML vefsíðunni minni!

Þú getur gert það sama við allar málsgreinar og önnur merki á síðunni.

Það sem er mikilvægt er að þú getur líka bætt við nýjum málsgreinum að vild. Til dæmis getum við tekið málsgreinina sem er þegar á síðunni, búið til afrit af henni og límt hana rétt fyrir neðan upphaflegu málsgreinina; eins og svo:

Ræstu ræsiforrit ...

2. mgr

Nú, með textana sem gætt er, skulum koma í stað myndarinnar sem er í bakgrunni.

Þetta er aðeins flóknara þar sem það krefst þess að við förum í CSS stílblaðaskrána og gerum breytingarnar þar. Eins og þú sérð í HTML kóða kóða Masthead kafla myndi ekkert merki gefa til kynna að mynd væri innifalin á síðunni á nokkurn hátt. Þetta er allt gert með CSS.

Þegar þú skoðar annað á allan reitinn af kóða sem meðhöndlar Masthead kafla, sérðu að það er úthlutað til bekkjar sem heitir masthead. Þessi kóðalína sinnir bekkjarverkefni:

The masthead bekkur er sá sem setur mynd í bakgrunn allan reitinn.

Við skulum opna skapandi.css skrá aftur og leitaðu að „masthead“ bekknum:

haus.masthead {
padding-toppur: 10rem;
padding-botn: calc (10rem - 72px);
bakgrunnur: línulegt stigfall (til botns, rgba (92, 77, 66, 0,8) 0%, rgba (92, 77, 66, 0,8) 100%), url ("../ img / bg-masthead.jpg" );
bakgrunnur-staða: miðja;
bakgrunnur-endurtaka: engin endurtaka;
bakgrunnur-viðhengi: flettu;
bakgrunnsstærð: kápa;
}

Þessi kóða gerir alls kyns fínt hluti við myndina okkar (eins og að bæta við yfirlag, skygging osfrv.), En mikilvægi hlutinn er þessi: url ("../ img / bg-masthead.jpg"). Þetta er línan sem gefur til kynna hvar eigi að finna bakgrunnsmyndina. Það mun verða í img undirskrá.

Til að breyta þessari bakgrunnsmynd, taktu þína eigin mynd, afritaðu hana á img undirmöppu og afritaðu síðan og límdu nafn þess í stað frumritsins bg-masthead.jpg skjal. Í stuttu máli, breyttu þessu: url ("../ img / bg-masthead.jpg") til þessa: url ("../ img / YOURFILE.jpg").

3. Sérsníddu aðrar blokkir á síðunni

Þegar þú ferð í gegnum index.html skrá, þú munt taka eftir því að það eru fullt af mismunandi hlutum sem þegar eru á síðunni. Við höfum hluta fyrir siglingar, og um blokk, sumir þjónusta, a eignasafn, a ákall til aðgerða, a samband loka, og a fót.

Þó að það sé mismunandi efni í öllum þessum hlutum, eru hlutarnir sjálfir svipaðir í uppbyggingu. Þeir hafa allir nokkurn veginn sama sett af HTML tags – bara mismunandi CSS flokkar sem þeim er úthlutað.

Besta leiðin til að breyta síðunni til að passa þínum þörfum er að fara í gegnum reitina einn í einu og gera tilraunir með því að breyta hlutum í kring.

Burtséð frá því að breyta textunum geturðu einnig fært heilu hlutana um (hlutirnir á milli

merki). Að vísu, þú verður að gera það handvirkt (með því að klippa og líma síðan hluti á sinn stað), það er samt einfalt að gera.

Með því að segja, það eru tvær alveg grundvallarbreytingar sem við höfum ekki talað um enn. Við skulum ná til þeirra næsta:

9. Fínstilla litir og leturgerðir

Það er mjög auðvelt að breyta litum eða letri í HTML og CSS. Einfaldasta hluturinn sem þú getur gert er að tengja HTML stíl við HTML-merki. Til dæmis:

Rauður texti

Í HTML eru litir táknaðir með hex gildi sínu; „# FF0000“ er rautt. Hérna er tafla yfir allt hitt venjulegir litir.

Betri leið til að úthluta litum er að gera það með CSS sniðmátinu. Til dæmis, til að fá sömu áhrif og kóðinn hér að ofan, gætum við sett þetta í CSS stílblað okkar:

p.red {
litur: # FF0000;
}

Og notaðu svo eftirfarandi HTML-kóða í aðalskjalinu:

Rauður texti

Þessi önnur aðferð er í grundvallaratriðum hvernig hlutirnir eru gerðir í Bootstrap.

Til að breyta litnum á hvaða texta sem er á síðunni, finndu fyrst merkið sem ber ábyrgð á því að stíla þann texta og farðu síðan í sniðmátið og breyttu samsvarandi bekk eða stofnaðu nýjan flokk.

Hér er dæmi; segjum að þú viljir breyta litnum á hausnum sem segir „Til þjónustu.“ Sem stendur er það svart og þetta er kóðinn sem meðhöndlar hann:

Til þjónustu reiðubúinn

Til að breyta um lit er besta leiðin að búa til nýjan flokk sem kallast, segja, .texta-appelsínugult og stilltu litargildið þar, svona:

.texta-appelsínugult {
litur: # f4623a! mikilvægt;
}

* The !mikilvægt mun sjá til þess að þessi litastilling muni skrifa yfir allar aðrar litastillingar sem komu á undan henni.

Nú getum við farið aftur í hausinn okkar og breytt kóða hans í:

Til þjónustu reiðubúinn

Með þessum breytingum verður hausinn nú appelsínugulur:

appelsínugult h2

Til að breyta letri og stærð þess geturðu gert eitthvað mjög svipað. En fyrst dæmi um það hvernig leturskilgreiningarblokkur lítur út í CSS:

.SOMECLASS {
leturfjölskylda: „Merriweather“, Roboto, sans-serif;
leturstærð: 18px;
}
  • hlaða letur Merriweather, Roboto, og sjálfgefið kerfi sans-serif leturgerð (lestu þetta til að læra um netöryggi leturgerðir)
  • stilltu leturstærðina á 18px

Þessa skilgreiningu er hægt að setja í hvaða CSS flokk, alveg eins og litaskilgreiningin. Reyndar er letur- og litaskilgreiningar oft að finna í sömu tegundaryfirlýsingum.

Þegar við förum aftur í fyrra dæmi okkar til að breyta leturstærð fyrir þann haus sem segir „Til þjónustu þín“ gætum við fyrst búið til flokk eins og þennan:

.texti-xxl {
leturstærð: 50px;
}

Og úthlutaðu svo þessum flokki í hausinn:

Til þjónustu reiðubúinn

�� Þegar þú breytir litum eða leturgerðum í sniðmátinu með Bootstrap skaltu skoða í gegnum CSS sniðmát fyrir flokka sem gætu nú þegar veitt þér aðrar stærðir eða liti. Notaðu þær þar sem þær eru tiltækar.

10. Búðu til viðbótar síður

Nú þegar þú hefur aðlagað heimasíðuna er kominn tími til að byrja að vinna á nokkrum viðbótarsíðum og tengja þær síðan við heimasíðuna.

Þegar þú býrð til vefsíðu með HTML og CSS geturðu smíðað hvaða fjölda undirsíður sem er og tengt þær allar saman.

Hér eru nokkrar af algengu síðunum sem flestar vefsíður þurfa:

  • um síðu
  • samband
  • eignasafn
  • vörur / þjónustu
  • teymi
  • stefnur (persónuverndarstefna, skilmálar osfrv.)

1. Byrjaðu með skipulaginu

Þegar þú byggir nýja vefsíðu er fyrsta ákvörðunin sem þú þarft að taka hvað þú vilt að skipulagið verði.

Þegar þú býrð til vefsíðu með HTML og CSS er ekkert sem hindrar þig í að föndra hvað sem er skipulag sem þú vilt. Eini vandi er í raun að setja það saman.

Það getur verið erfitt að takast á við HTML og CSS þegar byrjað er á auða skjánum, svo við ætlum að nota Bootstrap hér líka. Í fyrsta lagi ætlum við að sýna þér nokkur lögmál að búa til skipulag og sýna síðan hvernig þú gerir það með Bootstrap.

Hvernig þú getur hugsað um skipulag vefsíðunnar þinnar er að líta á það sem röð af einstökum reitum – ein ofan á annan. Eitthvað eins og þetta (taktu eftir fjórum aðskildum kubbum):

skipulagið þegar stofnað er vefsíðu með HTML og CSS

Það frábæra við Bootstrap er að það meðhöndlar grundvallarreglur um útlit og upplýsingar um útlit fyrir þig svo að þú getir einbeitt þér bara að því að setja þessa kubba á réttum stöðum.

Í þessum hluta handbókarinnar ætlum við að búa til nýja „um“ síðu.

Til að byrja munum við búa til bara mjög grunn verkefni um skipulag. Eitthvað eins og hér að ofan.

  • það er leiðsöguvalmynd efst,
  • fyrirsögn í fullri breidd fyrir neðan valmyndina,
  • aðal innihaldshlutinn í miðjunni, hnefaleikakenndur á miðju skjásins (ekki í fullri breidd),
  • og fótur.

Nú skulum við byggja þetta skipulag í HTML.

2. Smíðaðu nýja síðu

Auðveldasta leiðin til að byrja að vinna á nýrri síðu er að afrita núverandi síðu og nota hana sem sniðmát. Það er það sem við ætlum að gera.

Búðu til afrit af index.html skrá og endurnefna það um.html.

Bara til að gera síðurnar auðveldari að greina á þessu frumstigi, breyttu nýju um.html skrá og breyttu því sem er í </code> merki. Til dæmis, <code><title>Um mig.

Nú skulum við fara í gegnum skrána línu fyrir línu og ákveða hvað við eigum eftir og hvað við fjarlægjum:

  • The siglingar matseðill (hér að neðan ). Þú vilt líklega hafa þennan hluta ósnortinn, bara til að gera siglingarupplifunina einsleit á öllum síðum.
  • The aðalhetja kafla (hér að neðan ). Þessi munum við ekki þurfa í samræmi við útlitsverkefni okkar. Þú getur haldið áfram að eyða öllum hlutanum.
  • The um kafla (hér að neðan ). Við ætlum að endurnýta þennan hluta sem aðal fyrirsögnarbálkinn okkar.
  • The þjónusta kafla, eignasafn kafla, ákall til aðgerða kafla, og samband kafla (allt á milli og ). Við þurfum alls ekki þessa hluti. Þú getur haldið áfram að eyða þeim.
  • The fót kafla og allt fyrir neðan það (hér að neðan ). Þetta þurfum við að halda.

Þetta gerir núverandi kóða okkar einfaldar. Í grundvallaratriðum er þetta bara þetta:



























Það sem okkur vantar hér er aðalinnihald kafla. Til að byggja það ætlum við að endurnýta hlutann um.

Fara á undan og gera afrit af hlutanum um. Þessi:

...


...

Breyttu nú fyrstu tveimur línunum í þetta:

Þar sem við þurfum ekki

haus þar og

þáttur, við skulum bara fjarlægja þá. Það eina sem er eftir í öllum þessum reit verður að vera málsgrein. Eins og svo:

Málsgrein texta.

Þegar þú vistar skrána og vafrar til hennar í vafranum þínum sérðu að þú hefur í grundvallaratriðum tvær mjög svipaðar blokkir hver fyrir annan, með sama litar bakgrunn:

um blaðsíðu

Það væri betra að hafa hvítan bakgrunn í aðalhlutanum. Til að breyta því, það eina sem við þurfum að gera er að fjarlægja bg-aðal bekk frá aðal

merki. Með öðrum orðum, gerðu merkið í þetta:

Það er betra:

um blaðsíðu 2

Við skulum bæta við nokkrum dummy málsgreinum á síðuna til að byggja hana meira, auk kannski undirhaus:

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

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

Undirhaus

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

Svona lítur þetta út á síðunni:

um ver 1

Ef þér líkar ekki að textinn sé í miðju skaltu bara fjarlægja hann textamiðstöð bekk frá einum af

merki.

um ver 2

Ef þú vilt setja meiri hæfileika á þessa textablokkir geturðu búið til nýja CSS flokka (eins og áður) og tengt þá við málsgreinarnar í reitnum. Eða þú getur kíkt í núverandi sniðmát og séð hvaða flokkar eru þegar til staðar í þessum tilgangi. Hérna eru þeir sem við fengum úthlutað til

og

merkingar:

Lorem ipsum dolor sitja amet...

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

Undirhaus

Og hér eru áhrifin:

um ver 3

Eitt sem við ætlum að gera hérna er að bæta við mynd einhvers staðar á síðunni.

Svona lítur dæmi myndamerkis í HTML út:


Nokkuð einfalt, ekki satt? Eina færibreytan þar er leiðin að myndaskránni. Til að halda hlutunum vel skipulagðum geturðu sett myndina þína inn í img skrá aftur (alveg eins og þú gerðir með þann bakgrunn fyrir nokkru síðan). Í slíku tilfelli verður myndamerkið:


Sem sagt, myndamerkið í þessari tilteknu stillingu er nokkuð takmarkað. Við skulum úthluta nokkrum Bootstrap flokkum til að gera það fágaðri. Sérstaklega:


Þessir tveir flokkar gefa myndinni ávölum hornum þínum og munu einnig tryggja að stærð myndarinnar fari ekki yfir stærð blokkarinnar þar sem hún situr.

Þú getur nú bætt við svona tagi einhvers staðar í aðal innihaldshlutanum á síðunni þinni. Til dæmis hér:

Lorem ipsum dolor sitja amet...

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

Undirhaus

Og hér eru lokaáhrifin á síðunni:

um ver 4

Hér er um síðu okkar í allri sinni dýrð:

um síðu lokið

3. Hlekkur á nýju síðuna

Þegar nýju síðunni er lokið skulum við nú tengja hana frá heimasíðunni ( index.html skjal). Auðvitað er besti staðurinn til að bæta við þessum tengli í siglingavalmyndina (hér að neðan ).

Leitaðu sérstaklega að þessari línu:

Um það bil

Við ætlum að breyta því í þetta:

Um það bil

Þetta er eitthvað sem við höfum ekki talað um enn, en merki er hlekkjamerki í HTML. Með því að nota það geturðu tengt á hvaða vefsíðu sem er með því að gefa upp vefsetrið á síðunni href breytu. Textinn á hlekknum – hluti sem hægt er að smella á hlekkinn – verður textinn milli opnunar og lokunar merki.

Þegar þú endurnýjar heimasíðuna núna sérðu nýja tengilinn þinn sem vísar á um síðu.

Nánari lestur:

Á þessu stigi hefurðu í grundvallaratriðum byggt þér einfalda vefsíðu sem samanstendur af tveimur síðum – a heimasíða og um síðu.

Það sem þú ættir að gera núna er að skola og endurtaka með því að búa til nýjar síður, stilla þær upp, bæta efni við þær og tengja síðan allt frá siglingavalmyndinni.

Annað sem vert er að gera þegar þú ert að fara í gegnum þessi skref er að læra frekar HTML og CSS meginreglur, fara í gegnum gátlistann og einnig læra Bootstrap og uppbyggingu þess og flokka. Nokkur úrræði fyrir það:

  • HTML5 svindlblaði
  • CSS svindlblaði
  • Svindlablöð Javascript
  • HTML kennsla
  • Bootstrap einkatími
  • Bootstrap svindl lak

Að ná góðum tökum á Bootstrap, mjög líklega besta leiðin sem nú er til staðar til að byggja upp bjartsýni og fallegar vefsíður með HTML og CSS.

Ef þú hefur einhverjar spurningar um að búa til vefsíðu með HTML og CSS skaltu ekki hika við að senda þær inn í athugasemdirnar.

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

    Like this post? Please share to your friends:
    Adblock
    detector
    map