CSS in HTML en Eruit

CSS in HTML

Je kent het tegenwoordig wel, CSS, de macht onder de opmaak. Hoewel CSS goed wordt gemaakt, met veel problemen (Dank U Microsoft), doen mensen toch nog iets fout. Nou zou je denken wat doen mensen fout nou kijk maar:

Index.html

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<head>
    <title>Welcome</title>
</head>
<body>
<div>
    <div>
        <img src="header.jpg" width="700" height="300" alt="XXX">
    </div>
    <div style="width: 700px; height: 1000px">
        <h1><span style="font-size: 16pt; font-family: Serif">Welcome</span></h1>
        <span style="font-size: 10pt">
        <span style="font-family:Arial">
        <span style="color: #ffffff">
        <span style="background-color: #000000">
            Some text
        </span>
        </span>
        </span>
        </span>
    </div>
</div>
</body>
</html>

Als ik dit zie dan ga ik zowat over mijn nek, figuurlijk gesproken. Dit soort HTML zie je vaak bij dreamweaver gemaakte websites. Ik kan nu al zeggen, als de website telkens weer dit hele HTML en CSS zooitje moet herladen dan kan dat bij grote websites veel tijd kosten. Natuurlijk niet te vergeten bandbreedte. Laten we snel verder gaan en kijken naar de oplossing, die eigenlijk super simpel is.

CSS uit HTML

De oplossing is heel simpel, er is altijd gezegd door CSS goeroe’s houdt opmaak en HTML apart, door gebruik te maken van id's en classes. Dus laten we dat doen.

Index.html
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
    <title>Welcome</title>
    <link rel="stylesheet" type="text/css" href="Style.css" />
</head>
<body>
<div>
    <div id=top></div>
    <div id="content">
        <h1>Welcome</h1>
        Some text
    </div>
</div>
</body>
</html>


Style.css
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#top {
    Background: #fff url(header.jpg) no-repeat center;
    Width:700px;
    Height:300px;
}

#content {
    Width:700px
    Height:1000px;
    Font-size:10pt;
    Font-family:Arial;
    Background-color:#000; //000 is short tag voor 000000
    Color:#fff;
}

H1 {
    Font-size:16pt;
    Font-family: Serif;
}

Ik heb hier alleen id's gebruikt, omdat er maar één content is en niet twee etc. Als je meer van hetzelfde wilt gebruiken dan heb je classes nodig. Denk eraan om id's op te roepen in css gebruik de #(hekje) en voor classes de .(punt).

Dankzij dit zal de snelheid toenemen en bandbreedte afnemen, waarom, omdat een extern CSS bestand wordt opgeslagen in een cache en zolang niks veranderd er altijd is. Dit zorgt ervoor dat bij een tweede bezoek de opmaak klaar is en alleen de HTML hoeft worden opgehaald. Dan er nog een toefje bij het is overzichterlijker. Dit was natuurlijk simpel laten we nu verder gaan naar AJAX.

« Lees de omschrijving en reacties

Inhoudsopgave

  1. Inleiding
  2. CSS in HTML en Eruit
  3. Javascript in HTML
  4. Hoe los je dit op
  5. Conclusie

PHP tutorial opties

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.