BASIC WEBCODING
HTML BASISSTRUCTUUR
Elk HTML-document heeft de volgende opmaak:
<!DOCTYPE html> Dit geeft aan dat het om een HTML document gaat
<html lang=”en” dir=”ltr”> Dit geeft het begin van de HTML code aan
<head> Dit bevat alle informatie over de HTML-code, dit staat niet op de webpagina
<meta charset=”utf-8”> Dit geeft aan dat er standaardkarakters worden gebruikt
<title> Dit is een titel </title> Hierin zet je de titel van het document
</head> Dit geeft het einde van de head aan
<body> Binnen de body komt alle inhoud van de webpagina
<h1> Dit is een HTML document </h1> Met h1 t/m h6 maak je koppen binnen de body
<p> Dit is een paragraaf </p> Met p maak je een paragraaf
</body> Dit is het einde van de body
</html> Dit is het einde van het HTML bestand
Als je in een leeg document de tekst html typt en op TAB op je toetsenbord klikt, dan voegt Atom automatisch alle verplichte elementen toe.
Parents en childs
- Parents zijn elementen die zich op één niveau hoger bevinden. <head> is een parent van <title>, <title> moet dus altijd tussen <head> komen te
staan.
- Childs zijn elementen die zich op één niveau lager bevinden. <head> is een child van <html>, <head> moet dus altijd tussen <html> komen te
staan.
- Siblings zijn elementen die zich op hetzelfde niveau bevinden. <head> en <body> zijn siblings.
, ELEMENTEN IN HTML
ELEMENTEN BINNEN DE HEAD
Het meta element bevindt zich binnen de head. Met <meta charset=”UTF-8”> geef je aan dat je standaardkarakters gebruikt, daarnaast kan je met de
meta tag nog meer informatie over je document delen. Dit zorgt ervoor dat de webpagina beter te vinden is op het internet. Je kan bijvoorbeeld dingen
toevoegen zoals de auteur, de beschrijving en sleutelwoorden. Deze tags zijn niet verplicht maar wel handig om ervoor te zorgen dat je pagina goed
vindbaar is.
<meta name=”author” content=”Vera ten Haaf”> Bij author zet je de naam van de schrijver
<meta name=”description” content=”huiswerkopdracht”> Bij description zet je een beschrijving van de webpagina
<meta name=”keywords” content=”Avans, CMD, HTML”> Bij keywords zet je woorden die relevant zijn voor de webpagina
In de head vind je ook het title element. Dit element is wel verplicht voor elke pagina. De titel komt bovenaan te staan in de webbrowser.
<title> Website </title>
In de head voeg je ook een link toe om bijvoorbeeld een extern CSS bestand te koppelen. In het CSS bestand definieer je de opmaak van je website
<link rel="stylesheet" href="huiswerk_les_1.css">
Met het rel attribuut geef je aan dat het om een stylesheet gaat. Met het href attribuut geef je aan welk CSS bestand je wilt koppelen aan het HTML
bestand.
ELEMENTEN BINNEN DE BODY
Om vorm te geven aan je webpagina, kan je gebruik maken van koppen. Hiervoor gebruik je de tags h1 tot en met h6. h1 is de grootste kop en h6 de
kleinste.
<h1> Communicatie en Multimedia design </h1> Dit is de titel van de webpagina
<h3> Voltijdopleiding in ‘s-Hertogenbosch </h3> Dit is een subtitel op de webpagina
De tekst uit een paragraaf zet je binnen de p tag.
<p> De wereld van multimedia fascineert jou. Je bent analytisch en creatief. Je ontwerpt bij Communicatie & Multimedia design voor de media
van vandaag. Je experimenteert met de media van de toekomst. </p>
HTML BASISSTRUCTUUR
Elk HTML-document heeft de volgende opmaak:
<!DOCTYPE html> Dit geeft aan dat het om een HTML document gaat
<html lang=”en” dir=”ltr”> Dit geeft het begin van de HTML code aan
<head> Dit bevat alle informatie over de HTML-code, dit staat niet op de webpagina
<meta charset=”utf-8”> Dit geeft aan dat er standaardkarakters worden gebruikt
<title> Dit is een titel </title> Hierin zet je de titel van het document
</head> Dit geeft het einde van de head aan
<body> Binnen de body komt alle inhoud van de webpagina
<h1> Dit is een HTML document </h1> Met h1 t/m h6 maak je koppen binnen de body
<p> Dit is een paragraaf </p> Met p maak je een paragraaf
</body> Dit is het einde van de body
</html> Dit is het einde van het HTML bestand
Als je in een leeg document de tekst html typt en op TAB op je toetsenbord klikt, dan voegt Atom automatisch alle verplichte elementen toe.
Parents en childs
- Parents zijn elementen die zich op één niveau hoger bevinden. <head> is een parent van <title>, <title> moet dus altijd tussen <head> komen te
staan.
- Childs zijn elementen die zich op één niveau lager bevinden. <head> is een child van <html>, <head> moet dus altijd tussen <html> komen te
staan.
- Siblings zijn elementen die zich op hetzelfde niveau bevinden. <head> en <body> zijn siblings.
, ELEMENTEN IN HTML
ELEMENTEN BINNEN DE HEAD
Het meta element bevindt zich binnen de head. Met <meta charset=”UTF-8”> geef je aan dat je standaardkarakters gebruikt, daarnaast kan je met de
meta tag nog meer informatie over je document delen. Dit zorgt ervoor dat de webpagina beter te vinden is op het internet. Je kan bijvoorbeeld dingen
toevoegen zoals de auteur, de beschrijving en sleutelwoorden. Deze tags zijn niet verplicht maar wel handig om ervoor te zorgen dat je pagina goed
vindbaar is.
<meta name=”author” content=”Vera ten Haaf”> Bij author zet je de naam van de schrijver
<meta name=”description” content=”huiswerkopdracht”> Bij description zet je een beschrijving van de webpagina
<meta name=”keywords” content=”Avans, CMD, HTML”> Bij keywords zet je woorden die relevant zijn voor de webpagina
In de head vind je ook het title element. Dit element is wel verplicht voor elke pagina. De titel komt bovenaan te staan in de webbrowser.
<title> Website </title>
In de head voeg je ook een link toe om bijvoorbeeld een extern CSS bestand te koppelen. In het CSS bestand definieer je de opmaak van je website
<link rel="stylesheet" href="huiswerk_les_1.css">
Met het rel attribuut geef je aan dat het om een stylesheet gaat. Met het href attribuut geef je aan welk CSS bestand je wilt koppelen aan het HTML
bestand.
ELEMENTEN BINNEN DE BODY
Om vorm te geven aan je webpagina, kan je gebruik maken van koppen. Hiervoor gebruik je de tags h1 tot en met h6. h1 is de grootste kop en h6 de
kleinste.
<h1> Communicatie en Multimedia design </h1> Dit is de titel van de webpagina
<h3> Voltijdopleiding in ‘s-Hertogenbosch </h3> Dit is een subtitel op de webpagina
De tekst uit een paragraaf zet je binnen de p tag.
<p> De wereld van multimedia fascineert jou. Je bent analytisch en creatief. Je ontwerpt bij Communicatie & Multimedia design voor de media
van vandaag. Je experimenteert met de media van de toekomst. </p>
