HTML / CSS

HTML Made Easy

By Wouter Vandenneucker / @woutervddn

Overzicht

• Algemene info
• Doel van workshops
• History
• HTML4 en CSS
• HTML5 en CSS3
• Eigen template maken

Algemene info

Wie?

• Wouter: w@vdnkr.be
• Berend: online@visionsandviews.net

Meevolgen

• http://webvi.be/html

Doel

History

• Internet en WWW
• Server <> Client

Statische pagina's

• Academische papers
• enkel delen van informatie

Slimme, dynamische pagina's

• Servertalen
• later ook client talen

//PHP
....
$gebruikersnaam="John Doe";
echo "<h1>";
echo "welkom, " + $gebruikersnaam;
echo "</h1>";
....

<!--HTML-->
<h1>welkom, John Doe</h1>

Wekom, John Doe

• Meer stijl dan enkel achtergronden en tekstkleuren
• Geboorte van CSS
• Cascading Style Sheets

Dynamische pagina's met stijl

• basis gebleven
• mooier geheel, betere structuur en regels
• Geboorte HTML5 en CSS3
• Oude browsers = doorn in het oog

HTML en CSS

• HTML = voor structuur
• CSS = voor design/stijl

< !DOCTYPE html >
< html >
    < head >	
        <meta charset="utf-8">
        <title>Titel</title>
        <meta name="description" content="">

        <link rel="stylesheet" href="css/mijnstijl.css">
        <script src="js/mijnJavascript.js"></script>
    < /head >
    < body >

        <p>Welkom, John Doe</p>

        <script src="js/meerJavascript.js"></script>
    < /body >
< /html >

Open favoriete website

En nu de CSS

• Wie wil spieken:

  • simpele css
  • uitgebreide css
  • volledige css

• Cheatsheet:

  • http://www.lesliefranke.com/files/reference/csscheatsheet.html