Web Tech

FASEN OPBOUW WEBSITE 1-Vraagstelling 2-Informatie verzamelen 3-Selecteren en structureren van relevante informatie 4-Uittekenen van een structuur voor je website a.d.v. een flowchart of storyboard 5-Ontwerpen van de verschillende webpagina’s 6-Webdesign omzetten naar HTML-pagina’s Oefening Maak op de HD een map aan met de naam “site_naam”, bv. site_inge (=rootmap) Maak in de rootmap een aantal mappen aan volgens de hoofdcategorieën van de site (zie flowchart). Maak in de rootmap een supplementaire map “beelden” hotelinformatie Deze link zal naar hotel.htm linken, die zich ook op de rootmap bevind via absolute adressering = volledige padbeschrijving bv. bv. te gebruiken om te verwijzen naar een externe webpagina of site via relatieve adressering = padbeschrijving vanaf de positie waarin je je bevindt in de directory-strutuur bv. bv. te gebruiken om te verwijzen naar een webpagina of beeld binnen de eigen site Verwijzing naar een bestand in de zelfde map: Verwijzing naar een bestand in een lagerliggende map (een submap van de map waarin je je bevindt): Verwijzing naar een bestand in een hogerliggende map: Per niveau dat er gestegen moet worden: ../ Atributen zijn specificaties of eigenschappen van een element. Ze worden na het element gespecifieerd, dus nog voor het afsluiten van de tag. bv.

....................

Een element kan meerdere attributen hebben, die bij het element kunnen toegevoegd worden d.m.v. een spatie. bv.

Commentaar regels toevoegen tussen de tekst en codes kan door gebruik van Blokelementen : 4 elementen om tekst in logische blokken te verdelen (=separtors) Regeleinde of break:
Horizontale lijn:

---

Paragraaf:

.....

Deel of division (laag):

.....

Inline-elementen : kunnen in een blokelement genest worden, en zijn enkel op een beperkt deel van de tekst van toepassing.

Tekstpresentatie-elementen: verzorgen enkel de presentatie van de tekst bv. ....., ......, <sub> ...... , <sup> ....



Logische tekstformatteringselementen: geven een betekenis van een tekst weer. bv. <strong> ......., <em> .......

Genummerde lijsten

1. Hoofdstuk 1
2. Hoofdstuk 2
3. Hoofdstuk 3

Ongenummerde lijsten

• Hoofdstuk 1
• Hoofdstuk 2
• Hoofdstuk 3

Definitielijsten of definition lists

Term 1

Definitie 1

Term 2

Definitie 2

Term 3

Definitie 3

Geneste lijsten

1. Hoofdstuk 1
   • De winter
   • De lente
   • De zomer
   • De herfst
2. Hoofdstuk 2
3. Hoofdstuk 3

Term 1 Definitie 1 Term 2 Definitie 2 Term 3 Definitie 3

1. Hoofdstuk 1 ° De winter ° De lente ° De zomer ° De herfst 2. Hoofdstuk 2 3. Hoofdstuk 3 table { border: 5px solid #871225;

Afbeelding plaatsen De alt betekend als je met je muis ervover zal gaan de zin log Arteve.... verschijnen Soorten koppelingen: Interne koppelingen: hoofdstuk1 Absolute koppelingen: vrt-nieuws Relatieve koppelingen menu’s Bij interne koppelingen wordt er een link gelegd naar een specifieke plaats binnen een webpagina. Die plaats moet eerst op voorhand een naam of id krijgen. Hoofdstuk1 Het id-attribuut geeft dus een naam aan het anker waarnaar er verwezen moet worden.

De link ziet er als volgt uit als je verwijst naar een anker op de zelfde pagina: hier vind je hoofdstuk 1 Indien je verwijst naar een anker op een andere pagina: hier vind je hoofdstuk 1

Pseudo-klasse selectoren link: stijl wanneer de link nog niet bezocht werd visited: stijl wanneer de link wel al bezocht werd hover: wanneer de gebruiker de muis over de hyperlink plaatst (rollover). active: stijl wanneer de link geactiveerd wordt a:link { color: red; text-decoration: none;} a:visited { color: white;} a:hover { color: #DDDDDD; background-color: #FF0000;} a:active { color: blue;} Een tabel moet men tussen de volgende tags zetten: Een tabel wordt opgebouwd in XHTML per rij, beginnend met de tag en eindigend met . In die rijen kan men dan kolommen definiëren: .

table td







{ border: 5px solid #871225; margin: 20px 30px 50px 20px; width: 200px; height: 150px; background-color: #CC6633; } { border: 2px dashed #004C63; padding: 10px; text-align: center; vertical-align: bottom; background-color: #FFFFFF; }

Client side en server side clickable maps: Client-side: gebieden en hyperlinks worden gedefinieerd in het XHTML-bestand. Server-side: gebieden en hyperlinks worden gedefinieerd in een apart tekstbestand, dat zich op de server bevindt. Frames cols=”20%,80%” cols=”20,50%,*” rows=” “

het scherm verdelen in kolommen: hier: 2 kolommen, de linker is 20% van de totale breedte, de rechter 80% 3 kolommen, de linker is 20 pixels breed, de middelste 50% van de totale breedte,en de rechterkolom is zo breed als de ruimte die dan nog over is het scherm verdelen in rijen. De werking is verder hetzelfde als cols

Target is een extra attribuut voor een hyperlink. Dit attribuut geeft aan in welk frame de pagina geladen moet worden als de respectievelijke link aangeklikt wordt. target=”framenaam“ de link wordt getoond in het frame met de naam “naam” Voorbeeld: Home

target=”_top” target=”_self” target=”_parent” vorige frameset target=”_blank” naam

de link wordt getoond op het hele scherm (alle frames worden verborgen) de link wordt getoond in het frame waar de link staat de link wordt getoond met frames van de link wordt getoond in een

nieuw venster zonder

Een inline frame is een venster binnen een gewone webpagina, waarin de inhoud getoond wordt van een andere webpagina

met volle rand van 5 pixels rond iframe	zonder rand rond iframe, maar 200 pixels breed op 200 pixels hoog
<iframe src=”vb1.htm” id=”fr1”name=”fr1”>	<iframe src=”vb1.htm” id=”fr2” name=”fr2“ frameborder=”no”>

“shared hosting” of gedeelde hosting, waarbij de server gedeeld wordt met andere klanten “dedicated hosting” of specifieke hosting, waarbij er over een aparte server beschikt wordt “housing”, waarbij de klant een fysieke ruimte toegewezen krijgt in het gebouw van de ISP waar zijn eigen server(s) geplaatst worden Voeg een extra aantal tags in de headsectie bedoeld voor browser en zoekmachines <meta id=”description” content=”cursus HTML is bedoeld voor eerstejaarsstudenten Grafische en Digitale Media van de Arteveldehogeschool” /> <meta id=”keywords” content=”cursus HTML, webdesign, Arteveldehogeschool, Grafische en digitale Media, opleiding GB, website ontwerp, website opbouw” /> <meta http-equiv=”content-type” content=”text/html; CHARSET=iso-8859-1” /> Zoekmachine optimalisatie of Search Engine Optimalisatie (SEO)