Garantie de satisfaction à 100% Disponible immédiatement après paiement En ligne et en PDF Tu n'es attaché à rien
logo-home
Recherché précédemment par vous
Recherché précédemment par vous
logo
Samenvatting Webtechnologie €6,99
Ajouter au panier
Accédez rapidement à
Aperçu
  2.  
  3. Arteveldehogeschool (Artevelde)
  4.  
  5. Grafische En Digitale Media
  6.  
  7. Web Technology

Resume

Samenvatting Webtechnologie

1 vérifier
 6 fois vendu

Alle geziene onderdelen van Web Technology (GDM, Artevelde). Het bevat extra uitleg, screenshots van codes ... Met deze samenvatting behaalde ik 15/20.

Aperçu 4 sur 52  pages

Infos sur le Document

  • 7 décembre 2021
  • 52
  • 2020/2021
  • Resume

Sujets

École, étude et sujet

Tous les documents sur ce sujet (9)

1  vérifier

review-writer-avatar

Par: gmitrovska • 2 année de cela

Vendeur

avatar-seller
lisannedekever

Avis reçus

Aperçu du contenu

WEBTECHNOLOGIE
HFDST 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

Les avantages d'acheter des résumés chez Stuvia:

Qualité garantie par les avis des clients

Qualité garantie par les avis des clients

Les clients de Stuvia ont évalués plus de 700 000 résumés. C'est comme ça que vous savez que vous achetez les meilleurs documents.

L’achat facile et rapide

L’achat facile et rapide

Vous pouvez payer rapidement avec iDeal, carte de crédit ou Stuvia-crédit pour les résumés. Il n'y a pas d'adhésion nécessaire.

Focus sur l’essentiel

Focus sur l’essentiel

Vos camarades écrivent eux-mêmes les notes d’étude, c’est pourquoi les documents sont toujours fiables et à jour. Cela garantit que vous arrivez rapidement au coeur du matériel.

Foire aux questions

Qu'est-ce que j'obtiens en achetant ce document ?

Vous obtenez un PDF, disponible immédiatement après votre achat. Le document acheté est accessible à tout moment, n'importe où et indéfiniment via votre profil.

Garantie de remboursement : comment ça marche ?

Notre garantie de satisfaction garantit que vous trouverez toujours un document d'étude qui vous convient. Vous remplissez un formulaire et notre équipe du service client s'occupe du reste.

Auprès de qui est-ce que j'achète ce résumé ?

Stuvia est une place de marché. Alors, vous n'achetez donc pas ce document chez nous, mais auprès du vendeur lisannedekever. Stuvia facilite les paiements au vendeur.

Est-ce que j'aurai un abonnement?

Non, vous n'achetez ce résumé que pour €6,99. Vous n'êtes lié à rien après votre achat.

Peut-on faire confiance à Stuvia ?

4.6 étoiles sur Google & Trustpilot (+1000 avis)

69252 résumés ont été vendus ces 30 derniers jours

Fondée en 2010, la référence pour acheter des résumés depuis déjà 15 ans

Commencez à vendre!
€6,99  6x  vendu
  • (1)
Ajouter au panier
Ajouté