Schrijven voor het web

Waarom zou je dit leren?

Doelstellingen:
  • Teksten kunnen coderen in HTML
  • Invoegen van illustraties en multimedia bestanden
  • Een gevalideerde HTML pagina kunnen aanmaken
  • Voldoende noties van CSS verwerven om elementaire vormgeving van webpaginas te kunnen realizeren

Leermateriaal

Deze module heeft twee units: HTML en CSS.

HTML

Opdrachten HTML en CSS

Schrijf twee blogberichten over een onderwerp waarover je eerder bronnen hebt verzameld (cfr. opdrachten bij de module 'Omgaan met data'). Showcase met deze blogs je verworven html & css vaardigheden.

Blog-account activeren

Wat bloggen

  • concepten becommentariëren
  • je iets afvragen
  • bespreken gevonden bronnen
  • doorlinken/denken vanuit gedane research
  • technische tips
  • tutorial / handleiding

Vereisten van het blog formaat

Inhoudelijk

  1. Verzorg je taalgebruik
  2. Wie is je publiek? Medestudenten? Vulgariserend? ... beslis zelf, maar wees consequent
  3. Bronvermeldingen bij voorkeur in de vorm van hyperlinks in de tekst
  4. Gebruik witruimte (belangrijk voor de leesbaarheid)
  5. Why You Shouldn’t Write Your Posts Using Word. Geldt a fortiori voor het plakken van html-code.
  6. Kies goeie titels (tenminste als je gelezen wil worden)
  7. Kies je onderwerp niet te breed. We zullen hier voornamelijk redelijk technische blogs hebben, of minstens met een technische component. Focus per blog op één vraag die je wil oplossen.
  8. Link! Een blog is een internetformaat, daar horen hyperlinks bij.
  9. Probeer een teaser aan je blog toe te voegen: catchy titel, filmpje, beeld, citaat ...

Voorbeelden

Technisch

JIT leren

w3schools online web tutorials

HTML

Toon met je blogberichten dat je weet hoe in html de volgende types tags te gebruiken (voorbeelden zijn niet exhaustief):

  1. Tekst tags (pre, h1-5, em)
  2. Link tags (hyperlinks, image-links, a tag)
  3. Structuur (paragraaf, nieuwe lijn, citaat, lijsten, lijn)
  4. Beelden en video (img, iframe)
  5. Formulieren (form, input)

CSS

Toon in je blogberichten aan dat je de weergave van een html-bestand kan controleren met css-regels.

  • Toon aan dat je het box model begrijpt en kan toepassen
    • borders, margins, padding
  • Maak gebruik van volgende css-elementen en -eigenschappen (EN: css properties & css selectors)
    • 'class' en 'ID' css attributen
    • 'span' en 'div' elementen
    • fonts
    • links
    • lists
    • colors en backgrounds
    • text formatting properties: color, alignment, transformation ...
    • width, height, max-width
    • align, float/inline-block, clear
    • CSS meeteenheden (units), absolute zowel als relatieve
  • Normaliter wordt css in externe .css bestanden opgeslagen, in dit geval doe je het met een interne style sheet (boven de tekst van je blog) of inline (in je tekst). Voor deze oefening gebruiken we enkel interne style sheets.
  • Let er op dat je code responsive is.
    • TIP: firefox firebug extensie
  • Zorg ervoor dat je css niet interfereert met de lay-out van de rest van de website.

Leren en plagiëren

Banner

Hoe evalueren we html en css vaardigheden?

Op basis van de kwaliteit en hoeveelheid van de html tag en css regels die je gebruikt (cfr. supra). Maar onthoud dat onderstaande dingetjes resulteren in een onvoldoende:

  1. gebruik van h1 tag in de body van je blog, daar zorgt het CMS zelf voor
  2. gebruik van de html, title en body tags, die zijn niet nodig want worden automatisch door de website gegenereerd
  3. je css interfereert met de lay-out van de rest van de website (voorbeelden supra)
  4. je code is niet responsive
  5. voor css gebruik je een externe style sheet (external style sheet) of inline style (inline style) in plaats van een interne style sheet (internal style sheet) boven de html

Tips

  1. geen feedback meer zonder url bij de vraag
  2. verschil tussen inline style en inline style sheet
  3. de aangewezen workflow is deze:
    • schrijf je tekst, bij voorkeur in een texteditor
    • voeg er alle html aan toe (zonder css)
    • maak boven je html een interne style sheet aan
    • vul die in met de css voor grootste doos ("boxmodel")
    • en werk zo verder tot de kleinste te stylen elementen
  4. indien je al je html (= je hele blogpost) wil stylen gebruik dan een div in plaats van de body tag (die laatste wordt al door het cms gegenereerd)
  5. maak je styling uniek
    • gebruik voor je id en classes geen termen zoals content, header, footer … die zijn mogelijk al gedefinieerd
    • je eigen naam als id of tag gebruiken is beter dan p1
    • je kan ook gebruiken maken van het node ID
  6. <p1> ? <h> ?; wel <h2> en <p id="hc-p1">
  7. responsive video: zet de iframe van de video in een p tag en voeg daar een class 'resp-video' aan toe
  8. de roze achtergrondkleur van een blog die je als draft hebt opgeslagen verdwijnt van zodra je publiceert
  9. de firebug of webdeveloper extensies voor firefox en chrome kunnen je helpen bij het debuggen en afwerken van je css
  10. gebruik geen code die je zelf niet snapt (van w3schools bijvoorbeeld)
  11. </br>bestaat niet
  12. witruimte is belangrijk
    witruimte en centreren
    • goed ritme: aandacht trekken op headers door beeld
    • goed gebruik actieve witruimte: afstand tussen beeld en header, tussen tekst boven en onder header
  13. Centreer je text niet ... behalve als je poëzie wil schrijven. Onze ogen hebben een anker nodig om snel te kunnen lezen. Links uitgelijnde tekst is het beste voor het web.
  14. Zorg dat je tekst niet tegen de wand van de doos aanbeland, gebruik padding
  15. Schaal je bannerafbeelding op voorhand, op 730x290 pixels
HTML oefening les 1

Probeer "wat is informatie-vb.txt" om te zetten in een gelayoute HTML file met enkele hyperlinks.

wat_is_informatiekunde-vb.txt

Plain text iconwat_is_informatiekunde-vb.txt





Kijk ook naar http://www.w3schools.com
 
Werkwijze:
  • download  wat is informatiekunde-vb.txt  en open in Atom of andere tekst-editor, bv Notepad++ . 
  • Bewaar in een aparte folder (bv weboefening), waarbij je bij "save as type" kiest voor "All files" en geef dit de naam: watisinformatiekunde.htm 
  • Voeg in het document HTML structuurcodes toe: html, head, title, body.
  • Voeg dan html tags toe om het documentte layouten zoals in het voorbeeld  "wat is informatiekunde-vb.pdf"
  • Dit doe je onder meer met h1, h2, p en ol tags. 
  • Maak dan een stylesheet sectie in de header met de <style> tag.  
  • Probeer nu in de stylesheet de html elementen zoals h1, p etc. van de juiste layout te voorzien. 
  • Nadien knip je de stylesheet eruit en plak je die in een nieuw document, bv informatiekunde.css, die je dan linkt in  de webpagina via de <link> tag. 
 

 

CSS

Opdrachten HTML en CSS

Schrijf twee blogberichten over een onderwerp waarover je eerder bronnen hebt verzameld (cfr. opdrachten bij de module 'Omgaan met data'). Showcase met deze blogs je verworven html & css vaardigheden.

Blog-account activeren

Wat bloggen

  • concepten becommentariëren
  • je iets afvragen
  • bespreken gevonden bronnen
  • doorlinken/denken vanuit gedane research
  • technische tips
  • tutorial / handleiding

Vereisten van het blog formaat

Inhoudelijk

  1. Verzorg je taalgebruik
  2. Wie is je publiek? Medestudenten? Vulgariserend? ... beslis zelf, maar wees consequent
  3. Bronvermeldingen bij voorkeur in de vorm van hyperlinks in de tekst
  4. Gebruik witruimte (belangrijk voor de leesbaarheid)
  5. Why You Shouldn’t Write Your Posts Using Word. Geldt a fortiori voor het plakken van html-code.
  6. Kies goeie titels (tenminste als je gelezen wil worden)
  7. Kies je onderwerp niet te breed. We zullen hier voornamelijk redelijk technische blogs hebben, of minstens met een technische component. Focus per blog op één vraag die je wil oplossen.
  8. Link! Een blog is een internetformaat, daar horen hyperlinks bij.
  9. Probeer een teaser aan je blog toe te voegen: catchy titel, filmpje, beeld, citaat ...

Voorbeelden

Technisch

JIT leren

w3schools online web tutorials

HTML

Toon met je blogberichten dat je weet hoe in html de volgende types tags te gebruiken (voorbeelden zijn niet exhaustief):

  1. Tekst tags (pre, h1-5, em)
  2. Link tags (hyperlinks, image-links, a tag)
  3. Structuur (paragraaf, nieuwe lijn, citaat, lijsten, lijn)
  4. Beelden en video (img, iframe)
  5. Formulieren (form, input)

CSS

Toon in je blogberichten aan dat je de weergave van een html-bestand kan controleren met css-regels.

  • Toon aan dat je het box model begrijpt en kan toepassen
    • borders, margins, padding
  • Maak gebruik van volgende css-elementen en -eigenschappen (EN: css properties & css selectors)
    • 'class' en 'ID' css attributen
    • 'span' en 'div' elementen
    • fonts
    • links
    • lists
    • colors en backgrounds
    • text formatting properties: color, alignment, transformation ...
    • width, height, max-width
    • align, float/inline-block, clear
    • CSS meeteenheden (units), absolute zowel als relatieve
  • Normaliter wordt css in externe .css bestanden opgeslagen, in dit geval doe je het met een interne style sheet (boven de tekst van je blog) of inline (in je tekst). Voor deze oefening gebruiken we enkel interne style sheets.
  • Let er op dat je code responsive is.
    • TIP: firefox firebug extensie
  • Zorg ervoor dat je css niet interfereert met de lay-out van de rest van de website.

Leren en plagiëren

Banner

Hoe evalueren we html en css vaardigheden?

Op basis van de kwaliteit en hoeveelheid van de html tag en css regels die je gebruikt (cfr. supra). Maar onthoud dat onderstaande dingetjes resulteren in een onvoldoende:

  1. gebruik van h1 tag in de body van je blog, daar zorgt het CMS zelf voor
  2. gebruik van de html, title en body tags, die zijn niet nodig want worden automatisch door de website gegenereerd
  3. je css interfereert met de lay-out van de rest van de website (voorbeelden supra)
  4. je code is niet responsive
  5. voor css gebruik je een externe style sheet (external style sheet) of inline style (inline style) in plaats van een interne style sheet (internal style sheet) boven de html

Tips

  1. geen feedback meer zonder url bij de vraag
  2. verschil tussen inline style en inline style sheet
  3. de aangewezen workflow is deze:
    • schrijf je tekst, bij voorkeur in een texteditor
    • voeg er alle html aan toe (zonder css)
    • maak boven je html een interne style sheet aan
    • vul die in met de css voor grootste doos ("boxmodel")
    • en werk zo verder tot de kleinste te stylen elementen
  4. indien je al je html (= je hele blogpost) wil stylen gebruik dan een div in plaats van de body tag (die laatste wordt al door het cms gegenereerd)
  5. maak je styling uniek
    • gebruik voor je id en classes geen termen zoals content, header, footer … die zijn mogelijk al gedefinieerd
    • je eigen naam als id of tag gebruiken is beter dan p1
    • je kan ook gebruiken maken van het node ID
  6. <p1> ? <h> ?; wel <h2> en <p id="hc-p1">
  7. responsive video: zet de iframe van de video in een p tag en voeg daar een class 'resp-video' aan toe
  8. de roze achtergrondkleur van een blog die je als draft hebt opgeslagen verdwijnt van zodra je publiceert
  9. de firebug of webdeveloper extensies voor firefox en chrome kunnen je helpen bij het debuggen en afwerken van je css
  10. gebruik geen code die je zelf niet snapt (van w3schools bijvoorbeeld)
  11. </br>bestaat niet
  12. witruimte is belangrijk
    witruimte en centreren
    • goed ritme: aandacht trekken op headers door beeld
    • goed gebruik actieve witruimte: afstand tussen beeld en header, tussen tekst boven en onder header
  13. Centreer je text niet ... behalve als je poëzie wil schrijven. Onze ogen hebben een anker nodig om snel te kunnen lezen. Links uitgelijnde tekst is het beste voor het web.
  14. Zorg dat je tekst niet tegen de wand van de doos aanbeland, gebruik padding
  15. Schaal je bannerafbeelding op voorhand, op 730x290 pixels

Meta