HTML

basics

1969
1989
1992

1969

ARPANET

1989

The very first webpage

1992

Eerste grafische webpagina.


CERN

CERN on ​Google maps

Tim Berners-Lee
Robert Cailliau

bedenkers en grondleggers
van de basisfundamenten van het WWW

HTML?

  • HyperText Markup Language
  • Plain Text
  • bestaat hoofdzakelijk uit TAGS
  • bevat geen afbeeldingen
  • opmaak taal om inhoud semantische te structureren

Geen programmeertaal!

Welke browser?

Wat gebeurt er bij?

​http://www.rec.be

Anatomy van een webpagina

view source > inspector browser

HTML syntax

vakjargon

BROWSER, URL, HTTP,
TCP/IP, DNS-server, FTP-server, CLIENT-side, SERVER-side,
HTML, CSS, ASCII, W3C, Javascript, PHP, MySQL

Schrijf tips

  • Schrijf TAGS nooit met hoofdletters (CAPS)
  • Plaatst notities in je HTML dmv. <!—- - dit is een nota - -—>
  • Plaatst een versie nummer bovenaan met datum
  • HTML is ‘spatie ongevoelig’ en ‘case insensitive’
  • HTML bestandsnamen zijn ‘case sensitive’ en best ook geen spaties in de naam.
  • .html extensie

Veelgebruikte TAGS

​new HTML-5 tags

HTML Resources

Interessant online studiematerial…

Beelden op het web

Om beelden in HTML weer te geven worden deze gelinkt.
Elk beeld wordt dus apart bewaard op het juiste formaat.

  • Beelden worden op ware grootte in pixels op 72dpi (dots per inch) bewaard of het nieuwe @x2 formaat (retina)
  • RGB kleur! Geen CMYK
  • in formaten GIF, JPG, PNG, SVG
  • tip: gebruik ’ save for web’ panel

GIF

  • The Compuserve Graphics Interchange Format
  • Het oudste beeldformaat op internet, ontwikkeld door Compuserve. ​http://giphy.com/ > terug heel populair!
  • Maximum 256 kleuren enkel 72 dpi
  • Non-lossy LZW compressie
  • Heeft een interlace functie
  • Vanaf GIF89a, beperkte transparantie en animatie mogelijk via ‘Animated GIF’
  • Gebruik: bij illustraties, volle vlakken, vb. Logo’s, minder goed bij foto’s en verlooptinten, beelden met veel kleuren
  • .gif extensie

JPG

  • The Joint Pictures Experts Group
  • Miljoenen kleuren, full RGB (scherm) & CMYK (print), meer dan 72dpi mogelijk
  • Variabele Lossy compressie, kleine bestanden(tot de helft), maar kwaliteitsverlies (artifacts; blokjes)
  • Heeft een ‘progressive’ functie
  • Geen transparantie of animatie mogelijk
  • nieuwe JPEG 2000 versie, dankzij Daubechieswavelet-transformatie
  • Concreet gebruik: bij foto’s, slecht bij volle vlakken
  • .jpg extensie

PNG

  • Portable Network Graphic, 1995
  • Meest robuste webformaat, max. 48-bit RGB, 16 bit grijswaarden
  • Non-lossy variabele compressie, 5-25%, beter dan GIF
  • Heeft een ‘interlacing progressive display’ functie
  • 8-bit transparantie
  • Geen Animatie
  • Gebruik: bij kleinere foto’s, en illustraties waar kwalitateit belangrijk is met degelijke transparantie
  • .png extensie

SVG

  • Scalable Vector Graphics, een op XML gebaseerde internetstandaard voor statische en dynamische vectorafbeeldingen
  • niet echt een beeldformaat > eerder een reeks van instructies
  • dynamisch aan te passen
  • weegt niets is pure code > voelt HTML/CSS achtig aan
  • niet alle browsers ondersteunen SVG (enkel moderne)
  • gebruik: het nieuwe formaat voor alles dat vectorieel van karakter is. Vb. logo’s
  • meer en meer tools bieden SVG export aan (bv illustrator)

Save for web

…versta hierbij ‘ ​het optimaliseren van beelden
voor online gebruik’…

Save for web

via photoshop

Save for web

via illustrator

Save for web

via Adobe bridge

online publishing

​versta hieronder het ‘online’ plaatsen van een lokale website naar de webhost of provider. Zodat je website voor iedereen bereikbaar komt.

HTML/CSS (static)

Website wordt gemaakt via HTML editors zoals ‘Atom’ of WYSIWYG editors zoals Dreamweaver, Muse.

Finale website wordt geupload via een FTP programma naar de webserver van de webhost.

(s)FTP

File Transfer Protocol

Voor het uploaden van je website naar je webhost.