Extra: Hoe u uw website met HTML kunt verbeteren HTML is een afkorting van Hyper Text Markup Language. Zoals de term al zegt is het een "opmaak taal", dat wil zeggen het vertelt de browser door middel van HTML-tags hoe de pagina weergegeven moet worden op het scherm.
HTML
HTML is geen programmeertaal zoals vaak gedacht wordt. De HTML-tags zijn vergelijkbaar met bouwstenen uit een lego-set. Er is een bepaald aantal stenen met een vooraf bepaalde vorm die naar eigen smaak kunnen worden samengevoegd tot een bouwwerk, of beter gezegd een webpagina. Net als lego is ook HTML eenvoudig te leren, terwijl je er toch hele ingewikkelde dingen mee kunt doen. Even een uitleg van enkele belangrijke HTML termen. Iedere webpagina bevat gegevens. Deze gegevens hebben de vorm van elementen. Zo zijn er 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. Zo heeft het element "tekst" bijvoorbeeld als attributen "lettertype" en "lettergrootte". Tenslotte hebben de attributen weer verschillende waarden. Zo heeft de tekst een bepaald lettertype, bijvoorbeeld Arial of Courier. Als er geen waarde wordt opgegeven, dan wordt de standaardwaarde voor het betreffende attribuut gebruikt. Zoals gezegd bestaat een element uit een begintag, de inhoud en een eindtag. Maar wat zijn nu tags? Een tag is een stukje HTML code dat tussen twee haken: < en > staat. Een voorbeeld van een tag is en ook is een tag. Het eerste voorbeeld is een begintag, het tweede een eindtag. Een eindtag is identiek aan de begintag, maar dan met een / er voor. Er zijn ook een paar elementen die geen inhoud hebben. Deze hebben daarom wel een begintag, maar geen eindtag. Maar voor nu is dit alles wat u moet weten om aan de slag te kunnen gaan met HTML.
© 2Com2 internet & communicatie
131
maak je eigen website met webXpress
Basis opzet HTML webpagina Het volgende voorbeeld bevat het basismodel van iedere HTML pagina.
HTML
<TITLE>Titel van de pagina Inhoud van je pagina. Hier volgt een uitleg van de verschillende tags die hier gebruikt worden. Deze tag wordt gebruikt om het begin van een HTML document aan te geven. Als u een HTML bestand maakt, begint u dus altijd met . De tag wordt gebruikt om belangrijke informatie over de pagina in op te nemen. Deze informatie is (vrijwel altijd) onzichtbaar voor de bezoeker van uw pagina. U vindt hier bijvoorbeeld de titel van de pagina. <TITLE> en De <TITLE> tag is de begintag van de titel van uw pagina. Na deze begintag typt u dus de gewenste titel voor uw pagina. Deze titel ziet de bezoeker van uw website linksboven in het browserscherm. Vervolgens sluit u de tag met . Dit is de eindtag van de HEAD. Onthoud dat praktisch alle vormgevingselementen bestaan uit een begintag en een eindtag. en De en tags zijn veruit de belangrijkste tags in ieder HTML document. De werkelijke inhoud van uw pagina komt tussen deze tags te staan. De tag komt tussen de en tags en na de tag. Deze eindtag markeert het einde van een HTML document. Dit is dus de laatste tag die u gebruikt bij het maken van je pagina. Nog een opmerking: HTML behandelt hoofdletters en kleine letters hetzelfde. Het maakt dus niet uit of u <TITLE> of
typt.<br />
<br />
© 2Com2 internet & communicatie<br />
<br />
132<br />
<br />
maak je eigen website met webXpress<br />
<br />
WebXpress en de HTML weergave WebXpress vertaalt uw webpagina in HTML, de taal die gebruikt wordt om uw pagina weer te geven. Het leuke is dat u deze HTML code ook kunt zien. U kunt dus een pagina maken en de vertaling in HTML bekijken.<br />
<br />
Zo gaat u naar de HTML weergave te gaan: Klik op de tab “HTML”<br />
<br />
En zo komt u weer terug in de ontwerp weergave: Klik op de tab “Ontwerpen”<br />
<br />
© 2Com2 internet & communicatie<br />
<br />
133<br />
<br />
maak je eigen website met webXpress<br />
<br />
HTML en tekstopmaak Er zijn verschillende tags die u helpen de tekst te structureren en op te maken. Zo kunt u een overzichtelijke en mooie pagina maken. Hier volgt een uitleg van de verschillende tekst-tags. Headings: HTML heeft zes verschillende headings (koppen), genummerd van 1 tot 6, waarbij 1 de grootste tekst maakt. Een voorbeeld van een heading tag: begintag: <H1> eindtag: </H1>. Dit zijn de begin- en eindtag van H1. H3 is ongeveer de normale tekstgrootte.<br />
<br />
Headings<br />
<br />
Paragrafen Paragrafen: Lege ruimtes in uw HTML code, zoals spaties, enters en inspring-ruimte, worden altijd weergegeven als een enkele spatie indien u de HTML pagina in de browser bekijkt. Dit is handig, omdat u niet meer hoeft te letten op de lengte van uw zinnen. De browser zet de woorden namelijk automatisch op een nieuwe regel als hij een regel heeft volgeschreven. Voor de leesbaarheid is het handiger om de regels niet breder te maken dan je beeldscherm. Het aanbrengen van structuur in uw tekst doet u met de <P> tag. Deze paragraaf tag begint een nieuwe regel en doet dit na een lege regel erboven vrij te hebben gehouden. De <P> tag heeft wel een eindtag, </P>, maar deze hoeft u niet te gebruiken. De <P> tag heeft ook een attributen. Een attribuut is een instelmogelijkheid. Bijvoorbeeld: align. Met align kun je aangeven of u de tekst in de paragraaf links, midden of rechts wilt uitlijnen. Standaard is align ingesteld op left (links). <P align=”left”> Zo schrijft u de tag als je de paragraaf links wilt uitlijnen</P> <P align="center">Zo schrijft u de tag als je de paragraaf in het midden wilt uitlijnen</P> <P align="right">Zo schrijft u de tag als je de paragraaf rechts wilt uitlijnen</P> Bold, Italic, Underline: dit zijn een aantal speciale tekststijlen.<br />
<br />
Bold, Italic, Underline<br />
<br />
Met de <B> tag krijgt u vetgedrukte tekst. Bijvoorbeeld: <B>Dit is vet</B> Met de <I> tag krijgt u scheefgedrukte tekst. Bijvoorbeeld: <I>Dit is italic</I> Met de <U> tag krijgt u onderstreepte tekst. Bijvoorbeeld: <U>Dit is onderstreept</U>. De HTML code van de teksten in vet, scheefgedrukt en © 2Com2 internet & communicatie<br />
<br />
134<br />
<br />
maak je eigen website met webXpress<br />
<br />
onderstreept zier er als volgt uit: <P><STRONG>Dit is vet </STRONG></P> <P><EM>Dit is italic</EM> </P> <P><U>Dit is onderstreept</U> </P><br />
<br />
Dit is vet Dit is italic Dit is onderstreept<br />
<br />
Opdracht: Type 3 zinnen: “dit is vet”, “Dit is italic” en “Dit is onderstreept. Maak de bedoelde zinnen vet, italic en onderstreept. Ga naar de HTML weergave en bekijk de HTML code.<br />
<br />
© 2Com2 internet & communicatie<br />
<br />
135<br />
<br />
maak je eigen website met webXpress<br />
<br />
HTML en basis tabelopmaak Het gebruik van tabellen is een van de handigste functies in HTML. Practisch iedere webmaster krijgt er vroeg of laat mee te maken. Goed omgaan met tabellen is nogal moeilijk. U zult gauw in staat zijn eenvoudige tabellen te maken. Complexe tabellen vergen gewoon veel oefening en ervaring. Het volgende voorbeeld bevat het basismodel van iedere HTML tabel. <TABLE style="WIDTH: 100%" cellSpacing=1 cellPadding=1 border=1> <TBODY> <TR> <TD>Titel 1</TD> <TD>Titel 2</TD></TR> <TR> <TD>A1</TD> <TD>B1</TD></TR> <TR> <TD>A2</TD> <TD>B2</TD></TR></TBODY></TABLE><br />
<br />
A1 B1<br />
<br />
A2 B2<br />
<br />
De tabel begint met de <TABLE> tag gevolgd door de <TBODY> tag. Vervolgens begint een rij met de tag <TR> (Table Row). Iedere cel in een rij begint met tag <TD> (Table Data). Na deze tag plaatst u de informatie die u in de cel op wilt nemen. De eindtags: </TD> en </TR> zijn niet verplicht. Een nieuwe cel begint u dan weer met: <TD>. Heeft u alle cellen binnen een rij ingevuld dan begint u de volgende rij met: <TR>. Zo vult u de hele tabel in. Uiteindelijk sluit u de tabel met de eindtag: </TABLE>. Attributen van de <TABLE> tag: width: hiermee stelt u de breedte in van de tabel. Dit kunt u doen in een percentage of pixels. border: met dit attribuut stelt u de dikte van de rand van de tabel in. De waarde 0 betekent: geen rand. cellpadding: hiermee kunt u een witruimte creëren tussen de rand van de cel en de inhoud van de cel. De waarde is in pixels. De standaardwaarde is 1. cellspacing: dit stelt een ruimte in tussen de verschillende cellen in een tabel. De waarde is in pixels. De standaardwaarde is hier 1. Opdracht: Voeg een tabel van 2 rijen en 2 kolommen toe aan een lege webpagina Klik op de tab HTML om de HTML te bekijken.<br />
<br />
© 2Com2 internet & communicatie<br />
<br />
136<br />
<br />
maak je eigen website met webXpress<br />
<br />
HTML en tabelkleuren In een aantal stappen wordt nu uitgelegd hoe we deze basistabel kunnen verfraaien. De HTML code van de basis tabel ziet er als volgt uit: <TABLE style="WIDTH: 100%" cellSpacing=1 cellPadding=1 border=1> <TBODY> <TR> <TD>Titel 1</TD> <TD>Titel 2</TD></TR> <TR> <TD>A1</TD> <TD>B1</TD></TR> <TR> <TD>A2</TD> <TD>B2</TD></TR></TBODY></TABLE><br />
<br />
Titel 1 A1 B1<br />
<br />
Titel 2 A2 B2<br />
<br />
Titel 1 A1 B1<br />
<br />
Titel 2 A2 B2<br />
<br />
Opdracht: Voeg een tabel van 3 rijen en 2 kolommen toe aan een lege pagina. Vul de cellen met “Titel 1”, “Titel 2”, “A1”, “B1”, “A2”en “B2” zoals aangegeven in het voorbeeld. Ga naar de HTML weergave en bekijk de HTML code. Tabelkleuren Het inkleuren van vakken kan met het bgcolor attribuut. bgcolor: hiermee stelt u de achtergrondkleur in van de hele tabel. De waarde van de kleur moet hexadecimaal worden opgegeven. Geel is bijvoorbeeld: #FF0000 De HTML code voor het inkleuren van de hele tabel met geel ziet er als volgt uit: <TABLE style="WIDTH: 100%" cellSpacing=1 cellPadding=1 bgColor=#FFFF00 border=1> <TBODY> <TR> <TD>Titel 1</TD> <TD>Titel 2</TD></TR> <TR> <TD>A1</TD> <TD>B1</TD></TR> <TR> <TD>A2</TD> <TD>B2</TD></TR></TBODY></TABLE> Opdracht: Voeg een nieuwe tabel toe van 3 rijen en 2 kolommen Vul de cellen zoals in het voorbeeld Ga naar de HTML weergave en kleur deze, net als in het voorbeeld, de hele tabel door toevoeging van een kleur met bgColor aan de <TABLE> tag Ga daarna weer terug naar de Ontwerpen © 2Com2 internet & communicatie 137<br />
<br />
maak je eigen website met webXpress<br />
<br />
weergave en bekijk het resultaat. De HTML code voor het inkleuren van de titelregel met geel ziet er als volgt uit: <TABLE style="WIDTH: 100%" cellSpacing=1 cellPadding=1 border=1> <TBODY> <TR bgColor=#FFFF00> <TD>Titel 1</TD> <TD>Titel 2</TD></TR> <TR> <TD>A1</TD> <TD>B1</TD></TR> <TR> <TD>A2</TD> <TD>B2</TD></TR></TBODY></TABLE><br />
<br />
Titel 1 A1 B1<br />
<br />
Titel 2 A2 B2<br />
<br />
Titel 1 A1 B1<br />
<br />
Titel 2 A2 B2<br />
<br />
Opdracht: Voeg een nieuwe tabel toe van 3 rijen en 2 kolommen Vul de cellen zoals in het voorbeeld Ga naar de HTML weergave en kleur, net als in het voorbeeld de bovenste rij cellen door toevoeging van het bgColor attribuut aan de <TR> tag Ga daarna weer terug naar de Ontwerpen weergave en bekijk het resultaat. De HTML code voor het inkleuren van een cel met geel ziet er als volgt uit: <TABLE style="WIDTH: 100%" cellSpacing=1 cellPadding=1 border=1> <TBODY> <TR> <TD>Titel 1</TD> <TD>Titel 2</TD></TR> <TR> <TD bgColor=#FFFF00>A1</TD> <TD>A1</TD></TR> <TR> <TD>A2</TD> <TD>B2</TD></TR></TBODY></TABLE> Opdracht: Voeg een nieuwe tabel toe van 3 rijen en 2 kolommen Vul de cellen zoals in het voorbeeld Ga naar de HTML weergave en kleur deze, net als in het voorbeeld de bovenste rij cellen door toevoeging van het bgColor attribuut aan de <TD> tag Ga daarna weer terug naar de Ontwerpen weergave en bekijk het resultaat. © 2Com2 internet & communicatie<br />
<br />
138<br />
<br />
maak je eigen website met webXpress<br />
<br />
HTML en tabelranden<br />
<br />
In een aantal vervolgstappen wordt nu uitgelegd hoe we deze basistabel kunnen verfraaien. De HTML code van de basis tabel ziet er als volgt uit: <TABLE style="WIDTH: 100%" cellSpacing=1 cellPadding=1 border=1> <TBODY> <TR> <TD>Titel 1</TD> <TD>Titel 2</TD></TR> <TR> <TD>A1</TD> <TD>B1</TD></TR> <TR> <TD>A2</TD> <TD>B2</TD></TR></TBODY></TABLE><br />
<br />
Titel 1 A1 A2<br />
<br />
Titel 2 B1 B2<br />
<br />
Opdracht: Voeg een tabel van 3 rijen en 2 kolommen toe aan een lege pagina. Vul de cellen zoals aangegeven in het voorbeeld. Ga naar de HTML weergave en bekijk de HTML code. Tabelranden Het vormgeven van de tabelranden kan met het border en cellspacing attribuut. border: met dit attribuut stelt u de dikte van de rand van de tabel in. De waarde wordt weergegeven in aantallen pixels. Een waarde 0 betekent geen rand. cellspacing: hiermee stelt u de ruimte in tussen de verschillende cellen in een tabel. Ook nu is de waarde weer in aantallen pixels. De standaardwaarde is hier 2. De HTML code voor een tabel met een hele dikke rand ziet er als volgt uit: <TABLE style="WIDTH: 100%" cellSpacing=1 cellPadding=1 border=10> <TBODY> <TR> <TD>Titel 1</TD> <TD>Titel 2</TD></TR> <TR> <TD>A1</TD> <TD>B1</TD></TR> <TR> <TD>A2</TD> <TD>B2</TD></TR></TBODY></TABLE> © 2Com2 internet & communicatie<br />
<br />
139<br />
<br />
Titel 1 A1 A2<br />
<br />
Titel 2 B1 B2<br />
<br />
maak je eigen website met webXpress<br />
<br />
Opdracht: Voeg een nieuwe tabel toe van 3 rijen en 2 kolommen Vul de cellen zoals in het voorbeeld Ga naar de HTML weergave en pas de randdikte aan door de waarde van het border attribuut van de <TABLE> tag te wijzigen in 10 Ga daarna weer terug naar de Ontwerpen weergave en bekijk het resultaat. De HTML code voor een tabel met onzichtbare lijnen ziet er als volgt uit. <TABLE style="WIDTH: 100%" cellSpacing=1 cellPadding=1 border=0> <TBODY> <TR> <TD>Titel 1</TD> <TD>Titel 2</TD></TR> <TR> <TD>A1</TD> <TD>B1</TD></TR> <TR> <TD>A2</TD> <TD>B2</TD></TR></TBODY></TABLE><br />
<br />
Titel 1 A1 A2<br />
<br />
Titel 2 B1 B2<br />
<br />
Titel 1<br />
<br />
Titel 2<br />
<br />
A1<br />
<br />
B1<br />
<br />
A2<br />
<br />
B2<br />
<br />
Opdracht: Voeg een nieuwe tabel toe van 3 rijen en 2 kolommen en vul de cellen. Ga naar de HTML weergave en pas de randdikte aan door de waarde van het border attribuut van te wijzigen in 0. Ga daarna weer terug naar de Ontwerpen weergave en bekijk het resultaat. De HTML code voor een tabel met (zichtbare tabellijnen) veel ruimte tussen de cellen ziet er als volgt uit: <TABLE style="WIDTH: 100%" cellSpacing=10 cellPadding=1 border=2> <TBODY> <TR> <TD>Titel 1</TD> <TD>Titel 2</TD></TR> <TR> <TD>A1</TD> <TD>B1</TD></TR> <TR> <TD>A2</TD> <TD>B2</TD></TR></TBODY></TABLE> Opdracht: Voeg een nieuwe tabel toe van 3 rijen en 2 kolommen Vul de cellen zoals in het voorbeeld Ga naar de HTML weergave en pas de weergave © 2Com2 internet & communicatie 140<br />
<br />
maak je eigen website met webXpress<br />
<br />
aan door de waarde van het cellSpacing en cellBorder attribuut te wijzigen in 10 Ga daarna weer terug naar de Ontwerpen weergave en bekijk het resultaat.<br />
<br />
© 2Com2 internet & communicatie<br />
<br />
141<br />
<br />
maak je eigen website met webXpress<br />
<br />
HTML en tabelgrootte In een aantal stappen wordt nu uitgelegd hoe we deze basistabel verder kunnen verfraaien. De HTML code van de basis tabel ziet er als volgt uit: <TABLE style="WIDTH: 100%" cellSpacing=1 cellPadding=1 border=1> <TBODY> <TR> <TD>Titel 1</TD> <TD>Titel 2</TD></TR> <TR> <TD>A1</TD> <TD>B1</TD></TR> <TR> <TD>A2</TD> <TD>B2</TD></TR></TBODY></TABLE><br />
<br />
Titel 1 A1 A2<br />
<br />
Titel 2 B1 B2<br />
<br />
Tabelgrootte De breedte van de tabel kan worden ingesteld met het width attribuut. width: hiermee stelt u de breedte in van de tabel. Dit kunt u doen in een percentage of pixels. De HTML code voor het instellen van de tabel op een vaste breedte van 400 pixels ziet er als volgt uit: <TABLE cellSpacing=1 cellPadding=1 width=400px border=1> <TBODY> <TR> <TD>Titel 1</TD> <TD>Titel 2</TD></TR> <TR> <TD>A1</TD> <TD>B1</TD></TR> <TR> <TD>A2</TD> <TD>B2</TD></TR></TBODY></TABLE><br />
<br />
Titel 1 A1 A2<br />
<br />
Titel 2 B1 B2<br />
<br />
Opdracht: Voeg een nieuwe tabel toe van 3 rijen en 2 kolommen Vul de cellen zoals in het voorbeeld Ga naar de HTML weergave en pas de breedte van de tabel aan door de waarde van het width attribuut van de <TABLE> tag beide te wijzigen in 400px (pixels) Ga daarna weer terug naar de Ontwerpen weergave en bekijk het resultaat.<br />
<br />
De breedte van een cel kan ook met het width attribuut © 2Com2 internet & communicatie 142<br />
<br />
maak je eigen website met webXpress<br />
<br />
ingesteld worden. De HTML code voor het instellen van de breedte van de eerste kolom op 250 pixels en tweede kolom op 150 pixels ziet er als volgt uit:<br />
<br />
<TABLE cellSpacing=1 cellPadding=1 width=400px border=1> <TBODY> <TR> <TD width=250>Titel 1</TD> <TD width=150>Titel 2</TD></TR> <TR> <TD width=250>A1</TD> <TD width=150>B1</TD></TR> <TR> <TD width=250>A2</TD> <TD width=150>B2</TD></TR></TBODY></TABLE><br />
<br />
Titel 1 A1 A2<br />
<br />
Titel 2 B1 B2<br />
<br />
Titel 1<br />
<br />
Titel 2<br />
<br />
A1<br />
<br />
B1<br />
<br />
A2<br />
<br />
B2<br />
<br />
Opdracht: Voeg een nieuwe tabel toe van 3 rijen en 2 kolommen en vul de cellen Ga naar de HTML weergave en pas de breedte van de tabel aan door de waarde van het width attribuut van de <TABLE> tag beide te wijzigen in 400px (pixels) Ga daarna weer terug naar de Ontwerpen weergave en bekijk het resultaat. De hoogte van een cel kan met het height attribuut ingesteld worden. Height: dit stelt de hoogte in van de cel. U kunt de waarden opgeven in pixels en percentages. De HTML code voor het definiëren van verschillende hoogtes voor de titelregel en cellen ziet er als volgt uit: <TABLE cellPadding=1 width=400 border=2> <TBODY> <TR height=30> <TD width=250>Titel 1</TD> <TD width=150>Titel 2</TD></TR> <TR height=60> <TD width=250>A1</TD> <TD width=150>B1</TD></TR> <TR height=60> <TD width=250>A2</TD> <TD width=150>B2</TD></TR></TBODY></TABLE> Opdracht: Voeg een nieuwe tabel toe van 3 rijen en 2 kolommen Vul de cellen zoals in het voorbeeld © 2Com2 internet & communicatie 143<br />
<br />
maak je eigen website met webXpress<br />
<br />
Ga naar de HTML weergave en pas de breedte van de tabel aan door de waarde van het width attribuut van de <TABLE> tag beide te wijzigen in 400px (pixels) Ga daarna weer terug naar de Ontwerpen weergave en bekijk het resultaat.<br />
<br />
© 2Com2 internet & communicatie<br />
<br />
144<br />
<br />
maak je eigen website met webXpress<br />
<br />
HTML en tekstuitlijning in tabellen In een aantal stappen wordt nu uitgelegd hoe we deze basistabel nog meer kunnen verfraaien. De HTML code van een basis tabel ziet er als volgt uit: <TABLE cellPadding=1 width=400 border=1> <TBODY> <TR> <TD>Titel 1</TD> <TD>Titel 2</TD> <TD>Titel 3</TD></TR> <TR> <TD>A1</TD> <TD>B1</TD> <TD>C1</TD></TR> <TR> <TD>A2</TD> <TD>B2</TD> <TD>C2</TD></TR></TBODY></TABLE><br />
<br />
Titel 1 A1 A2<br />
<br />
Titel 2 B1 B2<br />
<br />
Titel 3 C1 C2<br />
<br />
Tekstuitlijning Het uitlijnen van teksten kan met het align en valign attribuut. align: hiermee kunt u de inhoud van de hele rij horizontaal uitlijnen, de waarden zijn: left, center en right. De standaard waarde is left. valign: hiermee kunt u de verticale uitlijning van de inhoud van de rij bepalen. Mogelijke waarden: top, center en bottom. De standaard waarde is center. Het horizontaal uitlijnen van teksten in de hele tabel. De HTML code ziet er als volgt uit: < TABLE width="100%" border="1" cellpading=1 cellspacing=1> <TR> <TD align=”left”>Titel 1</TD> <TD align=”center”>Titel 2</TD> <TD align=”right”>Titel 3</TD> </TR> <TR> <TD align=”left”>A1</TD> <TD align=”center”>B1</TD> <TD align=”right>C1</TD> </TR> <TR> <TD align=”left”>A2</TD> <TD align=”center”>B2</TD> <TD align=”right>C2</TD> </TR> </TABLE> Opdracht: © 2Com2 internet & communicatie<br />
<br />
145<br />
<br />
Titel 1<br />
<br />
Titel 2<br />
<br />
Titel 3<br />
<br />
A1<br />
<br />
B1<br />
<br />
C1<br />
<br />
A2<br />
<br />
B2<br />
<br />
C2<br />
<br />
maak je eigen website met webXpress<br />
<br />
Voeg een nieuwe tabel toe van 3 rijen en 3 kolommen Vul de cellen Ga naar de HTML weergave en lijn de teksten in de linkerkolom links uit, centreer de teksten in de middelste kolom en lijn de teksten in de rechterkolom rechts uit Ga daarna weer terug naar de Ontwerpen weergave en bekijk het resultaat. Het vertikaal uitlijnen van teksten in de hele tabel. De HTML code ziet er als volgt uit: < TABLE width="100%" border="1" cellpading=1 cellspacing=1> <TR> <TD align=”left” valign=”top”>Titel 1</TD> <TD align=”center” valign=””center”>Titel 2</TD> <TD align=”right” valig=”bottom”>Titel 3</TD> </TR> <TR> <TD align=”left” valign=”top”>A1</TD> <TD align=”center” valign=””center”>B1</TD> <TD align=”right” valig=”bottom”>C1</TD></TR> <TR> <TD align=”left” valign=”top”>A2</TD> <TD align=”center” valign=””center”>B2</TD> <TD align=”right” valig=”bottom”>C2</TD></TR> </TABLE><br />
<br />
Titel 1 Titel 2 Titel 3 A1 B1 C1 A2 B2 C2<br />
<br />
Opdracht: Voeg een nieuwe tabel toe van 3 rijen en 3 kolommen Vul de cellen zoals in het voorbeeld Ga naar de HTML weergave en lijn de teksten in de linkerkolom links en boven uit, centreer de teksten in de middelste kolom en lijn de teksten in de rechterkolom rechts en beneden uit Ga daarna weer terug naar de Ontwerpen weergave en bekijk het resultaat.<br />
<br />
© 2Com2 internet & communicatie<br />
<br />
146<br />
<br />
maak je eigen website met webXpress<br />
<br />
HTML en samenvoegen van cellen In deze laatste stap een aantal stappen wordt uitgelegd hoe we deze basistabel helemaal naar onze hand kunnen zetten. De HTML code van een basis tabel ziet er als volgt uit: <TABLE cellPadding=1 width="100%" border=1> <TBODY> <TR> <TD>Titel 1</TD> <TD>Titel 2</TD> <TD>Titel 3</TD></TR> <TR> <TD>A1</TD> <TD>B1</TD> <TD>C1</TD></TR> <TR> <TD>A2</TD> <TD>B2</TD> <TD>C2</TD></TR></TBODY></TABLE><br />
<br />
Titel 1 A1 B1<br />
<br />
Titel 2 B1 B2<br />
<br />
Titel 3 C2 C2<br />
<br />
Samenvoegen van cellen Het samenvoegen van cellen kan met het colspan en rowspan attribuut. colspan: bepaalt het aantal kolommen dat de cel inneemt. rowspan: bepaalt het aantal rijen dat de cel inneemt. Het samenvoegen van de drie titelcellen tot één cel ziet er in HTML als volgt uit: <TABLE cellPadding=1 width="100%" border=1> <TBODY> <TR> <TD colSpan=3>Titel van tabel</TD></TR> <TR> <TD>A1</TD> <TD>B1</TD> <TD>C1</TD></TR> <TR> <TD>A2</TD> <TD>B2</TD> <TD>C2</TD></TR></TBODY></TABLE><br />
<br />
Opdracht: Voeg een nieuwe tabel toe van 3 rijen en 3 kolommen Vul de cellen zoals in het voorbeeld Ga naar de HTML weergave voeg de cellen van de titelrij samen Ga daarna weer terug naar de Ontwerpen weergave en bekijk het resultaat. © 2Com2 internet & communicatie 147<br />
<br />
A1 B1<br />
<br />
Titel van tabel B1 B2<br />
<br />
C1 C2<br />
<br />
maak je eigen website met webXpress<br />
<br />
Het samenvoegen van de A1 en B1 cel tot X cel ziet er in HTML als volgt uit: <TABLE cellPadding=1 width="100%" border=1> <TBODY> <TR> <TD rowSpan=3>X</TD> <TD>Titel 2</TD> <TD>Titel 3</TD></TR> <TR> <TD>B1</TD> <TD>C1</TD></TR> <TR> <TD>B2</TD> <TD>C2</TD></TR></TBODY></TABLE><br />
<br />
X<br />
<br />
Titel 2 B1 B2<br />
<br />
Titel 3 C1 C2<br />
<br />
Opdracht: Voeg een nieuwe tabel toe van 3 rijen en 3 kolommen en vul de cellen. Ga naar de HTML weergave voeg de cellen van de eerste kolom samen. Ga daarna weer terug naar de Ontwerpen weergave en bekijk het resultaat. En natuurlijk kunnen colspan en rowspan ook gecombineerd worden, dit ziet er in HTML als volgt uit: <TABLE cellPadding=1 width="100%" border=1> <TBODY> <TR> <TD colSpan=3>Titel van tabel</TD></TR> <TR> <TD rowSpan=2>A1</TD> <TD>B1</TD> <TD>C1</TD></TR> <TR> <TD>B2</TD> <TD>C2</TD></TR></TBODY></TABLE><br />
<br />
Titel van tabel B1 X B2<br />
<br />
C1 C2<br />
<br />
Opdracht: Voeg een nieuwe tabel toe van 3 rijen en 3 kolommen Vul de cellen zoals in het voorbeeld Ga naar de HTML weergave voeg de cellen van de eerste rij en de A1 en de A2 cellen samen Ga daarna weer terug naar de Ontwerpen weergave en bekijk het resultaat.<br />
<br />
© 2Com2 internet & communicatie<br />
<br />
148<br />
<br />
maak je eigen website met webXpress<br />
<br /> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form role="form" method="post" action="https://adoc.pub/report/extra-hoe-u-uw-website-met-html-kunt-verbeteren" style="border: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Report "Extra: Hoe u uw website met HTML kunt verbeteren"</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Your name</label>
<input type="text" name="name" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Reason</label>
<select name="reason" required="required" class="form-control">
<option value="">-Select Reason-</option>
<option value="pornographic" selected="selected">Pornographic</option>
<option value="defamatory">Defamatory</option>
<option value="illegal">Illegal/Unlawful</option>
<option value="spam">Spam</option>
<option value="others">Other Terms Of Service Violation</option>
<option value="copyright">File a copyright complaint</option>
</select>
</div>
<div class="form-group">
<label>Description</label>
<textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea>
</div>
<div class="form-group">
<div style="display: inline-block;">
<div class="g-recaptcha" data-sitekey="6LcEnMcZAAAAAFHzKKgaE-Qh57XzUTzpfRElD4dP"></div>
</div>
</div>
<script src='https://www.google.com/recaptcha/api.js'></script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function () {
var inner_height = $(window).innerHeight() - 250;
$('#pdfviewer').css({"height": inner_height + "px"});
});
</script>
<footer class="footer" style="margin-top: 60px;">
<div class="container-fluid">
Copyright © 2024 ADOC.PUB. All rights reserved.
<div class="pull-right">
<span><a href="https://adoc.pub/about">About Us</a></span> |
<span><a href="https://adoc.pub/privacy">Privacy Policy</a></span> |
<span><a href="https://adoc.pub/term">Terms of Service</a></span> |
<span><a href="https://adoc.pub/copyright">Copyright</a></span> |
<span><a href="https://adoc.pub/contact">Contact Us</a></span> |
<span><a href="https://adoc.pub/cookie_policy">Cookie Policy</a></span>
</div>
</div>
</footer>
<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="add-note-label">Sign In</h4>
</div>
<div class="modal-body">
<form action="https://adoc.pub/login" method="post">
<div class="form-group">
<label class="sr-only" for="email">Email</label>
<input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" />
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<div class="form-group">
<div class="checkbox">
<label class="form-checkbox">
<input type="checkbox" name="remember" value="1" />
<i class="form-icon"></i> Remember me
</label>
<label class="pull-right"><a href="https://adoc.pub/forgot">Forgot password?</a></label>
</div>
</div>
<button class="btn btn-primary btn-block" type="submit">Sign In</button>
</form>
</div>
</div>
</div>
</div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-177279549-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-177279549-1');
</script>
<script src="https://adoc.pub/assets/js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://adoc.pub/assets/css/jquery-ui.css">
<script>
$(function () {
$("#document_search").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://adoc.pub/suggest",
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response(data);
}
});
},
autoFill: true,
select: function( event, ui ) {
$(this).val(ui.item.value);
$(this).parents("form").submit();
}
});
});
</script>
<!-- cookie policy -->
<div id="ADOCPUB_cookie_box" style="z-index:99999; border-top: 1px solid #fefefe; background: #FFC107; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;">
Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://adoc.pub/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_ADOCPUB_cookie_box();return false;">Agree & close</a>
</div>
<script>
function accept_ADOCPUB_cookie_box() {
document.cookie = "ADOCPUB_cookie_box_viewed=1;max-age=15768000;path=/";
hide_ADOCPUB_cookie_box();
}
function hide_ADOCPUB_cookie_box() {
var cb = document.getElementById('ADOCPUB_cookie_box');
if (cb) {
cb.parentElement.removeChild(cb);
}
}
(function () {
var ADOCPUB_cookie_box_viewed = (function (name) {
var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
return matches ? decodeURIComponent(matches[1]) : undefined;
})('ADOCPUB_cookie_box_viewed');
if (ADOCPUB_cookie_box_viewed) {
hide_ADOCPUB_cookie_box();
}
})();
</script>
<!-- end cookie policy -->
</body>
</html>
