webdesign. html html html = hypertext markup language de basistaal om websites te maken. geen...
TRANSCRIPT
![Page 1: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/1.jpg)
WebdesignWebdesign
![Page 2: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/2.jpg)
HTMLHTML
![Page 3: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/3.jpg)
HTML
HTML = HyperText Markup Language
De basistaal om websites te maken.
Geen speciale software nodig, een eenvoudige tekstverwerker zoals ‘kladblok’ volstaat.
Er bestaan wel gesofisticeerde programma’s om websites te maken, zoals Microsoft Frontpage, Macromedia Dreamweaver, Adobe GoLive
![Page 4: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/4.jpg)
HTML
HTML-taal bestaat uit codes, die meestal in paren voorkomen (tags):
• een openingscode
• een afsluitcode
Afsluitcode is gelijk aan de openingscode maar met dat verschil dat er een schuine streep (/) voorkomt te staan.
De codes staan altijd tussen punthaken (<en>).
![Page 5: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/5.jpg)
HTMLVoorbeeld:
<HTML><HEAD>
<TITLE>Hier komt je titel</TITLE></HEAD>
<BODY>Hier komt je tekst</BODY>
</HTML>
![Page 6: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/6.jpg)
HTMLDe 4 dubbele codes of ‘tags’ zijn ABSOLUUT nodig in ELKE html-pagina:
• <HTML></HTML>
• <HEAD></HEAD>
• <TITLE></TITLE>
• <BODY></BODY>
![Page 7: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/7.jpg)
HTML<HTML> </HTML>
Wordt een koppel genoemd omdat het een hoeveelheid gegevens – tekst vb. – kan bevatten.
Elke pagina moet verplicht beginnen met <HTML> en even verplicht eindigen met </HTML>
Het zijn codes die aan je browser vertellen dat hij van nu af aan tekst of afbeeldingen mag verwachten die hij netjes in een webpagina moet omzetten.
De ruimte tussen die 2 tags moet ook (verplicht) verdeeld worden in HEAD- en een BODY-gedeelte
![Page 8: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/8.jpg)
HTML<HEAD> </HEAD>
Bevat een aantal gegevens die NIET op de webpagina zelf zullen terechtkomen.
<TITLE> </TITLE>
Is wel zichtbaar en wordt in de titelbalk van de browser weergegeven. De tekst die daarin staat wordt doorgaans ook opgeslagen in de bookmarks of favorieten als de bezoeker die wilt bewaren.
Zorg dat daar kort en duidelijk staat wat je op deze pagina kunt vinden.
![Page 9: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/9.jpg)
HTML<BODY> </BODY>
Hiertussen komen de gegevens voor de eigenlijke webpagina.
Alle tekst, afbeeldingen, geluiden, filmpjes etc. moeten daar dus te vinden zijn.
![Page 10: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/10.jpg)
HTMLBrowsers:
• houden geen rekening waar jij de tekst afbreekt
• trekken zich niets aan van dubbele spaties, tabs of harde returns (hiervoor bestaan er mogelijkheden)
• een website kan er bij een andere browser anders uitzien
![Page 11: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/11.jpg)
HTMLOefening typ de volgende structuur in de kladblok
<HTML><HEAD>
<TITLE>Hier komt je titel</TITLE></HEAD>
<BODY>Hier komt je tekst</BODY>
</HTML>
![Page 12: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/12.jpg)
HTMLBekijk het resultaat in de browser
Typ nu veel meer tekst tussen de body-tags en bekijk het resultaat in de browser
![Page 13: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/13.jpg)
HTMLTitelniveau’sHoofdtitel: <H1></H1>Kleinste titel: <H6></H6>
Paragraaftags<P></P>
Tekst wordt mooi bij elkaar gehouden gescheiden door een witruimte.
</P> is niet echt nodig maar best overzichtelijk, een lege tag
![Page 14: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/14.jpg)
HTMLAfzonderlijke alinea’s
<BR>: harde return
Ook een lege tag, heeft geen </BR> nodig
Op de plek waar je deze tag zet, wordt de tekst afgebroken en de rest gaat naar een nieuwe lijn.
Er wordt geen witregel tussengevoegd, zoals bij de paragraaftag.
![Page 15: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/15.jpg)
HTMLHorizontale lijn
<HR>
Een andere manier om tekst af te scheiden.
Die zet een lijn over de volle lengte van je browserscherm.
Is ook terug een lege tag.
![Page 16: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/16.jpg)
HTMLOpmaaktags
<B></B> = bold of vet
<U></U> = underline of onderstreept
<I></I> = italic of cursief
Om afzonderlijke woorden of gedeelten uit de tekst te laten uitspringen.
De woorden tussen de twee tekst wordt naargelang de tag vet, onderstreept, of cursief geplaatst.
![Page 17: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/17.jpg)
HTML
Oefening blz. HTML3
![Page 18: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/18.jpg)
HTMLLijst plaatsen op je site
Genummerde en ongenummerde lijsten
• Genummerde lijst (ordered list):
voorafgegaan door een volgnummer
• Ongenummerde lijst (unordered list):
voorafgegaan door een bolletje of een ander symbool
![Page 19: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/19.jpg)
HTMLGenummerde lijst
Wordt ingesloten door de tags: <OL></OL>
Elk apart item van de lijst wordt op zijn beurt voorafgegaan door de tag <LI>, de sluittag </LI> mag maar moet niet.
Voorbeeld:
<OL>
<LI>Ten eerste<LI>Ten tweede<LI>Ten derde
</OL>
![Page 20: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/20.jpg)
HTMLOngenummerde lijst
Wordt ingesloten door de tags: <UL></UL>
Elk apart item van de lijst wordt op zijn beurt voorafgegaan door de tag <LI>, de sluittag </LI> mag maar moet niet.
Voorbeeld:
<UL>
<LI>Microsoft<LI>Adobe<LI>Macromedia
</UL>
![Page 21: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/21.jpg)
HTMLBegrippenlijst of ‘Definition List’
Wordt ingesloten door de tags: <DL></DL>
Elk begrip komt achter <DT> te staan.
De uitleg van het begrip komt achter <DD> te staan.
Aan deze lijst worden noch nummers, noch symbooltjes toegevoegd.
![Page 22: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/22.jpg)
HTMLVoorbeeld:
<DL>
<DT>Groen <DD>kleur van de hoop<DT>Geel <DD>kleur van de haat<DT>Rood <DD>kleur van de liefde
</DL>
![Page 23: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/23.jpg)
HTML
Oefening blz. HTML5
![Page 24: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/24.jpg)
HTMLStandaarnummering door 1, 2, 3 enz.
Veranderen?
Voeg het attribuut: TYPE aan de tag <OL>
Voorbeelden:
<OL TYPE=A> : een nummering met A, B, C…<OL TYPE=a> : een nummering met a, b, c…<OL TYPE=I> : romeinse cijfers<OL TYPE=i> : kleine romeinse cijfers.
![Page 25: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/25.jpg)
HTMLStandaarongenummerde lijst d.m.v. zwarte bolletjes
Veranderen?
Voeg het attribuut: TYPE aan de tag <UL>
Voorbeelden:
<UL TYPE=square> : zwarte vierkantjes<UL TYPE=circle> : open cirkeltjes
Binnen de lijst mag je geen <P></P> tags gebruiken.
![Page 26: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/26.jpg)
HTMLTabellen
Handig om gegevens op een webpagina te structureren.
Tabellen gebruiken om:
• tekst of getallen te structuren
• afbeeldingen uit te lijnen
• lay-out van je pagina te maken
![Page 27: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/27.jpg)
HTMLTabellen
Een tabel begint en eindigt met de tags:
<TABLE> </TABLE>
Dit maakt een tabel zonder lijnen.
Met lijnen moet de volgende tag gebruikt worden:
<TABLE BORDER=1>
Hoe hoger het cijfer hoe dikker de lijn.
![Page 28: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/28.jpg)
HTMLRijen en kolommen
Tussen de <TABLE>-tags een horizontale rij definiëren.
<TR></TR>
Binnen elke rij worden de kolommen gedefinieerd met de tags
<TD></TD>
![Page 29: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/29.jpg)
HTMLEen titel boven de tabel
<CAPTION>-tag zet een titel boven je tabel en centreert de tekst.
Kolomtitels
<TH></TH>
De kolomtitels worden in de browser in vetjes gezet en gecentreerd boven de kolom waar ze bij horen.
![Page 30: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/30.jpg)
HTML
Oefening blz. HTML6
![Page 31: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/31.jpg)
HTMLHyperlinks
Ook anker genoemd… waaraan een bepaalde tekst of afbeelding aan een webpagina vastzit.
‘Verankerd’ is aan een andere pagina.
Een hyperlink is gemakkelijk te herkennen… de muisaanwijzer verandert in een handje zodra je er op terecht komt.
De hyperlinktag:
<A></A>
De A van Anchor (anker)
![Page 32: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/32.jpg)
HTMLHyperlinks
Voorbeeld:
<A HREF=“http://www.pcpol.com”>Klik hier voor Pcpol</A>
HREF = HyperText REFerence.
Een hyperlink kan ook naar een pagina op je eigen website verwijzen of naar een afbeelding:
<A HREF=“index6.html”>Foto’s</A>
![Page 33: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/33.jpg)
HTMLHyperlinks
Een hyperlink moet niet altijd naar een http-adres verwijzen, mag ook een ftp-adres zijn.
Of naar een e-mailadres:
<A HREF=“mailto:[email protected]”>e-mail Icolaes</A>
![Page 34: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/34.jpg)
HTMLHyperlinks
Een verwijzing binnen dezelfde pagina.
Eerst op de plaats waar je naartoe wilt springen een naam definiëren met de tag
<A NAM=“daar”></A>
Op een andere plaats naar die plaats verwijzen:
<A HREF=“#daar”>Ga naar daar</A>
![Page 35: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/35.jpg)
HTMLFiguren
Om een figuur op de webpagina te plaatsen:
<IMG SRC=“figuur.jpg”>of<IMG SRC=“\images\figuur.jpg”>Afsluittag </A>
Om een hyperlink achter een figuur te verbergen:
<A IMG SRC=“http://www.pcpol.jpg”><IMG SRC=“figuur.jpg” border=0></A>
![Page 36: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/36.jpg)
HTMLKleuren
Om een gekleurde achtergrond te verkrijgen:
<BODY BGCOLOR=“#FFFFCC”>
Om een tekst een ander uitzicht te geven:
<FONT COLOR=“#123456” SIZE=“+2”></FONT>
Size kan zowel –n of +n zijn (n = natuurlijk getal)
![Page 37: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/37.jpg)
![Page 38: Webdesign. HTML HTML HTML = HyperText Markup Language De basistaal om websites te maken. Geen speciale software nodig, een eenvoudige tekstverwerker](https://reader035.vdocuments.net/reader035/viewer/2022070315/5551a0f04979591f3c8bba14/html5/thumbnails/38.jpg)
VEEL VEEL SUCCES!!!!SUCCES!!!!