Zelfstudie HTML 1 en onderwerp groepswerk

 

A. Leerstof

Vandaag leer je hoe een basis HTML-pagina te schrijven en de absolute basis van HTML.


B. Evaluatie

- vul het gegeven overzichtsdocument in: vijf punten waard

- de eindopdracht offline laten zien: drie punten waard

- de eindopdracht online laten zien: vijf punten waard

- de eindopdracht pas volgende les online laten zien: twee punten waard


C. Leermiddelen

Je krijgt een kopie waarop je moet noteren wat iedere code doet.

Extra bronnen van kennis voor als je zou vastzitten met een oefening:

1. http://www.htmlcodetutorial.com/_MARQUEE.html over de tags <marquee></marquee>

2. Hier nog een handleiding in het Nederlands over dezelfde tags: http://www.handleidinghtml.nl/html/lichtkranten/lichtkranten04.html

3. Uitleg over <br> vind je op http://www.handleidinghtml.nl/html/elementen/br.html

4. Een beginnerscursus voor Senioren (ideaal voor jullie dus) over HTML: http://www.seniorennet.be/Pages/Thuis_op_internet/cursus_website/3.0.php Dat kan niet moeilijk zijn. ;-)



D. Verover gratis webruimte

Wat is het internet eigenlijk? In de wereld zijn er een aantal computers permanent online en met andere computers verbonden. Zulke computers noemen we servers en zij zijn de eigendom van hosting maatschappijen. Als je een website wilt hebben, moet je op zo'n computer een stuk van de harde schijf bemachtigen. Andere computers kunnen dan naar dat stukje van die harde schijf gaan door de naam of de URL van de map op die server in te tikken.

Met een  FTP-programma kun je bestanden op die webruimte zetten. FTP staat voor Filte Transfer Protocol. Als dat FTP-programma online is, heet dat meestal Web-FTP.

Je eerste opdracht is om gratis webruimte te veroveren. Dat is niet gemakkelijk. Probeer een hosting maatschappij te vinden met zo weinig mogelijk reclame en waarop je PHP kunt gebruiken. Je moet zelf bestanden op die webruimte kunnen plaatsen. Gebruik op Google zowel "gratis webruimte" als "free web hosting" als zoektermen. Bij abonnementen van Belgacom en Telenet zit vaak gratis webruimte.

Een zeer goed gratis softwareprogramma voor FTP is Filezilla.

 

E. De opdracht met de invulkopie

Je mag nog geen softwarepakketten gebruiken, maar je moet alles in Kladblok (onder Bureau-accessoires) schrijven.

1 Algemene manier van werken

De beste manier om HTML-code te leren kennen, is experimenteren. Je gaat als volgt te werk:

- Open Kladblok.

- Sla dit bestand op als index.html (kies daarvoor naast "Opslaan als type" voor "Alle bestanden").

- Telkens als je iets verandert, sla dan je bestandje op en open in Windows Verkenner index.html door te dubbelklikken.

- Je zult je bestand dan zien verschijnen in Internet Explorer;

- Als je bestand al open staat in Internet Explorer, kun je de wijzigingen zien door op F5 te duwen en zo te refreshen.

- Ik zal het even schreeuwen. GEBRUIK ENKEL kleine LETTERS ALS JE PROGRAMMEERT! DUS NOOIT HOOFDLETTERS.

- Sla nooit HTML-bestanden met spaties op!

 

.2 Je eerste HTML-pagina

HTML is de afkorting van HyperText Markup Language. Als je een internetpagina wilt maken dan moet je HTML gebruiken. Een HTML-document bestaat voor een groot deel uit gewone tekst en verder nog een aantal speciale codes die tussen haken gezet moeten worden : HTML-tags. Deze HTML-tags zijn codes die de browser laten weten wat deze met de tekst moet doen. Tags zijn altijd voorzien van een beginhaakje (<) en een eindhaakje (>). Je moet er wel om denken dat er geen spatie tussen het beginhaakje en de eerste letter geplaatst mag worden.

Op naar je eerste HTML-pagina:

1.) Open Kladblok (zit onder Bureauaccessoires).

2.) Je moet je browser laten weten dat je webpagina HTML is, dat doe je door al je code te plaatsen tussen <html> en </html>

 

Dus je pagina ziet er momenteel als volgt uit:


<html>

</html>



3.) Van HTML bestaan verschillende versies en de browser moet weten in welke versie jij jou code geschreven hebt en dat doe je met bijvoorbeeld de volgende declaratie:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Die komt voor de eerste <html> te staan. Je webpagina ziet er nu als volgt uit:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

</html>

4.) Een HTML-pagina is zoals een mens of een dier: het heeft een kop en een lijf.  De kop is alles tussen <head> en </head> en het lijf is alles tussen <body> en </body>. En ja, net als bij jou, zit de kop van boven! Je pagina ziet er nu als volgt uit.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>

</head>
<body>

</body>
</html>


5.) Eerst gaan we nu de kop bekijken. Tussen de <head> en </head> komen alle codes die te maken hebben met informatie over je webpagina. Deze kop is vooral van belang voor zoekmachines en de zoekrobots van o.a. Google die het internet afschuimen op zoek naar nieuwe interessante sites. Er is één tag die zeer belangrijk is, namelijk de <title> </title> tags.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>vul zelf wat tekst in</title>
</head>
<body>

</body>
</html>



Sla je bestand op als test.html (kies voor opslaan als alle bestanden en tik er .html achter) en dubbelklik op test.html in Windows Verkenner. Je zult een lege webpagina zien op één ding na. Wat doet die <title></title> dus? Vul dat in op je kopie.


6.) Het is nu tussen de twee <body> </body> tags dat al de tekst van je webpagina zal komen. Tik tussen de <body> en </body> een kort tekstje van minstens vijf zinnen over jezelf om jezelf aan de rest van de wereld voor te stellen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>vul zelf wat tekst in</title>
</head>
<body>
Tik hier de tekst over jezelf.
</body>
</html>


7.) Experimenteer nu met de codes die je op de kopie gekregen hebt.

 


F. Eindopdracht


Als bewijs van je kunnen, moet je op het einde van de les de volgende webpagina maken:

- naam van deze webpagina is index.html (ze zal de huidige webpagina die op je webruimte staat vervangen);

- de webpagina moet je op je webruimte plaatsen en daar zal ik ze komen beoordelen;

- zet een paragraaf van vijf lijnen over jezelf;

- zet boven die alinea de titel 'Welkom op mijn site';

- je moet in de blauwe statusbalk het woord “Homepage” laten verschijnen;

- je naam in het vet aanduiden in je tekst op die pagina;

- de stad of het dorp waar je woont onderstrepen op die pagina;

- zet het woord “hobby” schuin of gecursiveerd in je tekst;

- haal een afbeelding van het internet die iets over jou zegt en gebruik die als achtergrond voor je webpagina (zorg ervoor dat de afbeelding in dezelfe map zit als je index.html);

- laat onderaan je webpagina een tekstje over het scherm lopen met je favoriete citaat of levensmotto;

- plaats drie links naar je lievelingssites (zorg wel dat je moeder of de adjunct die mag zien) en zorg ervoor dat die sites openen in een nieuw scherm.

Je moet deze webpagina op je eigen webruimte zetten en aan mij laten zien voor de attitudebeoordeling. Vraag In geval van nood om hulp, maar vraag niet wat je kunt weten door de handleidingen en de instructies te lezen.



G. Voorbereiding eindwerk

1. Mail me een voorstel met namen voor een groep (4 leerlingen).

2. Bepaal het onderwerp van jullie site en mail me dat onderwerp.

3. Leg speciaal voor jullie site ergens gratis webruimte vast en upload daar een webpagina met de naam index.html. Op deze webpagina moet schuin jullie namen staan en de mededeling dat hier binnenkort een website zal komen. Dat moet ten laatste volgende week vrijdag klaar zijn.

 

Last update 03.09.2015