Hypertext Markup Language "HTML"

De HyperText Markup Language ofwel "HTML" is een opmaaktaal voor tekst op een website.

HTML bestaat uit platte tekst waarin met markeringstekens is aangegeven hoe de tekst moet worden geïnterpreteerd door een webbrowser, bijvoorbeeld als lijst of als opschrift.

TOP

Cascading Style Sheet "CSS"

Cascading Style Sheet ofwel "CSS" zijn de tekstbestanden die stijlinformatie (zoals kleuren, marges en achtergrondafbeeldingen) vastleggen.

Een webpagina kan een koppeling leggen naar een of meer stijlbladen. Zo kan een webpagina worden op gemaakt, en kunnen meerdere pagina's dezelfde opmaak krijgen.

Het is ook mogelijk de CSS markeringen binnen de HTML te schrijven.

TOP

HTML Stramien

Een HTML pagina heeft een vaste opbouw. Hieronder is een leeg stramien te zien welke kan worden gekopieerd en geplakt om hiermee te beginnen.

Voor het maken van een website is het voldoende om te werken met kladblok (windows) of Teksteditor {Tekst Edit} (Mac OS X). 


<!DOCTYPE html>

<html lang=nl>

<head>

  <meta charset=utf-8>

  <meta name=description content="beschrijving van de webpagina"> 

  <meta name=keywords content="trefwoorden, gescheiden, door, komma's">

<title>Titel van de webpagina</title>

</head>

<body>

	Hier komt de inhoud van de pagina te staan....
	
	<h1>...KOP1...</h1>
	
		......
	
	<h1>...Kop6...</h6>


</body>	

</html>

De naam van het document mag vrij worden gekozen, al is het wel van belang te eindigen met .html. Dus bijvoorbeeld index.html is een juiste benaming voor het bestand.

TOP

HTML link naar Cascading Style Sheet

Om de webpagina een opmaak te geven moet er binnen het html stramien een link worden geplaatst naar de Externe Style Sheet. De naam van dat document mag zelf worden gekozen.

Om een koppeling/Link te leggen naar een stijlbad met bijvoorbeeld de naam algemeen.css. Moet binnen de tags <head> ... </head> de volgende regel met het link-element worden geplaatst:


<link rel-stylesheet href=algemeen.css>
TOP

Kop en Subkopjes

Net als bij een tekstverwerkingsprogramma kan tekst worden voorzien van een "KOP".
KOP1 wordt dan als eerste gebruikt waarna er tot zes koppen diep kan worden gewerkt.


		<h1>...KOP1...</h1>
		<h2>...KOP1...</h2>
		<h3>...KOP3...</h3>
		<h4>...KOP4...</h4>
		<h5>...KOP5...</h5>
		<h6>...KOP6...</h6>
TOP

Nieuwe regel

Door aan het einde van een zin de volgende eindtag te plaatsen wordt er gedwongen met een nieuwe tekstregel gestart.


Als je een zin gedwongen <br> 

op de volgende regel wil laten beginnen pas je de tag <br> toe.
TOP

Cursief

Om tekst cursief weer te geven moet deze tussen de volgende tags worden geplaatst.


<i> Cursief </i>
TOP

VET of STRONG

Om tekst STRONG weer te geven moet deze tussen de volgende tags worden geplaatst.


<strong> STRONG </strong>
TOP

Onderstrepen

Om tekst onderstreept weer te geven moet deze tussen de volgende tags worden geplaatst.


<u> Onderstreept </u>
TOP

Titel van de pagina

Het element <title></title> zorgt ervoor dat de titel in de titelbalk zichtbaar wordt. Door een goede titel te bedenken wordt de site beter vindbaar door zoekmachines.

Titels zijn aan te maken voor elke pagina.

Bijv. (HV-engineering - Home, HV-engineering - HTML en CSS... enz) niet elke pagna heeft de zelfde inhoud namelijk.

Het is aan te raden om een maximum van 10 woorden aan te houden, dit omdat er toch maar een paar woorden zichtbaar kunnen zijn in de titelbalk. Voor zoekmachines is het belangrijk, het belangrijkste woord vooraan te plaatsen.


<title>HV-Engineering - HTML en CSS</title>
TOP

Commentaar binnen html code

Om ervoor te zorgen dat je na een paar jaar je html code nog begrijpt is het handig binnen deze code met commentaar te werken. Zo kun je voor jezelf uitleggen waar de code voor staat en wat het gaat doen.

Dit commentaar is "onzichtbaar" wanneer de webpagina wordt gestart maar wanneer de "BRONCODE" van de html code word gestart is deze wel te bekijken.

Het is dus niet handig wachtwoorden in je html code op te nemen!!


<!-- Hier kun je dan je tekst plaatsen -->
TOP

Commentaar binnen de CSS code

Om ervoor te zorgen dat je na een paar jaar je css code nog begrijpt is het handig binnen deze code met commentaar te werken.

Dit commentaar is "onzichtbaar" wanneer de webpagina wordt gestart maar wanneer de "BRONCODE" van de html code word gestart is deze wel te bekijken.


/* Hier kun je dan je tekst plaatsen */
TOP

Insite link

Binnen de html is het mogelijk naar een stuk tekst te springen, zonder daar helemaal naartoe te hoeven scrollen.



Code die in een link moet worden geplaatst:
<a href="#Insite link">Insite link</a>

Code waar naartoe wordt gesprongen binnen de pagina:
<a name="Insite link"></a>
TOP