1 Gildebroeders/ gildezusters Graag willen wij enkele aspecten belichten voor het opzetten van een Website. De volgende aandachtspunten komen ter spra...
Gildebroeders/ gildezusters Graag willen wij enkele aspecten belichten voor het opzetten van een Website. De volgende aandachtspunten komen ter sprake: - Domeinnaam, moet u een domeinnaam claimen ja of nee. - Webhosting, gaat u webhosting doen of redirecten. - Emailboxen, hoeveel emailboxen wilt u en waarvoor. - Wat en vooral wie wilt u met uw site bereiken - Hoe kunt u een site bouwen en onderhouden - Welke informatie kan ik gebruiken, waar haal je de input vandaan.
Domeinnaam. Wat is een Domeinnaam. Een Domeinnaam is een pakkende de naam die u aan uw site wilt geven, met een toevoeging in de vorm van .nl of .ver of .org. Een voorbeeld zou kunnen zijn: hogeschuts.nl of willebrordus.nl. Deze sites kunnen vervolgens op het internet terug gevonden worden door in de commandoregel bijvoorbeeld: www.hogeschuts.nl in voeren.
Deze namen zijn vaak makkelijk te onthouden voor je eigen doelgroep. Omdat deze naam uniek moet zijn, moet hij geclaimd worden, zodat er geen twee dezelfde namen uitgegeven kunnen worden. Bij het claimen van een Domeinnaam wordt gekeken of uw gevraagde naam nog beschikbaar is. Is dit het geval, kunt u deze reserveren en in het geval deze niet meer vrij is moet u een andere naam gaan zoeken. Het claimen van Domeinnamen kost geld. U kunt een naam claimen voor een jaar en daarna eventueel verlengen. De kosten voor het registreren van de Domeinnaam is ongeveer F45,- per jaar. Voor het opzetten van een Website hoeft u geen domeinnaam te claimen, maar in het algemeen zijn deze namen wel gemakkelijker te onthouden voor uw doelgroep en andere belangstellende. Voor het claimen van een Domeinnaam kunt u bij verschillende bedrijven terecht, u kunt deze vinden via de bekende zoek machines of via www.startpagina.nl . Mij is bekend dat diverse andere gilden deze registratie hebben gedaan via www.argeweb.nl
Webhosting. Wat is webhosting. U zult begrijpen dat uw aangeboden informatie ergens op een webserver (computer bij een provider aangesloten op het internet) moet staan. -Als u kiest voor webhosting worden uw gegevens opgeslagen bij de bedrijven waar u, uw domeinnaam hebt geregistreerd. Hier kunt u kiezen uit verschillende pakketten, waarin het aantal emailadressen en de geboden webspace (ruimte op webserver) en de hoeveelheid op te vragen informatie (in Gigabits per maand) variëren. U zult begrijpen dat hier uiteraard ook de prijzen zullen variëren. De prijzen kunnen variëren van een paar honderd gulden tot duizenden guldens per jaar. Webhosting is uitaard niet verplicht, u kunt uw site natuurlijk bij een van de (gratis) providers onderbrengen als uw eigen homepages. Deze homepages zijn meestal beperkt tot 20 Mb, maar voldoen voor de meeste Gilden zeer zeker. -Kiest u niet voor webhosting, maar wel voor een domeinnaam, dan kiest u voor redirecting. Redirecting is niets anders dan een verwijzing van uw domeinnaam naar uw homepage van uw eigen (gratis) provider. U kunt uw link van uw eigen homepage door geven bij het claimen van uw domeinnaam. Deze link wordt ook wel U(niform) R(esource) L(ocator) genoemd.
Voorbeeld: Vult U in de commandoregel: http://www.willebrordus.nl in dan wordt u geredirect naar http://home.hetnet.nl/~gilde-st-willebrordus/index.html. Zelfs als u www.willebrordus.nl in toetst komt u op de gewenste site.
Emailboxen: Hoeveel emailboxen heeft u nodig? Dit hangt van uw wensen af. Meestal is een emailbox voldoende, voor het secretariaat bijvoorbeeld. Wenst u meerdere emailboxen kunt u vaak niet meer terecht bij een gratis provider, maar bij een klein abonnement van ongeveer F8.- tot F10.- per maand. Bij Webhosting krijgt u vaak ook meerdere emailboxen, die u zelf naam kunt geven. U kunt dan het secretariaat, de webmaster (degene die de site onderhoud) en de hoofdman een apart adres geven. Voorbeeld: - [email protected] - [email protected] - [email protected]
Het opzetten van een Website: Voor het maken van Website’s zijn diverse bedrijven actief. De kosten zijn ongeveer F100.- per half uur. Maar het maken van een site kunt u met een beetje oefenen ook gemakkelijk zelf. Er zijn diverse programma’s in de handel die het maken van een heuse Website tot bijna kinderspel, vereenvoudingen. Deze programma’s noemen we HTML-editors. Voorbeelden zijn: Frontpage, CoffeeCup, enz…….. Gebruikt u het OfficePakket met Word en Excel, dan kunt zien dat deze applicaties instaat zijn om bestanden op te slaan als *.htm(l)
U zult zien met een beetje oefening, gaat dit zeker lukken.
Foto’s, Film en geluid: Internet biedt de mogelijkheden om zowel tekst, als foto’s, als film en geluid te versturen. Het geen waar u rekening mee dient te houden is het volgende: -Foto’s op internet die u in uw browser wilt laten zien, moet aan geboden worden in *.jpg of *.gif formaat. -Films op internet die u in uw browser wilt laten zien, biedt u het best aan in *.mpeg formaat -Audio op internet die u in uw browser wilt laten horen, biedt u het best aan in *.mp3 formaat -Voor alle bestaanden geld: LET OP DE GROOTTE. Grote bestanden beslaan veel plaats op de Webserver en vergen veel tijd met binnenhalen. (niet iedereen heeft een kabel- of mx-stream aansluiting)
Voor de meeste foto’s, audio- of videofragmenten zal zeker een bewerkingsfase aan vooraf gaan voor u deze op het internet kunt zetten. Het bewerken van deze fragmenten gebeurt met foto- video- of audio editors.
Linken: U kunt ook verwijzingen naar andere pagina’s van uw site maken. U kunt zelfs verwijzingen naar pagina’s op andere Website’s maken. Het is ook mogelijk te verwijzen naar email-adressen. Hoe het een en ander gebeurt staat in het diktaat: HTML een pagina beschrijvingstaal.
Tip: -Begin klein (met een gratis provider of uw eigen provider) -Houd uw doelgroep voorogen -Maak uw bestanden niet te groot -Zorg voor een soort menu structuur, zodat de bezoeker niet elke keer terug moet naar het begin -Zorg voor een markering voor de laatste update, zodat de bezoeker kan zien of er iets veranderd is -Is een teller misschien iets voor u, u kunt dan zien hoeveel bezoekers u trekt. (sommige tellers houden complete statistieken bij, met informatie die u kunt gebruiken bij het updaten van uw site.
Html een pagina beschrijvingstaal Wat is HTML? HTML staat voor Hyper Text Markup Language. Het is de taal van het World Wide Web. Elk document op het Web is geschreven in HTML waarbij de opmaak, aan - klik - bare verwijzingen, afbeeldingen, multimedia – eigenschappen, formulieren en alle andere kenmerken van dat document eveneens in de vorm van HTML codes zijn toegevoegd. In eerste instantie lijkt HTML op een programmeertaal. Laat U echter niet afschrikken; Het is een eenvoudige taal die alleen de kenmerken van een document beschrijft. U zult zich de basisvaardigheden snel eigen maken. Later zullen we zien dat er verschillende hulpmiddelen op de markt zijn om het U nog makkelijker te maken. We zullen in dit korte diktaat de meest gebruikte elementen van HTML beschrijven en in concrete voorbeelden laten zien We gaan er van uit dat U een aantal hulpmiddelen tot U beschikking hebt. En wel dat U een computer met Windows 95 of beter heeft met daarbij een grafisch WWW browser programma bv. Netscape of Internet Explorer. Als eerste dient U op de Windows 95 desktop een snelkoppeling te maken naar het programma notepad. U doet dit als volgt: Klik met de rechter muis knop op een niet gebruikte plaats van uw desktop Er verschijnt een menu: kies daar de optie nieuw (new) Uit het volgende menu kiest U de optie snelkoppeling (shortcut) Klik met de linker muis knop op bladeren (browser) en zoek in de windows directorie naar het programma notepad.exe Klik op de naam en dan op openen Daarna op volgende (next) en dan op einde (finish) Dan heeft U nu een snelkoppeling naar het programma Notepad gemaakt zodat U dit Programma, indien nodig snel kunt starten. Op uw systeem is ook een WWW browser aanwezig (anders wordt het een probleem) We nemen aan dat reeds een snelkoppeling naar die browser op U desktop aanwezig is. Anders kunt U dat via de bovenstaande procedure zelf even doen (Let op: het browser programma bevindt zich naar alle waarschijnlijkheid niet in de directorie windows maar ergens anders. U kunt eventueel met de windows verkenner en zijn zoekmogelijkheid het programma opzoeken. Nu we starten de WWW-browser. Het is niet nodig om toegang tot internet te hebben. Voorlopig zullen we zoals we dat noemen LOKAAL bezig zijn. Klik na het opstarten rechtsboven op de knop met het liggend streepje De browser verdwijnt nu op een blok in de balk onder aan het scherm na. Start nu notepad op via de snelkoppeling die we zo-even hebben gemaakt. Maak ook dit programma klein. We zijn nu klaar om te beginnen.
Wat kunnen we wel en wat niet met HTML? Hyper Text Markup Language is de taal van het World Wide Web. Telkens wanneer u een Web-pagina opvraagt, ziet u een document dat in HTML is opgesteld. Alle opmaak in dit document is in de vorm van HTML-codes in de tekst geplaatst. De verwijzingen naar andere documenten of bestanden die je in een andere kleur ziet zijn ook via HTML codes in de tekst verwerkt. Kleuren, afbeeldingen en bewegende element zijn ook het gevolg van HTML codes.
Wat zijn de mogelijkheden? U kunt in HTML een document opmaken door middel van verschillende lettertype, koppen en kaders. U heeft de mogelijkheid om verwijzingen (hyperlinks) in het document te plaatsen. Hiermee verwijst U direct naar andere documenten, bestanden en computers op het internet (een klik op de verwijzing, brengt je daar dan ook naar toe) Met HTML kunt u lijsten maken en vormgeven U kunt tabellen opstellen en gebruik maken van gepreformatteerde tekst In een HTML document kunt u afbeeldingen plaatsen. Deze kunnen op hun beurt weer als verwijzingen functioneren. In een afbeelding kunt u meerdere aanklikbare plaatsen aangeven met verschillende verwijzingen ( bv. een kaart van nederland met daarop de digitale steden van Nederland: het aanklikken van bv Eindhoven stuurt U naar de digitale stad Eindhoven. Wordt in dezelfde afbeelding Amsterdam aangeklikt komen we in de digitale stad Amsterdam terecht etc.) U kunt interactieve mogelijkheden toevoegen aan een document zodat de gebruiker ook gegevens naar de schrijver van het document kan sturen ed.
De beperkingen: HTML is geen opmaak taal. Afhankelijk van het browser programma worden de pagina's steeds iets anders weergegeven (de ene computer heeft niet de beschikking over alle lettertype van de andere) er wordt dan een keuze gemaakt om een zo groot mogelijke overeenkomst te krijgen. Bovendien kunnen gebruikers de weergave van afbeeldingen uitzetten, omdat hun verbinding te traag is. Hierdoor is het uiterlijk van de pagina natuurlijk anders. Verder heeft niet elke computer de beschikking over uitgebreide grafische cq. multimediale mogelijkheden. (Ook met een domme tekst terminal kunnen we het WWW op!!) Het zal duidelijk zijn dat dit ook betekend dat degene die een WWW pagina gaat maken er rekening mee moet houden dat niet ieder een computer met pentium II 300 Mhz en 21 inch grafisch scherm en een 1 Mb directe lijn verbinding met het internet heeft.
Het eerste WWW document: Klik op het blokje in de startbalk van Notepad. Notepad is een eenvoudige tekstverwerker die zgn ASCII bestanden maakt. HTML bestanden zijn dergelijke ASCII bestanden. In deze ASCII bestanden hebben bepaalde ASCII karakters een speciale betekenis als ze tenminste op een bepaalde plaats voorkomen. Het verschil zit hem in de HTML codes ook wel labels genoemd. HTML labels zijn speciale markeringen in de tekst die ze onderscheiden van de rest van de tekst. U kunt ze dus gewoon in de tekst plaatsen. Als markeringen doen de tekens > en < dienst. In HTML labels zijn grote en kleine letters gelijk dus het label en Elk HTML document moet, ongeacht de inhoud, beginnen met het label . Dit label definieert het document als een HTML document. Het label wordt als volgt in een document geplaatst: Mijn eerste HTML document Een HTML document begint dus altijd met een label en eindigt met het eindlabel Nb. Veel HTML labels bestaan uit paren. Hierbij is het bijbehorend eindlabel bijna altijd van de vorm / gevolgd door de naam van het startlabel.
De labels en Alle HTML documenten zijn gesplitst in twee logische delen, aangeduid als kopdeel en tekstdeel. In het kopdeel staat algemene informatie over het document zoals naam, eventuele trefwoorden voor zoekprogramma's ed. In het tekstdeel staat onder andere de eigenlijke te vertonen tekst. Alle HTML documenten moeten een kopdeel (Head) en tekst deel (Body) hebben en als zodanig van labels voorzien zijn. Dus ons document moet worden: …Het kopdeel van mijn document Mijn eerste HTML document We zijn nog niet helemaal klaar. Elk document heeft ook een titel nodig. Deze titel wordt door de WWW browser boven in het scherm steeds getoond. Ook hiervoor is een HTML label. Dit wordt in het kopdeel van het document geplaatst. En wel als volgt: < TITLE> De titel van dit document .... Net Kopdeel van mijn document Mijn eerste HTML document We gaan nu eens kijken hoe het bovenstaande document er in een WWW browser uitziet. Type bovenstaande tekst m notepad in en bewaar het op de harde schijf in de directorie C: \T EMP met als naam: HTML1.html. Klik in notepad op het liggend streepje blokje rechts boven (minimaliseer venster) en klik in de startbalk op het blok van de WWW browser. We kiezen nu het menu bestand (file) en de optie open (Open file/ Open local) en type in het dialoogvenster in C:\Temp\HTML1.html in. De browser zal nu proberen uw document te laden en te tonen. Voila Uw eerste stappen op internet publicatie gebied.
Let op de elementen die we eerder beschreven hebben. · De titel van de pagina · De tekst in het tekstdeel · Waar is de informatie ... het kopdeel van mijn document? (Kijk is naar de diverse menuopties van uw WWW browser kunt U daar iets terugvinden?)
Koppen, lettertypen. stijlen en alinea's Met behulp van de koplabels kunnen we verschillende kopniveau's in uw document definiëren. Er zijn maximaal 6 niveaus mogelijk deze worden aangegeven met de labels tot
Een voorbeeld zou da kunnen zijn:
Dit is een niveau I kop
Je ziet ook hier weer het eindlabel! Door een hoger niveau nummer te kiezen wordt de kop kleiner. Koplabels zorgen automatisch voor een regeleinde!
We kunnen er voor zorgen dat de kop gecentreerd wordt in het venster waarin het document wordt getoond dit doen we door aan het koplabel een attribuut mee te geven. Een attribuut is een onderdeel van een label. Een voorbeeld: Dit is kopniveau een
Overigens indien U NETSCAPE gebruikt dan is het centreren iets anders uitgevoerd namelijk als zelfstandig label met eind label. Het wordt dan:
Dit is kopniveau een
Stijl en lettertype Meestal heeft U weinig invloed op het lettertype dat gebruikt wordt door de browser bij het tonen van uw pagina. Toch kunnen we dingen als vet en cursief wel beïnvloeden (meestal: monochrome beeldschermen kennen b.v. geen cursief) voor vet: <STRONG> met eindlabel voor cursief: EM> met eindlabel voor proportioneel schrift: met eindlabel In NETSCAPE zijn nog wat extra mogelijkheden aanwezig zoals het kiezen van het font van de letter. Het font van een letter is niet alleen de grootte van de letter maar ook kleur van de letter ed. (Op blz. 6 gaan we dieper op de kleur variant in) Voorbeeld: Zie hoe fonts kan veranderen in NETSCAPE. Let er overigens eens op als deze documenten worden getoond dat alles op een regel staat!!!!!!
Alinea's opmaken Omdat HTML documenten getoond moeten kunnen worden onder allerlei omstandigheden kunt u zelf niet aangeven waar een regel in de tekst eindigt. U kunt echter wel aangeven waar witregels in de tekst moeten komen te staan. Dus een nieuwe alinea moet beginnen. Dit gebeurd met het label
. Dit label moet aan het begin van elke alinea worden geplaatst. Tenzij dat daar reeds een ander label staat dat voor een regeleinde zorgt. Zoals een koplabel. Aan het einde van de alinea plaatst u weer het bijbehorende einde label.
Voorbeeld: <TITLE> Alinea s plaatsen
Hier staat wat tekst.
Hier begint een nieuwe alinea.
zorgt dus voor wit ruimte Wilt U een regel perse alleen afbreken dan moet U gebruik maken van het label (regel einde) We illustreren dit met het volgende document stuk (neem het op in bovenstaand document): Voor meer informatie, neem kontakt op met:
Piet Paaltjes Jan Steenstraat 123 5555 PP Tjieterkstradeel
Hier komt dan de rest van de tekst Let op: het einde label van
wordt hier niet gebruikt omdat het tegenkomen van
al aangeeft dat hier het einde van de vorige alinea is. Je mag dan dus
weg laten! Let op heeft geen einde label.
Tekst Kleur U kunt de kleur van de tekst in een HTML document wijzigen. Hierbij gebruiken we een techniek die gebaseerd is op drie kleuren namelijk rood, groen en blauw. Een tekstkleur wordt aangeduid als een combinatie van die drie kleuren waarbij voor elke kleur een getal tussen 0 en 255 wordt aangegeven. Zo is bijvoorbeeld de kleur zwart aan te geven met 0 0 0 en wit is het resultaat van alle drie de kleuren samen voluit dus: 255 255 255 . Alle overige kleuren verkrijg je door een juiste combinatie te kiezen. Berlijns blauw is bijvoorbeeld 65 105 225 Om de kleuren m HTML te plaatsen moet U die drie getallen omzetten naar een hexadecimaal getal (bijvoorbeeld door de windows calculator te starten, extended). Hierbij wordt elk getal in twee hexadecimale cijfers omgezet en in een label gestopt: Berlijns blauw wordt dan 65 = 41, 105 = 69 en 225 = El
dus: Dit label moet dan binnen het header deel worden geplaatst. Zo kunt U tekst in uw document van een afwijkende kleur voorzien. (Deze kleur instelling is dus voor de hele body!!!) De individuele kleur van een stuk tekst kan in Netscape worden veranderd door het gebruik van het fout label (zie stijl en lettertype) Het Inschatten welke kleur bij welke cijfer combinatie hoort is moeilijk. De pagina op het adres www.reednews.co.uk/colours.html kan je hier heel goed bij helpen. Deze pagina laat de naam van een kleur zien, in die kleur, met daarachter het bijbehorende hexadecimale getal. Heel handig. Je kunt deze pagina kopiëren naar je eigen harde schijf ( Haal de pagina op en sla hem dan op als HTML bestand!)
Het eindlabel geeft aan dat hier het anker afgelopen is en de tekst verder weer "normaal" moet zijn. Stel we hebben op onze computer twee documenten gemaakt in de directorie C: \TEMP namelijk HTML1.html en HTML2 html We gaan nu in HTML1.html een anker label plaatsen met een verwijzing naar HTML2.html zodat de gebruiker van document I naar 2 kan springen Dit zou er dus als volgt uitkunnen zien: Gemarkeerde tekst om op te klikken Verwerk deze regel en probeer of het een en ander werkt !!!!! tweede opdracht binnen het label was NAME hoe werkt dit: Plaatsen we in een document de opdracht: Het doel van de verwijzing Dan is die plaats waar dat label staat nu een mogelijk doel van een verwijzing. Deze verwijzing kan staan binnen het zelfde document maar ook buiten een document. Stel in HTML2.html hebben we bovenstaande regel als laatste regel in de tekst opgenomen. Dan is het nu mogelijk om in HTML1.html in plaats van de verwijzing naar alleen het document ook nog aan te geven dat de tekst vanaf het NAME label moet worden getoond namelijk door de verwijzing te veranderen in: Gemarkeerde tekst om op te klikken Als deze verwijzing wordt aan geklikt zal dus het document HTML2.html worden geladen en wordt er voor gezorgd dat de tekst vanaf het label Het doel van de verwijzing goed zichtbaar is. Dit is uiteraard heel makkelijk bij grotere documenten. Wil men binnen het zelfde document verwijzen naar een NAAM anker dan kan men dit doen door
Wat is een URL? URL staat voor uniform resource locator, ofwel een verwijzing naar informatie op het internet. Het geeft aan waar een bepaald soort informatie ergens op het internet aanwezig is. Deze URL kunnen we opnemen in onze HTML documenten. Overigens is het niet noodzakelijk een ander HTML document waar naar verwezen wordt. We zullen daar nog voorbeelden van zien. Een URL is samengesteld volgens een vastgestelde afspraak (standaard syntax) Deze syntax ziet er als volgt uit:
dienstnaam: / / internet - computer:poortnummer /bron
Zoals je ziet bestaat het URL uit drie delen: -
De dienstnaam, gevolgd door een dubbele punt en twee slashes. Die slashes zijn niet in alle gevallen vereist. De intenet-computer duidt op de plaats waar de gezochte bron gevonden kan worden. Soms is een poortnummer toegevoegd. Daarna weer een slash. De bron duidt meestal op een document of een bestand. Er zijn ook nog andere bronnen (diensten).
Let op!! Elke URL bevat de Zogenaamde slash. Dit is NIET dezelfde slash als gebruikt wordt bij pc’s (dat is de backslash!) om directories te onderscheiden.
Welke diensten kennen we ? De HTTP-URL Deze URL verwijst naar een HTML document op een webserver. Een voorbeeld: http://www.netscape.com/index.html De FTP-URL Deze URL geeft aan dat niet het http protocol (dienst) moet worden gebruikt maar het file transfer protocol. Een voorbeeld is: ftp://gatekeeper.dec.com/pub/ Het zal u opvallen dat hier geen bestandsnaam is opgegeven. Met het FTP protocol kan men zowel een bestand als een directory opgeven. Is het een directory dan zal (als u daar toe gerechtigd bent) de inhoud ervan getoond wonden. Is het een bestand dan kan de inhoud van het bestand getoond worden (als uw browser het bestandstype herkent) of er wordt gevraagd of het bestand opgeslagen moet worden op de lokale harde schijf waarna het wordt overgestuurd. De MAILTO-URL Deze URL verwijst naar een email -adres De meeste Web browsers ondersteunen dit type URL. Als u deze in een HTML document plaatst kunnen gebruikers door op de link te klikker een email sturen naar het adres aangegeven in de URL. Een voorbeeld: mailto:webmaster@www. uwbedrijf.com
De FILE-URL Deze URL verwijst naar een bestand op de lokale harde schijf Een voorbeeld: file://word 70/html/voorbld. htm U mist hier misschien de l achter aan htm. Waarom is dat? In DOS en Windows 3.x mag u slechts drie tekens in een extensie opnemen. Andere systemen zoals UNIX en WIN95 staan meer tekens toe. In dit voorbeeld verwijzen we naar een bestand op een pc met Windows 3.11 Let op dat U een file URL niet verward met een ftp-URL.
Andere URL's Er zijn nog andere soorten URL deze worden echter steeds minder gebruikt. Voor de gevorderde gebruiker van HTML documenten zijn voldoende boeken te krijgen daarover.
Webmaster is geboren in Heeswijk een kerkdorp van de gemeente Bernheze in Noordbrabant. En wel op 18 april 1961. Een maandag zoals zo velen.
<STRONG><EM>Hobbies: Programmeren in Delphi 3 Videofilmen Lezen Fotograferen Niet noodzakelijk in deze volgorde
Wilt U een boodschap sturen naar Webmaster ? Met de besproken HTML labels kunnen we al een heel acceptabele www pagina maken. Toch blijft het allemaal maar tekst. Een van de sterke punten van het World Wide Web is dat we ook grafisch informatie kunnen overbrengen via afbeeldingen. Daarnaast zou het ook handig zijn dat we opsom - lijsten zouden kunnen maken en tabellen. We zullen m de volgende lessen hierop ingaan.
Opsommingen In HTML zijn een aantal typen opsommingen gedefinieerd •Een opsomming met opsommingstekens (Ongeordende opsomming) •Een genummerde opsomming (geordende opsomming •Een woordenlijst Elk type heeft zijn eigen HTML label.
Een ongeordende opsomming. In een ongeordende opsomming is elk item voorzien van een zogenaamde bullet. Een voorbeeld staat boven deze paragraaf. Je moet twee labels gebruiken voor deze opsomming. Het label dat je moet gebruiken om aan te geven dat het een ongeordende opsomming is, is
elk item dient dan nog van het label
te worden voorzien uiteraard met het eindlabel
voor elk item en
voor de opsomming. Een voorbeeld
Eerste item met een bullet
Tweede Item met een bullet
Derde en laatste item met een bullet
Dit geeft dan als de pagina getoond wordt door een HT ML browser: Let op het inspringen is onderdeel van de opsomming!!!!
•Eerste item met een bullet •Tweede item met een bullet •Derde en laatste item met een bullet Het eindlabel is verplicht. Het einde itemlabel niet. We raden U echter aan de regels van HTML zo nauwkeurig mogelijk te volgen want de ene browser negeert de labels de andere eist dat ze er zijn. Door de labels wel te gebruiken werkt de pagina voor beide browsers. Wees voorzichtig met het gebruik van andere labels in uw opsomming. Zo wil het label nog al eens voor onvoorspelbare effecten leiden. U kunt behave het rondje als opsommingsteken een vierkantje of open cirkel kiezen. Dit gaat door middel van een attribuut aan het
label: Dit wordt dan: .... Of .... Of
.. voor het normale type U kunt hier volstaan met:
Let op dat het attribuut binnen de spitse haken wordt geplaatst.
Geordende opsommingen. In plaats van opsommingstekens kunt ook uw opsomming voorzien van nummers Hiervoor gebruikt U niet het label
maar en < /OL> De items moeten weer worden voorzien van de labels
en
. De nummering gebeurt verder automatisch. U hoeft dus niet zelf nummers aan te geven. De geordende opsomming heeft nog een attribuut mogelijkheid. U kunt de nummering instellen op Arabische cijfers (1, 2, etc.) kleine letters (a, b, etc.) Hoofdletters ( A, B, etc.), kleine Romeinse cijfers (i, ii, iii, iv, etc ) en Grote Romeinse cijfers ( 1, 11, 111, IV, etc.) De attributen zijn respectievelijk: 1 a A i I
Arabische cijfers (standaard instelling) Kleine letter Hoofdletters Kleine Romeinse cijfers Grote Romeinse cijfers
Een vooorbeeld: ........... Dit levert dus een automatische nummering met Grote Romeinse cijfers op. Let op dat de attribuut waarde tussen dubbele aanhalingstekens moet staan. Het is ook mogelijk om de start waarde van de nummering niet "1" te laten beginnen maar met een zelf gekozen waarde. Dit kan met een ander attribuut voor de geordende opsomming nl. het attribuut START bijvoorbeeld: ………… Zorgt voor een geordende opsomming die genummerd wordt met kleine Romeinse cijfers en begint met vii. Let er op dat de opgegeven startwaarde tussen dubbele aanhalingstekens moet staan en in Arabische cijfers moet worden opgegeven.
Woorden lijst maken Een woorden lijst is eigenlijk een ongeordende opsomming waarbij geen bullets worden geplaatst. Maar waar elk item een verklaring krijgt.
Een voorbeeld hoe dat er uit moet zien: item 1 Dit is het eerste item item 2 Dit is het tweede item item 3 Dit is het laatste item in deze woorden lijst. Een woorden lijst begint met het label
en eindigt met
Elk item bestaat uit twee delen die ieder een eigen label hebben. De definitie term (hierboven item I etc.) en de definitiegegevens (hierboven: Dit is het eerste item). Het label voor de definitie term is
met eindlabel
, voor de definitiegegeven is het label
en eindlabel
Om dus bovenstaande worden lijst te krijgen moeten we dus het volgende in de HTML source plaatsen:
item 1
Dit is het eerste item
item 2
Dit is het tweede item
item 3
dit is het laatste item in deze woorden lijst
Met het label na het begin label van een opsomming kunt U automatisch een titel laten maken. Met het attribuut compact geeft U de opsomming een kleiner lettertype.
Voorbeeld: < UL, COMPACT> De titel van deze opsomming
Eerste item in de opsomming
Laatste item in de opsomming
U kunt in HTML ook geneste opsommingen maken. Dat wil zeggen binnen een opsomming een item ook a s opsomming tonen. We illustreren dat met een voorbeeld.
Vruchten
Appels
Peren
Sinaasappelen
Wijnen
Dit geeft: 1. Vruchten • Appels • Peren • Sinassappelen 2. Wijnen Het zal duidelijk zijn dat het hier moeilijk wordt om al die labels nog in evenwicht te houden. Besteed daar aandacht aan anders gaat uw pagina er heel anders uitzien als U gedacht had. (Controleer uw pagina altijd met behulp van een browser, eigenlijk van meerdere verschillende browsers.)
Tabellen In HTML kunnen we tegenwoordig ook tabellen maken. Doordat HTML op verschillende browsers uw document op verschillende manieren presenteert, met verschillend lettertype ed. was dat voorheen moeilijk. Tegenwoordig bevat HTML een aantal labels die het mogelijk maken tabellen te maken. Een tabel is een niets anders dan informatie bestaande uit rijen en kolommen. Elke kruising tussen een rij en een kolom noemen we een cel. In een tabel kunnen we cijfers maar ook andere informatie weergeven. Om een tabel te maken in HTML gebruiken we het label
. Daarnaast zijn er nog drie andere labels nodig om een tabel te kunnen maken.
voor de tabel kop aan te geven.
voor het einde van een rij aan te geven
voor de gegevens van een cel aan te geven. Verder zijn er nog een aantal attributen die we kunnen gebruiken. We geven een eenvoudig voorbeeld van een tabel:
Rij 1, kolom 1
Rij 1, kolom 2
Rij 2, kolom 1
Rij2, kolom 2
< /TABLE>
Rij 1, kolom I Rij 2, kolom 2
We kunnen nu aan bovenstaand voorbeeld ook koppen toevoegen:
KOP kolom 1
KOP kolom I
KOP kolom 2
Rij 1, kolom I
Rij 1, kolom 1
Rij 2, kolom 2
Rij 1, kolom 2
Rij 2, kolom 1
Rij 2, kolom 2
<
Rij 1, kolom 2 Rij 2, kolom 2
KOP kolom 2 Ril 1, kolom 2 Rij 2, kolom 2
De tabel wordt automatisch van verschillende lettertypen voorzien, in de kop en in de cel. Door het attribuut ALIGN in de labels
en
te plaatsen kunt U het uitlijnen in de cel van de tekst regelen. Om gegevens bijvoorbeeld links uit te lijnen gebruikt u in de kop
etc. Denk er aan dat U voor de waarde van het attribuut de dubbele aanhalingstekens gebruikt net als bij de andere attributen. Er zijn nog andere attributen die U kunt gebruiken. Met deze kunt U de kolombreedte en rijhoogte instellen Het gaat om de attributen COLSPAN en ROWSPAN. Met
maakt U bijvoorbeeld een kop van driemaal de rijhoogte
levert een cel van twee kolommen breed op. Daarnaast kunt U ook nog kaders aangeven met het attribuut BORDER voor het label
ook kunt U de breedte van de tabel aangeven met het attribuut WIDTH voorbeeld:
geeft aan dat de tabelbreedte 50% moet zijn van de paginabreedte. Daarnaast kunnen we meteen colomspecificatie aangeven als attribuut.
Bijvoorbeeld
. Dit wil dan zeggen dat de tabel uit 3 kolommen bestaat met de eerste kolom 50 procent van de breedte van de tabel en links (L) uitgelijnd. De tweede kolom beslaat 25 procent van de tabel breedte en is gecentreerd. De rechtere (laatste) kolom is even breed als de middelste hierin worden numerieke gegevens getoond voorzien van een decimale punt. Met het label
kunt U ook nog een kop van de tabel definiëren. Net als
en
is dit label alleen binnen het label
geldig. We laten nu een gecompliceerde tabel zien. Typ het maar in en bekijk het resultaat. <TITLE>HTML Table tags
Html table tags
Tag
Attributes
What it means
TD ALIGH="LEFT">
none
Signifies this is a table
none
<
End of table row
none
<
Table caption
COLSPAN
Width in columns
ROWSPAN
Height in rows
ALIGN
Justification (left, right, center)
COLSPAN
Width in columns
ROWSPAN
Height in rows
ALIGN
<
Justificaton (left, right center)
In de professionele wereld wordt veelvuldig gebruik gemaakt van tabellen. Op allerlei spitsvondige manieren. Het bekijken van de source van dit soort pagina's is een heel goede manier om HTML goed te leren. (Bekijk de source van www.microsoft.com maar eens).
Afbeeldingen in HTML Het Word Wide Web heeft de laatste jaren een grote vlucht gemaakt. Dit eigenlijk dankzij de mogelijkheid om informatie ook grafisch te kunnen tonen in de vorm van foto s en andere afbeeldingen. We zullen hier laten zien hoe we afbeeldingen in HTML documenten kunnen plaatsen. - In-Line Afbeeldingen - Externe Afbeeldingen De eerste soort: In-Line afbeeldingen zijn afbeeldingen van een type die bij de browser bekend zijn De meeste browser kennen maar een klein aantal type afbeeldingen. De meest voorkomende zijn de volgende:
•Graphic InterChange Format kortweg GIF afbeeldingen •X-bitmap afbeeldingen (XBM) voor Unix machines met X-windows (zwart/ wit) •X-pixelmap afbeeldingen (XPM) ook voor X-windows • Joint Photographic Experts Group afbeeldingen (JPEG) Wordt de afbeelding door de browser niet ondersteund dan wordt het behandeld als een externe afbeelding en dat wil zeggen dat de afbeelding alleen bekeken kan worden met behulp van een helper applicaties oftewel een plug-in. (Een apart programma dat gekoppeld kan worden met de browser) We gebruiken voor een In-Line afbeelding een speciaal label. De syntax is als volgt: Het attribuut SRC is nodig voor In-Line afbeeldingen en verwijst naar de plaats van het bestand van de afbeelding. Er zijn daarnaast nog enkele attributen: •ALT dit definieert een tekst die getoond wordt als de afbeelding niet kan worden of tijdens het laden (van een grote pagina met veel afbeeldingen) • ALIGN hoe wordt de afbeelding op de pagina uitgelijnd. •HEIGHT en WIDTH bepalen het formaat van de afbeelding
We bekijken ze even wat uitgebreider: Het Alt attribuut. Veel gebruikers hebben niet de beschikking over een snelle lijn en schakelen hun browser zodanig dat hij geen afbeeldingen toont. Ook zijn er gebruikers die een browser hebben die alleen tekst kan vertonen. Met dit attribuut zorgen we ervoor dat op de plaats waar de afbeelding zou moeten staan een alternatieve tekst komt te staan vb. Indien de afbeelding ( uit het bestand mijnbedrijf.gif ) niet getoond kan worden dan wordt de tekst [bedrijfslogo] getoond (inclusief de haken). Het ALIGN attribuut Je hebt de keuze uit 5 mogelijkheden nl. middle, top, bottom, left, right. Top, middle, bottom zijn subtiele begrippen en afhankelijk van de plaats van het IMG label op de regel. Middle zal het midden van de afbeelding plaatsen tegenover het midden van de regel. Een weinig experimenteren is hier wel nodig. De attributen HEIGHT en WIDTH
Html pagina Gewoonlijk moet een browser de afbeelding eerst in zijn geheel inlezen voordat hij weet hoe groot hij is. Pas dan kan de browser de tekst rond de afbeelding plaatsen. Het een en ander kan behoorlijk worden versneld door de aangegeven attributen. U reserveert dan de benodigde ruimte voor de afbeelding. Zodat de tekst al ingedeeld kan worden en worden weergegeven voordat de afbeelding in zijn geheel is ingelezen De waarden van HEIGHT en WIDTH is in pixels.
Bijvoorbeeld: We kunnen een In-Line afbeelding ook als link definiëren zodat als op de afbeelding wordt geklikt dit als een link naar een andere pagina of pagina plaats fungeert. Dit gaat dan als volgt: Verkoopafdeling
Je ziet binnen de hyperlink definitie een volledig IMG label. Zodat nu geldt als U op de afmelding klikt er naar de pagina sales mijnbedrijf .com wordt gesprongen. Achtergronden. Veel HTML auteurs gebruiken een afbeelding als achtergrond voor hun pagina's. Dit oogt vaak erg fraai. De techniek is erg eenvoudig. U moet bij het body label het attribuut BACKGROUND gebruiken. Een voorbeeld: Indien nodig wordt het achtergrond plaatje meerdere keren aan elkaar geplakt om de hele pagina te vullen. We hebben nu de basis van HTML bekeken en de nodige voorbeelden gegeven. Vele mogelijkheden hebben we nog niet aangeduid. Een enthousiaste gebruiker zal echter op het internet of in boeken de nodige informatie kunnen vinden om die speciale situaties en mogelijkheden te gebruiken.
Tot zover. Ik hoop dat ik u een beeld heb kunnen schetsen van wat HTML is en wat HTML kan. In dit kleine diktaat heb ik geprobeerd een aanzet te geven tot het opzetten van een Site. Rest mij nog twee dingen: - Ten eerste: het eerste bestand (pagina) van uw homepage moet altijd index.htm(l) zijn. - Ten tweede: op uw pc zult u merken dat uw browser niet hoofdletter gevoelig is, maar op het internet is dit wel het geval. Dus benoem uw bestanden (geld ook voor plaatjes, audio, enz..) altijd met kleine letters of altijd met hoofd letters. Succes, Webmaster ‘Hoge Schuts’
Indien de afbeelding ( uit het bestand mijnbedrijf.gif ) niet getoond kan worden dan wordt de tekst [bedrijfslogo] getoond (inclusief de haken). Het ALIGN attribuut Je hebt de keuze uit 5 mogelijkheden nl. middle, top, bottom, left, right. Top, middle, bottom zijn subtiele begrippen en afhankelijk van de plaats van het IMG label op de regel. Middle zal het midden van de afbeelding plaatsen tegenover het midden van de regel. Een weinig experimenteren is hier wel nodig. De attributen HEIGHT en WIDTH
We kunnen een In-Line afbeelding ook als link definiëren zodat als op de afbeelding wordt geklikt dit als een link naar een andere pagina of pagina plaats fungeert. Dit gaat dan als volgt: