Presentatie bij de training HTML5 die plaatsvond na afloop van de sessie Micorosoft Technology Associate certificering op 17 november, voor het VO.

Codetuts Academy Introductie Html5 / Css3
Inhoud
• Inleiding
• Geschiedenis/Toekomst
• HTML 5
• CSS 3

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

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 interpreteren
Meer en meer mogelijkheden (bijv: geolocation voor Google Maps, video
en audio)

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

Inleiding
Optimaal gebruik =

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

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

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)

Html 5 - De technieken
• Vereenvoudigingen
• Pagina basis (minimaal)
• H1, p, Lists
• Anchors
• Headers, Footers, Navigation
• Sections, Articles
• Divs, Aside
• Tabellen
• Forms

Html 5 – Belangrijke vereenvoudigingen
• DOCTYPE definitie
– Oud:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
– Nieuw:
• Character set
– Oud:
– Nieuw:
"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">

Juiste rendering in de diverse browser

Pagina basis (minimaal)

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

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>

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>

Waar bestaat een (web)pagina uit (Elementen tbv opmaak): VOORBEELD 3

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

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

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

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

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

Articles
• Specifiek bedoeld voor nieuwsitems, blogberichten en andere type
berichten op een website
• Een <article> kan genest worden
Een bericht (article) op een bericht
• Binnen articles kunnen <header> en <footer> worden opgenomen
• Maar ook <H1> t/m <H6>

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

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

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 beperken
Gebruik style sheets (CSS 3) om layout te bepalen in plaats van tabellen.
Tabellen zijn bedoeld voor tabulaire data

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

Formulieren

Officiële bron HTML 5
http://www.w3.org/TR/html5/

Css 3
• Syntax
• Selectors
• Text / Font
• Links
• Box Model
• Display
• Positioning

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

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 ‘ ; ‘

Selector
• Er zijn 3 soorten selectors :
• Element selector
• Id selector
• Class selector

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

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

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

Display
• Een aantal voorbeelden van Display :
• Display Inline
• Display Inline-Block
• Display Block

Positioning
• Een aantal voorbeelden van Positioning :
• Relative
• Absolute

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

Presentatie bij de training HTML5 die plaatsvond na afloop van de sessie Micorosoft Technology Associate certificering op 17 november, voor het VO.

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Presentatie bij de training HTML5 die plaatsvond na afloop van de sessie Micorosoft Technology Associate certificering op 17 november, voor het VO.

Ähnlich wie Presentatie bij de training HTML5 die plaatsvond na afloop van de sessie Micorosoft Technology Associate certificering op 17 november, voor het VO. (20)

Mehr von SLBdiensten

Mehr von SLBdiensten (20)

Presentatie bij de training HTML5 die plaatsvond na afloop van de sessie Micorosoft Technology Associate certificering op 17 november, voor het VO.