Hvordan kode et nettsted

Hvordan kode et nettstedVil du lære hvordan du lager et nettsted med HTML og CSS?


Du er på rett sted. I denne guiden viser vi deg alle trinnene du kommer fra en blank skjerm til et fungerende nettsted som er optimalisert og ganske pent på samme tid.

Men først, hva er HTML og CSS?

Vel, du kan bare slå opp begge begrepene i Wikipedia, men disse definisjonene er ikke veldig leservennlige. La oss forenkle tingene litt:

  • HTML (Hypertext Markup Language) definerer strukturen og innholdet på en webside – hvor ting går, hvordan de er lagt ut, og hva som er på siden
  • CSS (Cascading Style Sheets) definerer styling / presentasjon av en webside og elementene på den

Du kan egentlig ikke ha den ene uten den andre – de to jobber sammen for å utgjøre den endelige websiden, dens design og innholdet som ligger på den.

Merk; når vi sier “en webside”, det vi mener er et enkelt HTML-dokument – en enkelt side som er en del av nettstedet ditt. Mens “et nettsted” er den komplette tingen – hele nettstedet med alle individuelle websider.

Slik oppretter du et nettsted ved hjelp av HTML og CSS (innholdsfortegnelse):

  1. Lær det grunnleggende om HTML
  2. Forstå HTML-dokumentstruktur
  3. Bli kjent med CSS-velgere
  4. Sett et CSS-stilark sammen
  5. Få Bootstrap
  6. Velg et design
  7. Tilpass nettstedet ditt med HTML og CSS
  8. Legg til innhold og bilder
  9. Finjuster farger og skrifter
  10. Lag flere sider

Total tid for å opprette et nettsted: 4-5 timer
Ferdighetsnivå: Mellom

Hvis du synes dette er for komplisert, anbefaler vi enten å opprette en webside ved hjelp av WordPress eller velge en av nettstedbyggerne. Du kan også sjekke ut en liste over utvalgte beste IDE for nettutvikling. 

Contents

Innsamle ressursene dine før du begynner:

Så det første du trenger, selv før du oppretter et nettsted med HTML og CSS, er en webserver (hosting). Ikke bekymre deg; trenger du ikke kjøpe din egen maskin. Mange webhotellfirmaer vil selge deg en enkel hostingtjeneste på maskinene sine. Bare googl for “webhotell” og velg noe som ikke er for dyrt.

Når serveren er sortert, er det neste du trenger et domenenavn. Domenenavnet er det nettstedet er identifisert på nettet. For eksempel er dette nettstedets domenenavn websitesetup.org.

Når du har både et domenenavn og en server, kan du koble de to sammen.

Full avsløring: Vi tjener en provisjon hvis du ender med å kjøpe Bluehost gjennom henvisningskoblingene i denne guiden. Dette hjelper oss med å holde WebsiteSetup oppdatert. Takk for støtten.

For å få dette sortert uten smerter på slutten, anbefaler vi å registrere deg hos et selskap som Bluehost.

De vil håndtere alt oppsettet for deg. Dette betyr at de vil: (en) sett opp en hostingkonto for deg, (B) registrer et domenenavn på dine vegne, (C) konfigurere alt slik at det fungerer sammen, og (D) gir deg tilgang til et brukervennlig dashbord.

Gå videre og registrer deg Bluehost, vi venter. Når du er tilbake og har webserveren din konfigurert og klar til å gå, blar du til neste trinn.

PS! Hvis du bare vil eksperimentere med et HTML-nettsted på datamaskinen din, og har ikke tenkt å offentliggjøre det, bruk en lokal webserverprogramvare. Den vi anbefaler og liker å bruke heter XAMPP. Den har versjoner for både Mac og PC, og den er enkel å bruke. her er en guide om hvordan du installerer det på datamaskinen din.

1. Lær det grunnleggende om HTML

Hovedelementet i en HTML-struktur er en HTML stikkord.

En tag, for eksempel, ser slik ut:

NOE

Her har vi å gjøre med en stikkord. Denne vil modig et stykke tekst som er mellom åpningskoden () og avslutningskoden (). I dette tilfellet er det tekststykket NOE.

Men det er andre tagger, bare for å nevne noen:

  • ... vil kursivere teksten mellom åpnings- og lukkemerker
  • ... vil understreke det
  • ...

    er et avsnitt av tekst


  • ...

    er hovedoverskriften på siden

Bortsett fra de enkle taggene, er det også mer komplekse tagger. Hvis du for eksempel vil lage en liste som følgende:

  • Punkt 1
  • Punkt 2
  • Punkt 3

… du kan gjøre det med følgende HTML-kode:

  • Punkt 1
  • Punkt 2
  • Punkt 3

Eller, hvis du vil legge til en lenke til en annen side, som denne:

Dette er en lenke til hjemmesiden vår

… du kan gjøre det med dette koden:

Dette er en lenke til hjemmesiden min

Les dette for å få full liste over HTML-koder. Det vil bli nyttig når du lager et nettsted med HTML og CSS.

2. Forstå HTML-dokumentstruktur

Tenk på HTML-siden din som om den var bygd av Legos. Du legger forskjellige murstein oppå hverandre for å ende opp med en gitt større struktur.

Men i stedet for Lego-klosser, får du HTML-koder …

Her er den enkleste HTML-dokumentstrukturen:





Hei Verden!


Hei Verden!

Min første webside.

Du kan ta koden over, kopiere og lime den inn i en ny fil, lagre dokumentet som index.html, og det blir en perfekt gyldig HTML-side.

La oss forklare de enkelte delene av denne koden:

  • – den første erklæringen av dokumentet
  • – en annen erklæring; sier at det som kommer neste gang er et HTML-dokument skrevet på engelsk
  • – markerer starten på hode seksjon; de hode delen er der alle grunnleggende parametere på siden går; de fleste av disse kommer ikke til å vises på skjermen; de definerer bare hva som skjer under panseret
  • – definerer hvilket tegnsett som brukes til å skrive dokumentet; trenger ikke å bruke for mye tid på dette; bare bruk denne erklæringen som den er
  • Hei Verden! – tittelen på siden; Dette er hva folk vil se i tittellinjen til nettleserne, f.eks .:

tittel i nettleser når du oppretter et nettsted med HTML og CSS

  • – markerer starten på kropp seksjon; det er her alt innholdet på siden går; det er hoveddelen av et HTML-dokument; la oss understreke dette. Dette avsnittet er der du skal ta med alt innholdet som er ment å vises på siden

  • Hei Verden!

    – hovedoverskriften på siden

  • Min første webside.

    – et enkelt avsnitt av tekst

  • – den avsluttende koden for hele HTML-dokumentet

En viktig merknad her. Å jobbe med en HTML-fil i en grunnleggende tekstapp eller en kompleks tekstprosessor som MS Word er ikke en god opplevelse. For å gjøre ting enkelt på deg selv, installer du et verktøy som heter Sublime tekst. Den har versjoner for både Mac og PC, og den er gratis.

Hvorfor er det bedre? Blant annet vil den fargelegge syntaks for en HTML-fil. Det betyr at det visuelt skiller HTML-kodene dine fra tekstinnhold, tagparametere og andre verdier. I utgangspunktet vil det hele bli lesbart. Slik ser vår enkle HTML-struktur ut i sublim tekst:

sublim syntaks er flott når du oppretter et nettsted med HTML og CSS

Ok, tilbake på emnet. Du kan ta det nye index.html fil av deg, kopier den til der hovedkatalogen til webserveren er, og se deretter den siden ved å navigere til den gjennom en nettleser. Ikke bli for begeistret; denne siden vil være ganske stygg (se nedenfor).

denne siden er stygg

OK, så siden er stygg, hvordan du gjør det ikke?

3. Bli kjent med CSS-velgere

Akkurat som HTML har taggene, har CSS det velgere.

Velgere beskriver hvordan et gitt element skal oppføre seg utseendemessig. Her er et eksempel på en CSS-velger:

p {
skriftstørrelse: 18px;
}

Denne velgeren indikerer at all HTML

koder i dokumentet vil ha en skriftstørrelse på 18px.

Imidlertid er en mer praktisk måte å bruke CSS-velgere ikke å begrense alle tagger av en gitt type til en viss styling, men snarere lage forskjellige “klasser” og tilordne dem til tagger en etter en..

For eksempel ser en klassevælger i CSS slik ut:

.normal-tekst {
skriftstørrelse: 18px;
}

Legg merke til prikken (.) før navnet på klassen (normal tekst). Når “normaltekst” -klassen er definert, kan vi nå tilordne den klassen til de spesifikke HTML-taggene som vi vil lage 18px i størrelse.

For eksempel:

Denne teksten blir 18px.

La oss ta et minutt til å forklare alle elementene i den delen av CSS-koden ovenfor:

  • .normal tekst – klassedefinisjon; alt etter navnet på klassen og mellom åpnings- og lukkebrakettene {} definerer hvordan elementene som er tilordnet denne klassen skal se ut
  • skriftstørrelse – et eksempel på CSS-eiendom
  • 18px – en verdi tildelt eiendommen

Det er mange CSS-egenskaper bortsett fra det ovennevnte skriftstørrelse. Her er komplett liste hvis du er nysgjerrig.

4. Sett sammen et CSS-stilark

Et HTML-dokument er veldig strukturelt – hvert element har sin plass, og rekkefølgen på elementer er avgjørende for den endelige konstruksjonen og utseendet til den aktuelle websiden. Et CSS-dokument er mye mindre.

CSS-dokumenter blir ofte referert til som stilark. I utgangspunktet er et CSS-stilark en liste over alle klassedefinisjonene som blir brukt i det tilsvarende HTML-dokumentet. Rekkefølgen på klassedefinisjonene er ikke så avgjørende mesteparten av tiden (i det minste for enkle design).

Måten du setter et CSS-stilark på er ved å definere hver klasse en etter en, og deretter teste om utfallet i sidedesignet er det du ønsket.

Dette høres ut som kjedelig arbeid, og det er det.

Men vi vil gjøre ting enklere for deg, og ikke tvinge deg til å lære HTML og CSS-design for hånd. I stedet for å lære deg alt fra bunnen av, tar vi en levende organisme og dissekerer dens elementer.

Det er her en ting som heter Bootstrap spiller inn.

5. Last ned / installer Bootstrap

Bootstrap er et open-source verktøysett for å lage et nettsted med HTML og CSS.

På vanlig engelsk tar Bootstrap seg av grunnstrukturen i et HTML-dokument og CSS-stilark for deg. Det leverer et rammeverk som sørger for at hoved Stillas på websiden din er klar og optimalisert for videre utvikling.

I utgangspunktet lar Bootstrap deg ikke starte helt fra bunnen av, og i stedet gå rett inn på den morsomme delen. Med det trenger du ikke å jobbe med de ofte kjedelige tidlige stadiene med å lage et nettsted med HTML og CSS.

Det er to stier du kan gå:

  • Alternativ (en): lær Bootstrap – gå til Bootstrap-hjemmesiden, last ned hovedpakken for Bootstrap og begynn å bygge oppå den.
  • Alternativ (B): ta en snarvei – få en startpakke til Bootstrap med et pent design og en allerede demonstrert webside.

Alternativ (en) kan ha en viss læringskurve i begynnelsen, men det er ikke på noen måte den dårligere måten å nærme seg å lage et nettsted med HTML og CSS. Når du mestrer kjernen i Bootstrap-strukturen, kan det være lettere for deg å bygge nye sider og få dem til å se nøyaktig ut som du vil ha dem. De Bootstrap-dokumentasjon er et flott sted å komme i gang med denne stien.

Vi kommer til å gå med Option (B) for denne guiden. Vi gjør dette av et par grunner, sjef for dem:

Å starte med en ferdig struktur sparer mye smerte i å prøve å finne ut de grunnleggende nødvendighetene til et HTML-dokument. Dette lar deg fokusere på de interessante tingene – som å legge ut innhold og få det til å se bra ut.

Kort sagt, å lære ting på denne måten vil gi deg et bedre utseende resultat, som vi antar er det du ønsker.

6. Velg et design

Når du oppretter et nettsted med HTML og CSS, står du fritt til å bruke hvilken som helst Bootstrap-mal du liker. De skal alle jobbe på samme måte.

Imidlertid, for denne guiden, kommer vi til å bruke en av malene av Start Bootstrap. De har et fint utvalg av gratis maler som er optimaliserte, fungerer problemfrie og er også veldig godt designet.

Temaet vi skal bruke heter Kreativ. Den endelige effekten vi kommer til å se slik ut:

den endelige hjemmesiden etter å ha opprettet et nettsted med HTML og CSS

Til å begynne med, Creative-malen, klikk på Gratis nedlasting -knappen som er til høyre (på denne siden) og lagre zip-pakken på skrivebordet ditt.

Pakk ut pakken og flytt innholdet til hovedkatalogen til den lokale webserveren eller webhotellkontoen.

Nå åpner du denne plasseringen gjennom nettleseren din. Du vil se aksjeversjonen av malen:

start bootstrap mal

Det er allerede ganske pent, men nå er det på tide å lære hvordan du bruker HTML og CSS for å gjøre det til akkurat det du vil at det skal være.

7. Tilpass nettstedet ditt med HTML og CSS

La oss jobbe med hjemmesiden til designen først. Dette kommer til å vise oss hvordan vi skal erstatte grafikken, tekstene og stille inn alt generelt.

Vi har snakket om hoveddelen av et HTML-dokument kort over. La oss se litt nærmere på det her.

Når du åpner index.html filen til Bootstrap-siden din i sublim tekst, ser du et hodeseksjon som dette (vi fjernet alle ikke-avgjørende ting fra denne koden for klarhet *):






Kreativ - Start Bootstrap Theme





* Bortsett fra det ovennevnte, var det også kode for å laste inn Google-skrifter, Font Awesome-ikoner og en lysboksmodul for bildene som vises på siden.

De fleste av deklarasjonene her kjenner vi allerede, men det er et par nye:

  • First off, alt mellom parentes er en HTML-kommentar. Den vises ikke på den endelige siden.
  • – det er en av Bootstraps egne erklæringsmerker. Den definerer størrelsen på nettstedets visningsport.
  • – denne linjen laster inn CSS-stilarket i Creative-malen, og den inneholder også standard-stilarket til Bootstrap.

La oss endre den siste erklæringen – linjen som laster inn CSS – for å gjøre det enklere å jobbe med senere.

Endre linjen til:


Dette er bare en liten forskjell – den vil laste den ikke-forkortede versjonen av det samme CSS-arket. Denne versjonen er bare enklere å endre.

Bla nå ned til bunnen av index.html fil. Følgende linjer ser du rett før avslutningen kropp stikkord:

        

De er ansvarlige for å laste inn JavaScript-filer som håndterer noen av de mer visuelle interaksjonene i designet. For eksempel når du klikker på Om -koblingen i toppmenyen, blir du tatt med glatt til omtrent-blokken på samme side – dette gjøres blant annet via JavaScript. Vi trenger ikke å problemer med å forstå denne koden akkurat nå. La oss forlate dette en annen gang.

La oss i stedet jobbe med å legge til vårt eget innhold på siden:

8. Legg til innhold og bilder

Det første du vil gjøre er å endre tittelen på siden.

1. Endre tittelen

Finn tittel tag i hodeseksjonen og erstatt teksten mellom taggene til noe eget:

Mitt HTML-nettsted

2. Tilpass heltseksjonen

Heltedelen er det vi kaller denne blokken:

heltseksjonen

Det ville være kult å ha vårt eget innhold inne i det. Gå tilbake til din for å endre denne blokken index.html arkiver og finn denne delen:

...


...

Finne ut mer

Hele kodeblokken styrer hva som finnes i helten.

Det er noen nye koder her:


  • – dette er en tagg som definerer at hele seksjonen er overskriften på siden; denne taggen har et par brødre og søstre i form av
    tagg og
    stikkord
  • – er en generell CSS-kode som indikerer at det som følger er en egen seksjon (aka inndeling) i HTML-dokumentet; bruk av det gjør det enklere å skille individuelle seksjoner på siden visuelt

Du vil også legge merke til at noen av de andre kodene (som vi allerede vet) ser ut til å være litt mer kompliserte, med flere CSS-klasser tildelt dem. For eksempel:

...

Klassene tildelt

taggen her er tekst-stor bokstav tekst-hvit skrift-vekt-fet.

Disse klassene er opprettet av Bootstrap og av utvikleren av det kreative temaet. Den gode nyheten er at du også kan bruke dem fritt når du oppretter et nettsted med HTML og CSS.

Helt ærlig kan du tilpasse hvilken som helst tag du legger til i strukturen på siden din ved å tilordne et hvilket som helst antall klasser til det.

Hvis du vil se den komplette listen over tilgjengelige klasser, kan du åpne hovedmenyen creative.css filen som er i css underkatalog for Creative-temaet.

Å få tak i alle disse klassene kan virke skremmende med det første, men det er faktisk enklere enn det ser ut.

For eksempel en av klassene tildelt noen av avsnittene i vår index.html filen er font-vekt-light. Når du hopper inn i creative.css fil og ctrl + f ser du etter det klassens navn, vil du se at det ganske enkelt angir font-vekt parameter slik:

.font-vekt-lett {
fontvekt: 300;
}

Endre standardtekstene i index.html filen er veldig enkel. Bare finn taggen du vil redigere og endre hva som er mellom åpnings- og lukkemerker.

For å endre hovedoverskriften, for eksempel, bare endre denne:

Din favoritt ...

Til noe som følgende:

Beundre HTML-nettstedet mitt!

Du kan gjøre det samme for alle avsnitt og andre tagger på siden.

Det som er viktig er at du også kan legge til nye avsnitt fritt. Vi kan for eksempel ta avsnittet som allerede er på siden, lage en kopi av det og lime det rett under det opprinnelige avsnittet; som så:

Start Bootstrap kan ...

Punkt 2

La oss erstatte bildet som er i bakgrunnen, med tekstene tatt vare på.

Dette er litt mer komplisert å gjøre siden det krever at vi går inn i CSS stilarkfilen og gjør modifiseringen der. Som du kan se i HTML-koden til Masthead seksjonen, ville ingen koder indikere å inkludere et bilde til siden på noen måte. Alt dette gjøres via CSS.

Når du tar en ny titt på hele koden som håndterer koden Masthead delen, vil du se at den er tilordnet en klasse som heter mastetoppen. Denne kodelinjen håndterer klasseoppgaven:

De mastetoppen klasse er den som setter et bilde i bakgrunnen for hele blokken.

La oss åpne creative.css fil igjen og se etter “masthead” -klassen:

header.masthead {
polstring: 10rem;
polstring-bunn: kalk (10rem - 72 px);
bakgrunn: lineær gradient (til bunn, rgba (92, 77, 66, 0,8) 0%, rgba (92, 77, 66, 0,8) 100%), url ("../ img / bg-masthead.jpg" );
bakgrunnsposisjon: sentrum;
bakgrunn-gjenta: ikke-gjenta;
bakgrunnsvedlegg: bla;
bakgrunnsstørrelse: dekke;
}

Denne koden gjør alle slags flotte ting på bildet vårt (som å legge til et overlegg, skyggelegging osv.), Men den viktige delen er dette: url ( "../ img / bg-masthead.jpg"). Dette er linjen som indikerer hvor du kan finne bakgrunnsbildet. Det kommer til å være i img katalogen.

Hvis du vil endre dette bakgrunnsbildet, tar du ditt eget bilde, kopierer det til img undermappe og deretter kopiere og lime inn navnet i stedet for originalen bg-masthead.jpg fil. Kort sagt, endre dette: url ( "../ img / bg-masthead.jpg") til dette: url ( "../ img / YOURFILE.jpg").

3. Tilpass de andre blokkene på siden

Når du går gjennom index.html fil, vil du merke at det er mange forskjellige seksjoner allerede på siden. Vi har en seksjon for navigasjon, og Om en blokk, noen tjenester, en portefølje, en oppfordring til handling, en kontakt blokkering, og bunntekst.

Selv om det er forskjellig innhold i alle disse seksjonene, er seksjonene i seg selv i struktur. De har alle omtrent det samme settet med HTML-koder – bare forskjellige CSS-klasser tildelt dem.

Den beste måten å endre siden slik at den passer til dine behov, er å gå gjennom blokkene en etter en og eksperimentere ved å endre ting rundt.

Bortsett fra å endre tekstene, kan du også flytte hele seksjoner rundt (delene mellom

tags). Gitt, du må gjøre det for hånd (ved å kutte og deretter lime inn elementer på plass), det er fremdeles greit å gjøre.

Når det er sagt, er det to ganske grunnleggende modifikasjoner som vi ikke har snakket om ennå. La oss dekke disse neste:

9. Finjuster farger og skrifter

Det er veldig enkelt å endre farger eller skrifter i HTML og CSS. Det enkleste du kan gjøre er å tildele litt in-line styling til en HTML-kode. For eksempel:

Rød tekst

I HTML er farger representert med hekseverdiene. “# FF0000” er rød. Her er en tabell over alle de andre standardfarger.

En bedre måte å tilordne farger på er å gjøre det via CSS-stilarket. For å få samme effekt som koden over, kan vi for eksempel sette dette i CSS-stilarket:

p.red {
farge: # FF0000;
}

Og bruk deretter følgende stykke HTML-kode i hoveddokumentet:

Rød tekst

Den andre metoden er i utgangspunktet hvordan ting gjøres i Bootstrap.

Hvis du vil endre fargen på hvilken som helst tekst på siden, må du først finne taggen som er ansvarlig for å style den teksten, og deretter gå inn i stilarket og endre den tilsvarende klassen, eller opprette en ny klasse.

Her er et eksempel; si at du vil endre fargen på overskriften som sier “Til tjeneste”. Foreløpig er den svart, og dette er koden som håndterer den:

Til tjeneste

For å endre farge er den beste måten å lage en ny klasse som heter, si, .tekst-orange og angi fargeverdien der, slik:

.tekstoransje {
farge: # f4623a! viktig;
}

* The !viktig vil sørge for at denne fargeinnstillingen overskriver alle andre fargeinnstillinger som kom før den.

Nå kan vi gå tilbake til overskriften vår og endre koden til:

Til tjeneste

Med disse endringene vil overskriften nå være oransje:

oransje h2

For å endre skrift og størrelse, kan du gjøre noe veldig likt. Men først et eksempel på hvordan en fontdefinisjonsblokk ser ut i CSS:

.SOMECLASS {
font-family: "Merriweather", Roboto, sans-serif;
skriftstørrelse: 18px;
}
  • laste skrifter Merriweather, Roboto, og en system-standard sans serif font (les dette for å lære om websikre skrifter)
  • sett skriftstørrelsen til 18px

Denne typen definisjon kan plasseres i hvilken som helst CSS-klasse, akkurat som fargedefinisjonen. Egentlig er font- og fargedefinisjoner ofte funnet i de samme klassedeklarasjonene.

Når vi går tilbake til vårt forrige eksempel, for å endre skriftstørrelsen for den overskriften som sier “Til tjeneste”, kunne vi først lage en klasse som denne:

.tekst-xxl {
skriftstørrelse: 50px;
}

Og tilordn deretter denne klassen til overskriften:

Til tjeneste

�� Når du endrer farger eller skrifter i Bootstrap-laget malen, må du først se gjennom CSS-stilarket for klasser som allerede kan gi deg alternative størrelser eller farger. Bruk de der det er tilgjengelig.

10. Lag flere sider

Nå som du har tilpasset hjemmesiden, er det på tide å begynne å jobbe med noen ekstra sider og så koble dem til hjemmesiden.

Når du oppretter et nettsted med HTML og CSS, kan du bygge et hvilket som helst antall undersider og deretter koble dem sammen.

Her er noen av de vanlige sidene som de fleste nettsteder trenger:

  • om side
  • kontakt
  • portefølje
  • produkter / tjenester
  • team
  • policyer (personvern, vilkår osv.)

1. Start med oppsettet

Når du bygger en ny webside, er den første avgjørelsen du må ta hva du vil at oppsettet skal være.

Når du oppretter et nettsted med HTML og CSS, er det ingenting som hindrer deg i å lage samme det layout du ønsker. Den eneste vanskeligheten er faktisk å sette det sammen.

HTML og CSS kan være vanskelig å håndtere når du starter fra en blank skjerm, så vi kommer til å bruke Bootstrap her også. Først skal vi vise deg noen prinsipper for å lage en layout og deretter demonstrere hvordan du gjør det med Bootstrap.

Måten du kan tenke på utformingen av websiden din er å betrakte den som en sekvens av individuelle blokker – en på toppen av en annen. Noe som dette (legg merke til de fire distinkte blokkene):

oppsettet når du oppretter et nettsted med HTML og CSS

Det fine med Bootstrap er at den håndterer de grunnleggende layoutprinsippene og utseendedetaljene for deg, slik at du bare kan fokusere på å plassere disse blokkene på de rette stedene.

I denne delen av guiden skal vi lage en ny “om” -side.

For å begynne med lager vi bare et veldig grunnleggende prosjekt for oppsettet. Noe som den ovenfor.

  • det er en navigasjonsmeny øverst,
  • en overskriftblokk i full bredde under menyen,
  • hovedinnholdsseksjonen i midten, felt i midten av skjermen (ikke i full bredde),
  • og en bunntekst.

La oss nå bygge denne layouten i HTML.

2. Bygg en ny side

Den enkleste måten å begynne å jobbe på en ny side er å duplisere en eksisterende side og bruke den som en mal. Det er hva vi skal gjøre.

Lag en kopi av index.html fil og gi den nytt navn about.html.

Bare rediger den nye for å gjøre sidene lettere å skille på dette tidlige stadiet about.html arkiver og endre hva som er i </code> stikkord. For eksempel, <code><title>Om meg.

La oss nå gå gjennom filen linje for linje og bestemme hva vi vil legge igjen og hva vi fjerner:

  • De navigasjon meny (nedenfor ). Du vil sannsynligvis holde denne delen intakt, bare for å gjøre navigasjonsopplevelsen enhetlig på alle sider.
  • De hovedhelten seksjon (nedenfor ). Denne trenger vi ikke i henhold til layoutprosjektet vårt. Du kan slette hele delen.
  • De Om seksjon (nedenfor ). Vi kommer til å bruke denne delen igjen som vår viktigste overskriftblokk.
  • De tjenester seksjon, portefølje seksjon, oppfordring til handling seksjon, og kontakt seksjon (alt mellom og ). Vi trenger ikke disse seksjonene i det hele tatt. Du kan slette dem.
  • De bunntekst delen og alt under det (nedenfor ). Dette må vi beholde.

Dette gjør vår nåværende kode ganske enkel. I utgangspunktet er det bare dette:



























Det vi savner her er hovedinnhold seksjon. For å bygge det skal vi gjenbruke om delen.

Gå videre og lag en kopi av om delen. Denne:

...


...

Endre de to første linjene til dette:

Siden vi ikke trenger det

overskrift der og

element, la oss bare fjerne dem. Det eneste som er igjen i hele blokken, kommer til å være et avsnitt med tekst. Som så:

Et avsnitt av tekst.

Når du lagrer filen og navigerer til den via nettleseren, vil du se at du i utgangspunktet har to veldig like blokker, den ene under den andre, med samme fargebakgrunn:

om sidehode

Det ville være bedre å ha en hvit bakgrunn i hovedinnholdsseksjonen. For å endre det, er det eneste vi trenger å gjøre å fjerne bg-primær klasse fra hoveddelen

stikkord. Lag med andre ord taggen til dette:

Det er bedre:

om sidehode 2

La oss legge til noen dummy-avsnitt på siden for å fylle den litt mer, pluss kanskje et underhode:

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

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

subhead

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

Slik ser du ut på siden:

om ver 1

Hvis du ikke liker at teksten skal sentreres, er det bare å fjerne den tekst-senter klasse fra en av

tags.

om ver 2

Hvis du vil legge litt mer teft på disse tekstblokkene, kan du opprette nye CSS-klasser (som før) og tilordne dem til avsnittene i blokken. Du kan også se på det gjeldende stilarket og se hvilke klasser som allerede er der for dette formålet. Her er de vi tilordnet

og

tags:

Lorem ipsum dolor sit amet...

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

subhead

Og her er effekten:

om ver 3

En ting til som vi skal gjøre her er å legge til et bilde et sted på siden.

Slik ser et eksempel på en bildekode i HTML ut:


Ganske enkelt, ikke sant? Den eneste parameteren der er banen til bildefilen. For å holde ting pent organisert, kan du legge bildet ditt i img katalog igjen (akkurat som du gjorde med den bakgrunnen for en stund siden). I et slikt tilfelle vil bildekoden være:


Når det er sagt, er bildekoden i denne spesifikke konfigurasjonen ganske begrenset. La oss tildele noen Bootstrap-klasser for å gjøre det litt mer raffinert. Særlig:


Disse to klassene vil gi bildet avrundede hjørner, og vil også sørge for at størrelsen på bildet ikke overstiger størrelsen på blokken der det sitter.

Du kan nå legge til en kode som dette et sted i hovedinnholdet på om-siden. For eksempel her:

Lorem ipsum dolor sit amet...

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

subhead

Og her er den endelige effekten på siden:

om ver 4

Her er vår omside i all sin prakt:

om siden fullført

3. Link til den nye siden

Med den nye siden ferdig, la oss nå koble den fra hjemmesiden ( index.html fil). Det beste stedet å legge til denne koblingen er naturlig nok i navigasjonsmenyen (nedenfor) ).

Se spesielt etter denne linjen:

Om

Vi kommer til å endre det til dette:

Om

Dette er noe vi ikke har snakket om ennå, men tag er en lenke tag i HTML. Ved å bruke den kan du koble til hvilken som helst webside ved å oppgi adressen til den siden i href parameter. Teksten til lenken – den klikkbare delen av lenken – vil være teksten mellom åpningen og lukkingen tags.

Når du oppdaterer hjemmesiden nå, ser du den nye lenken din som peker til om-siden.

Videre lesning:

På dette stadiet har du i utgangspunktet bygget deg et enkelt nettsted som består av to sider – a hjemmeside og en Om side.

Det du bør gjøre nå er å skylle og gjenta ved å lage nye sider, stille dem opp, legge til innhold til dem og deretter koble alt fra navigasjonsmenyen.

Andre ting som er verdt å gjøre når du går gjennom disse trinnene, er å lære deg HTML- og CSS-prinsipper, gå gjennom sjekklisten og lære Bootstrap og strukturer og klasser. Noen ressurser for det:

  • HTML5 jukseark
  • CSS jukseark
  • Javascript jukseark
  • HTML opplæring
  • Bootstrap tutorial
  • Bootstrap jukseark

Mastering Bootstrap, høyst sannsynlig den beste banen som er tilgjengelig for å bygge optimaliserte og vakre nettsteder med HTML og CSS.

Hvis du har spørsmål om hvordan du oppretter et nettsted med HTML og CSS, ikke nøl med å sende dem inn i kommentarene.

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

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