print.gif

Wat is HTML?

HTML is een afkorting van Hyper Text Markup Language.
Zoals de term al zegt is het een "opmaak taal", d.w.z. het vertelt uw browser d.m.v. HTML tags hoe de pagina weergegeven moet worden op het scherm.
HTML is geen programmeertaal zoals vaak gedacht wordt. De tags kunt u vergelijken met bouwstenen uit een lego-set. Er is een bepaald aantal stenen met een vooraf bepaalde vorm die u naar eigen smaak samen kunt voegen om zo een bouwwerk - in dit geval uw webpagina - te maken. Net als lego is ook HTML eenvoudig te leren, terwijl u er ook hele ingewikkelde dingen mee kunt doen, maar met het leren van de basisfuncties kunt u al snel fraaie paginas bouwen. Deze cursus bevat een uitleg van de beginselen van HTML. Is het strikt nodig om veel van HTML te weten? Nee, er zijn programma's te vinden waarmee u zonder enige kennis van HTML een website in elkaar kunt zetten. Weet u echter wat meer van HTML, dan kunt u webpagina's gemakkelijker aantrekkelijker maken en vooral, als er fouten optreden, heeft u een idee waar de fout kan zitten en hoe u die kunt verhelpen.

Rechts op het scherm vindt u een uitschuifmenu. Aan het eind van iedere les kunt u doorgaan met de volgende les. Boven in het scherm bevindt zich een uitschuifmenu met "Webtools". Dat biedt mogelijkheden om uw website te voorzien van allerlei snufjes die uw site aantrekkelijker kunnen maken.

Elementen, Attributen, Waarden en Tags

Even een uitleg van deze vier belangrijke termen die u tegenkomt in de HTML lessen. Iedere pagina bevat gegevens. Deze gegevens hebben de vorm van elementen. Er zijn elementen voor tekst, plaatjes, formulieren, tabellen, etc. Ieder element bestaat uit drie delen: een begintag, de inhoud en een eindtag. Verder heeft een element verschillende attributen. Het element "tekst" bijvoorbeeld heeft als attributen "lettertype" en "lettergrootte". Tenslotte hebben de attributen weer verschillende waarden. Tekst heeft een bepaald lettertype, bijvoorbeeld Arial of Courier. Als u geen waarde opgeeft, dan wordt de standaardwaarde voor het betreffende attribuut gebruikt.

Zoals gezegd bestaat een element uit een begintag, de inhoud en een eindtag. Wat zijn nu tags? Een tag is een HTML code die tussen twee vishaken: < en > staat. Een voorbeeld van een tag is <HTML> en ook </HTML> is een tag. Het eerste voorbeeld is een begintag het tweede een eindtag. Een eindtag maakt u hetzelfde als de begintag, maar dan met een /. Er zijn trouwens een paar elementen die geen inhoud hebben. Deze hebben daarom wel een begintag, maar geen eindtag.

De geschiedenis van HTML

Voor wie hierin geïnteresseerd is: even een korte geschiedenis van HTML. HTML is uitgevonden door Tim Berners-Lee, toen werkzaam bij CERN, een natuurkunde-instituut in Genève. HTML en internet zijn oorspronkelijk ontworpen voor en gebruikt door militairen als communicatiemiddelen. Daarna zijn universiteiten het gaan gebruiken. Er zijn verschillende versies van HTML. Op dit moment is versie 4 in gebruik. Met iedere versie wordt de taal verbeterd en worden er nieuwe funcies toegevoegd.

Hoe maak ik een website?

U weet nu genoeg om verder te gaan met de cursus. Voordat ik met de hoofdpunten begin, wijs ik eerst nog even op het verschil tussen de term website en homepage. Veel mensen hebben het erover dat ze een homepage gemaakt hebben, maar eigenlijk is dit een verkeerde term. Homepage betekent namelijk 'voorpagina' van uw website. Dit is de pagina waar de bezoekers binnenkomen. Ga er vanuit, dat u die altijd index.html noemt. Als u naar een website gaat, zal die namelijk (bijna) altijd automatisch de pagina index.html openen.

Met die pagina index.html begint u dus. Alle verdere pagina's die u maakt, kunt u het beste laten eindigen met de extensie .htm of .html. Denk dan aan rotterdam.html, geschiedenis.html, bedrijfskunde.html, en ga zo maar door.

Op de index pagina (voorpagina dus) vertelt u wat mensen op uw website kunnen verwachten. Vat kort samen waar het precies over gaat en vul dit eventueel aan met plaatjes. Vergeet niet om links aan te maken naar de overige pagina's binnen uw website. Meestal gebruikt u daar een navigatiebalk voor. Die bestaat uit een rijtje links naast, op of onder elkaar met verwijzingen naar de pagina's binnen uw eigen website. Op de index of hoofdpagina kunt u een e-mailadres vermelden waar mensen complimenten, kritiek, of suggesties naartoe kunnen sturen.

Scrollbalken ziet u soms rechts en onderaan een webpagina. Heeft u veel tekst, dan krijgt u al snel een scrollbalk rechts. Een scrollbalk rechts is nog niet zo erg, bijna iedereen heeft tegenwoordig een scrollmuis, maar een scrollbalk onderin vinden veel mensen vervelend. Dat betekent, dat u geen zin in 1 keer kunt lezen, omdat u steeds van links naar rechts moet scrollen. Hoe voorkomt u dit? Zet bijvoorbeeld uw tekst in een tabel. Die tabel houdt rekening met de beschikbare breedte van de webpagina op de monitor en breekt tijdig de zinnen af naar de volgende regel. Een andere, tegenwoordig veel meer gebruikte mogelijkheid is: maak gebruik van CSS om een "box"of "venster te maken waarin uw tekst wordt opgenomen. Dat venster wordt nooit breder dan het venster van uw monitor. (Voor een cursus CSS, zie het uitschuifvenster links)

De oplossing van langgerekte pagina's

Als de tekst op een pagina erg lang wordt, bestaat het gevaar dat de lezer de draad kwijt raakt, omdat hij niet meer weet waar hij met lezen gebleven was. Ga dan door op een volgende pagina. Eén klik is minder moeite dan steeds naar beneden te moeten scrollen. U plaatst onderaan de pagina's een link naar het vervolg en de lezer kan verder met het verhaal, bijvoorbeeld met de volgende code:

<a href="pagina2.html"> lees verder</a>.
U linkt dus naar het vervolg van het verhaal, in dit geval naar pagina2.html. Dat kunt u een aantal keren herhalen. Er zijn ook scripts die dit voor u oplossen, maar hier blijven we eerst bij de basis, we denken nog niet aan trucjes.
Elke webpagina heeft een standaard HTML-code. Elke code-element wordt tussen vishaken gezet. Zo'n code inclusief de vishaken wordt een "tag" genoemd. Die standaardcode voor een pagina ziet er volgt uit:

<html>

< head>

< title>Hier komt de titel van het document te staan.< /title>

< /head>

<body> Tussen de body-tags komt de uiteindelijke pagina te staan. </body>

</html>

Deze code vertelt uw browser het volgende:
<html> geeft aan dat u in HTML gaat typen. Nadat u dit aan de browser heeft doorgegeven kunt u andere HTML-tags gaan gebruiken. De eerste tag die daarna (bijna) altijd wordt ingevoerd is <head>. In de head komt informatie te staan over het document en andere items die niet zichtbaar hoeven te zijn voor de bezoekers. Bij dit voorbeeld is alleen de titel van de pagina ingevoerd. Deze staat tussen <title> en </title>. Die titel wordt in de titelbalk van uw browser weergegeven.

Nadat de eigenschappen van de pagina doorgegeven zijn, wordt de head-tag afgesloten met </head>. Nu begint de eigenlijke webpagina pas. Het begin hiervan geven we weer met de body-tag (<body>). In de body-tag kunnen eigenschappen over de 'body' van het document (achtergrondkleur, achtergrondafbeelding, kleur van URL's etc.) gezet worden. Alles wat u na de body-tag typt, wordt weergegeven op de pagina. Als u alles wat op de pagina moet komen, heeft getypt dan sluit u de body-tag af met </body>. Ook de html-tag wordt aan het einde van het document afgesloten met de afsluitende tag </html>.

In de volgende tabel staan enkele elementen die u kunt toevoegen aan de stijl (body-tag) van de pagina.

bgcolor= Hiermee kunt u de achter­grond­kleur van uw pagina instellen.
let op de kleuren in HTML worden geschreven als hexa­decimaal getal.
background= Hiermee kunt u een achtergrond­afbeelding instellen als achtergrond. Typ hiervoor de URL naar de afbeelding in.
bgproperties= Hiermee kunt u de eigen­schappen instellen voor de achter­grond. Als u bijvoorbeeld 'fixed' invult, dan zal de achtergrond­afbeelding niet meebewegen (op de zelfde plek blijven) als een bezoeker naar beneden scrollt op uw website.
text= Hiermee kunt u de basis­kleur instellen voor de tekst op de pagina.
let opde kleuren in HTML worden geschreven als hexa­decimaal.
link= Hiermee stelt u de kleur in voor een link.
let opde kleuren in HTML worden geschreven als hexa­decimaal.
alink= Hiermee kunt u de kleur instellen voor een link die aangeklikt is door de bezoeker (Active Link).
let opde kleuren in HTML worden geschreven als hexa­decimaal.
vlink= Hiermee stelt u de kleur in voor een link die al een keer bezocht is door de bezoeker (Visited Link).
let opde kleuren in HTML worden geschreven als hexa­decimaal.
leftmargin= Hiermee bepaalt u de afstand tussen de webpagina en de linker­kant van het scherm.
let opde afstanden worden gemeten in pixels.
topmargin= Hiermee bepaalt u de afstand tussen de web­pagina en de bovenkant van het scherm.
let opde afstanden worden gemeten in pixels.
Tekst­eigen­schappen veranderen

Tot nu heeft u alleen maar platte tekst in een standaard­opmaak op de pagina gezet. U gaat nu zien hoe u de eigen­schappen van de tekst kunt veranderen.

De font-tag

In de font-tag staan de standaard­eigen­schappen van de tekst.

<html>

< head>

< title>HTML-code 2.1 - De font-tag< /title>

< /head>

<body> <font color="#0000FF" size="3" face="Arial, Helvetica, sans-serif"> De tekst is geschreven in Arial met een rode kleur. De grootte op schaal van 1 - 7 is 3. < /font>

</body>

</html>

De font tag opent met drie toevoegingen: face, size en color. Die worden in de volgende tabel uitgelegd.

face= Om het lettertype in te stellen van de tekst. Als de naam van het lettertype uit meerdere woorden bestaat dan moet u die tussen haakjes plaatsen.
size= Om de grootte van de tekst in te stellen op een schaal van 1 - 7.
color= Om de kleur in te stellen voor de tekst.
let opde kleuren in HTML worden geschreven als hexa­decimaal.

Cursief, door­gehaald, vet en onder­lijnd

Met de font-tag kunt u de grootte, het letter­type en de kleur van de tekst instellen. Maar dat is nog niet alles. Een cursieve, vette of onder­lijnde tekst kan ook in een webpagina. Zelfs een doorge­haalde is mogelijk. Dat doet u door aan de code nog wat extra's toevoegen. Namelijk de b-, i-, strike- en u-tag. Deze staan voor Bold (vet), Italic (cursief), Strike (doorgehaald) en Underline (onderlijnd). Wilt u een woord in een tekst accen­tueren, dan staan ook deze tags ter beschikking: <strong>, <em>, <s> en <u>-tag. Ook deze staan voor vet, cursief, strike (doorgehaald) en underline (onderlijnd).

Harde return en uitlijning

Waarschijnlijk heeft u al gemerkt dat de tekst altijd achter elkaar wordt geplaats door de browser. Om dit tegen te gaan gebruikt u de br-tag. Wilt u een regel overslaan, dan moet u de p-tag gebruiken. Probeer de volgende HTML-code uit in uw browser en kijk wat het resultaat is.

<html>

<head>

<title>HTML-code - Harde return en uitlijning</title>

</head>

<body> <font face=arial size=2 color=#0000ff> Dit is de eerste regel. Dit is de tweede regel. <p>Dit is de derde regel.</p> </font>

</body>

</html>

Deze code demonstreert hoe de br-tag en de p-tag werken. De p-tag kan ook afgesloten worden met </p>. Als u in XHTML werkt is dat nodig. Een reden om de p-tag af te sluiten is om een uitlijning te stoppen. Uitlijnen met de p-tag wordt gedaan met het attribuut align.

align= Met align kun u instellen hoe de uitlijning van de tekst moet zijn. U heeft de keuze tussen left (links), center (gecentreerd), right (rechts) of justify (links en rechts uitgelijnd).

Een andere manier om een tekst te centreren is om de center-tag (<center>) te gebruiken. Die tag wordt ook afgesloten om de uitlijning te stoppen.

Op een webpagina staat natuurlijk meer dan alleen maar tekst. U kunt lijnen, afbeeldingen e.d. invoegen.

Een lijn invoegen

U kunt op eenvoudige wijze een horinzontale lijn invoegen in uw webpagina. Typ de volgende code over en probeer die uit.

<html>

<head>

<title>HTML code - Een lijn invoe­gen</title>

</head>

<body> <hr> <hr width="150" color=­"#000000"> </body>

</html>

Deze code zorgt ervoor dat er twee soorten lijnen weergegeven worden. De eerste lijn heeft de standaardkleur (grijs) en beslaat de hele breedte. De tweede lijn is zwart en heeft een breedte van 150 pixels.
Nadat u de volgende toevoegingen kent, zult u deze code begrijpen en zelf in staat zijn om lijnen te maken.

align= Hiermee kunt u de uitlijning van de lijn instellen. U hebt de keuze tussen left (links), center (gecentreerd) of right (rechts).
size= Hiermee kunt u de hoogte van de lijn instellen.
width= Hiermee kunt u de breedte van de lijn instellen.
color= Hiermee kunt u de kleur instellen voor de lijn.
let opde kleuren in HTML worden geschreven als hexa­decimaal.
noshade Hiermee zorgt u voor een solide lijn zonder schaduw.

Tabellen

Veel webpagina's maken gebruik van tabellen. Door meerdere tabellen door elkaar te gebruiken kunnen vele soorten pagina's gemaakt worden. Met de volgende code maakt u een eenvoudige tabel.

<html>

<head>

<title>HTML-code - Een tabel ma­ken</title>

</head>

<body> <table border=1 bordercolor=­#000000> <tr> <td> 1.1 </td> <td> 1.2 </td> </tr> <tr> <td> 2.1 </td> <td> 2.2 </td> </tr> </table>­ </body>

</html>

Als u deze code probeert, ziet u dat die een tabel maakt met twee rijen en twee kolomen. De tabel begint met de <table> tag. Hierin kunnen alle eigenschappen van de tabel gegeven worden. De <tr> tag die volgt, geeft aan dat er een nieuwe rij begint. In deze rij zijn twee kolomen. De kolommen worden gestart met de <td> tag waarna de inhoud van de tabel volgt. Als de inhoud getypt is, wordt de kolom afgesloten met de </td> afsluittag. Om meerdere kolommen te maken kan dit meer keren gedaan worden. Als alle kolomen in de rij gemaakt zijn, wordt de rij afgesloten. Een nieuwe rij kan hierna weer beginnen met de <tr> tag. Nadat alle rijen gemaakt zijn wordt de tabel afgesloten.

In de volgende tabel staan de toevoegingen voor de table-tag.

   <table></table> Maakt een tabel.
   <tr></tr> Het aantal (horizontale) rijen in een tabel.
   <td></td> Aantal cellen in een rij.
   <th></th> Een vet gecen­treerde tabelkop.
   border= Breedte van de rand rond de tabel.
   cell­spacing= De ruimte tussen de cellen.
   cell­padding= Instellen van de ruimte tussen de celrand en de inhoud daarvan.
   width="25px" or "2%" Tabel­breedte in pixels of percen­tage.
<tr align="left"> or <td align="center"> Stelt uitlijning in voor cellen (left, center, of right).
<tr valign="top"> or <td valign="bottom"> Verticaal uitlijnen voor cellen (top, middle, or bottom).
   <td colspan="2"> Stelt aantal kolommen in die een cel moet omspannen.
   <td rowspan="2"> Stelt aantal rijen in die een cel moet omspannen.
   <td nowrap> Voorkomt dat lijnen binnen een cel niet afbreken.
   border= Hier geeft u aan hoe dik de rand tussen de cellen moet zijn.
bordercolor= Hier geeft u de kleur van de rand aan.
   bgcolor=

Hiermee geeft u de achtergrond­kleur van de tabel aan.

let opde kleuren in HTML worden geschreven als hexa­decimaal.

   width= De breedte van de tabel.
   height= De hoogte van de tabel.

Cellen samenvoegen

Soms is het handig om cellen samen te voegen. Dat doet u als volgt:

<html>

<head>

<title> HTML-code - Een tabel ma­ken </title>

</head>

<body> <table border=1 ­bordercolor=­#000000> <tr> <td colspan=2> 1.1 </td> </tr> <tr> <td> 2.1 </td> <td> 2.2 </td> </tr> </table>­ </body>

</html>

In dit voorbeeld ziet u een van de vele toepassingen van de toevoegingen. Het is ook handig om deze toevoegingen te gebruiken voor ingewikkelde tabellen. Tabellen kunt u ook gebruiken om de pagina in te delen zonder frames(dus de tabellen hoeven niet altijd zichtbaar te zijn, u kunt ze ontzichtbaar gebruiken voor de indeling van de pagina).

Toevoegingen van de td-tag

height= De hoogte van de cel.
width= De breedte van de cel.
colspan= Aantal kolomen waar de cel in komt.
rowspan= Aantal rijen waar de cel in komt.
align= Met align kunt u instellen hoe de hori­zontale uitlijning van de tekst moet zijn in de cel. U hebt de keuze tussen left (links), center (gecentreerd) of right (rechts).
valign= Met align kunt u instellen hoe de verticale uitlijning van de tekst moet zijn in de cel. U hebt de keuze tussen left (links), center (gecen­treerd) of right (rechts).
nowrap De tekst in de tabel niet automa­tisch afbreken.
bgcolor= Hiermee stelt u de achtergrond­kleur van de cel in.
let opde kleuren in HTML worden geschreven als hexa­decimaal.

 

 

 

 

 

Twee tags die nog niet genoemd zijn, maar die u wel moet weten:

<th> De tag is hetzelfde als de td-tag, maar de tekst wordt vetgedrukt.
<caption> Als u deze open- en afsluit­tag gebruikt met daar­tussen de titel van de tabel, dan zal die boven de tabel verschijnen.

 

HTML Tags

<html> en </html> De begin- en eindcode van een internet­pagina
<head> en </head> Hier staat de titel en andere informatie die niet te zien is op de pagina, maar wel belangrijk is, bijvoorbeeld Meta tags, java­scripts.
<body> en /body> Tussen deze begintag en de afsluit­tag staat het 'zichtbare' gedeelte van het document. Hier staat dus eigenlijk de hele inhoud van de site.
<title> en </title> Alle tekst die hier tussen staat, komt in de blauwe balk bovenin Internet Explorer.
Body Attri­butes: deze codes moeten allemaal in de body staan
<body bgcolor=?> Regelt de achtergrond­kleur. Dit kan zowel met namen als hex codes
<body text=?> Regelt de tekst­kleur, dit kan zowel met namen als hex codes
<body link=?> Regelt de kleur van de links, dit kan zowel met namen als hex codes
<body vlink=?> Regelt de kleur van de bezochte link, dit kan zowel met namen als hex codes
<body alink=?> Regelt de kleur van de link tijdens het klikken, dit kan zowel met namen als hex codes

HTML Tekst Tags

<pre></pre> Maakt prefor­matted tekst, dus wat u typt in uw HTML code, komt ook zo in beeld te staan. Handig bij meerdere spaties
<h1></h1> Maakt een kop met groot letter­type, h1 is het grootst, h6 het kleinst.
<b></b> Zorgt voor vette tekst.
<i></i> Zorgt voor cursieve tekst.
<tt></tt> Zorgt voor een typmachine­letter.
<cite></cite> Maakt er een citaat van.
<em></em> Accen­tueert een woord in vet.
< font size=?></font> Bepaalt de letter­grootte, in de grootte 1 t/m 7. Hoe hoger het cijfer, hoe groter de letter.
<font color=?></font> Stelt een letter­type kleur in. Hier mag u zowel de kleur­naam als de hex code invullen.
<a href="http://­www.hcc.nl"></a> Zet een hyperlink neer.

< a href="http://­www.hcc.nl" target="_blank></a> Deze link opent een nieuwe pagina.
<a href="mailto:jouw­@email.nl"></a> Zet een mail link neer.
<br> Een 'Enter', de tekst begint op een nieuwe regel.
<p></p> Maakt een nieuwe alinea, zelfde resultaat als 2 keer <br> (<br><br>).
<p align=?> Lijnt een alinea uit, left, right, of center.
<dl></dl> Maakt een definitie­lijst.

Grafische tags

<img src="plaatje.gif"> Voegt een afbeelding toe.
< img src="http://uw_site.nl/­plaatje.gif"> Start het plaatje in de map afbeel­dingen.
<img src="plaatje.gif" align=?> Lijnt een afbeel­ding uit: left, right, center; bottom, top, middle.
<img src="name" border=?> Stelt rand van de afbeel­ding. border="0" geeft dus geen rand om het plaatje.
<hr> Voegt een hori­zontale lijn in.
<hr size=?> Stelt hoogte van de lijn in.
<hr width=?> Stelt breedte van lijn in in percen­tages.
<hr noshade> Maakt een lijn zonder schaduw

Frames

Frames verdelen het browserscherm in stukken. Zo'n stuk noemen we een frame. In elk frame kan een andere HTML pagina getoond worden. Voordelen: navigatie is makkelijker. U kunt een navigatiebalk continu in beeld houden, als u hem in een frame plaatst. Nadeel: printen van een pagina wordt moeilijker en soms is het lastig te zien welke pagina vernieuwd wordt. Bovendien, de tag <frame> wordt in html5 eigenlijk niet meer gebruikt.
Een voorbeeld van een frameset:

<frameset cols="150,*">

<frame name=­"menu" ­target=­"hoofd" src=­"menu.html">

<frame name=­p"hoofd" src=­"home.html">

</frameset>

De <frameset> tag definieert hoe het venster in frames verdeeld moet worden. Elke frameset bestaat uit een aantal rijen en/of kolommen. De waarden van deze rijen/kolommen bepalen ook de breedte van de frames. Rows geeft het aantal horizontale frames aan, cols het aantal verticale frames. U kunt dit zowel met percentages als in pixels aangeven. Als u van 1 frame een vaste breedte / hoogte aangeeft, kunt u het andere frame met een * de rest van de ruimte laten vullen.

In het bovenstaande voorbeeld, is de breedte van het linkerframe 150. Het rechterframe heeft geen waarde (*) en vult de rest van de pagina op. De <frame> tag bepaalt welk html document er geopend moet worden in welk frame en evt. in welk venster die pagina geopend moet worden.

In het voorbeeld stond dit binnen de frameset:

<frame name="menu" target="hoofd" src="menu.htm">

<frame name="hoofd" src="home.htm">

Met name geeft u de naam van het frame aan en met src het bestand dat in dat frame moet openen.

Het resultaat van de code is: een pagina met links een navigatieframe.
Als u nu in het linkerframe een navigatiebalk neerzet met de links naar de andere pagina's van uw site, maakt u optimaal gebruik van de pagina.

<frameset></frameset> Hiermee begint u een frame.
<frameset rows="value,value"> Zo bepaalt u het aantal rijen en de rij-breedte, geef aan in pixels.
<frameset cols="value,value"> Zo bepaalt u het aantal kolommen en de kolom­breedte, geef aan in pixels.
<frame> Hiermee begint u een frame binnen een frame­set.
<noframes></noframes> Hier tussenin kunt u tekst neer­zetten voor de mensen zonder frames.
<frame src="URL"> Hier bepaalt u welk HTML document getoond moet worden.
<frame name="name"> Geef het frame een naam, zodat bepaalde pagina's in een frame geopend kunnen worden.
<frame marginwidth=#> Bepaalt de linker en rechter­marges van het frame.
<frame marginheight=#> Bepaalt de boven- en onder­marge van het frame.
<frame scrolling=VALUE> Bepaalt of het frame wel/niet een scroll­balk moet tonen. Gebruik "yes," "no," of "auto. " Standaard staat 'ie op auto, dus alleen als het echt nodig is
<frame noresize> Voorkomt dat het frame groter of kleiner wordt.

HTML Formulier

< form></form> Met deze tags maakt u een formulier.
<select name="NAME"></select> Maakt een pull­down menu.
<textarea name="NAME" cols=40 rows=8></textarea> Maakt een tekstvak. Cols: breedte, Rows: hoogte.
<input type="checkbox" name="NAME"> Maakt een checkbox. De tekst volgt achter de tag.
<input type="radio" name="NAME" value="x"> Maakt een radio button
<input type=text name="invoerveld" size=20> Maakt een 1 regelig invoerveld. Size is de lengte.
<input type="submit" value="NAME"> Maakt een Submit (Verzend) button.
<input type="image" border=0 name="NAME" src="name.gif"> Maakt een Submit button van een eigen plaatje.
<input type="reset"> Maakt een Reset button.

Cascading Style Sheets /CSS

CSS staat voor Cascading Style Sheets, stijlen in het CSS bestand bepalen hoe HTML elementen weergegeven moeten worden. U kunt het dus gebruiken om de layout van de website in 1 keer te regelen. Wilde u bijvoorbeeld de achtergrondkleur aanpassen, dan moest elke pagina worden geopend en de bgcolor veranderd. Nu verandert u dat in de stylesheet, en alle pagina's worden in 1 keer bijgewerkt. De beste manier is om de stylesheet als apart bestand op te slaan en deze in elke pagina aan te roepen. Dat gebeurt als volgt: <link rel="stylesheet" type="text/css" href="css/standaard.css"> .

css/standaard.css is dan de plek op uw website waar de stylesheet is opgeslagen.

css_regel.png

 

 

 

Een style-regel bestaat uit 3 delen, de selector (het element of de tag), eigenschap en een waarde. Geschreven als code, ziet dat er in het algemeen zo uit: element {eigenschap:waarde} Let goed op de accolades, die zijn heel belangrijk.

Een voorbeeld hoe de code er echt uitziet:

BODY { font-family: Verdana,arial; }
Hier geeft u dus aan, dat het lettertype Body Verdana is. Als mensen geen Verdana op hun pc hebben, zal de PC Arial gebruiken. Heeft u meerdere eigen­schappen, doe het dan als volgt:
BODY { font-family: Verdana,arial; color: #000000 }

U scheidt de delen dus met een punt-komma. De verdeling over meerdere regels is alleen om het geheel overzichtelijk te houden, u mag alle code ook op 1 regel zetten.
U kunt ook meerdere tags tegelijk definieren:

BODY,TD,P { font-family: Verdana,arial; color: #000000 }

Nu gelden bovenstaande styleregels dus zowel voor de body, als de td als de p tag.

Meer weten over CSS? Volg de de cursus.