Een webpagina maken. Een website bouwen met HTML en CSS practicum 1

Maat: px

Weergave met pagina beginnen:

Download "Een webpagina maken. Een website bouwen met HTML en CSS practicum 1"

Veerle Willems
8 jaren geleden
Aantal bezoeken:

1 Een webpagina maken De komende periode wordt in 8 practica een aantal technieken behandeld, die je nodig hebt om een (eenvoudige) website te kunnen bouwen. Nadat je deze 8 practica hebt doorgewerkt, moet je aan de slag met de eerste praktische opdracht voor het vak Informatica. Deze PO zal bestaan uit het bouwen van een website over een onderwerp, dat aan de orde is geweest in de eerste 3 hoofdstukken van het Theorieboek deel 1. In de 8 practica komen achtereenvolgens de volgende onderwerpen aan de orde: Een webpagina maken. Een website bouwen m.b.v. hyperlinks. Frames gebruiken om verschillende webpagina s tegelijk te tonen. Een website m.b.v. FTP verplaatsen naar de server van een provider. Cascading Style Sheets gebruiken voor de opmaak van webpagina s. Afbeeldingen, geluid, flash-movies en andere objecten opnemen in een webpagina. Een formulier maken, waarmee gegevens kunnen worden verzonden naar een -adres. Een beetje JavaScript gebruiken. De basis van veel webpagina s, zoals deze getoond worden door een browser (zoals bijvoorbeeld Internet Explorer, Opera of Netscape), bestaat uit een html-bestand. Je herkent een html-bestand aan de extensie: bestandsnaam. htm. HTML betekent HyperText Markup Language. Een html-bestand is opgebouwd uit elementen. Deze html-elementen vertellen de browser, wat er allemaal op het beeldscherm moet worden weergegeven, en welke afbeeldingen en geluiden er moeten worden opgehaald van de server van de provider. Een html-bestand is dus een gewoon tekstbestand. Afbeeldingen, geluid en video zijn geen onderdeel van het html-bestand. Voorbeeld. htm 1 2 Haal afbeelding en muziek op. Plaatje. jpg Muziek. mp3 3 Computer van de client Server van de provider Edu Actief

Deze PO zal bestaan uit het bouwen van een website over een onderwerp, dat aan de orde is geweest in de eerste 3 hoofdstukken van het Theorieboek deel 1.

2 Html-elementen zijn allemaal opgebouwd volgens dezelfde syntax: < naam van het element > inhoud van het element < / naam van het element > < > noemen we de opentag van het html-element. < / > noemen we de sluittag van het html-element. Sommige html-elementen hebben geen inhoud. Bijvoorbeeld het html-element, dat de overgang naar een nieuwe regel aangeeft. Bij dit soort elementen worden de opentag en de sluittag samengevoegd: < naam van het element / > Het browserprogramma Internet Explorer is in staat om html-elementen, die niet helemaal volgens de syntaxregels zijn opgesteld, toch correct weer te geven. HTML-Kit Voor het bouwen van een website kun je gebruik maken van het freeware programma HTML-Kit. De nieuwste versie van dit freeware programma kan gedownload worden van: Het programma staat ook op de cd-rom. Het openingsscherm van HTML-Kit ziet er zo uit: Edu Actief

Bij dit soort elementen worden de opentag en de sluittag samengevoegd: < naam van het element / > Het browserprogramma Internet Explorer is in staat om html-elementen, die niet helemaal volgens de

3 Bovenin zie je verschillende menubalken, daaronder staan tabbladen met verschillende soorten tags. Rechts staat de indeling van je harde schijf. Links staan de Editor (daar ontwerp je je webpagina) en de Preview (daar kun je zien hoe je webpagina er uit komt te zien). Het onderste gedeelte van het scherm wordt o.a. gebruikt voor commentaar bij de het ontwerp van jouw webpagina. HTML-Kit controleert jouw code op fouten. Het programma HTML-Kit is een zgn. tagger: door op knopjes te drukken wordt in de Editor de benodigde HTML-code gemaakt, die je dan zelf kunt aanvullen. Verder maakt HTML-Kit gebruik van code-completion: tijdens het tikken verschijnt alle code, die je kunt gebruiken, in een venstertje. De html-code, die door HTML-Kit wordt gebruikt, is al klaar voor XHTML en XML. XHTML en XML zijn opvolgers van HTML. XHTML lijkt op HTML, maar is gebaseerd op XML. De structuur van een HTML-bestand De structuur van een html-bestand is altijd hetzelfde: <html> <head>. <title>. </title> </head> <body> </body> </html> De tag <html> geeft het begin van de html-code aan. De tag </html> geeft het einde van de html-code aan. Tussen <head> en </head> staat allerlei algemene informatie over de webpagina. Tussen <title> en </title> staat de titel van de Web-pagina; deze verschijnt in de titelbalk van de browser. Tussen <body> en </body> staat de inhoud van de webpagina. Elementen en attributen Wanneer een stukje tekst door de browser vet moet worden weergegeven, dan wordt gebruik gemaakt van het html-element b : Deze tekst is vet. Vet aan Inhoud Vet uit Edu Actief

HTML-Kit controleert jouw code op fouten. Het programma HTML-Kit is een zgn. tagger: door op knopjes te drukken wordt in de Editor de benodigde HTML-code gemaakt, die je dan zelf kunt aanvullen.

4 Sommige elementen bevatten extra informatie. Deze extra informatie noemen we attributen. Bijvoorbeeld: <hr width= 75% align= right /> Teken een horiz. lijn Met een breedte van 75% van de pagina Aan de rechterkant van de pagina Einde van de tag Html-elementen, waarin ook attributen worden gebruikt, zijn allemaal opgebouwd volgens dezelfde syntax: < elementnaam attribuutnaam = attribuutwaarde > De meeste tags worden door alle browsers op dezelfde manier geïnterpreteerd. Deze tags zijn goedgekeurd door het W3C (World Wide Web Consortium) Meer informatie over het W3C kun je vinden op: Sommige tags zijn speciaal voor een bepaalde browser gemaakt, en niet goedgekeurd door het W3C. Voorbeelden van zulke speciale tags voor Internet Explorer zijn: <bgsound /> dat een achtergrondmuziekje start <marquee /> dat een lichtkrant start In het programma HTML-Kit staat een uitgebreid overzicht van alle HTML-tags samen met alle attributen, die je kunt gebruiken. Voorbeeld (Staat op de cd-rom als Voorbeeld 1) In dit voorbeeld maak je kennis met met het programma HTML-Kit. Je leert hoe je een aantal tekstelementen in een html-bestand kunt plaatsen. Ook lijsten en tabellen komen aan de orde. Overigens kun je voor de lay-out van tekst veel beter gebruik maken van stylesheets zoals CSS. In een van de volgende practica komen we daarop terug Edu Actief

elementnaam attribuutnaam = attribuutwaarde > De meeste tags worden door alle browsers op dezelfde manier geïnterpreteerd.

5 Hieronder staat Voorbeeld 1: Dit is een voorbeeld van vette tekst. Dit is een voorbeeld van cursieve tekst. Dit is een voorbeeld van. Deze paragraaf tekst staat links. Deze paragraaf tekst staat in het midden. Deze paragraaf tekst staat rechts. Hieronder staat een stukje tekst met een vaste opmaak: De opmaak van deze tekst wordt niet veranderd door de browser. Spaties en het gebruik van ENTER blijft op dezelfde plaats!! Hieronder staat een voorbeeld van een ongeordende lijst: Dit is lijstnummer 1. Dit is lijstnummer 2. Dit is lijstnummer 3. Hieronder staat een voorbeeld van een gewone tabel met kolombreedte 200: Eerste rij, eerste kolom. Eerste rij, tweede kolom. Eerste rij, derde kolom. Tweede rij, eerste kolom. Tweede rij, tweede kolom. Tweede rij, derde kolom. Hieronder staat een voorbeeld van een bijzondere tabel: Hier zijn 2 kolommen samengenomen. Tweede rij, eerste kolom. Tweede rij, tweede kolom. Derde rij, eerste kolom Derde rij, tweede kolom. Hier zijn 3 rijen samengenomen Edu Actief

Spaties en het gebruik van ENTER blijft op dezelfde plaats!! Hieronder staat een voorbeeld van een ongeordende lijst: Dit is lijstnummer 1. Dit is lijstnummer 2. Dit is lijstnummer 3.

6 Hieronder staat de HTML-code van Voorbeeld1.htm: <html> <head> <title>voorbeeld 1</title> </head> <body> Dit is een voorbeeld van vette tekst. Dit is een voorbeeld van cursieve tekst. Dit is een voorbeeld van fontgrootte 7. deze paragraaf tekst staat links. deze paragraaf tekst staat in het midden. deze paragraaf tekst staat rechts. Hieronder staat een stukje tekst met een vaste opmaak: <pre> De opmaak van deze tekst wordt niet veranderd door de browser. Spaties en het gebruik van ENTER blijft op dezelfde plaats!! </pre> Hieronder staat een voorbeeld van een ongeordende lijst: <ul > <li>dit is lijstnummer 1.</li> <li>dit is lijstnummer 2.</li> <li>dit is lijstnummer 3.</li> </ul> Hieronder staat een voorbeeld van een gewone tabel met kolombreedte 200: <table border="1"> <td width="200">eerste rij, eerste kolom.</td> <td width="200">eerste rij, tweede kolom.</td> <td width="200">eerste rij, derde kolom.</td> <td>tweede rij, eerste kolom.</td> <td>tweede rij, tweede kolom.</td> <td>tweede rij, derde kolom.</td> </table> Hieronder staat een voorbeeld van een bijzondere tabel: <table border="1"> <td colspan="2">hier zijn 2 kolommen samengenomen.</td> <td rowspan="3" width="50">hier zijn 3 rijen samengenomen.</td> <td width="200">tweede rij, eerste kolom.</td> <td width="200">tweede rij, tweede kolom.</td> <td>derde rij, eerste kolom</td> <td>derde rij, tweede kolom.</td> </table> </body> </html> Edu Actief

</p> <p align="center">deze paragraaf tekst staat in het midden.</p> <p align="right">deze paragraaf tekst staat rechts.

7 Html-elementen beginnen soms wel en soms niet op een nieuwe regel. Je kunt 3 verschillende soorten elementen onderscheiden: Elementen die niet op een nieuwe regel beginnen. Voorbeelden van zulke elementen zijn: , en <td>. Elementen die op een nieuwe regel beginnen. Voorbeelden van zulke elementen zijn: , <li>, <table> en. Elementen die op een nieuwe regel beginnen en die worden voorafgegaan en/of gevolgd door een lege regel. Voorbeelden van zulke elementen zijn: , <ul> en <ol> Edu Actief

Voorbeelden van zulke elementen zijn: <b>, <font> en <td>. Elementen die op een nieuwe regel beginnen.

Vergelijkbare documenten

Software 1. Basis HTML. bachelor grafische en digitale media cross-media ontwerp & grafimediatechnologie academiejaar 2009-2010 semester 1

Software 1. Basis HTML. bachelor grafische en digitale media cross-media ontwerp & grafimediatechnologie academiejaar 2009-2010 semester 1 Software 1 Basis HTML bachelor grafische en digitale media cross-media ontwerp & grafimediatechnologie academiejaar 2009-2010 semester 1 Alain Simons alain.simons@artesis.be Basis HTML 1. Introductie 2.