Inleiding en stramien

Welkom bij de cursus html. De allereerste websites werden gemaakt met alleen html-code. Nog steeds bevatten de meeste webpagina's html-code. Het is voor elke persoon die maar iets met webdesign te maken heeft een must om iets te weten van html. Je zult ontdekken dat html helemaal niet moeilijk is en door iedereen kan worden geleerd. Je zult ontdekken dat html vooral erg leuk en nuttig is! Je kunt het bijvoorbeeld gebruiken op je eigen hyves. Veel plezier!


Link naar online versie van HTML en CSS de basis 2e editie.


OPDRACHT HTML 1.

Lees de inleiding van het lesboek "HTML en CSS de basis" en schrijf voor jezelf in een tekstbestand een korte samenvatting die we in de klas gaan bespreken. Geef het tekstbestand (txt of doc) de naam opdracht_html_1 en bewaar het in een map met de naam DTP_Web. Je zult het bestand later nodig hebben.


Wat ga je leren?

  1. Weten hoe de HTML-taal werkt
  2. Het stramien van een XHTML-pagina kennen, gebruiken en testen

Hoe werkt de HTML-taal?

HTML is een afkorting van Hyper Text Markup Language. Zoals de term al zegt is het een 'opmaak taal', dat wil zeggen, het vertelt je webbrowser door middel van zogenaamde 'Tags' hoe de pagina weergegeven moet worden op het scherm. Tags zijn opdrachten of commando's voor een browser. Een voorwaarde is dat de browser de commando's kent. Kent de browser het commando niet of heb je het commando niet juist ingetypt, dan zal er niets gebeuren of de pagina wordt niet weergegeven zoals je had bedoeld. Zelfs als je bijvoorbeeld per ongeluk ' typt in plaats van " werkt het commando niet meer. Het is dus belangrijk dat je geen fouten maakt tijdens het typen van HTML. HTML is geen programmeertaal zoals vaak gedacht wordt. HTML kan bestaan uit 3 onderdelen, namelijk elementen, attributen en een waarde.

 

Element (hoofdcommando)

Als je iets wilt laten uitvoeren door een webbrowser, dan gebruik je daarvoor een element. Er bestaan elementen voor tekst, plaatjes, links, tabellen, etc.. Ieder element bestaat uit drie delen: een begintag (<commando>), iets waarvoor het moet gelden en een eindtag (</commando>). Er bestaan ook elementen die geen einde element kennen. Dit zijn elementen die geen inhoud hebben. Lees voor meer informatie over elementen en tags paragraaf 1.3 uit je boek.


VOORBEELD

Met een begin- en een eindtag: <element>inhoud</element>
Zonder eindtag: <element />

 

Attributen (eigenschappen) en waarden

Als er alleen elementen zouden bestaan dan zouden de webpagina's wel erg saai worden. Gelukkig hebben de meeste elementen attributen. Attributen zijn eigenschappen die aan een element gekoppeld worden. Attributen zijn eigenschappen van het element. Ieder element heeft zijn eigen attributen. Als webontwikkelaar kiest je zelf welke je wilt gebruiken. Als je een element geen attribuut hebt gegeven, geeft de webbrowser het element weer in de standaard weergave. De standaard kleur van tekst is bijvoorbeeld zwart. Per element zijn vaak meerdere attributen mogelijk. Tussen het element en de attributen moet een spatie staan. De waarde hoort automatisch bij een attribuut. Het kan een woord of een getal zijn. Soms is beide mogelijk. Neem bijvoorbeeld het attribuut 'color' om iets een kleur te geven. De waarde kan de naam van de kleur zijn of het getal van een webveilige kleur. Belangrijk is dat de webbrowser de waarde kent. Veel informatie over elementen met hun mogelijke attributen en mogelijk waarden vind je op de website handleidinghtml.nl


VOORBEELD

De complete HTML-structuur: <element atribuut="waarde">inhoud</element>


Het stramien van een XHTML-pagina kennen, gebruiken en testen

Nu ga je je eerste html-pagina maken. Gebruik deze als basis voor alle HTML-pagina's die je voor de training gaat maken. Dit noemen we een template of stramien. Zorg dat je voor de namen van je bestanden altijd alleen kleine letters gebruikt, ook wel onderkasten genoemd. Je mag nooit spaties in de namen van internetbestanden gebruiken en de enige punt staat voor de altijd verplichtte bestandsextensie. Wil je toch de woorden scheiden? Gebruik dan een _ of een - tussen de woorden. Tip: hou de namen zo kort mogelijk. Gebruik desnoods afkortingen.


VOORBEELD

Een mogelijke naam voor eerste pagina met foto's.
Fout: Foto Pagina nr. 1.html
Goed: foto_pag_1.html


OPDRACHT HTML 2.

A) Ga naar hoofstuk 1 uit het boek "HTML en CSS de basis". Volg de stappen van paragraaf 1.1 (pagina 14 t/m 16). Sla je bestand met de naam stramien.html in je Websitemap.

B) Test je bestand in een webbrowser. Je kunt slepen of kiezen voor rechtermuisknop 'openen in'. Dit doe je altijd als je een HTML-bestand hebt gemaakt. Als het goed is zie je helemaal niets behalve de titel van de pagina bovenin het venster. Er staat: Titel van de webpagina.

C) Lees paragraaf 1.2 en controleer of je alle elementen in je bestand kunt vinden en weet wat ze doen.


De hele HTML-pagina bestaat dus uit 2 delen, namelijk <head> en <body> die genest zijn in <html>. Tussen de <head> en </head> staan de (onzichtbare) gegevens voor de zoekmachines als Google en later ga je hier extra functionaliteit als CSS en JavaScript toevoegen aan je HTML-pagina. Tussen <body> en </body> komen alle zichtbare onderdelen als teksten en plaatjes.

Cursus XHTML op YouTube

Sommige studenten vinden het fijn om te leren van een filmpje. Op bijvoorbeeld YouTube vind je veel cursussen over (X)HTML, al zijn ze meestal wel in het engels. Dit is een filmpje waarin XHTML wordt uitgelegt. De hele cursus bestaat uit 3 delen. Deel 2 en 3 zul je zelf moeten zoeken. Doe wel oordopjes in als je het filmpje gaat afspelen.


Youtube


HUISWERK

Als je achter loopt op het programma, zorg dan zelfstandig dat je je achterstand hebt ingehaald voor het begin van de volgende les.

Lessen HTML