Steps webcode-html-css

WEBCODELEERJAAR 1 REALISATIE

CODEER ZELF EEN RESPONSIVE WEBAPP MET HTML EN CSS

responsive webapp code

auteur: Raoul PostelWEBCODE HTML CSS

BRIEFING EN OPDRACHT

▸ Schrijf kort op wat de opdracht inhoudt

▸ Maak een lijst van de producteisen en specificaties, 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

http://www.designtrainingen.nl

auteur: Raoul Postel

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


http://designtrainingen.nl/nl/html-basics


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


http://google.com


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)

IDmag 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


http://designtrainingen.nl/nl/css-basics


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


Education

Steps webcode-html-css