Dit artikel maakt deel uit van onze "HTML5 / CSS3 Tutorials-serie" - speciaal bedoeld om u een betere ontwerper en / of ontwikkelaar te maken. Klik hier om meer artikelen uit dezelfde serie te zien.
HTML5 en CSS3 hebben het web in slechts 2 jaar stormenderhand veroverd. Vóór hen zijn er veel veranderde semantiek geweest in de manier waarop webontwerpers webpagina's moeten maken, en met hun komst komen een hele reeks geweldige ondersteuningen zoals alternatieve media, XML-stijltags en progressieve invoerattributen voor webontwerpers om dromerig te worden. functies zoals animatie.
Hoewel de meeste ontwikkelaars potentiële maar toch gecompliceerde demo's lijken te presenteren, zijn HTML5 / CSS3 geen echte raketwetenschap, en ik zal je begeleiden tijdens het ontspannende proces om een standaard HTML5 / CSS3-webpagina te bouwen met een uitgebreide maar diepgaande uitleg en tada! Bonussen zoals leermiddelen en gratis HTML5-sjablonen zijn voor u beschikbaar, dus maak van deze gelegenheid gebruik om uw HTML5-reis te starten!
Veranderingen tussen HTML4 en HTML5
U vraagt zich misschien af waarom het zelfs belangrijk is om over te schakelen naar HTML5. Er zijn talloze redenen, maar vooral omdat je zult werken met de wereldwijde internetstandaarden zoals elke andere ontwerper. Op deze manier vindt u meer online ondersteuning en uw websites worden correct weergegeven in moderne browsers die voortdurend worden verbeterd.
(Afbeeldingsbron: W3C)
De vergelijking tussen HTML4 en HTML5 is moeilijk te vinden op maaiveldniveau. Als u de nieuwe HTML5-conceptversie bekijkt, ziet u de gekenmerkte elementen en gecorrigeerde procedures voor foutafhandeling. Browser-ontwikkelaars hebben met name genoten van de nieuwe specificaties voor het renderen van standaard webpagina's.
Wat meer is van HTML5 is de conversie van onze moderne webbrowser. Met deze nieuwe specificaties wordt het web als geheel nu beschouwd als een applicatieplatform voor HTML (vooral HTML5), CSS en JavaScript. Bovendien creëert dit systeem op elegante wijze harmonie tussen webontwerpers en ontwikkelaars door gemeenschappelijke normen vast te stellen die door alle browsers moeten worden gevolgd.
Bovendien zijn er veel elementen gemaakt om digitale media van het nieuwe tijdperk te vertegenwoordigen . Deze omvatten
Naakt HTML5-skelet
Ik vind de gemakkelijkste manier om een onderwerp te begrijpen, door er direct in te duiken . Dus ik ga een heel eenvoudige HTML5-skeletsjabloon maken voor een webpagina. Ik heb een paar van de nieuwere elementen toegevoegd, die ik later een beetje wil categoriseren.
Onze eerste HTML5-pagina
Welkom, een en al!
wat inhoud hier.
maar sommigen hier ook!
Dit is meteen niet veel anders dan een standaard HTML4-webpagina. Wat u misschien opvalt, is dat we geen zelfsluitende tags meer moeten toevoegen . Dit is echt geweldig nieuws, want het zal u veel tijd besparen van uw ontwikkelingsprojecten.
Voor degenen die niet weten, waren er in XHTML-concepten veel elementen die zichzelf automatisch werden gelabeld. Deze zouden eindigen met een schuine streep in de richting van de operator 'groter dan' om aan te geven dat u geen andere sluitingscode ergens anders hoeft op te nemen. Als voorbeeld, om een meta-trefwoordentag te maken dat u zou gebruiken zonder de noodzaak van een afsluiting ergens anders.
Deze regel is nog steeds van toepassing in HTML5. Maar nu heb je niet eens de extra schuine streep nodig ! is volledig geldig, hoewel je de XHTML / XML-standaard mag blijven gebruiken. Voor alle browsers die voldoen aan de standaarden, worden beide elementen op dezelfde manier weergegeven.
Onze paginagebieden definiëren
Het grootste deel van onze nieuwe code moet niet te schokkend zijn. Ons doctype is hilarisch eenvoudiger dan ooit, geen behoefte aan overmatige lichaamskenmerken, en de informatie in onze kop is duidelijk gelabeld. Verderop wil ik je aandacht richten op de inhoud binnenin ons label. Dit omvat de structuur van alle hoofdpagina's. Ik heb met opzet een paar aardige HTML5-tags gebruikt om aan te geven hoe je ze kunt opnemen in je eigen werk.
Eerst ziet u dat de volledige pagina is ingekapseld in een div- tag . Ik heb dit gelabeld met een ID van wrapper, wat betekent dat het zich om onze hele website-inhoud wikkelt. Dit is handig om een maximale breedte- of positie-inhoud op het scherm in te stellen. Vervolgens heb ik de pagina in 3 kernelementen gebroken - een , een kern
nl.hideout-lastation.com
(Afbeeldingsbron: W3C)