Post on 02-Jul-2015
description
WorkshopHTML 5 / CSS 3
Codetuts Academy Introductie Html5 / Css3
Inhoud
• Inleiding• Geschiedenis/Toekomst• HTML 5• CSS 3
Codetuts Academy Introductie Html5 / Css3
Inleiding
Toepassing HTML 5?
• Alle belangrijke browsers, zoals Internet Explorer, Safari, Chrome, Firefox, etc.• Alle belangrijke telefoon OS's zoals iOS, Android en Windows Phone, BlackBerry,
Amazon Fire• HTML5 is een goede kandidaat voor cross-platform ontwikkeling • Alternatief voor Native apps
Geen complexe programmeertaal te leren
Codetuts Academy Introductie Html5 / Css3
Inleiding
Waarom HTML 5?
• Zeer brede ondersteuning op vele platformen• Veel soorten apps kunnen in HTML5 geschreven worden• Veel ontwikkelaars beschikbaar (studenten tot professionals)• Continue in ontwikkeling, waardoor:
Makkelijker te interpreterenMeer en meer mogelijkheden (bijv: geolocation voor Google Maps, video en audio)
Codetuts Academy Introductie Html5 / Css3
Inleiding
Waarom geen HTML 5 voor apps?
• Trager dan Native apps• Niet alle hardware van de telefoon is aan te sturen• Meer code nodig dan native apps
• Ontwikkeltijd neemt toe
Codetuts Academy Introductie Html5 / Css3
Inleiding
Optimaal gebruik =
Codetuts Academy Introductie Html5 / Css3
Geschiedenis
• HTML verscheen als een internet-concept in 1993• Explosieve groei in de jaren '90• Versies 2.0, 3.2, en 4.0 (in hetzelfde jaar!)• Versie 4.01 uitgebracht in 1999• Opgenomen door de W3C
Codetuts Academy Introductie Html5 / Css3
Toekomst
• WHATWG werd in 2004 opgericht• WHATWG = Web Hypertext Application Werkgroep• Samengesteld uit vertegenwoordigers van Apple, Mozilla, Google, Opera• Stellen de HTML5-specificaties op, om het web platform naar een hoger plan te
tillen• Grotendeels gedreven door de opkomst van Web 2.0 en social media
Codetuts Academy Introductie Html5 / Css3
Toekomst
• Nieuw voorstel in juli 2014 voor HTML 5.1• Het blijft een work in progress. Het web evolueert snel!• HTML 5.1 wordt voorbereid (verschijnt in 2016)
Codetuts Academy Introductie Html5 / Css3
Html 5 - De technieken
• Vereenvoudigingen• Pagina basis (minimaal)• H1, p, Lists• Anchors• Headers, Footers, Navigation• Sections, Articles• Divs, Aside• Tabellen• Forms
Codetuts Academy Introductie Html5 / Css3
Html 5 – Belangrijke vereenvoudigingen
• DOCTYPE definitie
– Oud:
– Nieuw:
• Character set
– Oud:
– Nieuw:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8">
Codetuts Academy Introductie Html5 / Css3
Juiste rendering in de diverse browser
Codetuts Academy Introductie Html5 / Css3
Pagina basis (minimaal)
Codetuts Academy Introductie Html5 / Css3
Waar bestaat een (web)pagina uit (Elementen t.b.v. opmaak)
Element Beschrijving
<header> Header content voor een pagina
<footer> Footer content voor een pagina
<section> Een deel van een webpagina, bruikbaar voor algemene content
<article> Onafhankelijke inhoud voor een artikel, meestal omsloten door <section>
<nav> Navigatieassistentie, bijv. een hyperlinks panel
<aside> Extra content, vergelijkbaar met een sidebar
Codetuts Academy Introductie Html5 / Css3
Waar bestaat een (web)pagina uit (Elementen tbv opmaak): VOORBEELD<!DOCTYPE html><html>
<head><meta charset="utf-8" /><title>Hello World!</title>
</head><body>
<header> Informatie in de top van de pagina </header>
<div><nav> Navigatie links </nav>
<section><article></article>Main content van de pagina
</section><aside> Gerelateerd aan de maincontent</aside>
<footer>Footer informatie</footer></div>
</body></html>
Codetuts Academy Introductie Html5 / Css3
Waar bestaat een (web)pagina uit (Elementen tbv opmaak): VOORBEELD 2
<section>
<h1>Koptekst</h1>
<article><header> … </header><p>Een voorbeeld text</p><p>Een voorbeeld text 2</p><footer> … </footer>
</article>
<article><header> … </header>… <footer> … </footer>
</article>
</section>
Codetuts Academy Introductie Html5 / Css3
Waar bestaat een (web)pagina uit (Elementen tbv opmaak): VOORBEELD 3
Codetuts Academy Introductie Html5 / Css3
H1 t/m H6
• <h1> t/m <h6> worden gebruikt om hoofdstukken aan te geven binnen je pagina
• Normaal gesproken kan je maar 1 x een <h1> gebruiken. De <h2> t/m <h6> meerdere keren
• Uitzondering is dat binnen iedere <section> wel weer een <h1> gebruikt kan worden
Codetuts Academy Introductie Html5 / Css3
Paragraph <p>
• <p> gebruik je voor een paragraaf. Hierin kan tekst komen.
• Als er andere tags gebruikt kunnen worden dan <p>, zoals een <address>, gebruik deze dan
Codetuts Academy Introductie Html5 / Css3
List <ul>, <ol>, <li>
• <ul> en <ol> gebruik je om een lijst te maken. • <ul> = Unordered list• <ol> = Ordered list
• <li> is een item binnen een lijst
Codetuts Academy Introductie Html5 / Css3
Anchors
• <a> is er om een link te maken binnen je pagina. Dit kan verwijzen naar: • Een pagina binnen je website• Een website op het internet• Tevens kan je een nieuw tabblad openen in de browser
Codetuts Academy Introductie Html5 / Css3
Headers , Footers, Navigation
• <header> <footer> <nav>
• Nieuwe tags in HTML 5. Iedere moderne website heeft ze en nu specifiek benoemd in tegenstelling tot eerdere versies van HTML
• Kunnen meerdere malen voorkomen op een website• Standaard footer website• Binnen iedere article
Codetuts Academy Introductie Html5 / Css3
Articles
• Specifiek bedoeld voor nieuwsitems, blogberichten en andere type berichten op een website
• Een <article> kan genest wordenEen bericht (article) op een bericht
• Binnen articles kunnen <header> en <footer> worden opgenomen• Maar ook <H1> t/m <H6>
Codetuts Academy Introductie Html5 / Css3
Sections
• Een gedeelte van de site met een specifiek thema, doorgaans met een H1 (koptekst)
• Is altijd een ondergeschikte van de dichtstbijzijnde parenttag zoals <body>, <article> of een andere <section> element.
• Heeft zijn eigen inhoud die onafhankelijk kan zijn van bovenliggende inhoud.
• Gebruik 1 x H1 binnen een section element.
• Kunnen hun eigen <header> en <footer> bevatten
Codetuts Academy Introductie Html5 / Css3
Divs, Aside
• De <aside> is een gedeelte van een hoofdpagina• gerelateerd aan de inhoud van de pagina, • maar ook op zichzelf kan staan• Veelal gebruikt voor advertenties
Codetuts Academy Introductie Html5 / Css3
Tabellen
Tabellen hebben niet het doel om layout te bouwen-Problemen als de pagina wordt geopend op niet visuele media (e-readers)
-Als website is gebouw op hogere resolutie, problemen op lagere resolutie (horizontaal scrolling)
Om deze problemen zoveel mogelijk te beperkenGebruik style sheets (CSS 3) om layout te bepalen in plaats van tabellen.
Tabellen zijn bedoeld voor tabulaire data
Codetuts Academy Introductie Html5 / Css3
Formulieren
Een formulier bestaat uit de volgende onderdelen:
• <form> Tag om een formulier te beginnen
• <fieldset> Om binnen een formulier een ruimte te krijgen met velden die dezelfde soort informatie bevatten
• <legend> De titel van een fieldset
• <label> De uitleg wat er in een bepaald veld ingevuld moet worden
• <input> Een input veld
Codetuts Academy Introductie Html5 / Css3
Formulieren
Codetuts Academy Introductie Html5 / Css3
Officiële bron HTML 5
http://www.w3.org/TR/html5/
Codetuts Academy Introductie Html5 / Css3
Css 3
• Syntax• Selectors• Text / Font• Links• Box Model• Display• Positioning
Codetuts Academy Introductie Html5 / Css3
Gebruik van CSS
• CSS speelt een belangrijke rol naast HTML5• Zorgt voor een duidelijke scheiding tussen layout + opmaak• HTML 5 beschrijft wat op een webpagina zit• CSS 3 beschrijft hoe dat er uitziet
• CSS3 blijft evolueren samen met HTML5, met veel coole functies (sommige zijn experimenteel), zoals: Transformaties (b.v. rotaties) en afgeronde hoeken
Codetuts Academy Introductie Html5 / Css3
Syntax
• Hier is een voorbeeld van een Css bestand
• De <body> van html zie je hier dus als ‘body’• Tevens wordt elke regel afgesloten met een ‘ ; ‘
Codetuts Academy Introductie Html5 / Css3
Selector
• Er zijn 3 soorten selectors : • Element selector
• Id selector
• Class selector
Codetuts Academy Introductie Html5 / Css3
Tekst / Font
• Je kan je tekst op allerlei manieren bewerken: • Font-Family• Font-Style• Font-Size
• En natuurlijk wat je al gezien hebt, de kleur of een align
Codetuts Academy Introductie Html5 / Css3
Links
• Een link kan een van de volgende statussen hebben : • a:link - een gewone link• a:visited - een link die al bezocht is• a:hover - een link waar je met de muis overheen gaat• a:active - een link waarop geklikt is
Codetuts Academy Introductie Html5 / Css3
Box Model
• Het box model is de omgeving van een html element, en bestaat uit: • Content = de inhoud, waar tekst en plaatjes komen.• Padding = Zorgt voor een transparante omgeving om de content heen• Border = Een rand om de content en padding heen• Margin = Zorgt voor een transparante omgeving om de border heen
Codetuts Academy Introductie Html5 / Css3
Display
• Een aantal voorbeelden van Display : • Display Inline
• Display Inline-Block
• Display Block
Codetuts Academy Introductie Html5 / Css3
Positioning
• Een aantal voorbeelden van Positioning : • Relative
• Absolute
Codetuts Academy Introductie Html5 / Css3
Wat heb ik nodig om op te starten?
Geen specifieke tools (standaard editors is voldoende)
Geen licenties
Maar je zou het volgende kunnen gebruiken:
• Jetbrains PhpStorm (gratis voor onderwijs)
• Visual Studio Express (C#)
• NetBeans (JAVA)
• NotePad++
• SublimeText
Voordelen: Code highlighting + eventueel debugging