Steps webcode-html-css

CODEER ZELF
EEN RESPONSIVE
WEBAPP MET
HTML EN CSS
responsive webapp code

auteur: Raoul Postel
WEBCODE HTML CSS
BRIEFING EN OPDRACHT
▸ Schrijf kort op wat de opdracht inhoudt
▸ Maak een lijst van de producteisen  
en speciﬁcaties, zoals: mappen-
structuur, eisen aan de afbeeldingen  
en lettertype (webfont)
▸ Omschrijf het doel/thema  
van de opdracht
▸ Omschrijf de doelgroep
▸ Krijg antwoord op vragen die je  
nog hebt bij de opdrachtgever
▸ Stel de deadline vast
V

IDEE & SCHETSEN
▸ Bekijk het aangeleverde
beeldmateriaal, Zijn de foto’s van
voldoende kwaliteit?
▸ Lees de aangeleverde tekst
▸ Google op Responsive webdesign en
bekijk de website: w3schools.com
▸ Maak een lijstje van onderdelen die er
zeker in moeten komen, zoals: logo
titel, nieuws, socialmedia, video,
contact, slideshow en tekst
▸ Schets met potlood of pen kleine de
layout in 1-2 en 4 kolommen
V
WEBCODE HTML CSS

OPZET HTML IN CODE-EDITOR
▸ Maak een mappenstructuur aan met: 
een hoofdmap (= root) en daarin een map:
images en een map css
▸ Maak een nieuw document aan in een code-
editor, zoals Textwrangler, Brackets, SublimeT
▸ Start met de HTML-opbouw:  
doctype, html, head, title, body
▸ Bewaar als: index.html in de root-map
▸ Plaats de tekst tussen de body-tags
▸ Breng teksthierarchie aan met: 
h1-h6, p, strong, em, ul ol li, table tr td
▸ Omsluit de teksten met de tags: 
header, nav, section, article, footer
V
WEBCODE HTML CSS
Bijbehorende Tutorial op : www.designtraingen.nl

AFBEELDINGEN IN HTML
▸ Zet de afbeeldingen in Photoshop
om naar RGB 150 dpi.
▸ Bewaar ze als PNG in  
de images-map
▸ img src=“images/afbeelding.png”
▸ Voor visueel gehandicapten is het
goed om title=“omschrijving” toe
te voegen. Deze title-tags helpen
ook voor de zoekmachines.
V
WEBCODE HTML CSS

LINKS IN HTML
▸ a href=“index.html”
▸ a href=“http://google.com”
▸ links werken op een stuk tekst  
of met afbeeldingen
▸ Om een nieuw venster te openen
voeg je target=“_blank” toe
▸ Voor zoekmachines is het goed om
alt=“omschrijving” toe te voegen.
V
WEBCODE HTML CSS

HTML META TAGS
▸ Plaats in de head-section de
standaard metadata voor
zoekmachines:  
charset, http-equiv, name.
▸ Plaats in de head-section de  
link naar een webfont.
▸ Plaats in de head-section de  
link naar een CSS-document.
▸ Plaats in de head-section de link
naar de javascript-bibliotheek.
V
WEBCODE HTML CSS

CASCADING STYLE SHEETS
CSS is vergelijkbaar met InDesign werken  
in kaders waarin je beeld en tekst plaatst.
Hoe een kader of typografie heet en er uit  
ziet beschrijf je in een apart CSS-document.
Waar een kader of typografie moet staan
beschrijf je in het HTML-document.
<body>
<div id=”content”> tekst in het content-kader </div>
<div class=”blokje”>
<p>tekst in het blokje</p>
</div>
</body
WEBCODE HTML CSS
HTML
CSS SELECTORS

TAG DIV CLASS
p {
font-family: Arial, Helvetica, sans serif:
color: #CCCCCC:
}
#content {
background-color: #FFFFFF;
width: 994px;
}
.blokje {
background-color: #F5E032;
margin: 5px;
width: 100px;
height: 100px;
}
WEBCODE HTML CSS
TAG (html)
ID 
mag 1 x voorkomen 
 
CLASS
mag vaker voorkomen 
[meest gebruikt]

OPZET CSS IN CODE-EDITOR
▸ Maak een nieuw document aan in  
een code-editor zoals Textwrangler,
Brackets, SublimeT.
▸ Bewaar als: layout.css in de map css.
▸ Start met de vormgeving van de
body-tag, met daarin: background,
margin, font-family, font-size.
▸ Breng teksthierarchie aan met: 
h1-h6, p, strong, em, ul ol li, table tr td
▸ Omsluit de teksten met de tags: 
header, nav, section, article, footer.
V
WEBCODE HTML CSS
Bijbehorende Tutorial op : www.designtraingen.nl

TYPOGRAFIE CSS
▸ Kies een lettertype voor de titel/kop.
Gebruik bij voorkeur een webfont dat  
lijkt op het font uit de huisstijl
▸ Kies een lettertype voor de leestekst.  
Bij voorkeur met varianten vet en cursief
▸ Bepaal met CSS de grootte (100%) en
regelafstand (line-height) van de leestekst.
▸ Leg met CSS kleur-accenten in de tekst,
zoals kleur voor koptekst (h1), rollovers  
(a href), opsommingen (ul ol li), leestekst
uitsparen (p)
▸ Test in de browser
V
WEBCODE HTML CSS

HEADER ARTICLE FOOTER
▸ Bepaal de vormgeving van de header-
article- en footer—tag,  
met daarin: background, margin,
padding, width (%) en min-height (px)
▸ Door een witte background-color te
combineren met transparantie krijgen
de blokken een tint-kleur van de body
background-color. Dat geeft eenheid
en rust in kleur
▸ Padding wordt altijd opgeteld bij  
de hoogte en breedte van een blok
▸ Test in de browser
V
WEBCODE HTML CSS

STYLING VAN DE NAVIGATIE
▸ Maak de volgende classes aan:
hele_breedte, halve_breedte
kwart_breedte en geef ze ieder
een eigen width in %
▸ Voeg onderaan het css-document
een pseudo class toe voor
breedbeeld, tablet en smartphone
▸ Kopieer de eerder gemaakte
classes en verander de width voor
de verschillende schermvariaties
V
WEBCODE HTML CSS

RESPONSIVE BREEDTES
▸ Maak de volgende classes aan:
hele_breedte, halve_breedte
kwart_breedte en geef ze ieder
een eigen width in %
▸ Voeg onderaan het css-document
een pseudo class toe voor
breedbeeld, tablet en smartphone
▸ Kopieer de eerder gemaakte
classes en verander de width voor
de verschillende schermvariaties
V
WEBCODE HTML CSS

OVERIGE STYLING
▸ lijnen
▸ transparantie
▸ icoontjes
▸ achtergronden
V
WEBCODE HTML CSS

CORRECTIES
▸ Zet de demowebsite online  
op een test-domein en test de
werking ervan in diverse browsers
en verschillende apparaten
▸ Bespreek dit met de
opdrachtgever
▸ Voer de correcties door
V
WEBCODE HTML CSS

Steps webcode-html-css

More Related Content

Viewers also liked (20)

Similar to Steps webcode-html-css (20)

More from Raoul Postel (13)

Steps webcode-html-css