online Cursus HTML
HTML staat voor Hyper Text Markup Language. Met behulp van deze “taal” kan een webdesigner complexe webpagina’s ontwerpen die op het World Wide Web geplaatst kunnen worden. Voorwaarde is dat de lezer van deze HTML-documenten over een internetverbinding beschikt en een browser op de pc geïnstalleerd heeft.
In beginsel is het werken met HTML niet afhankelijk van een apart programma. De basiscodes zijn eenvoudig en kunnen met het Windows kladblok ingevoerd worden. Wil je echter complexe webpagina’s ontwerpen dan is het werken met Kladblok enorm tijdrovend. Om het invoeren van HTML-codes te vergemakkelijken zijn er dan ook aparte HTML-editors verkrijgbaar. Toch is het onvermijdelijk enige kennis van de HTML-structuur te hebben. Je moet in staat zijn de codes en structuren te begrijpen en het is voor het leren corrigeren van fouten noodzakelijk met het Kladblok (of een andere tekstverwerker) te beginnen.
HTML is geen programmeertaal maar een set codes die aan tekst wordt toegevoegd. Als een tekst HTML-codes bevat kan die tekst met een browser op het scherm zichtbaar gemaakt worden. Het maakt niet uit of een tekst met Word Perfect, Word, Kladblok of de DOS-editor gemaakt is. Het gaat om de aard en de plaats van de HTML-codes. Het is echter wel van groot belang dat de extensie van een HTML-document .HTM of .HTML luidt. Als dit niet geval is dan zal het document niet in de browser geopend worden.
In de hier aangegeven instructie wordt gebruik gemaakt van Kladblok, een zeer eenvoudig tekstverwerkertje dat onder Windows draait.
- Klik op Start, Programma’s, Bureau-accessoires, Kladblok. Het volgende venster verschijnt:
- Kladblok werkt op dezelfde manier als Wordpad en Word. Opmaakkenmerken als Vet, Cursief, onderstrepen, marges en opsommingtekens ontbreken echter.
Voor het maken van de eerste opdracht heb je geen opmaak nodig. Opmaakkenmerken die je aan een tekst toevoegt zijn in de browser niet te zien. De opmaakkenmerken die de browser te zien geeft zijn als codes aan de tekst toegevoegd. Deze codes worden tags genoemd.
HTML-tags zijn over het algemeen afleidingen van Engelse woorden, bijvoorbeeld: p voor paragraph (alinea), b (bold) voor vet etc. Tags worden tussen blokhaken (< >)geplaatst zodat ze als instructie door de browser gelezen kunnen worden. De tag voor het plaatsten van een alinea komt dan als volgt uit te zien <p>, de tag om aan te geven of een document als HTML-document gelezen moet kan worden luidt <HTML>. De tag <b> plaats alle navolgende tekst vet, de tag <i> (Italic) maakt alle navolgende tekst cursief.
De tags vet <b> en cursief <i> zijn zogenaamde containertags. De containertags hebben altijd twee codes, een open- en een sluittag. De opmaakkenmerken vet en cursief moeten na verloop van tijd eindigen. De tags moeten aan het einde van een woord, zin of alinea herhaald worden en voorzien zijn van een teken dat aangeeft dat op dit punt de opmaakkenmerken teruggezet moeten worden naar standaardtekst. In HTML is het teken om en opmaak te beëindigen een slash (/). De tag voor stop met het vet maken van tekst is </b> en de sluittag voor cursief luidt </i>.
Opdracht 1: De Eerste poging, maak een webpagina
- Open de Windows Verkenner en maak een map aan met de naam HTML basis.
- Open het kladblok en geef als naam Eerste poging.HTML op. Sla het document op in de map HTML basis.
Let op: de extensie .HTML zul je zelf achter de naam Eerste poging moeten typen. De correcte naam luidt: Eerste poging.HTML (vergeet de punt tussen Eerste poging en HTML niet!).
- Vervolgens dien je in het document op te geven dat het om een HTML-document gaat. Hiervoor gebruik je de tag <HTML> en eindig met de sluittag </HTML>. Tussen dit “tagpaar” plaats je de tag<head>.
- De tekst: “De eerste poging” staat tussen de tags <head> en </head> en bevat tevens de tags <title> en </title>. Je kunt hier de titel van het document plaatsen. De tekst die je tussen de tags <title> en </title> plaatst wordt zichtbaar in de titelbalk van de browser. Zorg dat je hier een zinvolle titel plaatst.
- Vervolgens plaats je het tagpaar <body> , </body>. Dit tagpaar zorgt dat de browser alle van HTML tags voorziene tekst en codes correct op het scherm plaatst.
Tip: zorg dat je containertags altijd paarsgewijs invoert. Op deze manier voorkom je dat je sluittags vergeet. Voeg dus eerst in <HTML>, druk twee keer op Enter en typ vervolgens </HTML> .
Het is mogelijk alle tags achter elkaar in te voeren. Wil je echter overzicht behouden is het beter een nieuwe tag op een nieuwe regel te beginnen.
- Typ de volgende tekst precies over.
<HTML>
<head>
<title>De eerste poging</title>
</head>
<body>
<h1>Hallo wereld!</h1>
<p>Iedereen die wil kan dit lezen.
<p>Niets is onmogelijk op het World Wide Web.
</body>
</HTML>
- Sla de wijzigingen in het document op en sluit Kladblok. Vervolgens open je de Windows Verkenner en open je de map HTML Basis. Dubbelklik op Eerste poging.HTML.
De Browser wordt geopend en je ziet het resultaat van je eerste HTML-inspanningen.
Opdracht 2: Webpagina met opmaak
De webpagina die je nu gemaakt hebt bevat geen opmaakkenmerken. Je gaat nu een tweede poging ondernemen. De tekst op de webpagina die je nu gaat maken bevat de opmaakkenmerken vet, cursief en vet/cursief.
Volg de stappen zoals die in opdracht 1 werden aangegeven. Gebruik de map HTML basis om het bestand als Tweede poging.HTML op te slaan.
Het plaatsen van het tagpaar “vet” en “vetsluiten” doe je tussen het tagpaar <body> en </body>.
De opmaak van stukken tekst moet aangegeven worden met begin- en eindtags. Plaats de tags voor vet <b> en </b> en cursief <i> en </i> op de juiste plaats in het document.
Je gaat nu een stukje tekst van de opmaak vet/cursief voorzien. Deze opmaakt heeft geen eigen HTML-code. Het is dus noodzakelijk de verschillende tags zo te plaatsen dat de browser ze kan interpreteren. Het gebruik van verschillende tags voor één bepaald stukje tekst noemen we “tagnesten”. Belangrijk is dat bij het gebruik van tagnesten de juiste volgorde aangehouden wordt.
Je begint met de tag vet <b>. Vervolgens geef je de tag cursief <i> op. Alle navolgende tekst wordt in de browser vet/cursief weergegeven. Je moet dus aangeven waar de opmaakt vet/cursief eindigt. Belangrijk is hier de volgorde van de sluittags.
Plaats de sluittags altijd in omgekeerde volgorde ten opzichte van de opentags. Dit houdt in dat (uitgaande van het voorbeeld) dat je eerst de sluittag cursief </i> plaatst en vervolgens de sluittag vet </b>. Schematisch ziet dit als volgt uit:
<tag1> <tag2> TEKST <tag2> <tag1>
Als je je niet aan deze volgorde houdt zullen de resultaten op het scherm niet overeenkomen met de bedoelingen die je hebt.
- Typ de volgende tekst op exact dezelfde manier over.
<HTML>
<head> <title>Tweede poging </title>
</head>
<body>
<p> Hier typ ik tekst!
<p> Dit is de tweede alinea.
<p> Het woord <b> vet</b> staat nu <b>vet</b> op het scherm.
<p> Het woord <i>cursief</i> staat nu <i>cursief</i>.
<p> Als je een woord <b>vet</b> en <i>cursief</i> wilt dan moet
je zorgen dat je de juiste volgorde aanhoudt. Dit noemen we
“tagnesten”. De volgende woorden staan <b> <i> vet
en cursief </i></b>.
</body>
</HTML>
- Als je de bovenstaande tekst exact hebt overgenomen dan open je de Windows verkenner en open je de map Basis HTML. Dubbelklik op het bestand Tweede poging.HTML en controleer het resultaat. Het resultaat moet overeenkomen met onderstaande afbeelding.
Opdracht 3: Gedicht Hendrik Marsman
- Open Kladblok en sla het bestand op als Gedicht.HTML in de map Basis HTML.
Plaats alle noodzakelijke tags (<HTML>, Title, <body> etc.). Neem één van de voorafgaande opdrachten als geheugensteuntje.
- Neem het volgende gedicht over en plaats de juiste HTML-codes: HTML, body, vet en alinea <p>. Zorg dat in de titelbalk de volgende tekst verschijnt: Landschap Hendrik Marsman.
Landschap
In de weiden grazen
de vreedzame dieren;
de reigers zeilen
over blinkende meren,
de roerdompen staan
bij een donkere plas;
en in de uiterwaarden
galoppeeren de paarden
met golvende staarten
over golvend gras.
Hendrik Marsman
- Het is de bedoeling de lay-out van het gedicht te bewaren. Dit betekent dat je aan het einde van iedere regel een HTML-code moet plaatsen die één regel overslaat. De juiste code is in dit geval break <br>. Na de regels in het gedicht plaats je dus:
In de weiden grazen <br>
Online cursus internet html
Online cursus internet html
- Deze code herhaal je na iedere regel. Let op: de code <br> is een open HTML-code en hoeft daarom niet voorzien te worden van een sluittag!
- Bekijk in je browser het resultaat. Zorg dat het resultaat overeenkomt met de bovenstaande afbeelding.
Deel 2 volgt binnenkort.
