Your SlideShare is downloading. ×
0
Basisuitleg over webpagina’s
Basisuitleg over webpagina’s
Basisuitleg over webpagina’s
Basisuitleg over webpagina’s
Basisuitleg over webpagina’s
Basisuitleg over webpagina’s
Basisuitleg over webpagina’s
Basisuitleg over webpagina’s
Basisuitleg over webpagina’s
Basisuitleg over webpagina’s
Basisuitleg over webpagina’s
Basisuitleg over webpagina’s
Basisuitleg over webpagina’s
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Basisuitleg over webpagina’s

4,320

Published on

Hier wordt uitgelegd hoe HTML werkt, Het is een inleiding om met SVG te kunnen werken in het project van 2d naar 3d van de TUDelft. …

Hier wordt uitgelegd hoe HTML werkt, Het is een inleiding om met SVG te kunnen werken in het project van 2d naar 3d van de TUDelft.

Simple explaination on html as an intrduction to our SVG-project

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
4,320
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Basisuitleg over Webpagina’s In deze diapresentatie wordt uitgelegd hoe je een simpele webpagina maakt.
  • 2. Over HTMLWebpagina’s worden gemaakt met deprogrammeertaal HTML (HyperText MarkupLanguage).
  • 3. 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
  • 4. MarkerenBij het markeren geef je een begin en eeneindsituatie aan. Je doet dat met tags.Een html-begintag bestaat uit een letter ofwoord tussen punthaken. Bijvoorbeeld: <b>.Een html-eindtag bestaat uit dezelfde letter ofhetzelfde woord, voorafgegaan door eenschuine streep. Bijvoorbeeld: </b>.Zie het voorbeeld op de volgende dia.
  • 5. Voorbeeld HTML codeDe HTML-code:<p>Hello <b>world!</b></p>.in je editor geeft:Hello world!in je webbrowser.Zoals je ziet de tag <b> dient om de tekst vet temaken. De tag <p> dient voor iedere paragraaf.
  • 6. Aan de slag.Open je html-editor. In de meeste gevallen zaldat kladblok of Notepad++ zijn.Je begint met het aangeven van enkele situaties;namelijk de situatie dat je een HTML-paginamaakt, die je verdeelt in een head-sectie en eenbody-sectie. Deze situaties worden geopend engesloten.Zie het voorbeeld op de volgende dia.
  • 7. Voorbeeld eenvoudige html-pagina<html><head><title>Mijn webpagina</title></head><body><p>Hello <b>world!</b></p></body></html>
  • 8. 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.
  • 9. Je pagina opslaan en bekijken.Je slaat je pagina op in de map ‘website’. Inkladblok werk je met ‘opslaan als’. Je selecteertbij oplaan als ‘alle documenten’ en je geeft alsnaam ‘index.html’.In Notepad++ selecteer je ‘html’ onder ‘opslaanals’ en geef je de naam ‘index.html’.Met de verkenner zoek je de pagina op en startje pagina vervolgens met een browser op.
  • 10. Het resultaatAls 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.
  • 11. Zelfstandige tagsIndien een tag niet de functie heeft eenbepaalde situatie te markeren wordt die tag nietdoor een aparte tag afgesloten. De schuinestreep komt dan –binnen de tag- achter de codete staan. Bijvoorbeeld <br /> voor een nieuweregel of <hr /> voor een horizontale streep.Ook de tag om een afbeelding in te voegenwordt op deze manier afgesloten.
  • 12. Het plaatsen van een afbeelding.Sla een kleine jpg-afbeelding op in de mapwaarin 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-sectievan je website:<img src=“afbeelding.jpg” />.Bekijk vervolgens je pagina in de browser.
  • 13. Een link naar de KNMIOm een link te maken markeer je een stukjetekst of een afbeelding met de tags die een linkrealiseren.<a href=http://www.knmi.nl>Linknaar de site van het knmi</a> of<a href=http://www.knmi.nl><imgsrc=“afbeelding.jpg” /></a>.Probeer het maar eens uit.

×