Summary
Samenvatting Webtechnologie
- Course
- Institution
Alle geziene onderdelen van Web Technology (GDM, Artevelde). Het bevat extra uitleg, screenshots van codes ... Met deze samenvatting behaalde ik 15/20.
[Show more]
1 review
By: gmitrovska • 1 year ago
Seller
Follow
lisannedekever
Reviews received
Content preview
WEBTECHNOLOGIEHFDST 1: MARKUP
1.1 HTML
1.1.1 WAT IS HTML?
HTML: markup-taal om webpagina’s te structureren, bestaat uit een verzameling van elementen die
we kunnen gebruiken om onderdelen op een webpagina te omsluiten zodat deze zich gedraagt of
gevisualiseerd wordt op een welbepaalde manier
1.1.2 HTML-ELEMENTEN OF TAGS
HTML-elementen of tags: manier om de website structuren, worden in kleine letters geschreven
Tweedelige elementen: bestaan uit een begintag (opening tag) en een eindtag (closing tag). Deze
tags omsluiten de inhoud. Een element is de tekst en de tag tezamen
• Begintag
o < kleiner dan teken
o de naam van het element
o > groter dan teken
• Eindtag
o < kleiner dan teken
o / schuine streep naar voren
o de naam van het element
o > groter dan teken
Zelfsluitende tags: sommige elementen bestaan enkel uit een tag. Dit wordt meestal gebruikt om
iets toe te voegen aan of in te sluitend in een document bv.: <img>
Nesting: elementen in andere elementen plaatsen, om de nadruk te leggen op een woord
Block-level elementen: vormen een fysiek visueel blok op een webpagina, het zijn meestal
structurele elementen die invloed hebben op de structuur van de webpagina
Een blokelement kan genest worden in een ander blokelement, maar Block-elementen naast
niet in een inline element elkaar plaatsen
Display van block-elementen: alle elementen staan onder elkaar {display: inline-block}
Voorbeelden
<address> <article> <aside> <blocknote> <canvas>
<dd> <div> <dl> <dt> <fieldset>
<figcaption> <figure> <footer> <form> <h1> - <h6>
<header> <hr> <li> <main> <nav>
<noscript> <ol> <p> <pre> <section>
<table> <tfoot> <ul> <video>
1
,Inline elementen: inline elementen worden meestal genest binnen blokelementen, ze verschijnen
meestal binnen een paragraaf van een tekst, het start niet op een nieuwe lijn
Display van inline-elementen: de elementen staan naast elkaar
Voorbeelden
<a> <abbr> <acronym> <b> <bdo>
<big> <br> <button> <cite> <code>
<dfn> <em> <i> <img> <input>
<kbd> <label> <map> <object> <output>
<q> <samp> <script> <select> <small>
<span> <strong> <sub> <sup> <textarea>
<time> <tt> <var>
1.1.3 ATTRIBUTEN
Attributen: geven HTML-elementen een bepaalde waarde. Ze bestaan uit een sleutel en hebben
meestal ook een waarde, ze bevatten informatie over het element zonder dat deze als waarde
verschijnt
Attribuut: sleutel=”waarde”
Voorbeelden
• Taal instellen: <html lang=”nl”>
• Leesrichting: <p dir=”ltf”>
• <Viewport>: instelling om de website automatisch aan te passen op een device
Globale attributen: attributen die toepasbaar alle elementen (soms zonder effect te veroorzaken)
Attribuut Betekenis
class CSS-stijlklasse(s) die op het element van toepassing zijn
id Unieke identifier van het element
lang Taal van de inhoud van het element
style Inline-stijlen met CSS (vermijden!)
title Advies, gerelateerd aan het element waartoe het behoort
hidden Element dat nog niet of niet meer relevant is
1.1.4 HTML-COMMENTAAR
Commentaar geven helpt je de code te verduidelijken, enkel zichtbaar in de broncode en nooit op de
webpagina zelf
Tag: <!--commentaar -->
Opmerking: bij elk paginabezoek moet die commentaar gedownload worden terwijl dit geen enkel
nut heeft voor de doorsnee websitebezoeker
1.1.5 WITRUIMTE IN HTML
Het aantal spaties zal geen rol spelen op de website zelf, de spaties worden teruggebracht naar een
enkele spatie
1.1.6 VALIDATIE
Nakijken of er fouten in de HTML zitten
W3 Validator: https://validator.w3.org/
2
,1.2 STRUCTUUR VAN EEN WEBPAGINA
1.2.1 HET HTML-BESTAND
Statische webpagina: bestaat uit een tekstbestand dat meestal de bestandsextensie .html heeft, zo
herkennen zowel de browser als de teksteditor het bestand als een HTML-document
Startpagina noem je best index.html
1.2.2 ANATOMIE VAN EEN HTML-DOCUMENT
1. Doctype: definieert het type van het document, het doel hiervan is om de browser te beletten te
switchen naar een eigenaardige modus die incompatibel is met de standaard specificaties, staat
helemaal bovenaan in het document
Element: <!DOCTYPE html>
2. <html>-element: bevat alle inhoud op de volledige pagina, alle andere elementen
(descendants/nakomelingen) zitten hiertussen
Element: <html> … </html>
3. <head>-element: een container voor al de dingen die je wil toevoegen aan de pagina, deze
worden niet getoond aan de bezoeker van de webpagina,
Descendant van <html>
het bevat de metagegevens van het HTML-document
First-child-element van het
(titel, omschrijving, tekenset …)
Element: <head> … </head> root-element <html>
<title>-element: bevat de titel van de html-pagina, verschijnt in het tabblad van de browser en
inde favorietenlijst
Element: <title> … </title>
4. <body>-element: bevat de eigenlijk inhoud van de webpagina die je aan de bezoeker van deze
webpagina wil tonen bv.: tekst, afbeeldingen, video’s,
Descendant van <html>
audio-bestanden
Second-child-element van
het root-element <html>
3
, 1.3 HEAD ELEMENTS
<head>-element: container voor al de dingen die je wil toevoegen aan een webpagina, die niet
getoond worden aan de bezoeker van deze webpagina
Dit element bevat de metagegevens van het HTML-document
1.3.1 <TITLE>-ELEMENT
<title>-element: bevat een zeer beknopte omschrijving van de website, maximum 80 karakters,
wordt in een zoekmachine als eerste weergegeven na het zoeken van bepaalde inhoud
Opgebouwd uit: titel van de webpagina, subdomein, domein, onderdelen worden gescheiden door
een verticale streep of een koppelteken
Element: <title> … </title
Bv.: <title> HTML | Web Technology | New Media Development </title>
1.3.2 <META>-ELEMENTEN
<meta>-element: data dat andere data beschrijft, gegevens over het document zelf: titel,
omschrijving, tekenset, stylesheetkoppelingen
1. Set van karakters (character encoding): belangrijk om de juiste paginaweergave te produceren
voor de bezoeker
o Meest gebruikte: UTF-8 (Unicode, bijna alle talen worden hiermee ondersteund)
o Tag: <meta charset=”UTF-8”>
2. Rendering engines: IE forceren om de meest up-to-date beschikbare “rendering engine” te
gebruiken
o Tag: <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
3. Omschrijving (description): beknopte omschrijving over de webpagina, maximum 24 woorden of
250 karakters
o Komt bij de resultaten te staan wanneer de website gezocht wordt via Google
o Tag: <meta name=”description” content=”…”>
4. Kernwoorden (keywords): beschrijving van de webpagina met behulp van een aantal
kernwoorden, maximum 8, moet minstens eenmaal voorkomen in de inhoud van de webpagina
o Tag: <meta name=”keywords” content=” …”>
5. Auteur (author): auteurs van de webpagina, eigenaar van de website, heeft geen invloed op de
indexering van de webpagina
o Tag: <meta name=”author” content=”…”>
6. Copyright: gegevens omtrent de intellectuele eigendom, bescherming wordt hiermee niet
verzekerd, heeft geen invloed op de indexering van de webpagina
o Tag: <meta name=”copyright” content=”…”>
7. Viewport: aanpassen van de webpagina aan de grootte van de webbrowsers, stelt in hoe de
website zich zal aanpassen aan het device, de grootte van het browersvenster
o Tag: <meta name=”viewport” content=width-device-width”>
4
The benefits of buying summaries with Stuvia:
Guaranteed quality through customer reviews
Stuvia customers have reviewed more than 700,000 summaries. This how you know that you are buying the best documents.
Quick and easy check-out
You can quickly pay through credit card or Stuvia-credit for the summaries. There is no membership needed.
Focus on what matters
Your fellow students write the study notes themselves, which is why the documents are always reliable and up-to-date. This ensures you quickly get to the core!
Frequently asked questions
What do I get when I buy this document?
You get a PDF, available immediately after your purchase. The purchased document is accessible anytime, anywhere and indefinitely through your profile.
Satisfaction guarantee: how does it work?
Our satisfaction guarantee ensures that you always find a study document that suits you well. You fill out a form, and our customer service team takes care of the rest.
Who am I buying these notes from?
Stuvia is a marketplace, so you are not buying this document from us, but from seller lisannedekever. Stuvia facilitates payment to the seller.
Will I be stuck with a subscription?
No, you only buy these notes for $7.59. You're not tied to anything after your purchase.
Can Stuvia be trusted?
4.6 stars on Google & Trustpilot (+1000 reviews)
64438 documents were sold in the last 30 days
Founded in 2010, the go-to place to buy study notes for 14 years now