HTML. Basiscursus HTML. Sima

Transcriptie

1 HTML Basiscursus HTML Sima

2 Inhoud De basis... 2 Benodigdheden... 2 Je eerste pagina... 3 Opslaan... 3 Je eerste pagina ontleed... 4 Elementen en tags... 4 Alinea's... 6 Divisies... 6 Woorddelen, woorden en woordgroepen... 7 Links... 8 Lokale links... 8 Externe links... 9 Links naar id's... 9 Opmaak Lettertype, grootte en kleur Afbeeldingen en objecten Basis Externe links Pagina 1 van 19

3 De basis In dit eerste hoofdstuk maak je kennis met de basis van HTML. Je leert hoe je webpagina's in HTML maakt en wat je daarvoor nodig hebt. Benodigdheden Om een HTML-pagina te maken is er hoofdzakelijk slechts een ding nodig, namelijk een teksteditor zoals Kladblok. Er zijn programma's die bepaalde functies bevatten om een webpagina zo makkelijk mogelijk op te bouwen. Ze bevatten functies om bijvoorbeeld tags automatisch te laten aanvullen, of knoppen waarmee in een keer een tag ingevoerd kan worden. Om het niet te ingewikkeld te maken in het begin, en vooral omdat het de bedoeling is om te leren werken met HTML, laten we deze programma's met automatische aanvulling en dergelijke functies buiten beschouwing. Aangezien Kladblok enkel platte tekst weergeeft, kan het nogal moeilijk zijn om de groepen tags van elkaar te onderscheiden. Notepad++ is een voorbeeld van een programma dat tags kleurt volgens een aangegeven structuur. Dit programma heeft weinig geavanceerde functies, wat het dus een uitzondering maakt op bovenstaande alinea. Daarom is het ook een goed programma om webpagina's in pure HTML mee te leren schrijven. Een derde programma is (betaalde) HTML-Kit. Dit biedt wat meer mogelijkheden, zoals het automatisch afmaken van tags, maar het laat je nog wel zelf de broncode bewerken zoals jij dat wilt. Door de vele functies is het programma minder overzichtelijk dan Notepad++. Het programma is ook gratis te downloaden, maar dan is het een verouderde versie. Wat nog nodig is, is een beetje geduld, doorzettingsvermogen en wilskracht. Een webpagina maken kan enige tijd in beslag nemen, zeker wanneer je een beetje structuur wilt bekomen. Onder andere het maken van tabellen is soms tijdrovend. Ondanks dit is het maken van pagina's met HTML erg leuk. Pagina 2 van 19

4 Je eerste pagina HTML-code: Je eerste pagina <html> <head> <title>mijn eerste HTML-pagina</title> </head> <body> hello world! Een tweede regel zonder paragraaf-tags, met een regeleind na de komma. </body> </html> Opslaan Kopieer de bovenstaande tekst naar Notepad++. Je hebt nu je eerste HTML-pagina. Om deze te testen moet je deze opslaan als een HTML-document, dus met extensie.htm of.html. Dit kan je op de volgende manier doen: Ga naar 'Bestand' en klik op 'Opslaan als...'. Controleer onderaan het bestandstype waarin het bestand zal worden opgeslagen. Bij Kladblok en Notepad++ is dit standaard 'Tekstdocumenten (.txt)'. Verander dit naar 'Alle bestanden (*.*)'. Geef het bestand een naam die eindigt op '.htm' ('.html'). De homepage (startpagina) van een site wordt meestal 'index.htm' of 'default.htm' genoemd. Ziezo! Je eerste pagina is klaar. Je kan deze nu openen door naar het bestand te navigeren, en hierop te dubbelklikken. In je standaardbrowser zie je dan de door jouw gemaakte pagina. Pagina 3 van 19

5 Je eerste pagina ontleed Elementen en tags Een HTML-pagina is opgebouwd met behulp van elementen die de code in blokken indelen. Een element wordt gevormd door een of twee tags. Een tag is een code om een element te openen of te sluiten. Voorbeelden van tags zijn <html> en <body>. Zoals je ziet zijn het woorden die omgeven zijn door de haakjes: '<' en '>'. Tags zeggen iets over de tekst die tussen de tags ligt. Zo kan je met tags tabellen, hyperlinks of afbeeldingen maken. Zoals gezegd bestaat een element meestal uit twee tags: de begin-tag en de eind-tag (of sluit-tag). Een voorbeeld van een begin-tag is '<html>'. Hiermee begint het voorbeeld hierboven. Om onderscheid te maken tussen een begin- en een eind-tag, krijgt de eind-tag een slash '/'. Een voorbeeld zie je aan het eind van de voorbeeld code: '</html>'. Soms is een element leeg: er hoeft dan geen tekst tussen de tags te staan. Omdat programmeurs over het algemeen lui zijn, mag je in dit geval één tag gebruiken die direct wordt afgesloten. Een voorbeeld hiervan is het invoegen van een afbeelding, wat gebeurt met de volgende code: '<img />'. In het voorbeeld worden zes elementen gebruikt. Hieronder worden deze uitgelegd. <html>...</html> Het HTML-element duidt het begin en het eind van een HTML-document aan. Tussen deze tags bevinden zich alle gegevens van het document. <head>...</head> Tussen deze tags staat de "header", met informatie over de pagina. Deze informatie wordt niet getoond op de pagina zelf. In de header kun je handig scripts en andere dingen definiëren en instellen, omdat deze code als eerste wordt uitgevoerd. Hier kun je bijvoorbeeld een variabele instellen die je later weer gebruikt. Daarom wordt de titel van de pagina ook hierin ingesteld; deze is erg belangrijk. <title>...</title> Tussen deze tags staat de "titel", de naam van de pagina. Deze wordt getoond helemaal bovenin de browser. Kijk als voorbeeld maar naar deze pagina. Deze heet HTML/Basiscursus/De basis, wat wordt gemaakt met de code '<title>html/basiscursus/de basis</title>'. <body>...</body> In de body staan de belangrijkste onderdelen van het HTML-document: de inhoud. Deze inhoud wordt gestructureerd volgens hetzelfde systeem als de vorige elementen: met tags. Pagina 4 van 19

6 ... In de body staat de eerste zin van het document. Deze staat tussen de -tags. De p staat hierbij voor paragraph (paragraaf). Na het afsluiten van een paragraaf wordt automatisch een regel overgeslagen. Het is niet verplicht om de -tag te gebruiken, want dit is alleen een hulpmiddel om de tekst gemakkelijk te verdelen in alinea's. Je mag ook gewone tekst tussen in de body zetten, zonder tags. De laatste tag die wordt gebruikt is de -tag. Deze zorgt voor een nieuwe regel (br staat voor break, stop). Zoals je ziet, ziet deze tag er anders uit dan de anderen. Normaal hebben tags een begin, dan de tekst waarop het van toepassing is, en vervolgens een afsluitende tag. Omdat er geen tekst tussen en zou kunnen (wat zou je daar immers moeten zetten?), open je hem en sluit je hem als het ware in een keer. ... Nog een voorbeeld van tags. Net zoals de vorige tags, de -tags, hebben deze tags invloed op de tekst die er tussen staat. In dit geval wordt die tekst vetgedrukt. In het voorbeeld wordt dus het woord 'komma' vetgedrukt. Behalve tags voor vette tekst, zijn er ook tags voor andere standaard opmaak. De meest gebruikte zijn het onderstrepen en cursief weergeven van tekst. Om tekst te onderstrepen gebruik je ..., om tekst schuin af te drukken gebruik je .... Je hebt nu je eerste HTML-pagina aangemaakt. Hierin heb je onder andere kennis gemaakt met de -tag. In het volgende hoofdstuk zal je hier meer over leren, samen met nog een aantal andere tags die je kan gebruiken om tekst weer te geven. Pagina 5 van 19

7 Alinea's U kunt uw tekst opdelen in paragrafen met behulp van de p-tag. U doet dit als volgt: dit is een paragraaf. dit is nog een paragraaf. Standaard zal dit resulteren in een witruimte tussen beide alinea's. Hetzelfde visuele effect is te bereiken door twee maal een nieuwe regel te beginnen met de br-tag, dit is echter niet gewenst. U kunt de br-tag wel gebruiken om de regel af te breken, bijvoorbeeld bij gedichten. Merk op dat de "p" in de p-tag staat voor het Engels "paragraph", maar dat dit in het Nederlands beter vertaald kan worden met "alinea" dan met "paragraaf". Divisies Met de div-tag kunt u verschillende elementen samenvoegen, op deze manier kunt u verschillende onderdelen van uw pagina apart houden. De div-tag wordt ook vaak gebruikt om bepaalde delen van de pagina een aparte stijl te geven. <div class="sportvereniging"> <h1>schaatsvereniging "De IJsvogels"</h1> "de IJsvogels is een schaatsclub in Zeeland die ook skeeler-, en skatelessen organiseert. <h2>gegevens</h2> <dl> <dt>naam</dt> <dd>de IJsvogels</dd> <dt>sport</dt> <dd>schaatsen</dd> <dt>locatie</dt> <dd>geleen</dd> </dl> </div> Pagina 6 van 19

8 Woorddelen, woorden en woordgroepen Met het span-element kunt u bepaalde stukken tekst aparte HTML-attributen geven. U kunt er bijvoorbeeld mee aangeven dat het om een andere taal gaat of u kunt de tekst een aparte stijl geven. HTML-code: Voorbeeld gebruik span-element "tot ziens" is in het Duits "auf Wiedersehen" Pagina 7 van 19

9 Links Met links kunt uw pagina verbinden met een andere pagina of bestand. U kunt links in de inhoud van uw pagina zetten (hypertekst links) maar u kunt ook een relatie definiëren tussen uw gehele pagina en een andere pagina (document relaties). U maakt een link in uw pagina met behulp van de a-tag in samenwerking met het href-attribuut. De tekst of afbeelding tussen de a-tags zal klikbaar worden voor de gebruiker. Lokale links U kunt in uw pagina lokale links maken naar documenten die zich op dezelfde website bevinden. U hoeft dan niet het volledige adres op te geven maar alleen de locatie van het bestand in verhouding met document. Alles tussen  is commentaar, daarover later meer. HTML-code: Lokale links <a href="pagina1.html">pagina 1</a>  <a href="./pagina2.html">pagina 2</a>  <a href="../pagina3.html">pagina 3</a>  <a href="inhoud/pagina4.html">pagina 4</a>  <a href="../inhoud/pagina5.html">pagina 5</a>  <a href="/pagina6.html">pagina 6</a>  <a href="/inhoud/pagina7.html">pagina 7</a>  Pagina 8 van 19

10 Externe links U kunt ook links maken naar andere websites, u moet dan het gehele internetadres opgeven. Het is een goed gebruik om niet alleen de map aan te geven (bijvoorbeeld maar het complete adres (bijvoorbeeld Op deze manier bezorgt u de betreffende server iets minder werk, omdat deze dan niet hoeft uit te zoeken wat het "indexbestand" is. Het had immers net zo goed index.php kunnen zijn, of index.xhtml. Door het daadwerkelijke bestand aan te geven, bespaart u een server extra load. HTML-code: Externe links <a href="  <a href=" "Wikibooks"</a>  Links naar id's Links kunnen ook wijzen naar een bepaald deel van een pagina, als u dan op een link klikt verspringt de pagina naar de aangewezen tag. U kunt linken naar een plek in dezelfde pagina maar ook naar een plek in een andere pagina. Eerst geeft u de tag waar u naartoe wil linken een naam met behulp van het id-attribuut, ook het name-atribuut kan gebruikt worden. Vervolgens kunt u in een link naar deze tag verwijzen met een hekje (#) gevolgd door het id (of name) van de tag. <a href="#inhoud">naar de inhoud</a> een lange inleiding... hier komt de inhoud  <a href=" semantisch web</a>  Pagina 9 van 19

11 Document relaties Met behulp van het link element kunt u linken naar documenten die een relatie hebben met de pagina. Voorbeelden hiervan zijn: het volgende of vorige hoofdstuk, de inhoudsopgave of een externe stylesheet. Een link element gebruikt het rel en rev attribuut om aan te geven op welke manier de link verband houdt met de pagina. Het href attribuut wordt gebruikt om de locatie van het document aan te geven. De link tag mag alleen in het head element voorkomen. <head> <link rel="index" href="inhoudsopgave.html"> <link rel="next" href="hoofdstuk3.html"> <link rel="prev" href="hoofdstuk1.html"> <link rel="chapter" href="hoofdstuk7.html" title="hoofdstuk 7"> <link rel="section" href="hoofdstuk6.html#2" title="hoofdstuk 6.2"> <link rel="alternate" lang="en" href="chapter2.html"> <link rel="alternate" type="print" href="print/hoofdstuk2.html"> <link rel="stylesheet" href="normaal.css"> <link rel="alternate stylesheet" href="slechtzienden.css"> <link rel="alternate stylesheet" media="print" href="print.css"> </head> Met het rel attribuut geeft u de relatie aan van het doel van de link en het huidige document, met het rev attribuut de relatie van het huidige document tot het doel van de link. Er zijn enkele standaard link types die u kunt gebruiken in het rel en/of rev attribuut, dit zijn: Pagina 10 van 19

12 alternate Wijst een plaatsvervangende versie voor het huidige document toe van waaruit de link voorkomt. Wanneer samen met het lang-attribuut gebruikt, verwijst het naar een vertaalde versie van het document. Wanneer samen met het media-attribuut gebruikt, verwijst het naar een versie ontworpen voor een ander medium (printen, telefoon, etc.). stylesheet Verwijst naar een externe style sheet. alternate Stylesheet Verwijst naar een alternative externe style sheet. Een user agent kan de gebruiker de optie geven deze stijl te kiezen. start Verwijst naar het eerste document in een collectie van documenten. Dit link type vertelt zoekrobots welk document door de auteur beschouwd wordt als het startpunt van de collectie. next Verwijst naar het volgende document in een reeks van documenten. User Agents kunnen er voor kiezen om deze documenten alvast te laden om zo de pagina later sneller te tonen. prev Verwijst naar het vorige document in een reeks van documenten. User Agents kunnen er voor kiezen om deze documenten alvast te laden om zo de pagina later sneller te tonen. contents Verwijst naar een document dat dienst doet als een inhoudstabel. index Verwijst naar een document dat dienst doet als startpagina. glossary Verwijst naar een document dat dienst doet als een lijst van begrippen voor termen die in het document voorkomen. copyright Verwijst naar een verklaring van auteursrechten voor het huidige document. chapter Verwijst naar een document dat dienst doet als een hoofdstuk in een collectie van documenten. section Verwijst naar een document dat dienst doet als een onderdeel in een collectie van documenten. subsection Verwijst naar een document dat dienst doet als een onderafdeling in een collectie van documenten. Pagina 11 van 19

13 appendix Verwijst naar een document dat dienst doet als een appendix in een collectie van documenten. help Verwijst naar een document dat hulp biedt. bookmark Verwijst naar een bladwijzer. Een bladwijzer is een link naar een sleutelpositie binnen een uitgebreid document. Het title-attribuut mag gebruikt worden om de bladwijzer te labelen. U kunt ook zelf nieuwe linktypes introduceren maar User Agents zullen de relatie dan niet begrijpen. Pagina 12 van 19

14 Opmaak Via bepaalde elementen en attributen kun je de inhoud van jouw pagina mooi opmaken. Tegenwoordig zijn veel van deze elementen of attributen verouderd in HTML en worden ze zelfs niet meer ondersteund in XHTML. In plaats van die te gebruiken wordt er aangeraden om CSS te gebruiken. In dit hoofdstuk zullen we enkele van deze elementen en attributen bekijken en tonen hoe je CSS kunt toepassen. We geven telkens ook de waarschuwing welke je wel mag gebruiken en welke niet. Lettertype, grootte en kleur Er zijn 2 manieren om het lettertype, grootte en kleur aan te passen. Dit kan via de attributen van een bepaald element of via CSS. Ook kun je via elementen bepalen welke teksten welke opmaak krijgen. Zo kun je dankzij body al de inhoud van een webpagina dezelfde opmaak geven of kun je bij hele kleine stukjes specifieke opmaak geven dankzij span. Vroeger wanneer er aan hele kleine stukjes tekst (maar ook aan hele grote) opmaak moest veranderd worden werd er font gebruikt. Dit kon makkelijk worden gedaan dankzij zijn attributen Dit is grote rode tekst in times new roman. Dit is grote rode tekst in times new roman. Dankzij de attributen size, color en face kon je respectievelijk de grootte, kleur en lettertype van je tekst aanpassen. Bij het attribuut size moet je een getal van 1 tot 7 geven, bij color de naam of code van een kleur en bij face een lettertype. Dit element is ondertussen verouderd en wordt het nietmeer ondersteund door XHTML. Vrijwel alle browsers ondersteunen nog dit element maar het is echter aangeraden om het niet meer te gebruiken en alle opmaak in de stylesheet te definiëren. Nu kun je als je kleine stukjes tekst andere opmaak wilt geven het element span gebruiken. Deze heeft echter die attributen niet en moet je de tekst opmaken op een andere manier. Dit gebeurt via CSS of het style attribuut. Pagina 13 van 19

15 Dit is de CSS-code. span { } font-size: 19px; color: red; font-family: times new roman; Dit is de HTML-code. Dit is grote rode tekst in times new roman. Dit is grote rode tekst in times new roman. Met span kun je dus evenveel bereiken als font let wel op dat bij font-size andere regels gelden dan bij de size van font. Bij font-size wordt de grootte van de tekst opgegeven in pixels of punten. Als je nog niet vertrouwd bent met CSS kun je ook de CSS code plaatsen bij een attribuut van span namelijk het attribuut style. Dit is grote rode tekst in times new roman. Dit geeft exact hetzelfde resultaat. Nadruk leggen Als we op tekst nadruk willen leggen moet deze tekst in het oog springen. Tegenwoordig worden daarvoor de elementen em en strong gebruikt. Naast deze elementen zijn er nog i, b en u. Deze zijn echter verouderd en het is af te raden om deze nog te gebruiken. em De em staat voor het engelse emphasis wat staat voor het woord nadruk. Met dit element kun je dus nadruk leggen op stukjes tekst. ik wil nadruk leggen op deze tekst Ik wil nadruk leggen op deze tekst Pagina 14 van 19

16 Meestal wordt de tekst dan schuin afgedrukt, maar dat is zeker niet altijd zo. Er kunnen browsers zijn die iets anders met de tekst doen of het element em kan via CSS zijn aangepast. em { font-weight: bold; } Via CSS kan er bijvoorbeeld gekozen zijn om alle stukjes tekst die ingesloten zijn door het element em vet te laten tonen. em wordt gezien als de beste vervanging voor het element i. Dus als je i gebruikt hebt, kun je die beter vervangen door em. strong De strong staat eigenlijk voor strong emphasis oftewel in het Nederlands sterke nadruk. Dit betekent dus dat de tekst die wordt omringd door het element strong dat die nog meer in het oog moeten springen dan de tekst met het element em. ik wil sterker nadruk leggen op deze tekst Meestal wordt deze tekst dan vet gezet. Dit geldt niet altijd zoals bij het element em. Doordat de tekst vet wordt afgedrukt wordt het gezien als de beste vervanging voor het element b. Je kunt ook strong aanpassen dankzij CSS, zoals bijvoorbeeld de lettergrootte te veranderen. strong { font-size: 20px; } De elementen i(italic), b(bold) en u(underline) staan respectivelijk voor cursief, vet en onderstreept. De elementen i en b zijn nog niet verouderd en zullen nog worden ondersteund door de verschillende webbrowsers. Er wordt echter sterk afgeraden om ze nog te gebruiken. Voor het element i wordt aangeraden om em te gebruiken en voor b wordt strong aangeraden. Het element u is echter wel verouderd en mag dus niet echt meer gebruikt worden bij HTML pagina's. Het wordt wel nog ondersteund. Er wordt sowieso afgeraden om tekst te onderstrepen, dit is om te voorkomen dat gebruikers onderstreepte tekst zullen aanzien als links. Wil je toch tekst onderstrepen gebruik hiervoor dan liever CSS zoals in het volgende voorbeeld. em { text-decoration: underline; } Pagina 15 van 19

17 Afbeeldingen en objecten Dit hoofdstuk gaat over het gebruik van afbeeldingen en objecten. Afbeeldingen Om een afbeelding te tonen op een webpagina is er niet veel nodig. Je hebt gewoon het element img en zijne attributen src en alt nodig en een URL naar een afbeelding. Het alt attribuut is bedoeld als tekst die screenreaders kunnen weergeven voor personen met slecht zicht. Verder dient het ook als alternatieve tekst die wordt getoond wanneer de afbeelding niet kan worden geladen. <img src="afbeelding.jpg" alt="alternatieve tekst voor de afbeelding."> Bij het attribuut src gelden dezelfde regels als bij het attribuut href van het a element(zie ). Je kunt via de attributen height en width respectievelijk de hoogte en de breedte van een afbeelding bepalen. Dit kan op twee manieren: m.b.v. een waarde in pixels of een waarde in percenten. Als je pixels gebruikt geef je precies aan hoe breed en hoe hoog de afbeelding mag zijn. De browser weet dan ook hoeveel ruimte er moet worden vrijgehouden en zal later, bij het effectief tonen van de afbeelding, de pagina niet moeten herschikken. Wanneer je een procentuele waarde geeft, bepaalt hij de grootte op basis van de werkelijke grootte van de afbeelding x jouw percent. Wanneer een afbeelding 200 pixels breed was en je een waarde van "50%" geeft zal hij half zo breed zijn, geef je 200% zal hij dubbel zo breed zijn. <img src="afbeelding.jpg" height="100px" width="100px" alt="alternatieve tekst voor de afbeelding."> <img src="afbeelding.jpg" height="50%" width="200%" alt="alternatieve tekst voor de afbeelding."> Afbeelding als link gebruiken Om een afbeelding als link te gebruiken moet je het simpel weg in een a element verwerken. <a href="eenpagina.html"><img src="afbeelding.jpg" alt="alternatieve tekst voor de afbeelding."></a> <img src="afbeelding.jpg" alt="alternatieve tekst voor de afbeelding." /> De tag afsluiten doe je door achteraan een schuine streep toe te voegen("/"). Pagina 16 van 19

18 Tabellen Tabellen kunnen in HTML worden gebruikt om data overzichtelijk weer te geven in rijen en kolommen. Vroeger werd deze techniek ook gebruikt om de lay-out van een HTML-pagina te bepalen, deze techniek is echter sterk af te raden, beter is het om gebruik te maken van CSS. Basis Voor de bouw van tabellen beschikt u over de volgende elementen: table-tag: Hiermee maakt u een nieuwe tabel. tr-tag: "Table Row"; Hiermee wordt een nieuwe rij begonnen. td-tag: "Table Data"; Een nieuwe datacel, th-tag: "Table Header"; Net als <td> maar wordt gebruikt voor een titelveld. Een simpele tabel kan er dus als volgt uitzien: Pagina 17 van 19

19 <table> <tr> <td></td> <th>kolom 1</th> <th>kolom 2</th> </tr> <tr> <th>rij 1</th> <td>kolom 1 - Rij 1</td> <td>kolom 2 - Rij 1</td> </tr> <tr> <th>rij 2</th> <td>kolom 1 - Rij 2</td> <td>kolom 2 - Rij 2</td> </tr> </table> Dit wordt als volgt weergegeven in een browser: We hebben één tabel (<table>) gemaakt met daarin drie rijen (<tr>). In de eerste rij bevindt zich een lege cel (<td>) en twee titelcellen voor de kolommen (<th>). In de tweede en derde rij bevindt zich een titelcel gevolgd door twee datacellen. Pagina 18 van 19

20 Externe links Notepad++ website X86: X64: Pagina 19 van 19