Skapa din första webbplats: 10 steg

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

I denna handledning lär du dig att bygga en grundläggande webbsida som har ett länkat formatmall och interaktiv javascript -fil.

Steg 1: Skapa din mapp

Skapa en mapp för de filer vi ska skapa för att lagras. Namnge den gärna hur du vill, kom bara ihåg var den ligger eftersom vi kommer att spara filer till den senare.

Steg 2: Skapa din första fil

Öppna din favorit textredigerare. I mitt fall kommer jag helt enkelt att använda det inbyggda anteckningsblocket för Windows 10. När du har en ny fil skriver du följande:

Detta är min första webbsida, som jag fått av en instruerbar

Detta är vad som kallas en HTML -tagg. Det står för rubrik 1. Texten som vi lägger i den här taggen visas som en rubrik på sidan. Det öppnas och stängs så här. Texten mellan de två taggarna är vad som visas i din webbläsare. Den del som säger ger taggen ett attribut som vi kommer att referera till i steg x. När det är klart, fortsätt och spara filen i mappen som vi gjorde i steg 1 som index.html.

Steg 3: Öppna filen

Nu när vi har slutfört, navigera till filen i den mapp vi skapade, högerklicka på filen och välj alternativet "öppna med" och välj den webbläsare du använder. I mitt fall är detta Google Chrome. Se nu arbetet med ditt hårda arbete hittills!

Steg 4: Styling av din sida

Som det är är vår webbplats ganska vanlig. Vi ska lägga till det som kallas ett kaskadformat för att krydda lite. Skapa en ny textfil och skriv följande:

h1 {färg: blå; text-align: center;}

Det vi berättar för webbläsaren här är att hitta något element i en h1 -tagg (som vi lärde oss om i steg 2) och ge den en blå färg och justera den i mitten av sidan. Spara den här filen i mappen som vi skapade i steg 1 som style.css.

Steg 5: Länka Style.css till ditt index.html

Vid denna tidpunkt har vi två separata filer som inte känner till varandra. Vi måste berätta för vår index.html -fil att vi har en style.css -fil som vi vill att den ska referera till och ta lite styling från. För att göra detta kommer vi att öppna vår index.html -fil i vår textredigerare, och ovanför vår h1 -tagg kommer vi att lägga till det som kallas en länktagg. Länktaggen gör precis som namnet antyder, den länkar till något. I vårt fall ett formatmall. Fortsätt och skriv. Länktaggen är en självstängande tagg så en sluttagg krävs inte. Rel står för relation och href berättar för indexfilen var vår externa fil vi refererar till ligger. Spara nu den index.html -filen.

Steg 6: Visa din nyligen utformade sida

Besök steg 3 och ladda om din webbsida och ta en titt på hur förändringarna speglar sig.

Steg 7: Skapa en knapp

Öppna din index.html -fil igen i din textredigerare och skriv följande:

Klicka här!

och spara filen. Detta skapar ett knappelement på sidan. När du har sparat öppnar du filen igen enligt steg 3 och ser till att knappen finns längst ned till vänster på sidan.

Steg 8: Skapa din Javascript -fil

Slutligen ska vi skapa vår javascript -fil. Detta är vad som kommer att göra vår webbplats interaktiv. Öppna en textredigerare och skriv följande:

document.querySelector ("#knapp"). addEventListener ("klick", funktion () {

document.querySelector ("#rubrik"). innerText = "Ändra rubriken i farten"

})

Vad vi gör är att be dokumentet att hitta ett element med knappens ID, och vi kommer att låta knappen svara på en klickhändelse genom att ändra en text med elementet till rubriken "Ändra rubriken i farten ". Spara filen som button.js i mappen som vi skapade i steg 1.

Steg 9: Länka dina Javascript- och indexfiler

Som vi gjorde med filen style.css måste vi berätta för vår index.html -fil om vår javascript -fil. Längst ner under allt vi har gjort hittills skriver du följande:

Skripttaggen tillåter oss att lägga till ett skriptspråk (i vårt fall javascript) för att tillhandahålla funktionalitet till vår sida. Vi säger åt den att leta efter en fil som heter button.js och lägga till all kod som finns i den i vår indexfil. När du har skrivit in det, spara filen och öppna filen igen som visas i steg 3.

Steg 10: Testa den nyskapade knappen

Fortsätt nu och klicka på knappen och se rubriken förändras!

Grattis !! Du har nu skapat din första interaktiva webbsida! Jag undrar hur mycket längre du kan ta det med att veta vad du vet nu ??