Oprettelse af dit første websted: 10 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:26

I denne vejledning lærer du at opbygge en grundlæggende webside, der har et sammenkædet typografiark og interaktiv javascript -fil.

Trin 1: Oprettelse af din mappe

Opret en mappe til de filer, vi vil oprette for at blive gemt. Du er velkommen til at navngive det, som du vil, bare husk, hvor det er placeret, fordi vi gemmer filer til det senere.

Trin 2: Oprettelse af din første fil

Åbn din foretrukne teksteditor. I mit tilfælde vil jeg simpelthen bruge den indbyggede notesblok i Windows 10. Når du har en ny fil, skal du skrive følgende:

Dette er min første webside, bragt til dig af en instruerbar

Dette er det, der er kendt som et HTML -tag. Det står for Overskrift 1. Den tekst, vi lægger i dette mærke, vises som en overskrift på siden. Den åbnes og lukkes sådan. Teksten mellem de to tags er det, der vises i din webbrowser. Den del, der siger, giver det mærke en attribut, som vi vil referere til i trin x. Når det er gjort, skal du gå videre og gemme filen i den mappe, vi lavede i trin 1 som index.html.

Trin 3: Åbn filen

Nu hvor vi er færdige, skal du navigere til filen i den mappe, vi oprettede, skal du højreklikke på filen og vælge "Åbn med" og vælge den webbrowser, du bruger. I mit tilfælde er dette google chrome. Se nu arbejdet med dit hårde arbejde indtil nu!

Trin 4: Styling af din side

Som det er, er vores websted ret almindeligt. Vi kommer til at tilføje det, der er kendt som et cascading style sheet for at krydre tingene lidt. Opret en ny tekstfil, og skriv følgende:

h1 {farve: blå; tekstjustering: center;}

Det, vi fortæller browseren her, er at finde ethvert element i et h1 -tag (som vi lærte om i trin 2) og give det en blå farve og justere det i midten af siden. Gem denne fil i den mappe, vi oprettede i trin 1 som style.css.

Trin 5: Link Style.css til Your Index.html

På dette tidspunkt har vi to separate filer, der ikke kender til hinanden. Vi er nødt til at fortælle vores index.html -fil, at vi har en style.css -fil, som vi vil have den skal referere til og få fat i noget styling fra. For at gøre dette åbner vi vores index.html -fil i vores teksteditor, og over vores h1 -tag tilføjer vi det, der kaldes et linktag. Linket tag gør, som dets navnebror antyder, det linker til noget. I vores tilfælde et stylesheet. Fortsæt og skriv. Linket tag er et selvlukkende tag, så et sluttag er ikke påkrævet. Rel står for relation og href fortæller indeksfilen, hvor vores eksterne fil, vi refererer til, er placeret. Gem nu den index.html -fil.

Trin 6: Se din nyligt udformede side

Besøg trin 3, og genindlæs din webside, og se, hvordan ændringerne afspejler.

Trin 7: Oprettelse af en knap

Åbn din index.html -fil igen i din teksteditor, og skriv følgende:

Klik på mig!

og gem filen. Dette skaber et knapelement på siden. Når den er gemt, skal du genåbne filen som vist i trin 3 og sikre, at knappen er nederst til venstre på din side.

Trin 8: Opret din Javascript -fil

Endelig skal vi oprette vores javascript -fil. Det er det, der vil gøre vores websted interaktivt. Åbn en teksteditor, og skriv følgende:

document.querySelector ("#knap"). addEventListener ("klik", funktion () {

document.querySelector ("#heading"). innerText = "Ændring af overskrift i farten"

})

Det, vi gør, er at bede dokumentet om at finde et element til os med knap -id'et, og vi får knappen til at reagere på en klikhændelse ved at ændre en elementtekst med ID'et til overskriften til "Ændring af overskrift i farten ". Gem filen som button.js i den mappe, vi oprettede i trin 1.

Trin 9: Link dine Javascript- og indeksfiler

Som vi gjorde med filen style.css, skal vi fortælle vores index.html -fil om vores javascript -fil. I bunden under alt, hvad vi har gjort indtil nu, skriver du følgende:

Script -tagget giver os mulighed for at tilføje et scriptsprog (i vores tilfælde javascript) for at give funktionalitet til vores side. Vi fortæller den, at den skal lede efter en fil kaldet button.js og tilføje al den kode, der er indeholdt i den, til vores indeksfil. Når du har indtastet det, skal du gemme filen og åbne filen igen som vist i trin 3.

Trin 10: Test den nyoprettede knap

Fortsæt nu og klik på knappen og se overskriften ændre sig!

Tillykke!! Du har nu oprettet din første interaktive webside! Jeg spekulerer på, hvor meget længere du kunne tage det ved at vide, hvad du ved nu?