Cursus HTML voor beginners

Cursus HTML voor beginners Gebruikte bron: /www.handleidinghtml.nl/ HTML is de taal waarmee je documenten (webpagina's) maakt die bekeken kunnen worden op het World Wide Web. HTML staat voor HyperText Markup Language: Hypertext is de techniek waarmee een verbinding (een link) wordt gelegd naar bijvoorbeeld een ander document, een afbeelding, of een geluidsopname. Markup is het gebruik van code om de browser, een programma waarmee HTML-documenten bekeken kunnen worden, te vertellen hoe de inhoud van het document weergegeven moet worden en naar welke bestemming de hyperlinks moeten leiden. HTML-code is opgebouwd uit elementen en attributen. Deze handleiding behandelt eerst de 'ouderwetse' HTML met attributen. Die attributen hoef je niet allemaal te onthouden want in de handleiding CSS (Cascading Style Sheets) blijkt dat het allemaal veel handiger kan. Wat je wel moet leren is begrip over hoe HTML werkt en, om te oefenen, kennis van de volgende elementen: P, A, SPAN, IMG, BR, B, I, U, HR en Hx. Daarnaast moet je snappen waarvoor de elementen HTML, HEAD en BODY dienen. In aanloop naar het werken met een CMS en CSS moet je ook weten wat DIV containers zijn en basiskennis hebben over TABLE. Twee tips: 1. Klik rechts op een webpagina in je browser en kies 'Bron weergeven', 'Paginabron bekijken' of iets dergelijks, dit verschilt per browser. Je ziet dan de HTML-code. 2. Maak op je bureaublad een nieuw bestand met de naam test.html. Open dat met Notepad++ en plak er de coderegeltjes in uit dit document. Sla het op en dubbelklik. Zo kan je ziet wat er gebeurt en kan je eventueel zelf wat uitproberen. Elementen en attributen Elementen bestaan meestal uit tweetallen: een deel dat het element activeert en een deel dat de activering weer beëindigt. Zowel de activering (ook wel starttag genoemd) als de beëindiging (endtag) beginnen met het teken < en eindigen met het teken >. We noemen dit vishaken. Tussen deze tekens staat de naam van het element. De beëindiging is hetzelfde als de activering maar dan met een slash ( / ) voor de naam van het element. Tussen de activering en beëindiging staat de inhoud waarop het element betrekking heeft. Als voorbeeld de opbouw van een paragraaf met behulp van het P element: <p>deze tekst vormt een paragraaf.<p> Een aantal elementen heeft geen inhoud. Voor deze lege elementen is het gebruik van de beëindiging verboden. Een voorbeeld is het HR element, waarmee horizontale lijnen opgenomen kunnen worden: <hr>. Dus nooit: <hr></hr> 1

Gezien de toekomstige en jongste ontwikkelingen (xhtml) is het echter verstandig om ook deze elementen te beëindigen: bij een element zonder inhoud, dat dus niet wordt afgesloten met </naam_element> (zoals HR), is het beter deze notatie te gebruiken: <hr />. Dus spatie + slash voor de laatste vishaak. De naam van een element, attribuut of waarde is altijd hoofdletterongevoelig. Dat wil zeggen dat het niet uitmaakt of de naam in hoofdletters of in kleine letters wordt geschreven. Zelf vind ik kleine letters mooier. Attributen zijn nadere specificaties van een element. Ze worden opgenomen in de activering van het element, voor het >-teken. Indien meerdere attributen aan het element worden toegevoegd, worden deze gescheiden door een spatie. In veel gevallen moet aan een attribuut een waarde worden toegekend. Als voorbeeld wordt aan het eerder genoemde P element het ALIGN attribuut toegevoegd (ik gebruik hier => voor 'levert op:'). <p align="right">deze paragraaf wordt rechts uitgelijnd.</p> => Deze paragraaf wordt rechts uitgelijnd. Een ander handig element voor de beginner is FONT. Het is geen blokelement (dus inline zie verderop) en omspant de tekst voor bijzondere bewerkingen. Voorbeeld: <p align="center">deze paragraaf wordt <font color="red">gecentreerd</ font > uitgelijnd.</p> => Deze paragraaf wordt gecentreerd uitgelijnd. Ook aan lege elementen kunnen attributen worden toegevoegd. In het volgende voorbeeld gebeurt dat voor het HR element met de attributen SIZE en NOSHADE, waarbij NOSHADE een voorbeeld is van een attribuut dat geen waarde kent. <hr size="5" noshade /> Levert een dikke lijn zonder rand op. Als je elementen gaat 'nesten' moet je altijd op de omgekeerde volgorde van afsluiten letten. Dus <p><span><b>hier staat een vette content</b></span></p> 1 2 3 3 2 1 Opbouw HTML-document Een HTML-document bestaat uit twee delen: de head en de body. De head wordt gedefinieerd met het HEAD element en bevat informatie, die betrekking heeft op het document, maar niet in de browser wordt weergegeven. De informatie kan bijvoorbeeld instructies aan de browser bevatten over hoe het document verwerkt of weergegeven moet worden. In de head van elk document moet in ieder geval het TITLE element worden opgenomen. Hiermee wordt een titel vastgelegd, welke in de meeste browsers te zien is in het tabblad of de titelbalk van het venster. De content wordt gedefinieerd met het BODY element en bevat de feitelijke inhoud van het document. Het HTML element markeert het begin en einde van een HTML-document en geeft aan dat het document HTML-code bevat. 2

Helemaal bovenin staat een rare regel: het DOCTYPE. Voorbeeld: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/loose.dtd"> Dit heeft te maken met de versie van HTML en dus wat de browser moet verwachten. Een tikfout hierin of het helemaal ontbreken brengt de browser in de zogenaamde quirks-modus (quirk betekent slimmigheid). Hij maakt er dan het beste van, echter zonder garantie. Gelukkig hoef je zo'n DOCTYPE niet zelf te verzinnen. Met enig googelen zou je er wel achter kunnen komen welke je moet hebben, maar een webpagebuilder zoals Dreamweaver en een CMS doen dit voor je. In de voorbeelden hier gaan we uit van HTML 4. Inmiddels is er HTML 5 met veel nieuwe snufjes die onder meer beogen Flash overbodig te maken en de noodzaak van Javascript te verminderen. Met de genoemde elementen heeft het HTML-document de volgende opbouw: <html> <head> <title>mijn homepage</title>... </head> <body>... </body> </html> HEAD In het HEAD element staan, naast META tags, de verwijzingen naar Javascript-documenten op de server en de verwijzing naar een of meer CSS-documenten. Voorbeelden: <meta name="keywords" content="sgb Bonaire,mediaklas12,website-ontwikkeling" /> <meta name="robots" content="index,follow" /> Dit helpt zoekmachines (zie ook SEO). <link rel="stylesheet" type="text/css" href="css/stylesheet1.css" media="all" /> Verwijst naar een CSS-sheet op de server (voor alle apparaten dus pc's, smartphones enz.). <script src="js/javascript_fd" type="text/javascript"></script> Verwijst naar een javascriptdocument op de server. BODY Met de attributen van het BODY element kun je de basisweergave van een document bepalen. Met het BGCOLOR attribuut definieer je welke achtergrondkleur er voor het document gebruikt moet worden, met het TEXT attribuut doe je hetzelfde voor de kleur van de tekst. Dit voorbeeld dient om een idee te krijgen hoe het vroeger ging, wij doen dit met CSS. <body bgcolor="#ffffff" text="#000000">... </body> Overigens zijn de kleurcodes, althans hoe ze werken, wel iets wat je moet weten. Een leuke kleur zoek je op internet, want niemand kan onthouden welke code bij welke kleur hoort. In Photoshop en andere programma's zie je de code vaak (als 'webkleur' o.i.d.) in je kleurenpalet vermeld. Wat je wel onthoudt is dat #FFFFFF; wit is en #000000; zwart. De code bestaat dus uit een # (hekje of matje), 6 letters of cijfers en een puntkomma. HTML kent ook een aantal (Engelse) woorden: red, green, blue enz. 3

Binnen het BODY element kun je onder meer koppen, paragrafen, horizontale lijnen, afbeeldingen en hyperlinks opnemen. Koppen maak je met het Hx element. De "x" vervang je door een getal tussen 1 en 6. Hoe hoger het getal, hoe kleiner de kop. Voor de belangrijkste kop gebruik je dus H1: <h1>de belangrijkste kop</h1> Gewone tekst neem je op met het P element. Voor een horizontale lijn gebruik je het HR element. Voorbeeld van deze elementen zijn hiervoor reeds gegeven. Blok-elementen De elementen Hx, P en HR zijn elementen, die ervoor bedoeld zijn de inhoud van een document op een voor de bezoeker begrijpelijke wijze te structureren. Dit soort elementen wordt altijd voorafgegaan en gevolgd door de overgang naar een nieuwe regel en vaak ook door een blanco regel. Inline-elementen Deze genereren geen witregel en komen dus op één rij, totdat het browservenster dit niet meer toelaat, dan springen ze naar de volgende regel. Maak je het venster groter dan springen ze in het gelid. Voorbeelden: SPAN, IMG, Een blanco regel tussen deze inline elementen (die anders dus rechts naast de vorige gaan staan), of een extra witregel doe je met: <br />. Probeer dit uit en maak je browser smaller en breder: <p>deze tekst vormt een paragraaf. Als er maar genoeg woorden staan blablabla loopt hij door naar de volgende regel, net als in een Word-document. Pas als je een <u>break</u> <br /> plaatst begint er een nieuwe regel.</p> Afbeeldingen Als je een afbeelding wilt opnemen, maak je gebruik van het IMG element. Aan het IMG element voeg je minimaal de attributen SRC en ALT toe. Het SRC attribuut (source, bron) bepaalt welke afbeelding moet worden geladen. Met het ALT attribuut geef je als alternatief een omschrijving op, voor als de browser geen afbeeldingen weergeeft. Het is verstandig ook altijd de attributen WIDTH en HEIGHT te gebruiken om de afmetingen van de afbeelding (in pixels) vast te leggen. De verhouding moet dan wel dezelfde zijn als die van het plaatje, anders krijg je vervorming. <img src="gezicht.gif" width="105" height="125" alt="gezicht" /> Links Een hyperlink is een verbinding met een ander document, of een ander bestand. Je maakt een hyperlink met het A (anchor) element. Het HREF (Hypertext Reference) attribuut definieert op welke locatie het document of bestand zich bevindt, de referentie dus. Een hyperlink naar een document in dezelfde directory op dezelfde server ziet er als volgt uit: <p>klik hier om naar <a href="contactpagina.html">contact</a> te gaan.</p><style> p { font-family: Arial; } </style> Let op de spaties vóór <a en na </a>. Als je die weglaat krijg je: om naarcontactte gaan. Dit kan ook: <p>klik hier om naar<a href="contactpagina.html"> Contact </a>te gaan.</p> Zoek de verschillen Een hyperlink naar een site op een andere server heeft bijvoorbeeld de volgende opbouw: <p>bezoek het schoolbord op <a href="http://www.mediaklas12.com">mediaklas12.com</a></p> Let op de spatie na 'op'. Als je die weglaat krijg je: schoolbord opmediaklas12.com 4

Belangrijk is het attribuut TARGET (doel). Als je het weglaat blijft de browser in hetzelfde scherm. Dat is normaal als je op een item in het menu klikt (een menu is niets anders dan een stel hyperlinks naar je eigen pagina's) maar erg vervelend als de bezoeker op een link naar een andere website klikt. target="_blank" voorkomt dit. (Let op de rare underscore _ ). <p>ook leuk: <a href="http://www.mediaklas12.com" target="_blank">mediaklas12.com</a></p> Spaties Ga niet met rijen spaties werken om een bepaalde lay-out te maken. Ten eerste werkt het niet (vrijwel alle browsers negeren meer dan een spatie) maar je HTML-code wordt ook onleesbaar. Als het echt niet anders kan, en om een lege inhoud aan een element te geven gebruik je: Het &-teken en de ; zijn essentieel, anders zie je gewoon nbsp. NBSP staat voor: non breaking space - een niet-afbrekende spatie. Tekstdecoratie Plaatselijk kun je de weergave van stukjes tekst, bijvoorbeeld binnen een paragraaf, bepalen met de elementen voor tekstopmaak, zoals B voor vet (Bold), I voor cursief (Italic) en U voor onderstreept (Underline). <p>tekst kun je ook in <b>vet</b> of <i>cursief</i> weergeven, of <u>onderstreept</u>.</p> => Tekst kun je ook in vet of cursief weergeven, of onderstreept. Verboden tekens In de tekst van een HTML-document mag je een aantal (speciale) tekens niet zomaar gebruiken. Dat geldt bijvoorbeeld voor accenten en trema's, maar ook voor tekens die in HTML een speciale betekenis hebben zoals het begin (<) of het eind (>) van een tag, de ampersand (&) en dubbele aanhalingstekens ("). In plaats van deze tekens moet speciale code gebruikt worden. Ter illustratie voor enkele tekens de code: é é (accent aigu = acuut, scherp) ë ë (umlaut) à à (accent grave = ernstig, zwaar) ï ï " " (quote) < < (less then) > > (greater then) En alleen hierom al gaan we met een CMS werken, wat een gedoe! Bekijk dit maar eens: Bij V&D in het "irreëel" café is er koffie à $ 2,00. wordt: <p>bij V&D in het "irreëel" café is er koffie à $ 2,00.</p> 5

Table Ook wil ik jullie nog het element TABLE laten zien. Dat wordt gebruikt om een lijst of tabel een beetje netjes te krijgen. Vroeger werd TABLE gebruikt om de hele webpagina te structureren. Dat was een heel gedoe, nu wordt het vooral nog gebruikt voor (echte) tabellen, maar ook wel om contactformulieren te structureren en uit te lijnen. Een TABLE element moet: - altijd het attribuut SUMMARY hebben en (handig voor testen) het attribuut BORDER; - altijd minstens een TR (table row) bevatten; - in een TR moet minstens een TD (table data, cel) bevatten met inhoud (minimaal een spatie). Voorbeeld: <table summary="testtabel" border="1"> <tr> <td>eerste cel</td> <td> </td> <td>tweede cel</td> </tr> <tr> <td>derde cel</td> <td> </td> <td>vierde cel</td> </tr> </table> Dankzij de lege cel in het midden wordt de boel een beetje uit elkaar gehaald. Als je BORDER op 0 zet zie je de lijnen tussen de cellen in je browser niet meer wat meestal het mooist is. Plak deze code in je test.html en kijk. Dat ziet er dan zo uit: Eerste cel Tweede cel Derde cel Vierde cel Jullie krijgen in de les nog wat voorbeelden te zien. Tenslotte nog de UL (unsorted list) met LI (list item). <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> => Item 1 Item 2 Item 3 DIV containers Hiermee gaan we uiteindelijk werken. Het idee erachter is een 'geneste' structuur: <div> <div>header</div> <div> <div>menu</div> <div>content</div> </div> <div>footer</div> </div> DIV staat voor division. Meer hierover bij CSS. 6

Schone code Houd je HTML-code luchtig en overzichtelijk. Dat hoeft niet voor de browser maar wel voor jezelf en eventueel voor een ander die jouw code later moet bewerken. Veel nieuwe regels (enters) en tabs maakt een en ander goed herkenbaar. Bij het voorbeeld TABLE kan je zien wat ik bedoel. Vergelijk dit met het voorbeeld hierboven. <table summary="testtabel" border="1"><tr><td>eerste cel</td><td> </td><td>tweede cel</td></tr><tr><td>derde cel</td><td> </td><td>vierde cel</td></tr></table> Een browser is soms heel mild en breit sommige fouten nog wel goed, maar hij kan ook heel weigerachtig zijn. Ergens een vishaak of een " te weinig of te veel en je ziet ineens niks meer terug van het element of je ziet de tags Je kan bij het bouwen plezier hebben van de documentatie-tag. Eigenlijk bedoeld om uitleg te schrijven die niet in beeld komt, waar de browser zich dus niks van aantrekt. Alles wat russen <!-- en --> instaat wordt niet getoond. Als je bouwt kan je hiervan gebruik maken door stukken code tijdelijk uit te zetten. <!-- <p>deze overigens correcte paragraaf wordt niet getoond.</p> --> Fout is: tekst buiten tags. Tekst buiten tags wordt gewoon getoond, maar met een standaard lettertype. Let dus op dat je content altijd in een inhoudselement zoals P of SPAN zet. <html> <head><style>p { font-family: Arial; }</style></head> <body> Zomaar tekst zonder tags. <p>tekst netjes binnen p-tags.</p> </body> </html> De tools Om een en ander te maken hebben we nodig: - Een 'platte' tekstverwerker, liefst met syntax-coloring. We nemen Notepad++ Werk beslist niet met MS Word die maakt van HTML een totale bende. - Meerdere browsers * - En in een van die browsers een add-on voor webdevelopers. We nemen Firefox met de add-on Firebug. - We testen de HTML webpagina's zonder problemen lokaal, ook met eventueel Javascript. Alleen PHP en MYSQL (onderdelen van een CMS) moeten op een echte webserver draaien. Je kan op je eigen PC een webserver installeren, wij gaan echter zo snel mogelijk online. Daarvoor heb je een FTP-programma nodig (we gebruiken WinSCP). * Ofschoon HTML een standaard is wijken sommige browsers ervan af. Dat levert onbedoelde (soms dramatische) effecten op. Dit is het duiveltje van de websitebouwer. Er zijn een aantal manieren om in het CSS aan te geven dat een instelling anders moet voor browser x, maar daar wordt je ook niet vrolijk van. Vooral Internet Explorer van Microsoft hield zich jaren lang (en nog steeds) niet aan de regels, de meeste CSS-en wemelen dan ook van de uitzonderingen voor IE. Je zal dus, tegen het einde van je bouwproject, je website in alle veelvoorkomende browsers moeten bekijken. Dat zijn Firefox, IE, Chrome, Safari en Opera. 7

Structuur website Een website bestaat uit een aantal HTML-documenten. Die kunnen in één directory staan of in subdirectories (directory wordt ook map of folder genoemd). Meestal staan plaatjes in een eigen map, bijvoorbeeld 'pics' of 'images'. Er is een bepaalde methode om in <a href=""> aan te geven waar iets staat: Voor de bestandsnaam komt: 1. niks of./ zelfde map 2.../ een map hoger 3.../../ twee mappen hoger 4.../map1/ een map hoger en dan in map1 (op gelijk niveau) 5. map2/ vanuit dit niveau in map2 (een map lager dus) Ik zal dit in de les laten zien aan de hand van wat voorbeelden. In de zogenaamde root staat altijd een index bestand. Dat kan index.html zijn of index.php. Zonder index start de site niet uit zichzelf en krijg je een error van de webserver. Een index.php zorgt dat er HTML wordt gegenereerd om aan de browser te overhandigen. PHP kunnen we in deze cursus niet leren maar we gaan het wel af en toe tegenkomen. PHP is onze vriend in het CMS want die neemt ons veel werk uit handen. De structuur in de url Als je http://www.mijnwebsite.com/ tikt zoekt de browser naar een index bestand in de root. Met http://www.mijnwebsite.com/map1/ zoekt hij in die map naar een index. En http://www.mijnwebsite.com/contact.html opent die html-pagina. Nog eentje: met http://www.mijnwebsite.com/images/mijnfoto.jpg opent de browser die foto. In de code van een html-document in map1 moet je 'mijnfoto' dus als volgt aanroepen: <img src="../images/mijnfoto.jpg" alt="ikke"> En vanuit de root: <img src="images/mijnfoto.jpg" alt="ikke"> Actie! We gaan nu met deze kennis onze eerste webpagina maken. Je vindt die in de root van je website, hij heet index.html. Voor het gemak heb ik al een!doctype en de structuur (HTML HEAD BODY) geplaatst. De bedoeling is dat je een kop (bijv. je naam) maakt, daaronder een foto van jezelf en een stuk tekst over wie je bent, je hobby's, je dromen en ambities, verzin maar wat. Het moet er een beetje netjes uit zien, zowel in code als in het resultaat. 8

Overzicht elementen Samenvattend: er zijn dus elementen op blokniveau en inline elementen. Elementen op blokniveau zijn elementen die vooraf gegaan en gevolgd worden door de overgang naar een nieuwe regel, inline elementen zijn elementen die dezelfde regel kunnen delen met andere elementen en niet vooraf gegaan en gevolgd worden door de overgang naar een nieuwe regel. De volgende elementen zijn als element op blokniveau gedefinieerd: ADDRESS, BLOCKQUOTE, CENTER, DIR, DIV, DL, FIELDSET, FORM, HR, Hx, ISINDEX, MENU, NOFRAMES, NOSCRIPT, OL, P, PRE, TABLE, UL De volgende elementen zijn als inline element gedefinieerd: A, ABBR, ACRONYM, APPLET, B, BASEFONT, BDO, BIG, BR, BUTTON, CITE, CODE, DFN, EM, FONT, I, IFRAME, IMG, INPUT, KBD, LABEL, MAP, OBJECT, Q, S, SAMP, SCRIPT, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TEXTAREA, TT, U, VAR Sommige elementen horen bij een 'hoofd'element zoals LI (bij UL) en TR en TD (bij TABLE) en kunnen niet los bestaan. De vetgedrukte elementen hebben we behandeld. 9