Opprette ditt første nettsted: 10 trinn

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:22

I denne opplæringen lærer du å bygge en grunnleggende webside som har et koblet stilark og interaktiv javascript -fil.

Trinn 1: Opprette mappen

Lag en mappe for filene vi skal lage for å lagres. Gi det gjerne navnet du vil, bare husk hvor det ligger fordi vi lagrer filer til det senere.

Trinn 2: Opprette din første fil

Åpne din favoritt tekstredigerer. I mitt tilfelle vil jeg ganske enkelt bruke den innebygde notatblokken til Windows 10. Når du har en ny fil, skriver du inn følgende:

Dette er min første webside, brakt til deg av en instruerbar

Dette er det som er kjent som en HTML -tag. Det står for Overskrift 1. Teksten vi legger i denne taggen vil vises som en overskrift på siden. Den åpnes og lukkes slik. Teksten mellom de to taggene er det som vises i nettleseren din. Den delen som sier, gir den taggen et attributt som vi vil referere til i trinn x. Når det er gjort, fortsett og lagre filen i mappen vi laget i trinn 1 som index.html.

Trinn 3: Åpne filen

Nå som vi har fullført, navigerer du til filen i mappen vi opprettet, høyreklikker du på filen og velger alternativet "åpne med" og velger nettleseren du bruker. I mitt tilfelle er dette google chrome. Se nå arbeidet med ditt harde arbeid så langt!

Trinn 4: Styling av siden din

Som det er, er nettstedet vårt ganske enkelt. Vi kommer til å legge til det som er kjent som et kaskadstilark for å krydre ting litt. Opprett en ny tekstfil og skriv inn følgende:

h1 {farge: blå; tekstjustering: midt;}

Det vi forteller nettleseren her er å finne et hvilket som helst element i en h1 -tag (som vi lærte om i trinn 2) og gi den en blå farge og justere den i midten av siden. Lagre denne filen i mappen vi opprettet i trinn 1 som style.css.

Trinn 5: Koble Style.css til din Index.html

På dette tidspunktet har vi to separate filer som ikke vet om hverandre. Vi må fortelle vår index.html -fil at vi har en style.css -fil som vi vil at den skal referere til og ta litt styling fra. For å gjøre dette skal vi åpne vår index.html -fil i tekstredigeringsprogrammet, og over h1 -taggen skal vi legge til det som kalles en lenketag. Link -taggen gjør akkurat som navnebroren antyder, den lenker til noe. I vårt tilfelle et stilark. Fortsett og skriv. Link -taggen er en selvlukkende tag, så en slutt -tag er ikke nødvendig. Rel står for relasjon og href forteller indeksfilen hvor den eksterne filen vi refererer til ligger. Lagre nå filen index.html.

Trinn 6: Se den nylig utformede siden din

Gå tilbake til trinn 3, og last inn nettsiden på nytt og se på hvordan endringene gjenspeiler seg.

Trinn 7: Opprette en knapp

Åpne index.html -filen på nytt i tekstredigereren og skriv inn følgende:

Klikk på meg!

og lagre filen. Dette oppretter et knappelement på siden. Når den er lagret, åpner du filen på nytt som vist i trinn 3 og sørger for at knappen er nederst til venstre på siden din.

Trinn 8: Lag din Javascript -fil

Til slutt skal vi lage vår javascript -fil. Dette er det som vil gjøre nettstedet vårt interaktivt. Åpne et tekstredigeringsprogram og skriv inn følgende:

document.querySelector ("#knapp"). addEventListener ("klikk", funksjon () {

document.querySelector ("#heading"). innerText = "Endre overskriften i farten"

})

Det vi gjør er å be dokumentet om å finne oss et element med ID -en for knappen, og vi skal få knappen til å svare på en klikkhendelse ved å endre en elementtekst med ID -en for overskriften til "Endre overskriften i farten ". Lagre filen som button.js i mappen vi opprettet i trinn 1.

Trinn 9: Koble til Javascript og indeksfiler

Som vi gjorde med filen style.css, må vi fortelle vår index.html -fil om vår javascript -fil. Nederst under alt vi har gjort hittil skriver du følgende:

Skriptetiketten lar oss legge til et skriptspråk (i vårt tilfelle javascript) for å gi funksjonalitet til siden vår. Vi ber den om å se etter en fil som heter button.js og legge til all koden i den i indeksfilen vår. Når du har skrevet det inn, lagrer du filen og åpner filen igjen som vist i trinn 3.

Trinn 10: Test den nyopprettede knappen

Fortsett nå og klikk på knappen og se overskriften endres!

Gratulerer!! Du har nå opprettet din første interaktive nettside! Jeg lurer på hvor mye lenger du kan ta det med å vite hva du vet nå ??