Magic Motion als startpagina    Toevoegen aan Favorieten    Vertel een bekende over deze site    Stuur een e-mail  

  

Home Gastenboek Top50 GSM Shop Screenmates Aanbiedingen E-Cards
 HTML-cursus CSS-cursus Geld verdienen Webpromotie WebTools Generators  JavaScripts

 


HTML  Les 1 - Opbouw cursus

 



Welkom bij de cursus websitebouwen.

Als je besluit echt de cursus te gaan volgen, dan raad ik je aan deze pagina aandachtig te lezen.

Hier kun je in een zeer snelle tijd leren hoe je een website kunt bouwen. Alle HTML (taal voor het bouwen van websites) die je nodig hebt voor een goede website kun je hier vinden. Je kunt het menu hier direct boven gebruiken om naar de onderwerpen te gaan die je wilt gebruiken, of je doorloopt de hele cursus en kunt onderaan de pagina doorklikken naar de volgende les. Maak er iets moois van.

De pagina's van deze cursus zijn opgebouwd volgens een bepaalde lay-out:

1) boven aan de pagina vind je het Lesnummer met het onderwerp
2) dan krijg je het keuzemenu. Hierin kun je snel navigeren tussen onderwerpen, als je dat wilt.
3) dan krijg je het onderwerpen-overzicht van de betreffende les (zichtbaar vanaf Les 4)
4) dan krijg je uitleg over een onderwerp. Deze bestaat meestal uit 3 onderdelen:
    - inleiding van het onderwerp
    - voorbeelden om het onderwerp nog duidelijker te maken 
    - eventueel zelf experimenteren op de knutselpagina.
5) na alle onderwerpen ga je door naar de volgende les.


De knutselpagina

Geheel nieuw bij Magic Motion is de knutselpagina. Daarin bied ik je de mogelijkheid om alles wat je leert direct toe te passen en daarmee te experimenteren. Ik heb 2 vormen beschikbaar:

1) Bij bijna alle lesonderdelen heb ik een knutselpagina gemaakt. Dat betekent dat de HTML-codes die je 
    nodig hebt, door mij zijn neergezet. Je kunt daar dan gelijk een website van laten maken. Maar om alles
    goed te leren, is het ook nodig om te experimenteren. Je kunt eea dus gewoon aanpassen en kijken wat
    er in een door jou gebouwde webpagina zou gebeuren.

2) Tevens is er een all-round knutselpagina. Hierin heb ik niets neergezet, maar kun jezelf alles wat je weet 
    of hebt geleerd toepassen en een webpagina laten genereren.

Hoe de knutselpagina werkt, merk je vanzelf. Tijdens de lessen kom je deze pagina tegen en maak er gerust gebruik van. Je kunt hem ook vinden onder de Workshops.


Hoe zelf een webpagina te maken.

HTML betekent HyperText Markup Language wat niet meer wil zeggen dan dat het de programmeertaal is om websites te bouwen.

De basis van een Internet-pagina, ook zoals je deze site bekijkt, wordt gevormd door zo'n HTML-bestand. Het is eigenlijk een tekstbestand die bestaat uit codes.

Er zijn diverse programma's om websites te maken. Dat wil zeggen: jij zet tekst en plaatjes e.d. neer en zij vertalen het naar HTML. In deze cursus maak ik hier geen gebruik van. Mocht je (ooit) besluiten wel zo'n programma te gebruiken is er niets aan de hand. De meeste programma's hebben de optie om het HTML-bestand te bewerken, zodat je de kennis die je hier hebt opgedaan gewoon kunt gebruiken. Echter zijn deze programma's zijn vaak wel duur in de aanschaf en de goedkope (maar ook sommige dure) genereren vaak veel te veel HTML-code.

Ik ga uit van een simpel tekstverwerkingsprogramma zoals, NotePad, Kladblok of SimpelText die vaak standaard bij de computer meegeleverd zijn. Gebruik dus geen Word for Windows. Dit kan opzich wel, maar is erg onhandig i.v.m. spellingscontrole, opslaan e.d. (
Raad ik echt af). Heb je niet het goede programma, dan kun je het hier downloaden.

Verder is het belangrijk hoe je Kladblok gebruikt. Als je straks een pagina op wilt slaan, doe je dat altijd met de extentie .html (Word heeft bv de extentie .doc). Dat betekent dat je de pagina kunt noemen zoals je wilt, maar hij eindigd altijd op .html


Hoe kun je je Kladblok-pagina opslaan als HTML-pagina:

1) Zet HTML-code die je wilt in de lege pagina
2) Kies in het menu voor Bestand en dan Opslaan als (in Engels: File en Save As)
3) Kies bij de optie Opslaan als type voor Alle Bestanden (In Engels: Save as Type)
4) Geef daarna je bestand een naam en voeg de extensie .html toe
5) Kies bij de optie Opslaan In voor een makkelijk plaats waar je je document terug weet te vinden
6) Klik daarna op Opslaan of Save en je bestandje is een HTML-pagina geworden.
7) Zoek het bestandje nu op en dubbelklik erop. Je echte webpagina wordt nu geopend.
8) Wil je de HTML weer aanpassen, rechtmuisklik op het bestandje en kies voor Bewerken (In Engels: Edit)
9) Mocht punt 8 niet lukken, kies dan voor Openen met en dan Kladblok (In Engels: Open With en Notepad) 

Het lijkt lastig, maar het is een kwestie van een paar keer doen en dan vergeet je het nooit meer.


Je kunt nu 2 dingen doen tijdens de cursus:

1) Knip en plak (of typ zelf) de HTML voor je website. Zet deze neer in een lege pagina van Kladblok en sla 
    het bestandje op als *.html Bij het sterretje kun je zelf de naam invullen die je aan je pagina wil geven.
   
LET OP: De eerste pagina van je website moet altijd index.html heten. De pagina's daarna kun je 
    noemen zoals je wilt. 

2) Je kunt, als je besluit ook met de knustelpagina te werken, daar je info vandaan halen. Je kunt dan eerst
    experimenteren of je pagina er leuk uitziet en daarna de codes knippen en plakken naar je Kladblok-
    bestandje. Je probeert elke keer iets, je neemt de codes over en langzaam gaat je webpagina groeien.
    Probeer het gewoon, het wijst zich vanzelf uit.


Kleuren in de cursus

HTML maakt gebruik van een 3-tal verschillende codes. Deze heb ik mijn cursus bijna altijd voorzien van een kleur.

1) Elementen: de belangrijkste codes van HTML. Deze zijn in de cursus paars. B.v.: <HTML>
2) Attributen + waarde: onderdelen van de Elementen. Deze zijn in de cursus groen. B.v.: Color="green"
3) Gewone tekst: Gewone tekst die je weer wilt geven blijft in de cursus zwart.
4) Alle HTML-codes worden altijd voorzien van een grijze achtergrond. B.v.: <FONT Color="blue">

Mocht ik iets op willen laten vallen, dan maak ik het rood. Als je naar bovenstaande items kijkt en we hebben het over de kleuren dan zou ik neer kunnen zetten: Color="green". Daarmee geef ik aan dat dat het een opletpunt is. Verder in de cursus zal ik dan weer gewoon de groene kleur gebruiken.


We gaan het proberen.

Open het programma wat je gekozen hebt om een website mee te maken. Je ziet dan een lege witte pagina verschijnen. Dit is de eerste stap van het maken van je webiste. 

Op de volgende pagina's gaan we bouwen en over 10 minuten kun je je eerste site zien. Dus zet de koffie of thee klaar en daar gaan we.





   Disclaimer | Marcel Lemans | Tell a friend | Adverteren | Awards | Partners | Update | Contact | Statistieken