Miniles 3: webpagina bouwen
advertisement
Nijmeegse Scholengemeenschap Groenewoud Miniles: het maken van een eenvoudige webpagina Deze miniles gaan we proberen een eenvoudige webpagina te maken. Daarvoor hebben we nodig: Het programma notepad of notepad++ Een handleiding met de te gebruiken tags Een afbeelding van een paar citroenen Standaard tags op opmaakcodes voor een kale pagina <html> <head> <title> </head> Titel van pagina </title> <body> Hier komt de eigenlijke inhoud van de pagina te staan. </body> </html> Gebruik van tekstopmaak Koppen: <h1> tekst </h1> Je hebt de mogelijkheid om gebruik te maken van h1 t/m h7 (van groot naar klein) Vetgedrukt: <b> tekst </b> of <strong> tekst </strong> schuingedrukt of cursief: <i> tekst </i> onderstreept: <u> tekst </u> combinatie van opmaakkenmerken: <b><i><u> tekst </u></i></b> Let op het plaatsen van de afsluittags. Deze is precies omgekeerd als de openingstags. We noemen dit nesten van tags. Invoegen van afbeeldingen Het werken met plaatjes gaat als volgt: <img src=”afbeelding.jpg” alt=”afbeelding”> Miniles webpagina bouwen 1 Piet Geelen Nijmeegse Scholengemeenschap Groenewoud Je kunt alleen maar plaatjes gebruiken met de extensies .jpg, .gif of .png. Zorg ervoor dat de afbeeldingen niet teveel geheugen in beslag nemen. Dat is alleen maar vervelend bij het laden van de webpagina. Zeker voor mensen met een eenvoudige telefoonverbinding. Gebruik van kleur Kale zwart-wit pagina’s zijn niet erg in trek. Er bestaat de mogelijkheid om met kleur te werken. Dat kan op verschillende manieren. Achtergrondkleur van de pagina wijzigen: <body bgcolor=”blue”> <body bgcolor=”#0000FF”> Op de eerste manier heb je 256 mogelijkheden Op de tweede manier heb je 16,7 miljoen mogelijkheden. Tekstkleur: <font color=”blue”> tekst </font> <font color=”#0000FF”> tekst </font> Gebruik van lettertypen <font face=”verdana”> tekst </font> Combinatie van kleur en letterype en grootte <font face=”verdana” color=”blue” size=”4”> tekst </font> Gebruik van tabellen Tabellen bestaan uit rijen. Elke rij bestaat uit cellen waarin de gegevens of data worden geplaatst. Een standaard tabel met 2 rijen en 4 kolommen ziet er qua code als volgt uit: <table width="100%" border="1" cellpadding="5"> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table> De breedte van de tabel beslaat de hele pagina (100%), de rand heeft een dikte van 1 en de tekst staat 5 pixels van de kant af. Het is de bedoeling dat je tussen de td-tags de inhoud van de cel plaatst; tekst of afbeeldingen of wat dan ook. Als je niets plaats tussen de td-tags, zal de cel niet worden weergegeven. Miniles webpagina bouwen 2 Piet Geelen Nijmeegse Scholengemeenschap Groenewoud Uitlijnen in tabellen Tekst of plaatje rechtsboven: <td rechtsmidden: <td rechtsonder: <td linksboven: <td linksmidden: <td linksonder: <td align=”right” valign=”top”> align=”right” valign=”middle”> align=”right” valign=”bottom”> valign=”top”> valign=”middle”> valign=”bottom”> Gebruik van lijsten Soms wil je een opsomming maken van gegevens. Dat kan dmv een genummerde lijst of dmv bullets. Een genummerde lijst met 3 rijen: <ol type="1"> <li></li> <li></li> <li></li> </ol> een lijst met bullets van 3 rijen: <ul type="disc"> <li></li> <li></li> <li></li> </ul> Gebruik van hyperlinks Het Internet zit vol met hyperlinks, verbindingen naar andere internetpagina’s of verwijzingen naar andere plekken op de bestaande pagina. Je gebruikt de zogenaamde anchortag om dat mogelijk te maken. <a href=”http://www.groenewoud.nl/subsites/informatica” target=”_blank”>Informatica op de NSG</a> De tekst die tussen de anchortags staat is de hyperlink. Daarop kun je klikken. De verwijzing is in dit geval de informaticawebsite van de NSG. Je kunt op deze manier elke willekeurige link maken. Het attribuut target=”_blank” betekent dat de website in een nieuwe browser (internetvenster) wordt geplaatst. Aparte tags Tot nu toe hebben we nagenoeg alleen maar tags gezien die geopend en afgesloten worden. Er bestaan ook een aantal tags die geen afsluiting kennen: <img src=”….” alt=”…” /> <br /> <hr width=”…” align=”…” height=”…” color=”…” /> invoegen afbeelding beginnen op een nieuwe regel een horizontale lijn afbeelden Bronnen: Er zijn vele cursussen en handleidingen op Internet te vinden, zowel Nederlandstalig als Engelstalig. Ik kan hier wel adressen neerzetten, maar probeer eens in Google te zoeken naar handleiding HTML of cursus HTML of tutorial HTML en je merkt dat je talloze informatie over websites bouwen kunt vinden. Op de informaticawebsite van school staan enkele websites onder het tabblad LINKS. Of zoek op Google. Typ dan in: cursus HTML of handleiding HTML of tutorial HTML. Je vindt zo een schat aan informatie. Miniles webpagina bouwen 3 Piet Geelen Nijmeegse Scholengemeenschap Groenewoud Opdracht: Probeer onderstaand voorbeeld in kladblok te bouwen. Veel plezier met het bouwen van een website Samengesteld door Piet Geelen Miniles webpagina bouwen 4 Piet Geelen
