Hur man kodar en webbplats

Hur man kodar en webbplatsVill du lära dig att skapa en webbplats med HTML och CSS?


Du är på rätt plats. I den här guiden visar vi dig alla steg för att komma från en tom skärm till en fungerande webbplats som är optimerad och ganska snygg på samma gång.

Men först, vad är HTML och CSS?

Du kan bara leta upp båda termerna på Wikipedia, men dessa definitioner är inte särskilt läservänliga. Låt oss förenkla saker lite:

  • html (Hypertext Markup Language) definierar strukturen och innehållet på en webbsida – var saker går, på vilket sätt de är planerade, och vad är på sidan
  • CSS (Cascading Style Sheets) definierar styling / presentation på en webbsida och elementen på den

Du kan egentligen inte ha en utan den andra – de två arbetar tillsammans för att göra upp den slutliga webbsidan, dess design och innehållet som finns på den.

Notera; när vi säger ”en webbsida”, menar vi ett HTML-dokument – en enda sida som är en del av din webbplats. Medan “en webbplats” är den kompletta saken – hela din webbplats med alla dess individuella webbsidor.

Hur man skapar en webbplats med HTML och CSS (innehållsförteckning):

  1. Lär dig grunderna i HTML
  2. Förstå HTML-dokumentstruktur
  3. Lär känna CSS-väljare
  4. Sätt ihop ett CSS-formatmall
  5. Skaffa Bootstrap
  6. Välj en design
  7. Anpassa din webbplats med HTML och CSS
  8. Lägg till innehåll och bilder
  9. Finjustera färger och teckensnitt
  10. Skapa ytterligare sidor

Total tid att skapa en webbplats: 4-5 timmar
Skicklighetsnivå: Mellanliggande

Om du tycker att detta är för komplicerat rekommenderar vi att du antingen skapar en webbplats med WordPress eller väljer en av webbplatsbyggarna. Du kan också kolla in en lista över utvalda bästa IDE för webbutveckling. 

Contents

Innan du börjar, samla dina resurser:

Så det första du behöver redan innan du skapar en webbplats med HTML och CSS är en webbserver (värd). Oroa dig dock inte; du behöver inte köpa din egen maskin. Många webbhotellföretag kommer att sälja dig en enkel webbhotell på sina maskiner. Bara google för “webbhotell” och välj något som inte är för dyrt.

När servern är sorterad är nästa sak du behöver ett domännamn. Domännamnet är vad webbplatsen identifieras på webben. Till exempel är webbplatsens domännamn websitesetup.org.

När du har både ett domännamn och en server kan du ansluta de två tillsammans.

Full information: Vi tjänar en provision om du slutligen köper Bluehost genom våra länkar i denna guide. Detta hjälper oss att hålla webbplatsuppsättningen igång och uppdaterad. Tack för ditt stöd.

För att få detta ordnat utan smärta i slutet rekommenderar vi att du registrerar dig hos ett företag som Bluehost.

De kommer att hantera all installation för dig. Vilket innebär att de kommer att: (A) skapa ett värdkonto för dig, (B) registrera ett domännamn för dina räkning, (C) konfigurera allt för att arbeta tillsammans, och (D) ger dig tillgång till en lättanvänd instrumentpanel.

Gå vidare och registrera dig Bluehost, Jamen vänta. När du är tillbaka och har din webbserver konfigurerad och redo att gå, bläddra till nästa steg.

P.S. Om du bara vill experimentera med en HTML-webbplats på din dator, och tänker inte publicera det, använd en lokal webbserverprogramvara. Den vi rekommenderar och gillar att använda heter XAMPP. Den har versioner för både Mac och PC och är lätt att använda. här är en guide om hur du installerar det på din dator.

1. Lär dig grunderna i HTML

Huvudelementet i en HTML-struktur är en HTML märka.

En tagg, till exempel, ser ut så här:

NÅGOT

Här har vi att göra med en märka. Den här kommer djärv en textbit som är mellan öppningstaggen () och den avslutande taggen (). I det här fallet är det textstycket NÅGOT.

Men det finns andra taggar, bara för att nämna några:

  • ... kommer att kursivera texten mellan öppnings- och stängningstaggarna
  • ... kommer att understryka det
  • ...

    är ett stycke i texten


  • ...

    är huvudhuvudet på sidan

Förutom de enkla taggarna finns det också mer komplexa taggar. Om du till exempel vill skapa en lista på följande sätt:

  • Punkt 1
  • Punkt 2
  • Punkt 3

… du kan göra det med följande HTML-kod:

  • Punkt 1
  • Punkt 2
  • Punkt 3

Eller om du vill lägga till en länk till en annan sida, som den här:

Det här är en länk till vår hemsida

… du kan göra det med den här koden:

Det här är en länk till min hemsida

Läs detta för att få fullständig lista över HTML-taggar. Det kommer att bli användbart när du skapar en webbplats med HTML och CSS.

2. Förstå HTML-dokumentstruktur

Tänk på din HTML-sida som om den är byggd av Legos. Du lägger olika tegelstenar ovanpå varandra för att hamna med en given större struktur.

Men istället för Lego-tegel får du HTML-taggar …

Här är den enklaste HTML-dokumentstrukturen:





Hej världen!


Hej världen!

Min första webbsida.

Du kan ta koden ovan, kopiera och klistra in den i en ny fil, spara dokumentet som index.html, och det kommer att bli en perfekt giltig HTML-sida.

Låt oss förklara de enskilda delarna av denna kod:

  • – Dokumentets första förklaring
  • – ytterligare en deklaration. säger att det som ska komma nästa är ett HTML-dokument skrivet på engelska
  • – markerar början på huvud sektion; de huvud avsnittet är där alla grundläggande parametrar på sidan går; de flesta av dessa kommer inte att visas på skärmen; de definierar bara vad som händer under huven
  • – definierar vilken teckenuppsättning som används för att skriva dokumentet; ingen anledning att spendera för mycket tid på detta; använd bara denna förklaring som den är
  • Hej världen! – sidens titel; det är vad folk kommer att se i titelfältet för sina webbläsare, t.ex.

titel i webbläsaren när du skapar en webbplats med HTML och CSS

  • – markerar början på kropp sektion; det är här allt innehållet på sidan går; det är huvuddelen av ett HTML-dokument; låt oss betona detta, det här avsnittet är där du kommer att inkludera allt innehåll som är tänkt att visas på sidan

  • Hej världen!

    – huvudhuvudet på sidan

  • Min första webbsida.

    – ett enkelt textavsnitt

  • – den slutliga taggen för hela HTML-dokumentet

En viktig anmärkning här. Att arbeta med en HTML-fil i en grundläggande textapp eller en komplex textprocessor som MS Word är inte en bra upplevelse. För att göra det enkelt för dig själv, installera ett verktyg som heter Sublim text. Det har versioner för både Mac och PC, och det är gratis.

Varför är det bättre? Det kommer bland annat att färga syntaxen för en HTML-fil. Detta innebär att det visuellt kommer att skilja dina HTML-taggar från textinnehåll, tagparametrar och andra värden. I grund och botten kommer allt att bli läsbart. Så här ser vår enkla HTML-struktur ut i Sublime Text:

sublim syntax är bra när du skapar en webbplats med HTML och CSS

Okej, tillbaka till ämnet. Du kan ta det nya index.html fil av din, kopiera den till där huvudkatalogen på din webbserver är och se sedan den sidan genom att navigera till den genom en webbläsare. Blir dock inte för upphetsad; den här sidan kommer att vara ganska ful (se nedan).

den här sidan är ful

Okej, så sidan är ful, hur man gör det inte så?

3. Lär känna CSS-väljare

Precis som HTML har sina taggar, så har CSS selektorer.

Väljarna beskriver hur ett givet element ska bete sig utseendemässigt. Här är ett exempel på en CSS-väljare:

p {
typstorlek: 18px;
}

Denna väljare indikerar att all HTML

taggar i dokumentet kommer att ha en teckenstorlek på 18px.

Ett mer praktiskt sätt att använda CSS-väljare är dock inte att begränsa alla taggar av en viss typ till en viss styling, utan snarare skapa olika “klasser” och tilldela dem till taggar en efter en..

Till exempel ser en klassväljare i CSS så här:

.normal-text {
typstorlek: 18px;
}

Lägg märke till punkten (.) före klassens namn (normal text). Med klassen ”normal-text” definierad kan vi nu tilldela den klassen till de specifika HTML-taggarna som vi vill göra 18px i storlek.

Till exempel:

Den här texten kommer att bli 18px.

Låt oss ta en minut till för att förklara alla element i den CSS-koden ovan:

  • .normal text – klassdefinition; allt efter klassens namn och mellan öppnings- och stängningskonsolerna {} definierar hur elementen som tilldelats denna klass kommer att se ut
  • textstorlek – ett exempel på CSS-egenskap
  • 18px – ett värde tilldelat fastigheten

Det finns massor av CSS-egenskaper bortsett från ovanstående textstorlek. Här är komplett lista om du är nyfiken.

4. Sätt ihop ett CSS-formatmall

Ett HTML-dokument är väldigt strukturellt – varje element har sin plats, och elementens ordning är avgörande för den slutliga konstruktionen och utseendet på den aktuella webbsidan. Ett CSS-dokument är mycket mindre.

CSS-dokument kallas ofta formatmallar. I princip är ett CSS-formatmall en lista över alla klassdefinitioner som används i motsvarande HTML-dokument. Ordningen på klassdefinitionerna är inte så avgörande för det mesta (åtminstone för enkla mönster).

Hur du sätter ihop ett CSS-formatmall är genom att definiera varje klass en efter en och sedan testa om resultatet i din siddesign är vad du ville ha.

Detta låter som tråkigt arbete, och det är det.

Men vi kommer att göra saker enklare för dig och inte tvinga dig att lära dig HTML- och CSS-design för hand. Istället för att lära dig allt från grunden tar vi en levande organisme och dissekerar dess element.

Det är här en sak som heter Bootstrap spelar in.

5. Ladda ner / installera Bootstrap

Bootstrap är en öppen källkod för att skapa en webbplats med HTML och CSS.

På vanligt engelska tar Bootstrap hand om grundstrukturen för ett HTML-dokument och CSS-formatmall för dig. Det ger en ram som säkerställer att huvudställningen på din webbsida är redo och optimerad för vidare utveckling.

I grunden låter Bootstrap dig inte börja från början, utan istället gå in i den roliga delen. Med det behöver du inte arbeta med de ofta tråkiga tidiga stadierna för att skapa en webbplats med HTML och CSS.

Det finns två vägar du kan ta:

  • Alternativ (A): lära sig Bootstrap – gå till Bootstrap-hemsidan, ladda ner huvudpaketet för Bootstrap och börja bygga ovanpå det.
  • Alternativ (B): ta en genväg – få ett startpaket för Bootstrap med en snygg design och en redan byggd demosida.

Alternativ (A) kanske har någon inlärningskurva i början, men det är inte på något sätt det sämre sättet att närma sig att skapa en webbplats med HTML och CSS. När du behärskar den grundläggande Bootstrap-strukturen kan det vara lättare för dig att bygga nya sidor och få dem att se exakt ut som du vill ha dem. De Bootstrap-dokumentation är ett bra ställe att komma igång med den här vägen.

Vi kommer att gå med Option (B) för den här guiden. Vi gör detta av några orsaker, chef för dem:

Att börja med en färdig struktur sparar mycket smärta i att försöka ta reda på de grundläggande nödvändigheterna i ett HTML-dokument. Detta låter dig fokusera på intressanta saker – som att lägga ut innehåll och få det att se bra ut.

Kort sagt, att lära sig saker på detta sätt kommer att ge dig ett snyggare resultat snabbare, vilket vi antar är vad du vill ha.

6. Välj en design

När du skapar en webbplats med HTML och CSS kan du använda alla Bootstrap-mallar du gillar. De borde alla fungera på samma sätt.

Men för den här guiden kommer vi att använda en av mallen från Starta Bootstrap. De har ett trevligt urval av gratismallar som är optimerade, fungerar problemfria och är också mycket väl utformade.

Det tema vi ska använda heter Kreativ. Den slutliga effekten vi kommer att se ut kommer att se ut så här:

sista hemsidan efter att ha skapat en webbplats med HTML och CSS

Till att börja med, kreativ mall, klicka på Gratis nedladdning som är till höger (på denna sida) och spara zip-paketet på skrivbordet.

Packa upp paketet och flytta innehållet till huvudkatalogen på din lokala webbserver eller ditt webbhotellkonto.

Öppna nu den platsen i din webbläsare. Du kommer att se lagerversionen av mallen:

starta bootstrap-mall

Det är redan ganska snyggt, men nu är det dags att lära sig hur man använder HTML och CSS för att göra det till exakt vad du vill att det ska vara.

7. Anpassa din webbplats med HTML och CSS

Låt oss arbeta på designens hemsida först. Detta kommer att visa oss hur vi ska ersätta grafik, texter och ställa in allt i allmänhet.

Vi har pratat om huvudavsnittet i ett HTML-dokument kort ovan. Låt oss ta en djupare titt på det här.

När du öppnar index.html fil på din Bootstrap-webbplats i Sublime Text, ser du ett huvudavsnitt som detta (vi tog bort alla icke-avgörande saker från den här koden för tydlighet *):






Creative - Starta Bootstrap Theme





* Bortsett från ovanstående fanns det också kod för att ladda Google-teckensnitt, teckensnitt ikoner och en lightbox-modul för bilderna som visas på sidan.

De flesta av deklarationerna här känner vi redan, men det finns ett par nya:

  • Först ut, allt mellan parentes är en HTML-kommentar. Det dyker inte upp på sista sidan.
  • – det är en av Bootstraps egna deklarationstaggar. Den definierar storleken på webbplatsens visningsport.
  • – den här raden laddar CSS-formatmallen i Creative-mallen och den innehåller också standardmallen för Bootstrap.

Låt oss ändra den sista deklarationen – raden som laddar CSS – för att göra det enklare att arbeta med senare.

Ändra den raden till:


Det här är bara en liten skillnad – det kommer att ladda den icke-förkortade versionen av samma CSS-ark. Denna version är bara lättare att modifiera.

Bläddra nu ner till botten av index.html fil. Följande rader ser du rätt före avslutningen kropp märka:

        

De ansvarar för att ladda JavaScript-filer som hanterar några av de mer visuella interaktionerna i designen. Till exempel när du klickar på Handla om -länken i toppmenyn, kommer du att gå smidigt till omkring-blocket på samma sida – detta görs bland annat via JavaScript. Vi behöver inte besvära oss med att förstå den här koden just nu. Låt oss lämna detta till en annan tid.

Låt oss istället arbeta med att lägga till vårt eget innehåll på sidan:

8. Lägg till innehåll och bilder

Det första du vill göra är att ändra sidans titel.

1. Ändra titeln

Hitta titel tag i huvudavsnittet och ersätt texten mellan taggarna till något eget:

Min HTML-webbplats

2. Anpassa hjältesektionen

Hjältesektionen är det vi kallar detta block:

hjälte avsnitt

Det vore coolt att ha vårt eget innehåll inuti det. För att ändra detta block, gå tillbaka till ditt index.html arkivera och hitta detta avsnitt:

...


...

Få reda på mer

Hela koden blockerar vad som finns i hjälteavsnittet.

Det finns några nya taggar här:


  • – detta är en tagg som definierar att hela avsnittet är sidhuvudet; den här taggen har ett par bröder och systrar i form av

    tagg och

    märka
  • – är en allmän CSS-tagg som indikerar att det som följer är ett separat avsnitt (aka division) i HTML-dokumentet; användningen av det gör det lättare att särskilja enskilda avsnitt på sidan visuellt

Du kommer också att märka att några av de andra taggarna (som vi redan vet) ser ut att vara lite mer komplexa, med flera CSS-klasser tilldelade dem. Till exempel:

...

Klasserna tilldelade

taggen här är text-versaler text-vit typsnitt-vikt-fetstil.

Dessa klasser har skapats av Bootstrap och av utvecklaren av det kreativa temat. Den goda nyheten är att du också kan använda dem fritt när du skapar en webbplats med HTML och CSS.

Ärligt talat kan du anpassa alla taggar du lägger till på din sidas struktur genom att tilldela valfritt antal klasser till den.

Om du vill se den kompletta listan över tillgängliga klasser kan du öppna huvudmenyn creative.css fil som finns i css underkatalogen för Creative-temat.

Att få ett grepp om alla dessa klasser kan tyckas skrämmande till en början, men det är faktiskt mycket lättare än det ser ut.

Till exempel en av klasserna tilldelade några av styckena i vår index.html filen är font-weight-ljus. När du hoppar in i creative.css fil och ctrl + f letar du efter det klassnamnet ser du att det helt enkelt ställer in font-weight parameter som så:

.font-vikt-lätt {
font-vikt: 300;
}

Ändra standardtexter i index.html filen är mycket enkel. Hitta bara taggen som du vill redigera och ändra vad som är mellan öppnings- och stängningstaggarna.

För att till exempel ändra huvudrubriken, ändra bara detta:

Din favorit ...

Till något liknande följande:

Beundra min HTML-webbplats!

Du kan göra samma sak för alla stycken och andra taggar på sidan.

Det viktiga är att du också kan lägga till nya stycken fritt. Vi kan till exempel ta det avsnitt som redan finns på sidan, göra en kopia av det och klistra in det direkt under det ursprungliga stycket; såhär:

Starta Bootstrap kan ...

Punkt 2

Nu, med de texter som tas om hand, låt oss ersätta den bild som finns i bakgrunden.

Detta är lite mer komplicerat att göra eftersom det kräver att vi går in i CSS-formatmallen och gör ändringarna där. Som du kan se i HTML-koden för Masthead Inget tagg skulle indikera att du inkluderar en bild på sidan på något sätt. Allt görs via CSS.

När du tar en ny titt på hela kodblocket som hanterar Masthead avsnittet ser du att det tilldelas en klass som heter masttoppen. Den här kodraden hanterar klassuppgiften:

De masttoppen klass är den som sätter en bild i bakgrunden för hela blocket.

Låt oss öppna creative.css arkivera igen och leta efter klassen “masthead”:

header.masthead {
polstring: 10rem;
polstring-botten: beräkna (10rem - 72px);
bakgrund: linjär gradient (till botten, rgba (92, 77, 66, 0,8) 0%, rgba (92, 77, 66, 0,8) 100%), url ("../ img / bg-masthead.jpg" );
bakgrundsposition: centrum;
bakgrund-upprepa: ingen upprepa;
bakgrund-bilaga: rulla;
bakgrundsstorlek: täcka;
}

Den här koden gör alla slags snygga saker till vår bild (som att lägga till ett overlay, skuggning, etc.), men den viktiga delen är detta: url ( "../ img / bg-masthead.jpg"). Detta är den rad som anger var du kan hitta bakgrundsbilden. Det kommer att vara i img underkatalog.

Om du vill ändra denna bakgrundsbild tar du en egen bild, kopierar den till img underkatalog och kopiera och klistra sedan in namnet istället för originalet bg-masthead.jpg fil. Kort sagt, ändra detta: url ( "../ img / bg-masthead.jpg") till detta: url ( "../ img / YOURFILE.jpg").

3. Anpassa de andra blocken på sidan

När du går igenom index.html fil, kommer du att märka att det finns många olika avsnitt redan på sidan. Vi har ett avsnitt för navigering, och handla om ett block, några tjänster, en portfölj, en uppmaning till handling, en Kontakt block, och a sidfot.

Det finns olika innehåll i alla dessa avsnitt, men själva avsnitten har samma struktur. De har alla ungefär samma uppsättning HTML-taggar – bara olika CSS-klasser tilldelade dem.

Det bästa sättet att ändra sidan så att den passar dina behov är att gå igenom blocken en efter en och experimentera genom att ändra saker.

Förutom att ändra texterna kan du också flytta hela avsnitt runt (delarna mellan

taggar). Visst måste du göra det för hand (genom att klippa och sedan klistra in element på plats), det är fortfarande enkelt att göra.

Med det sagt finns det två ganska grundläggande ändringar som vi inte har pratat om ännu. Låt oss täcka följande:

9. Finjustera färger och typsnitt

Att ändra färger eller teckensnitt är mycket enkelt att göra i HTML och CSS. Det enklaste du kan göra är att tilldela lite in-styling till en HTML-tagg. Till exempel:

Röd text

I HTML representeras färger av deras hexvärden; “# FF0000” är röd. Här är en tabell över alla andra standardfärger.

Ett bättre sätt att tilldela färger är att göra det via CSS-formatmallen. Till exempel, för att få samma effekt som koden ovan, kan vi lägga detta i vårt CSS-formatmall:

p.red {
färg: # FF0000;
}

Och använd sedan följande HTML-kod i huvuddokumentet:

Röd text

Den andra metoden är i princip hur saker och ting görs i Bootstrap.

För att ändra färgen på text på sidan, hitta först taggen som är ansvarig för att styla den texten och gå sedan in i mallen och ändra motsvarande klass, eller skapa en ny klass.

Här är ett exempel; säger att du vill ändra färgen på rubriken som säger “Till din tjänst.” För närvarande är det svart, och det här är koden som hanterar den:

Till din tjänst

För att ändra färg är det bästa sättet att skapa en ny klass som heter, säg, .text-orange och ställ in färgvärdet där, så:

.text-orange {
färg: # f4623a! viktigt;
}

* Den !Viktig kommer att se till att denna färginställning kommer att skriva över alla andra färginställningar som kom före den.

Nu kan vi gå tillbaka till vår rubrik och ändra dess kod till:

Till din tjänst

Med dessa ändringar blir rubriken nu orange:

orange h2

Om du vill ändra teckensnittet och dess storlek kan du göra något som är väldigt likt. Men först ett exempel på hur ett teckensnittdefinitionsblock ser ut i CSS:

.SOMECLASS {
font-family: "Merriweather", Roboto, sans-serif;
typstorlek: 18px;
}
  • ladda typsnitt Merriweather, roboto, och ett system-standard sans serif typsnitt (läs detta för att lära dig om webbsäkra teckensnitt)
  • ställa in teckenstorlek till 18px

Den här typen av definition kan placeras i vilken CSS-klass som helst, precis som färgdefinitionen. Egentligen finns typsnitt och färgdefinitioner ofta i samma klassdeklarationer.

När vi går tillbaka till vårt tidigare exempel för att ändra teckensnittsstorleken för den rubriken som säger “Till din tjänst” kunde vi först skapa en klass som denna:

.text-xxl {
typstorlek: 50px;
}

Och tilldela sedan denna klass till rubriken:

Till din tjänst

�� När du ändrar färger eller teckensnitt i din Bootstrap-gjorda mall, titta först genom CSS-formatmallen för klasser som redan kan ge dig alternativa färger eller storlekar. Använd de där det finns tillgängliga.

10. Skapa ytterligare sidor

Nu när du har anpassat hemsidan är det dags att börja arbeta med några ytterligare sidor och sedan länka dem till hemsidan.

När du skapar en webbplats med HTML och CSS kan du bygga valfritt antal undersidor och sedan länka dem alla tillsammans.

Här är några av de vanliga sidorna som de flesta webbplatser behöver:

  • om sidan
  • Kontakt
  • portfölj
  • produkter
  • team
  • policyer (sekretesspolicy, villkor etc.)

1. Börja med layouten

När du bygger en ny webbsida är det första beslutet du måste ta vad du vill att layouten ska vara.

När du skapar en webbplats med HTML och CSS hindrar ingenting dig från att skapa vad som helst layout du vill ha. Den enda svårigheten är faktiskt att sätta ihop det.

HTML och CSS kan vara svåra att hantera när man börjar från en tom skärm, så vi kommer att använda Bootstrap här också. Först ska vi visa dig några principer för att skapa en layout och sedan visa hur du gör det med Bootstrap.

Hur du kan tänka på din webbsides layout är att betrakta det som en sekvens av enskilda block – ett ovanpå ett annat. Något som detta (lägg märke till de fyra distinkta blocken):

layouten när du skapar en webbplats med HTML och CSS

Det fantastiska med Bootstrap är att det hanterar de grundläggande layoutprinciperna och utseendedetaljerna för dig så att du bara kan fokusera på att placera dessa block på rätt plats.

I det här avsnittet i guiden kommer vi att skapa en ny “om” -sida.

Till att börja med skapar vi bara ett mycket grundläggande projekt för layouten. Något som det ovan.

  • det finns en navigationsmeny längst upp,
  • ett rubrik med full bredd under menyn,
  • huvudinnehållssektionen i mitten, boxad i mitten av skärmen (inte i full bredd),
  • och en sidfot.

Låt oss nu bygga denna layout i HTML.

2. Bygg en ny sida

Det enklaste sättet att börja arbeta på en ny sida är att kopiera en befintlig sida och använda den som en mall. Det är vad vi ska göra.

Skapa en kopia av index.html arkivera och byta namn på den about.html.

Bara för att göra sidorna lättare att skilja på i detta tidiga skede, redigera den nya about.html arkivera och ändra vad som finns i </code> märka. Till exempel, <code><title>Om mig.

Låt oss nu gå igenom filen rad för rad och bestämma vad vi lämnar och vad vi tar bort:

  • De navigering meny (nedan ). Du vill förmodligen hålla detta avsnitt intakt, bara för att göra navigationsupplevelsen enhetlig på alla sidor.
  • De huvudhjälte avsnitt (nedan ). Den här behöver vi inte enligt vårt layoutprojekt. Du kan gå vidare och radera hela avsnittet.
  • De handla om avsnitt (nedan ). Vi kommer att återanvända det här avsnittet som vårt huvudrubrik.
  • De tjänster sektion, portfölj sektion, uppmaning till handling avsnitt och Kontakt avsnitt (allt mellan och ). Vi behöver inte dessa avsnitt alls. Du kan gå vidare och radera dem.
  • De sidfot avsnitt och allt under det (nedan ). Detta måste vi behålla.

Detta gör vår nuvarande kod ganska enkel. Det är i princip bara detta:



























Det vi saknar här är huvudinnehåll sektion. För att bygga det kommer vi att återanvända avsnittet om.

Gå vidare och skapa en kopia av avsnittet om. Den här:

...


...

Ändra nu de två första linjerna till detta:

Eftersom vi inte behöver det

rubriken där och


element, låt oss bara ta bort dem. Det enda som finns kvar i hela blocket kommer att vara ett stycke text. Såhär:

Ett stycke text.

När du sparar filen och navigerar till den via din webbläsare ser du att du i grunden har två väldigt lika block en under den andra, med samma färgbakgrund:

om sidhuvud

Det vore bättre att ha en vit bakgrund i avsnittet med huvudinnehåll. För att ändra det är det enda vi behöver göra att ta bort bg-primär klass från det huvudsakliga

märka. Med andra ord, gör taggen till det här:

Det är bättre:

om sidhuvud 2

Låt oss lägga till några dummy-stycken på sidan för att fylla i dem mer, plus kanske ett underhuvud:

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

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

Subhead

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

Så här ser ut på sidan:

om ver 1

Om du inte vill att texten ska centreras ska du bara ta bort den text-center klass från en av

taggar.

om ver 2

Om du vill lägga lite mer känsla på dessa textblock kan du skapa nya CSS-klasser (som tidigare) och tilldela dem till styckena i blocket. Eller så kan du ta en titt i det aktuella formatmallen och se vilka klasser som redan finns där för detta ändamål. Här är de vi tilldelade

och

tags:

Lorem ipsum dolor sit amet...

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

Subhead

Och här är effekten:

om ver 3

En sak till som vi ska göra här är att lägga till en bild någonstans på sidan.

Så här ser ett exempel på bildtagg i HTML:


Ganska enkelt, eller hur? Den enda parametern där är sökvägen till bildfilen. För att hålla saker väl organiserade kan du placera din bild i img katalog igen (precis som du gjorde med den bakgrunden för ett tag sedan). I ett sådant fall kommer bildtaggen att vara:


Med det sagt är bildtaggen i den här konfigurationen ganska begränsad. För att göra det lite mer förfinat, låt oss tilldela några Bootstrap-klasser till det. Särskilt:


Dessa två klasser ger bilden rundade hörn och kommer också att se till att bildens storlek inte överstiger storleken på blocket där den sitter.

Du kan nu lägga till en sådan tagg någonstans i huvudinnehållssektionen på din om-sida. Till exempel här:

Lorem ipsum dolor sit amet...

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

Subhead

Och här är den slutliga effekten på sidan:

om ver 4

Här är vår om-sida i all sin härlighet:

om sidan komplett

3. Länk till den nya sidan

Med den nya sidan klar, låt oss nu länka den från hemsidan ( index.html fil). Naturligtvis är det bästa stället att lägga till den här länken i navigationsmenyn (nedan ).

Sök särskilt efter denna rad:

Handla om

Vi kommer att ändra det till detta:

Handla om

Det här är något vi inte har pratat om än, men tagg är en länktagg i HTML. Med den kan du länka till vilken webbsida som helst genom att ange adressen till den sidan i href parameter. Texten på länken – den klickbara delen av länken – kommer att vara texten mellan öppningen och stängningen taggar.

När du uppdaterar hemsidan nu ser du din nya länk som pekar på sidan om.

Vidare läsning:

I det här skedet har du i grund och botten byggt upp dig en enkel webbplats som består av två sidor – a hemsida och en handla om sida.

Vad du bör göra nu är att skölja och upprepa genom att skapa nya sidor, ställa in dem, lägga till innehåll till dem och sedan länka allt från navigationsmenyn.

Andra saker som är värda att göra när du går igenom dessa steg är att lära dig mer om HTML- och CSS-principer, gå igenom checklistan och också lära dig Bootstrap och dess strukturer och klasser. Några resurser för det:

  • HTML5 fuskark
  • CSS fuskark
  • Javascript fuskark
  • HTML-handledning
  • Bootstrap-handledning
  • Bootstrap fuskark

Mastering Bootstrap, mycket troligtvis den bästa vägen för närvarande för att bygga optimerade och vackra webbplatser med HTML och CSS.

Om du har några frågor om att skapa en webbplats med HTML och CSS, tveka inte att skicka in dem i kommentarerna.

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