Hoe om ‘n webwerf te kodeer

Hoe om 'n webwerf te kodeerWil u leer hoe om ‘n webwerf met HTML en CSS te skep?


Jy is op die regte plek. In hierdie gids wys ons u al die stappe om van ‘n leë skerm na ‘n werkende webwerf te verkry wat terselfdertyd geoptimaliseer en mooi is.

Maar eers, wat is HTML en CSS?

Wel, u kan net albei terme in Wikipedia opsoek, maar hierdie definisies is nie baie leesvriendelik nie. Laat ons dinge ‘n bietjie vereenvoudig:

  • HTML (Hypertext Markup Language) definieer die struktuur en inhoud van ‘n webblad – waar dinge gaan, hoe hulle is uitgelê, en wat op die bladsy
  • CSS (Cascading Style Sheets) definieer die stilering / aanbieding van ‘n webblad en die elemente daarop

U kan nie regtig een sonder die ander hê nie; die twee werk saam om die finale webblad, die ontwerp en die inhoud daarop uit te maak..

let daarop; as ons ”n webblad’ sê, dan bedoel ons ‘n enkele HTML-dokument – ‘n enkele bladsy wat deel uitmaak van u webwerf. Terwyl “’n webwerf” die volledige ding is – jou hele webwerf met al sy eie webblaaie.

Hoe om ‘n webwerf te skep met HTML en CSS (inhoudsopgawe):

  1. Lees die basiese beginsels van HTML
  2. Verstaan ​​die HTML-dokumentstruktuur
  3. Leer ken CSS-keurders
  4. Sit ‘n CSS-stylblad saam
  5. Kry bootstrap
  6. Kies ‘n ontwerp
  7. Pas u webwerf aan met HTML en CSS
  8. Voeg inhoud en prente by
  9. Verfyn kleure en lettertipes
  10. Skep addisionele bladsye

Totale tyd om ‘n webwerf te skep: 4-5 uur
Vaardigheidsvlak: Intermediêre

As u dink dat dit te ingewikkeld is, beveel ons aan dat u ‘n webwerf skep met behulp van WordPress of om een ​​van die webwerfbouers te kies. U kan ook die lys van die beste IDE’s vir webontwikkeling besoek. 

Contents

Versamel u bronne voordat u begin:

Dus, die eerste ding wat u nodig het nog voordat u ‘n webwerf met HTML en CSS skep, is ‘n webbediener (hosting). Moenie egter bekommerd wees nie; u hoef nie u eie masjien te koop nie. Baie webgasheerondernemings sal ‘n eenvoudige hostingdiens op hul masjiene verkoop. Google net vir “webhosting” en kies iets wat nie te duur is nie.

As die bediener gesorteer is, is die volgende ding wat u nodig het, ‘n domeinnaam. Die domeinnaam is wat die webwerf op die web geïdentifiseer is. Die domeinnaam van hierdie webwerf is byvoorbeeld websitesetup.org.

As u ‘n domeinnaam en ‘n bediener het, kan u die twee met mekaar verbind.

Volle openbaarmaking: Ons verdien ‘n kommissie as u uiteindelik Bluehost koop deur middel van ons verwysingskakels in hierdie gids. Dit help ons om WebsiteSetup aan die gang te hou en op datum te hou. Dankie vir jou ondersteuning.

Om aan te sluit sonder om pyn te kry, beveel ons aan dat u by ‘n maatskappy wil aanmeld BlueHost.

Hulle sal al die opstellings vir u hanteer. Dit beteken dat hulle: (A) stel ‘n gasheerrekening vir u op, (B) registreer ‘n domeinnaam namens u, (C) stel alles in om saam te werk, en (D) gee jou toegang tot ‘n maklik te gebruik paneelbord.

Gaan voort en teken aan BlueHost, ons sal wag. Blaai na die volgende stap as u terug is en u webbediener opgestel en gereed is om te gaan.

P.s. As u net wil eksperimenteer met ‘n HTML-webwerf op u rekenaar, en is nie van plan om dit openbaar te maak nie, gebruik ‘n plaaslike webbedienerprogrammatuur. Die een wat ons aanbeveel en graag gebruik, word genoem XAMPP. Dit het weergawes vir sowel Mac as rekenaar, en dit is maklik om te gebruik. hier is ‘n gids hoe u dit op u rekenaar kan installeer.

1. Leer die basiese beginsels van HTML

Die hoofelement van ‘n HTML-struktuur is ‘n HTML tag.

‘N Merkie lyk byvoorbeeld soos volg:

IETS

Hier het ons te doen met ‘n tag. Hierdie een sal vet ‘n stuk teks tussen die openingsplaatjie () en die sluitingsetiket (). In hierdie geval is daardie stuk teks IETS.

Maar daar is ander etikette, net om ‘n paar te noem:

  • ... sal die teks tussen die openings- en afsluitmerkers kursiveer
  • ... sal dit onderstreep
  • ...

    is ‘n paragraaf van die teks


  • ...

    is die hoofopskrif op die bladsy

Afgesien van die eenvoudige etikette, is daar ook meer ingewikkelde etikette. As u byvoorbeeld ‘n lys wil bou soos die volgende:

  • Item 1
  • Item 2
  • Item 3

… jy kan dit doen met die volgende HTML-kode:

  • Item 1
  • Item 2
  • Item 3

Of as u ‘n skakel na ‘n ander bladsy wil voeg, soos hierdie:

Dit is ‘n skakel na ons tuisblad

… jy kan dit doen met hierdie stukkie kode:

Dit is 'n skakel na my tuisblad

Lees dit om die volledige lys met HTML-tags. Dit sal nuttig raak as u ‘n webwerf met HTML en CSS skep.

2. HTML-dokumentstruktuur verstaan

Dink aan u HTML-bladsy asof dit uit Legos gebou is. U plaas verskillende stene bo-op mekaar om met ‘n groter struktuur te eindig.

Maar in plaas van Lego-bakstene, kry jy HTML-tags …

Hier is die eenvoudigste HTML-dokumentstruktuur:





Hello Wêreld!


Hello Wêreld!

My eerste webblad.

U kan die kode hierbo neem, dit kopieer en plak in ‘n nuwe lêer en die dokument stoor as index.html, en dit sal ‘n perfek geldige HTML-bladsy wees.

Laat ons die individuele dele van hierdie kode verduidelik:

  • – die aanvanklike verklaring van die dokument
  • – ‘n ander verklaring; sê dat die volgende keer ‘n HTML-dokument in Engels geskryf word
  • – is die begin van die kop artikel; die kop gedeelte is waar al die basiese parameters van die bladsy gaan; die meeste daarvan sal nie op die skerm vertoon word nie; hulle definieer net wat onder die enjinkap gaan
  • – definieer watter karakterset gebruik word om die dokument te skryf; hoef nie te veel tyd hieraan te spandeer nie; gebruik net hierdie verklaring soos dit is
  • Hello Wêreld! – die titel van die bladsy; dit is wat mense in die titelbalk van hul blaaiers sal sien, byvoorbeeld:

titel in die webblaaier wanneer u 'n webwerf met HTML en CSS skep

  • – is die begin van die liggaam artikel; hier gaan al die inhoud van die bladsy; dit is die belangrikste deel van ‘n HTML-dokument; kom ons beklemtoon dit; hierdie gedeelte is waar u al die inhoud wat bedoel is om op die bladsy te verskyn, insluit

  • Hello Wêreld!

    – die hoofopskrif op die bladsy

  • My eerste webblad.

    – ‘n eenvoudige paragraaf van die teks

  • – die afsluitmerker van die hele HTML-dokument

‘N Belangrike opmerking hier. Om aan ‘n HTML-lêer in ‘n basiese teks-app of ‘n komplekse teksverwerker soos MS Word te werk, is nie ‘n goeie ervaring nie. Installeer ‘n instrument genaamd om die dinge vir jouself maklik te maak Sublieme teks. Dit het weergawes vir sowel Mac as PC, en dit is gratis.

Waarom is dit beter? Dit sal onder meer die sintaksis van ‘n HTML-lêer inkleur. Dit beteken dat dit u HTML-etikette visueel sal onderskei van teksinhoud, etiketparameters en ander waardes. Basies sal dit alles leesbaar word. Dit is hoe ons eenvoudige HTML-struktuur in Sublieme teks lyk:

sublieme sintaksis is wonderlik as u 'n webwerf met HTML en CSS skep

Goed, terug oor die onderwerp. Jy kan dit nuut neem index.html lêer van u, kopieer dit na die hoofgids van u webbediener, en kyk dan na die bladsy deur na ‘n webblaaier te blaai. Moet egter nie te opgewonde raak nie; hierdie bladsy sal taamlik lelik wees (sien hieronder).

hierdie bladsy is lelik

Goed, die bladsy is lelik, hoe kan ek dit nie so maak nie??

3. Leer CSS Selectors ken

Net soos HTML het, het CSS dit ook keurders.

Keurders beskryf hoe ‘n gegewe element voorkomsgewys moet optree. Hier is ‘n voorbeeld van ‘n CSS-selector:

p {
lettergrootte: 18px;
}

Hierdie selector dui aan dat alle HTML

etikette binne die dokument het ‘n lettergrootte van 18px.

‘N Meer praktiese manier om CSS-keurders te gebruik, is egter nie om alle etikette van ‘n gegewe tipe tot ‘n sekere styl te beperk nie, maar eerder verskillende “klasse” te skep en een vir een aan etikette toe te ken..

Byvoorbeeld, ‘n klaskieser in CSS lyk soos volg:

.normaal-teks {
lettergrootte: 18px;
}

Let op die kolletjie (.) voor die naam van die klas (normale teks). Met die ‘normale-teks’-klas gedefinieër, kan ons die klas nou toewys aan die spesifieke HTML-tags wat ons 18px groot wil maak.

Byvoorbeeld:

Hierdie teks sal 18px wees.

Laat ons nog ‘n minuut neem om al die elemente van die stuk CSS-kode hierbo te verduidelik:

  • .normale teks – klasdefinisie; alles na die naam van die klas en tussen die oop- en sluithakies {} definieer hoe die elemente wat aan hierdie klas toegeken is, sal lyk
  • skrifgrootte – ‘n voorbeeld van CSS-eiendom
  • 18px – ‘n waarde wat aan die eiendom toegeken word

Daar is ‘n groot aantal CSS-eiendomme behalwe die bogenoemde skrifgrootte. Hier is die volledige lys as jy nuuskierig is.

4. Sit ‘n CSS-stylblad saam

‘N HTML-dokument is baie struktureel – elke element het sy plek, en die volgorde van elemente is uiters belangrik vir die finale konstruksie en voorkoms van die betrokke webblad. ‘N CSS-dokument is baie minder.

Daar word gereeld na CSS-dokumente verwys style. Basies is ‘n CSS-stylblad ‘n lys van al die klasdefinisies wat in die ooreenstemmende HTML-dokument gebruik word. Die volgorde van die klasdefinisies is meestal nie so belangrik nie (ten minste vir eenvoudige ontwerpe).

Die manier waarop u ‘n CSS-stylblad saamstel, is deur elke klas een vir een te definieer en dan te toets of die uitkoms in u bladsyontwerp is wat u wou hê..

Dit klink soos ‘n vervelige werk, en dit is so.

Maar ons sal dinge vir u vergemaklik en u nie dwing om HTML- en CSS-ontwerp met die hand te leer nie. In plaas daarvan om u van nuuts af alles te leer, neem ons ‘n lewende organisme en dissekteer die elemente daarvan.

Dit is waar ‘n ding genaamd Bootstrap in die spel kom.

5. Laai / installeer bootstrap

Bootstrap is ‘n open source toolkit om ‘n webwerf met HTML en CSS te skep.

In gewone Engels sorg Bootstrap vir die basiese struktuur van ‘n HTML-dokument en CSS-stylblad. Dit lewer ‘n raamwerk wat sorg dat die hoof steierwerk op u webblad gereed is en geoptimaliseer word vir verdere ontwikkeling.

In werklikheid laat Bootstrap u nie van voor af begin nie, maar eerder in die pret deel. Daarmee hoef u nie te werk aan die dikwels vervelige vroeë stadiums om ‘n webwerf met HTML en CSS te skep nie.

Daar is twee paaie wat u kan volg:

  • Opsie (A): leer Bootstrap – gaan na die Bootstrap-tuisblad, laai die hoof Bootstrap-pakket af en begin daaraan bou.
  • Opsie (B): neem ‘n kortpad – kry ‘n voorgeregpakket vir Bootstrap met ‘n mooi ontwerp en ‘n demo-webblad wat reeds gebou is.

Opsie (A) ‘n Leerkurwe kan aan die begin wees, maar dit is nie die slegste manier om ‘n webwerf met HTML en CSS te benader nie. Sodra u die kern Bootstrap-struktuur bemeester het, kan dit vir u makliker wees om nuwe bladsye te bou en te laat lyk presies soos u wil. Die Bootstrap-dokumentasie is ‘n wonderlike plek om met hierdie pad te begin.

Ons gaan saam met Opsie (B) vir hierdie gids. Ons doen dit om ‘n paar redes, hoof van hulle:

Om met ‘n klaargemaakte struktuur te begin, bespaar baie pyn as u die basiese benodigdhede van ‘n HTML-dokument probeer uitvind. Hiermee kan u op die interessante dinge fokus, soos om inhoud uit te lê en dit goed te laat lyk.

Kortom, om op hierdie manier dinge te leer, kan u vinniger ‘n beter resultaat kry, wat ons dink dit is wat u wil hê.

6. Kies ‘n ontwerp

As u ‘n webwerf met HTML en CSS skep, is u vry om enige Bootstrap-sjabloon waarvan u hou, te gebruik. Hulle moet almal op dieselfde manier werk.

Vir hierdie handleiding gaan ons egter een van die sjablone gebruik deur Begin Bootstrap. Hulle het ‘n lekker verskeidenheid gratis sjablone wat geoptimaliseer, probleemloos werk en ook baie goed ontwerp is.

Die tema wat ons gaan gebruik, word genoem kreatiewe. Die finale effek waarna ons gaan lyk soos volg:

finale tuisblad nadat u 'n webwerf met HTML en CSS geskep het

Om mee te begin, die kreatiewe sjabloon, klik op die Gratis aflaai aan die regterkant (aan hierdie bladsy) en stoor die zip-pakket op u rekenaar.

Pak die pakket uit en skuif die inhoud daarvan na die hoofgids van u plaaslike webbediener of u webhostingrekening.

Maak die plek nou oop deur u webblaaier. U sal die voorraadweergawe van die sjabloon sien:

begin selflaaier sjabloon

Dit is al baie mooi, maar nou is dit tyd om te leer hoe om HTML en CSS te gebruik om dit presies te maak wat u wil hê dit moet wees.

7. Pas u webwerf aan met HTML en CSS

Kom ons werk eers op die tuisblad van die ontwerp. Dit sal ons wys hoe om die grafika, tekste te vervang en alles in die geheel op te stel.

Ons het kortliks die hoofafdeling van ‘n HTML-dokument hierbo bespreek. Kom ons kyk hier meer na diepte.

As u die index.html lêer van u Bootstrap-werf in Sublieme teks, sal u ‘n hoofafdeling soos hierdie sien (ons het al die nie-belangrike dinge uit hierdie kode verwyder vir die duidelikheid *):






Kreatief - Begin Bootstrap-tema





* Afgesien van bogenoemde, was daar ook kode om Google-lettertipes, Font Awesome-ikone en ‘n lightbox-module te laai vir die prente wat op die bladsy vertoon word.

Die meeste verklarings hier weet ons al, maar daar is ‘n paar nuwe:

  • Eerstens, alles tussen die hakies is ‘n HTML-opmerking. Dit verskyn nie op die finale bladsy nie.
  • – dit is een van Bootstrap se eie verklaringsetikette. Dit definieer die grootte van die werf van die webwerf.
  • – hierdie reël laai die CSS-stylblad van die Creative-sjabloon en bevat ook die standaardstylblad van Bootstrap.

Kom ons wysig die laaste verklaring – die lyn wat die CSS laai – om dit makliker te maak om later mee te werk.

Verander die lyn na:


Dit is net ‘n klein verskil – dit sal die nie-verkorte weergawe van dieselfde CSS-blad laai. Hierdie weergawe is net makliker om aan te pas.

Blaai nou af na die onderkant van die index.html lêer. U sal die volgende reëls sien reg voor die sluiting liggaam tag:

        

Hulle is verantwoordelik vir die laai van JavaScript-lêers wat ‘n paar van die meer visuele interaksies van die ontwerp hanteer. As u byvoorbeeld op die oor skakel in die boonste menu, word u glad na die ongeveer blok op dieselfde bladsy geneem – dit word onder andere gedoen via JavaScript. Ons hoef ons nie op hierdie oomblik probleme te ondervind om hierdie kode te verstaan ​​nie. Laat ons dit weer laat.

Kom ons werk eerder daaraan om ons eie inhoud op die bladsy te voeg:

8. Voeg inhoud en prente by

Die eerste ding wat u wil doen is om die titel van die bladsy te verander.

1. Verander die titel

Vind die titel merk in die kopgedeelte en vervang die teks tussen die etikette na iets van u eie:

My HTML webwerf

2. Pas die helde-afdeling aan

Die helde-afdeling noem ons hierdie blok:

heldeafdeling

Dit is gaaf om ons eie inhoud daarin te hê. Gaan terug na u blok om die blok te verander index.html lêer en vind hierdie afdeling:

...


...

Vind meer uit

Hierdie hele blok blok beheer wat in die heldeafdeling is.

Hier is ‘n paar nuwe tags:


  • – dit is ‘n merker wat definieer dat hierdie hele afdeling die kop van die bladsy is; hierdie etiket het ‘n paar broers en susters in die vorm van die
    etiket en
    tag
  • – is ‘n algemene CSS-etiket wat aandui dat die volgende ‘n aparte afdeling is (aka afdeling) in die HTML-dokument; deur dit te gebruik, word dit makliker om individuele afdelings op die bladsy visueel te onderskei

U sal ook sien dat sommige van die ander etikette (wat ons reeds ken) effens meer ingewikkeld lyk, met verskeie CSS-klasse wat aan hulle toegewys is. Byvoorbeeld:

...

Die klasse wat aan die

tag hier is teks-hoofletter teks-wit lettertipe-gewig-vet.

Hierdie klasse is geskep deur Bootstrap en deur die ontwikkelaar van die kreatiewe tema. Die goeie nuus is dat u dit ook vrylik kan gebruik as u ‘n webwerf met HTML en CSS skep.

Eintlik kan u elke merk wat u by die struktuur van u bladsy voeg, aanpas deur enige aantal klasse daaraan toe te ken.

As u die volledige lys van die beskikbare klasse wil sien, kan u die hoof oopmaak creative.css lêer wat in die css subgids van die kreatiewe tema.

Om al hierdie klasse te begryp, kan aanvanklik intimiderend lyk, maar dit is eintlik makliker as wat dit lyk.

Byvoorbeeld, een van die klasse wat aan sommige van die paragrawe in ons index.html lêer is font-weight-lig. As jy in die creative.css lêer en Ctrl + F as u na daardie klasnaam soek, sal u sien dat dit eenvoudig die font-weight parameter soos volg:

.font-gewig-lig {
fontgewig: 300;
}

Wysiging van die standaardtekste in die index.html lêer is baie eenvoudig. Soek net die etiket wat u wil redigeer en verander tussen die openings- en sluitmerkies.

Byvoorbeeld, om die hoofopskrif te verander, verander dit net:

Jou gunsteling ...

Aan iets soos die volgende:

Bewonder my HTML-webwerf!

U kan dieselfde doen vir al die paragrawe en ander etikette op die bladsy.

Wat belangrik is, is dat u ook gratis paragrawe kan byvoeg. Ons kan byvoorbeeld die paragraaf neem wat reeds op die bladsy is, ‘n kopie daarvan maak en dit direk onder die oorspronklike paragraaf plak; so:

Begin Bootstrap blik ...

Paragraaf 2

Laat ons nou die beeld wat op die agtergrond is, vervang met die versorgde tekste.

Dit is ‘n bietjie ingewikkelder om te doen, aangesien dit van ons vereis om na die CSS-stylbladlêer te gaan en die wysiging daar te doen. Soos u kan sien in die HTML-kode van die Masthead geen merk sou aandui dat u op enige manier ‘n prent op die bladsy insluit nie. Dit word alles via CSS gedoen.

As u weer kyk na die hele blok kode wat die Masthead gedeelte, sal u sien dat dit toegewys is aan ‘n klas met die naam mashoof. Hierdie kode reël die klasopdrag:

Die mashoof klas is die een wat ‘n beeld op die agtergrond van die hele blok plaas.

Laat ons die creative.css lêer weer in en kyk vir die “mashoofklas” -klas:

header.masthead {
padding-top: 10rem;
ondervulling: kalk (10rem - 72px);
agtergrond: lineêre gradiënt (na onder, rgba (92, 77, 66, 0,8) 0%, rgba (92, 77, 66, 0,8) 100%), url ("../ img / bg-masthead.jpg" );
agtergrond-posisie: sentrum;
agtergrondherhaling: geen herhaling;
agtergrond-aanhangsel: blaai;
agtergrondgrootte: omslag;
}

Hierdie kode doen allerhande pragtige dinge aan ons beeld (soos die toevoeging van ‘n bedekking, skadu, ens.), Maar die belangrikste is: url ( "../ img / bg-masthead.jpg"). Dit is die lyn wat aandui waar u die agtergrondprent kan vind. Dit gaan in die img subdirectory.

Om hierdie agtergrondprent te verander, neem u eie prentjie, kopieer dit na die img subgids en kopieer en plak dan die naam daarvan in die plek van die oorspronklike bg-masthead.jpg lêer. In kort, verander dit: url ( "../ img / bg-masthead.jpg") tot hierdie: url ( "../ img / YOURFILE.jpg").

3. Pas die ander blokke op die bladsy aan

As u deur die index.html lêer, sal u sien dat daar reeds heelwat verskillende afdelings op die bladsy is. Ons het ‘n afdeling vir die navigasie, en oor ‘n blok, sommige dienste, ‘n portefeulje, ‘n oproep tot aksie, ‘n Kontak blok, en a footer.

Alhoewel daar verskillende inhoud in al hierdie afdelings is, is die dele self struktureel. Hulle het almal ongeveer dieselfde stel HTML-tags – net verskillende CSS-klasse wat aan hulle toegewys is.

Die beste manier om die bladsy aan te pas om aan u behoeftes te voldoen, is om een ​​vir een deur die blokke te gaan en te eksperimenteer deur dinge te verander.

Afgesien van die wysiging van die tekste, kan u ook hele gedeeltes rondbeweeg (die dele tussen die

tags). Toegegee, u moet dit wel met die hand doen (deur elemente in plek te sny en daarna te plak), is dit steeds eenvoudig om dit te doen.

Daar word gesê dat daar twee redelik basiese wysigings is waarvan ons nog nie gepraat het nie. Kom ons bespreek die volgende:

9. Verfyn kleure en lettertipes

Dit is baie maklik om in kleure of lettertipes te verander in HTML en CSS. Die eenvoudigste ding wat u kan doen is om ‘n bietjie stilering aan ‘n HTML-tag toe te ken. Byvoorbeeld:

Rooi teks

In HTML word kleure voorgestel deur hul hekswaardes; “# FF0000” is rooi. Hier is ‘n tabel van al die ander standaard kleure.

‘N Beter manier om kleure toe te ken, is om dit via die CSS-stylblad te doen. Om byvoorbeeld dieselfde effek as die kode hierbo te kry, kan ons dit in ons CSS-stylblad plaas:

p.red {
kleur: # FF0000;
}

En gebruik dan die volgende HTML-kode in die hoofstuk:

Rooi teks

Die tweede metode is basies hoe dinge in Bootstrap gedoen word.

Om die kleur van enige teks op die bladsy te verander, vind eers die etiket wat verantwoordelik is vir die styl van die teks, en gaan dan in die stylblad en verander die ooreenstemmende klas, of skep ‘n nuwe klas.

Hier is ‘n voorbeeld; sê dat u die kleur van die kopknop wil verander en sê: “tot u diens.” Tans is dit swart, en dit is die kode wat dit hanteer:

Tot u diens

Om die kleur te verander, is die beste manier om ‘n nuwe klas te skep wat ons sê, .teks-oranje en stel die kleurwaarde daar, soos volg:

.teksoranje {
kleur: # f4623a! belangrik;
}

* Die !belangrik sal sorg dat hierdie kleurinstelling enige ander kleurinstellings wat voor dit gekom het, sal oorskryf.

Nou kan ons teruggaan na ons kop en die kode verander na:

Tot u diens

Met hierdie veranderinge sal die kop nou oranje wees:

oranje h2

Om die lettertipe en die grootte daarvan te verander, kan u iets soortgelyks doen. Maar eers ‘n voorbeeld van hoe ‘n lettertipe-definisieblok in CSS lyk:

.SOMECLASS {
font-familie: "Merriweather", Roboto, sans-serif;
lettergrootte: 18px;
}
  • laai lettertipes Merriweather, Roboto, en ‘n stelsel verstek sans-serif lettertipe (lees dit om meer te leer oor webveilige lettertipes)
  • stel die lettergrootte op 18px

Hierdie soort definisie kan in enige CSS-klas geplaas word, net soos die kleurdefinisie. Eintlik word letter- en kleurdefinisies dikwels in dieselfde klasverklarings aangetref.

As ons teruggaan na ons vorige voorbeeld om die lettergrootte te verander vir die bladsyopskrif wat sê “Tot u diens”, kan ons eers ‘n klas soos hierdie skep:

.teks-xxl {
lettergrootte: 50px;
}

En ken hierdie klas dan toe aan die kop:

Tot u diens

�� As u die kleure of lettertipes in u Bootstrap-sjabloon verander, kyk eers deur die CSS-stylblad vir klasse wat u alreeds met alternatiewe groottes of kleure kan voorsien. Gebruik dit waar beskikbaar.

10. Skep addisionele bladsye

Noudat u die tuisblad aangepas het, is dit tyd om te begin werk aan ‘n paar addisionele bladsye en dit dan aan die tuisblad te koppel.

As u ‘n webwerf met HTML en CSS skep, kan u ‘n aantal subbladsye bou en dan almal aan mekaar koppel.

Hier is ‘n paar algemene bladsye wat die meeste webwerwe benodig:

  • oor bladsy
  • Kontak
  • portefeulje
  • produkte / dienste
  • span
  • beleid (privaatheidsbeleid, bepalings, ens.)

1. Begin met die uitleg

As u ‘n nuwe webblad bou, is die eerste besluit wat u moet neem, wat u wil hê dat die uitleg moet wees.

As u ‘n webwerf met HTML en CSS skep, is daar niks wat u verhinder om te maak nie alles uitleg wat u wil hê. Die enigste probleem is om dit saam te stel.

HTML en CSS kan moeilik wees om mee te werk as u met ‘n leë skerm begin, so ons gaan ook Bootstrap hier gebruik. Eerstens gaan ons u ‘n paar beginsels van die ontwerp van ‘n uitleg wys en dan demonstreer hoe u dit met Bootstrap kan doen.

Die manier waarop u aan die uitleg van u webblad dink, is om dit as ‘n reeks individuele blokke te beskou – een bo-op ‘n ander. Iets soos hierdie (let op die vier verskillende blokke):

die uitleg wanneer u 'n webwerf met HTML en CSS skep

Die wonderlike ding met Bootstrap is dat dit die basiese uitlegbeginsels en voorkomsdetails vir u hanteer, sodat u net daarop kan fokus om daardie blokke op die regte plekke te plaas.

In hierdie gedeelte van die gids gaan ons ‘n nuwe bladsy oor skep.

Om mee te begin, sal ons slegs ‘n baie basiese projek van die uitleg skep. Iets soos die een hierbo.

  • daar is ‘n navigasiekieslys aan die bokant,
  • ‘n kopblok met ‘n volledige breedte onder die menu,
  • die hoofinhoudsgedeelte in die middel, boksig in die middel van die skerm (nie die volle breedte nie),
  • en ‘n voetskrif.

Laat ons hierdie uitleg in HTML bou.

2. Bou ‘n nuwe bladsy

Die maklikste manier om aan ‘n nuwe bladsy te begin werk, is om ‘n bestaande bladsy te dupliseer en as sjabloon te gebruik. Dit is wat ons gaan doen.

Skep ‘n kopie van die index.html lêer en hernoem dit about.html.

Om die bladsye op hierdie vroeë stadium makliker te onderskei, wysig die nuwe about.html lêer en verander wat in die </code> tag. Byvoorbeeld, <code><title>Oor my.

Laat ons nou die reël vir reël deur die lêer gaan en besluit wat ons sal oorlaat en wat ons sal verwyder:

  • Die navigasie spyskaart (hieronder ). U wil hierdie gedeelte waarskynlik in stand hou, net om die navigasie-ervaring op alle bladsye eenvormig te maak.
  • Die hoofheld afdeling (hieronder ). Hierdie een wat ons nie nodig het volgens ons uitlegprojek nie. U kan voortgaan om die hele gedeelte uit te vee.
  • Die oor afdeling (hieronder ). Ons gaan hierdie gedeelte hergebruik as ons hoofopskrif.
  • Die dienste artikel, portefeulje artikel, oproep tot aksie afdeling, en Kontak gedeelte (alles tussenin en ). Ons het hierdie dele glad nie nodig nie. U kan voortgaan om hulle uit te vee.
  • Die footer gedeelte en alles daaronder (hieronder ). Ons moet hierby hou.

Dit maak ons ​​huidige kode redelik eenvoudig. Dit is eintlik net dit:



























Die ding wat ons hier mis, is die hoofinhoud artikel. Om dit te bou, gaan ons die gedeelte oor hergebruik.

Neem ‘n kopie van die gedeelte oor. Hierdie een:

...


...

Verander nou die eerste twee reëls hiervoor:

Aangesien ons dit nie nodig het nie

kop daar en die

element, laat ons dit net verwyder. Die enigste ding wat in hierdie hele blok oorbly, is ‘n teksparagraaf. Soos so:

'N Paragraaf van die teks.

As u die lêer stoor en dit via u blaaier navigeer, sal u sien dat u basies twee baie soortgelyke blokke onder mekaar het, met dieselfde kleuragtergrond:

oor bladsyhoof

Dit sal beter wees om ‘n wit agtergrond in die hoofinhoudsgedeelte te hê. Om dit te verander, is die enigste ding wat ons moet doen, die verwydering van bg-primêre klas vanaf die hoofvak

tag. Met ander woorde, maak die etiket hierby:

Dis beter:

oor bladsyhoof 2

Laat ons ‘n paar dummy-paragrawe op die bladsy voeg om dit meer te vul, en miskien ‘n subkop:

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

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

subhoof

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

So lyk dit op die bladsy:

oor ver 1

As u nie daarvan hou dat die teks gesentreer is nie, verwyder dan die teks-sentrum klas uit een van die

tags.

oor ver 2

As u meer flair op hierdie teksblokke wil sit, kan u nuwe CSS-klasse skep (soos voorheen) en dit toewys aan die paragrawe in die blok. Of u kan na die huidige stylblad kyk en kyk watter klasse daar al is. Hier is die wat ons aan die

en

tags:

Lorem ipsum dolor sit amet...

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

subhoof

En hier is die effek:

oor ver 3

Nog iets wat ons hier gaan doen, is om ‘n prentjie êrens op die bladsy by te voeg.

Dit is hoe ‘n voorbeeldbeeld in HTML lyk:


Redelik eenvoudig, nie waar nie? Die enigste parameter daar is die pad na die prentlêer. Om dinge mooi te organiseer, kan u u beeld in die img gids weer (net soos jy ‘n ruk gelede met die agtergrond gedoen het). In so ‘n geval is die prentetiket:


Dit gesê, die beeldetiket in hierdie spesifieke opset is redelik beperk. Laat ons ‘n paar Bootstrap-klasse daaraan toeken om dit ‘n bietjie verfynder te maak. veral:


Hierdie twee klasse sal u afgeronde hoeke gee en sal ook sorg dat die grootte van die prentjie nie groter is as die blok waar dit sit nie.

U kan nou ‘n etiket soos hierdie êrens in die hoofinhoudsgedeelte van u ongeveer bladsy voeg. Byvoorbeeld, hier:

Lorem ipsum dolor sit amet...

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

subhoof

En hier is die finale effek op die bladsy:

oor ver 4

Hier is ons oor-bladsy in al sy glorie:

oor bladsy voltooi

3. Skakel na die nuwe bladsy

Laat ons dit nou met die nuwe bladsy van die tuisblad (die index.html lêer). Uiteraard is die beste plek om hierdie skakel by te voeg in die navigasiekieslys (hieronder) ).

Kyk veral na hierdie lyn:

oor

Ons gaan dit hieraan verander:

oor

Dit is iets waaroor ons nog nie gepraat het nie, maar die tag is ‘n skakel tag in HTML. Deur dit te gebruik, kan u na enige webbladsy skakel deur die adres van die bladsy op die href parameter. Die teks van die skakel – die klikbare deel van die skakel – is die teks tussen die opening en sluiting tags.

As u die tuisblad nou opknap, sien u u nuwe skakel na die bladsy oor.

Verdere leeswerk:

Op hierdie stadium het jy vir jouself ‘n eenvoudige webwerf opgebou wat uit twee bladsye bestaan: a tuisblad en ‘n oor bladsy.

Wat u nou moet doen, is om te spoel en te herhaal deur nuwe bladsye te skep, dit in te stel, inhoud daaraan toe te voeg en dan alles vanaf die navigasiemenu te koppel..

Ander dinge wat die moeite werd is om te doen as u deur hierdie stappe gaan, is om HTML- en CSS-beginsels te leer, deur die kontrolelys te gaan, en ook Bootstrap en sy strukture en klasse te leer. ‘N Paar bronne daarvoor:

  • HTML5 cheat sheet
  • CSS cheat sheet
  • Javascript cheat sheet
  • HTML handleiding
  • Bootstrap-tutoriaal
  • Bootstrap cheat sheet

Bemeestering van Bootstrap, heel waarskynlik die beste pad wat tans beskikbaar is vir die bou van geoptimaliseerde en pragtige webwerwe met HTML en CSS.

As u enige vrae het oor die skep van ‘n webwerf met HTML en CSS, moet u huiwer om dit in die kommentaar in te dien.

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

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