Beginnersgids voor het bouwen van HTML5 / CSS3-webpagina's

Dit artikel maakt deel uit van ons "HTML5 / CSS3 Tutorials-serie" - toegewijd 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 demonstreren, zijn HTML5 / CSS3 geen echte raketwetenschap, en ik zal je door het ontspannende proces leiden 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 dat zult zijn werken met de wereldwijde internetstandaarden zoals elke andere ontwerper. Op deze manier vind je meer online ondersteuning en jouw 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-trekking 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 toepassingsplatform voor HTML (vooral HTML5), CSS en JavaScript om op te bouwen. Ook dit systeem elegant creëert harmonie tussen webontwerpers en ontwikkelaars door gemeenschappelijke standaarden in te stellen die alle browsers moeten volgen.

Bovendien zijn veel elementen gemaakt om vertegenwoordigen nieuwe digitale media. Waaronder en die enorm zijn voor multimedia-ondersteuning. In sommige browsers kunt u formuliervalidatie rechtstreeks in HTML invullen. Toegegeven, er is nog steeds een grote behoefte aan jQuery, omdat er veel softwareontwikkelaars zijn die de functies nog moeten herkennen. Als je een lijst met tags wilt, kijk dan in deze W3Schools-tabel voor meer informatie.

Naakt HTML5-skelet

Ik vind de gemakkelijkste manier om een onderwerp te begrijpen, is duik er recht in. Ik zal dus 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!
   Huis
 Over ons
 Contacten
 
 
 
   wat inhoud hier.
 
  maar sommigen hier ook!
 
 
  Sommige auteursrechten en juridische mededelingen hier. Misschien gebruikt u het © -symbool een beetje.

Meteen is dit niet heel anders dan een standaard HTML4-webpagina. Wat je misschien opvalt, is dat wij hoeven geen zelfsluitende tags meer te bevatten. Dit is echt geweldig nieuws omdat het veel tijd zal besparen op uw ontwikkelingsprojecten.

Voor degenen die het niet weten, zijn er in XHTML-concepten veel elementen gelabeld zelfsluitend. Deze zouden eindigen met een schuine streep naar voren voor de operator 'groter dan' om aan te geven dat u geen andere sluitingscode ergens anders hoeft op te nemen. Als een 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 jij heb zelfs geen extra schuine streep nodig! is helemaal Geldig, hoewel je toestemming hebt om door te gaan met het gebruik van de XHTML / XML-standaard. 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. Onze Doctype is hilarisch eenvoudiger dan ooit, geen behoefte aan overmatige lichaamskenmerken, en 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 de hele pagina is ingekapseld in een div label. Ik heb dit gelabeld met een ID van wikkel, wat betekent dat het zich om onze hele website-inhoud wikkelt. Dit is handig om een maximale breedte- of positie-inhoud in te stellen rond op het scherm. Vervolgens heb ik de pagina in 3 kernelementen gebroken - een

, een kern

, en een korte

. In mijn aangepaste koptekstgedeelte heb ik een eenvoudige weergave van de titel van de pagina toegevoegd en navigatie-items met de

tag als een wrapper.

Nu voor de

met een ID van kern Ik heb een secundaire toegepast Clearfix. Deze functie zorgt ervoor dat we dat kunnen vrij zweven 2 kolommen binnen en we zullen geen gevallen inhoud of vreemde verschijnselen ervaren. En terecht, want van binnen heb ik er twee geplaatst

tags die ons hoofdinhoudsgebied en de zijbalk bevatten. We zullen CSS-stijlen gebruiken om ze uit elkaar te drijven.

Evenzo de stilte footer label werkt goed om deze inhoud te onderscheiden van de pagina. Binnenin heb ik een plechtige alinea geplaatst die mogelijk auteursrechten en eigendomsinformatie bevat. Maar de kans is groot dat u iets meer inhoud wilt toevoegen, zoals secundaire links naar uw pagina's.

Creatieve CSS3-wizardry

Om deze basis stencillay-out af te maken kunnen we een paar CSS-stijlen gebruiken. In de standaard HTML5-sjabloon heb ik een toegevoegd externe CSS-stylesheet zodat we onze codegebieden gescheiden kunnen houden. Dit zal veel verwarring opruimen op de lange termijn wanneer uw pagina's en stijlen beginnen te lopen voor verschillende pagina's.

(Afbeeldingsbron: W3C)

Dus ik heb niet veel tijd met CSS doorgebracht, maar genoeg om een paar nette effecten te presenteren. Ten eerste heb ik een aantal van de grensradiusinstellingen om zeer coole navigatie-link hover-effecten te bouwen. U kunt hetzelfde effect in de sjablooncode targeten, u voegt gewoon de volgende regels toe aan het CSS-document.

 nav display: block; margin-bottom: 10px;  nav ul list-style: none; lettertypegrootte: 14px;  nav ul li display: inline;  nav ul li a display: block; zweven: links; opvulling: 3px 6px; kleur: # 575c7d; tekstdecoratie: geen; lettertype: vet;  nav ul li a: hover background: # deff90; kleur: # 485e0f; -webkit-border-radius: 3px; -moz-border-radius: 3px; grensradius: 3px; opvulling: 3px 6px; marge: 0; tekstdecoratie: geen;

Een ander net effect is de clearfix-stijlen. Dit is geen geheel nieuw concept met CSS3, maar het is wel belangrijk voor het bouwen van webpagina's die aan de standaarden voldoen. Wanneer u inhoud naast elkaar wilt laten zweven, zult u vaak fouten in de positionering van fouten ondervinden. Dit wordt veroorzaakt door offsetmarges en fouten bij het instellen van absolute breedten voor uw zwevende inhoud.

Dit concept kan een beetje verwarrend lijken en ik heb een klein beetje code toegevoegd om te helpen. In principe zijn we gericht op twee

elementen, #links en #rechts om overeen te komen met hun kant van de pagina. Ik heb ze allemaal met een bepaalde breedte ingesteld en naar links zwevend, zodat ze recht naast elkaar worden gestapeld. Sinds onze container div # kern bevat de Clearfix klasse, dit betekent dat alle interne inhoud dat kan beweeg vrij rond en verwijdert automatisch extra ruimte achteraf.

/ * page core * / div # core display: block; beiden opschonen; margin-bottom: 20px;  sectie # links width: 550px; zweven: links; marge: 0 15px;  sectie # right float: left; breedte: 300 px;  / * clearfix * / .clearfix: after content: "."; weergave: blok; beiden opschonen; zichtbaarheid: verborgen; regelhoogte: 0; hoogte: 0;  .clearfix display: inline-block;  html [xmlns] .clearfix weergave: blok;  * html .clearfix height: 1%;

Deze stukjes code zijn eenvoudig om te beginnen. Ze hebben ook betrekking op onze HTML5-sjablooncode die eerder is gemaakt, dus dit is een eenvoudige oefening. Maar als het op echte web-junkies aankomt, zult u meer CSS3-functionaliteit onderzoeken.

Lesser Bekende CSS3-syntaxis

Als u volledige HTML5 / CSS3-webpagina's wilt maken, gebruikt u enkele veel complexere stylesheets. Veel ontwerpers kennen steno-code (zoals de lettertype: eigendom), aangezien dit al vóór CSS2 de standaard was.

Maar er zijn een paar nieuwe eigenschappen in CSS3 waar veel ontwerpers niet aan denken. Veel van deze zijn niet alleen voor esthetiek, maar bevatten ook animatie-effecten. Hieronder staat een korte lijst met een paar van de eigenschappen waarmee u kunt spelen. Probeer google voor syntaxisvoorbeelden als u zich verloren voelt.

box-shadow: voegt een leuk schaduweffect toe aan uw pagina-elementen. U krijgt 4 parameters die de positie links / rechts, omhoog / omlaag, schaduwwazigheid en kleur instellen. Houd er rekening mee dat kaderschaduwen niet als extra ruimte voor de oorspronkelijke breedte / hoogte worden beschouwd.
schaduw tekst: creëert prachtige schaduwen achter uw paginatekst. Met de juiste effecten kunnen uw letters direct van de pagina verschijnen.
border-radius: Afgeronde hoeken hebben lang geduurd om geaccepteerde normen te worden. Enkele jaren geleden waren veel web 2.0-ontwerpers bezig met het maken van achtergrondafbeeldingen om zo met afgeronde hoeken in CSS te passen. Maar met CSS3 border-radius kun je de curve van elke rand op elk element manipuleren.
ondoorzichtigheid: Het lijkt een eenvoudige woning die veel ontwerpers niet overwegen. Dekking verwacht een enkele numerieke invoer van 0 tot 1,0 (0% - 100%). Dit effect werkt uitstekend als een hover-animatie.
@ Font-face: Nog een mooi voorbeeld van een aantal complexe CSS-stijlen en typografie. Webontwerpers kunnen nu met hun eigen aangepaste lettertypen werken door ze te definiëren als variabelen in uw CSS-documenten.
box-sizing: standaard zal de grootte van de box al uw elementen instellen als Inhoud-box. Dit betekent dat breedte, opvulling en randen allemaal zijn opgenomen in de maximale breedte. Maar ingesteld op border-box je kunt een maximale breedte (zeg 20 px) definiëren en toegevoegde opvulling / randen zullen hierin worden opgenomen, waardoor ruimte binnenin het object wordt verwijderd. Het is een fantastische eigenschap als je eenmaal zijn vindingrijkheid beheerst.

Deze eigenschappen hebben allemaal hun voor- en nadelen. Ik zou niet aanraden om ze allemaal in uw webpagina's te proppen. Maar oefening geeft je een duidelijke mindset om met gemak verder websites te ontwikkelen.

Nog een belangrijk stuk toegevoegde syntaxis dat het vermelden waard is, is attribuut selecteurs. Met CSS3 kun je nu definieer stijlen op basis van HTML-kenmerken (zoals type, href, titel) en bieden zelfs specifieke waarden. We kunnen bijvoorbeeld links targeten met een gedefinieerd titelattribuut en een reeks achtergrondpictogrammen geven.

 ul li [title ^ = "ico"] background: url ('my-icon.gif');

Als je merkt dat ik een caret symbool voor het gelijkteken. Dit is een operator die definieert alle lijstitems die het voorvoegsel bevatten, ico. Als alternatief kunt u de cursor (^) vervangen door een dollarteken ($) om het achtervoegselgebied van uw titel te targeten. Op deze manier weet CSS3 achtergrondafbeeldingen toe te voegen waar u de titels als 'eerste ico' of 'boek ico' kunt instellen. Lees meer over attribute selectors als je geïnteresseerd bent.

Alles samenvoegen

De kern van HTML5 en CSS3 webpagina's is eenvoud. Webontwikkelaars proberen zeer creatieve websites te bouwen in minder tijd en met minder stress. De nieuwe functies in HTML5 laten dit toe met veel bewegingsruimte. En het gebruik van enkele van de nieuwe CSS3-selectors en eigenschappen zal u op de lange termijn voordelen opleveren.

(Afbeeldingsbron: W3C)

Maar zo goed zou je ook moeten zijn rekening houdend met de eindgebruiker. Het proces van het bouwen van een webpagina eindigt uiteindelijk nadat de website publiekelijk is gelanceerd. Je doel is om graag publiek met eenvoudig toegankelijke informatie, en niet alleen menselijke lezers, maar zoekmachine crawlers en indexering bots. Semantiek is enorm geëvolueerd en bevat nieuwe HTML5-lay-outelementen, waardoor pagina-indelingen consistent worden opgesplitst. Het is nog nooit zo eenvoudig geweest om een klein navigatie- en voettekstgedeelte te bouwen dat in lijn is met alle moderne webbrowsers.

Zodra u vertrouwd bent met het bouwen van HTML5-webpagina's, zult u waarschijnlijk beginnen met het zoeken naar pagina-animaties. Zelfs kleine effecten met JavaScript en AJAX kunnen aanzienlijk verbetering van de gebruikerservaring en de prestaties van de site. Hoewel dit geen deel uitmaakt van de artikelomvang, raad ik aan rond te kijken met jQuery als je tijd hebt. De open source-bibliotheek is verbluffend en maakt snelle prototyping mogelijk bovenop HTML5-pagina-elementen.

Aanvullende bronnen

Bloggers over de hele wereld hebben de nieuwe trends in HTML5 en CSS3 besproken en bronnen gedeeld met het publiek. De tijd verandert en de webgemeenschap verandert met hen. Overweeg een paar niche-gebieden om te studeren en een kleine interesse op te bouwen.

Hieronder vindt u enkele aanvullende lijsten, artikelen en zelfstudies waarvan u misschien geniet. Ik heb de vrijheid genomen om de lijsten op te splitsen in HTML5- en CSS3-bronnen. Op basis van wat u zoekt, moeten er voor iedereen een paar onderwerpen zijn. Geniet ook van de korte galerij met gratis HTML-thema's die beschikbaar zijn om online te downloaden!

HTML5

HTML5: 15 Inspirerende experimenten
HTML5: 19 webapplicaties
HTML5: 48 Potentiële Flash-Killing-demo's
Maak een op Ajax gebaseerd HTML5 / CSS3-contactformulier

CSS3

CSS3: een beginnershandleiding
CSS3: zoekveld maken
CSS3: Pseudo-klassen gebruiken
CSS3: 30+ Handige zelfstudies

Bonus: HTML5-sjablonen en thema's

Ontwerpbureau

Klaar om de wondere wereld van HTML5 te betreden? Hier is een volledig gratis HTML5-sjabloon, met jQuery-scripts en aangepaste lettertypen die u kunt gebruiken om vrij te testen!

Een HTML5 / CSS3-thema

Dit HTML5 / CSS3-thema heeft het lay-outontwerp van een gemeenschappelijke blog, zodat je ofwel je eigen HTML5-blog met uitgebreide functies kunt bouwen, of gewoon in de code kunt graven en er iets over kunt leren.

Yoko

Yoko is een modern WordPress-thema dat spreekt over flexibiliteit met zijn responsieve lay-out op basis van CSS3-mediaquery's, wat het vermogen is om zich aan te passen aan verschillende schermformaten, om er meer van te weten!

Grijs

Als je de klassieke stijl van de WordPress-blog verkiest, is Gray waarschijnlijk iets voor jou met zijn ingebouwde CSS3-functies zoals randradius, meerdere achtergronden, tekstschaduw, enz..

Beginnersgids voor Flock, de Social Media Browser

Beginnersgids voor iOS-ontwikkeling De interface - Deel I

Beginnershandleiding voor het instellen van Windows 7 Media Center