html de stijl – Prikkels Trainingen Aruba

Basiscursus HTML en CSS

De CSS syntax

CSS wordt gebruikt om de vormgeving van een of meerdere HTML pagina’s vast te leggen.
We doen dit dus ook met code?
CSS-code heeft een andere syntax als HTML.
Deze syntax is eenvoudiger wat betreft structuur, maar heeft wel heel veel mogelijkheden waardoor het moeilijker lijkt.

Eerst even een korte uitleg van de syntax;

De CSS syntax

Regel 1: @charset “UTF-8”
Hier wordt vastgelegd dat het bestand door de browser gelezen moet worden met karakterset UTF-8
Dan weet je zeker dat de browser straks alle code goed begrijpt.
CSS-rule: Het script-blokje van regel 3 tot en met regel 7 noemen we een CSS-rule. Die bestaat altijd uit een selector en een of meer properties met elk een value.
Regel 3: De selector.
Dat is de naam van het HTML element dat je gaat vormgeven.
Bijvoorbeeld h1, h2, p, a of img.
Ook em, strong en span kunnen hier gebruikt worden.
Regel 4, 5 en 6: Declaratieblok
Het declaratieblok in het voorbeeld heeft 3 stijlregels (declaraties).
het declaratieblok staat altijd tussen accolades { }
Net als in HTML is het ook hier belangrijk dat alles dat geopend wordt ook weer afgesloten wordt.
Elke declaratie bestaat uit een eigenschap en een waarde.
Property is de eigenschap
value is de waarde van die eigenschap.
Na elke property staat een dubbele punt : en achter elke value een puntkomma ;

Nou….. Dat was eigenlijk alles. De theorie heb je nu gehad.
Op naar de oefeningen!

				
					@charset "UTF-8";

selector{
	peroperty: value;
	peroperty: value;
	peroperty: value;
}

Een nieuw CSS bestand maken

Start Sublime text en open de map van opdracht_1.
Kies File – New File.
Kies File – Save om het nieuwe bestand op te slaan in de map opdracht_1
Geef het bestand de naam style.css

style.css koppelen aan index.html

open het bestand index.html
Klik achter de title-tag sluiten. Geef een enter en typ <li
Kies de sugestie link
Achter href typ je tussen de aanhalingstekens style.css
Kijk op regel 6 in het voorbeeld hoe het er uit moet zien!

De bestanden zijn nu gekoppeld.

				
					<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>De ontdekkingen van jouw naam</title>
    <link data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'"  rel="preload" type="text/css" href="style.css">
</head>
<body> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="https://www.prikkels.info/wp-content/litespeed/js/fafc1c06d6a114f3cd527719cf1f019a.js?ver=9171c"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
</html>

De eerste CSS-rule

We kunnen nu aan de slag met de opmaak van het HTML-bestand.
Open index.html in Firefox.
Om te beginnen typ je in Sublime Text de code uit het voorbeeld over in jouw CSS-bestand.
Let goed op dat je geen syntaxfouten maakt.
Maak ook in CSS weer gebruik van de suggesties die Sublime Text geeft.
Dat voorkomt fouten en het bespaart je veel tijd.

De selector die we hier aanspreken is h1.
Dat is dus het h1-element in de HTML-pagina.
We geven hier de property: font-family de value: sans-serif.
In mensentaal betekent dat:
“Verander het lettertype in schreefloos”.
Bewaar het CSS-bestand Ctrl+s of (Cmd+s op mac).
Switch naar firefox .
Kijk goed naar het h1-element (Explorers United).
Ververs de pagina met Ctrl+r of (Cmd+r op mac).
Als je ziet dat er iets is veranderd heb je het goed gedaan.

				
					@charset "UTF-8";

h1{
	font-family: sans-serif;
}

Je kunt nu verder met het uitbreiden van de rule voor de h1-selector.

Bij elke property die je verandert, kijk je in Firefox wat die verandering is.
Op deze manier leer je vanzelf wat de verschillende properties en values betekenen.

				
					@charset "UTF-8";

h1{
	font-family: sans-serif;
	font-size: 56px;
	font-weight: 100;
	text-align: center;
	text-transform: uppercase;
	color: darkgoldenrod;
}

De volgende selectoren

Neem regel voor regel de rules voor de h2-selector en de p-selector over.
Ga nooit verder voordat je gezien hebt wat een property of value doet met de stijl in Firefox.

Blijf je wel gebruik maken van de suggesties?
Je kunt daar thuis indruk mee maken als je laat zien hoe snel jij code maakt.
Het komt superprofessioneel over.

				
					h2{
	font-family: sans-serif;
	font-style: italic;
	text-align: center;
	font-weight: 100;
	color: orangered;
}
p{
	font-family: monospace;
	text-align: center;
	font-size: 22px;
	font-weight: 100;
}

De hyperlink opmaken

				
					<a href="https://college.schakelaruba.com"><h3>Mijn School</h3></a>

In de HTML-code heb je een h3-tag genest in de a-tag.
Dat is gedaan om de opmaak van het a-element en de zichtbare tekst volledig te kunnen controleren.
Neem de code weer stap voor stap over.
Zorg dat je weer elke keer ziet wat er gebeurt met het resultaat in Firefox.

				
					
a{	
	text-decoration: none;
}
h3{     
	font-size: 36px;
	padding: 20px;
	background-color: orangered;
	text-align: center;
	color: white;
}

De inLine-tags opmaken

Neem regel voor regel de rules voor de selectoren em, strong en span over.
Ga nooit verder voordat je gezien hebt wat een property of value doet met de stijl in Firefox.
Je ziet hier dat span geen standaard opmaak heeft, maar wel gebruikt kan worden voor het vastleggen van stijl in CSS.

				
					em{
	color: orangered;
	font-family: fantasy;
	font-weight: 700;
	font-size: 48px;
}
strong{
	color: darkgoldenrod;
	font-weight: 700;
	font-style: italic;
	font-size: 42px;
	vertical-align: -20px;
}
span{
	color: lightgreen;
	vertical-align: -20px;
}

Het plaatje afmaken

Met de selector img verander je de stijl van de afbeelding.
De properties margin-left en left zijn misschien wat ingewikkeld.
Probeer toch te begrijpen wat ze doen.

				
					img{
	position: relative;
	text-align: center;
	width: 200px;
	margin-left: 50%;
	left: -100px;
	border: 10px solid orangered;
	border-radius: 50%;
}

The finishing touch

Voeg helemaal boven in het CSS-document de body-selector toe en verander de achtergrondkleur in zwart.

In de afbeelding hieronder kun je zien hoe het resultaat er uit moet zien.
Als je verschillen ziet, zoek dan uit waardoor dat komt.

				
					@charset "UTF-8";

body{
	background-color: black;
}

Kennis en vaardigheden

Controleer of je de begrippen uit onderstaande lijst begrijpt en kunt toepassen.
Ze kunnen in een toets aan de orde komen.

Link/koppeling
CSS-rule
Css- declaratie
selector
property
value

font-family (sans-serif)
font-size
font-weight
font-style (italic)
text-align (center)
text-transform (uppercase)
text-decoration
vertical-align

color
background-color
position
width
margin
left
border
border-radius