WEBDESIGN. html tags. Neem de grondbeginselen van html door via de online cursus op de informaticasite of via instruct-online

Transcriptie

1 WEBDESIGN html tags HTML is de taal waarop internetsites gebaseerd zijn. Bij het onderdeel webdesign maken we gebruik van een van de bovenstaande webeditors die ons helpen bij het (automatisch) creëren van html-code. Maar voor een goed inzicht en ook voor het kunnen maken van handmatige aanpassingen is enig inzicht van html van groot belang. Om een webpagina te maken heb je niet meer nodig dan het programma kladblok (notepad of notepad++) en wat kennis van html. html-code met kladblok Open maar eens kladblok en type de volgende html-code: <title>hallo wereld!</title> Hello, World! <img src="images/aardbol.gif"> Sla daarna het tekstdocument op onder de naam wereld.html in de werkmap (en dus niet onder de naam wereld.html.txt - let op het verschil, zorg ervoor dat de bekende bestandsextensie niet verborgen worden op je computer). Sluit daarna kladblok af. Maak in de werkmap een map images aan en plaats in die map een animated gifje van een draaiende aardbol onder de naam aardbol.gif (zo n plaatje kun je wel op Internet vinden). Open het document met internet explorer. Je ziet je 'eerste' handgemaakte html-pagina ;-) een cursus html Neem de grondbeginselen van html door via de online cursus op de informaticasite of via instruct-online Neem je tijd voor de cursus en ontdek 'de geheimen' van html webdesign met html pagina 1

2 Een html document moet minimaal uit de volgende codes bestaan, om een pagina als HTML document weer te kunnen geven : <title>hier de titel</title> Hier een overzicht van de meest gebruikte tags bij het maken van een HTML pagina: Structuur HTML-pagina <title>titel pagina</title> Inhoud pagina Structuur HTML-pagina met Frames <title>titel pagina</title> <frameset rows="20%,50%,30%"><frame src="framepagina1.html"><frame src="framepagina2.html"><frame src="framepagina3.html"></frameset> Indeling HTML-pagina Nieuwe alinea Regeleinde Horizontale lijn Opmaak Vet Cursief Typewriter Verdana Opmaak & layout Koppen Lettergrootte Basislettergrootte Relatieve lettergrootte Tekst in vast formaat (Wat je typt dat wordt getoond door browser) Tekstkleur Achtergrondkleur Afbeeldingen Afbeelding opnemen Hoogte en breedte opgeven Alternatieve tekst Achtergrond <p> <br> <hr> <b>vet</b> <i>cursief</i> <tt>typewriter</tt> <font face="verdana">verdana</font> <h1>grote kop</h1> <h6>kleine kop</h6> <font sixe="x"> Tekst met lettergrootte x</font> <basefont sixe="x"> <font sixe="+x"> Tekst met standaard lettergrootte plus x</font> <pre> Jouw tekst </pre> <body text="kleurwaarde">... <body bgcolor="kleurwaarde">... <img src="plaatje.gif"> <img src="plaatje.gif" width="x" height="x"> <img src="plaatje.gif" alt="tekst"> <body background="plaatje.gif>... webdesign met html pagina 2

3 Hyperlinks Naar webserver Naar bestand Ankers Positie vastleggen Naar positie in andere pagina Naar positie op zelfde pagina De meest gebruikte html tags <div>, <span> en <layer> <table> <frameset> <center> <br> <script> Formulieren <input> We maken eerst een naaminvulformulier <input type="text" name="naam"> Door van input type "text" te maken geef je aan dat hier gewoon tekst geschreven kan worden. Er zijn veel meer mogelijkheden voor input. <a href=" <a href="bestand.html">naar bestand</a> <a name="positie"> <a href="pagina.html#positie">naar positie</a> <a href="#positie">naar positie</a> Deze tag is saai maar je moet er veel gebruik van maken. Deze tag komt aan het begin van elke HTML-pagina. Uiteraard sluit je deze tag zo: Hierna volgen alle acties. De gegevens die op het scherm worden weergegeven staan tussen de en de tags. Tussen deze twee tags stel je ook de achtergrondkleur en de tekstkleur in voor de hele pagina en gebeurtenisprocedures die tijdens het laden van de pagina worden uitgevoerd. Met behulp van de volgende tag wordt bijvoorbeeld een zwarte pagina met zilveren tekst gemaakt. <body bgcolor="black" text="silver"> Gebruik de tags <div> en <span> voor CSS-positionering om de tekst te plaatsen en te verschuiven, het filteren van tekst of het weergeven en verbergen van bepaalde gebieden op een pagina. Als je een breedte instelt, maak je een kolom. Div-tags lijken erg veel op span-tags. Het enige verschil is dat een div op een eigen regel begint en een span nauw verwant kan zijn met een andere tekststroom. Als je van Netscape Navigator gebruikmaakt moet je de tag <layer> gebruiken. Net als de tags <div> en <span> stelt deze tag gebieden in voor de weergave, maar in tegenstelling tot deze tags is het in Netscape Navigator mogelijk de inhoud op dynamische wijze aan te passen. Deze populaire tag biedt een uitstekende manier om kolommen te maken die relatief ten opzichte van elkaar zijn gepositioneerd. Tabellen zijn nuttig voor het uitlijnen van gegevens, het maken van kolommen met verschillende uitlijnen en voor het weergeven van gegevens uit databases. De bijbehorende tags zijn: <thead>, <tbody>, en <td> Als je meer dan één URL tegelijk wilt weergeven of als je een pagina in een gedeelte met een inhoudsopgave en een gedeelte met inhoud wilt opdelen moet je gebruik maken van frames. Onthoud dat je een frame niet in de tag kunt plaatsen. Door een frame een naam te geven, kun je er naderhand eenvoudig naar verwijzen. Verwante tags zijn: <frame> en <iframe> Deze tag bestaat al heel lang. Je kunt ervan gebruik maken als je een element op een pagina wilt centreren. Br is de afkorting van Break, de tekst die erop volgt wordt op een nieuwe regel voortgezet. Met behulp van deze tag kun je lege regels tussen elementen plaatsen. Hij komt van pas bij het maken van alinea's, bij het scheiden van tekst en afbeeldingen of om gewoonweg wat ruimte te bieden wanneer die nodig is. Deze tag doet niet veel, hij fungeert als rustplaats voor achtergrondgeluiden, stijlbladen, scripts en titels. Als je een van deze elementen nodig hebt moet je een tag voor de tag plaatsen. Wat veel mensen wel denken maar niet waar is is dat de tag verplicht is! Dit is echter niet zo. Deze tag is de sleutel tot alle interactiviteit op je pagina. Plaats je scripts tussen <script> tags. Zorg er dat je de parameter language instelt op "vbscript" als je geen gebruik maakt van "javascript". Maak gebruik van de syntaxis met for/event om scripts in te stellen die gebeurtenissen afhandelen bij activex-bedieningselementen. Een formulier maken in HTML. In HTML is het alleen mogelijk het formulier te maken, wil je de gegevens doorsturen naar bijvoorbeeld je adres dan zul je andere programmeertalen moeten gebruiken bijvoorbeeld PHP, ASP of CGI. Mogelijkheden voor input: "text", "radio", "checkbox", "submit", "password" webdesign met html pagina 3

4 Radio <input type="radio" name="geslacht" value="ik ben een man!"> Man <br> <input type="radio" name="geslacht" value="ik ben een vrouw!"> Vrouw Door achter "radio" checked te zetten geeft de browser deze ronde knop alvast weer als aangeklikt. Checkbox <input type="checkbox" checked name="fiets"> Ik heb een Fiets<br> <input type="checkbox" name="auto">ik heb een Auto Door achter "checkbox" checked te zetten geeft de browser de checkbox alvast weer als aangeklikt. Submit mailen.php dit is een php-bestand dat de gegevens doorstuurt naar bijvoorbeeld een adres. <form name="input" action="mailen.php" method="get"> Jouw naam: <input type="text" name="naam"> <input type="submit" value="submit"> De value van "Submit" mag veranderd worden. Dit is namelijk de tekst die op de knop verschijnt, je kunt er ook "Verstuur" neerzetten. Password: <input type="password" name="naam"> <br> Paswoord: <input type="password" name="paswoord"> Vul nu maar eens iets in. Je snapt meteen waarom het password heet! Dropdown menu <select name="automerken"> <option value="volvo">volvo <option value="saab">saab <option value="fiat" selected>fiat <option value="audi">audi </select> Man Vrouw Ik heb een Fiets Ik heb een Auto Jouw naam: Paswoord: Fiat Submit De value wordt doorgestuurd en de naam achter de value> staat in het menu. Je kunt dus andere gegevens door laten sturen dan er werkelijk te zien zijn. Achter Fiat staat selected, daarom wordt Fiat als standaard bovenaan gezet! Fieldset Fieldset is een border om de tekstvlakken. Zie voorbeeld: <fieldset> <legend> Maten: </legend> Hoogte<input type="text" size="3"> Breedte <input type="text" size="3"> </fieldset> Tabellen <table border="1" width="60%" cellspacing="0"> < td>4</td> Maten: Hoogte: Tabellen zijn zeer makkelijk voor de lay-out van je website Breedte: webdesign met html pagina 4

5 <h4>met een normale border:</h4> <table border="1" width="50%"> <h4>met een dike border:</h4> <table border="8" width="50%"> <h4>met een zeer dikke border:</h4> <table border="15" width="50%"> Opmaak of Lay-out Enkel tips Zorg voor juiste kleuren. Neem kleuren die je zelf mooi vind en die bij elkaar passen. Het ligt ook aan het onderwerp van de website. Is het een funwebsite dan mogen de kleuren natuurlijk ook wel wat flitsender dan bij een serieuze website. Maar houd het wel duidelijk. Is je website serieus bedoeld houd de lay-out dan rustig en duidelijk! Enkele tips voor een goede lay-out: - Zorg dat alles goed leesbaar is. - Maak de pagina rustig. Niet te flitsend en rustig voor de ogen. - Zorg dat de links over de hele website hetzelfde zijn. Doe dit bijvoorbeeld met CSS. - Kleur de scrol balk. De meeste mensen vinden een grijze maar saai. - Zorg voor een herkenbare lay-out, geen standaard lay-out die iedereen al heeft. - Zorg voor je eigen stijl, ga niets stelen of een gratis Template(=layout door een ander gemaakt) gebruiken. - Zorg voor een makkelijk en overzichtelijk menu. - Zorg ervoor dat jouw pagina in meerdere browsers te bekijken is. - Ga geen muiseffecten op jouw pagina uitvoeren, zeer storend. - Gebruik geen pop-ups. Jaagt meer bezoekers weg dan er ooit terug komen. - Muziek op de website wordt ook niet echt gewaardeerd door de meeste mensen - Zorg ervoor dat de laadtijd van jouw pagina snel is. Mensen wachten maar een paar seconden. - Vermeld geen teller als je weinig bezoekers hebt. Jaagt ook mensen weg. - Ga geen dingen van andere websites stelen. - Zorg voor weinig tot geen schrijffouten. - Installeer geen beveiligingsfuncties zoals een anti-rechter muisknop. De bron kan altijd gezien worden. webdesign met html pagina 5