Summary
Samenvatting Web technologie deel 1 (herfst tot kerst)
- Course
- Institution
Web technologie deel 1 (herfst tot kerst)
[Show more]
Seller
Follow
rhunedepoortere
Content preview
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
<!--
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 rhunedepoortere. Stuvia facilitates payment to the seller.
Will I be stuck with a subscription?
No, you only buy these notes for $6.75. You're not tied to anything after your purchase.
Can Stuvia be trusted?
4.6 stars on Google & Trustpilot (+1000 reviews)
67474 documents were sold in the last 30 days
Founded in 2010, the go-to place to buy study notes for 14 years now