Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Webdesign HTML

Websites bouwen in HTML
by

Helga Keulen

on 29 September 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Webdesign HTML

Hoofdstuk 1
Introductie HTML

Hoofdstuk 2
Terminologie HTML

Hoofdstukken
1 en 2

Behandeld:
HTML: de praktijk
HTML: Handleiding
Wat is HTML?
De bouwstenen van HTML
Tags en Elementen
Attributen
HTML versies
W3schools.com (voor thuis)
• http://www.W3C.org/tr/html5
• HTML5 reference
Informatie over elementen en optionele attribuut/waarde-paren kun je vinden op de website van w3schools.com via de volgende link: http://www.w3schools.com/tags/ref_byfunc.asp
Introductie HTML
Terminologie HTML

Wat is HTML?
Het is de taal waarmee webpagina's geschreven worden.
Dit is een specifieke techniek waarmee een verbinding kan worden gelegd naar andere documenten of elementen (hyperlinks).
Geeft instructies hoe bepaalde elementen gestructureerd moeten worden.
Zegt niets over de opmaak (in visuele zin) van elementen.
Het opmaken van webpagina's gebeurt in een andere taal, namelijk CSS (Cascading Style Sheets).
HTML heeft een formele welgedefinieerde verzameling van expressies/elementen.

Er zijn belangrijke parallelen met een natuurlijke taal:
Een natuurlijke taal bestaat uit elementen als woorden en zinnen
HTML bestaat ook uit bepaalde elementen (expressies)
Een natuurlijke taal heeft een syntax = de grammaticale rangschikking van woorden in zinnen
HTML heeft elementen die een strikte volgorde hebben waarin ze elkaar mogen opvolgen.
Om een correcte weergave te krijgen van je HTML code in je browser, moet je je dus wel aan deze regels houden, anders begrijpt de browser je niet!
Deze code wordt door de computer geïnterpreteerd.
De webbrowser laat niet de code zelf zien, maar produceert, op basis van deze code, een weergave die geschikt is voor het menselijk oog.
We kunnen deze code wel bekijken door met de rechtermuis op een pagina te klikken en op broncode selecteren.
HTML = Hypertext Markup Language.
HTML is een Markup Language = Opmaaktaal
HTML maakt gebruik van hypertext
Er bestaan ook taalregels voor HTML
HTML is een Language = Taal
HTML is de broncode van de webpagina
HTML: de praktijk
HTML: Handleiding
Webpagina's
HTML wordt algemeen gebruikt voor webpagina's.
Het maken en bekijken van webpagina's werkt als volgt:
1. je maakt een site, d.w.z. een verzameling van HTML- en andere bestanden
2. deze bestanden plaats je op een computer waarop een webserver draait
3. een webserver is een programma dat continu checkt of er web-verzoeken binnenkomen van andere computers, de clients
4. als er een verzoek binnenkomt voor jouw pagina dan stuurt de webserver deze terug naar de client waar het verzoek vandaan kwam
5. de client ontvangt het verzoek en krijgt de website te zien die je op de webserver hebt gezet
We gaan gebruik maken van een code-based editor: Notepad++.
Met WYSIWYG (WhatYouSeeIsWhatYouGet) editors leer je weinig van HTML-codering.
Benodigdheden om een
webpagina te maken
1. Een programma
2. Een adres op het internet
3. Een browser
In de browser kun je webpagina's bekijken.
Een browser is een softwareprogramma dat de HTML en CSS code omzet.
Dit betekent dat je met HTML en CSS code instructies geeft aan een browser (tekst, afbeelding).
De browser zorgt ervoor dat de inhoud van je webpagina correct op je scherm verschijnt.
De browser is als het ware de 'tussenlaag' tussen code en weergave.
Met een 'adres' kun je je webpagina bekijken.
URL = Uniform Resource Locater.
Dit verwijst naar een specifiek bestand op een webserver.
Zodra je dit adres in een browser intypt, stuurt deze browser een verzoek naar de juiste webserver en laat het bestand zien waarom je hebt gevraagd.
– TCP/IP is een verzamelnaam voor de reeks netwerkprotocollen die voor een grote meerderheid van de netwerkcommunicatie tussen computers instaan.
Verkeer gebeurt
via protocollen
TCP/IP
TCP = Transmission Control Protocol
IP = Internetprotocol
– De naam TCP/IP is een samentrekking van de twee bekendste protocollen die deel uit maken van de TCP/IP-protocolstack (= protocolstapel)
– Het internet is het grootste en bekendste TCP/IP-netwerk.
- Het TCP/IP protocol is een afgeleide van het OSI-model.
• Het is niet de bedoeling dat je alles van HTML uit je hoofd leert.
• http://www.w3schools.com
• http://www.htmldog.com/
• http://www.w3.org/html/wiki/Learn
• https://developer.mozilla.org/en-US/docs
• Het gaat erom dat je begrijpt hoe HTML werkt en hoe je dingen kunt toepassen.
• Het is daarom vaak handig dingen op te zoeken in plaats van ze uit je hoofd te leren.
• Op de volgende websites zijn er verschillende handleidingen en tutorials te vinden.
Zoals een natuurlijke taal zoals het Nederlands is opgebouwd uit letters, woorden en zinnen, zo is HTML ook opgebouwd uit een aantal componenten.
De belangrijkste componenten zijn:
Tags en Elementen
Attributen
De bouwstenen van HTML
Tags en Elementen
Attributen
Elementen zijn de basis van HTML.
• Met behulp van elementen definieer je de structuur van je HTML bestand.
• In HTML worden zogenaamde tags gebruikt om elementen aan te duiden.
• Alles tussen de begin- en eindtag zijn de elementen.
• Er zijn een aantal belangrijke eigenschappen van tags:
5. Wanneer een element geen eindtag heeft maar alleen een begintag, dan eindigt deze begintag met een slash en een vishaak. (<elementnaam />)
4. De eindtag heeft altijd dezelfde naam als de begintag maar voorafgegaan door een slash (/).

<elementnaam>
elementinhoud
</elementnaam>
3. Datgene wat tussen de begin- en eindtag staat is de 'element-inhoud' (= datgene wat je op je webpagina te zien krijgt).
2. Tags komen vaak in paren voor: begin- en eindtag.
1.Een tag wordt omsloten door twee karakters: '<' en '>' (vishaakjes).

<elementnaam>
6. Tags kunnen 'genest' voorkomen.
Dit gebeurd wanneer je een element binnen een ander element plaatst.
Wanneer je twee of meer tags achter elkaar opent, dan moeten deze in de omgekeerde volgorde gesloten worden
(zgn. LIFO-systeem = Last In First Out).
• Attributen geven extra informatie over een HTML element.
Naast elementen kun je in HTML ook gebruik maken van attributen.
• Er kunnen meerdere attribuut/waarde-paren voorkomen in één HTML-element.
• Een attribuut/waarde-paar wordt altijd in de begin-tag van een HTML element gezet.
• De notatie van een attribuut/waarde-paar is als volgt: attribuut="waarde“
• Attributen komen altijd voor in combinatie met waarden en zo krijg je zogenaamde attribuut/waarde-paren.
Momenteel is de overgang van XHTML, HTML4 naar HTML5 gaande, maar is nog volop in ontwikkeling.
HTML versies
• HTML5 is niet hoofdlettergevoelig.
–Wij gebruiken alleen kleine letters!
• In HTML5 is een eindtag niet overal nodig:
–Wij zetten wel overal een eindtag!
• HTML5 is nog in ontwikkeling, maar wordt wel al gebruikt.
–Wij passen zo veel mogelijk HTML5 toe.
• De standaarden en nieuwe aanpassingen zijn te vinden op http://www.W3C.org/tr/html5
zeer strikte taal om websites te structureren.
Is nog in omloop maar wordt niet meer gebruikt bij nieuwe sites.
XHTML
voorloper op HTML5 met veel XHTML componenten.
Is nog in omloop maar wordt afgeraden bij nieuwe sites.
HTML4
HTML5
gebaseerd op de structuur en opbouw van een pagina.
Deze is nog in ontwikkeling, aangeraden bij nieuwe sites.
Leeuwenborgh Opleidingen
Helga Keulen &copy 2013
Webdesign
HTML
http://www.helgakeulen.nl
Full transcript