HTML Cursus Hier vind je de cursus op het internet: www.acc.dds.nl/acconline/ Download Pinguins.jpg van: www.acc.dds.nl/lesonline/kompozer/htmlcursus/pinguins.jpg Download de html bestanden van: www.acc.dds.nl/lesonline/kompozer/htmlcursus/index.html
Alle webpagina's en foto's worden bewaard in één map. Maak een nieuwe map op het Buroblad. Noem deze map "mijnsite" en plaats Pinguins.jpg in deze map HTML is de afkorting voor: Hyper Text Markup Language (vooral niet onthouden). Het is een taal die aan de browser ‘verteld’ hoe alles op de internetpagina moet worden weergegeven. HTML is dus geen programmeertaal, het legt alleen de opmaak en de structuur van de pagina vast. Surf eens naar een willekeurige website. Klik met de rechtermuisknop op de site en ga naar "Bron weergeven" of “View Source” (MSIE). Alles wat in het document staat zijn HTML tags. HTML tags kunnen zowel in hoofdletters als in kleine letters geschreven worden. In deze cursus schrijf ik ze in hoofdletters, zodat je ze makkelijker kunt herkennen. Als je veel websites bouwt is het tijdbesparend om ze allemaal in kleine letters te schrijven. HTM of HTML? De extensie .htm wordt steeds minder gebruikt. Vroeger werd deze extensie juist het meest gebruikt, omdat men met Windows 3.x dit bestandtype kon lezen. Nu wordt er voornamelijk HTML gebruikt Waarin programmeer je HTML? Er zijn veel programma's die je de mogelijkheid geven om in een omgeving van een tekstverwerker een HTML document te maken. Hierin type je jouw tekst, plaatst een foto en voila je kan hem opslaan als .html en publiceren op het Internet. Geen moeilijke codes, geen denkwerk, maar wel een homepage! Helaas leer je hierdoor geen HTML. Daarom gaan we werken in Windows Kladblok. Voor de Mac kan je creatext gebruiken http://creatext.sourceforge.net/ - Ga naar Start - Bureau accessoires - Kladblok Overigens kun je ook als je zelf HTML wilt schrijven prima werken in een HTML editor. Het
1 van 14
23-2-10 20:47
HTML Cursus
file:///Macintosh%20HD/Users/--/Desktop/kompo...
voordeel daarvan is dat de HTML codering voorzien wordt van kleuren. Dat maakt het een stuk makkelijker om je weg te vinden in lange HTML bestanden. Beginnen van de programmering: Als eerste ga je in het kladblok definieren in welke taal je gaat werken. Dit doe je als volgt. Type het volgende over: Met open je jouw webpagina. Met geef je het eind van jouw webpagina aan. Alles wat hier tussen komt wordt door de browser als HTML herkend en weet hierdoor wat hij met al deze gegevens moet doen. De head: Een HTML pagina bestaat uit twee onderdelen. Een kop en een "lichaam" (body). De kop bevat meestal alleen een titel, die vervolgens wordt weergegeven bovenaan in de browser. Het lichaam bevat de tags die de layout bepalen. Dit vormt dus de website die zichtbaar wordt in de browser. We gaan eerst een kop toevoegen aan de webpagina. Zorg dat jouw webpagina er als volgt uitziet. De rode kleur wordt hier alleen gebruikt om aan te tonen wat nieuw is toegevoegd in dit document. De inhoud van de tekst hiervan kun je zelf bepalen: mijn website Met bovenstaande codes heb je aangegeven dat er een titel (TITLE) in de kop (HEAD) van de browser moet komen. De tekst die bij de title-tag aangegeven is zal je helemaal bovenaan in de browser terug kunnen vinden. Dit kun je overigens testen.
- Ga naar Bestand - Opslaan als:titel De mijnsite map staat op het Buroblad Geef een webpagina een naam met alle letters achter elkaar, dus zonder spatie's of leestekens. Anders kan de webpagina niet geopend worden met een browser op het
2 van 14
23-2-10 20:47
HTML Cursus
file:///Macintosh%20HD/Users/--/Desktop/kompo...
internet.
- Stel Opslaan als in op Alle Bestanden - Vul bij Bestandsnaam titel.html in
Als je de map "mijnsite" opent dan zie je dat daarin een titelpagina en een piguins.jpg bestand Open de browser en open daarin het bestand index.html. De body zal helemaal leeg zijn, maar bovenaan de browser kun je de door jou opgegeven titel terugvinden. Zoals je ziet open en sluit je de tags. Je opent als eerste altijd de header (kop) waarin je de titel plaatst. Daarna sluit je beiden af. De body: De layout van de site ga je in de body van het HTML document bepalen. Ook de BODY-tag moet geopend worden en gesloten. Alles wat daar tussen komt te staan zal in de browser als homepage zichtbaar zijn. Zorg dat jouw document er als volgt uitziet: mijn website
3 van 14
23-2-10 20:47
HTML Cursus
file:///Macintosh%20HD/Users/--/Desktop/kompo...
Dit is een webpagina met een tekst mijn website Dit is een tekst De ‘tekst’ komt tussen de tags en op de linkerzijde van de pagina Een enter geef je aan d.m.v. een "forced line break". Deze ziet er als volgt uit: Een witregel geef je aan d.m.v. "paragraph". Deze ziet er zo uit:
De tekst in het midden
mijn website
Dit is een tekst in het midden
Zoals je ziet open ik, voordat mijn tekst begint, de CENTER-tag Alles wat tussen
en
staat wordt nu gecentreerd weergegeven in de browser. Een tekst groter maken mijn website Dit is een tekst
4 van 14
23-2-10 20:47
HTML Cursus
file:///Macintosh%20HD/Users/--/Desktop/kompo...
Zoals je ziet moet de FONT-tag wel afgesloten worden. Alle tekst tussen en wordt nu een slag groter weergegeven dan de rest van de tekst in het document. SIZE 3 kun je over het algemeen als standaard zien. Je kunt tekst vergroten, zoals in het voorbeeld, maar ook verkleinen (maak dan de waarde kleiner dan 3). Ook negatieve waarden (-1) worden door de meeste browsers gelezen. Kleuren Er wordt bij HTML gebruik gemaakt van een code voor kleuren. Deze code begint altijd met een hekje (#) en wordt gevolgd door 6 karakters, bestaande uit cijfers en eventueel letters. Omdat in deze codes weer drie subcodes verwerkt zijn, heten ze hexadecimaal triplet. Door middel van die cijfers en letters geef je aan hoeveel rood, blauw en groen je wilt mengen voor het eindresultaat. Omdat er miljoenen combinaties bestaan, hoef je je niet schuldig te voelen als je deze codes niet uit je hoofd kent. Er zijn verschillende programma's die je kunnen helpen met het achterhalen van deze kleurencodes (een HTML editor bijvoorbeeld, of een fotoprogramma). Wat wel handig om te weten is dat #000000 voor zwart staat en #FFFFFF voor wit. Een webpagina met een blauwe achtergrond mijn website Deze pagina heeft een tekst, een achtergrondkleur en een foto mijn website
Dit is een tekst
Met de regel
5 van 14
23-2-10 20:47
HTML Cursus
file:///Macintosh%20HD/Users/--/Desktop/kompo...
waarden bij WIDTH en HEIGHT zijn pixels. Een webpagina linken Een pagina wordt een website als je de pagina’s aan elkaar kunt koppelen dmv links De eerste webpagina die je in je browser op het internet ziet is de homepage of indexpagina. Het is eigenlijk de openings of titelpagna van je websitehome pagina1 De A-tag staat voor Anker en wordt gebruikt om verschillende documenten of onderdelen van documenten met elkaar te verbinden. Een A-tag hoort altijd afgesloten te worden. HREF staat voor "hyper reference". Alles wat volgt tussen aanhalingstekens wordt door de browser gezien als een lokatie. De tekst die tussen en in staat zal weergegeven worden als link. Wanneer hierop geklikt wordt zal de browser op zoek gaan naar het document dat bij HREF aangegeven wordt. In dit voorbeeld wordt de homepage of indexpagina gelinkt naar pagina1 mijn website home pagina1 Om weer terug te kunnen keren naar de homepage of index pagina wordt pagina1 gelinkt naar de indexpagina index pagina mijn website pagina1 home CSS CSS staat voor Cascading Style Sheets. Ook de term "Style Sheets" wordt wel gebruikt. Het betekent allemaal hetzelfde in ieder geval. In deze cursus wordt verder de term CSS gebruikt. Ok, waarom zou je CSS nu gaan gebruiken? Nou, om een heleboel redenen. :) Ik zal hier de belangrijkste noemen:
6 van 14
23-2-10 20:47
HTML Cursus
file:///Macintosh%20HD/Users/--/Desktop/kompo...
Met CSS kun je in hoge mate de weergave van je pagina bepalen en kun je effecten bereiken die met HTML tags alleen niet mogelijk zijn. Zo kun je bijvoorbeeld bepalen dat alle
tags 18 Points groot moet zijn in de kleur rood en met het lettertype Arial. Het is dus veel flexibeler dan HTML wat de vormgeving betreft. De pagina's van je site worden kleiner doordat je veel minder code hoeft te gebruiken. Hierdoor zal je site sneller laden. Er bestaan 3 soorten style sheets Dit verwijzen naar de Style Sheets in een HTML pagina kan op drie manieren: 1 Inline Style Sheet 2 Internal (of "Embedded") Style Sheet 3 External Style Sheet 1 Een inline Style Sheet. In een inline Style Sheet worden de stijlelementen direct toegevoegd aan de HTML tag. Deze manier is niet erg handig, omdat je de stijlelementen bij iedere tag opnieuw moet intypen. 2. Een internal (of embedded) Style Sheet. Dit is de meest voorkomende Style Sheet. Bij de internal Style Sheet schrijf je de stijlinformatie tussen de en tags. Voorbeeld van een internal (embedded) Style Sheet: mijnwebsite <style type="text/css"> Hier komt de inhoud van je pagina. 3. Een external Style Sheet. Deze Style Sheet staat in een apart document met de extensie .css. Er wordt gelinkt naar dit .css document met de link tag, zie het voorbeeld hieronder. Voorbeeld van een external Style Sheet: mijnwebsite Hier komt de inhoud van je pagina.
7 van 14
23-2-10 20:47
HTML Cursus
file:///Macintosh%20HD/Users/--/Desktop/kompo...
Hier volgen 2 voorbeelden van internal (embedded) Style Sheets Voorbeeld 1 mijnwebsite <style type="text/css">
Welkom op MijnHomepage
Dit is de eerste paragraaf. Het lettertype is verdana en blauw.
Voorbeeld 2 mijnwebsite <style type="text/css">
Welkom op MijnHomepage
Dit is de eerste paragraaf. Zoals je ziet is de tekst
blauw en schuin gedrukt. Verder is de achtergrondkleur lichtblauw en het lettertype Verdana.
Metatags zijn van groot belang voor je homepage... Een meta-tag is een code die je aan je site meegeeft voor de zoekmachines. Het is informatie die je op het eerste gezicht niet op je site terugvind, maar die op de achtergrond zorgt voor een goede indexering bij de zoekmachines. Hieronder volgt een voorbeeld van metatags zoals je die vind in de HTML opmaak van je pagina.
Kleuren Hieronder zie je een overzicht van de kleuren die een naam hebben gekregen in HTML: de webkleuren plus daaronder de bijbehorende RGB-waarden en daar weer onder zie je hoe de kleur er uit ziet. Ze staan gerangschikt op alfabetische volgorde.
9 van 14
aliceblue #F0F8FF
antiquewhite #FAEBD7
aqua #00FFFF
aquamarine #7FFFD4
azure #F0FFFF
beige #F5F5DC
bisque #FFE4C4
black #000000
blanchedalmond #FFEBCD
blue #0000FF
blueviolet #8A2BE2
brown #A52A2A
23-2-10 20:47
HTML Cursus
file:///Macintosh%20HD/Users/--/Desktop/kompo...
burlywood #DEB887
cadetblue #5F9EA0
chartreuse #7FFF00
chocolate #D2691E
coral #FF7F50
c o r n fl flo ow e r b l u e #6495ED
cornsilk #FFF8DC
crimson #DC143C
cyan #00FFFF
darkblue #00008B
darkcyan #008B8B
darkgoldenrod #B8860B
darkgray #A9A9A9
darkgreen #006400
darkkhaki #BDB76B
darkmagenta #8B008B
darkolivegreen darkorange #556B2F #FF8C00
darkorchid #9932CC
darkred #8B0000
darkseagreen #8FBC8F
darkslateblue darkslategray #483D8B #2F4F4F
darkturquoise #00CED1
darkviolet #9400D3
deeppink #FF1493
deepskyblue #00BFFF
dimgray #696969
dodgerblue #1E90FF
fi firre b r i c k #B22222
fl flo or a l w h i t e #FFFAF0
forestgreen #228B22
fuchsia #FF00FF
gainsboro #DCDCDC
ghostwhite #F8F8FF
gold #FFD700
goldenrod #DAA520
gray #808080
green #008000
greenyellow #ADFF2F
honeydew #F0FFF0
10 van 14
darksalmon #E9967A
23-2-10 20:47
HTML Cursus
file:///Macintosh%20HD/Users/--/Desktop/kompo...
hotpink #FF69B4
indianred #CD5C5C
indigo #4B0082
ivory #FFFFF0
khaki #F0E68C
lavender #E6E6FA
lavenderblush #FFF0F5
lawngreen #7CFC00
lemonchiffon #FFFACD
lightblue #ADD8E6
lightcoral #F08080
lightcyan #E0FFFF
light lightgreen goldenrodyellow #90EE90 #FAFAD2
Tag
Attributen
Betekenis
Omsluit het gehele bereik van een webpagina
Kopdeel van de webpagina. Bevat o.a. informatie over het bestand en vaak stukken javascript
<TITLE>
Titel van de webpagina, die in de titelbalk van het browservenster word weergegeven. Word in het
Het belangrijkste deel van de webpagina. Bevat alle zichtbare elementen. BGCOLOR=
Achtergrondkleur
BACKGROUND=
Achtergrondafbeelding
TEXT=
Tekstkleur
LINK=
Linkkleur
VLINK=
Kleur voor bezochte links
ALINK=
Kleur voor actieve links
OPMAAKTAGS Om tekst op webpagina’s op te maken, dien je alle opmaakaanwijzingen in te stellen met behulp van tags: Tag
Attributen
boven
Betekenis Begint een nieuwe alinea
ALIGN=”left” / “center” / “right”
11 van 14
terug naar
Zorgt voor links uitgelijnde, gecentreerde of rechts uitgelijnde vloeiende tekst.
23-2-10 20:47
HTML Cursus
file:///Macintosh%20HD/Users/--/Desktop/kompo...
Handmatig regeleinde CLEAR=”all”
Begint pas onder het voorgaande element met de volgende regel.
