Ik ga nu een paar opmaak-tags aan je voorstellen. Eerst de blockquote-tags (to quote = aanhalen). De blockquote-tags vergroten de linker en de rechter marge op de pagina.
Behalve den man, die de Sarphatistraat de mooiste plek van Europa vond heb ik nooit een wonderlijke kerel gekend dan den uitvreter. |
De defenition-list-tags, <dl> en </dl> (dl = defenition list = lijst met defenieties), vormen een ander paar opmaak-tags. Bij dit paar horen nog nog twee tags <dt> (dt = defenition title = het begrip dat gedefinieerd moet worden) en <dd> (dd = defenition data = defenitie van het begrip).
|
HTML beschikt ook over de mogelijkheid om lijsten te maken. Daarvoor hebben we de beschikking over de tags voor de geordende lijst, <ol> en </ol> (ol = ordered list = geordende lijst) en de tags voor de ongeordende lijst, <ul> en </ul> (ul = unordered list = ongeordende lijst). Bij beide lijsten hoort ook nog de list-tag <li>.
We maken eerst een geordende lijst.
Wat wil ik van Sinterklaas?
|
Bij de geordende lijst kun je er ook voor kiezen om met letters te werken. Je gebruikt dan de optie type="A" (hoofdletters), de optie type="a" (kleine letters) of de optie type="I" (Romeinse cijfers). Bijvoorbeeld:
Wat wil ik van Sinterklaas?
|
Het enige wat moet gebeuren om van een geordende lijst een ongeordende lijst te maken is het vervangen van de tags <ol> en </ol> door de tags <ul> en </ul>.
Wat wil ik van Sinterklaas?
|
Bij de ongeordende lijst kun je de stippen vervangen door vierkantjes met behulp van de optie type="square" of door cirkeltjes met de optie type="circle". Bijvoorbeeld:
Wat wil ik van Sinterklaas?
|
Een ander handig aardigheidje is de horizontale lijn. Je gebruikt daarvoor de tag <hr> (hr = horizontal rule = horizontale lijn).
De tag <hr> kent vier opties:
Het verschil tussen pixels en punten bij de width-optie:
|
Hierbij betekent width="20%" dat de lijn 20% van de breedte van het beeldscherm in beslag neemt en width="20" dat de lijn 20 pixels (beeldpuntjes) breed is.
Je zie dat de standaardoptie voor align centreren is. We gebruiken nu ook de andere twee mogelijkheden voor de optie align:
|
Je ziet dat geen optie align of align="center" hetzelfde resultaat oplevert.
We kunnen ook de optie size (de dikte van de lijn) aanpassen. De standaardwaarde voor deze optie is 1. Ook wordt bekeken wat de optie noshade oplevert.
|
We beginnen, zoals het hoort, bij het begin, namelijk met het zetten van een koptekst boven je pagina. Daarvoor gebruiken we de heading-tags <h1> tot en met <h6>.
Daarbij is 1 het grootst en 6, hoe kan het ook anders, het kleinst.
Dit is nou een koptekst.En dit is de tekst die de paragraaf verder moet vullen!Wat hier verder stast is dus inhoudelijk totaal niet van belang. Maar ja, een paragraaf zonder tekst is ook weer zo vreemd. |
Je ziet dat de koptekst dus automatisch vet wordt weergegeven. Ook komt na de eind tag automatisch een <BR>. Het bespaart je dus afzonderlijke tags voor de grootte, het vet weergeven en een nieuwe regel. Da's maar goed ook anders zou deze tag volkomen overbodig zijn.
De heading-tags kennen de optie align. Standaard is align = "left" (en die kun je dus weglaten). Verder kun je gebruiken align="center" en align="right".
Hieronder zie je een voorbeeld van de verschillende koppen met de mogelijke opties.
Dit is een schreeuwende kop!Dit is een grote kop!Dit is een normale kop!Dit is een bescheiden kop!Dit is een kleine kop!Is dit nog wel een kop? |
Als je een typefout maakt kun je natuurlijk de backspace-toets gebruiken en dan overnieuw typen maar je kunt ook aan de wereld laten zien dat je slecht typt en je fouten gewoon doorstrepen. Daarvoor gebruiken we de de strike-out-tag <S>.
Mijn spelling laat te |
Ik heb het al eens gehad over het verschil tussen Internet Explorer en Netscape. Hier volgen twee tags, waarbij de eerste alleen werkt voor mensen die Netscape gebruiken en de tweede werkt alleen met Internet Explorer.
Je kunt je lezers (met Netscape) op hun zenuwen werken door de <blink> tag te gebruiken. Daarmee kun je tekst laten knipperen. Persoonlijk zie ik er het nut niet zo van in maar het bestaat en daarom vertel ik het. Deze funktie werkt overigens alleen in Netscape. Mensen die met Internet Explorer werken zien gewoon een normale tekst.
Voor de Internet Explorer gebruikers Is er de mogelijkheid om een tekst als een soort lichtkrant over het scherm te laten schuiven.
Wil je er zeker van zijn dat je tekst in beide browsers de aandacht krijgt, dan zet je er gewoon beide tags omheen. Knippert ie niet, dan schuift ie!
2C8H18+ 25O2 --> 16CO2 + 18H2O |
Dit is zo'n beetje de duurste chemische reaktie uit het dagelijks leven, nl. de verbranding van benzine.
Het voorbeeld voor superscript hou ik iets korter.
E=mc2 |
... de beroemde formule van Albert Einstein.
Vervolgens geven we de map een naam:
Nu gaan we de vlakken definieren die we kunnen aanklikken. Voor de locatie van de vlakken gebruiken we coördinaten met als eenheid de welbekende pixel. Voor de plaatsen van diverse coördinaten kijken we even naar de afbeelding hiernaast.
Een korte uitleg is misschien wel op z'n plaats. Het plaatje is 500 pixels breed en 200 pixels hoog. Anders dan bij wiskunde staat de oorsprong (0,0) linksboven. De rechteronderhoek heeft dus als coördinaten (500,200).
Je kunt hier dus makkelijk uithalen welke coördinaten je de vier vlakken moet geven. Je hoeft alleen de coördinaten van de linkerbovenhoek en van de rechteronderhoek te geven. Die twee punten zijn genoeg om een rechthoek te tekenen.
Voor het definieren van polygonen geef je de coördinaten van alle punten op en voor circels geef je de coördinaten van het middelpunt en de straal in pixels op. We houden het hier even bij
rechthoeken, omdat je die het meest zult gebruiken.
We zullen bovenstaand verhaal eens omzetten in htmll code. We doen het stap voor stap....
Eerst definieren we een vlak.
'rect' = rectangle = rechthoek
Voor een cirkel gebruik je de optie circle en voor de polygoon (veelhoek) gebruik je poly.
De volgende code bevat de coördinaten van de rechthoek linksboven.
Je hebt nu dus twee punten opgegeven, te weten (0,0) en (250,100). Je kunt je coördinaten gewoon achter elkaar typen. De browser weet zelf dan wel dat het achereenvolgens om de x- en de y-coördinaten van de linkerbovenhoek en de x- en de y-coördinaten van de rechteronderhoek gaat.
De laatste optie die we moeten specificeren is het document waar het vlak naar toe moet verwijzen, de link dus.
Nu kun je op dezelfde manier de overige drie vlakken definieren...
We hebben nu een image en we hebben een map maar dat betekent nog niet dat je een imagemap hebt. We zijn dus duidelijk nog niet klaar met ons verhaal.We moeten nog even opgeven dat het plaatje map.gif de map keuze moet gebruiken die we net gemaakt hebben.
De volledige code voor de imagemap is dus:
Als je wilt kun je voor de volledigheid nog even het blauwe kader weghalen en je imagemap centeren...
Dat was het, je hebt nu een imagemap gemaakt.
Als je je lezers vooraf duidelijk wilt maken dat het plaatje dat er aankomt een imagemap is kun je in de <img>-tag de optie alt="xxxxxxx" gebruiken.
Je kunt deze optie trouwens altijd gebruiken om commentaar bij je plaatjes te zetten. Als de lezer dan met zijn muis over het plaatje gaat, kan hij dat commentaar lezen. Hij ziet het maar een paar seconden, dus citeer niet het hele boek als je alleen de omslag afbeeldt.
Als je met de muis over een imagemap met commentaar gaat zie je het commentaar niet als je met de muis op een link staat. In het voorbeeld dat we net gemaakt hebben, hebben we het hele plaatje klikbaar gemaakt. Je zult dus alleen commmentaar kunnen lezen als het plaatje nog niet
geladen is.
De laatste tag die we gaan bespreken geeft de mogelijkheid om commentaar in je pagina op te nemen. Hiermee kun je opmerkingen in je tekst plaatsen die niet op het scherm van de browser verschijnen.
Een opmerking kan overal in het document geplaatst worden en de browser negeert alles wat tussen de haken staat. Je kunt verborgen boodschappen in je document zetten, geheugensteuntjes aan jezelf, of boodschappen aan degene die de broncode van je homepage bekijkt. |
Om het nog even helemaal duidelijk te maken, de opmerking begint met <!-- en eindigt met -->
Je kunt zelfs andere HTML-tags tussen de haken zetten en ze worden genegeerd. De browser blijft alles negeren tot hij een --> tegenkomt.
Ik heb in het begin mijn mening over HTML-editors gegeven. Volgens mij zijn de beste editors niet die grote flitsend uitziende editors (je weet wel, programma's die beloven dat je een homepage kunt maken zonder dat je ook maar iets van HTML af hoeft te weten). Het probleem is dat homepages die gemaakt zijn met zo'n programma er ook uit zien alsof de maker niets van HTML afweet.
Meer ervaren homepage makers gebruiken een op tekst gebaseerde editor. Welke editor je wilt gebruiken, is een kwestie van persoonlijke smaak. Bij het bewerken van deze cursus heb ik gebruik gemaakt van EditPlus. Het voordeel van zo'n editor is dat de tags in een andere kleur worden weergegeven, dat je tags met een druk op de knop in kunt voeren, enzovoort.
Er zijn een aantal goede freeware editors (freeware betekent gratis, helemaal voor niks!). Een site waar je deze zeker kunt vinden is www.tucows.com.
Zo'n editor doet het werk niet voor je. Je moet nog steeds iets van HTML afweten. De editor maakt het werk wel makkelijker.
Als je je homepage klaar hebt moet je al je bestanden naar een webserver uploaden. Een server is een computer die de documenten aanbiedt aan wie ze maar zien wil. Vraag aan je eigen provider hoe het uploaden in z'n werk gaat. Het enige wat ik je daarover kan vertellen is dat je een FTP-programma nodig hebt om je bestanden te kopiëren van je eigen PC naar de computer van je provider. Zo'n FTP-programma is ook te vinden op www.tucows.com.
We zijn nu al een heel eind op weg om een goed uitziende homepage te maken. We hebben tekst en fonts gemanipuleerd, afbeeldingen ingevoegd en hyperlinks gemaakt. Wat de basisvaardigheden betreft is er eigenlijk niet veel meer te vertellen.
Laten we beginnen met even stil te staan bij schermresoluties. Ik gebruik, zoals de meeste mensen, een schermresolutie van 1024x768 pixels. Sommige mensen gebruiken 800x600 en anderen 1280x1024. Er zullen ook nog wel andere resoluties gebruikt worden. Wat heeft dit met ons onderwerp te maken? Het heeft alles te maken met hoe je homepage eruit zal zien op de verschillende beeldschermen. Hieronder staan en paar screen shots van een willekeurige homepage bij verschillende resoluties.
Als je erover denkt om een webpagina te gaan publiceren, is het geen slecht idee om je documenten bij verschillende resoluties te bekijken. Je zorgvuldig ontworpen design kan volledig teniet gedaan worden bij andere resoluties.
Type |
Kenmerken |
.GIF | het Graphics Interchange Format is een compressie-standaard voor afbeeldingen die onder andere gebaseerd is op grote vlakken met dezelfde kleur en maximaal 256 kleuren. Dit type is dus zeer geschikt voor afbeeldingen met grote vlakken en weinig kleuren, zoals logo's. |
.JPEG | de Joint Photographic Experts Group heeft een compressie-standaard ontwikkeld voor foto's. Dit type is dus uitstekend te gebruiken voor afbeeldingen zonder regelmatige vlakken en met veel kleuren (standaard 16,7 miljoen). In tegenstelling tot het GIF-type is dit een compressiemethode waarbij informatie verloren gaat. Bij foto's is dit nauwelijks te zien, bij afbeeldingen met vlakken is dit echter vooral bij de randen juist zeer goed te zien, zeker bij een hoge compressie (die compressie-verhouding is in te stellen). |
Een kleur is opgebouwd uit een hoeveelheid rood, geel (of groen) en blauw. Een kleur kan daarom beschreven worden met een rgb-waarde. Deze r-, g- en b-waarde kunnen waarden hebben van 0 tot en met 255 (dus 256 mogelijkheden). Hiermee kan je dus 16,7 miljoen (256 x 256 x 256 = 16.777.216) kleuren maken.
Als je een 256-kleuren scherm hebt, dan neemt de computer de dichtsbijzijnde kleur en zet er een paar puntjes van een andere kleur doorheen zodat de kleur op het scherm lijkt op de oorspronkelijke kleur. Dit proces, dat we dithering noemen, ziet er echter niet zo mooi uit.
Als Windows ingesteld staat op 256 kleuren, dan neemt Windows daar een paar kleuren van in beslag om de windows-schermpjes in te kleuren waardoor er nog maar 216 kleuren vrij zijn. Dit zijn dus de kleuren die
solide (dat wil zeggen, zonder dithering) weergegeven worden. Dit zijn de kleuren die met behulp van bovengenoemde r-, g- en b-waarden zijn opgebouwd.
Voor elke r-, g- en b-waarde heb je dus zes verschillende mogelijkheden. Op deze manier kan je dus 6 x 6 x 6 = 216 verschillende kleuren maken!
Na deze cursus 'HTML voor beginners' gaan we verder met de cursus 'toveren met TABELLEN'.
Verder wil ik je wijzen op het tag-overzicht. Dit is een overzicht van alle tags die je in deze cursussen tegenkomt met een link naar de pagina waarin er iets over deze tags verteld wordt.