Een eenvoudige website maken met HTML

(1)

Een eenvoudige website maken met HTML

René Dohmen

eerste versie 19 september 2007 deze versie 29 november 2019

www.li-do.nl

(2)

Anyway, Fluffy the rabbit just wanted to say “Hello”.

(3)

Webpagina's maken met HTML

Inleiding

HTML is een zogenaamde opmaaktaal. HTML staat voor Hypertext Markup Language.

Markup Language staat voor opmaaktaal. Het is een taal om aan te geven hoe tekst, afbeeldingen, tabellen etc. er uit moeten zien. Je kunt bijvoorbeeld de grootte, de kleur en de plaats op de pagina bepalen.

In een tekstverwerker kun je tekst schrijven. Tekst met links – zoals die in webpagina’s voorkomt – heet hypertekst.

Links zijn de basis van het internet. Door links kun je naar een andere pagina springen. Zo wordt informatie aan elkaar gekoppeld.

In deze opdracht leer je hoe je een eenvoudige website in HTML kunt maken.

Er zijn tegenwoordig allerlei manieren om een website te maken. De lelijkste is wellicht, dat je een Word-document als html-bestand kunt bewaren. Het voordeel van deze methode is, dat je niets hoeft te weten over HTML.

De nadelen zijn dat de pagina's heel veel onnodige codes bevatten en daardoor traag geladen worden. Je hebt geen enkele invloed op de manier waarop de pagina in elkaar wordt gezet (behalve dat je hoopt dat het lijkt op wat je in Word gemaakt had).

Soms verschijnen er ook vreemde dingen op een pagina die je helemaal niet zo bedacht had.

Je gaat nu een eenvoudige website maken. Je hebt daarvoor niets meer nodig dan een eenvoudige teksteditor en wat naslag.

Eigenlijk is het maken van een webpagina een eenvoudige vorm van

programmeren (vandaar ook dat we ermee beginnen). Het is vooral heel erg leuk om zelf een webpagina te maken en zelf te begrijpen waarom het zo moet.

Het gaat er ook om dat je de betekenis van tags leert, dat je leert wat het gevolg kan zijn van onnauwkeurig gebruik van die tags. Bovendien leer je om dat soort foutjes op te sporen.

Op de volgende website kun je alle basiskennis vinden die je nodig hebt voor een eenvoudige web-pagina:

http://www.basjansen.nl/htmlophetnet/

(4)

Tags

HTML-pagina’s bestaan uit tekst en HTML-codes (tags). Tags zijn sleutelwoorden tussen spitse haken, bijvoorbeeld <HTML>.

De meeste tags komen in paren voor. Bij <HTML> hoort </HTML>.

De eerste tag geeft aan waar zijn werking begint, de tweede waar de tag niet meer werkt. De ‘/’ staat voor de tekst van de sluit-tag.

Sommige tags hebben geen sluit-tag, bijvoorbeeld <IMG> en <BR>.

Elke HTML-pagina¹ heeft het volgende raamwerk nodig:

<HTML>

<HEAD>

<TITLE>Mijn eerste webpagina</TITLE>

</HEAD>

<BODY>

Hier staat de eigenlijke pagina.

</BODY>

</HTML>

Open de Text Editor.

Kopieer dit raamwerk in een leeg tekstbestand.

1

(5)

En bewaar het onder de naam raamwerk.html.

(6)

Je kunt vanaf nu een nieuwe webpagina beginnen door de inhoud van raamwerk.html te kopiëren.

Open de File manager.

Blader nu met de Explorer/Verkenner naar dit bestand.

(7)

Het is verstandig om een map te maken waarin je de website bewaart.

Klik in de File manager op rechter muisknop en kies voor Create New >

Folder.

Dubbelklik op de bestandsnaam. Het bestand wordt nu in de standaard browser geopend.

In de titelbalk zie je de tekst staan die je achter <TITLE> geschreven had:

“Mijn eerste webpagina”.

De webpagina zelf bestaat alleen nog maar uit een eenvoudige tekst.

Laten we de codes eens bekijken.

Met <HTML> vertel je waar de webpagina begint. Het einde geeft je met

</HTML> aan.

Daar tussen staat een <HEAD> (hoofd) en een <BODY> (romp). Beide hebben ook een sluit-tag (</HEAD en </BODY>).

In de HEAD kun je onder andere de titel opgeven. Dit is niet een kopje, maar de tekst die in de titelbalk of het tabblad van de browser verschijnt. De titel wordt ook door zoekmachines gebruikt om te bepalen wat er in de webpagina staat (de titel die in het voorbeeld hierboven geschreven staat is nietszeggend en daarom dus slecht).

(8)

Je ziet dat je met wat inspringen (TAB’s aan het begin van een regel) en wat witruimte (lege regels tussendoor) de code leesbaar kunt maken.

De volgende code is voor de browser exact hetzelfde, maar voor een mens veel moeilijker te lezen:

<HTML><HEAD><TITLE>Mijn eerste

webpagina</TITLE></HEAD><BODY>Hier staat de eigenlijke pagina</BODY></HTML>

(9)

Programma's

Maak in een eenvoudige tekstverwerker (zeker niet Word) een website die als logboek voor het vak informatica moet dienen.

Gebruik op de Raspberry het programma Scite. Je installeert dit programma met de opdracht:

sudo apt-get install scite

Selecteer in het menu bij Language de taal Hypertext.

(10)

Onder Windows kun je Notepad++ gebruiken. Er bestaat van dit programma een versie die je in een map op je USB-stick kunt installeren.

http://portableapps.com/apps/development/notepadpp_portable

(11)

Opdracht

Hierboven staat alleen beschreven hoe je het raamwerk van een HTML- bestand moet maken.

Hieronder staat beschreven aan welke eisen je website moet voldoen.

Instructie over het andere belangrijke zaken – zoals het maken van links – kom je verderop in deze tekst tegen.

Omvang

De website bevat minimaal 4 pagina's.

 Een startpagina (index.html)

 een pagina over jezelf (overmij.html)

 een pagina met een dagboekpagina (eendag.html)

 opdrachten (opdrachten.html)

 Op alle pagina's staat eenzelfde eenvoudig menu waarmee je door de website kunt bladeren.

Inhoud

Hieronder staan de eisen waaraan de pagina index.html moet voldoen

 Op de index-pagina staan minimaal de links naar de pagina's overmij.html, een dag.html en opdrachten.html

 Let op: de startpagina moet index.html heten, anders verlies je punten!

Hieronder staan de eisen waaraan de pagina overmij.html moet voldoen

 voornaam, achternaam. Als je uit privacy-overweging liever niet hebt dat je naam op internet bekend is, is je voornaam voldoende.

 Klas of afdeling (bijvoorbeeld 4H).

 een kleine foto van jezelf. De foto moet als JPG-bestand opgeslagen zijn (dus zeker niet als BMP). Als je leerlingnummer 1234 is, moet de bestandsnaam van de foto 1234.jpg zijn. Je mag best een oude foto gebruiken, het hoeft niet per se een actuele goed gelijkende foto te zijn. Als je uit privacy-overweging liever een 'look-a-like' gebruikt is dat ook goed.

 Als je op de foto klik moet een vergroting in een nieuw venster getoond worden.

 Een korte beschrijving van je hobby’s (sport, interesses e.d.).

 In welke richting dat je na de middelbare school wilt gaan studeren (op dit moment).

 Wat je met betrekking tot het vak Informatica al weet, en wat je boeiend lijkt om te leren.

 Vermeldt je favoriete band, liedje, kleur, getal, pretpark en attractie om wat mee over jezelf te vertellen.

(12)

 Maak van het liedje een link naar Youtube

 Gebruik een tabel om naam, klas, hobby's etc. netjes weer te geven.

Maak twee kolommen. Links zet je naam, klas, favoriete attractie etc.

In de rechterkolom zet je de bijbehorende tekst.

Hieronder staan de eisen waaraan de pagina eendag.html moet voldoen:

 Op deze pagina staat een foto of scan van een handgeschreven dagboekpagina.

 Zorg ervoor dat er een handgeschreven datum op de dagboekpagina staat.

 Neem de foto van de dagboekpagina recht van boven.

 Snijdt de foto eventueel uit met een tekenprogramma, zodat alleen het papier te zien is.

Hieronder staan de eisen waaraan de pagina opdrachten.html moet voldoen:

 Op deze pagina staan de opdrachten die je voor het vak informatica gemaakt hebt.

 Gebruik een zip-bestand om alle bestanden van 1 onderdeel

(bijvoorbeeld alle bestanden van Logische poorten) te bundelen. Als je niet wilt dat iedereen je zip-bestand kan openen, kun je het beveiligen met een wachtwoord (zie de pagina met tips).

 Logische poorten: alle LGI-bestanden in een ZIP-bestand. Van bijzondere schakelingen kun je een screenshot bijvoegen met een losse link naar het LGI-bestand.

 Huffman: digitale versie van de boom die je van je eigen zin maakte.

 Logo: een verkleinde afbeelding van de tekening en een link naar het LGO-bestand.

 Uitleg over het maken van links kom je verderop in deze tekst tegen.

Mappenstructuur

 Zet afbeeldingen en opdrachten in aparte mapjes. Maak bijvoorbeeld een map IMAGES voor de plaatjes en een map DOCS voor de opdrachten

 Het is vaak handig om de naam van bestanden of mapjes met een datum te laten beginnen, bijvoorbeeld: 20080203opdracht3.doc Vormgeving

 Zorg er allereerst voor dat je website overzichtelijk is.

 Gebruik contrasterende kleuren, zodat teksten goed leesbaar zijn. Gele letters op een witte achtergrond, of roze letters op een rode

achtergrond zijn niet voor iedereen goed leesbaar.

 In je website moeten handgeschreven elementen aanwezig zijn. Denk daarbij aan kopjes of knoppen. Je kunt je tekeningen fotograferen of

(13)

scannen. Op de website kun je voorbeelden vinden. De dagboekpagina geldt niet al handgeschreven element.

 Als je een (foto-)collage als achtergrond maakt (en misschien zelfs als menu gebruikt!), verdien je meer punten.

 Een collage of achtergrondafbeelding mag de teksten op de website niet onleesbaar maken.

Scripts

 Als je bij je websites Javascript gebruikt die je niet zelf gemaakt hebt, vermeldt je op een aparte pagina met de naam bronnen een lijstje met de gebruikte scripts en een link naar de pagina's waar je die scripts gevonden hebt.

 Als je zelf Javascript geschreven hebt voeg je een pagina met de naam Javascript toe. Op deze pagina voeg het script met uitleg toe.

 Als je Javascript zonder toelichting gebruikt worden er punten in mindering gebracht!

Wijze van inleveren

Bij het beoordelingsmoment neem je de website op je USB-stick mee.

Als de jaarplanning dat toelaat (de docent geeft dat aan) staat je website op internet.

Tenslotte

 Schrijf bestandsnamen altijd met kleine letters, dan werken ze altijd!

 Je mag op de website geen illegale software, muziek of films zetten.

Ook mag je er geen winkel onderhouden. Als je dit wel doet, loop je het risico dat je website meteen verwijderd wordt.

(14)

Meer dan één bestand

Het is het beste om eerst één pagina klaar te maken, zonder de inhoud. De andere pagina's hebben een andere naam en een andere inhoud.

In de tekeningen hieronder kun je dat zien. Het enige dat verschilt is het deel in het rode vlak. Je gaat als volgt te werk:

 je maakt index.html zonder inhoud

 je maakt met de File Manager twee kopieën van index.html die je overmij.html en opdrachten.html noemt. Op de volgende bladzijde staat uitgelegd hoe je dit moet doen.

 tenslotte vul je de inhoud op de drie pagina's in.

Index.html overmij.html opdrachten.html

(15)

Bestanden kopiëren met de File Manager.

Klik in de File Manager met de rechter muisknop op het bestand. Klik in het menu op Copy.

Klik ergens in het witte gedeelte op de rechter muisknop en klik in het menu op Paste.

Het volgende venster verschijnt. Verander filename index.html in overmij.html.

De knop Rename wordt nu ge-enabled. Klik op Rename.

(16)

HTML-pagina's opslaan met de kladblok

De kladblok is eenvoudige teksteditor. De meeste leerlingen geven de voorkeur aan Scite en Notepad++, omdat deze computerprogramma's met kleurcodes duidelijk laten zien waar tags staan.

Als je een bestand in de kladblok opslaat moet je .html achter de

bestandsnaam tikken (dus bv. mijnpagina.html). Als je dat niet doet, zet het programma er automatisch .txt achter. Je moet het bestand dan via de verkenner hernoemen.

In de titelbalk van de kladblok kun je zien onder welke naam het bestand opgeslagen is:

(17)

Met de File Manager of de Verkenner kun je ook aan de icoontjes zien dat er een verschil is.

Verschillende icoontjes in de File Manager

Verschillende icoontjes in de Verkenner

Standaard laat Windows geen extensies (.html, .txt) zien. In de volgende paragraaf wordt uitgelegd hoe je Windows zó kunt instellen dat de extensies wél te zien zijn.

(18)

Windows zo instellen dat je extensies van bestandsnamen kunt zien Standaard laat Windows niet de extensies van bestanden zien. Voor ons is het vaak gemakkelijk als dat wel zo is.

Kies in de Explorer/Verkenner voor Extra>Mapopties.

Vink dan in het tabblad Weergave de optie Extensies verbergen voor bekende bestandstypen uit.

(19)

Meer over HTML Titels

Kopjes kun je het beste maken met de tags <H1></H1>, <H2></H2>, <H3></

H3> etc. <H1> geeft de grootste kopjes, <H2> is één maat kleiner.

Zoekmachine gebruiken o.a. deze tags om de inhoud van de website te bepalen.

Je kunt tags met hoofdletter schrijven (<TITLE>) of met kleine letters (<h1>).

Het voordeel van hoofdletters is dat de tags wat gemakkelijker opvallen.

Het nadeel is dat de steeds op SHIFT moet drukken als je een tag invoert.

Vaak worden tags daarom met kleine letters geschreven. Maak voor jezelf één keuze, en houd jezelf daar dan aan.

Dubbele aanhalingstekens

Let erop dat je rechte dubbele aanhalingstekens gebruikt. In Openoffice en Word worden aanhalingstekens als een soort ronde krul weergegevens, die mag je niet in een HTML-bestand gebruiken.

goed → "

fout → “

Een nieuwe regel

Als je in een html-bestand ergens op ENTER drukt springt de code wel naar de volgende regel, maar op het scherm verandert niets. Als je wilt dat een tekst op de volgende regel begint moet je de tag <BR> gebruiken.

Een afbeelding als link gebruiken

Je kunt een afbeelding als link gebruiken op de volgende manier:

De toevoeging border=0 is nodig om een rand rond de afbeelding te voorkomen.

(20)

Link naar een nieuw tabblad/venster

Als je op een link klikt wordt de link in hetzelfde tabblad/venster geopend. Als je wilt dat er een nieuw tabblad/venster geopend wordt doe je dat door een target toe te voegen.

Opsommingen

Je kunt in HTML op verschillende manier een opsomming maken. Een manier is het zetten van bolletje voor de items. Plak de volgende code maar eens in je bestand om te zien wat er gebeurd.

Voorbeeld

<UL>

<LI>Groen</LI>

</UL>

toelichting

<UL> staat voor Unordered List (Ongeordende Lijst).

<LI> staat voor List Item.

Er bestaan ook geordende lijst, waarmee je regel kunt nummeren met cijfers (1,2,3,4,…) of letters (a,b,c,d,…). Hiervoor gebruik je <OL>. De items worden nu genummerd: 1,2,3, … etc.

Voorbeeld

<OL>

<LI>Koffie</LI>

</OL>

Als je een lijst niet met 1 wilt laten beginnen kun je dat ook instellen:

Voorbeeld

<LI>Sinas</LI>

</OL>

(21)

Een tabel gebruiken.

In HTML heb je de mogelijk om een tabel te maken. Vroeger werden tabellen gebruikt om de pagina in rechthoekige gebieden op te delen.

Dat mag je absoluut niet doen. In de tweede opdracht leer je hoe je een pagina op een nette manier kunt opdelen.

Tabellen gebruik je dus alleen om – inderdaad – tabellen te maken.

Een tabel bestaat uit cellen die in rijen staan. Een tabel begint steeds met

<TABLE>.

Daarna volgen 1 of meer rijen:

Voorbeeld

<TABLE>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

In zo een rij staan de cellen die met de tag TD (table data) gemaakt worden.

Voorbeeld

<TABLE>

<TR>

<TD>linksboven</TD><TD></TD><TD></TD>

</TR>

<TR>

<TD></TD><TD>midden</TD><TD></TD>

</TR>

<TR>

<TD></TD><TD></TD><TD>rechtsonder</TD>

</TR>

</TABLE>

De breedte van een cel kun je instellen met:

Op de volgende webpagina kun je meer vinden over tabellen:

http://www.basjansen.nl/htmlophetnet/tekst/tabellen.html

(22)

Je kunt bijvoorbeeld de randen verbergen en de inhoud centreren.

(23)

De grootte van afbeeldingen

Soms is een foto te groot om op een scherm weer te geven. Je kunt dat op twee manieren oplossen:

 Je maakt een kopie van de foto en maakt die met een tekenprogramma kleiner (zie daarvoor de uitleg hieronder)

 Je zorgt ervoor dat je met een geschikte HTML-code de afbeeldingen kleiner weergeeft. De onderstaande code laat hiervan een voorbeeld zien.

Je moet er natuurlijk wel voor zorgen dat de verhouding tussen breedte en hoogte gelijk blijft (anders ziet de foto er een beetje vreemd uit).

De eerste methode is natuurlijk beter. Als iemand je webpagina bekijkt, hoeft hij niet onnodig grote foto's te downloaden: je website wordt dus sneller.

Soms staan er daarom twee bestanden met een verschillende grootte op de website:

foto-groot.jpg foto-klein.jpg

Als er veel van dit soort foto's zijn worden er zelfs aparte mappen voor aangemaakt, bijvoorbeeld:

plaatjes-groot plaatjes-klein

(24)

Een foto kleiner maken met Kolourpaint (Raspberry Pi)

 Installeer het programma kolourpaint sudo apt-get install kolourpaint4

 Open de foto. Kies in het menu: File > Open

 Als je de foto onder een nieuwe naam wilt opslaan kun je dat beter meteen doen. Kies in het menu: File > Save as...

 Wijzig nu de afmeting. Kies in het menu: Image > Resize/Scale...

 Je kunt de grootte nu in pixels of in procenten opgeven (pas de waarde achter New of Percent aan).

 Zorg ervoor dat Keep Aspect Ratio aangevinkt staat.

 Klik op Ok

 Sla de verkleinde foto op. Kies in het menu: File > Save.

(25)

Een foto kleiner maken met Irfanview (Windows)

 Download en installeer het programma Irfanview (www.irfanview.com)

 Open de foto. Kies in het menu: File > Open

 Als je de foto onder een nieuwe naam wilt opslaan kun je dat beter meteen doen. Kies in het menu: File > Save as...

 Wijzig nu de afmeting. Kies in het menu: Image > Resize/Resample...

 Je kunt de grootte nu in pixels of in procenten opgeven (kies Set New Size of Set New Size as percentage of original.

 Zorg ervoor dat Preserve Aspect Ratio aangevinkt staat.

 Klik op Ok

 Sla de verkleinde foto op. Kies in het menu: File > Save.

(26)

Kleuren in HTML TIP

Besteed niet te veel aandacht aan kleuren. Het is beter om kleuren met Stylesheets in te stellen. Daarover leer je later meer.

Bij sommige TAGS kun je een kleurcode opgeven. De kleurcodes zijn RGB- codes, maar dan met hexadecimale getallen geschreven.

Per kleur worden er twee cijfers geschreven. 0 wordt 00, 10 wordt 0A, 255 wordt FF.

kleur RGB RGB in HTML

zwart 0,0,0 #000000

wit 255,255,255 #FFFFFF

blauw 0,0,255 #0000FF

Een kleur grijs 10,10,10 #0A0A0A

De volgende website rekent RGB-codes om naar hexadecimale waarden.

http://easycalculation.com/rgb-coder.php

Een aantal veel gebruikte kleuren kun je ook met de Engelse naam opgeven.

Zo is groen bijvoorbeeld green.

Een overzicht van deze codes vind je op:

http://www.ironspider.ca/format_text/fontcolor.htm

(27)

De kleur van tekst veranderen

De kleur van tekst verander je met de FONT-tag. Op de volgende manier krijg je rode letters:

<FONT COLOR=”#FF0000”>rode tekst</FONT>

Na </FONT> krijgt de tekst weer de kleur die het voor <FONT COLOR=”#FF0000”> had.

De kleur van tekst en links veranderen

De kleur die links krijgen wordt bepaald door parameters bij de BODY-tag.

We bekijken als voorbeeld de volgende code. Je kunt de kleurcodes natuurlijk zo aanpassen als je zelf wil:

TEXT zorgt ervoor dat de standaardkleur

voor tekst zwart is.

LINK zorgt ervoor links die je nog niet

aanklikte rood worden.

VLINK zorgt ervoor dat links die je wel al

aanklikt zwart worden

ALINK zorgt ervoor dat links rood woorden

als je er er boven zweeft met de muis (ook als je ze al bezocht hebt).

LET OP: Een HTML-pagina heeft maar één BODY. Als je instellingen wilt toevoegen horen die achter die ene BODY-tag.

Een achtergrondkleur of achtergrondafbeelding gebruiken

TIP

Besteed niet te veel aandacht aan kleuren. Het is beter om kleuren met Stylesheets in te stellen. Daarover leer je later meer.

De codes die je bij BODY toevoegt moeten bij de tweede en derde website weer weggehaald worden.

Ook de achtergrond kun je bij BODY instellen.

(28)

De volgende code zorgt voorbeeld voor een blauwe achtergrond:

<BODY BGCOLOR=”#00000FF”>

De volgende code toont de afbeelding in het bestand mooi.jpg op de achtergrond:

<BODY BACKGROUND=”mooi.jpg”>

Het nadeel van de bovenstaande methode is dat je de afbeelding niet mooi schermvullend kunt instellen. In de tweede opdracht leer je hoe je dat wel voor elkaar krijgt met stylesheets.

Je kunt BGCOLOR of BACKGROUND natuurlijk combineren met ALINK, VLINK, LINK etc.

LET OP: Een HTML-pagina heeft maar één BODY. Als je instellingen wilt toevoegen horen die achter die ene BODY-tag.

(29)

Een foto in een nieuw venster openen

Als je de foto in een nieuw venster wilt laten openen geldt iets soortgelijks.

Je kunt een tweede kopie maken die wat groter in, maar wel op het scherm past. Je kunt dan rechtstreeks naar de afbeelding linken.

<A HREF=”fotogroot.jpg”><IMG BORDER=0 SRC=”fotoklein.jpg”></A>

Of je gebruikt WIDTH en HEIGHT in een IMG-tag. Je moet dan een aparte html-pagina aanmaken waarin een IMG-tag met de juiste afmeting staat.

<A HREF=”foto.html”><IMG BORDER=0 SRC=”fotoklein.jpg”></A>

In foto.html staat dan behalve de standaardcode bijvoorbeeld:

(30)

Links en (relatieve) paden

Als je in een link (HREF) of een afbeelding (SRC) naar een ander bestand verwijst, heb je soms een pad naar dat bestand nodig.

We gaan er nu vanuit dat de HTML-bestanden in de map c:/website staan. De plaatje staan in de map c:/website/plaatjes.

Dan kan dit de tag voor een afbeelding zijn <IMG SRC=”plaatjes/foto1.jpg”>.

Gebruik nooit een drive-letter (bijvoorbeeld C:) in het pad bij een bestand.

Zet alle bestanden die bij je website horen in 1 map bij elkaar. Je kunt voor afbeeldingen of ZIP-bestanden aparte mappen aanmaken waarin je die bestanden bij elkaar zet.

goed fout

foto.jpg d:foto.jpg

plaatjes/foto.jpg c:/website/foto.jpg

fotos/2003/12/dsc2332.jpg c:/mijn documenten/piet/bureaublad/index.html

Als je verwijst naar een bestand op je eigen website kun je dat als volgt doen:

html-code

Je vindt op deze website <a href=”huiswerk.html>huiswerk</a> en … Je kunt ook verwijzen naar bestanden in mappen, in dit bijvoorbeeld is dat een Word-bestand met de naam opdracht1.doc in de map docs:

html-code

<h3>Uitwerkingen</h3>

<ul>

<li><a href=”docs/opdracht1.doc”>opdracht 1</a></li>

</ul>

Ook kun je verwijzen naar andere websites. Je moet dan http:// voor het adres opnemen:

html-code Links<br>

<ul>

</ul>

(31)

Je kunt – tenslotte - ook een verwijzing naar een mailadres maken. Je moet dan mailto: voor het email-adres opnemen:

html-code

<a href=”mailto:pietje@puk.nl”>Pietje Puk</a>

(32)

Filmpjes van youtube op je website zetten

Het kan leuk zijn om een filmpjes op je website te zetten.

LET OP: Het kan zijn dat de website van Youtube er inmiddels anders uitziet dan op het moment dat deze uitleg geschreven werd.

Als voorbeeld nemen we dit filmpje:

https://www.youtube.com/watch?v=AkPkOw4HBI8

Onder het filmpje zie je een aantal knoppen. Klik op Delen en daarna Insluiten.

Druk op CTRL-C om de code te kopiëren. Plak die op de gewenste plek in je HTML-bestand. In dit voorbeeld is dit de code die je krijgt:

src="https://www.youtube.com/embed/AkPkOw4HBI8" frameborder="0"

allowfullscreen></iframe>

Zet niet te veel filmpjes op één pagina. Ze maken je webpagina snel traag.

Als je naar veel filmpjes wil verwijzen is het beter om een link te gebruiken. Je kunt het filmpjes bijvoorbeeld in een nieuw venster openen:

<A TARGET=”_BLANK”

HREF=”https://www.youtube.com/watch?v=AkPkOw4HBI8”>

(33)

Een favicon in de adresbalk laten zien

Een favicon is een icoontje dat in de adresbalk voor het webadres getoond wordt.

Allereerst moet je een icoontje maken voor je website.

Dat kan eenvoudig met Kolourpaint of Irfanview. Op de volgende bladzijdes staat beschreven hoe dat kan.

(34)

Een icon maken met Kolourpaint4 Start Kolourpaint

Maak een nieuwe afbeelding met File > New Verander de afmeting met Image > resize/Scale

Geef de afbeelding een breedte een hoogte van 16 pixels. Let op: Keep Aspect Ratio moet uit staan.

Zoom in met het vergrootglas in de knoppenbalk

Maak de tekening met de tekengereedschappen

Als het icoontje klaar is kun je het bewaren. Kies in het menu File >

Save as...

Type een bestandsnaam en stel het bestandsformaat wel in op PNG (het standaardformaat is ICO, maar dat kent Kolourpaint niet). Zie ook:

https://nl.wikipedia.org/wiki/Favicon

(35)

Een icon maken met Irfanview

Start Irfanview

Maak een nieuwe afbeelding met Image > Create New (Empty) Image Geef als breedte en hoogte 16 pixels. Kies 256 kleuren.

Zoom voldoende in met het vergrootglas in de knoppenbalk

Toon het venster met de tekengereedschappen met Edit > Show paintdialog

Als alleen de kleur wit in het pallet staat kun je het pallet bewerken met Image > Pallet > Edit pallet

Teken nu de afbeelding.

(36)

Als het icoontje klaar is kun je het bewaren. Kies in het menu Bestand >

Save as...

Type een bestandsnaam en stel het bestandsformaat wel in op PNG.

Je kunt de afbeelding ook bewaren als ICO – Windows Icon.

Vink bij de instellingen bij ICO Save Transparent Color aan!

Tegenwoordig werkt PNG in de meeste browsers.

Zie ook:

https://nl.wikipedia.org/wiki/Favicon

Voor de gemakkelijken onder ons: er bestaan ook websites die een plaatje dat je al hebt naar een ICO-bestand converteren, bijvoorbeeld:

http://tools.dynamicdrive.com/favicon/

(37)

Nu zijn er nog twee stappen nodig.

Pas nu het HTML of PHP-bestand zo aan dat het je favicon laat zien.

Voeg aan de HEAD een LINK-tag toe. Let erop dat je de juiste bestandsnaam gebruikt (in dit voorbeeld informatica.ico).

<HEAD>

<TITLE>Mijn website</TITLE>

</HEAD>

Upload nu het icoon en de gewijzigde HTML en PHP-bestanden met FTP naar je website.

(38)

BIJLAGE

Oude methode van insluiten bij youtube

Druk op CTRL-C om de code te kopiëren. Plak die op de gewenste plek in je HTML-bestand. In dit voorbeeld is dit de code die je krijgt:

value="http://www.youtube.com/v/RMINSD7MmT4?fs=1&hl=nl_NL"></param><pa ram name="allowFullScreen" value="true"></param><param name="allowscriptaccess"

value="always"></param><embed src="http://www.youtube.com/v/RMINSD7MmT4?

fs=1&hl=nl_NL" type="application/x-shockwave-flash" allowscriptaccess="always"

allowfullscreen="true" width="480" height="385"></embed></object>