Basis HTML-pagina

Een basispagina in HTML met verwijzing naar een CSS-bestand.

 <!DOCTYPE html> 
 <html>
      <head>
            <title>Computerwinkel Heverlee</title>
            <link rel="stylesheet" href="style/style.css"/>
      </head>
      <body>
            <article>
                  <h1>Laptop voor webdesign</h1>
                  <img src="images/water.jpg" class="fotolinks"/>
                  <p>Een laptop, schootcomputer of notebook is een 
                  draagbare computer die in principe op de schoot kan worden gebruikt. 
                  Laptops worden vooral gebruikt door mensen die op verschillende locaties met hun computer werken. In de praktijk worden laptops vaak op een bureau of tafel geplaatst. 
                  Een netbook is een lichtere en vaak goedkopere laptop. Een laptop heeft het merendeel van dezelfde componenten als een vaste computer, met inbegrip van een beeldscherm, een toetsenbord, een aanwijsapparaat zoals een touchpad (ook bekend als een trackpad) en/of een pointing stick en luidsprekers in een enkele eenheid. Een laptop wordt gevoed door elektriciteit via een 
                  wisselstroomadapter en kan uit de buurt van een stopcontact worden gestoken.</p>
            </article>
            <article>
                  <h1>Laptop voor webdesign 2</h1>                
                  <img src="images/water.jpg" class="fotorechts"/>                          
                  <p>Een laptop, schootcomputer of notebook is een draagbare computer die 
                  in principe op de schoot kan worden gebruikt. Laptops worden vooral gebruikt 
                  door mensen die op verschillende locaties met hun computer werken. 
                  In de praktijk worden laptops vaak op een bureau of tafel geplaatst. 
                  Een netbook is een lichtere en vaak goedkopere laptop. Een laptop heeft het 
                  merendeel van dezelfde componenten als een vaste computer, met inbegrip van 
                  een beeldscherm, een toetsenbord, een aanwijsapparaat zoals een touchpad 
                  (ook bekend als een trackpad) en/of een pointing stick en luidsprekers in een enkele eenheid. 
                  Een laptop wordt gevoed door elektriciteit via een wisselstroomadapter en kan uit de buurt van een stopcontact worden gestoken.</p>         
            </article>     
      </body> 
</html>

Het bijhorende CSS-document

Het document "style.css" bevindt zich in de map "style" (een submap van uw website).


body{
    font-family: Helvetica, Arial, sans-serif;
    font-size:1.2em;
}
article{
    border:1px solid #cccccc;
    padding:2%;
    border-radius:6% 12% 5% 0%;
    margin-bottom: 20px;
}
h1{
    color:deepskyblue;
}
img{
    max-width:100%;
}
.fotorechts{
    width:50%;
    float:right;
    margin-left:2%;
}
.fotolinks{
    width:50%;
    float:left;
    margin-right:2%;
}