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

Html en CSS

No description
by

Ron Wessels

on 5 October 2017

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Html en CSS

End
Wat is HTML?
Snippet
<!DOCTYPE html>
<html>
<head>
<title>Dit is de titel die in de tab van de browser verschijnt.</title>
</head>
<body>
<h1>Dit is de titel in de pagina!</>
<p>Dit is een paragraaf.</p>
</body>
</html>
Elementen (Elements)
<tagname>content</tagname>
Geneste elementen
Stel je hebt een <p>content</p> element.
Attributen
HTML elementen kunnen attributen hebben.
Attributen leveren extra informatie aan het element.
Attributen komen alleen in de starttag voor.
Attributen vormen het naam/waarde paar, zoals: naam="waarde"
Html en CSS
Vorm geven en stijlen
HTML
The language for building web pages.
HyperText
Markup
Language
http://www.w3schools.com/
HTML is a markup language for describing web documents (web pages).
HTML stands for Hyper Text Markup Language
A markup language is a set of markup tags
HTML documents are described by HTML tags
Each HTML tag describes different document content
Bibliotheek
Het element bevat alles vanaf de begintag, de content en de eindtag.
Je kunt binnen het p element andere elementen stoppen.
<p><h2>subtitel</h2><h1>Titel</h1><img... />tekst</p>
<!DOCTYPE element>
<html lang="en-US">
<head> etc
<a href="http://www.pelato.nl">Pelato</a>
href attribuut
image attributen
<img src="aapje.jpg" width="104" height="142">
Het alt attribuut
<img src="aapje.jpg" alt="aapje" width="104" height="142">
De alt attribuut bepaalt dat er een alternatieve tekst gebruikt moet worden, wanneer een html-element niet kan worden weergegeven.
De waarde van het alt attribuut kan worden gelezen door screenreaders.
1.
2.
CSS is een taal die de stijl van een HTML-document verzorgt.

Met andere woorden:
HTML bepaalt de structuur van een site. CSS zorgt ervoor hoe HTML-elementen er uit zien.
Wat is CSS?

CSS staat voor Cascading Style Sheets.

CSS beschrijft hoe HTML-elementen moeten worden weergegeven op het scherm, papier, of in andere media.

CSS scheelt een hoop werk. Het kan de layout van meerdere webpagina's tegelijk besturen.
Externe stylesheets worden opgeslagen in CSS-bestanden.
CSS heeft dus een groot probleem opgelost.
HTML zelf was nooit bedoeld voor het opmaken van een Web-pagina!
HTML werd opgericht om de inhoud te beschrijven van een webpagina, zoals:
<h1>Dit is een kop</h1>
<p>Dit is een paragraaf.</p>

Toen tags als <font> en kleur attributen werden toegevoegd aan HTML specificatie, werd het een nachtmerrie voor webontwikkelaars.
Ontwikkeling van grote websites, waar lettertypen en kleurinformatie aan elke pagina werd toegevoegd, resulteerde in een lang en duur productie proces.
Om dit probleem op te lossen, heeft het World Wide Web Consortium (W3C) CSS gecreëerd.

CSS verwijderde de opmaak van de HTML-pagina!
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
text-align: center;
}
</style>
</head>
<body>

<p>Hallo Wereld!</p>
<p>Deze paragraaf is gestijld door css.</p>

</body>
</html>

Voorbeeld:
Beschrijving:
Voorbeeld:
HTML zorgt voor de structuur van een huis.
CSS zorgt ervoor hoe een huis er uitziet.
Eén stylesheet voor meerdere html documenten
Meerdere CSS stylesheets voor één HTML document
Elke browser heeft zijn eigen DEFAULT stylesheet
Jij overschrijft met
Maar de gebruiker blijft altijd de controle over het uiterlijk van de pagina behouden.
De gebruiker kan inzoomen of de plaatjes weglaten en/of bepaalde scripts uitschakelen.
Er zijn mensen met beperkingen. De content moet altijd hetzelfde blijven.
SYNTAX
Global selectors zoals ul, p of h1 bepalen de stijl van alle ul's, p's of h1's van het html document.
Class selectors kan je zo vaak als je wil gebruiken.
De naam doet er niet toe.
ID selectors kunnen maar één keer voorkomen op een pagina.
Hele specifieke elementen kunnen hun eigen class of id meekrijgen.
Class en id naamgeving
geen whitespace of speciale karakters
hoofdletter gevoelig
Descendent selectors
Afstammeling
CSS en positionering
Box model
De grootte van de box
Positie van de box
Full transcript