HTML en CSS Workshop by bzs12927

VIEWS: 5 PAGES: 11

									• Wat gaan we doen?
  –HTML 4.01
  –CSS 2.0 – Deze presentatie




            Newanz.com and Scripterplace.com   2
• CSS
  –Wordt gebruikt voor de opmaak van
   de layout.
  –Beste is om alle opmaak in CSS te
   zetten.



            Newanz.com and Scripterplace.com   3
• Objecten, voorbeelden
     html         Div                            A
     body         Span                           Hr
     Table        Img                            H1
     tr           Ul                             H2
     td           Li                             Etc..




              Newanz.com and Scripterplace.com           4
• Benamingen
 div.text1 ← Object.Benaming
 {                    ← Opening
   font-size: 12px;   ← Statement
    font-size:        ← Eigenschap
    12px;        ← Waarde
 }                    ← Sluiting


               Newanz.com and Scripterplace.com   5
• Selecties
  – Selectie naam:
    • div.text
        – Voor alleen de tag <div>
    • .text
        – Voor alle tags
    • #text
        – Eenmalig gebruik in ID’s
            » Javascript


                    Newanz.com and Scripterplace.com   6
• Selecties
  – Eigenschap
    • Om de text, table cel, etc.. Een style te geven.
       – Voor text:
           » Font-size
           » Color                        HEX waarde of naam
           » Family              Lettertype
           » Weight                       Bold
           » Style                        Italic



                   Newanz.com and Scripterplace.com            7
• Selecties
  – Waardes
    • Om de eigenschap een waarde te geven.
       – In pixels                             px
       – Procenten                %
       – Andere




                     Newanz.com and Scripterplace.com   8
• Selecties
  – Aantal CSS eigenschappen
     •   Height:            Hoogte
     •   Width:             Breedte
     •   Margin:            Afstand tussen een ander object
     •   Padding:           Afstand binnen het object
     •   Background: Achtergrond
          – Color:                  Kleur
          – Image                   Plaatje
          – Repeat                  Herhaling van plaatje
     • Border                       Rand en stijl om object

                      Newanz.com and Scripterplace.com        9
• Implementeren
  – In <head>
     • <style type='text/css'>
         – Style sheet
     • </style>
  – Of extern in bestand, code in <head>
     • <link rel="stylesheet" href="style.css" type="text/css">
  – Uiteindelijk in object:
     • In tag:
         – Class
         – Id
         – Style


                         Newanz.com and Scripterplace.com         10
                  Zie
http://workshop.newanz.com/




       Newanz.com and Scripterplace.com   11

								
To top