Samenvatting
Samenvatting Web technologie deel 1 (herfst tot kerst)
- Vak
- Web Technology
- Instelling
- Arteveldehogeschool (Artevelde)
Web technologie deel 1 (herfst tot kerst)
[Meer zien]Voorbeeld 4 van de 49 pagina's
Voorbeeld 4 van de 49 pagina's
In winkelwagenVerkoper
Volgen
Voorbeeld van de inhoud
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
<!--
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, Bancontact of creditcard 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 rhunedepoortere. Stuvia faciliteert de betaling aan de verkoper.
Zit ik meteen vast aan een abonnement?
Nee, je koopt alleen deze samenvatting voor €6,29. Je zit daarna nergens aan vast.
Is Stuvia te vertrouwen?
4,6 sterren op Google & Trustpilot (+1000 reviews)
Afgelopen 30 dagen zijn er 67474 samenvattingen verkocht
Opgericht in 2010, al 14 jaar dé plek om samenvattingen te kopen