Presentatie bij de training HTML5 die plaatsvond na afloop van de sessie Micorosoft Technology...

WorkshopHTML 5 / CSS 3

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 interpreterenMeer 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:

– 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">


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 wordenEen 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 beperkenGebruik 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...

Education

Transcript of Presentatie bij de training HTML5 die plaatsvond na afloop van de sessie Micorosoft Technology...