Theorie - Les 1

HTML & CSS
Joachim Nijs - Pieter Jorissen
INLEIDING
INLEIDING
planning
• periode 1 (6 weken)
• theorie: 1u / week
• labo: 2u / week
• vervolgvak: javascript 1 (periode 2)
lectoren
• Joachim Nijs
• theorie
• labo groep E - F
• joachim.nijs@kdg.be
• Pieter Jorissen
• labo groep A - B - C - D
• pieter.jorissen@kdg.be
2
INLEIDING
cursusmateriaal
• handboek
• HTML en CSS - de basis (2e editie)
• zowel voor theorie als praktijklessen
• oefeningen
• kleine oefeningen elke laboles
• uit handboek + extra (blackboard)
• grote oefening: Portfolio
• wordt elke week aan verder gewerkt
• verdere toelichting in laboles
evaluatie: openboek examen

• grote pc opdracht
• mondelinge verdediging (max 30% punten)
• de pc opdracht + portfolio
3
INLEIDING
software
• Eclipse Classic
• gratis, voor mac & pc
• http://www.eclipse.org
• syntax highlighting
• andere programma’s ook toegelaten
• gebruik code-editor, niet WYSIWYG
praktisch
• theorielessen
• laptop niet toegestaan
• handboek steeds meebrengen
• labolessen
• laptop en handboek steeds meebrengen
• zorg dat laptop en netwerkverbinding werkt
4
HTML & CSS
Joachim Nijs - Pieter Jorissen
THEORIE - LES 1
hoofdstuk 1 - stramien en tekst (html)
hoofdstuk 2 - afbeeldingen (html)
HOOFDSTUK 1: INHOUD
Stramien en tekst
• wat is HTML
• wat is CSS
• verschillen HTML en XHTML
• begrippen
• algemene structuur
• XHTML eigenschappen en specificaties
• hoe wordt een (X)HTML pagina verwerkt?
• HEAD onderdelen
• gestructureerde tekst
6
WAT IS HTML
HyperText Markup Language

• geen echte ‘programmeer’-taal
• wel een opmaak-taal
• gebaseerd op SGML
• webbrowser interpreteert en toont HTML
• W3C legt standaarden vast
• zo goed mogelijk trachten te volgen!
Tim Berners
7
WAT IS CSS
Cascading Style Sheets

• doel: opmaken van html-documenten
• code html blijft ongewijzigd
• opmaak en inhoud blijven
gescheiden
• opmaakcode oudere HTML versies
(deprecated tags & attributen)
vervangen door stijlen of
opmaakprofielen
• voordeel: opmaak eenvoudig aan te
passen
8
WAT IS XHTML
eXtensible HTML
• laatste versie HTML: 1999 (versie 4.1)
• daarna: XHTML (nu versie 1.1)
• in ontwikkeling: html 5
• de XML (eXtensible Markup Language)
versie van HTML
belangrijke praktische verschillen met HTML

• tags sluiten
• hoofdlettergevoelig
• elementen nesten: <p> <pre> inhoud </
pre> </p>
• body-inhoud verplicht in een blok-element
<p>, <div>, <hX>, <form>, <ol>, <ul>,
<dl>, <blockquote>, <pre>, <table>…
9
BEGRIPPEN
• element
• bouwsteen van de taal
• vb: html, body, title, p,...
• tag
• elementnaam tussen < > (punthaken,
vishaken, ...)
• begintag: <body>
• eindtag: </body>
• lege tag: <br /> (tags zonder inhoud)
• attribuut
• eigenschap van een element
• vb: width, alt, src,...
• waarde
• de waarde van een attribuut
• staat altijd tussen dubble aanhalingstekens
• vb: “100px”
10
ALGEMENE STRUCTUUR boek: p14
<?xml version="1.0" encoding="iso-8859-1"?> xml declaratie
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" doctype

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> declaratie
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl" > namespace

& taal aanduiding
<head>
<title>Hier komt de verplichte titel</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />


</head>
tekenset
<body>
<p>Hello World!</p>


</body>
</html>
11
XHTML SPECIFICATIES & EIGENSCHAPPEN
• vastgelegd door W3C

• world wide web consortium
• http://www.w3.org
• 3 versies van XHTML 1.0
• strict - deprecated elements niet toegelaten
• transitional - deprecated elements wel
toegelaten
• frameset - indien je frames wenst te gebruiken
• gekozen versie duid je aan in DOCTYPE
• wij werken enkel met STRICT
• code opslaan als .html bestand (niet .htm)
• controleer je code (valideer)
• http://validator.w3.org
12
HOE WORDT HET VERWERKT
• website is verzameling van

• XHTML pagina’s (.html)
• CSS bestanden
• media bestanden (afbeeldingen, video’s)
• staan op een webserver
• client (de browser) vraagt beginpagina op bij de
webserver
• meestal index.html
• via hyperlinks zijn de verschillende pagina’s gekoppeld
13
HEAD ONDERDELEN
<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<meta description= "Portfolio van een MCT Student" />

<meta keywords= "mct, kdg, multimedia, webdesign" />
<title>Hier komt de verplichte titel</title>
</head>
• head: specifieke gegevens over de pagina

• content type & taal
• description: 1 zin beschrijving
• keywords: kernwoorden ivm de inhoud
• titel
• wordt gebruikt als titel van browservenster /
tabs
• weergegeven in zoekmachines
• titel bij toevoegen aan je favorieten
14
GESTRUCTUREERDE TEKST
de html-pagina van tekst voorzien

alinea’s
• <p> </p>
• de basis tag om tekst in te plaatsen
koppen (heading)
• <h1> </h1>, <h2> </h2>, <h3> </h3>, ...
• zorgt voor extra structuur
• h1 is belangrijkste kop, h2 is een subkop, enz.
tekst benadrukken
• <em> </em> standaard cursief weergegeven
• <strong> </strong> standaard vet weergegeven
• <i>,<b> liever niet gebruiken
15
HOOFDSTUK 2: INHOUD
Afbeeldingen
• soorten
• img element en verplichte attributen src, alt
• attributen title, width, height
• het begrip inline en de <br/> tag
• structuur aanbrengen
• gebruik als achtergrond
16
SOORTEN AFBEELDINGEN
.jpg
• vooral geschikt voor foto’s
• onbeperkt aantal kleuren
.gif
• niet geschikt voor foto’s, wel figuren
• beperkt aantal kleuren (256)
• 1 kleur kan volledig transparant zijn
• animatie: animated gif
.png
• onbeperkt aantal kleuren
• geavanceerde transparantie
17
AFBEELDINGEN INVOEGEN
<img src="logo.jpg" alt="KdG logo" />
<img … />
• tag om afbeelding in html in te voegen
• steeds insluiten in een block element, wordt gezien als
“tekst”
bv. tussen <p> tags
verplichte attributen (volgorde is vrij)
• src
• de locatie van de afbeelding
• gebruik enkel kleine letters in bestandsnaam
• alt
• tekst als afbeelding (nog) niet getoond wordt
• beschrijft de afbeelding of verklaart de functie
• kan leeg gelaten worden ( alt="" )
18
BIJKOMENDE ATTRIBUTEN
<img src="poster.jpg" alt="Mad Men" title="poster van Mad Men" width="436" height="300" />
title
• aanvullende info
• weergegeven in tooltip De poster van Mad Men
• kan ook op andere tags geplaatst worden

width
• optioneel breedte
• standaard in pixels
height
• optioneel hoogte
• standaard in pixels
19
HET BEGRIP "INLINE" & <BR/>
afbeelding wordt op zelfde lijn geplaatst
<p>
<img src="poster.jpg" alt="Mad Men 3" />
De poster van Mad Men seizoen 3
<p> De poster van Mad Men seizoen 3
afbeelding & tekst in aparte <p>

<p>
</p>
<p>
De poster van Mad Men seizoen 3 De poster van Mad Men seizoen 3
</p>
met <br /> nieuwe regel afdwingen

<p>
<br />De poster van Mad Men seizoen 3
</p>
De poster van Mad Men seizoen 3
20
STRUCTUUR AANBRENGEN
html bestand & afbeelding in zelfde map
• <img src="logo.jpg" alt="KdG logo" />
• inhoud src is bestandnaam
afbeelding in sub-map
• <img src="images/logo.jpg" alt="KdG logo" />
• inhoud src is map/bestandnaam
• geen spaties in mapnaam
relatief pad
• src="images/logos/kdg.jpg"
• je vertrekt vanaf de huidige locatie, plaats van het html
bestand
absoluut pad
• src= "http://www.kdg.be/images/logos/kdg.jpg"
• pad is de volledige url
• gebruiken indien bestand niet op eigen server staat
21
AFBEELDINGEN ALS ACHTERGROND
<body style="background-image:url(afbeelding.png); ">
• style attribuut toevoegen aan element (inline css)
• css eigenschap background-image
achtergrond al dan niet vasthouden bij scrollen

• background-attachment:[fixed|scroll];
achtergrond al dan niet herhalen:

• background-repeat:[repeat|repeat-x|repeat-y];

opmerking: deze code is een inline css style
• moeten we later zoveel mogelijk vermijden
• de correctere methode zien we bij het onderdeel css
22
THEORIE LES 2
hoofdstuk 3 - hyperlinks (html)
hoofdstuk 4 - stijlen voor tekst (css)

Theorie - Les 1

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Theorie - Les 1

Hochgeladen von

Copyright:

Verfügbare Formate

HTML & CSS

Joachim Nijs - Pieter Jorissen

evaluatie: openboek examen

HyperText Markup Language

Cascading Style Sheets

belangrijke praktische verschillen met HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" doctype

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl" > namespace

• vastgelegd door W3C

• website is verzameling van

• head: specifieke gegevens over de pagina

de html-pagina van tekst voorzien

• kan ook op andere tags geplaatst worden

afbeelding & tekst in aparte <p>

met <br /> nieuwe regel afdwingen

achtergrond al dan niet vasthouden bij scrollen

achtergrond al dan niet herhalen:

Das könnte Ihnen auch gefallen