SlideShare a Scribd company logo
1 of 10
LES 1 - INLEIDING
3 manieren om een website te
                bouwen:
- Code: XHTML – CSS – PHP – jQuery – JavaScript
- Software (wysiwyg): Dreamweaver, Textmate, SublimeText
- CMS: Drupal, Joomla, Wordpress, …
Algemene feiten
- Website bestaat uit webpagina’s met homepage (eerste
  pagina)
- Opslaan als .html of .htm
- Webdesign is GEEN tekstverwerking!
- Sla nooit op met spaties, hoofdletters of speciale tekens,
  behalve – en _.
  Bv wie-zijn-wij.html of wiezijnwij.html of wie_zijn_wij.html
HTML:
-   Tim Berners-Lee (CERN).
-   W3 Consortium (w3.org)
-   Tags <html></html>
-   Element, attribuut, waarde
    <imgsrc=“zon.jpg” />
Versies
- HTML 4
- XHTML 1
- HTML 5 (nog niet volledig ondersteund)
Kleuren
- 3 basiskleuren: Rood Groen Blauw
  dus niet… rood geel blauw #FF0000
- Red, green, blue, orange, yellow, enz.
- Elke kleur heeft waarde tussen 0 en 255
- Hexadecimaal:

                         Grootte
- Pixel: vaste waarde
- Percent: variabele waarde
XHTML
-   Geen hoofdletters in elementen en attributen
-   Waarde altijd tussen aanhalingstekens “ “
-   Attributen hebben altijd een waarde
-   Tag altijd afsluiten (<img />, <br />)
-   Tags nooit kruisen (correct: <b><i>woord</i></b>)
-   Afbeelding steeds alt-beschrijving geven
-   Speciale tekens via code
-   Doctype XHTML strict
-   XML-namespace
Browserprobleem
-   Internet Explorer (6, 7, 8, 9 en 10)
-   Firefox
-   Chrome
-   Opera
-   Safari

- Statistieken gebruik: gs.statcounter.com
- Test via Ietester, browser, browsershots.org, enz
XHTML strict
- Validator.w3.org
- W3schools.com/tags
Tags
-   Html, head, body
-   Title
-   Strong, em (ipv b, i)
-   H1, h2, …, p, br
-   hr
-   Ul, ol, li
-   Sub, sup
-   Blockquote
-   Cite, kbd, code, pre, tt, samp, var

More Related Content

Similar to Html css-les1

Css Positionering
Css PositioneringCss Positionering
Css Positioneringohmdesign
 
Gastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScriptGastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScriptMilan van Bruggen
 
Javascript Intro
Javascript IntroJavascript Intro
Javascript IntroHans Rossel
 
Talk 02 html5-css3
Talk 02 html5-css3Talk 02 html5-css3
Talk 02 html5-css3Monkeyshot
 
The power of joomla!
The power of joomla!The power of joomla!
The power of joomla!Rick Spaan
 
The power of joomla!
The power of joomla!The power of joomla!
The power of joomla!Rick Spaan
 
Powerpoint Htmlcss
Powerpoint HtmlcssPowerpoint Htmlcss
Powerpoint HtmlcssHans Rossel
 
Ict2 trm- werking internet
Ict2 trm- werking internetIct2 trm- werking internet
Ict2 trm- werking internet250491
 
Maximale impact met woorden online
Maximale impact met woorden onlineMaximale impact met woorden online
Maximale impact met woorden onlineBart De Waele
 
How to create a Drupal theme (Dut
How to create a Drupal theme (DutHow to create a Drupal theme (Dut
How to create a Drupal theme (DutN digital studio
 
Drupal koba-nov2013
Drupal koba-nov2013Drupal koba-nov2013
Drupal koba-nov2013Hans Rossel
 
1.3 html css basis 2
1.3 html css basis 21.3 html css basis 2
1.3 html css basis 2mvanginkel
 
Tutorial html en css
Tutorial html en cssTutorial html en css
Tutorial html en cssJohan Smits
 
Presentatie bij de training HTML5 die plaatsvond na afloop van de sessie Mico...
Presentatie bij de training HTML5 die plaatsvond na afloop van de sessie Mico...Presentatie bij de training HTML5 die plaatsvond na afloop van de sessie Mico...
Presentatie bij de training HTML5 die plaatsvond na afloop van de sessie Mico...SLBdiensten
 

Similar to Html css-les1 (20)

Css Positionering
Css PositioneringCss Positionering
Css Positionering
 
Gastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScriptGastcollege: Basis HTML, CSS en JavaScript
Gastcollege: Basis HTML, CSS en JavaScript
 
Prosite Webinar 2010
Prosite Webinar 2010Prosite Webinar 2010
Prosite Webinar 2010
 
Javascript Intro
Javascript IntroJavascript Intro
Javascript Intro
 
Talk 02 html5-css3
Talk 02 html5-css3Talk 02 html5-css3
Talk 02 html5-css3
 
HTML5 Overview
HTML5 OverviewHTML5 Overview
HTML5 Overview
 
The power of joomla!
The power of joomla!The power of joomla!
The power of joomla!
 
The power of joomla!
The power of joomla!The power of joomla!
The power of joomla!
 
test
testtest
test
 
Les01 Htmlen Xhtml2008
Les01 Htmlen Xhtml2008Les01 Htmlen Xhtml2008
Les01 Htmlen Xhtml2008
 
SEO & Drupal CMS
SEO & Drupal CMSSEO & Drupal CMS
SEO & Drupal CMS
 
Powerpoint Htmlcss
Powerpoint HtmlcssPowerpoint Htmlcss
Powerpoint Htmlcss
 
Html css
Html cssHtml css
Html css
 
Ict2 trm- werking internet
Ict2 trm- werking internetIct2 trm- werking internet
Ict2 trm- werking internet
 
Maximale impact met woorden online
Maximale impact met woorden onlineMaximale impact met woorden online
Maximale impact met woorden online
 
How to create a Drupal theme (Dut
How to create a Drupal theme (DutHow to create a Drupal theme (Dut
How to create a Drupal theme (Dut
 
Drupal koba-nov2013
Drupal koba-nov2013Drupal koba-nov2013
Drupal koba-nov2013
 
1.3 html css basis 2
1.3 html css basis 21.3 html css basis 2
1.3 html css basis 2
 
Tutorial html en css
Tutorial html en cssTutorial html en css
Tutorial html en css
 
Presentatie bij de training HTML5 die plaatsvond na afloop van de sessie Mico...
Presentatie bij de training HTML5 die plaatsvond na afloop van de sessie Mico...Presentatie bij de training HTML5 die plaatsvond na afloop van de sessie Mico...
Presentatie bij de training HTML5 die plaatsvond na afloop van de sessie Mico...
 

Html css-les1

  • 1. LES 1 - INLEIDING
  • 2. 3 manieren om een website te bouwen: - Code: XHTML – CSS – PHP – jQuery – JavaScript - Software (wysiwyg): Dreamweaver, Textmate, SublimeText - CMS: Drupal, Joomla, Wordpress, …
  • 3. Algemene feiten - Website bestaat uit webpagina’s met homepage (eerste pagina) - Opslaan als .html of .htm - Webdesign is GEEN tekstverwerking! - Sla nooit op met spaties, hoofdletters of speciale tekens, behalve – en _. Bv wie-zijn-wij.html of wiezijnwij.html of wie_zijn_wij.html
  • 4. HTML: - Tim Berners-Lee (CERN). - W3 Consortium (w3.org) - Tags <html></html> - Element, attribuut, waarde <imgsrc=“zon.jpg” />
  • 5. Versies - HTML 4 - XHTML 1 - HTML 5 (nog niet volledig ondersteund)
  • 6. Kleuren - 3 basiskleuren: Rood Groen Blauw dus niet… rood geel blauw #FF0000 - Red, green, blue, orange, yellow, enz. - Elke kleur heeft waarde tussen 0 en 255 - Hexadecimaal: Grootte - Pixel: vaste waarde - Percent: variabele waarde
  • 7. XHTML - Geen hoofdletters in elementen en attributen - Waarde altijd tussen aanhalingstekens “ “ - Attributen hebben altijd een waarde - Tag altijd afsluiten (<img />, <br />) - Tags nooit kruisen (correct: <b><i>woord</i></b>) - Afbeelding steeds alt-beschrijving geven - Speciale tekens via code - Doctype XHTML strict - XML-namespace
  • 8. Browserprobleem - Internet Explorer (6, 7, 8, 9 en 10) - Firefox - Chrome - Opera - Safari - Statistieken gebruik: gs.statcounter.com - Test via Ietester, browser, browsershots.org, enz
  • 10. Tags - Html, head, body - Title - Strong, em (ipv b, i) - H1, h2, …, p, br - hr - Ul, ol, li - Sub, sup - Blockquote - Cite, kbd, code, pre, tt, samp, var