1.7 html css terugblik

1.7 Terugblik HTML/CSS
HTML module 11.7 Terugblik HTML/CSS

HTML module 1
Structuur
van de
webpagina
Vormgeving
van de
webpagina
Interactie
van een
webpagina

HTML module 1
Zonder HTML geen WEBPAGINA
Leesbaar voor de gebruiker en
bepaalt de structuur van een
webpagina

HTML module 1
Is een Markup language
HTML maakt gebruik van elementen
met daarin een start en een eind tag.
element
tag

HTML module 1
Nested elements
HTML heeft standaard een aantal elementen
die meerdere tag’s en elementen kunnen bevatten.
De body, header,
section en footer
tag zijn in dit
voorbeeld nested
elements.

HTML module 1
Basispagina html
Uni code charset t.b.v. alle tekens
in de wereld
Taal van het land
waarvoor de website
is bedoeld

HTML module 1
Basispagina html
Noodzakelijk voor
scaling meerdere devices!

HTML module 1
Basispagina html
Wat is het onderwerp
van de webpagina!
Wie heeft de webpagina
gemaakt.
Steekwoorden die
voorkomen op de webpagina!
Meta gegevens zijn belangrijk voor zoekmachines!

HTML module 1
Basispagina html
De title is verplicht
en verschijnt op het
tabblad van de browser.
Daarnaast ook belangrijk
voor de zoekmachines.

HTML module 1
Basispagina html
Hier plaats je de link
naar css bestand voor
de vormgeving van de
website.

HTML module 1
Basispagina html
Alles wat in
het <head>
element staat
verschijnt niet
op de pagina!

HTML module 1
Basispagina html
Alle content wat op het
scherm moet verschijnen
moet in de body staan.

HTML module 1
Basispagina html met juiste indeling

CSS is de afkorting van
Cascading Style Sheets
CSS is de opmaaktaal voor de
vormgeving van webpagina’s!

Een css bestand.
HTML module 1
Het stijlen van een webpagina werkt d.m.v. css code.
CSS-code kan geplaatst worden in de <head> sectie van een webpagina,
toegevoegd worden aan een element/tag of als extern bestand.
De voorkeur gaat uit naar een extern bestand. De extensie van een
css bestand is .css bijvoorbeeld style.css. Hieronder een voorbeeld.
Het begint met de tag of
element en daarna { }.
Tussen de accolades komt
de code voor dat element
te staan.

HTML module 1
Uitschakelen margin en padding browser
Browsers gebruiken standaard stijl instellingen, deze
kunnen we uitschakelen zodat we schoon kunnen beginnen.
Zie resultaat met en zonder
uitschakelen.

HTML module 1
Ruimte aan zijkanten pagina creëren!
Veel pagina’s die je bezoekt hebben standaard ruimte aan
de zijkant van de pagina gecreëerd. De truc hiervoor is simpel.

HTML module 1
De img-tag
Met de <img> tag kunnen plaatjes op de webpagina geplaatst
worden!
De tag!
Waar kan de browser het plaatje vinden!
Hoogte van het plaatje!
! De img-tag word afgesloten door >
dus niet <img>….</img> !

HTML module 1
De img-tag

CSS – Background-color
HTML module 1
Om een webpagina een achtergrond-kleur of een foto als
achtergrond te geven gebruik je de volgende css.

CSS - Background

CSS – Background-image

HTML module 1
Fonts stijlen
Font-family geeft aan dat de font gestyled moet
worden. De eerste is het standaard font, als deze niet
aanwezig is gebruikt hij times en daarna serif.

Fonts stijlen
Voorbeelden van standaard fonts in de browser.

Externe font’s gebruiken!
Je kan ook externe font’s gebruiken, de meeste gebruikte
manier van externe font’s is gebruik te maken van google
fonts.
https://fonts.google.com

Google font’s gebruiken!
Google fonts gebruiken is heel simpel ik heb gekozen voor
roboto (meest gebruikt voor mobieltje). Ik klik op select this
font.

Na het selecteren klik ik op -
Hier staat hoe
je het kan gebruiken!

Font koppelen voor gebruik!
Font-family bepalen in stylesheet.

Font koppelen voor gebruik d.m.v. import!
Font-family bepalen in stylesheet.

HTML class attribute
De html class attribute geeft je de mogelijkheid
dezelfde style aan meerdere elementen te geven.
Een class wordt geplaatst binnen een element
zoals hieronder:
<p class=“naam_class”>..</p> / <article class=“”>..</article>
In de stylesheet begint een class met een puntje.
.naam_class {……..}
Een class kan je zo vaak als je wilt gebruiken op een
webpagina.

class
class
class
class
2 classes voor de article-tag!

class = bericht_lang
class = bericht_klein

css voor voorbeeld
vw is een lengte unit zoals %
in dit geval 90 lengte eenheden
van de breedte van het device!
30 lengte eenheden van de section!
float: left; zorgt ervoor dat
de articles met de class
bericht_klein naast elkaar komen
te staan.

HTML id attribute
De html id attribute geeft je de mogelijkheid
style aan een enkele element te geven.
Een id wordt geplaatst binnen een element
zoals hieronder:
<div id=“naam_id”>
In de stylesheet begint een id met een hashtag (#).
#naam_id {……..}
Een id mag je maar 1 keer gebruiken op een
webpagina en heeft een unieke naam. (geen tagnaam)

id = content_index
id = bovenkant

HTML id attribute
id = content_index
id = bovenkant

css voor voorbeeld
HTML id attribute
De hoogte wordt automatisch bepaald.
De breedte is 90 eenheden van het
device. background-color: zorgt voor
de achtergrond kleur.
De breedte van de section met het
id #content_index wid 90 eenheden
van het device.

Margin en Padding !
BOX-model

Padding !

Padding !
padding met 4 waardes! padding met 3 waardes!

Padding !
padding met 2 waardes! padding met 1 waarde!

Padding voorbeelden !
Bovenkant zonder padding
Bovenkant met padding

Padding voorbeelden !
5 lengte eenheden
rondom de tekst.

Margin !

Margin !
margin met 4 waardes! margin met 3 waardes!

Margin !
margin met 2 waardes! margin met 1 waarde!

Voorbeeld zonder Margin !
Rand is border om body!

Voorbeeld met Margin !

Margin !
Margin wordt gecreëerd
rekenend vanaf html
start pagina.

<ul> element
Unordered list

<ul> style

<ol> element
Ordered list

<ol> style

Navigatie!
In HTML5 gebruiken we voor navigatie het element
<nav> </nav> hierbinnen realiseren we de navigatie voor
de pagina.

Navigatie!
Voor het daadwerkelijk navigeren maken we gebruik
van de a-tag. Je kan navigeren naar een andere pagina
maar ook binnen een pagina naar een id-attribute.
Bijv. #item-kennis.

Navigatie!
Link naar pagina buiten webapplicatie
Je kan gebruik maken van tekst of plaatjes

Navigatie!
Navigatie d.m.v. UL en LI tags
HTML Code

Navigatie!
Navigatie d.m.v. UL en LI tags
CSS Code

Navigatie!
CSS Code
Status van een link

Navigatie toevoegen!

Navigatie style toevoegen!

Navigatie!

Alle stof tot nu toe voorbeeld

Position!

Position basisbestand!

Position: Relative

Position: Relative
Gepositioneerd vanaf begin
van de body zoals ingesteld
in de css n.l. 16vw van begin
scherm.

Position: Relative
Gepositioneerd vanaf de positie van het element waar
het zich in bevindt.

Position: Absolute

Position: Absolute
Gepositioneerd vanaf begin
van de body het 0-punt.
De box staat nu 11vw van links
en 2vh van de top.

Position: Absolute
Gepositioneerd vanaf begin body 0-punt vanaf links maar
wel onder de tekst van blok 1

Position: Fixed

<main> element

<details> en <summary> element
Wanneer er veel dat tegelijk wordt weergegeven
kan je gebruik maken van accordions.
Normaal had je hier javascript voor nodig maar in HTLM5.
Kun je gebruik maken van het <details> element i.c.m. het
<summary> element.
Na klik op kennis

<details> en <summary> element

Navigatie menu met <details> en <summary>
D.m.v. de elementen <detail> en <summary> is het mogelijk
zonder javascript een hamburger menu te creëren zoals
je op vele websites ziet en vooral op webpagina’s / apps
voor de mobieltjes ziet.
We gaan dit stap voor stap uitvoeren.

Navigatie menu met <details> en <summary> Stap 1
Ascii code voor hamburger menu

Logo bijvoegen en positioneren d.m.v.
position absolute en relative.

Navigatie toevoegen d.m.v. ul en vastzetten
hamburger d.m.v. position fixed

Navigatie, ul en a stylen

Aantal mobiele internetters in Nederland!

Responsive d.m.v. Media Query
Media query is een CSS techniek beschikbaar vanaf CSS3.
De @media regel in css geeft stijl aan blokken code
waarvan de @media conditie dit aangeeft.
Als de schermbreedte max 600px
breed is dan word het uitgevoerd.

5 groepen @media indelingen voor
het eenvoudig houden van de beschikbare
devices.

Een andere indelingen die je kunt gebruiken zijn.

Combinaties van indelingen

Voorbeeld @media

Responsive design!
De webapplicatie kan op de meerdere devices anders
zijn dan de webapplicatie voor bigscreen apparaten.
Hou wel rekening met:
• Huisstijl
• Kleuren
• Font’s
• Plaatjes
• Leesbaarheid

Responsive design!

Responsive design!
Bij het maken van een responsive webapplicatie moet je vooraf
rekening houden met de indeling van je webpagina’s.
Gebruik classes en id’s die aanpasbaar zijn aan de grootte
van de schermen.

Responsive design!
Bij coderen van een webpagina met onderscheid tussen
mobiel en groot scherm kan je ook de code ook indelen in mobile
en bigscreen.

1.7 html css terugblik

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (13)

Similaire à 1.7 html css terugblik

Similaire à 1.7 html css terugblik (20)

1.7 html css terugblik