Introductie Wat is HTML? Hypertext Markup Language (HTML) is de taal van het World Wide Web. Elk document op het web is geschreven in HTML en alle onderdelen - zoals de opmaak van documenten, koppelingen, grafische afbeeldingen, Java-applets, multimediatoepassingen, invulformulieren en andere toeters en bellen op het web - zijn gebaseerd op HTML. Veel mensen denken dat HTML een programmeertaal is, maar dat is niet juist. HTML is een eenvoudige, makkelijk te leren opmaaktaal. Door het maken van deze mini-cursus HTML leer je de basistechnieken voor het schrijven van HTML. Veel Plezier! Hoofdstuk 1 Een eenvoudig HTML document maken Een HTML document bestaat uit zogenaamde "platte text" (ASCII). Elk HTML document kan in textverwerkers geopend en bekeken worden. Om een HTML pagina te maken heb je dus in principe alleen een "simpele" textverwerker (bijvoorbeeld in windows: kladblok) nodig. Het eerste wat opvalt als je een HTML document in een textverwerker opent in plaats van een browser zijn de vele opmaakcodes. Opmaakcodes worden direct in een document getypt en bepalen de opmaak en indeling van het uiteindelijke document. <HTML> <HEAD> <TITLE>Introductie</TITLE> </HEAD> <BODY> <IMG SRC="HTML.gif" width="200"height="60"> <P>Deze minicusus HTML bestaat uit de volgende hoofdstukken:</p> <UL> <LI> <a href="introductie.htm"> Introductie</A> - Wat is HTML?</LI> </UL> </BODY> </HTML> Dit is een voorbeeld van hoe een HTML document eruit kan zien. De opmaakcodes zijn hier in hoofdletters geschreven. Deze codes worden HTML-tags genoemt. De HTML-tags worden omgeven door speciale tekens om ze te onderscheiden van de gewone text in het document. Deze tekens zijn de haakjes < (kleiner-dan) en > (groter-dan). Veel HTML-tags gebruiken een begin- en eindcode; de afsluitende code heeft dan altijd een schuine streep(/) bijvoorbeeld: <HTML> </HTML>De HTML-tags zijn niet hoofdlettergevoelig, dat betekend dat <HTML>, <HtMl> of <html> precies hetzelfde zijn.
Verplichte HTML-tags De volgende HTML-tags moeten in alle HTML documenten opgenomen worden: Een code die aangeeft dat het document een HTML document is. Een titel. Codes die het document splitsen in twee delen (een informaitiegedeelte en een inhoudgedeelte). Elk HTML document moet beginnen met de <HTML> tag aan het begin en de </HTML> tag aan het eind. Bijvoorbeeld: <HTML> Mijn eerste HTML document. </HTML> Alle HTML documenten worden verdeeld in twee delen: het kopgedeelte (head) en het inhoudgedeelte (body). In het algemeen bevat de head informatie over het document en de body de eigenlijke inhoud. <HTML> <HEAD> </HEAD> <BODY> Mijn eerste HTML document. </BODY> </HTML> De laatste verplichte tag is de <TITLE> tag. Zoals je misschien al wel hebt gemerkt bij het surfen op het Internet, toont de browser de titel van de webpagina in de bovenste balk van het browservenster. Deze titel word in een HTML document tussen de begin- en eindtag, <TITLE> en </TITLE> gezet. De <TITLE> tag staat in het head gedeelte. <HTML> <HEAD> <TITLE>Proefpagina</TITLE> </HEAD> <BODY> Mijn eerste HTML document. </BODY> </HTML> Hierboven is de basis van elk HTML document weergegeven. Oefen opdracht Open notepad. Typ de bovenstaande HTML code. Sla het document op onder de naam: eerste.htm Bekijk het opgeslagen document in een browser.
Hoofdstuk 2 Tekst opmaken Om tekst goed weer te geven en mooi op te maken zijn er verschillende tags waarmee de tekstopmaak bepaald wordt. Alinea's en tekenopmaak instellen. Hieronder staat een lijst met HTML tags die de tekenopmaak bepalen. Voor de eerste twee tags moet je zowel een begin- als eindtag gebruiken. Betekenis Vet/benadrukt Cursief Onderstreept Alinea Regel afbreken Tag <B> <I> <U> <P> <BR>... <BODY> <B>Deze regel tekst wordt vet gedrukt.</b> <I>Deze regel tekst wordt cursief gedrukt.</i> Deze regel tekst begint op een nieuwe regel.<br> Deze regel tekst begint op een nieuwe regel met een lege regel daartussen.<p> <STRONG><EM>Deze regel tekst is vet en cusief en begint op een nieuwe regel met een lege regel daartussen.</strong></em> </BODY> <P>... Bovenstaande HTML code wordt in een browser als volgt weergegeven: Deze regel tekst wordt vet gedrukt. Deze regel tekst wordt cursief gedrukt. Deze regel tekst begint op een nieuwe regel. Deze regel tekst begint op een nieuwe regel met een lege regel daartussen. Deze regel tekst is vet en cusief en begint op een nieuwe regel met een lege regel daartussen. Let erop dat als je geen <BR> of <P> tags in de HTML code zet alle tekst gewoon achterelkaar gezet wordt.
Koppen maken Je kunt koppen van verschillende grootte maken met behulp van de tags <H1> t/m <H6>. Zet de tekst gewoon tussen begin- en eindtag en klaar is kees. <html> <head> <title>lettergroottes</title> </head> <BODY> <H1>Dit is een kop op niveau 1: zeer groot</h1> <H2>Dit is een kop op niveau 2: groot</h2> <H3>Dit is een kop op niveau 3: iets groter dan normaal</h3> <H4>Dit is een kop op niveau 4: normaal</h4> <H5>Dit is een kop op niveau 5: klein</h5> <H6>Dit is een kop op niveau 6: zeer klein</h6> </BODY> </html> Bovenstaande HTML code wordt in een browser als volgt weergegeven: Dit is een kop op niveau 1: zeer groot Dit is een kop op niveau 2: groot Dit is een kop op niveau 3: iets groter dan normaal Dit is een kop op niveau 4: normaal Dit is een kop op niveau 5: klein Dit is een kop op niveau 6: zeer klein Let erop dat achter een <H1></H1> tag regel geen <BR> of <P> tag hoeft te staan, nieuwe tekst komt automatisch op een nieuwe regel (met een lege regel daartussen) te staan. We kunnen de lettergrootte ook veranderen met: <font size=72> Aan het einde van de zin moet je de font sluiten met </font> Achter font kun je nog meer informatie zetten, bijvoorbeeld: <font size=72 face=arial color=red> Bewegende teksten Met MARQUEE kun je teksten of plaatjes laten bewegen. Bijvoorbeeld:
<marquee>deze tekst beweegt</marquee> Je kunt het volgende samen met marquee gebruiken: Direction = left (of right, up, down) Behavior = scroll (of slide, alternate) Scollamount = 100 (hoe hoger het getal, hoe sneller de beweging) Bijvoorbeeld: <marquee direction=up behavior=alternate scrollamount=75>deze tekst beweegt</marquee> Hoofdstuk 3 Ankers en koppelingen Wat is een Uniform Resource Locator? Een Uniform Resource Locator is een standaardmethode voor het beschrijven van de locatie van een bepaalde website. Een voorbeeld van een URL is bijvoorbeeld de locatie van de Turing site: http://www.turing-online.nl. Er bestaan verschillende soorten URL's. Hier worden alleen de http-url en het mailto-url behandeld. Een http url geeft aan dat de locatie een htmldocument of ander bestand is. Met een mailto URL kunnen gebruikers een e- mailbericht sturen door enkel op een koppeling te drukken. Een mailto-url ziet er bijvoorbeeld zo uit: mailto:pietjepuk@thiememeulenhoff.nl Koppelingen Door op een koppeling te klikken kunnen gebruikers van het ene html document naar een andere springen. De locatie van dat andere document moet natuurlijk aangegeven worden. Een koppeling kan zowel een stuk text zijn of een plaatje. Het gebruikte stukje tekst of plaatje wordt dan aanklikbaar. Bij tekst is de html-tag als volgt: <A HREF="http://www.turing-online.nl/internet/pagina.htm">Text die een koppeling moet zijn</a> Deze tag bestaat uit twee delen: een deel dat het doel aangeeft en een deel dat aangeeft wat de koppeling moet zijn. Je kan deze tag gewoon midden in een text gebruiken. Bij afbeeldingen is de tag alsvolgd: <A HREF="http://www.turing-online.nl/internet/pagina.htm"><IMG SRC="plaatje.gif"></A> In plaats van tekst zet je nu de IMG-tag. De IMG-tag wordt in het volgende hoofdstuk uitvoeriger uitgelegd. Je kunt ook van een afbeelding én tekst een koppeling maken, dat gaat zo: <A HREF="http://www.turing-online.nl/internet/pagina.htm"><IMG SRC="plaatje.gif">Text die een koppeling moet zij</a> Ankers
Met koppelingen kun je enkel verwijzen naar andere documenten, maar als je een groot document hebt is het ook handig dat je binnen een document kunt verwijzen. Je kunt dan bijvoorbeeld een koppeling maken waarmee de gebruiker naar het bovenste gedeelte van een pagina springt. Dat doe je met ankers. Om ankers te gebruiken moet je niet alleen naar een plek verwijzen, maar je moet ook die plek markeren. Om een plek te markeren gebruik je de volgende code: <A NAME="bovenaan"> De gemarkeerde plek heeft een naam, gebruik voor elke plek een andere naam. Naar de gemarkeerde plek verwijzen doe je zo: <A HREF="http://www.turing-online.nl/internet/pagina.htm#bovenaan">Text die een koppeling moet zijn</a> Je gebruikt, zoals je misschien wel ziet, een verwijzing naar het betreffende document (dit kan de huidige pagina zijn, maar ook een andere) en een # met daarachter de naam van het gemakeerde gedeelte. Hoofdstuk 4 Afbeeldingen toevoegen De meeste web-browsers kunnen slechts enkele afbeeldingstypen weergeven, de meest gebruite formaten zijn: GIF-afbeeldingen (bestanden met een.gif uitgang) JPEG-afbeeldingen (bestanden met een.jpg of.jpeg uitgang) Zorg dat je altijd een ondersteund formaat gebruikt als afbeelding in een html document. Een afbeelding invoegen Een afbeelding invoegen doe je doormiddel van de IMG tag, met deze tag kun je de afbeelding ook positioneren. De meest simpele manier om deze tag te gebruiken is als volgt: <IMG SRC="plaatje.gif"> Je kunt zorgen dat de afbeelding links, midden of rechts op het beeldscherm geplaatst wordt. Dat gaat zo: <IMG ALIGN="LEFT" SRC="plaatje.gif"> <IMG ALIGN="CENTER" SRC="plaatje.gif"> <IMG ALIGN="RIGHT" SRC="plaatje.gif"> Hoofdstuk 5 Lijsten en tabellen Het is soms nuttig om naast gewone alniea's ook lijsten van items op te nemen. HTML ondersteunt verschillende soorten lijsten: Ongenummerde lijsten, met bijvoorbeeld ronde stippen als opsommingsteken.
Genummerde lijsten, met opeenvolgende genummerde items. Woordenlijsten In HTML zijn voor elk van deze lijsten tags opgenomen.
Ongenummerde lijsten Om een ongenummerde lijst te maken moet je de tag voor ongenummerde lijsten gebruiken : <UL> in combinatie met de tag <LI> voor lijsten. Beide hebben een begin- en eindtag. <UL><LI>Eerte item</li> <LI>Tweede item</li> <LI>Derde item</li></ul> Als je een ander tekentje als het standaard rondje gebruiken wilt kun je dat in de <UL> tag aangeven: <UL TYPE=SQUARE> - een zwart vierkantje <UL TYPE=CIRCLE> - een open rondje <UL TYPE=DISC> - een zwart rondje Het DISC tekentje wordt al standaard gebruikt, deze hoef je dus niet extra aan te geven. Genummerde lijsten Om genummerde lijsten te maken gebruik je de <OL> tag. Dat ziet er vrijwel hetzelfde uit: <OL><LI>Eerte genummerde item</li> <LI>Tweede genummerde item</li> <LI>Derde genummerde item</li></ol> Ook van deze lijst kun je het type opsomming aangeven, dat gaat weer door het toevoegen van TYPE= aan de tag. De volgende opties zijn beschikbaar: Type Definitie 1 a A i I Arabische cijfers (standaard, niet verplicht) Kleine letters Hoofdletters Kleine Romeinse cijfers Grote Romeinse cijfers <OL TYPE="i"> geeft bijvoorbeeld een genummerde lijst met kleine romeinse cijfers
Tabellen Met <table> maak je een tabel. Met <tr> maak je een tabelrij. Met <td> maak je een tabelkolom. Hieronder staat een voorbeeld van een tabel: <table border=1 cellspacing=1> <tr> <td width=24 valign=top> <p>1</p> <td width=142 valign=top> <p>eerste generatie:</p> <td width=359 valign=top> <p>1940-1955, gebaseerd op radiobuizen</p> </tr> <tr> <td width=24 valign=top> <p>2</p> <td width=142 valign=top> <p>tweede generatie: </p> <td width=359 valign=top> <p>1955-1963, introductie van transistoren</p> </tr> <tr> <td width=24 valign=top> <p>3</p> <td width=142 valign=top> <p>derde generatie:</p> <td width=359 valign=top> <p>1964-1979, gebruik van IC s (Integrated Circuits)</p> </tr> <tr> <td width=24 valign=top> <p>4</p> <td width=142 valign=top> <p>vierde generatie: </p> <td width=359 valign=top> <p>1979 - heden, ontelbare schakelingen op één chip</p> </tr> </table>
Background Verder moet de de background kunnen veranderen. Dit doe door bgcolor in de body te zetten. Bijvoorbeeld: <body bgcolor=yellow> Dit geeft een gele achtergrond. De font kunnen wij ook veranderen met: <font size=24 family=arial> Voor meer informatie raadpleeg jouw CD hoofdstuk V, klik op verdieping daarna op html. Hoofdstuk 6 Frames Met frames kun je jouw webpagina in verschillende secties onderverdelen. Hieronder vind je de code om jouw webpagina in twee secties (links en rechts) te verdelen: <html> <head> <title>voorbeeld met left and mainframes</title> </head> <frameset cols="110,*"> <frame name="main" src="left.html"> <frame name="main" src="main.html"> <body> </body> </frameset> </html>
Hieronder vind je de code om jouw webpagina in drie secties (boven, links en rechts) te verdelen: <html> <head> <title>voorbeeld met top, left en mainframes</title> </head> <frameset rows = "80,*"> <frame name="top" src="top.html"> <frameset cols="150,*"> <frame name="main" src="left.html"> <frame name="main" src="main.html"> <body> </frameset> </frameset> </body> </html>