1 Als er iets niet duidelijk is kijk dan eens op: 1 Leerkracht: Gielen Jeroen2 Inleiding: Hoe zit het internet in elkaar? Client is in ons geval is d...
Als er iets niet duidelijk is kijk dan eens op: http://html.op-het.net/
1
Leerkracht: Gielen Jeroen
Naam cursist:
Inleiding:
Hoe zit het internet in elkaar?
Client is in ons geval is de trage PC hier op school of de trage PC bij jou thuis of De webserver is de snelle PC die de gegevens van de webpagina s bevat. Via het pad(URL) in je browser vraag je aan de server de gewenste website op(request).
De server stuurt dan de gegevens van de website weer(response).
Je browser geeft de gegevens(bron van de website) dan visueel weer.
2
Leerkracht: Gielen Jeroen
Naam cursist: Wanneer je deze cursus doorlopen hebt kan je heel eenvoudig een site in elkaar steken. Uiteraard is deze HTML kennis later nog uitbreidbaar. De belangrijkste uitbreidingen zijn: 1. Client-side scripts: HTML, CSS(cascading style sheets), Javascript, 2. Server-side scripts PHP(vroeger: Personal Home Page, nu: Hypertext Preprocessor) ASP(Active Server Pages) 3. database MySql Microsoft SQL
Voorbereidingen: Je kan op verschillende manier online nieuwtjes publiceren: Op http://groups.msn.com of http://wordpress.com/ kan dit zonder enige kennis van HTML Waarom dan HTML leren? Bij een MSN groepen of Wordpress zit je vast aan een bepaalde lay-out. Willen we origineler en professioneler uit de hoek komen is dit dus af te raden. Praktischer voor latere toepassingen. Om zowel de lay-out als de inhoud van een webpagina aan te passen is het noodzakelijk enige kennis van HTML te hebben. Maar hoe beginnen we daar dan aan? Als je een eigen website wilt ontwikkelen is het leuk deze ook ergens online te kunnen plaatsen. Dit kan bijvoorbeeld op: http://www.freewebs.com hier zijn echter ook beperkingen dit omdat je er niet voor betaald. Thuis heb je waarschijnlijk een abonnement bij Belgacom, Telenet, Fulladsl, Versatel, Deze geven ook allemaal een gratis webruimte Gemiddeld zo een 50mb. Volgend jaar als jullie op het universiteit of hogeschool terecht komen krijgen jullie allemaal ook een eigen webruimte. Zo een 20mb. Bovenstaande webservers zijn allemaal beperkt tot het gebruik van HTML en maken niet of gedeeltelijk interactie met de server. Indien gedeeltelijk, is er meestal de mogelijkheid om een gastenboek of forum te draaien. M.a.w. het werken met PHP of ASP op deze servers is onmogelijk, dit wordt gedaan omdat deze server-client zijn en dus de mogelijkheid kunnen bieden om een server plat 1 te leggen.
1
3
plat leggen : laten crashen, door een virus of spammen
Leerkracht: Gielen Jeroen
Naam cursist:
Pr ogr a m m a s dow n loa de n :
Er zijn verschillende programma s om een website aan te maken. In Microsoft Frontpage kom je helemaal niet in aanraking met de HTML code, dus als leek kan je daar makkelijk je weg in vinden. In Adobe Dreamweaver kan je zowel grafisch werken als met de HTML code. Echter beide programma s hebben een dure licentie voor aanschaf! Daarom houden wij het bij een tekstverwerker. In ons geval kladblok.
Extensies weergeven in WINDOWS XP: 1. Open Deze Computer. 2. Klik op Extra > Mapopties. 3. Ga naar het tabblad Weergave. 4. Haal het vinkje weg voor Extensies voor bekende bestandstypen verbergen. 5. Bevestig je keuze met OK.
Je site aanmaken:
De opbouw van een HTML-document vereiste een aantal standaard codes die niet mogen ontbreken in elk HTML-document. Elk HTML document bestaat uit 2 delen: de hoofding(HEAD) en de eigenlijke pagina(BODY).
<TITLE>Hier komt de titel van je pagina Hier komt de tekst van je pagina
Tag parameters voor losstaande tags: Hieronder geef ik je nu een tabelletje met een overzicht van de parameters en hun eigenschap. Uiteraard mag je parameters weglaten, dan neemt de browser gewoon de standaardinstellingen. Lijn opmaak Breedte in pixels Hoogte in pixels Vb:
Parameter WIDTH= 200 HEIGTH= 200
Afbeelding opmaak Parameter Lettertype FASE= Times New Roman Kleur COLOR= red infotekst ALT="picture of a pumpkin" positie ALIGN=LEFT Vb:
5
Leerkracht: Gielen Jeroen
Naam cursist: Container tags (Omvattende codes): codes: Vet Cursief Onderstreept Doorstreept
Tag parameters voor container tags: Hieronder geef ik je nu een tabelletje met een overzicht van de parameters en hun eigenschap. Uiteraard mag je parameters weglaten, dan neemt de browser gewoon de standaardinstellingen. Algemene opmaak parameter Breedte in pixels WIDTH= 200 Hoogte in pixels HEIGTH= 200 Tekst kleur link kleur LINK="#4466DD" Actieve link kleur ALINK="#AABBFF" Bezochte link kleur VLINK="#00BBAA" Achtergrond kleur BGCOLOR="FFFFFF" Achtergrond afbeelding BACKGROUND="achtergrond.gif" Vaste achtergrond backgroundproperties="fixed" Vb: Tekst opmaak Parameter Lettertype FASE= Times New Roman Kleur COLOR= red Vb: Link opmaak Parameter Nieuw venster TARGET= _BLANK Zelfde venster TARGET= _PARENT Links uitlijnen ALIGN= LEFT Centreren ALIGN= CENTER Rechts uitlijnen ALIGN= RIGHT Rand BORDER= 0 Doel frame TARGER= midden Vb: ga naar start (relatief pad) ga naar google
Naam cursist: Structuur: De eenvoudigste structuur die we best kunnen aanhouden bij het maken van een webpagina is de volgende:
In de hoofdmap komen al de .html of .htm bestanden in de submap images komen de beeld bestanden met extensie .jpg of .gif
Webpagina online zetten: Wanneer alle pagina's klaar zijn kan je je site eindelijk op het internet zetten. Controleer wel eerst nog eens offline of alle links en dergelijke kloppen zodat je dat straks niet moet veranderen. Je pagina s online zetten moet via FTP(File transfer Protocol) in InternetExplorer is er standaard FTP geïntegreerd. Hoe doe je dit dan? In de meeste gevallen verander je http:// door ftp:// en laat je de gebruikersnaam weg. Vb bij telenet: http://users.pandora.be/gebruikersnaam wordt ftp://users.telenet.be
Je kan ook gebruik maken een FTP-programma zoals Leech FTP, WS_FTP, cute ftp, De derde mogelijkheid is via een online file-upload systeem zoals op Freewebs.
7
Leerkracht: Gielen Jeroen
Naam cursist:
Kleurcode
Online zijn er een aantal gratis websites om kleurcode op te vragen. http://www.colorschemer.com/online.HTML
Adobe Photoshop geeft de mogelijkheid ook maar is niet gratis:
De kleurcode is hexadecimaal en ziet er als volgt uit: #xxxxxx De x-en stellen een letter of cijfer voor: XXxxxx : de 2 eerste cijfers achter # bepaald het rood xxXXxx : het 3e en 4e cijfer achter # bepaald het groen xxxxXX : de laatste 2 cijfers bepalen het blauw
Wanneer je bij één van deze cijfers 00 typt betekent dit dat er niets van die kleur wordt gebruikt. Bij het typen van ff betekent dit dat het maximum van die kleur moet worden gebruikt. 000000 staat voor zwart ffffff staat voor wit R G B 16x16=256 16x16=256 16x16=256 Aantal mogelijke kleuren is dus 256x256x256=16,7miljoen kleuren
