HTML & CSS voor beginners

Wie websites maken wil, komt vroeg of laat in aanraking met HTML. Daarom zullen we in de aankomende video-trainingen samen de prachtige wereld van HTML veroveren. Jullie zullen stap voor stap zien wat deze taal inhoudt en hoe je er in combinatie met stylesheets websites mee kunt maken. Aan het begin staat echter een vraag: Wat is eigenlijk HTML en wat hebben stylesheets ermee te maken? Aan het einde van deze video-training zullen jullie ook te weten komen welke software jullie nodig hebben om websites te maken en te testen.

In tegenstelling tot programmeertalen zoals bijvoorbeeld Java, kan men in HTML snel eerste resultaten behalen zonder veel inspanning. Alles wat je nodig hebt om te beginnen is een editor en een browser. In deze video-training zullen jullie jullie eerste HTML-document aanmaken en meteen een uitvoer in de browser zien. En zo leren jullie terloops hoe HTML-documenten, uiteindelijk websites, zijn opgebouwd en welke basisstructuur ze volgen.

Jullie kennen de relatie tussen de begrippen Element, Tag en Attribuut al uit het eerste deel van deze reeks. Nu gaat het erom hoe deze zaken praktisch kunnen worden gebruikt in HTML-documenten. Aan het einde van deze video-training zullen jullie dan leren hoe jullie jullie HTML-code kunnen controleren op syntactische correctheid.

Jullie websites zullen zeker niet alleen uit afbeeldingen bestaan, maar ook uit teksten. En teksten moeten, alleen al voor een goede leesbaarheid, goed gestructureerd worden. Hiervoor biedt HTML tal van elementen. In deze videocursus worden de belangrijkste structuurelementen voor teksten gepresenteerd. Bovendien leer je hoe HTML-specifieke tekens gemaskeerd kunnen worden en hoe je programmalijsten kunt weergeven.

Voor een goede leesbaarheid van teksten is een fatsoenlijke opmaak nodig. En dat gaat verder dan louter structuurelementen zoals titels en alinea's. Zo kan men in HTML bijvoorbeeld citaten markeren en individuele passages vet of cursief weergeven. Deze video-training biedt de nodige gereedschappen daarvoor.

Elementen die je regelmatig in HTML zult tegenkomen, zijn lijsten. Dit geldt overigens niet alleen voor takenlijsten, contactgegevens, maar ook voor het definiëren van menu's. Lijsten spelen dus een zeer centrale rol in HTML. Reden genoeg om er uitgebreid naar te kijken. In deze video-training leer je alle soorten lijsten kennen die HTML te bieden heeft. Dit zijn opsommingen, genummerde lijsten, definities en menu's. Bovendien krijg je duidelijke instructies over hoe je de opmaak van lijsten naar wens kunt aanpassen.

Tabellen spelen op websites nog steeds een belangrijke rol. Dat geldt echter alleen nog voor de presentatie van gegevens. Toen er nog geen CSS was of dit nog niet echt door de browsers werd ondersteund, dienden tabellen overigens ook voor een heel ander doel: Men gebruikte ze voor lay-outs. Daarbinnen plaatste men de individuele paginablokken. De resulterende lay-outtabelmonsters behoren gelukkig tot het verleden dankzij CSS. Tegenwoordig worden tabellen in webdesign uitsluitend gebruikt waar ze eigenlijk voor bedoeld zijn: om gegevens overzichtelijk weer te geven.

Goed ogende tabellen hoeven niet per se te bestaan uit een identiek aantal cellen binnen een rij in een tabel. In deze videotraining wordt getoond hoe je tabelcellen met elkaar kunt verbinden. In het tweede deel leer je iets over het labelen van tabellen. Dit aspect is belangrijk omdat je zo de bezoekers meteen kunt laten zien om welke gegevens het uiteindelijk gaat. De videotraining wordt afgesloten met een gedetailleerde blik op het ontwerpen van tabellen in HTML. Op dit gebied is er veel veranderd in vergelijking met eerdere HTML-versies.

Bijna elke website kan niet zonder afbeeldingen. Het is dan ook geen wonder dat het onderwerp afbeeldingen in deze serie een belangrijke plaats inneemt. In deze en de volgende video-trainingen wordt getoond hoe je afbeeldingen in jouw websites kunt integreren. Aan het begin staat echter een ander aspect centraal: welke beeldformaten zijn eigenlijk geschikt voor gebruik online? In het tweede deel gaat het er dan om hoe beeldpaden kunnen worden gerefereerd.

Hoe afbeeldingen in principe kunnen worden gerefereerd, werd getoond in het vorige deel. Het einde van de vlaggenmast wat betreft de afbeeldingen is echter nog lang niet bereikt. Feitelijk kunnen afbeeldingen nader worden beschreven met behulp van bijbehorende attributen. Dit is waar het in het begin van deze video om draait. In het tweede deel wordt beschreven hoe onderschriften van afbeeldingen kunnen worden geïmplementeerd met behulp van HTML5-syntaxis.

Het zout in de pap van het internet is de mogelijkheid om inhoud met elkaar te verbinden via hyperlinks. Zonder deze hyperlinks zou het internet zoals we het nu kennen niet mogelijk zijn. Welke mogelijkheden HTML jullie biedt met betrekking tot hyperlink-definities, leren jullie in deze en de volgende video-training.

HTML biedt op het gebied van hyperlinks nog veel meer mogelijkheden dan wat er in de vorige video-training is getoond. Zo kun je bijvoorbeeld e-mailverwijzingen definiëren en bestanden aanbieden om te downloaden. Deze en andere varianten van hyperlinks leer je kennen in deze video-training.

Om maar meteen met de deur in huis te vallen: met name in HTML5 hebben de formulieren een grote sprong voorwaarts gemaakt. Dankzij talrijke nieuwe veldtypen kunnen nu zeer interessante formulieren worden gemaakt. Deze nieuwe mogelijkheden zullen jullie natuurlijk nog leren kennen. We beginnen echter in deze video-training met de benodigde tools die nodig zijn om formulieren te definiëren. Aan het begin gaat het om het maken van tekstvelden op één regel. Jullie zullen zien hoe deze gedefinieerd kunnen worden, hoe je ze kunt voorzien van waarden en hoe je ze als niet-beschrijfbaar kunt instellen. Evenzo zullen jullie het definiëren van wachtwoordvelden leren kennen. Dit is tenslotte een veldtype dat af en toe van pas kan komen.

In deze video leer je meer veldtypen kennen waarmee je je formulieren kunt uitbreiden. Specifiek gaat het hierbij om selectievakjes, radio-knoppen en selectievakjes. Dit zijn allemaal belangrijke elementen die je vaak in formulieren nodig hebt. Reden genoeg dus om een nauwere blik te werpen op deze en andere elementen.

Met HTML5 is er ook en vooral op het gebied van formulieren veel veranderd. Reden genoeg om uitgebreid te kijken naar de talrijke nieuwe formulierfuncties die inmiddels gebruikt kunnen worden. Het is namelijk voorbij met eenvoudige invoervelden. Eindelijk kunnen ook schuifregelaars, datums, enzovoort worden gedefinieerd - en dat alles zonder het gebruik van JavaScript.

De eerste stap in de wereld van HTML5-formulieren is geëffend door de vorige videotraining. Het einde van de vlaggenstok is echter nog lang niet bereikt. Inderdaad heeft HTML5 op dit gebied nog veel meer te bieden.

In HTML5 zijn er, naast de gepresenteerde veldtypen, ook tal van andere interessante aspecten. Zo kun je nu bijvoorbeeld met heel weinig moeite een automatische aanvulfunctie voor formuliervelden realiseren, geïnspireerd door Google. Deze en andere zaken worden getoond in deze video-training.

Wie zich bezighoudt met HTML5, kan niet om het onderwerp semantiek heen. In deze en de volgende video-trainingen zullen jullie de belangrijkste elementen leren kennen die HTML5 met zich meebrengt, waarmee jullie documenten op een logische manier kunnen structureren. Deze logische structurering is namelijk onmisbaar als men zijn webpagina's toekomstbestendig wil maken.

HTML5 brengt tal van nieuwe structurele elementen met zich mee. Welke dat zijn wordt in de vorige video training al getoond. Nu gaat het erom deze elementen praktisch toe te passen. Het zijn namelijk deze elementen die zorgen voor een semantische structurering van de documenten. Jullie zullen in deze video training voornamelijk de twee elementen artikel en sectie leren kennen. Deze zorgen voor de fundamentele structuur van HTML-documenten. Aan het einde van deze video wordt ook nog eens gekeken naar de verschillen tussen div, artikel en sectie.

In HTML5 kunnen documenten niet alleen worden onderverdeeld in artikelen en secties. Eigenlijk zijn er nog veel meer extra elementen zoals header, footer & Co. voor een semantische structurering. Deze zijn zeker de moeite waard om nog eens nader te bekijken.

In deze laatste video-training van de reeks Semantiek Elementen zullen jullie meer structuurelementen leren kennen. HTML5 biedt namelijk ook elementen voor navigatiegebieden, marginalia en samenvattingen.

In eerdere HTML-versies was het een nachtmerrie om multimedia-inhoud in te voegen. Met een combinatie van het object- en embed-element werd geprobeerd video's en geluid op de website te plaatsen. Of de ingesloten video daadwerkelijk kon worden afgespeeld, was twijfelachtig. Ook op dit gebied is er in HTML5 veel verbeterd.

Hoe video's ingesloten kunnen worden, hebben jullie gezien. Nu zijn video's natuurlijk niet alles wat je aan je bezoekers op de website kunt presenteren. In deze video-training wordt daarom beschreven welke opties HTML5 biedt voor het insluiten van audiobestanden en Flash-films. Want ook deze dingen moeten af en toe op je site worden weergegeven.

Frames bestaan niet meer in HTML5. Hun naamgenoten, de iFrames, hebben echter ook de sprong gemaakt naar het nieuwe HTML-tijdperk en zijn aanwezig in HTML5. Terwijl klassieke frames een pagina in onafhankelijke secties verdelen, kunnen via iFrames willekeurige bronnen in webpagina's worden ingesloten.

HTML is bedoeld voor de structurering van de inhoud. Zodra het aankomt op het ontwerpen van de pagina, komen de Cascading Style Sheets (CSS) in het spel. Want pas de combinatie van CSS en HTML maakt het mogelijk om van een eenvoudige HTML-structuur aantrekkelijke websites te maken. Reden genoeg dus om eens nader te kijken naar CSS.

Een begrip dat je in verband met CSS steeds weer zult tegenkomen, is dat van "selectoren". Met behulp van deze selectoren worden uiteindelijk de elementen vastgesteld die met CSS opgemaakt moeten worden. In deze video-training zul je de eerste selectoren leren kennen. Hier worden element-, ID- en universele selectoren aan je voorgesteld. Met deze selectoren zul je dagelijks te maken hebben wanneer je je webpagina's met CSS ontwerpt.

Sommige selectors zijn in de vorige videotraining geïntroduceerd. Natuurlijk heeft CSS echter nog vele andere selectors te bieden.

In deze laatste video-training over selectors presenteer ik jullie een heel speciale vorm van selectors. Het gaat hierbij om zogenaamde pseudoklassen en pseudo-elementen. Dit zijn selectors die niet verwijzen naar specifieke HTML-elementen, maar door het uitvoerapparaat worden gegenereerd.

In deze en de volgende video-trainingen zal ik jullie de belangrijkste CSS-eigenschappen presenteren. Het gaat hier overigens niet om het presenteren van een CSS-referentie. Eerder gaan jullie een gevoel krijgen voor wat er allemaal mogelijk is met CSS. We beginnen hier met de tekst opmaak. In deze video-training worden alle elementen gepresenteerd die direct te maken hebben met de zogenaamde lettertypen. Let op dat er nog meer eigenschappen zijn met betrekking tot de tekst opmaak die dan in de volgende video-training zullen worden getoond.

Over de in deze video-training gepresenteerde CSS-eigenschappen kunnen teksten en tekens optisch worden aangepast. Zo kunnen bijvoorbeeld de afstanden tussen de afzonderlijke letters worden veranderd en teksten uitgelijnd worden. Ook deze eigenschappen helpen jullie dus om teksten aantrekkelijk te presenteren.

Natuurlijk mogen ook de kleurdefinities en grafische achtergronden niet ontbreken bij CSS. De bijbehorende eigenschappen worden behandeld in deze video-training. CSS biedt inderdaad talloze mogelijkheden op dit gebied. Men kan niet alleen eenvoudig kleuren en afbeeldingen definiëren. Ook herhalende achtergrondafbeeldingen zijn mogelijk.

Juist als het gaat om het ontwerpen van websites, zul je te maken krijgen met het definiëren van buitenmarges en afstanden. In de laatste videolessen van deze serie wordt trouwens een uitgebreid voorbeeldproject uitgewerkt, waarin ook praktisch het gebruik van deze en andere CSS-eigenschappen wordt getoond.

CSS biedt enkele interessante eigenschappen voor tekst alinea's en blokken die ik jullie niet wil onthouden. Zo kunnen jullie bijvoorbeeld tekst alinea's links en rechts uitlijnen.

Als het gaat om kaders, denken de meeste mensen waarschijnlijk eerst aan tabellen. En inderdaad spelen kaders een belangrijke rol in verband met tabellen. Echter, met behulp van CSS kunnen ook andere elementen worden voorzien van kaders. En hoe deze kaders er uiteindelijk uitzien, kan ook expliciet worden bepaald door middel van CSS-definities.

Hoe lijsten gedefinieerd kunnen worden, weten jullie waarschijnlijk al lang. Dat is immers uitgebreid getoond in deze serie. Maar lijsten zijn van nature niet per se chic. Om ze er ook visueel aantrekkelijk uit te laten zien, zijn er bijbehorende CSS-eigenschappen. Welke dat zijn en hoe je ze gebruikt, leer je in deze video-training. In het tweede deel gaat het dan over de zogenaamde tellers, waarmee ook complexere nummeringen mogelijk zijn.

Bij het ontwerpen van websites zal het zogenaamde boxmodel jullie constante metgezel zijn. Want hiermee wordt uiteindelijk vastgesteld hoe en waar elementen worden geplaatst.

Om elementen binnen de website op de gewenste posities te kunnen plaatsen, moeten jullie specifieke CSS-eigenschappen gebruiken.

In de vorige videotraining werd het zogenaamde Floating-principe al kort besproken. Het onderwerp is echter zo complex dat hier nogmaals uitvoerig naar dat floaten wordt gekeken. Het is namelijk een essentieel concept in CSS. Alleen als men dit onderwerp begrijpt, kan men daadwerkelijk websites maken.

In de eerdere video-trainingen zijn de basisprincipes voor werken met HTML en CSS uitgelegd. Nu moeten natuurlijk ook de eerste vruchten worden geplukt. In de volgende video-trainingen zal daarom een voorbeeld website stap voor stap worden opgebouwd. In deze video-training leren jullie echter eerst de verschillende lay-outvarianten kennen. Want de keuze voor de juiste lay-outvorm zou altijd aan het begin van jullie overwegingen voor het ontwerpen van een website moeten staan.

Ik ga bij ons praktijkproject uit van een typische kolommenindeling. Voordat ik dit project echter live en in kleur presenteer, wil ik jullie heel concreet laten zien hoe je zelf kolommenindelingen kunt implementeren. De focus zal hier liggen op twee- en driedelige indelingen, aangezien deze nog steeds de basis vormen voor het merendeel van de websites.

In de volgende video-trainingen zal ik jullie laten zien hoe je stap voor stap een website-indeling kunt realiseren. Hiervoor zijn er heel verschillende benaderingen. Vaak worden de indelingen in Photoshop gemaakt. Vervolgens worden de individuele paginacomponenten uitgesneden en samengevoegd als een website met behulp van CSS en HTML. Dit is precies hoe het hier ook wordt aangepakt. Echter, in plaats van Photoshop gebruik ik het gratis beschikbare GIMP. De beschreven stappen kunnen echter ook in Photoshop worden nagevolgd.

De eerste stappen richting je eigen lay-out zijn gezet in de vorige video-training. Natuurlijk ontbreken er nog tal van elementen. Deze zullen in deze video-training worden toegevoegd. Zodra de lay-out klaar is, zullen we doorgaan met het uitsnijden, het zogenaamde 'slicen'. Dat is uiteindelijk de stap waardoor het mogelijk wordt om het gecreëerde design praktisch te implementeren via HTML en CSS.

Jullie hebben het ontwerp gemaakt. Nu gaan we over tot de praktische uitvoering daarvan. In deze video-training zullen we samen de HTML-basisstructuur van de website creëren.

Het basisframe van de pagina staat al, maar het oogt nogal sober. In deze videotraining wordt de inhoud van de pagina verder ontwikkeld. De focus ligt eerst op het menu dat zich bovenaan de pagina bevindt. Daaraan sluiten zich het rechter- en het onderste menu aan.

Een cruciaal aspect voor een aantrekkelijke website is natuurlijk de typografie. Tijdens deze serie hebben jullie al geleerd welke mogelijkheden HTML en CSS bieden op het gebied van typografie. In deze videocursus zullen we deze mogelijkheden gebruiken om de pagina op te fleuren. Daarbij zullen we ons overigens niet alleen richten op de klassieke varianten. Het toverwoord voor het gebruik van 'exotische' lettertypen is @font-face.

Meestal zou men zijn bezoekers de mogelijkheid moeten bieden om contact op te nemen. In het eenvoudigste geval noteert men een telefoonnummer en/of e-mailadres. Dat kan zo worden gedaan, maar is niet bijzonder comfortabel voor de bezoekers. Daarom zullen we in deze video-training een formulier maken waarmee de bezoekers op een zeer eenvoudige manier contact met ons kunnen opnemen. En natuurlijk zullen we daarbij gebruikmaken van de mogelijkheden die HTML5 en CSS3 ons bieden.

De basisstructuur en het fundamentele ontwerp van het formulier zijn gedefinieerd en afgerond. En eigenlijk ziet het formulier er al behoorlijk aantrekkelijk uit. Dankzij CSS3 is er echter nog veel meer mogelijk als het gaat om het visueel verbeteren van het formulier. In deze video-training zal het formulier dan ook nog wat verder worden gestileerd.

Reeds op dit moment hebben jullie zeker veel tijd en werk gestoken in de ontwikkeling van jullie website. Het begon bij het concept, de vormgeving van het ontwerp tot aan de implementatie ervan in HTML en CSS. Reden genoeg dus om jullie website nu eindelijk aan de wereld te presenteren. Dat is precies waar dit video-trainingsprogramma om draait. Ik zal jullie laten zien hoe je de website online kunt zetten. Allereerst leer je hoe je de juiste provider en het juiste webspace-pakket kunt verkrijgen. Vervolgens worden de gegevens geüpload naar de server met het populair rechtmatig geliefde FileZilla. En dan, ja dan is de website daadwerkelijk online.

In deze video-training wil ik jullie een kleine inkijk geven in de juiste ontwikkelingsomgeving voor het maken van websites. Wie al complete websites of kleinere individuele pagina's heeft geschreven, heeft meestal al over deze editors en kan deze video overslaan.

Getoond worden:
DreamWeaver
Panic Coda
Panic Transmit: http://panic.com/transmit/
Filezilla: http://filezilla.de/

Het HTML5-Boilerplate is een krachtige sjabloon voor HTML5- en CSS3-websites; het maakt HTML5 zo compatibel mogelijk met crossbrowser en bevat enkele zeer goede code-sjablonen op het gebied van JavaScript, CSS3 en natuurlijk ook HTML.

In deze video-training wil ik jullie deze functies graag voorstellen. Voor een start in het gebied van HTML5 en CSS3 is er momenteel geen beter sjabloon beschikbaar.

In deze video-training wil ik jullie enkele zeer nuttige tools voorstellen waarmee je HTML5 en CSS3 kunt ontwikkelen.

Hieronder vallen:
html5css3box.com
kuler.adobe.com (nu https://color.adobe.com/de/create/color-wheel)
css3generator.com
typetester.org
google.com/webfonts
cufon.shoqolate.com
videojs.com