Bygg din egen webbplats för nybörjare: 5 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:43

Oavsett om du någonsin har drömt om att vara en datorprogrammerare eller om du någonsin har använt en webbplats, vilket vi kan inse, är nästan oss alla, informationsteknologi har blivit ryggraden i affärer. Även om programmering kan verka lite skrämmande till en början, är mitt mål att lära dig de grundläggande grunderna för webbdesign så att du efter denna handledning kan skapa din egen webbsida. Med det ur vägen, låt oss komma till det!

Tillbehör

• En Macintosh- eller Windows -dator (även om Linux -distros också kan användas, hoppar jag över dem för tillfället eftersom det här är en nybörjarintroduktion).
• Ditt val av textredigerare (Anteckningar på Windows, TextEdit på Mac) eller ditt val av IDE. Enligt min erfarenhet har jag funnit att Visual Studio Code fungerar bäst för mig själv, så jag skulle också rekommendera att kolla in det här: https://code.visualstudio.com/ för att inte tala om att det fungerar på alla OS -plattformar.

Steg 1: Etiketter och lite historia

När du har bestämt dig för ditt val av textredigerare eller IDE, låt oss börja med grunderna.

Tro det eller ej, HTML eller HyperText Markup Language har funnits i nästan 30 år nu och för varje år har det kommit fler och fler förbättringar av språket. Nu kanske du frågar, hur tolkar en webbläsare vad som ska läggas på skärmen? Detta görs i några delar:

HTML -dokumentformatering är enkelt. Du har två sektioner som kallas huvudet och kroppen. Huvudet på en webbplats innehåller kod som inte är synlig för användaren. Detta används för att länka formatmallar och förklara andra nödvändiga bitar som behövs för att webbplatsen ska kunna visas korrekt. Efter huvudet är kroppen som den låter, webbplatsens kropp. Det är här du får tala din röst och visa publiken dina fantastiska HTML -färdigheter! Nu är det inte lika enkelt som att bara skriva in text i kroppen och få den att visas precis som du vill, men det är nästan så enkelt på ett sätt med användning av saker vi kallar taggar.

Här är några av de grundläggande HTML -taggarna:

• titel - som används för att berätta för webbläsaren vad titeln på sidan är. Det här är också vad du ser när du tittar på fliken på en webbsida.
• h1, h2, h3, h4 - som används för olika huvudstorlekar där h1 är den största och h4 är den minsta. Jag kommer att täcka mer om detta i nästa avsnitt.
• p - stycke, används för att skriva textstycken. Som stycken på ett papper.
• br - brytning, vilket infogar ett avbrott i linje med texten.
• a - används för att skapa länkar till andra sidor, som en klickbar länk.
• img - används för att länka en bild till webbsidan.
• ul, ol, li - oordnade listor, ordnade listor och listobjekt.
• - används för att göra inline kommentarer i koden som inte kommer att ses av slutanvändaren.

Och här är några CSS -taggar (visuella):

• färg - används för att tilldela en specifik färg till ett specifikt element eller en uppsättning på webbsidan.
• font-size-används för att ändra teckenstorlek på sidan.
• bakgrundsfärg-används för att ändra bakgrundsfärgen för vissa element eller hela sidan.

Jag har också bifogat ett litet fuskblad för att hjälpa dig om du känner dig lite vilsen, men oroa dig inte, du kommer att få kläm på det på nolltid! Dessutom är www.w3schools.com också en fantastisk resurs för alla dina programmeringsfrågor. De har definitivt sparat mig en tid eller också.

I huvudsak är det enkelt hur webbläsaren läser filen. Det går rad för rad och bearbetar funktion för funktion. Tecknen används för att deklarera en tagg som t.ex.

och används för att stänga taggen som t.ex.

. Detta är viktigt annars kommer webbläsaren inte var den ska stanna. Mellan

och

taggar, är där du anger vad du vill!

Steg 2: Editor Setup

Nu när vi har täckt lite om de grundläggande elementen i en HTML -webbplats, låt oss dyka in och prova det själva. För det här nästa steget kommer jag att använda Visual Studio Code för att programmera webbplatsen, men layouten för koden blir densamma om du är bekvämare med att bara använda Anteckningar eller TextEdit.

Inom anteckningsblock:

• Med Anteckningar startas programmet med en tom fil som gör det superenkelt att komma igång. Detta gör det också möjligt för oss att hoppa några steg jämfört med att använda VS -kod. Låt oss komma igång genom att spara filen i rätt format.
• Klicka på Arkiv> Spara
• Ange ett namn för din fil följt av.html och under Spara som typ väljer du alla filer. Klicka på Spara.

Inom VS -kod:

• Det bästa sättet för dig att dra nytta av alla IDE: s funktioner är att börja med att skapa filen och berätta för IDE vilken typ av fil det är. Detta kan göras enligt följande:
• Klicka på Arkiv> Ny fil
• En tom fil öppnas
• Därefter vill du börja med att spara filen, även om den är tom, eftersom detta gör att IDE kan förstå vilken typ av fil slutprodukten kommer att vara. När du sparar, se till att inkludera.html -tillägget i slutet av filnamnet. Klicka på Spara.

Steg 3: Ritningar

Efter att du har sparat din filnamn.html -fil, låt oss börja med att skapa ramverket för vår webbsida. Kom ihåg ovanifrån vilka viktiga delar av filen vi måste deklarera innan vi kan börja med att skapa resten av HTML -sidan. Tips: när du startar ramverket för webbplatsen berättar! DOCTYPE HTML-taggen för webbläsaren att filen den läser är en html-fil. Detta kan vara praktiskt om du har olika typer av kod i samma fil och vill växla mellan tolkar. För omfattningen av denna instruerbara, kommer vi inte att beröra för mycket om detta, men om du efter denna instruktionsbok är nyfiken på att kolla in mer om HTML -utveckling, ge det gärna. Jag kommer att infoga! DOCTYPE HTML -taggen högst upp i filen för bästa praxis. Kom ihåg att öppna och stänga med.

Här är det praktiskt att spara filen innan du börjar programmera, nu när IDE vet att den fungerar med en HTML -fil kommer den att använda intellisense för att avsluta uttrycket och ge förslag så att du inte av misstag glömmer att stänga en tagg. Observera att för er som använder Anteckningar är intellisense inte tillgängligt som i IDE. Vi börjar med att ange huvud- och kroppstaggarna enligt följande: (se andra bilden).

Nu när dokumentinställningen har slutförts kan vi komma igång med tävlingarna och ha kul!

Steg 4: Kod; Koda; Koda;

Vi kan börja med att infoga en titel för vår nyskapade fil. Ange vad du vill. Kom ihåg att detta är namnet som visas på webbläsarfliken. Låt oss också börja med att ange en rubrik för vår webbplats. Minns från tidigare hur vi gör detta. Hörde jag h1/2/3/4? Det stämmer!

Innan vi fortsätter tycker jag att det är bra att öppna vår fil i ett webbläsarfönster så att vi i realtid kan se hur våra förändringar speglar sig i webbläsaren. Du kan göra detta genom att klicka på Arkiv> Spara för att spara filen, navigera till mappen där HTML -filen är sparad, för mig är detta skrivbordet och använd den valda webbläsaren för att öppna filen och skulle du titta på det, där är din webbsida! Obs! Jag använder personligen Safari som min valda webbläsare på min dator, men i webbutveckling är Firefox den gyllene standardwebbläsaren för testning eftersom den fungerar med nästan alla webbskriptspråk.

Som du kan se visas titeln på fliken, liksom vår h1 -rubrik. Jag föredrar att både webbläsarfönstret i filen öppnas bredvid IDE som när du gör en ändring i IDE och sparar, ändringarna är omedelbara i webbläsaren.

Prova gärna att lägga till taggar och leka med de olika sakerna du kan göra med HTML. Som du kan se nedan har jag lagt till några stycken, raster, extern hyperlänk till Instructables.com, en bild, (som antingen kan länkas från en extern källa eller i samma katalog som där. HTML -filen är lagrad), ett exempel på en orörd lista, en ordnad lista och till sist en kommentar.

Om du vill prova att lägga till lite färg och arrangemang kan du ange en stiltagg i filens huvud. Detta är den punkt där detta skiftar från HTML till CSS men för visuell skull kommer jag att ange några rader så att du kan se hur det fungerar. I huvudsak hur CSS fungerar är det att du kan styra HTML -element inom funktioner genom att använda parenteser {} för att ange koden för ett specifikt HTML -element.

Steg 5: Slutliga tankar

Och där har du det; du har lyckats skapa din första webbsida! Eftersom det här är en nybörjarguide vill jag göra din första upplevelse med HTML till en trevlig upplevelse. Det bästa sättet att lära mig i min erfarenhet är att dyka in och prova på saker och ting, se vad du kan göra med din kod och se också hur du kan bryta din kod. Detta bygger integritet och hjälper dig att bättre förstå hur och varför koden fungerar som den gör. Kom ihåg att www. W3Schools.com är en bra resurs för frågor och de erbjuder till och med en virtuell sandlåda i webbläsaren för att prova din kod. Förhoppningsvis har du lärt dig något och glad kodning!