Met de ontwikkeling van zoveel programmeer-, stijl- en opmaaktalen, wordt het leren van webdesign ingewikkelder dan ooit. Gelukkig zijn er talloze tools beschikbaar om u op weg te helpen. Zoek naar een paar basisbronnen, zoals online tutorials of een up-to-date boek over webdesign. Zodra u klaar bent om te beginnen, begint u met het beheersen van de basisprincipes van HTML en CSS. Dan kunt u beginnen met het verkennen van meer geavanceerde webontwerptalen, zoals JavaScript!
Stappen
Methode 1 van 4: Bronnen voor webontwerp zoeken
Stap 1. Kijk online voor webdesigncursussen en tutorials
Het internet staat vol met gedetailleerde informatie over webdesign, en veel ervan is vrij beschikbaar. U kunt beginnen met het volgen van enkele gratis online cursussen op Udemy of CodeCademy, of u aansluiten bij een codeergemeenschap zoals freeCodeCamp. Je kunt ook video-tutorials over webdesign vinden op YouTube.
- Als je precies weet waarnaar je op zoek bent, probeer dan een zoekopdracht uit te voeren met specifieke termen (bijvoorbeeld 'klassenkiezers in CSS-zelfstudie').
- Als je een beginner bent zonder ervaring met webdesign, begin dan met het leren van de basisprincipes van codering in HTML en CSS.
Stap 2. Overweeg een cursus te volgen aan een plaatselijke hogeschool of universiteit
Als je naar een hogeschool of universiteit gaat, neem dan contact op met de afdeling computerwetenschappen van je school of raadpleeg je cursuscatalogus om te zien of er webdesigncursussen beschikbaar zijn. Als je niet op school zit, controleer dan of er hogescholen of universiteiten bij jou in de buurt cursussen voor permanente educatie in webdesign aanbieden.
Sommige universiteiten bieden online webdesignlessen aan die toegankelijk zijn voor iedereen die zich wil inschrijven. Kijk op websites zoals Coursera.org om gratis of betaalbare webdesignlessen te vinden die worden gegeven door universitaire docenten
Stap 3. Haal wat webdesignboeken uit de boekhandel of bibliotheek
Een goed boek over webdesign kan van onschatbare waarde zijn als u uw vak leert en toepast. Zoek naar up-to-date boeken over algemeen webdesign of specifieke coderingsformaten en talen die u graag zou willen leren.
Het lezen van tijdschriften en blogartikelen over webdesign is ook een goede manier om nieuwe technieken te leren, inspiratie op te doen en op de hoogte te blijven van de laatste trends
Stap 4. Download of koop webdesignsoftware
Goede webontwerpsoftware kan u helpen om websites efficiënter en effectiever te bouwen, en is ook geweldig om u te helpen de ins en outs te leren van het toepassen van codering, scripting en andere belangrijke ontwerpelementen. U kunt baat hebben bij het gebruik van tools zoals:
- Grafische ontwerpprogramma's, zoals Adobe Photoshop, GIMP of Sketch.
- Hulpprogramma's voor het bouwen van websites, zoals WordPress, Chrome DevTools of Adobe Dreamweaver.
- FTP-software voor het overbrengen van uw voltooide bestanden naar uw server.
Stap 5. Zoek enkele websitesjablonen om mee te spelen als je aan de slag gaat
Er is niets mis met het gebruik van sjablonen terwijl u de basis van webdesign leert. Zoek naar webpaginasjablonen die u leuk vindt en bekijk de code van dichtbij om een idee te krijgen van hoe de ontwerper de pagina heeft samengesteld. U kunt ook experimenteren met het wijzigen van de code en het toevoegen van uw eigen elementen aan de sjabloon.
Zoek naar gratis websitesjablonen om aan de slag te gaan, of experimenteer met sjablonen die bij uw webontwerpsoftware worden geleverd
Methode 2 van 4: HTML beheersen
Stap 1. Maak uzelf vertrouwd met elementaire HTML-tags
HTML is een eenvoudige opmaaktaal die wordt gebruikt om de basiselementen van een website op te maken. U kunt verschillende elementen van uw website opmaken door tags te gebruiken. Tags verschijnen tussen haakjes voor en na elk element en geven instructies over hoe dat element op de pagina zal functioneren. Om de tag te sluiten, plaatst u een / voor de laatste tag tussen de schuine haken.
- Als u bijvoorbeeld wilt dat een deel van uw tekst stoutmoedig, zou je het element als volgt omringen met de tag: Deze tekst is vetgedrukt.
- Enkele veelgebruikte tags zijn (paragraaf), (anker, dat gekoppelde tekst definieert) en (lettertype, dat kan helpen bij het definiëren van verschillende kenmerken van de tekst, zoals grootte en kleur).
- Andere tags definiëren de verschillende delen van het HTML-document zelf. Wordt bijvoorbeeld gebruikt om informatie over de pagina te bevatten die niet zichtbaar is voor de kijker, zoals trefwoorden of een paginabeschrijving die in de resultaten van zoekmachines zou verschijnen.
Stap 2. Leer tagkenmerken te gebruiken
Sommige tags hebben aanvullende informatie nodig om aan te geven hoe ze moeten functioneren. Deze aanvullende informatie verschijnt in de openingstag en wordt een 'attribuut' genoemd. De attribuutnaam verschijnt direct na de tagnaam, gescheiden door een spatie. De attribuutwaarde wordt door een =-teken aan de attribuutnaam gekoppeld en tussen aanhalingstekens geplaatst.
- Als u bijvoorbeeld een deel van uw tekst rood wilt maken, kunt u dit doen door de tag en een geschikt lettertypekleurkenmerk te gebruiken, zoals dit: Deze tekst is rood.
- Veel van de effecten die ooit routinematig werden bereikt met HTML-tagkenmerken, zoals het instellen van verschillende lettertypekleuren, worden nu meestal gedaan met CSS-codering.
Stap 3. Experimenteer met geneste elementen
Met HTML kunt u ook elementen in andere elementen plaatsen om complexere opmaak te creëren. Als u bijvoorbeeld een alinea wilt definiëren en vervolgens een deel van de tekst in de alinea cursief wilt maken, kunt u dat als volgt doen:
Ik hou van coderen!
Stap 4. Maak kennis met lege elementen
Sommige elementen in HTML hebben niet zowel openings- als sluitingstags nodig. Als u bijvoorbeeld een afbeelding invoegt, heeft u slechts één "img"-tag nodig die de tagnaam en eventuele andere noodzakelijke kenmerken bevat (zoals de naam van het afbeeldingsbestand en eventuele alternatieve tekst die u voor toegankelijkheidsdoeleinden wilt toevoegen). Bijvoorbeeld:
Stap 5. Verken de basislay-out van een HTML-document
Om ervoor te zorgen dat uw op HTML gebaseerde website goed werkt, moet u weten hoe u de hele pagina moet opmaken. Dit houdt in dat u bepaalt waar uw html-code begint en eindigt, en dat u tags gebruikt om te bepalen welke delen van de code worden weergegeven en welke delen verborgen achtergrondinformatie moeten bieden. Bijvoorbeeld:
- Gebruik de tag om uw pagina te definiëren als een HTML-document.
- Plaats vervolgens uw hele pagina binnen de tags om te bepalen waar uw code begint en eindigt.
- Plaats alle informatie die niet aan de kijker wordt getoond, zoals de paginatitel, trefwoorden en uw paginabeschrijving, binnen de tags.
- Definieer de hoofdtekst van uw pagina (d.w.z. alle tekst en afbeeldingen die u de kijker wilt laten zien) met de tags.
Methode 3 van 4: Vertrouwd raken met CSS
Stap 1. Gebruik CSS om stijlen toe te passen op uw HTML-documenten
CSS is een stylesheettaal waarmee u verschillende stijl- en ontwerpelementen op uw webpagina kunt toepassen. Als u bijvoorbeeld selectief een specifiek lettertype of tekstkleur wilt toepassen op sommige tekstelementen op uw pagina, kunt u daarvoor een CSS-bestand maken. Vervolgens kunt u het CSS-bestand in uw HTML-document invoegen waar u maar wilt.
-
Als u bijvoorbeeld wilt dat een CSS-bestand alle alinea-elementen in uw HTML-document groen maakt, kunt u een.css-bestand maken met de regels:
- P {
- kleur groen;
- }
- U zou het bestand dan opslaan met een naam als style.css.
- Om het stylesheet op uw HTML-document toe te passen, zou u het als een leeg linkelement in de tags invoegen. Bijvoorbeeld:
Stap 2. Raak vertrouwd met de elementen van een CSS-regelset
Een afzonderlijk stuk CSS-code wordt een 'regelset' genoemd. De regelset bevat de verschillende elementen die bepalen wat u wilt dat uw code doet. Waaronder:
- De selector, die het HTML-element definieert dat u wilt opmaken. Als u bijvoorbeeld wilt dat uw regelset invloed heeft op alinea-elementen, begint u uw regelset met de letter "p".
- De declaratie, die de eigenschappen definieert die u wilt opmaken (zoals de kleur van het lettertype). De aangifte staat tussen accolades {}.
- De eigenschap, die aangeeft welke eigenschap van het HTML-element je wilt opmaken. Binnen de tag kunt u bijvoorbeeld aangeven dat u de kleur van de tekst wilt opmaken.
- De eigenschapswaarde definieert specifiek hoe u de eigenschap wilt wijzigen (bijvoorbeeld als de eigenschap een letterkleur heeft, dan is de eigenschapswaarde "groen").
- U kunt binnen één aangifte verschillende eigenschappen wijzigen.
Stap 3. Pas CSS toe op uw tekst om uw zetwerk er mooi uit te laten zien
CSS is handig om verschillende effecten op uw tekst toe te passen zonder dat u elke eigenschap afzonderlijk in HTML hoeft te coderen. Experimenteer met het wijzigen van verschillende typografische eigenschappen in CSS, waaronder:
- Letterkleur
- Lettertypegrootte
- Lettertypefamilie (bijvoorbeeld de reeks lettertypen die u in uw tekst wilt gebruiken)
- Tekstuitlijning
- Lijnhoogte
- Letterafstand
Stap 4. Experimenteer met vakken en andere CSS-layouttools
CSS is ook handig voor het toevoegen van aantrekkelijke visuele elementen aan uw pagina, zoals tekstvakken en tabellen. Bovendien kunt u het gebruiken om de algehele lay-out van uw pagina te wijzigen en te bepalen waar de verschillende elementen ten opzichte van elkaar worden geplaatst.
U kunt bijvoorbeeld attributen definiëren zoals de breedte en achtergrondkleur van een element, een rand toevoegen of marges instellen die ruimte creëren tussen de verschillende elementen op uw pagina
Methode 4 van 4: Werken met andere ontwerptalen
Stap 1. Leer JavaScript als u interactieve elementen aan uw pagina's wilt toevoegen
JavaScript is een geweldige taal om te leren als u geïnteresseerd bent in het toevoegen van meer geavanceerde functies aan uw websites, zoals animaties en pop-ups. Volg een cursus of zoek naar online tutorials over het coderen in JavaScript en het opnemen van die gecodeerde elementen in uw webpagina's |met behulp van HTML.
Voordat u vertrouwd kunt raken met JavaScript, moet u bekend zijn met de basisprincipes van het bouwen van pagina's in HTML en CSS
Stap 2. Maak uzelf vertrouwd met jQuery om JavaScript-codering gemakkelijker te maken
jQuery is een JavaScript-bibliotheek die Java-programmering kan vereenvoudigen door u toegang te geven tot een verscheidenheid aan vooraf gecodeerde JavaScript-elementen. jQuery is een geweldige tool als je al bekend bent met de basisprincipes van JavaScript-codering.
Je hebt toegang tot de jQuery-bibliotheek en tal van andere waardevolle bronnen via jQuery.org, de website van de jQuery Foundation
Stap 3. Bestudeer server-side talen als je geïnteresseerd bent in back-end ontwikkeling
Hoewel HTML, CSS en JavaScript ideaal zijn voor webontwerpers die zich richten op wat de gebruiker ziet en doet op de website, zijn servertalen handig als u meer geïnteresseerd bent in werk achter de schermen. Als je meer wilt weten over back-endontwikkeling, richt je dan op het leren van talen zoals Python, PHP en Ruby on Rails.
Deze talen zijn handig voor het beheren en verwerken van gegevens die de gebruiker niet ziet. PHP kan bijvoorbeeld worden gebruikt om veilige tools voor het maken van wachtwoorden te bouwen op websites waarvoor een login vereist is
Help-bestanden
HTML-spiekbriefje
CSS-spiekbriefje
