Internet_html.doc 1/6

Transcriptie

1 Internet_html.doc 1/6 Internet html. HTML syntax en regels Een HTML-element is opgebouwd uit een startmarkering en een eindemarkering (behalve enkele speciale markeringen zoals bvb. <meta>, <br>, <hr>). Een markering (Engels : tag) staat steeds tussen een < en een > teken (bvb. <html>). De eindemarkering bestaat uit een < teken, een / teken, de startmarkering tekst en een > teken (bvb. </html>). Tussen de startmarkering en de eindemarkering wordt de HTML-element tekst geplaatst. De startmarkering kan attributen en attribuutwaarden bevatten die bijkomende instellingen van het HTML-element aangeven (bvb.<body bgcolor="#ddddff">). Commentaar in een webpagina staat tussen de startmarkering . De commentaar tekst mag meerdere lijnen bevatten. Verplichte markeringen <html> : dit element geeft het begin en het einde van de webpagina aan. <head> : dit hoofding element kan een aantal andere HTML-elementen bevatten zoals bvb. link, meta, script, style en title. <title> : de tekst tussen de titlemarkeringen wordt in de titelbalk van de browser getoond. <meta> : deze HTML-elementen worden door de zoekmachines gebruikt om hun zoeklijsten op te bouwen. Deze elementen zijn niet strikt verplicht maar zorgen er wel voor dat jouw webpagina gemakkelijk kan teruggevonden worden op het internet. <body> : tussen de bodymarkeringen komt de inhoud van de webpagina (tekstparagrafen, opsommingen, lijnen, afbeeldingen, foto's, enz ). Specifieke markeringen Tekst Een nieuwe lijn wordt aangegeven met de markering <br> (line break) <b> (bold) : tekst wordt in 't vet getoond; <i> (italic) : tekst wordt in cursief getoond;

2 Internet_html.doc 2/6 <u> (underline) : tekst wordt onderstreept getoond; <font> : tekstformatering zoals tekstkleur, grootte (van 1 tot 7) en specifieke stijlinformatie. Blok <p> (paragraph) : alinea die links, in het midden of rechts kan uitgelijnd worden; <div> (division) : sectie met speciale instellingen. Met het class attribuut kan je de sectie een naam geven en deze naam in een stylesheet (opmaak webpagina) gebruiken; <h1>..<h6> (heading) : 6 hoofding aanduidingen met specifieke opmaak; Lijn <ol> (ordered list) of <ul> (unordered list) : lijsten met volgnummers (ol) of bolletjes (ul).<li> geeft de items van de lijst aan. <hr> (horizontal rule) : horizontale lijn waarvan de dikte, breedte, positie en kleur kan worden ingesteld. Tabel <table> : tabel met veel attributen (zie hieronder) die het uitzicht bepalen; <thead> (table header) : tabel hoofding. Specifieke opmaak voor de hoofding van de tabel kan hier op toegepast worden; <tfoot> (table footer) : tabel voettekst groeperingelement. Ook hier kan specifieke opmaak toegepast worden; <tbody> (table body) : tabel rij groeperingelement;

3 Internet_html.doc 3/6 <tr> (table row) : tabel rij. De cellen van een rij worden aangeduid door de <th> of <td> markeringen; <th> (table header) : tabel hoofding cel. Deze markering is steeds een onderdeel van een rij; <td> (table data) : tabel data cel. Ook deze markering is steeds een onderdeel van een rij. Formulier <form> : formulier markering. De attributen bepalen hoe het formulier verwerkt wordt (zie hieronder); <input> : formulier veld. Dit veld kan het uitzicht hebben van een invulveld, een keuzevak, een selectierondje of een knop; <textarea> : tekstveld. De attributen rows en cols bepalen hoeveel rijen en kolommen er zichtbaar zijn. Er worden schuifbalken getoond als de tekst niet meer in het veld past; <select> : keuzelijst. De keuzes worden achter de markering <option> geplaatst. Link <a> (anchor) : hyperlink anker. Er kan verwezen worden naar een andere pagina op het internet of naar een plaats op de actieve pagina (interne link); <link> : verwijzing naar een andere webpagina (bvb. een stylesheet koppeling). Afbeelding <img> (image) : afbeelding. De attributen bepalen de rand, grootte en positie van de afbeelding. Het align attribuut bepaalt ook de positie van de tekst naast de afbeelding. De afbeelding kan ook in een anker element geplaatst worden. De gebruiker kan dan op de afbeelding klikken om de hyperlink (koppeling) te volgen.

4 Internet_html.doc 4/6 Specifieke attributen en attribuutwaarden Tekst en lijn size : Dit attribuut bepaalt de grootte van letters, de dikte van lijnen, de lengte van invulvelden of keuzelijsten. De visuele weergave wordt beïnvloed door dit attribuut. Markeringen waarbij je dit attribuut kunt gebruiken zijn : <font>, <hr>, <input>. Kleur bgcolor : Met dit attribuut kan je de achtergrond kleur instellen. Je kan de Engelstalige naam van een kleur gebruiken (bvb. red, green, blue, yellow) maar sommige oudere browsers kunnen deze namen niet herkennen. Je gebruikt best de hexadecimale notatie in het #RRGGBB formaat (RR = rood,gg = groen,bb = blauw). In dit formaat kan je voor elk van de drie kleuren een hexadecimaal getal van 00 tot FF opgeven (rood = #FF0000, groen = #00FF00, blauw = #0000FF). Op het internet vind je overzichttabellen en programma's om dit kleurformaat samen te stellen. Je kan dit attribuut gebruiken bij de markeringen : <body>, <table>, <thead>, <tfoot>, <tbody>, <tr>, <th>, <td>; color : met dit attribuut kan je de kleur van letters en lijnen instellen. Ook hier specifiëer je best de kleur in de #RRGGBB notatie. Dit attribuut kan gebruikt worden bij de volgende markeringen : <font>, <hr>; bordercolor : met dit attribuut kan je de kleur van randen instellen (best in het #RRGGBB formaat). Markeringen waar dit attribuut kan in voorkomen zijn : <table>, <tr>, <th>, <td>. Positie en grootte align : met dit attribuut kan je een tekst in de horizontale en verticale richting uitlijnen. Left, center en right attribuutwaarden dienen om een paragraaf (<p>), een sectie (<div>), een hoofding (<h1>..<h6>), een lijn (<hr>), een tabelonderdeel (<table>,<thead>,<tfoot>,<tbody>,<tr>,<th>,<td>) en een afbeelding (<img>) horizontaal uit te lijnen. Tekst naast een afbeelding (<img>) kan ook vertikaal uitgelijnd worden met de attribuutwaarden top, middle en bottom. Tekst in cellen van een tabel (<thead>, <tfoot>, <tbody>, <tr>, <th>, <td>) kan met het attribuut valign vertikaal uitgelijnd worden met de attribuutwaarden baseline, bottom, middle (center in IE) en top; width : Met dit attribuut kan je de breedte van een lijn (<hr>), van een tabel (<table>), van een tabelcel (<th>,<td>) of afbeelding (<img>) aanduiden. De attribuutwaarde kan opgegeven worden in aantal pixels of in een percentage van de breedte van het scherm of van de tabel; height : De hoogte van een tabel (<table>), een tabelcel (<th>, <td>) of een afbeelding (<img>) kan met dit attribuut opgegeven worden in pixels. Tabel border : Met dit attribuut geef je de dikte van de tabelrand aan in pixels. Als je de attribuutwaarde 0 ingeeft, wordt er geen rand getoond; cellpadding : Dit attribuut bepaalt de marge tussen de celinhoud en de celrand en wordt uitgedrukt in pixels;

5 Internet_html.doc 5/6 cellspacing : De waarde van dit attribuut in pixels bepaalt de breedte van de celrand; colspan : Met dit attribuut kan je een tabelcel (<th>, <td>) creëren die meer dan 1 kolom overlapt. De attribuutwaarde geeft het aantal overlappende kolommen weer; rowspan : Met dit attribuut kan je een tabelcel (<th>, <td>) creëren die meer dan 1 rij overlapt. De attribuutwaarde geeft het aantal overlappende rijen weer. Formulier action : Met dit attribuut verwijs je naar het programma dat het invulformulier gaat verwerken. Dit programma is aanwezig op de webserver en moet bereikbaar zijn; method : Hier heb je de keuze uit de attribuutwaarde GET of POST. Met de waarde GET worden de ingevulde waarden aan de URL toegevoegd. Met de waarde POST wordt een HTTP POST transactie gebruikt. De meest gebruikte methode is POST omdat dan de ingevulde waarden niet zichtbaar zijn voor de gebruiker; name : Door een naam aan een formulieronderdeel (<input>, <select>, <textarea>) toe te kennen, kan het programma dat voor de verwerking van het formulier zorgt op een eenvoudige manier de inhoud van de formuliervelden ophalen; type : Hiermee geef je het type van het formulieronderdeel (<input>) op. Mogelijke waarden zijn : text, password, checkbox, radio, reset, submit, hidden (niet zichtbare waarden die mee doorgegeven worden); value : Bij invulvelden (van het type text of password) wordt de inhoud van de attribuutwaarde reeds ingevuld in het invulvak. Bij keuzevakjes of selectierondjes wordt hiermee de waarde aangegeven die zal doorgegeven worden als het vakje of rondje is aangeklikt. Bij knoppen geef je hiermee de tekst aan die op de knop zal verschijnen; rows : Met deze waarde geef je het aantal tekstregels in een <textarea> element aan; cols : Met deze waarde geef je het aantal karakters per rij in een textarea element aan. Link href : met dit verplichte attribuut duid je de locatie aan van het document waarnaar verwezen wordt. Dit kan een URL zijn van een document (een webpagina, een bestand, een afbeelding) of een URL van een andere internet dienst (file, ftp, mailto). Met het # teken wordt verwezen naar een locatie binnen een webpagina; target : Met dit attribuut geef je het doelvenster aan waarin de webpagina moet worden getoond. Dit kan een frame zijn of een browservenster. Met de speciale waarden _blank of _new geef je aan dat een nieuw venster moet gebruikt worden. Met de speciale waarde _top geef je aan dat het volledige browservenster moet worden gebruikt voor de weergave.

6 Internet_html.doc 6/6 Afbeelding src : Hiermee geef je de locatie (URL) van de afbeelding aan; border : Bij een afbeelding (<img>) wordt een rand rond de afbeelding getoond met de opgegeven dikte in pixels. In combinatie met een hyperlink wordt de rand rond een afbeelding in de kleur van de hyperlink akties (bezochte of niet bezochte link) weergegeven; alt : Hiermee geef je een alternatieve tekst aan die moet getoond worden als de afbeelding niet kan opgehaald (of getoond) worden. Structuur van een website Map indeling : probeer maximum 3 niveau's te gebruiken; Pagina indeling: o hou rekening met een variabele breedte; o tracht de afbeelding breedte kleiner dan 600 pixels te houden; o probeer de lengte te beperken tot 4 à 5 pagina's (scrolls). Afbeeldingen: o gebruik gecomprimeerde bestanden (*.jpg of *.gif); o probeer de opslagcapaciteit van een afbeelding te beperken tot maximaal 50 Kb. Bestanden uploaden met een FTP programma Je kunt een FTP programma gratis downloaden van het internet (bvb. FileZilla: Het programma voorziet in een venster voor de lokale bestanden op de harde schijf van je computer en een venster voor de bestanden op de webserver computer van je internet provider. Jouw internet provider geeft je toegang via de internet dienst ftp. Je krijgt een gebruikersnaam en paswoord waarmee je toegang krijgt tot de map op de webserver. Met het FTP programma maak je een verbinding met de webserver. Als je ingelogd bent op de webserver, kan je bestanden gaan kopiëren met het programma door ze eenvoudig te slepen van het lokale venster naar het venster van de webserver. Het programma zorgt voor de juiste manier van doorsturen (binair of ASCII-tekst). Als je al jouw bestanden hebt gekopieerd, sluit je de verbinding naar de webserver af. De internet provider vraagt dat de startpagina van jouw website een van de volgende namen heeft : index.htm, index.html, index.php,... De startpagina moet in de hoofdmap op de webserver geplaatst worden.