Samenvatting Webapplicaties I

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
&nbsp 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
&amp &
&quot “
&copy ©
<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