Webapps I
HTML
<!DOCTYPE HTML>
<html lang=”en”>
<head>
<meta charset=”utf-8”>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a web page</p>
</body>
</html>
Of typ in Visual studio code doc en hit enter à done
COMMENTAAR IN HTML
<!—Commentaar -->
CSS LINKEN AAN HTML
<link href=”css/styles.css” type=”text/css” rel=”stylesheet” />
STRUCTUUR
<header> </header> => paginatitel/logo/evt navigatie
1
, Webapps I
<footer></footer> => copyright, contact, extra links,…
<nav></nav> => navigatiesectie
<article></article> => zelfstandig stuk inhoud
<aside></aside> => zijdelingse info (info artikel, bronverwijzing, sidiebar, tweets, advertentie,…)
<section></section> => groepeert gerelateerde info, heeft meestal eigen kop
<main></main> => belangrijkste inhoud webpagina
<div></div> => geen betekenis
Element Functionaliteit
<h1> -<h6> Hoofdingen
<em> Accent op tekst leggen (italic)
<small> Kleinere tekst
<strong> Benadrukt stuk tekst (bold)
<sub> Subscript tekst
<sup> Superscript tekst
<p> Paragraaf
<br> Line break
  Non-breaking-space (geforceerde spatie)
<hr> Horizontale lijn over breedte pagina
<blockquote> Lange citaten – wordt als één blok getoond
<q> Kort citaat. Automatisch aanhalingstekens
toegevoegd
<cite> Verwijzing naar boek, film, à auteur, link, titel
<abbr> Afkorting à in attribuut title kan je verklarende
tekst opnemen
<dfn> Definitie van een term
<time> Duidt op tijdstip/datum
<address> Adres met contact informatie (ook email,telnr)
<ins> Stuk ingevoegde tekst
<del> Stuk verwijderde tekst
<s> Doorgehaalde tekst
<small> Kleiner lettertype
& &
" “
© ©
<ol> Ordered list
<ul> Unordered list
<li> listitem
<dl> definitie lijst
<dt> term waarvoor definitie wordt gegeven
<dd> Definitie term
<span> </span> Heeft hetzelfde nut als een div, alleen kan dit
als inline element gebruikt worden
2
, Webapps I
URL
<a href=http://www.hogent.be>Hogeschool Gent</a>
Target=”_blank” gebruiken om weer te geven in nieuw tabblad
<a href=mailto:>Mail de webmaster</a>
Download=”naam” om een waarde te geven bij download
Rel=”nofollow” zodat zoekrobots link niet volgen
href=”#Jan” om de pagina te laten springen naar het element met id #jan
AFBEELDINGEN
<img src=”../images/chocolate.jpg” alt=”Chocolate” title=”Chocolate bar”/>
In link: <a href=”html/registreer.html”><img src=”images/iconreg.gif” alt=”iconReg”/></a>
INKAPSELEN
<figure>
<figcaption></figcaption>
</figure>
CSS
Eigenschap Value Functionaliteit
font-family family name | inherit Lettertype
font-size absolute-size | relative-size | length | Lettergrootte
percentage | inherit
Length … em of … px Lengte
Font-weight 100|200|300|400|500|600|700|800|900| lettergewicht
bold|bolder|lighter|normal|inherit
font-style italic|normal|oblique|inherit letterstijl
font-variant normal|small-caps|inherit lettervariant (normal,
klein kapitaal)
letter-spacing length|normal|inherit plaats tussen letters
word-spacing length|normal|inherit plaats tussen woorden
line-height normal|<number>|<length>|<percentage> | lijnhoogte
inherit
text-align center|justify|left|right|inherit tekst-alignatie
text-decoration underline|overline|line-trough|none|blink | onderlijnen,
inherit doorlijnen,..
text-indent lenth|percentage|inherit Eerste lijn inspringen
text-transform capitalize|lowercase|none|uppercase|inheri tekst omzetten in
t hoofletter+kleine,
allemaal hoofdletters,…
color color|inherit tekstkleur
background-color color|transparent|inherit achtergrondkleur
list-style-type (ul) none|disc|circle|square lijstsymbool
3
HTML
<!DOCTYPE HTML>
<html lang=”en”>
<head>
<meta charset=”utf-8”>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a web page</p>
</body>
</html>
Of typ in Visual studio code doc en hit enter à done
COMMENTAAR IN HTML
<!—Commentaar -->
CSS LINKEN AAN HTML
<link href=”css/styles.css” type=”text/css” rel=”stylesheet” />
STRUCTUUR
<header> </header> => paginatitel/logo/evt navigatie
1
, Webapps I
<footer></footer> => copyright, contact, extra links,…
<nav></nav> => navigatiesectie
<article></article> => zelfstandig stuk inhoud
<aside></aside> => zijdelingse info (info artikel, bronverwijzing, sidiebar, tweets, advertentie,…)
<section></section> => groepeert gerelateerde info, heeft meestal eigen kop
<main></main> => belangrijkste inhoud webpagina
<div></div> => geen betekenis
Element Functionaliteit
<h1> -<h6> Hoofdingen
<em> Accent op tekst leggen (italic)
<small> Kleinere tekst
<strong> Benadrukt stuk tekst (bold)
<sub> Subscript tekst
<sup> Superscript tekst
<p> Paragraaf
<br> Line break
  Non-breaking-space (geforceerde spatie)
<hr> Horizontale lijn over breedte pagina
<blockquote> Lange citaten – wordt als één blok getoond
<q> Kort citaat. Automatisch aanhalingstekens
toegevoegd
<cite> Verwijzing naar boek, film, à auteur, link, titel
<abbr> Afkorting à in attribuut title kan je verklarende
tekst opnemen
<dfn> Definitie van een term
<time> Duidt op tijdstip/datum
<address> Adres met contact informatie (ook email,telnr)
<ins> Stuk ingevoegde tekst
<del> Stuk verwijderde tekst
<s> Doorgehaalde tekst
<small> Kleiner lettertype
& &
" “
© ©
<ol> Ordered list
<ul> Unordered list
<li> listitem
<dl> definitie lijst
<dt> term waarvoor definitie wordt gegeven
<dd> Definitie term
<span> </span> Heeft hetzelfde nut als een div, alleen kan dit
als inline element gebruikt worden
2
, Webapps I
URL
<a href=http://www.hogent.be>Hogeschool Gent</a>
Target=”_blank” gebruiken om weer te geven in nieuw tabblad
<a href=mailto:>Mail de webmaster</a>
Download=”naam” om een waarde te geven bij download
Rel=”nofollow” zodat zoekrobots link niet volgen
href=”#Jan” om de pagina te laten springen naar het element met id #jan
AFBEELDINGEN
<img src=”../images/chocolate.jpg” alt=”Chocolate” title=”Chocolate bar”/>
In link: <a href=”html/registreer.html”><img src=”images/iconreg.gif” alt=”iconReg”/></a>
INKAPSELEN
<figure>
<figcaption></figcaption>
</figure>
CSS
Eigenschap Value Functionaliteit
font-family family name | inherit Lettertype
font-size absolute-size | relative-size | length | Lettergrootte
percentage | inherit
Length … em of … px Lengte
Font-weight 100|200|300|400|500|600|700|800|900| lettergewicht
bold|bolder|lighter|normal|inherit
font-style italic|normal|oblique|inherit letterstijl
font-variant normal|small-caps|inherit lettervariant (normal,
klein kapitaal)
letter-spacing length|normal|inherit plaats tussen letters
word-spacing length|normal|inherit plaats tussen woorden
line-height normal|<number>|<length>|<percentage> | lijnhoogte
inherit
text-align center|justify|left|right|inherit tekst-alignatie
text-decoration underline|overline|line-trough|none|blink | onderlijnen,
inherit doorlijnen,..
text-indent lenth|percentage|inherit Eerste lijn inspringen
text-transform capitalize|lowercase|none|uppercase|inheri tekst omzetten in
t hoofletter+kleine,
allemaal hoofdletters,…
color color|inherit tekstkleur
background-color color|transparent|inherit achtergrondkleur
list-style-type (ul) none|disc|circle|square lijstsymbool
3
