HTML
Je hebt onderzoek gedaan naar het werken met HTML5 middels een online cursus. Je kan een heldere structuur opzetten middels moderne semantische tags zoals NAV en SECTION. Je HTML bevat geen inline styles en javascript.
Je hebt onderzoek gedaan naar het werken met HTML5 middels een online cursus.
HTML maakt de structuur van de webpagina.
Ik volg een cursus via Pluralsight om HTML te leren.
Je kan een heldere structuur opzetten middels moderne semantische tags zoals NAV en SECTION.
HTML Structuur:
De screenshot hieronder laat zien hoe de basis van een index.html eruit kan zien.
Kopteksten
De HTML pagina bevat kopteksten die de titel en tussenkoppen van de pagina kunnen weergeven denk hierbij aan:
<h1>Front-end buildingblock</h1>
<h2>Herkansing</h2> etc.
Body & text
De body tag gebruik je door <body></body> te doen. Al de content van die website moet binnen de body tag. Alinea’s neerzetten tussen de body tag doe je als volgt:
<html>
<body>
<p>Indra Doerga</p>
</body>
</html>
Lists
Er zijn twee soorten lists die er gemaakt kunnen worden in HTML: Unordered list en Ordered list.
Unorered list:
<ul>
<li>Item1</li>
<li>Item2</li>
</ul>
Ordered list:
<ol>
<li>Item3</li>
<li>Item4</li>
</ol>
Images
Images worden als volgt toegevoegd namelijk met de images tag:
<img src=”images/frontend.png” alt=”frondend block”>
Mijn afbeelding staat in een aparte images folder waar ik naar refereer middels images/frontend.png aan te roepen.
Video’s
Video’s worden als volgt toegevoegd namelijk met de video tag:
<video controls>
<source src=”videos/cle.mp4″ type=”video/mp4″>
</video>
Mijn video staat in een aparte videos folder waar ik naar refereer middels videos/cle.mp4 aan te roepen.
Controls staat achter video zodat mijn video een play button heeft. er kon eventueel ook autoplay staan die de video vanzelf zou laten afspelen.
NAV
De nav tag word gebruikt om navigatie op je website te krijgen, voorbeelden hiervan zijn:
<nav>
<a href=”/jquery/”>jQuery</a>
<a href=”/css/”>CSS</a> |
<a href=”/js/”>JavaScript</a> |
<a href=”/html/”>HTML</a> |
</nav>
Section
De section tag defineerd secties in een html document, denk hierbij aan kopteksten, hoofdstukken en voetteksten. Denk hierbij aan:
<section>
<h1>Front-end</h1>
<p>Herkansing front-end</p>
</section>
Wat zijn sematische tags
Semantische elementen Geven de content van het element weer. Aan de tag kan je zien wat het element inhoud. <form> <table> <article> Je ziet meteen wat de inhoud van het element er uit gaat zien.
Non-semantische elementen geven niets aan over de content van het element. Denk bijvoorbeeld aan <div> <span>. Je ziet niet wat de inhoud van het element eruit gaan zien.
Je HTML bevat geen inline styles en javascript.
De CSS en JS word appart gehouden van HTML. Ieder bevat een eigen folder en file name. Wel word er in de HTML een link geplaatst die naar de bestanden refereren.
CSS syntax
Je kan werken met css selectors: tags, id’s en classes. Je gebruikt flexbox of css grid om structuur in je layout aan te brengen. Je website is responsive door te werken met relatieve eenheden en media queries. Je site werkt goed op verschillende maten schermen en apparaten, én in verschillende browsers.
Je kan werken met css selectors: tags, id’s en classes.
CSS word gezet in een apart bestand van het HTML bestand. Omdat je wel wilt dat de CSS zichtbaar is op de HTML pagina link je naar de CSS stylesheet met de volgende link in de head:
<head>
<link rel=”stylesheet” type=”text.css” href=”css/style.css”>
</head>
ID
Een tag in je html code kan je een ID meegeven. Wanneer je een id meegeeft kan je het maar één keer gebruiken in vergelijking met bijvoorbeeld een class die je vaak kan gebruiken. Een id in de CSS word gedefinieerd met het # teken. In de HTML word het geschreven als id=”block”
Html
<p id=”block”> Dit is een buildingblock die herkanst moet worden</p>
CSS
#block{
color:red;
}
Classes
Een class meegeven aan een tag is ook een mogelijkheid. Een class kan je meerdere malen gebruiken. In je CSS code gebruik je hier een . voor om aan te roepen.
HTML
<h2 class=”blocknaam”>Front-end Buildingblock<h2>
CSS
.blocknaam{
color: black;
font-size: 20px;
}
Tags
Naast specifieke tags in css te veranderen kan je ook gehele tags veranderen door simpelweg de tagnaam in te voeren. Op deze manier worden alle tags met de zelfde naam veranderd.
HTML
<h1>…<h1>
CSS
h1{
color: blue;
font-size: 30px;
}
Je gebruikt flexbox of css grid om structuur in je layout aan te brengen.
Op een eenvoudige website met een header een main een footer gebruik ik CSS grid om een structuur in mijn layout te brengen. Hieronder een voorbeeld waar er met boxen word weergegeven hoe de layout verdeeld is.
Je website is responsive door te werken met relatieve eenheden en media queries.
Ik maak de elementen responsive door de CSS width mee te laten bewegen met de pagina. Ik geen het element een id of class en ik geef hier een width aan. Ook gebruik ik de regel
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″> om de viewport van mijn pagina te zetten, dit geeft debrowser instructies hoe het de pagina moet schalen.
Hierdoor werkt de site goed op verschillende maten schermen en apparaten, en in verschillende browsers.
CSS Ontwerp
bfbdc0Je bent in staat om een bestaand visueel ontwerp/wireframes, zowel desktop als mobile, om te zetten naar CSS code. Hiervoor kan je een ontwerp gebruiken uit de interactie ontwerp lessen, of een ontwerp uit CLE. Het ontwerp hoeft niet van jezelf te zijn.
Dit is de front page wireframe van CLE2. De witframe heb ik ontworpen op Illustrator en Photoshop.
Dit is de gecodeerde versie van de wireframe.
Javascript
bfbdc0Je begrijpt hoe je met modern ES6 javascript bij de website passende functionaliteit en interactie toe kunt voegen aan je website. Je website kan input van de gebruiker verwerken met javascript, en je kan de website updaten met javascript.
