HTML Hans Roeyen V 3.0

Transcriptie

1 4.01 Hans Roeyen V januari 2015

2 1. Inleiding Een HTML bestand aanmaken Een verklaring van de gebruikte elementen HTML Tags Tag attributen Basis HTML Tags Hoofdingen Alinea s Regel eindes Tekstuitlijning Scheidingstags voor paginaopmaak Commentaar in HTML Samenvatting basis HTML tags Formatteren van tekst Computer output tags Tags voor citaten, quotaties en definities Oefeningen HTML Basis Speciale tekens en symbolen Uniform Resource Locater Hans Roeyen Index 2-17

3 1. Inleiding Om een webpagina te maken moeten wij noodzakelijkerwijze een begrip hebben van HTML. HTML is wat men een markup taal noemt en plaatst bepaalde codes (tages) in onze webpagina die dan door de browser geïnterpreteerd kunnen worden. Een webbrowser of gewoon browser is een programma dat HTML commando s kan interpreteren om zo de verschillende onderdelen van een webpagina te verzamelen, te rangschikken en te tonen op het scherm van de computer. HTML staat voor HyperText Markup Language. Een HTML-bestand is in feite niets meer dan een tekstbestand waarin markup tags voorkomen. Deze tags vertellen dan de browser hoe hij de pagina moet afbeelden. Het bestand moet.htm of.html als extensie krijgen Een HTML bestand aanmaken. Enkele voorbeelden van de veschillende mogelijkheden: 1. Door het gebruik van een volle tekst (ASCII) editor: dit is de beste manier om het coderen te leren, we moeten immers alle codes zelf manueel ingeven. Wij gaan dat doen met Kladblok in Windows. Opmerking: Het gebruik van Wordpad is af te raden omdat dit programma altijd enige tekstopmaak hanteert. Als je Wordpad gebruikt moet je de HTML pagina s opslaan als een tekstdocument! 2. Door het gebruik van een HTML editor: handig in gebruik wanneer u de codering kent want deze programma s beschikken over allerlei handige tools waardoor het coderen sneller en gemakkelijker gaat. Allaire HomeSite (voor Windows), Pagespinner (voor Macintosh) en Arachnophilia zijn enkele voorbeelden. 3. Door gebruik van WYSIWYG software: dit zijn grafische programma s die ons zullen toelaten om snel webpagina s in elkaar te steken zonder dat we al teveel kennis hoeven te hebben van HTML codering. Voorbeelden hiervan zijn Microsoft Frontpage, Adobe PageMill, Claris HomePage, DreamWeaver en NetObjects Fusion. Helaas... zoals sommigen misschien hadden gehoopt, gaat deze cursus niet over het gebruik van de wysywig programma s waarmee men in een paar minuten een webpagina in elkaar steekt. Ik zou het gebruik van dergelijke programma s momenteel zelfs eerder willen afraden! Toch zeker zolang we in de beginschoenen staan van het aanleren van de HTML codering. Met dergelijke programma s leren we de code zelf niet. Later zal u dat duidelijker worden waarom het grondig kennen van de code zo belangrijk is...! Hans Roeyen HTML Basis 3-17

4 Start Kladblok en geef de onderstaande tekst in: <html> <head> <title> Hier komt de titel van de pagina </title> </head> Dit is mijn eerste webpagina<b>deze tekst staat in het vet</b> 1.2. Een verklaring van de gebruikte elementen Een aantal termen die gebruikt worden vragen een verduidelijking. De eerste term is tag : een tag is een gecodeerd commando dat gebruikt wordt om aan te geven hoe een bepaald gedeelte van de webpagina getoond moet worden op het scherm. Een HTML tag begint altijd met < en eindigt altijd op >. De meeste van deze tags (let wel: niet allemaal!) bestaan uit twee delen: een begin tag (<) om aan te geven waar een stuk tekst begint en een sluit tag (</) om aan te geven waar het stuk tekst stopt. Er zijn verscheidene HTML tags die absoluut onontbeerlijk zijn opdat een webpagina naar behoren kan functioneren: De eerste tag in ons HTML bestand is <html>. Deze tag zegt de browser dat vanaf die plaats een HTML document begint. De laatste tag in het bestand is en duid het einde aan van het HTML document. De tekst tussen <head> en </head> is header informatie: deze informatie wordt niet getoond in het venster van de browser. De tekst tussen <title> en </title> is de titel van onze pagina en zal getoond worden in de titelbalk van de browser. De tekst tussen en is de tekst die zal getoond worden in het venster van de browser. De tekst tussen <b> en </b> zal in het vet getoond worden. Hans Roeyen HTML Basis 4-17

5 Bewaar het bestand onder de naam: mijnpagina.html en ga nu als volgt te werk. Open Internet Explorer Kies bestand openen bladeren Ga naar de map waarin we je het bestand hebt bewaard Dubbelklik op mijnpagina.html De browser toont onze eerste webpagina! 1.3. HTML Tags HTML tags zijn niet hoofdlettergevoelig, <b> is dus hetzelfde als <B>. We zouden zelf kunnen kiezen maar het World Wide Web Consortitium (W3C) schrijft het gebruik van lowercase tags voor vanaf de HTML 4 specificatie en XHTML vereist nu eenmaal lowercase tags. Het is dan ook beter om onmiddellijk op deze manier te leren werken Tag attributen Tags kunnen attributen hebben. Attributen voorzien in extra informatie betreffende de HTML elementen in onze pagina. Ze voegen informatie toe voor screen readers of tonen toolstips. Om een link op een HTML pagina te plaatsen heb je de achor (of <a>) tag. Het attribuut href krijgt als waarde de url voor de link mee. Voorbeeld: <a href=" is a link</a> Het link adres is gespecificeerd in het href attribuut van de anchor tag. Attributen komen in naam/waarde paren zoals name= value. Attributen worden altijd toegevoegd in de begin tag van een HTML element en worden niet herhaald in de sluit tag. In attributen mogen we dubbele of enkele aanhalingstekens gebruiken, ze mogen echter niet door elkaar gebruikt worden. Dit is goed: Dit is goed: Dit is fout: Hans Roeyen HTML Basis 5-17

6 1.4. Basis HTML Tags De basis-tags in HTML zijn de tags die hoofdingen, alinea s en regeleindes definiëren Hoofdingen Hoofdingen worden gedefinieerd met de <h1> tot <h6> tags. <h1> definieert de grootste hoofding, <h6> de kleinste. Probeer dit eens in het bestand mijnpagina.html, bewaar het bestand (onder dezelfde naam) en ga kijken naar het resultaat. <html> <head> <title>hier komt de titel van de pagina</title> </head> <body bgcolor="green"> Dit is mijn eerste webpagina <b>deze tekst staat in het vet</b> <h1>dit is een hoofding</h1> <h2>dit is een hoofding</h2> <h3>dit is een hoofding</h3> <h4>dit is een hoofding</h4> <h5>dit is een hoofding</h5> <h6>dit is een hoofding</h6> HTML voegt automatisch een extra witregel toe aan een hoofding Alinea s Alinea s worden gedefinieerd met de <p> tag. Werk verder met het bestand mijnpagina.html en voeg deze extra tags toe. Bewaar het bestand (onder dezelfde naam) en ga kijken naar het resultaat. <p>dit is een alinea</p> <p>dit is een alinea </p> <p>dit is een alinea </p> HTML voegt automatisch een extra witregel toe voor en na een alinea. Hans Roeyen HTML Basis 6-17

7 Regel eindes Wanneer we een regel willen beëindigen maar geen nieuwe alinea willen beginnen, gebruiken we de <br> tag. Werk verder met het bestand mijnpagina.html en voeg deze extra tags toe. Bewaar het bestand (onder dezelfde naam) en ga kijken naar het resultaat. <p>dit is<br> een ali<br>nea met regel<br>eindes</p> Tekstuitlijning Als je een alinea wilt uitlijnen op de rechtermarge, kan je align="right" instellen binnen de <p> tag. Alles tot de sluit tag </p> wordt dan rechts uitgelijnd. Hetzelfde kan je doen met align="center". Dit kan ook voor left, maar dat wordt niet veel gebruikt omdat dit de standaard uitlijning is en dus niet specifiek ingesteld dient te worden. Als je de uitlijning voor meer dan één alinea of kop tegelijk wilt instellen is het gebruik van een scheidingstag aangewezen Scheidingstags voor paginaopmaak Als je een opmaak voor een deel van de pagina wilt laten afwijken van de overige onderdelen, kan je gebruikmaken van de tags <span> en <div>. Op zich doet <div> niets, maar als je de tag combineert met align="center" zal alles tot de sluittag </div> gecentreerd worden. Dit kunnen afbeeldingen, tekst, koppen en alle andere paginaonderdelen zijn. Er is ook nog de <span> tag. Het verschil met <div> is dat deze een regeleinde forceert en <span> doet dat niet. Daarom gebruik je <span> voor een opmaak te specificeren die korter is dan een alinea. Ook hier is natuurlijk een sluittag </span> verplicht. Deze tags tonen hun waarde vooral in combinatie met CSS om een opmaak aan een paginaonderdeel te koppelen. <html> <head><title>voorbeeld DIV en SPAN</title></head> <div align="center"> <h2>spelen met opmaak</h2> <b>kan <span style="font-family: cooper black;">heel handig </span>zijn...</b> </div> <div> <p>dit is <span style="font-weight: bold;">vet</span> en de tekst hierna is <span style="font-style: italic;">cursief</span>.</p> Hans Roeyen HTML Basis 7-17

8 Als je graag iets <span style="text-decoration: underline;"> onderstreept</span> kan dat ook. <p>een <span style="font-family: monospace;">vaste letterafstand</span> is een andere opmaak!</p> En je kan ook iets heel <span style="font-size: 100;">groot</span> weergeven</p> </div> <div align="right"> <font color="blue">werken met opmaak kan heel leuk zijn. </font> Zo kunnen we een opmaak specificeren per onderdeel van de pagina. </div> Commentaar in HTML De commentaar tag wordt gebruikt om in de HTML broncode commentaar in te voegen. De tekst tussen de commentaar tags wordt niet getoond in het venster. Werk verder met het bestand mijnpagina.html en voeg deze extra tag toe. Bewaar het bestand (onder dezelfde naam) en ga kijken naar het resultaat.  Enkele opmerkingen Bij het schrijven van HTML tekst kunnen we nooit 100% zeker zijn hoe de tekst zal weergegeven worden in een andere browser. Er bestaan verschillende afmetingen van computerschermen, er worden verschillende resoluties gebruikt, enz. HTML zal de spaties in onze tekst inkorten. Eender welk aantal spaties dat we plaatsen zal toch maar tellen als één spatie. In HTML telt een nieuwe lijn als een spatie. Het gebruik van de <p> tag om lege regels in te voeren wordt afgeraden en is een slechte gewoonte. Gebruik hiervoor de <br> tag. Sommigen hebben waarschijnlijk al gemerkt dat de <p> tag gebruikt kan worden zonder de sluit tag </p>. Dat klopt, maar de volgende versies van HTML zullen het algemeen toepassen van de sluit tag vereisen, vandaar dat we nu beter de goede gewoonte nemen om alle tags te sluiten (behalve momenteel de <br> tag). HTML zal soms automatisch een witregel toevoegen voor en na bepaalde elementen, zoals voor en na een alinea en een hoofding. Hans Roeyen HTML Basis 8-17

9 Voor wie HTML echt volledig nieuw is, zullen de onderstaande voorbeelden de zaken die we tot nu toe hebben bekeken nog even herhalen. Gebruik Kladblok maar zorg ervoor dat je het voorbeeld exact ingeeft zoals hieronder weergegeven is. Bewaar elk bestand met een andere naam en ga telkens kijken naar het resultaat. Voorbeeld 1: bekijk even deze alinea s <p>deze alinea bevat veel regels in de broncode, maar de browser zal ze negeren. </p><p>deze alinea bevat heel wat spaties in de bron code maar de browser zal ze negeren. </p><p>het aantal regels in een alinea hangt af van de grootte van het browservenster. Indien we het browservenster aanpassen, zal het aantal regels in deze alinea eveneens veranderen. Probeer maar eens... </p> Voorbeeld 2: een demonstratie van het gebruik van regeleindes <p>om naar <br> een volgende <br>regel te gaan<br> in een alinea <br> gebruiken we de br tag. </p> Voorbeeld 3: enkele problemen met HTML formatting <p> dit is de eerste regel van deze alinea dit is de tweede regel van deze alinea dit is de derde regel van deze alinea dit is de vierde regel van deze alinea </p> <p>merk op dat de browser onze formattering vierkant negeert!</p> Hans Roeyen HTML Basis 9-17

10 Voorbeeld 4: gebruik van hoofdingen <h1>dit is hoofding 1</h1> <h2>dit is hoofding 2</h2> <h3>dit is hoofding 3</h3> <h4>dit is hoofding 4</h4> <h5>dit is hoofding 5</h5> <h6>dit is hoofding 6</h6> <p>gebruik de heading tags enkel voor hoofdingen. Gebruik ze niet om iets Gewoon in het vet te zetten.daar bestaan andere tags voor. </p> Voorbeeld 5: centreren van een hoofding <h1 align="center">dit is de hoofding 1</h1> <p>de bovenstaande hoofding is in het midden afgelijnd. De bovenstaande hoofding is in het midden afgelijnd. De bovenstaande hoofding is in het midden afgelijnd. De bovenstaande hoofding is in het midden afgelijnd.</p> Voorbeeld 6: invoegen van een horizontale lijn <p>de hr tag definieert een horizontale lijn:</p> <hr> <p>this is a paragraph</p> <hr> <p>this is a paragraph</p> <hr> <p>this is a paragraph</p> Voorbeeld 7: gebruik van commentaar  <p>dit is een gewone alinea </p> Hans Roeyen HTML Basis 10-17

11 1.5. Samenvatting basis HTML tags TAG Functie <html> Definieert een HTML document Definieert het body van een document <h1> tot <h6> Definieert een hoofding 1 tot een hoofding 6 <p> Definieert een alinea <br> Definieert een regelovergang <hr> Definieert een horizontale lijn <!--> Definieert commentaar <span> Definieert een scheidingstag <div> Definieert een scheidingstag Formatteren van tekst TAG <b> <big> <em> <i> <small> <del> <strike> <strong> <sub> <sup> <ins> <u> Functie Definieert tekst in vet Definieert grote tekst Definieert beklemtoonde tekst Definieert schuine tekst (Italic) Definieert kleine tekst Definieert verwijderde tekst Afgeschaft, gebruik <del> Definieert tekst in het vet Definieert tekst in subscript Definieert tekst in superscript Definieert ingevoegde tekst Afgeschaft, gebruik stijlen Hans Roeyen HTML Basis 11-17

12 Computer output tags TAG <code> <kbd> <samp> <tt> <var> <pre> Functie Definieert computer code tekst Definieert toetsenbordtekst Definieert sample computer code Definieert teletype tekst Definieert een variable Definieert gepreformatteerde tekst Tags voor citaten, quotaties en definities TAG <abbr> <acronym> <address> <bdo> <blockquote> <q> <cite> <dfn> Functie Definieert een afkorting Definieert een acroniem Definieert een adreselement Definieert de tekstrichting Definieert een lange quotatie Definieert een korte quotatie Definieert een citaat Definieert een definitie term Het volledige en actuele overzicht van de HTML tags is te bekijken via volgende link: URL: Je krijgt niet alleen het overzicht van de tags te zien. In het overzicht is gedocumenteerd welke nog tags nog geldig zijn voor HTML 5. Hans Roeyen HTML Basis 12-17

13 Oefeningen HTML Basis Voorbeeld 1: formatteren van tekst <b>deze tekst is in het vet</b><br> <strong> Deze tekst is strong</strong><br> <big>deze tekst is groot</big><br> <em>dit is beklemtoonde tekst</em><br> <i>deze tekst staat in het schuin</i><br> <small>dit is kleine tekst</small><br> Deze tekst bevat <sub>subscript</sub><br> Deze tekst bevat <sup>superscript</sup><br> Voorbeeld 2: gepreformatteerde tekst <pre> Dit is gepreformatteerde tekst. Dit zal zowel spaties als regeleindes respecteren zonder dat we daarvoor code moeten gebruiken </pre> <p>de pre tag is ideaal voor het weergeven van computercode:</p> <pre> for i = 1 tot 10 print i next i </pre> Voorbeeld 3: computer output tags <code>computer code</code><br> <kbd>toetsenbord input</kbd><br> <tt>teletype tekst</tt><br> <samp>sample tekst</samp><br> <var>computer variable</var><br> <p><b>nota:</b>deze tags worden vaak gebruikt om computercode/programmeercode weer te geven.</p> Hans Roeyen HTML Basis 13-17

14 Voorbeeld 4: een adres <address>els Elsens<br> Steenbakkersstraat 56<br> 9000 Gent<br> België</address> Voorbeeld 5: afkortingen en acroniemen <abbr title="united Nations">UN</abbr> <p><acronym title="world Wide Web">WWW</acronym></p> <p>het title attribuut wordt gebruikt om de volledige versie te tonen wanneer de muisaanwijzer over de afkorting of acroniem geplaatst wordt.</p> Voorbeeld 6: richting waarin de tekst afgebeeld wordt <p>indien onze browser 'bi-directioneel override'(bdo) ondersteunt, zal de onderstaande tekst weergegeven worden van rechts naar links(rtl):</p> <bdo dir="rtl">wat denkt u van deze tekst?</bdo> Hans Roeyen HTML Basis 14-17

15 Voorbeeld 7: gebruik van quotaties Hier komt een lange quotatie: <blockquote>dit is een lange quotatie. Dit is een lange quotatie. Dit is een lange quotatie. Dit is een lange quotatie. Dit is een lange quotatie. Dit is een lange quotatie.</blockquote> Nu volgt een korte quotatie:<q> Dit is een korte quotatie</q> <p>met het blockquote element zal de browser regeleindes en kantlijnen invoegen, maar het q element zal niet als iets speciaal weergegeven worden!</p> Voorbeeld 8: verwijderde en ingevoegde tekst <p>een dozijn is <del>twintig</del><ins>twaalf</ins>deeltjes</p> <p>de meeste oude browsers zullen de verwijderde tekst doorhalen en ingevoegde tekst onderlijnen.</p> <p>bepaalde oude browsers zullen verwijderde en ingevoegde tekst afbeelden als volle tekst.</p> Uiteraard is het ook een goed idee om tijdens het surfen eens te letten op bepaalde elementen die gebruikt werden om mooie lay-outs te maken. Indien we graag zouden willen weten hoe een dergelijke webpagina gecodeerd werd, kunnen we in onze browser steeds de broncode bekijken via het menubalk onderdeel Beeld Bron (MSIE) of Vieuw Page Source (Mozilla) Je kan het volledige overzicht van HTML altijd bekijken in de meest recente versie op de website van W3Schools: Hans Roeyen HTML Basis 15-17

16 1.6. Speciale tekens en symbolen Bepaalde tekens hebben in HTML een speciale betekenis, zoals <, en in bepaalde teksten zullen we gebruik moeten maken van accenten of speciale tekens. In andere talen worden dikwijls andere karakters gebruikt en sommige symbolen heb je al eens nodig, zoals het copyright symbool. In HTML is dit geen probleem maar dan moeten we deze tekst wel invoegen met de juiste code. Zo zullen we het copyright moeten coderen als of als &#169. Doen we dit niet dan zullen bepaalde browsers deze tekens niet correct kunnen afbeelden. De meest algemeen gebruikte speciale tekens Teken Beschrijving Numerische code Code naam Harde spatie &#160 < Kleiner dan &#60 < > Groter dan &#62 > & Ampersand &#38 & Aanhalingsteken &#34 " Apostrof &#39 ' Teken Beschrijving Numerische code Code naam Pond &#163 Copyright &#169 Geregistreerd merk &#174 Plus min &#177 ± Sectie &#167 Euro &#128 Opmerking: het gebruik van de naam geniet de voorkeur! Hans Roeyen HTML Basis 16-17

17 1.7. Uniform Resource Locater Een URL of Uniform Resource Locater wordt gebruikt om een document (of andere data) te kunnen adresseren op het World Wide Web. Een volledig webadres kan er bijvoorbeeld zo uitzien: Webadressen hebben de volgende syntax: Scheme://host.domein: poort/pad/bestandsnaam Scheme definieert het type van Internetdienst, gewoonlijk is dit http. Host definieert de domeinhost, indien weggelaten, dan is de standaard host voor http gelijk aan www Domein definieert de Internet domeinnaam zoals lethas.be Poort definieert het poortnummer op de host. Dit wordt gewoonlijk weggelaten. Het standaard poortnummer voor http is 80 Pad definieert het pad (een submap) op de webserver. Indien het pad niet meegegeven wordt dan moet het document voorkomen op de root van de website. Bestandsnaam definieert de naam van het document De meest algemene scheme s zijn: Scheme file ftp http news telnet Toegang tot Een bestand op de computer Een bestand op een FTP server Een bestand op een server in het WWW Een Usenet nieuwsgroep Een telnet verbinding Hans Roeyen HTML Basis 17-17