Stelt u zich eens een tijd voor die voorafging aan de uitvinding van het internet. Websites bestonden nog niet, en boeken, gedrukt op papier en stevig ingebonden, waren je voornaamste bron van informatie. Het kostte een aanzienlijke hoeveelheid moeite – en leeswerk – om precies die informatie te vinden die je zocht.
Heden ten dage kun je een webbrowser openen, naar de zoekmachine van je keuze springen, en zoeken maar. Alle denkbare informatie ligt binnen handbereik. En de kans is groot dat iemand ergens een website heeft gebouwd met precies uw zoekopdracht in gedachten.
In dit boek ga ik u laten zien hoe u uw eigen websites kunt bouwen met behulp van de twee meest dominante computertalen-HTML en CSS.
Voordat we onze reis beginnen om te leren hoe je websites bouwt met HTML en CSS, is het belangrijk om de verschillen tussen de twee talen te begrijpen, de syntaxis van elke taal, en een aantal gemeenschappelijke terminologie.
Wat zijn HTML & CSS?
HTML, HyperText Markup Language, geeft inhoud structuur en betekenis door die inhoud te definiëren als, bijvoorbeeld, koppen, paragrafen, of afbeeldingen. CSS, of Cascading Style Sheets, is een presentatietaal die is gemaakt om het uiterlijk van inhoud te stijlen – door bijvoorbeeld lettertypen of kleuren te gebruiken.
De twee talen-HTML en CSS-zijn onafhankelijk van elkaar en dat moet zo blijven. CSS mag niet in een HTML-document worden geschreven en vice versa. Als regel geldt dat HTML altijd de inhoud weergeeft en CSS altijd het uiterlijk van die inhoud.
Met dit begrip van het verschil tussen HTML en CSS, gaan we dieper in op HTML.
Algemene HTML-termen
Terwijl u met HTML aan de slag gaat, zult u waarschijnlijk nieuwe – en vaak vreemde -termen tegenkomen. Na verloop van tijd zult u steeds meer vertrouwd raken met al deze termen, maar de drie veelgebruikte HTML-termen waarmee u het beste kunt beginnen zijn elementen, tags en attributen.
Elementen
Elementen worden geïdentificeerd door het gebruik van kleiner-dan en groter-dan haakjes, < >, die de naam van het element omringen. Zo ziet een element er als volgt uit:
1 2
<a>
Tags
Het gebruik van kleiner-dan en groter-dan haakjes rond een element creëert wat bekend staat als een tag. Tags komen meestal voor in paren van open- en sluit-tags.
Een open-tag markeert het begin van een element. Hij bestaat uit een kleiner-dan teken, gevolgd door de naam van een element, en eindigt met een groter-dan teken; bijvoorbeeld <div>.
Een afsluitende tag markeert het einde van een element. Deze bestaat uit een kleiner-dan teken, gevolgd door een schuine streep en de naam van het element, en eindigt met een groter-dan teken; bijvoorbeeld </div>.
De inhoud die tussen de openings- en sluit-tags valt, is de inhoud van dat element. Een ankerlink heeft bijvoorbeeld een openingstag van <a> en een sluitingstag van </a>. Wat tussen deze twee tags valt, is de inhoud van de anker-link.
Dus anker-tags zien er ongeveer zo uit:
1 2
<a>...</a>
Attributen
Attributen zijn eigenschappen die worden gebruikt om extra informatie over een element te geven. De meest voorkomende attributen zijn het id attribuut, dat een element identificeert; het class attribuut, dat een element classificeert; het src attribuut, dat een bron specificeert voor embeddable content; en het href attribuut, dat een hyperlink verwijzing geeft naar een gelinkte bron.
Attributen worden gedefinieerd in de openingstag, na de naam van een element. Over het algemeen bevatten attributen een naam en een waarde. De opmaak van deze attributen bestaat uit de attribuutnaam gevolgd door een gelijkteken en vervolgens een geciteerde attribuutwaarde. Bijvoorbeeld, een <a> element met een href attribuut zou er als volgt uitzien:
1 2
<a href="http://shayhowe.com/">Shay Howe</a>
Common HTML Terms Demo
Zie de Pen Common HTML Terms van Shay Howe (@shayhowe) op CodePen.
De voorgaande code toont de tekst “Shay Howe” op de webpagina en brengt gebruikers naar http://shayhowe.com/ als ze op de “Shay Howe”-tekst klikken. Het ankerelement wordt aangegeven met de openende <a> en sluitende </a> tags die de tekst omsluiten, en het hyperlink-referentie-attribuut en de waarde worden aangegeven met href="http://shayhowe.com" in de openende tag.
Fig 1
HTML-syntaxisoverzicht met een element, attribuut, en tag
Nu je weet wat HTML-elementen, tags en attributen zijn, laten we eens kijken hoe we onze eerste webpagina in elkaar zetten.
De HTML-documentstructuur instellen
HTML-documenten zijn platte tekstdocumenten die zijn opgeslagen met een .html bestandsextensie in plaats van een .txt bestandsextensie. Om te beginnen met het schrijven van HTML, heb je eerst een tekstverwerker nodig die je goed kunt gebruiken. Helaas vallen Microsoft Word of Pages hier niet onder, omdat dat rich text editors zijn. Twee van de populairdere platte tekst editors voor het schrijven van HTML en CSS zijn Dreamweaver en Sublime Text. Gratis alternatieven zijn ook Notepad++ voor Windows en TextWrangler voor Mac.
De documenttype-verklaring, of <!DOCTYPE html>, informeert webbrowsers welke versie van HTML wordt gebruikt en wordt helemaal aan het begin van het HTML-document geplaatst. Omdat we de laatste versie van HTML gebruiken, is onze documenttype-verklaring gewoon <!DOCTYPE html>. Na de documenttype-verklaring geeft het <html> element het begin van het document aan.
Binnen het <html> element geeft het <head> element de bovenkant van het document aan, inclusief eventuele metadata (begeleidende informatie over de pagina). De inhoud binnen het <head> element wordt niet op de webpagina zelf weergegeven. In plaats daarvan kan het de titel van het document bevatten (die wordt weergegeven op de titelbalk in het browservenster), links naar externe bestanden, of andere nuttige metagegevens.
Alle zichtbare inhoud binnen de webpagina valt binnen het <body>-element. Een typische HTML-documentstructuur ziet er als volgt uit:
HTML Document Structure Demo
Bekijk de Pen HTML Document Structure door Shay Howe (@shayhowe) op CodePen.
De voorgaande code toont het document dat begint met de documenttype-verklaring, <!DOCTYPE html>, direct gevolgd door het <html> element. Binnen het <html> element komen de <head> en <body> elementen. Het <head> element bevat de tekencodering van de pagina via de <meta charset="utf-8"> tag en de titel van het document via het <title> element. Het <body> element bevat een koptekst via het <h1> element en een paragraaf via het <p> element. Omdat zowel de kop als de paragraaf genest zijn binnen het <body> element, zijn ze zichtbaar op de webpagina.
Wanneer een element binnen een ander element wordt geplaatst, ook wel genest genoemd, is het een goed idee om dat element te laten inspringen om de documentstructuur goed georganiseerd en leesbaar te houden. In de vorige code zijn zowel de <head> als de <body> elementen genest – en ingesprongen – binnen het <html> element. Het inspringpatroon voor elementen gaat door als nieuwe elementen worden toegevoegd binnen de <head> en <body> elementen.
Zelfsluitende elementen
In het vorige voorbeeld had het <meta> element slechts één tag en bevatte het geen afsluitende tag. Vrees niet, dit was opzettelijk. Niet alle elementen bestaan uit openings- en sluitings-tags. Sommige elementen krijgen hun inhoud of gedrag gewoon van attributen binnen een enkele tag. Het <meta> element is een van deze elementen. De inhoud van het vorige <meta> element wordt toegewezen met behulp van het charset attribuut en de waarde. Andere veel voorkomende zelfsluitende elementen zijn
<br>
<embed>
<hr>
<img>
<input>
<link>
<meta>
<param>
<source>
<wbr>
De hier geschetste structuur, waarin gebruik wordt gemaakt van het documenttype <!DOCTYPE html> en <html><head>, en <body> elementen, is vrij gebruikelijk. We zullen deze documentstructuur bij de hand willen houden, omdat we deze vaak zullen gebruiken bij het maken van nieuwe HTML-documenten.
Code Validation
Hoe voorzichtig we ook zijn bij het schrijven van onze code, we zullen onvermijdelijk fouten maken. Gelukkig hebben we bij het schrijven van HTML en CSS validators om ons werk te controleren. De W3C heeft zowel HTML als CSS validators gebouwd die code scannen op fouten. Het valideren van onze code zorgt er niet alleen voor dat deze in alle browsers goed wordt weergegeven, maar helpt ons ook bij het leren van de beste praktijken voor het schrijven van code.
In de praktijk
Als webdesigners en front-end ontwikkelaars hebben we de luxe om een aantal geweldige conferenties over ons vak bij te wonen. We gaan onze eigen conferentie verzinnen, Styles Conference, en er een website voor bouwen in de volgende lessen.
Fig 1
Onze eerste stappen bij het bouwen van onze Styles Conference-website
Laten we even van versnelling veranderen, weg van HTML, en een blik werpen op CSS. Onthoud dat HTML de inhoud en structuur van onze webpagina’s bepaalt, terwijl CSS de visuele stijl en het uiterlijk van onze webpagina’s bepaalt.
Algemene CSS-termen begrijpen
Naast HTML-termen zijn er ook een paar veelgebruikte CSS-termen waarmee u vertrouwd wilt raken. Deze termen omvatten selectors, eigenschappen en waarden. Net als bij de HTML-terminologie geldt ook hier dat hoe meer u met CSS werkt, hoe meer deze termen een tweede natuur worden.
Selectors
Als elementen aan een webpagina worden toegevoegd, kunnen ze worden vormgegeven met CSS. Een selector geeft precies aan op welk element of welke elementen in onze HTML de stijlen (zoals kleur, grootte en positie) moeten worden toegepast. Selectors kunnen een combinatie van verschillende qualifiers bevatten om unieke elementen te selecteren, afhankelijk van hoe specifiek we willen zijn. We kunnen bijvoorbeeld elke paragraaf op een pagina willen selecteren, of we kunnen alleen een specifieke paragraaf op een pagina willen selecteren.
Selectoren richten zich in het algemeen op een attribuutwaarde, zoals een id of class waarde, of op het type element, zoals <h1> of <p>.
In CSS worden selectors gevolgd door accolades, {}, die de stijlen omvatten die op het geselecteerde element moeten worden toegepast. De selector hier is gericht op alle <p> elementen.
1 2
p { ... }
Eigenschappen
Als een element is geselecteerd, bepaalt een eigenschap de stijlen die op dat element zullen worden toegepast. Namen van eigenschappen vallen na een selector, binnen de accolades, {}, en onmiddellijk voorafgaand aan een dubbele punt, :. Er zijn talrijke eigenschappen die we kunnen gebruiken, zoals backgroundcolorfont-sizeheight, en width, en nieuwe eigenschappen worden vaak toegevoegd. In de volgende code definiëren we de color en font-size eigenschappen die op alle <p> elementen moeten worden toegepast.
1 2 3 4 5
p { color: ...; font-size: ...; }
Values
Tot nu toe hebben we een element geselecteerd met een selector en bepaald welke stijl we willen toepassen met een eigenschap. Nu kunnen we het gedrag van die eigenschap bepalen met een waarde. Waarden kunnen worden geïdentificeerd als de tekst tussen de dubbele punt, :, en de puntkomma, ;. Hier selecteren we alle <p> elementen en stellen we de waarde van de color eigenschap in op orange en de waarde van de font-size eigenschap op 16 pixels.
1 2 3 4 5
p { color: orange; font-size: 16px; }
Om te herzien, in CSS begint onze regelset met de selector, die onmiddellijk wordt gevolgd door accolades. Binnen deze accolades staan declaraties die bestaan uit eigenschap en waarde paren. Elke declaratie begint met een eigenschap, die wordt gevolgd door een dubbele punt, de waarde van de eigenschap, en tenslotte een puntkomma.
Het is gebruikelijk om eigenschap- en waardeparen binnen de accolades te laten inspringen. Net als bij HTML helpen deze inspringingen onze code overzichtelijk en leesbaar te houden.
Fig 1
CSS-syntaxisoverzicht met een selector, eigenschappen, en waarden
Kennis van een paar veelgebruikte termen en de algemene syntaxis van CSS is een goed begin, maar we moeten nog een paar dingen leren voordat we er te diep induiken. We moeten specifiek bekijken hoe selectors werken binnen CSS.
Werken met Selectors
Selectors geven, zoals eerder vermeld, aan welke HTML-elementen worden vormgegeven. Het is belangrijk om volledig te begrijpen hoe je selectors gebruikt en hoe ze kunnen worden ingezet. De eerste stap is om bekend te raken met de verschillende soorten selectors. We beginnen met de meest voorkomende selectors: type-, klasse- en ID-selectors.
Type Selectors
Type selectors richten zich op elementen op basis van hun elementtype. Als we bijvoorbeeld alle divisie-elementen willen targeten, <div>, zouden we een typeselector van div gebruiken. De volgende code toont een typeselector voor divisie-elementen, evenals de bijbehorende HTML die wordt geselecteerd.
CSS
1 2
div { ... }
HTML
1 2 3
<div>...</div> <div>...</div>
Klasselectors
Klasselectors stellen ons in staat een element te selecteren op basis van de class-attribuutwaarde van het element. Klasselectors zijn iets specifieker dan typeselectors, omdat ze een bepaalde groep elementen selecteren in plaats van alle elementen van een bepaald type.
Klasselectors stellen ons in staat om dezelfde stijlen op verschillende elementen tegelijk toe te passen door dezelfde class attribuutwaarde te gebruiken voor meerdere elementen.
In CSS worden klassen aangeduid met een voorlopende punt, ., gevolgd door de class attribuutwaarde. Hier selecteert de klasseselector elk element dat de class attribuutwaarde awesome bevat, inclusief zowel divisie- als alinea-elementen.
ID-selectors zijn nog preciezer dan klasseselectors, omdat ze slechts op één uniek element tegelijk gericht zijn. Net zoals klasseselectors de class attribuutwaarde van een element als selector gebruiken, gebruiken ID-selectors de id attribuutwaarde van een element als selector.
Op welk type element ze ook voorkomen, id attribuutwaarden kunnen maar één keer per pagina worden gebruikt. Als ze worden gebruikt, moeten ze worden gereserveerd voor significante elementen.
In CSS worden ID selectors aangeduid met een voorloop hash-teken, #, gevolgd door de id attribuut waarde. Hier zal de ID selector alleen het element selecteren dat de id attribuut waarde van shayhowe bevat.
CSS
1 2
#shayhowe { ... }
HTML
1 2
<div>...</div>
Aanvullende selectors
Selectors zijn uiterst krachtig, en de selectors die hier worden beschreven zijn de meest voorkomende selectors die we zullen tegenkomen. Deze selectors zijn ook nog maar het begin. Er bestaan veel meer geavanceerde selectors en die zijn ook beschikbaar. Als je je vertrouwd voelt met deze selectors, wees dan niet bang om je te verdiepen in de meer geavanceerde selectors.
Op het juiste moment begint alles samen te komen. We voegen elementen toe aan een pagina in onze HTML, en we kunnen die elementen vervolgens selecteren en er stijlen op toepassen met CSS. Laten we nu de punten verbinden tussen onze HTML en CSS, en deze twee talen met elkaar laten samenwerken.
Referencing CSS
Om onze CSS met onze HTML te laten praten, moeten we naar ons CSS bestand in onze HTML verwijzen. De beste manier om naar onze CSS te verwijzen is door al onze stijlen in een enkel extern stijlblad op te nemen, waarnaar wordt verwezen vanuit het <head> element van ons HTML-document. Door een enkel extern stijlblad te gebruiken, kunnen we dezelfde stijlen gebruiken voor een hele website en snel wijzigingen aanbrengen voor de hele site.
Andere opties voor het toevoegen van CSS
Andere opties voor het verwijzen naar CSS zijn onder andere het gebruik van interne en inline stijlen. U kunt deze opties in het wild tegenkomen, maar ze worden over het algemeen afgekeurd, omdat ze het bijwerken van websites omslachtig en onhandelbaar maken.
Om ons externe CSS stylesheet te maken, willen we weer de tekstverwerker van onze keuze gebruiken om een nieuw tekstbestand te maken met een .css bestandsextensie. Ons CSS-bestand moet worden opgeslagen in dezelfde map, of een submap, waar ons HTML-bestand zich bevindt.
In het <head> element van het HTML-document wordt het <link> element gebruikt om de relatie tussen het HTML-bestand en het CSS-bestand te definiëren. Omdat we naar CSS linken, gebruiken we het rel attribuut met een waarde van stylesheet om hun relatie aan te geven. Verder wordt het href-attribuut (of hyperlinkverwijzing) gebruikt om de locatie, of het pad, van het CSS-bestand aan te geven.
Overweeg het volgende voorbeeld van een HTML-document <head>-element dat verwijst naar een enkel extern stijlblad.
Om ervoor te zorgen dat de CSS correct wordt weergegeven, moet het pad van het href attribuut direct corresponderen met waar ons CSS bestand is opgeslagen. In het voorgaande voorbeeld is het main.css bestand opgeslagen op dezelfde locatie als het HTML bestand, ook wel bekend als de root directory.
Als ons CSS bestand zich in een subdirectory of submap bevindt, moet de href attribuutwaarde overeenkomen met dit pad. Als ons main.css bestand bijvoorbeeld zou zijn opgeslagen in een subdirectory met de naam stylesheets, dan zou de href attribuut waarde stylesheets/main.css zijn, met een voorwaartse schuine streep om aan te geven dat we naar een subdirectory gaan.
Op dit punt beginnen onze pagina’s langzaam maar zeker tot leven te komen. We hebben ons niet al te veel verdiept in CSS, maar het is je misschien opgevallen dat sommige elementen standaard stijlen hebben die we niet hebben aangegeven in onze CSS. Dat is de browser die zijn eigen CSS voorkeursstijlen oplegt voor die elementen. Gelukkig kunnen we deze stijlen vrij eenvoudig overschrijven, en dat is wat we nu gaan doen met behulp van CSS-resets.
Het gebruik van CSS-resets
Elke webbrowser heeft zijn eigen standaard stijlen voor verschillende elementen. Hoe Google Chrome koppen, alinea’s, lijsten, enzovoort weergeeft, kan verschillen van hoe Internet Explorer dat doet. Om ervoor te zorgen dat browsers compatibel zijn, worden CSS-resets veel gebruikt.
CSS-resets nemen elk veelgebruikt HTML-element met een voorgedefinieerde stijl en bieden één uniforme stijl voor alle browsers. Deze resets omvatten over het algemeen het verwijderen van alle sizing, marges, paddings, of extra stijlen en het afzwakken van deze waarden. Omdat CSS cascadeert van boven naar beneden – meer daarover binnenkort – moet onze reset helemaal bovenaan in ons stijlblad staan. Dit zorgt ervoor dat die stijlen eerst worden gelezen en dat alle verschillende web browsers werken vanuit een gemeenschappelijke basislijn.
Er zijn een heleboel verschillende resets beschikbaar om te gebruiken, die allemaal hun eigen sterke punten hebben. Een van de populairste resets is die van Eric Meyer, die is aangepast om stijlen op te nemen voor de nieuwe HTML5-elementen.
Als je je wat avontuurlijker voelt, is er ook Normalize.css, gemaakt door Nicolas Gallagher. Normalize.css richt zich niet op het gebruik van een harde reset voor alle gemeenschappelijke elementen, maar in plaats daarvan op het instellen van gemeenschappelijke stijlen voor deze elementen. Het vereist een beter begrip van CSS, evenals bewustzijn van wat je zou willen dat je stijlen zijn.
Cross-Browser Compatibility & Testen
Zoals eerder vermeld, verschillende browsers renderen elementen op verschillende manieren. Het is belangrijk om de waarde in te zien van cross-browser compatibiliteit en testen. Websites hoeven er niet in elke browser precies hetzelfde uit te zien, maar ze moeten wel in de buurt komen. Welke browsers u wilt ondersteunen, en in welke mate, is een beslissing die u moet nemen op basis van wat het beste is voor uw website.
In totaal zijn er een handvol dingen waar u op moet letten bij het schrijven van CSS. Het goede nieuws is dat alles mogelijk is, en met een beetje geduld komen we er wel uit.
In de praktijk
Het laatste punt op onze conferentie website oppakken, en eens kijken of we wat CSS kunnen toevoegen.
Tijd om ons werk te bekijken en te zien of onze HTML en CSS goed samen gaan. Als we nu ons index.html bestand openen (of de pagina vernieuwen als die al geopend is) in een web browser, zou dat iets andere resultaten moeten geven dan voorheen.
Fig 1
Onze Styles Conference-website met een CSS-reset
Demo &Broncode
Hieronder kunt u de Styles Conference website in zijn huidige staat bekijken, en ook de broncode van de website in zijn huidige staat downloaden.
Bekijk de Styles Conference website ofDownload de broncode (zip file)
Samenvatting
Zo ver, zo goed! We hebben een paar grote stappen gezet in deze les.
Denk je eens in, je kent nu de basisbeginselen van HTML en CSS. Naarmate we verdergaan en u meer tijd besteedt aan het schrijven van HTML en CSS, zult u zich veel comfortabeler gaan voelen met de twee talen.
Om het samen te vatten: tot nu toe hebben we het volgende behandeld:
Het verschil tussen HTML en CSS
Maken kennis met HTML-elementen, tags en attributen
Opzetten van de structuur van je eerste webpagina
Maken kennis met CSS-selectors, eigenschappen en waarden
Werken met CSS-selectors
Referencing CSS in je HTML
De waarde van CSS-resets
Nu gaan we eens wat dieper in op HTML en leren we een beetje over semantiek.
