Welkom gast! Aanmelden Registreren


Waardering:
  • 0 stemmen - gemiddelde waardering is 0
  • 1
  • 2
  • 3
  • 4
  • 5
Basistags - HTML Basis cursus
#1

Hallo,

Ik heb deze tut ergens van internet geplukt, ik vond hem wel handig voor hier. Er kunnen wat foutjes inzitten, maar ik doe mijn best om alles te fixen. Kijk en leer ;D.
De codes zijn even in PHP tekstvak, sorry.

Door de <head> en de <body> tussen <html>-tags te plaatsen, hebben we de basisstructuur van de webpagina. Tussen <body> en </body> komt de inhoud die we op internet willen laten zien.

PHP-code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html>
<
head>
<
title>Mijn eerste pagina</title>
</
head>
 
<
body>
Inhoud van de webpagina dusje tekst die je er wilt.
</
body>
</
html

De tekst die we intypen wordt netjes allemaal achter elkaar geplaatst. Of je nou één spatie tussen woorden hebt of meerdere, of zelfs hele blanco regels, de tekst wordt netjes achter elkaar geplakt.

PHP-code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html>
<
head>
<
title>Mijn tweede pagina</title>
</
head>
 
<
body>
Deze tekst wordt 
allemaal achter elkaar op ÃƒÆ’©Ã©n regel 
geplakt
.
</
body>
</
html



Om alinea's te onderscheiden wordt de paragraph tag gebruikt:
<p>RetroNet</p>.

PHP-code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html>
<
head>
<
title>Mijn derde pagina</title>
</
head>
 
<
body>
<
p>Tekst in de eerste alinea.</p>
<
p>Dit is de tweede alineaAls het doorloopt op de tweede regelblijft het dezelfde alineaPas als ik afsluit met en p wordt de alinea beëindigd en gaan we verder met de derde alinea</p>
<
p>Dit is de derde alinea</p>
</
body>
</
html

Maar wat nou als je direct onder de regel wilt beginnen en geen witregel ertussen wilt hebben? Om dat te realiseren zet je op de plek waar je de regel wilt af'breken' de 'break' tag. <br />
De volgende regel maakt nog wel deel uit van dezelfde paragraph. De 'break' is ook een beetje bijzonder, omdat het geen begin of eindtag heeft, maar opzichzelf staat. Er zijn nog andere tags die ook op deze manier werken, maar die komen we nog tegen in de volgende hoofdstukken. De XHTML versie vereist wel dat de 'break' tag met een slash (schuine streep) wordt afgesloten, omdat het geen closingtag heeft. Voor een goede werking in verschillende browsers; vergeet die schuine streep dus niet.

PHP-code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html>
<
head>
<
title>Mijn vierde pagina</title>
</
head>
 
<
body>
<
p>tekst in de eerste alinea</p>
<
p>Jantje zag eens pruimen hangen<br />
Oals eieren zo groot<br/>
't Scheen dan Jan ze wou gaan plukken<br/>
Schoon z'
n vader 't hem verbood</p>
<p>Hier is, zei hij, noch mijn vader<br />
Noch de tuinman, die het ziet:<br />
Aan een boom, zo vol geladen,<br />
Mist men vijf, zes pruimen niet.</p>

<p>Maar ik wil gehoorzaam wezen,<br />
En niet plukken; ik loop heen.<br />
Zou ik om een hand vol pruimen<br />
Ongehoorzaam wezen? Neen !</p>
</body>
</html> 

Natuurlijk willen we onze teksten titels mee geven. Ook graag titels van verschillende lagen. Zo moet de naam van de site extra groot zijn en subalinea's mogen wel kleiner. Een heading wordt aangegeven met <h1> tot en met <h6>, waarbij de <h1> het grootst is en <h6> het kleinst.

PHP-code:
<h1>Heading 1</h1>

<
h2>Heading 2</h2>

<
h3>Heading 3</h3>
<
h4>Heading 4</h4>
<
h5>Heading 5</h5>

<
h6>Heading 6</h6

Zoals gezegd zet HTML alles netjes achter elkaar tot de volgende tag. Het maakt niet uit hoeveel witruimte je daarbij gebruikt. Wil je om wat voor reden ook méér spaties tussen bepaalde woorden, gebruik de 'non-breaking-space code: &amp;nbsp;. Let er op dat je opent met het 'en'-symbooltje (&) en sluit met de 'punt-komma' (Wink.

Dit wordt bijvoorbeeld gebruikt bij het weergeven van prijzen. Als je een gewone spatie tussen het euroteken en de prijs houdt, kan het zijn dat het eurosymbool nog op de ene regel staat, terwijl het getal op de volgende regel komt. Wanneer je het in HTML als volgt weergeeft: &amp;euro;&amp;nbsp;4,95; (Het eurosymbool heeft ook een eigen code) wordt valuta-symbool en prijs als geheel gezien en blijft het intakt.
---------------------------------------------------------------
Het kan voorkomen dat je in de html-code enkele opmerkingen of aantekeningen wilt maken die niet voor de gebruiker zichtbaar mogen zijn.

Dit kun je doen door het plaatsen van <!-- vóór en --> achter de tekst

Met de tags die we nu behandeld hebben, ben je al in staat een duidelijke webpagina te maken.

Credits tut:

Joomla, maken.
PortaR, posten en eigentalig maken.
 
#2
Dat DOCTYPE hoeft er niet perse boven.
Je kan ook gewoon beginnen met <html>
Mede-oprichter RetroNet anno 2013.
 
#3
Doctype is part van de standaard, dit moet erin wil je professioneel overkomen.

Ook is het beter om de code beter te laten inspringen, zoals dit:
Code:
<html>
    <head>
       <title></title>
    </head>
</html>

Hier wordt meestal een TAB voor gebruikt.

Edit, het forum laat de code niet zomaar inspringen, dat is spijtig
 
#4
Code:
Test
mooi gedaan,
Probeer voor de inspring regels anders [ code ] & [ /code ] (geen spaties).
Trukker1998. Old but not forgotten.
 
#5
Oke, thanks.
Ik heb dit maar gekopieërd.
 
#6
Ziet er goed uit, misschien wat plaatjes toevoegen van hoe het er in een browser eruit ziet.
[Afbeelding: 22t3Eyl.png]
 
#7
Dankje voor de tip.
Wanneer ik tijd heb, zal ik het bijpassen.
Ik zal ook wel de spoiler tag gebruiken, anders wordt het zo groot.
 
#8
<meta> doe ik er ook altijd bij maarja, dat hoeft niet beslist. Bedankt, al wist ik alles al!
 
#9
(29-10-2012, 13:35)Warner. schreef: <meta> doe ik er ook altijd bij maarja, dat hoeft niet beslist. Bedankt, al wist ik alles al!

Fijn voor je dat je alles al weet.
Die meta vind ik ook wel netjes staan als het op een site komt Tounge.
 
#10
Daarom gebruik ik het ook inderdaad, zo heb ik het mezelf aan geleerd. Maar je kan het ook zonder, daarom is dit ook een goede tut (:
 
  




Leden die dit momenteel bekijken: 1 gast(en)