Basisuitleg over webpagina’s

Basisuitleg over Webpagina’s

In deze diapresentatie wordt uitgelegd hoe je een simpele

webpagina maakt.

Over HTML

Webpagina’s worden gemaakt met de programmeertaal HTML (HyperText MarkupLanguage).

Enkele mogelijkheden van HTML.

• Met HTML wordt de tekst van een webpagina door het plaatsen van markeringen opgemaakt.

• Met HTML wordt ook een bepaalde situatie gemarkeerd.

• Met HTML neem je documenten in je pagina op.

• Met HTML maak je hyperlinks

Markeren

Bij het markeren geef je een begin en een eindsituatie aan. Je doet dat met tags.

Een html-begintag bestaat uit een letter of woord tussen punthaken. Bijvoorbeeld: .

Een html-eindtag bestaat uit dezelfde letter of hetzelfde woord, voorafgegaan door een schuine streep. Bijvoorbeeld: .

Zie het voorbeeld op de volgende dia.

Voorbeeld HTML code

De HTML-code:

Hello world!.

in je editor geeft:

Hello world!

in je webbrowser.

Zoals je ziet de tag dient om de tekst vet te maken. De tag dient voor iedere paragraaf.

Aan de slag.

Open je html-editor. In de meeste gevallen zal dat kladblok of Notepad++ zijn.

Je begint met het aangeven van enkele situaties; namelijk de situatie dat je een HTML-pagina maakt, die je verdeelt in een head-sectie en een body-sectie. Deze situaties worden geopend en gesloten.

Zie het voorbeeld op de volgende dia.

Voorbeeld eenvoudige html-pagina

<html>

<head>

<title>Mijn webpagina</title>

</head>

<body>

Hello world!

</body>

</html>

De head en de body sectie

• In de head-sectie neem je de titel, de meta-tags, het stylesheet en eventuele scripts op (In de voorbeeld beperken we ons tot de titel.).

• In de body-sectie neem je de content van je webpagina op. Dat wil zeggen alles dat zichtbaar moet zijn.

Je pagina opslaan en bekijken.

Je slaat je pagina op in de map ‘website’. In kladblok werk je met ‘opslaan als’. Je selecteert bij oplaan als ‘alle documenten’ en je geeft als naam ‘index.html’.

In Notepad++ selecteer je ‘html’ onder ‘opslaan als’ en geef je de naam ‘index.html’.

Met de verkenner zoek je de pagina op en start je pagina vervolgens met een browser op.

Het resultaat

Als het goed is zie je nu op je pagina de tekst:

‘Hello world!‘ staan.

In de tab van je browser zie je je opgegeven titel ‘mijn webpagina’ staan.

Zelfstandige tags

Indien een tag niet de functie heeft een bepaalde situatie te markeren wordt die tag niet door een aparte tag afgesloten. De schuine streep komt dan –binnen de tag- achter de code te staan. Bijvoorbeeld voor een nieuwe regel of <hr /> voor een horizontale streep.

Ook de tag om een afbeelding in te voegen wordt op deze manier afgesloten.

Het plaatsen van een afbeelding.

Sla een kleine jpg-afbeelding op in de map waarin je pagina ‘index.html’ ook is opgeslagen. Je slaat de afbeelding op onder de naam: ‘afbeelding.jpg’.

Voeg de volgende code toe aan de body-sectie van je website:

<img src=“afbeelding.jpg” />.

Bekijk vervolgens je pagina in de browser.

Een link naar de KNMI

Om een link te maken markeer je een stukje tekst of een afbeelding met de tags die een link realiseren.

<a href=http://www.knmi.nl>Link

naar de site van het knmi</a> of

<a href=http://www.knmi.nl><img

src=“afbeelding.jpg” /></a>.

Probeer het maar eens uit.

Basisuitleg over webpagina’s

Education

Transcript of Basisuitleg over webpagina’s