Uw eerste website maken: 10 stappen

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:15

In deze zelfstudie leert u een eenvoudige webpagina te bouwen met een gekoppelde stylesheet en een interactief javascript-bestand.

Stap 1: Uw map maken

Maak een map voor de bestanden die we gaan maken om te worden opgeslagen. Voel je vrij om het een naam te geven zoals je wilt, onthoud alleen waar het zich bevindt, want we zullen er later bestanden op opslaan.

Stap 2: Uw eerste bestand maken

Open uw favoriete teksteditor. In mijn geval zal ik gewoon het ingebouwde kladblok van Windows 10 gebruiken. Zodra je een nieuw bestand hebt, typ je het volgende:

Dit is mijn eerste webpagina, aangeboden door een instructable

Dit is wat bekend staat als een HTML-tag. Het staat voor Heading 1. De tekst die we binnen deze tag plaatsen, wordt als een kop op de pagina weergegeven. Het wordt zo geopend en gesloten. De tekst tussen de twee tags wordt weergegeven in uw webbrowser. Het gedeelte dat zegt, geeft die tag een attribuut waarnaar we in stap x zullen verwijzen. Zodra dat is gebeurd, slaat u het bestand op in de map die we in stap 1 hebben gemaakt als index.html.

Stap 3: Open het bestand

Nu we klaar zijn met navigeren naar het bestand in de map die we hebben gemaakt, klikt u met de rechtermuisknop op het bestand en selecteert u de optie "openen met" en selecteert u de webbrowser die u gebruikt. In mijn geval is dit Google Chrome. Bekijk nu het werk van je harde werk tot nu toe!

Stap 4: Uw pagina stylen

Zoals het is, is onze website vrij eenvoudig. We gaan een zogenaamde trapsgewijze stylesheet toevoegen om de boel wat op te fleuren. Maak een nieuw tekstbestand en typ het volgende:

h1{kleur: blauw; tekst uitlijnen: midden;}

Wat we de browser hier vertellen, is om elk element in een h1-tag te vinden (waarover we in stap 2 hebben geleerd) en het een blauwe kleur te geven en het in het midden van de pagina uit te lijnen. Sla dit bestand op in de map die we in stap 1 hebben gemaakt als style.css.

Stap 5: Koppel de Style.css aan uw Index.html

Op dit moment hebben we twee aparte bestanden die niets van elkaar weten. We moeten ons index.html-bestand vertellen dat we een style.css-bestand hebben waarnaar we willen verwijzen en er wat styling uit halen. Om dit te doen gaan we ons index.html-bestand openen in onze teksteditor, en boven onze h1-tag gaan we een zogenaamde link-tag toevoegen. De link-tag doet precies wat zijn naamgenoot aangeeft, hij linkt naar iets. In ons geval een stylesheet. Ga je gang en typ. De link-tag is een zelfsluitende tag, dus een eindtag is niet vereist. De rel staat voor relation en href vertelt het indexbestand waar ons externe bestand waarnaar we verwijzen zich bevindt. Sla nu dat index.html-bestand op.

Stap 6: Bekijk uw nieuw gestileerde pagina

Ga terug naar stap 3, laad uw webpagina opnieuw en bekijk hoe de wijzigingen worden weergegeven.

Stap 7: Een knop maken

Open uw index.html-bestand opnieuw in uw teksteditor en typ het volgende:

Klik hier!

en sla het bestand op. Dit creëert een knopelement op de pagina. Nadat het is opgeslagen, opent u het bestand opnieuw zoals weergegeven in stap 3 en zorgt u ervoor dat de knop zich in de linkerbenedenhoek van uw pagina bevindt.

Stap 8: Maak uw Javascript-bestand

Ten slotte gaan we ons javascript-bestand maken. Dit is wat onze site interactief zal maken. Open een teksteditor en typ het volgende:

document.querySelector("#button").addEventListener("klik", function(){

document.querySelector("#heading").innerText = "De kop direct wijzigen"

})

Wat we doen, is het document vragen om een element voor ons te vinden met de ID van de knop, en we zullen de knop laten reageren op een klikgebeurtenis door de tekst van een element met de ID van de kop te wijzigen in "De kop direct wijzigen ". Sla het bestand op als button.js in de map die we in stap 1 hebben gemaakt.

Stap 9: Koppel uw Javascript- en indexbestanden

Zoals we deden met het style.css-bestand, moeten we ons index.html-bestand vertellen over ons javascript-bestand. Onderaan onder alles wat we tot nu toe hebben gedaan typ je het volgende:

Met de scripttag kunnen we een scripttaal toevoegen (in ons geval javascript) om functionaliteit aan onze pagina te bieden. We vertellen het om te zoeken naar een bestand met de naam button.js en alle code erin toe te voegen aan ons indexbestand. Nadat u dat hebt ingevoerd, slaat u het bestand op en opent u het bestand opnieuw zoals weergegeven in stap 3.

Stap 10: Test de nieuw gemaakte knop

Ga nu je gang en klik op de knop en kijk hoe de koers verandert!

Gefeliciteerd!! U heeft nu uw eerste interactieve webpagina gemaakt! Ik vraag me af hoeveel verder je zou kunnen gaan, wetende wat je nu weet??