les 1
Stel je de tijd voor de uitvinding van het internet voor. Websites bestonden niet en boeken, gedrukt op papier en strak gebonden, waren je primaire bron van informatie. Het kostte een aanzienlijke hoeveelheid moeite om het exacte stuk informatie op te sporen dat je zocht.
Vandaag de dag kunt u een webbrowser openen, naar uw zoekmachine naar keuze springen en wegzoeken. Elk beetje denkbare informatie ligt binnen handbereik. En de kans is groot dat iemand ergens een website heeft gebouwd met jouw exacte zoekopdracht in gedachten.
In deze lessen ga ik je laten zien hoe je je eigen websites kunt bouwen met behulp van de twee meest dominante computertalen – HTML en CSS.
Voordat we onze reis beginnen om te leren hoe we websites kunnen bouwen met HTML en CSS, is het belangrijk om de verschillen tussen de twee talen, de syntaxis van elke taal en enkele algemene terminologie te begrijpen.
Wat zijn HTML &CSS?
HTML, HyperText Markup Language, geeft inhoud structuur en betekenis door die inhoud te definiëren als bijvoorbeeld koppen, alinea’s of afbeeldingen. CSS, of Cascading Style Sheets, is een presentatietaal die is gemaakt om het uiterlijk van inhoud te stylen, bijvoorbeeld met behulp van lettertypen of kleuren.
De twee talen – HTML en CSS – zijn onafhankelijk van elkaar en moeten dat blijven. CSS mag niet in een HTML-document worden geschreven en vice versa. In de regel vertegenwoordigt HTML altijd inhoud en CSS vertegenwoordigt altijd het uiterlijk van die inhoud.
Met dit begrip van het verschil tussen HTML en CSS, laten we html in meer detail bekijken.
Algemene HTML-termen begrijpen
Terwijl u aan de slag gaat met HTML, zult u waarschijnlijk nieuwe – en vaak vreemde – termen tegenkomen. Na verloop van tijd zul je ze allemaal steeds meer leren kennen, maar de drie meest voorkomende HTML-termen waarmee je moet beginnen, zijn elementen, tags en attributen.
Elementen
Elementen zijn aanduidingen die de structuur en inhoud van objecten binnen een pagina definiëren.
Elementen worden geïdentificeerd door het gebruik van kleiner-dan en groter-dan hoek haakjes (lees: angle brackets), rond de elementnaam. Een element ziet er dus als volgt uit: <element>
<a>Tags
Het gebruik van kleiner-dan en groter-dan haakjes (angle brackets) rond een element creëert wat bekend staat als een tag. Tags komen meestal voor in paren van openings- en sluittags.
Een openingstag markeert het begin van een element. Het bestaat uit een kleiner-dan karakter gevolgd door de naam van een element, en eindigt dan met een groter-dan karakter; bijvoorbeeld.<div>
Een afsluitende tag markeert het einde van een element. Het bestaat uit een kleiner-dan karakter gevolgd door een schuine streep en de naam van het element, en eindigt dan met een groter-dan teken; bijvoorbeeld.</div>
De inhoud die tussen de openings- en sluitingstags valt, is de inhoud van dat element. Een link- of anker koppeling heeft bijvoorbeeld een openingstag van en een afsluitende tag. Wat tussen deze twee tags valt, is de inhoud van de ankerkoppeling.<a></a>
Anker of linktags zien er dus ongeveer als volgt uit:
<a>...</a>Attributen
Attributen of kenmerken zijn eigenschappen die worden gebruikt om aanvullende informatie over een element te verstrekken. De meest voorkomende attributen zijn het attribuut dat een element identificeert (id) en het attribuut dat een element classificeert (class).
Attributen worden gedefinieerd in de openingstag, na de naam van een element. Over het algemeen omvatten attributen een naam en een waarde. De notatie voor deze attributen bestaat uit de naam gevolgd door een is-gelijk teken en vervolgens een opgegeven waarde. Een element met een attribuut ziet er bijvoorbeeld als volgt uit:
<a href="https://rocmn.nl">ROC Midden Nederland</a>De voorgaande code geeft de tekst “ROC Midden Nederland” weer op de webpagina en brengt gebruikers naar https://rocmn.nl/ wanneer ze op de tekst “ROC Midden Nederland” klikken. Het ankerelement wordt gedeclareerd met de openings- en sluitingstags die de tekst omvatten. Het hyperlinkverwijzingskenmerk en de hyperlink worden gedeclareerd met in de openingstag.<a></a>
Nu u weet wat HTML-elementen, tags en kenmerken zijn, laten we eens kijken naar het samenstellen van onze eerste webpagina. Als er hier iets nieuws uitziet, geen zorgen – we zullen het onderweg ontcijferen.
De HTML-documentstructuur instellen
HTML-documenten zijn platte tekstdocumenten die zijn opgeslagen met een bestandsextensie in plaats van een bestandsextensie. Om te beginnen met het schrijven van HTML, hebt u eerst een platte teksteditor nodig die u comfortabel kunt gebruiken. Helaas omvat dit geen Microsoft Word of Pages, omdat dit rich text-editors zijn. Twee van de meer populaire platte teksteditors voor het schrijven van HTML en CSS zijn Dreamweaver en Sublime Text. Gratis alternatieven zijn ook Notepad ++ voor Windows en TextWrangler voor Mac..html.txt
Alle HTML-documenten hebben een vereiste structuur die de volgende declaraties en elementen bevat: , , , en .<!DOCTYPE html><html><head><body>
De documenttypedeclaratie of , informeert webbrowsers welke versie van HTML wordt gebruikt en wordt helemaal aan het begin van het HTML-document geplaatst. Omdat we de nieuwste versie van HTML gebruiken, is onze documenttypedeclaratie eenvoudigweg . Na de documenttypedeclaratie betekent het element het begin van het document.<!DOCTYPE html><!DOCTYPE html><html>
In het element identificeert het element de bovenkant van het document, inclusief eventuele metagegevens (bijbehorende informatie over de pagina). De inhoud in het element wordt niet weergegeven op de webpagina zelf. In plaats daarvan kan het de documenttitel bevatten (die wordt weergegeven op de titelbalk in het browservenster), koppelingen naar externe bestanden of andere nuttige metagegevens.<html><head><head>
Alle zichtbare inhoud op de webpagina valt binnen het element. Een uitsplitsing van een typische HTML-documentstructuur ziet er als volgt uit:<body>
Oefenvragen
- Wat is HTML en wat is CSS?
- Wat zijn de drie meest voorkomende HTML-termen?
- Wat is het verschil tussen een element en een tag?
- Wat zijn attributen en hoe worden ze gedefinieerd?