IT1 - 1718
INFORMATIETECHNOLOGIE 1
HTML
HyperText Markup Language = opmaaktaal
Element tags: om inhoud van pagina te structureren. Openingstag en sluitingstag: <h1> </h1>
<!doctype html>
<html>
<head>
<title>Hier komt de titel van je pagina6</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="stijl.css">
<meta charset="utf-8">
</head>
<body>
<h1>Hallo wereld!</h1>
</body>
</html>
<p>
Paragraaf
Header
<header> </header>
Main
<main> </main>
Footer
<footer> </footer>
<h1>…<h6>
Hoofdingen: verschillende niveaus
Belangrijkste hoofding is <h1>
<a>
Anchor: om links “te” maken
Hebben een href attribuut in de openingstag
<a href= “http://www.example.com”>Link</a>
, IT1 - 1718
<ul>
Niet-geoerdende lijsten (unordered lists): als volgorde niet uitmaakt.
Deze lijsten krijgen bullets in de browser
<li>
List items
<ul>
<li>Dit is een <a href= “http://www.example.com”>link</a></li>
<li>Dit is ook een <a href= “http://www.example2.com”>link</a></li>
<li>Dit is nog een <a href= “http://www.example3.com”>link</a></li>
</ul>
<ol>
Geordende lijsten (ordered lists): krijgen nummering in browser.
<ol>
<li>Dit is een <a href= “http://www.example.com”>link</a></li>
<li>Dit is ook een <a href= “http://www.example2.com”>link</a></li>
<li>Dit is nog een <a href= “http://www.example3.com”>link</a></li>
</ol>
<nav>
Navigatiesectie
Links binnen nav onder a-tag
Afbeelding
Img tag hoeft niet afgesloten te worden
Alt-attribuut is verplicht: tekstuele beschrijving van afbeelding
<img src= “directeur.gif” alt= “portret directeur”>
<div>
Container voor substructuur
Hieraan kan je klasses toevoegen:
<p class=”eerste”>Dit is een paragraaf.</p>
<p class=”tweede”>Dit is een tweede paragraaf.</p>
, IT1 - 1718
HTML tags
Meerdere pagina’s
Interne links verbinden individuele pagina’s met elkaar:
<nav>
<a href=“index.html” class=“selected”>Home</a>
<a href=“organisatie.html>Onze organisatie</a>
<a href=“contact.html”>Contact</a>
</nav>
Links binnen zelfde folder: pagina.html
Links naar hoger gelegen folder: ../pagina.html
Links naar subfolder: subfolder/pagina.html
<a href=“pagina.html”>mijn pagina</a>
<a href=“../pagina.html”>mijn pagina</a>
<a href=“../paginas/pagina.html”>mijn pagina</a>
<a href=“subfolder/pagina.html”>mijn pagina</a>
TARGET ATTRIBUUT
Niet verplicht!
Link openen in zelfde venster (_self) of in nieuw venster (_blank):
, IT1 - 1718
<a href=“http://...” target=“_blank”>Pagina</a>
Tables
Tabulaire data weergeven.
<table> … </table>
Rijen: <tr>, rijen verdeeld in table data met <td>. Table heading: <th>
Meerdere rijen en kolommen met elkaar verbinden door rowspan en colspan.
<tr>
<td>January</td>
<td>$100</td>
<td rowspan="2">$50</td>
</tr>
...
<tr>
<td>February</td>
<td>$100</td>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
Iframe
<iframe src=”table.html »></iframe>
Specifieert een inline frame: ander doc embedden in huidig document, bijvoorbeeld youtubefilmpjes.
Line break
<br> Harde return zonder nieuwe paragraaf te gebruiken, geen closing tag nodig (maar kan geen kwaad).
Tekst benadrukken
<b> Bold, visuele waarde
<strong> Structureel + semantische waarde
<i> Italics, visuele waarde
<em> Emphasised
Speciale karakters
Named character entities (<, >, & gebruiken in html kan browser verwarren). Lijst:
http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entrity_references en
http://bit.ly/1CQtOSi
<
>
⟨
⟩
&
©
™…
INFORMATIETECHNOLOGIE 1
HTML
HyperText Markup Language = opmaaktaal
Element tags: om inhoud van pagina te structureren. Openingstag en sluitingstag: <h1> </h1>
<!doctype html>
<html>
<head>
<title>Hier komt de titel van je pagina6</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="stijl.css">
<meta charset="utf-8">
</head>
<body>
<h1>Hallo wereld!</h1>
</body>
</html>
<p>
Paragraaf
Header
<header> </header>
Main
<main> </main>
Footer
<footer> </footer>
<h1>…<h6>
Hoofdingen: verschillende niveaus
Belangrijkste hoofding is <h1>
<a>
Anchor: om links “te” maken
Hebben een href attribuut in de openingstag
<a href= “http://www.example.com”>Link</a>
, IT1 - 1718
<ul>
Niet-geoerdende lijsten (unordered lists): als volgorde niet uitmaakt.
Deze lijsten krijgen bullets in de browser
<li>
List items
<ul>
<li>Dit is een <a href= “http://www.example.com”>link</a></li>
<li>Dit is ook een <a href= “http://www.example2.com”>link</a></li>
<li>Dit is nog een <a href= “http://www.example3.com”>link</a></li>
</ul>
<ol>
Geordende lijsten (ordered lists): krijgen nummering in browser.
<ol>
<li>Dit is een <a href= “http://www.example.com”>link</a></li>
<li>Dit is ook een <a href= “http://www.example2.com”>link</a></li>
<li>Dit is nog een <a href= “http://www.example3.com”>link</a></li>
</ol>
<nav>
Navigatiesectie
Links binnen nav onder a-tag
Afbeelding
Img tag hoeft niet afgesloten te worden
Alt-attribuut is verplicht: tekstuele beschrijving van afbeelding
<img src= “directeur.gif” alt= “portret directeur”>
<div>
Container voor substructuur
Hieraan kan je klasses toevoegen:
<p class=”eerste”>Dit is een paragraaf.</p>
<p class=”tweede”>Dit is een tweede paragraaf.</p>
, IT1 - 1718
HTML tags
Meerdere pagina’s
Interne links verbinden individuele pagina’s met elkaar:
<nav>
<a href=“index.html” class=“selected”>Home</a>
<a href=“organisatie.html>Onze organisatie</a>
<a href=“contact.html”>Contact</a>
</nav>
Links binnen zelfde folder: pagina.html
Links naar hoger gelegen folder: ../pagina.html
Links naar subfolder: subfolder/pagina.html
<a href=“pagina.html”>mijn pagina</a>
<a href=“../pagina.html”>mijn pagina</a>
<a href=“../paginas/pagina.html”>mijn pagina</a>
<a href=“subfolder/pagina.html”>mijn pagina</a>
TARGET ATTRIBUUT
Niet verplicht!
Link openen in zelfde venster (_self) of in nieuw venster (_blank):
, IT1 - 1718
<a href=“http://...” target=“_blank”>Pagina</a>
Tables
Tabulaire data weergeven.
<table> … </table>
Rijen: <tr>, rijen verdeeld in table data met <td>. Table heading: <th>
Meerdere rijen en kolommen met elkaar verbinden door rowspan en colspan.
<tr>
<td>January</td>
<td>$100</td>
<td rowspan="2">$50</td>
</tr>
...
<tr>
<td>February</td>
<td>$100</td>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
Iframe
<iframe src=”table.html »></iframe>
Specifieert een inline frame: ander doc embedden in huidig document, bijvoorbeeld youtubefilmpjes.
Line break
<br> Harde return zonder nieuwe paragraaf te gebruiken, geen closing tag nodig (maar kan geen kwaad).
Tekst benadrukken
<b> Bold, visuele waarde
<strong> Structureel + semantische waarde
<i> Italics, visuele waarde
<em> Emphasised
Speciale karakters
Named character entities (<, >, & gebruiken in html kan browser verwarren). Lijst:
http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entrity_references en
http://bit.ly/1CQtOSi
<
>
⟨
⟩
&
©
™…
