Resume
Samenvatting Web technologie deel 1 (herfst tot kerst)
- Cours
- Web Technology
- Établissement
- Arteveldehogeschool (Artevelde)
Web technologie deel 1 (herfst tot kerst)
[Montrer plus]
Vendeur
S'abonner
Aperçu du contenu
Web TechnologyMarkup
= gestandariseerde verzamling notaties om zo documenten te annoteren → inhoud
gestructureerd
- Tags
- Formattering
Instructies aan software → tekst visualiseren
Populaire Markup talen:
- HTML
- Markdown
- XML
- LaTeX
HTML
Wat is HTML?
= markup-taal om webpagina’s te structureren
Geen programmeertaal!
= verzameling van elementen die we kunnen gebruiken om onderdelen op een webpagina te
omsluiten zodat deze gevisualiseerd wordt op een welbepaalde manier
Tekst via HTML structureren als paragraaf ➔ <p></p>
HTML-elementen
! HTML-elementen = case-intensitive
- Geschreven in hoofdletters/kleine letters
- <article> of <ARTICLE> of <Article>
- Toch beter alle elementen met kleine letter
2-delige elementen: begintag + eindtag (opening tag + closing tag)
- Omsluiten inhoud
- Tekst + tags = element
Begintag: Eindtag
< kleiner dan teken < kleiner dan teken
de naam van het element / schuine streep naar voren
> groter dan teken de naam van het element
> groter dan teken
Niet allemaal begintag – inhoud – eindtag
Signle tag:
- Iets toevoegen
o <img>
- Aan-/insluiten
,Zelfsluitende tag = empty element / void element
XHTML versie = duidelijker, minder gebruikt ➔ <meta />
- Forward slash ( / ) als voorlaatste teken
NOOIT HTML en XHTML mengen!
Nesting
In elementen andere elementen plaatsen = innesten
Bv: nadruk op woord programmeren ➔ woord omsluiten met <strong>-element
<h1>Graduaat in het <strong>programmeren</strong>.</h1>
Block- en inline elementen
2 visuele categorieen:
Block-level elementen Inline elementen
= Fysiek visueel blok op pagina Meestal genest in blokelementen
Starten op nieuwe regel Geen nieuwe regel
Inhoud na elementen ook op nieuwe regel Binnen paragraaf van tekst
Invloed op structuur/outline pagina Bv:
<article>, <em>, <strong>, <img>, …
Blokelement genest in blokelementen
Blokelement niet genest in inline element
Inline:
div>The following span is an <span class="highlight">inline
element</span>;
its background has been colored to display both the beginning and end
of
the inline element's influence.</div>
In dit voorbeeld is het <div>-element = blocklevel deze bevat tekst
In die tekst is er een <span>-element = inline
Hierdoor wordt de paragraaf correct weergegeven als een enkele, ononderbroken
tekststroom, zoals deze:
‘The following span is an inline element; its background has been colored to
display both the beginning and end of the inline element's influence.’
Blocklevel:
Nu gaan we de <span> veranderen in een blocklevel element → <p>
<div>The following paragraph is a <p class="highlight">block-level
element;</p>
its background has been colored to display both the beginning and end
of
the block-level element's influence.</div>
,Als we het refreshen zal het er als volgt uitzien:
“The following paragraph is a
block-level element;
its background has been colored to display both the beginning and end of the
block-level element's influence.”
Het <p> element veranderd de volledige layout in 3 segmenten:
- De tekst voor <p>
- De tekst van <p>
- De tekst na <p>
Elementen levels gaan veranderen:
Visuele presentatie van element veranderen ➔ display (css)
Je kunt de browser laten weten dat het inline-element in een blok box moet
weergegeven worden en NIET als inline
- Door de waarde van display inline te veranderen naar block
Attributen
Met bepaalde waarde
= sleutel + waarde ➔ sleutel=”waarde”
Bevatten extra info over element zonder dat deze als waarde verschijnt
!opgelet:
Attributen enkel op begintag – NOOIT op eindtag
Spatie tussen naam element en naam attribuut
Dubbele aanhalingstekens rond waarde attribuut
<html lang="nl">
<!-- … -->
</html>
Taal van volledige HTML-document ingesteld op Nederlands
➔ lang=”waarde”
Leesrichting van taal:
➔ dir=”waarde”
Waarde Betekenis
ltr left to right
rtl right to left
<p dir="ltr" lang="nl">Deze tekst is in het Nederlands.</p>
, Boolean attributen
= attributen die geschreven worden zonder waarde en bevatten slechts 1 waarde =
naam van het attribuut
Niet aanwezig?
- Waarde = inverse van naam attribuut
True & false zijn GEEN toegelaten waarden
<button type="submit" disabled>This will be disabled</button>
<button type="submit" disabled="">This will be disabled</button>
<button type="submit" disabled="disabled">This will be disabled</button>
<button type="submit">This will be enabled</button>
Globale attributen
= toepasbaar op alle elementen (soms zonder effect)
Attribuut Betekenis
CSS-stijlklasse(s) die op het element van toepassing zijn.
class Zorgt ervoor dat CSS specifieke elementen kan selecteren via class
selectors
id Unieke identifier van het element.
lang Taal (Eng.: language) van de inhoud van het element.
style Inline-stijlen met CSS. Probeer dit zoveel mogelijk te vermijden!
Bevat additionele informatie, meestal advies, gerelateerd aan het
title
element waartoe het behoort.
Is een boolean attribuut om een indicatie te geven dat het element
hidden
nog niet of niet meer relevant is.
<p id="alinea-1" class="cursief vet" lang="nl">In Gent</p>
HTML-commentaar
Code verduidelijken
Enkel zichtbaar in broncode!
Tussen begintag ( <!-- en eindtag ( -->
<!-- Dit is commentaar. Alles, ook HTML-elementen, binnen deze twee tags wordt genegeerd door de
browser. -->
Verwijderen voor website op productieserver plaatsen
Code tijdelijk uitschakelen → HTML-tags binnen commentaar negeert door browser
<!--
Les avantages d'acheter des résumés chez Stuvia:
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
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
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 rhunedepoortere. Stuvia facilite les paiements au vendeur.
Est-ce que j'aurai un abonnement?
Non, vous n'achetez ce résumé que pour €6,29. Vous n'êtes lié à rien après votre achat.
Peut-on faire confiance à Stuvia ?
4.6 étoiles sur Google & Trustpilot (+1000 avis)
64438 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à 14 ans