Uw eigen website bouwen voor beginners: 5 stappen

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

Of je er ooit van gedroomd hebt computerprogrammeur te worden of ooit een website hebt gebruikt, laten we eerlijk zijn, dat zijn we bijna allemaal, informatietechnologie is de ruggengraat van het bedrijfsleven geworden. Hoewel programmeren in het begin misschien een beetje eng lijkt, is mijn doel om je de basisprincipes van webdesign te leren, zodat je na deze tutorial je eigen webpagina kunt maken. Met dat uit de weg, laten we ernaartoe gaan!

Benodigdheden

• Een Macintosh- of Windows-pc (hoewel Linux-distributies ook kunnen worden gebruikt, sla ik ze voorlopig over omdat dit een introductie voor beginners is).
• Uw keuze van teksteditor (Notepad op Windows, TextEdit op Mac) of uw keuze van IDE. In mijn ervaring heb ik ontdekt dat Visual Studio Code het beste voor mezelf werkt, dus ik raad het ook aan om het hier te bekijken: https://code.visualstudio.com/ om nog maar te zwijgen van het feit dat het op alle OS-platforms werkt.

Stap 1: Tags en een beetje geschiedenis

Nadat u uw keuze voor teksteditor of IDE hebt gekozen, beginnen we met de basis.

Geloof het of niet, HTML of HyperText Markup Language bestaat nu al bijna 30 jaar en met elk jaar komen er meer en meer verbeteringen aan de taal. Nu vraagt u zich misschien af, hoe interpreteert een browser wat er op het scherm moet worden geplaatst? Dit gebeurt in een paar onderdelen:

De opmaak van HTML-documenten is eenvoudig. Je hebt twee secties die bekend staan als het hoofd en het lichaam. De kop van een website bevat code die niet zichtbaar is voor de gebruiker. Dit wordt gebruikt voor het koppelen van stylesheets en het aangeven van andere noodzakelijke bits die nodig zijn om de site correct weer te geven. Na het hoofd is het lichaam zoals het klinkt, het lichaam van de website. Hier kun je je stem laten horen en het publiek je fantastische HTML-vaardigheden laten zien! Nu is het niet zo eenvoudig als gewoon tekst in de hoofdtekst typen en deze precies zo laten weergeven als u wilt, maar in zekere zin is het bijna zo eenvoudig met het gebruik van dingen die we tags noemen.

Hier zijn enkele van de basis-HTML-tags:

• titel – die wordt gebruikt om de browser te vertellen wat de titel van de pagina is. Dit is ook wat je ziet als je naar het tabblad van een webpagina kijkt.
• h1, h2, h3, h4 – die worden gebruikt voor verschillende kopgrootten, waarbij h1 de grootste is en h4 de kleinste. Ik zal hier meer over vertellen in de volgende sectie.
• p - alinea, gebruikt voor het schrijven van alinea's tekst. Zoals alinea's op een papier.
• br – break, die een pauze invoegt in lijn met de tekst.
• a – gebruikt voor het maken van links naar andere pagina's, zoals een klikbare link.
• img - gebruikt voor het koppelen van een afbeelding aan de webpagina.
• ul, ol, li - ongeordende lijsten, geordende lijsten en lijstitems.
• - gebruikt voor het maken van inline opmerkingen in de code die niet door de eindgebruiker worden gezien.

En hier zijn enkele CSS-tags (visueel):

• kleur – gebruikt om een specifieke kleur toe te wijzen aan een specifiek element of set op de webpagina.
• font-size – gebruikt om de lettergrootte op de pagina te wijzigen.
• achtergrondkleur – wordt gebruikt om de achtergrondkleur van een bepaald element of de hele pagina te wijzigen.

Ik heb ook een klein spiekbriefje bijgevoegd om je te helpen als je je een beetje verloren voelt, maar maak je geen zorgen, je hebt het in een mum van tijd onder de knie! Bovendien is www.w3schools.com ook een fantastische bron voor al uw programmeervragen. Ze hebben me zeker een tijd of ook bespaard.

Hoe de browser het bestand leest, is in wezen eenvoudig. Het gaat regel voor regel en verwerkt functie voor functie. De karakters worden gebruikt om een tag te declareren zoals

en worden gebruikt om de tag te sluiten, zoals:

. Dit is belangrijk, anders weet de browser niet waar hij moet stoppen. Tussen de

en

tags, hier kun je invoeren wat je maar wilt!

Stap 2: Editor-instellingen

Nu we wat hebben besproken over de basiselementen van een HTML-website, gaan we erin duiken en het zelf proberen. Voor deze volgende stap zal ik Visual Studio Code gebruiken om de website te programmeren, maar de lay-out van de code zal hetzelfde zijn als je meer vertrouwd bent met het gebruik van Kladblok of Teksteditor.

Binnen Kladblok:

• Met Kladblok wordt het programma gestart met een leeg bestand, waardoor het supergemakkelijk is om aan de slag te gaan. Dit stelt ons ook in staat om een paar stappen te springen in vergelijking met het gebruik van VS-code. Laten we beginnen door het bestand in het juiste formaat op te slaan.
• Klik op Bestand > Opslaan
• Voer een naam in voor uw bestand gevolgd door.html en selecteer onder Opslaan als type alle bestanden. Klik op opslaan.

Binnen VS-code:

• De beste manier om te profiteren van alle functies van de IDE, is door te beginnen met het maken van het bestand en de IDE te vertellen welk type bestand het is. Dit kan als volgt:
• Klik op Bestand > Nieuw bestand
• Er wordt een leeg bestand geopend
• Vervolgens wil je beginnen met het opslaan van het bestand, hoewel leeg, omdat de IDE hierdoor kan begrijpen welk type bestand het eindproduct zal zijn. Zorg ervoor dat u bij het opslaan de.html-extensie aan het einde van de bestandsnaam opneemt. Klik op opslaan.

Stap 3: Blauwdrukken

Nadat u uw bestand bestandsnaam.html met succes heeft opgeslagen, beginnen we met het maken van het raamwerk voor onze webpagina. Onthoud van bovenaf welke belangrijke delen van het bestand we moeten declareren voordat we kunnen beginnen met het maken van de rest van de HTML-pagina. Pro-tip: bij het starten van het framework voor de site vertelt de !DOCTYPE HTML-tag de browser dat het bestand dat wordt gelezen een html-bestand is. Dit kan handig zijn als u verschillende soorten code in hetzelfde bestand hebt en wilt wisselen tussen tolken. Voor de reikwijdte van deze instructable zullen we hier niet te veel op ingaan, maar als je na deze Instructable nieuwsgierig bent naar meer informatie over HTML-ontwikkeling, voel je dan vrij om het een kans te geven. Ik zal de !DOCTYPE HTML-tag bovenaan het bestand invoegen voor de beste werkwijze. Vergeet niet te openen en te sluiten met.

Hier is waar het opslaan van het bestand voordat u begint met programmeren handig is, nu de IDE weet dat het met een HTML-bestand werkt, zal het Intellisense gebruiken om de uitdrukking af te maken en suggesties te doen, zodat u niet per ongeluk vergeet een tag te sluiten. Merk op dat voor degenen onder u die Kladblok gebruiken, intellisense niet beschikbaar is zoals in de IDE. We beginnen met het invoeren van de head- en body-tags als volgt: (zie tweede afbeelding).

Nu de documentconfiguratie is voltooid, kunnen we naar de races gaan en plezier hebben!

Stap 4: Coderen; Code; Code;

We kunnen beginnen met het invoegen van een titel voor ons nieuw gemaakte bestand. Vul in wat je maar wilt. Onthoud dat dit de naam is die op het browsertabblad verschijnt. Laten we ook beginnen met het invoeren van een kop voor onze site. Herinner je van vroeger hoe we dit doen. Hoorde ik h1/2/3/4? Dat is correct!

Voordat we verder gaan, vind ik het handig om ons bestand in een browservenster te openen, zodat we in realtime kunnen zien hoe onze wijzigingen in de browser worden weergegeven. U kunt dit doen door op Bestand > Opslaan te klikken om het bestand op te slaan, naar de map te navigeren waarin het HTML-bestand is opgeslagen, voor mij is dit het bureaublad, en gebruik de browser van uw keuze om het bestand te openen en zou u daar naar willen kijken, daar is je webpagina! Opmerking: ik gebruik Safari persoonlijk als mijn favoriete browser op mijn computer, maar bij webontwikkeling is Firefox de gouden standaardbrowser om te testen, aangezien het met bijna elke webscripttaal werkt.

Zoals je kunt zien, wordt de titel op het tabblad weergegeven, evenals onze h1-kop. Ik geef er de voorkeur aan om zowel het browservenster van het bestand naast de IDE te openen als wanneer u een wijziging aanbrengt in de IDE en opslaat, de wijzigingen onmiddellijk in de browser zijn.

Voel je vrij om tags toe te voegen en te spelen met de verschillende dingen die je met HTML kunt doen. Zoals je hieronder kunt zien, heb ik een paar alinea's, pauzes, externe hyperlinks naar Instructables.com, een afbeelding, toegevoegd (die kan worden gekoppeld vanuit een externe bron of in dezelfde map als waar het. HTML-bestand is opgeslagen), een voorbeeld van een ongeordende lijst, een geordende lijst en tot slot een opmerking.

Als u wilt proberen wat kleur- en rangschikkingsopties toe te voegen, kunt u een stijltag in de kop van het bestand invoeren. Dit is het punt waarop dit verschuift van HTML naar CSS, maar voor het visuele belang zal ik een paar regels invoeren, zodat u kunt zien hoe dit werkt. Hoe CSS in wezen werkt, is dat u HTML-elementen binnen functies kunt beheren door haakjes { } te gebruiken om uw code in te voeren voor een specifiek HTML-element.

Stap 5: Laatste gedachten

En daar heb je het; je hebt met succes je eerste webpagina gemaakt! Omdat dit een beginnershandleiding is, wil ik van uw eerste ervaring met HTML een plezierige ervaring maken. De beste manier om te leren is in mijn ervaring om erin te duiken en dingen uit te proberen, te zien wat je met je code kunt doen en ook te zien hoe je je code kunt breken. Dit bouwt integriteit op en helpt u beter te begrijpen hoe en waarom de code werkt zoals hij werkt. Onthoud dat www. W3Schools.com een geweldige bron is voor vragen en ze bieden zelfs een virtuele sandbox in de browser om uw code uit te proberen. Hopelijk heb je iets geleerd en veel plezier met coderen!