1.1 html css introductie

1.1 Introductie HTML/CSS
HTML module11.1 Introductie HTML/CSS

Lesdoel!
Begrijpenwat de techniek
achter eenwebpaginais!

HTML module1
Hoe werkt het internet?
Klik voor de geschiedenis van het internet!

Welke talen moet een webdeveloper
minimaalbeheersen?

HTML module1
Structuur
van de
webpagina
Vormgeving
van de
webpagina
Interactie
van een
webpagina

HTML is de afkorting van
HypertextMarkupLanguage
HTML is destandaard opmaaktaal voor webpagina’s!

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

HTML module1
Is een Markuplanguage
HTML maaktgebruik van elementen
met daarineen start en een eind tag.
element
tag

HTML module1
Nested elements
HTML heeftstandaardeen aantalelementen
diemeerdere tag’sen elementen kunnenbevatten.
Debody, header,
section en footer
tag zijnin dit
voorbeeld nested
elements.

HTML module1
Basispaginahtml
Unicode charset t.b.v. alle tekens
inde wereld
Taal vanhet land
waarvoor dewebsite
is bedoeld

HTML module1
Basispaginahtml
Noodzakelijkvoor
scaling meerderedevices!

HTML module1
Basispaginahtml
Wat is het onderwerp
van de webpagina!
Wieheeft dewebpagina
gemaakt.
Steekwoorden die
voorkomen op dewebpagina!
Metagegevenszijnbelangrijkvoorzoekmachines!

HTML module1
Basispaginahtml
Detitle is verplicht
enverschijnt op het
tabblad van de browser.
Daarnaast ook belangrijk
voor de zoekmachines.

HTML module1
Basispaginahtml
Hier plaats je de link
naar css bestand voor
devormgeving van de
website.

HTML module1
Basispaginahtml
Alles wat in
het <head>
element staat
verschijnt niet
op depagina!

HTML module1
Basispaginahtml
Alle content wat op het
schermmoet verschijnen
moet in debody staan.

HTML module1
Editors voor webpagina’s
Voor hetmakenvan webpagina’s heb je zgn. editor software
nodig!. Deeenvoudigste om tegebruikenis notepad ++.
Daarnaast zijn er meerdereeditors zoals hieronderweergegeven.
Jemag gebruikenwelkeje zelf het handigst vind.

HTML module1
Kies de juiste browser om
je code te testen!
Mijn advies is gebruiktemakenvan firefox developer editie.
Hierin zijn zijn tools toegevoegd om deuitkomst vanje
webapplicatie tetesten en aan te passen.
Klik op het logo

Doe opdracht!
HTML module1
Om goed testarten, ga je een structuuraanbrengen zoals
dezeop webservers gebruikelijk is.
De1e pagina van een webapplicatie is altijd index.html of
index.php. Daarnaast is er een mappenstructuurop een webserver.
Open bestandsbeheer op je laptop of macbook, maak een map aan metde naam HTMLmodule 1.
Maak een map aan metde naam les 1.1.
Deel deze map in metde volgende 2 mappen:
• css
• images.

Doe opdracht!
HTML module1
Maak een keuzevoor een editor enopen deze editor.
Open nu de editor of notepad ++.
Maak een nieuwbestand aan.
Sla hetbestand op metals naam index.html in de map
les 1.1.
Typeeen willekeurigetekst ensla het bestand nogmaals op.
Ga naarde map enklikop derechtermuisknop
enkies voor openen metkies voor openen met firefox.
Jeziet inde browser hetresultaat.

Doe opdracht!
HTML module1
Maak een nieuwbestand aan ennoem deze basispagina.html.
Tikonderstaande tekst over ensla het bestand nogmaal op.
Jehebtnu een bestand dat je
iedere keerkunt hergebruiken.

CSS is de afkorting van
CascadingStyleSheets
CSS is deopmaaktaal voor de
vormgevingvan webpagina’s!

Eencss bestand.
HTML module1
Het stijlen van een webpagina werkt d.m.v. css code.
CSS-codekangeplaatst worden inde <head> sectie van een webpagina,
toegevoegd worden aan een element/tag of als extern bestand.
Devoorkeurgaat uit naareen extern bestand. Deextensie van een
css bestand is .css bijvoorbeeld style.css. Hierondereen voorbeeld.
Het begint metde tag of
element endaarna { }.
Tussen deaccolades komt
decode voor dat element
testaan.

Doe opdracht!
HTML module1
Open de editor of notepad ++.
Maak een nieuwbestand aan.
Sla hetbestand op metals naam style.css in de map
les 1.1/css

HTML module11.1 Introductie HTML
Zoalseerder in de lesgemeld werkthtml metelementen
en tags.1 van de tagsis <P> .. </P>
Een webpagina ziet dit als een paragraaf zoals een stuk
tekst inbijvoorbeeld MSWord.

Erzijnookeen tagsvoorkoptekstennl.
<h1>..</h1> t/m <h6>…</h6>
Een webpagina ziet dit als koptekst geeft er standaard
een stijl aan zoals in ms word.

Stijlen vandepen h-tag.
Zoals eerder in de les gemeld kanje tag’s stijlen d.m.v. css.

HTML module1
Samenvattend
Tijdens deze les zijnde volgende zakenbehandeld:
•Hoe werkteen website?
•HTML– HyperText MarkupLanguage
•HTML onmisbaar voor webdeveloper
•Welketalen moet een webdeveloper minimaal beheersen
•HTML– Structuur/CSS – Design / JS– interactie
•HTML is de belangrijkste taal voor developer
•HTML maakt gebruikvan tag’s.
•Nesting van Elements
•Keuzevan code-editors

HTML module1
Quiz!
Tijdens de lessen wordt er ook gebruikgemaakt van
Quizenom te kijkenof destof begrepen is.
Dequiz vindt je op kahoot.it. Dit kan op dewebsite
maarook op de telefoon. Eris een app. Installeer deze.

HTML module1
Huiswerk !
Maak een webpagina over jezelf metnaam
telefoon email hobbies en je kennistot nu toe m.b.t.
webdesign. Maak gebruikvan de p enh1-tag en let
op title etc. in demetagegevens. Style het geheel
d.m.v. een stylesheet.
Maak een zipfile van debestanden en upload
dezenaar edmodo opdracht 1.1.

1.1 html css introductie

Recommended

Recommended

More Related Content

Similar to 1.1 html css introductie

Similar to 1.1 html css introductie (20)

1.1 html css introductie