Een complete samenvatting voor alle hoofdstukken 1 t/m 17 (uitgesloten hfst 9).
Hiernaast een overzichtelijke uitleg over flexbox.
Compact geschreven in lettertype 10, met duidelijke afbeeldingen ter visualisatie van de tekst.
Deze samenvatting is gemaakt ter voorbereiding voor de internetstand...
Inleiding en hfd 1
Hoe het web werkt?
Bij het bezoeken van een website kan de web server die de site host zich overal
in de wereld bevinden. Om de locatie van de webservers
Te vinden, zal je browser eerst verbinding maken met een Domain Name Server (
DNS).
1. Wanneer je verbinding maakt met het internet doe je dat via een Internet
Service Providor (ISP)
om erna een site te bezoeken typ je een domeinnaam of webadres in.
2. Je computer legt contact met een netwerk aan DNS dat zijn net
telefoonboeken: ze vertellen je computer het IP-adres dat bij de domeinnaam
hoort.
Dit IP adres bestaat uit 4 getallen gescheiden door een punt, elk apparaat wat
verbonden is met het internet heeft zijn eigen IP.
3. Met het unieke nummer dat de DNS geeft aan je computer kan je browser
verbinding maken met de webserver die de website die je wilt bezoeken host.
Een webserver is speciaal ingesteld voor het verzenden van webpaginas en is
altijd verbonden met het internet.
4. De webserver stuurt vervolgens de pagina waar je om gevraagd hebt naar je
webbrowser terug.
Hfd 1 Structuur
Denk eens na over artikelen die je in de krant leest: voor elk artikel is er een kop,
wat tekst en een of meer afbeeldingen.
Structuur in het artikel helpt de lezers het verhaal te begrijpen, denk nu eens aan
een verzekerings formulier deze bevat een hele andere structuur.
Online is he belangrijk aan te geven wat de informatiehierarchie is in een
document.
Met html beschrijf je deze structuur:
De openingstag <html> tm de sluitingstag </html> geeft aan dat alles tot en
met hier html code is.
De tag <body> geeft aan dat alles tot </body> in het hoofdvenster van je
browser getoond moet worden.
Tekst tussen <h1> en </h1> vormt de hoofdkop.
Een alinea staat tussen de tags <p> en </p>.
De tekst tussen <h2> en </h2> is een tussenkop.
Attributen geven extra informatie over elementen
Attribuut
naam
m
<p lang=“nl’’> alinea in het nederlands </p>
t.pt
Attribuut
waarde
De attribuutnaam geeft aan wat voor soort extra informait over de inhoud van het element gegeven moet worden, de waarde is de informatie
Over of instelling van het attribuut. Het moet tussen dubbele aanhalingstekens geplaatst worden.
Body head en title
<head> wordt vaak geplaatst voor het element body dit bevat informatie over de pagina (ipv informatie die getoond wordt in de browser).
Binnen het element <head> wordt vaak een <title> element geplaatst. De inhoud van het element title wordt ofwel bovenin de browser
Getoond of boven de plaats waar normaliter de url van de pagina die je wilt bezoeken intypt. Of op het tabblad voor die pagina.
HTML Staat voor HyperTextMarkupLanguage hypertext verwijst naar het feit dat je met HTML links kunt maken die de bezoeker de mogelijkheid
Geeft om snel en gemakkelijk van de ene naar de andere pagina te gaan. In markup taal kun je tekst annoteren, en daarmee extra betekenis aan de
inhoud van een document aanbrengen. Bij een webpagina voegen we code toe rond die tekst die we weer willen geven in de browser om het correct te
kunnen indelen. Dus de tags die we toevoegen vormen de mark-up
Je kan al beginnen met coderen op windows met kladblok/ mac met teksteditor.
Samenvatting Structuur:
• HTML-pagina’s zijn tekstdocumenten.
• HTML bestaat uit tags(tekens die binnen spekhaken staan) om de informatie waar ze omheen staan speciale betekenis te geven.
• Tags worden vaak aangeduid als elementen.
• Tags zie je meestal in paren: een openingstag en een sluitingstag met ertussenin de inhoud.
• Openingstags hebben soms attributen, die meer informatie over de inhoud van het element geven.
• Attributen hebben een naam en een waarde.
• Om HTML te leren moet je weten welke tags beschikbaar zijn, wat ze doen en waar ze kunnen staan.
Hfd 2 Tekst
Er zijn 2 soorten markup: structurele mark-up: de elementen die je kunt gebruiken om koppen en alinea’s te beschrijven.
Semantische mark-up: geven extra informatie zoals de plaats waar nadruk in de zin wordt gelegd, bijv dat iets een citaat is.
Html heeft 6 kopniveau’s <h1> voor hoofdkoppen, <h2> voor tussenkoppen, en als er nadere onderverdelingen zijn dan wordt het element <h3>
gebruikt etc.
Browsers tonen de inhoud van de koppen in verschillende grootte, De gebruiker kan deze grootte aanpassen in CSS.
Alinea’s
Om een alinea te maken begin je met een <p> en sluit je af met een </p> standaard geeft een browser tussen elke nieuwe alinea wat ruimte.
Vet en cursief
Met behulp van <b> en </b> kunnen we de tekst in vet laten verschijnen, met behulp van <i> en </i> kunnen we de tekst als cursief laten verschijnen.
Gemaakt door Chantal Valk, 1
,Met het element <sup></sup> kunnen we tekens weergeven die in superscript moeten worden neergezet zoals rangtelwoorden of wiskundige
expressies als machtsverheffingen zoals x2
Het element <sub></sub> kunnen we gebruiken voor tekens die in subscript moeten worden gezet zoals voetnoten en chemische formules zoals bij
H 0.
ze
Spaties binnen de html worden aangezien als maar een enkele spatie, dus deze witruimte zul je anders weer moeten geven maar dit wordt op dit
moment niet behandeld.
Regeleinden en horizontale lijnen:
Met behulp van <br /> hier jou tekst <br /> kan je jou tekst midden in een alinea
Op een nieuwe regel verder laten lopen.
Wil je een duidelijke overgang aangeven zoals met een nieuw onderwerp doe je dit met 1x <hr /> er verschijnt dan een horizontale lijn tussen de tekst in.
Het is niet bedoeld om met <em> of <blockqoute> de weergave van je tekst te veranderen dit hoor je op een andere manier te doen, dit is alleen voor
screenreaders/zoekmachine’s bedoeld om te beschrijven om wat voor tekst het gaat.
Belang en Nadruk
Het element <strong></strong> geeft aan dat de inhoud ervan erg belangrijk is. De woorden in dit element moeten een sterke nadruk uitgesproken
kunnen worden.
Standaard tonen browsers de woorden binnen dit element als vetgedrukt.
Het element <em></em> geeft nadruk aan die subtiele wijze de betekenis van een zin verandert, browsers tonen dit standaard cursief.
Citaten
Het element <blockquote cite=“”></blockquote> wordt gebruikt voor langere citaten van een hele alinea. Na <blockquote> begint je citaat met <p>
daarna </p> en </blockquote>
Browsers springen de inhoud hiervan vaak in.
Het element <q></q> wordt gebruikt om korte citaten te noteren binnen een alinea. Browsers horen dit met “” aan te geven alleen IE weigert dit.
Cite gebruik je als attribuut om aan te kunnen geven waar het citaat vandaan komt de waarde moet een URL zijn met meer informatie over de bron.
Afkortingen en Acroniemen
Gebruik je een van deze dan kun je het element <abbr title=“”> gebruiken, het atribuut title wordt hier gebruikt om de volledige term op te geven.
En de browser displayed het als Prof. </abbr>
Citaten en definities
Met het element <cite> kun je aangeven waar de bron van het boek wat je gebruikt vandaan komt. <cite> HTML&CSS </cite>
De eerste keer dat je een nieuwe term gebruikt binnen je website hoor je een <dfn> zwart gat </dfn> te gebruiken waar je de definitie uitlegt.
Auteursgegeven
Met het element <address> kan je de contactgegevens van de auteur van de pagina aanmaken. Hierin kan je dan een a href=“” plaatsen om een email
adres te plaatsen.
Inhoudelijke wijzigingen
Met het element <ins> kan worden aangegeven dat een tekst is toegevoegd en met het element <del> dat een tekst is verwijderd.
Met het element <s> geeft je aan dat iets niet meer juist of relevant is, bijv was 100 nu slechts 50.
Samenvatting
• Html-elemten gebruik je om structuur te beschrijven (koppen,tussenkoppen
en alinea’s)
• Zij bieden ook semantische informatie (waar moet de nadruk op liggen,
definitie van gebruikte acroniemen, wanneer bepaalde tekst een citaat is.)
Hfd 3 Lijsten
Geordende lijsten
Met het element <ol></ol> kan je een geordende lijst maken, waarbinnen je met
<li> list items kan plaatsen. Je browser displayed bij ol een optelling van
nummers. 1. 2. 3. 4. 5. Etc.
Met het element <ul></ul> kan je ongeordende lijsten maken, je browser
displayed dit met * * * * *.
Definitielijsten
Definitielijsten worden gemaakt met het element <dl></dl> binnen dit element
worden paren weergeven van <dt> en <dd>
<dt> = definitie term
<dd> = de definitie.
Pagina 66 hfd 3
Geneste lijsten
Geneste lijsten kun je weergeven door een 2de x een <ul> <li> </li> </ul> te plaatsen en zo een geneste lijst weer te kunnen geven.
Samenvatting
• Er zijn 3 soorten HTML lijsten: geordende, ongeordende en definitie lijsten.
• Geordende lijsten gebruiken nummers
• Ongeordende lijsten gebruiken opsommingstekens.
• Definitielijsten worden gebruikt om terminologie te definieren.
• Lijsten kunnen binnen elkaar worden genest.
Gemaakt door Chantal Valk, 2
, Hfd 4 Links
Links kun je maken met het element <a > hier moet je wel altijd de waarde href=“” aan toe voegen.
Dit doe je op de volgende manier: <a href=“https://www.voorbeeld.nl”>
voorbeeld </a> .
Dit wordt weegegeven op je pagina als voorbeeld .
Om een website accesibility mee te geven is het altijd belangrijk dat je links
zoveel mogelijk uitleg geven over waar de gebruiker heen gaat. Oa voor
screenreaders heel belangrijk.
Naar andere sites linken
Wanneer je naar een andere site linkt is het belangrijk dat je binnen je a href een
volledig webadres noteert dit is dan een absolute link.
Linken naar andere pagina’s op dezelfde site
Wanneer je naar andere pagina’s binnen dezelfde site linkt hoeft je de
domeinnaam in de URL niet op te geven je kunt gebruik maken van een verkorte
schrijfwijze die bekend staat als een relatieve url.
Dit doe je dan dmv: “index.html” / “about-us.html”.
URL staat voor uniform resource locator elke webpagina heeft een eigen url.
Mappenstructuur
Voor een goed werkende html code is het belangrijk om te beginnen met een Pagina 81 Hfd 4
juiste mappenstructuur, wanneer je deze stap overslaat kan je problemen krijgen met je links en het laden van images.
De hoofdmap bevat: een bestand met de naam index.html dat de homepage voor de hele site is. Afzonderlijke mappen voor de onderdelen muziek,
images en Styles voor je CSS bestand.
Elke submap bevat: een bestand met de naam index.html. Een pagina met beoordelingen: reviews.html een pagina met vermeldingen met de naam
listings.html.
De filmssectie bevat: een map met de naam cinema, een map met de naam dvd.
Hoe link je binnen je html terug naar mappen:
Vanuit dezelfde map gebruik je de bestandsnaam dus <a href=“reviews.html”>recensies</a>
Vanuit een onderliggende map de naam ervan en dan een schuine streep dus <a href=“music/listings.html”>lijsten</a>
Vanuit een map in een onderliggende map met de namen van de mappen dus <a href=“movies/dvd/reviews.html”>recensies</a>
Naar een ouder map toe met ../ dus <a href=“../index.html”>Home</a>
Naar een grootouder map toe herhaal je ../ om aan te geven dat je 2 mappen omhoog wilt. Dus <a href=“../../index.html”>Home</a>
E-maillinks
Om een link te maken die het e-mailprogramma van de gebruiker start met het opgegeven email adres gebruik je <a href=“mailto:kas@voorbeeld.nl”
kas e-mailen</a>
Dit wordt weergegeven als kas e-mailen.
Links in een nieuw venster openen
Als je wilt dat een link in een nieuw venster opent dan kan je dit doen met <a
href=“https://voorbeeld.nl” target=“_blank”> Voorbeeld website </a> (opent in
nieuw venster)
Dit wordt weergegeven als Voorbeeld website (opent in nieuw venster)
Over het algemeen wordt het als een goede gewoonte beschouwt de gebruiker
te waarschuwen voordat er een pop up pagina opent.
Naar een specifieke plek op dezelfde pagina linken op een lange pagina
Je geeft de plek waar naartoe gescrolled moet worden een id op deze manier:
<a href=“#filmklapper”> filmklapper <a> <br /> (je plaatst hier de br zodat de
volgende link op eronder weer wordt weergegeven.)
Onder in de paragraaf geef je dan een <h2 id=“filmklapper”>Filmklapper</h2>
Als mensen dan op de link filmklapper bovenin de pagina klikken scrollt de
pagina automatisch naar beneden naar het artikel.
Dit wordt weergegeven als filmklapper
Naar een specifieke plek op een andere pagina linken Pagina 86
Dit doe je dmv <a href=“../../index.html”>Home</a>
Dit wordt weergegeven als Home
Samenvatting
• Links worden gemaakt het met element <a>
• Het element <a> gebruikt het attribuut href om aan te geven naar welke pagina hij gelinkt is.
• Als je een link naar een pagina binnen je eigen site maakt, kun je beter relatieve links gebruik ipv volledige url’s (absolute).
• Je kunt links maken waarmee het e-mailprogramma met een nieuwe reeds geadresseerde e-mail opent.
• Je kunt het attribuut id gebruiken om elementen binne n een pagina aan te geven waarnaar gelinkt kan worden.
Gemaakt door Chantal Valk, 3
Voordelen van het kopen van samenvattingen bij Stuvia op een rij:
Verzekerd van kwaliteit door reviews
Stuvia-klanten hebben meer dan 700.000 samenvattingen beoordeeld. Zo weet je zeker dat je de beste documenten koopt!
Snel en makkelijk kopen
Je betaalt supersnel en eenmalig met iDeal, creditcard of Stuvia-tegoed voor de samenvatting. Zonder lidmaatschap.
Focus op de essentie
Samenvattingen worden geschreven voor en door anderen. Daarom zijn de samenvattingen altijd betrouwbaar en actueel. Zo kom je snel tot de kern!
Veelgestelde vragen
Wat krijg ik als ik dit document koop?
Je krijgt een PDF, die direct beschikbaar is na je aankoop. Het gekochte document is altijd, overal en oneindig toegankelijk via je profiel.
Tevredenheidsgarantie: hoe werkt dat?
Onze tevredenheidsgarantie zorgt ervoor dat je altijd een studiedocument vindt dat goed bij je past. Je vult een formulier in en onze klantenservice regelt de rest.
Van wie koop ik deze samenvatting?
Stuvia is een marktplaats, je koop dit document dus niet van ons, maar van verkoper chantalvalk. Stuvia faciliteert de betaling aan de verkoper.
Zit ik meteen vast aan een abonnement?
Nee, je koopt alleen deze samenvatting voor €5,49. Je zit daarna nergens aan vast.
