Tworzenie witryn : HTML+CSS czyli struktura strony

CSS jest to język opisujący wygląd strony czyli kolor, margines, rozmieszczenie elementów na stronie.
HTML natomiast tylko opisuje co zawiera, czyli treść.

Oczywiście można w znacznikach html opisywać wygląd elementów, jednakże przy wielu stronach byłoby to uciążliwe np ustalanie tła. Dlatego stosuje się pliki css, z którego html pobiera źródło wyglądu stron.

Struktura pliku css

selector
{
property: value;
property:value;
}

gdzie:

selector - wybrany element strony, którego cechy zapisujemy pomiędzy klamrami. Selektorem mogą być znaczniki np.: a, h1, body. Selektorami mogą być identyfikatory zdefiniowanych obszarów div np.: #footer, #logo itd. Selektorami mogą być grupa obiektów tzw. klasy;

property - właściwości selectora jak np.: color, font-size, text-align, width, min-height, background-color, float,clear;

value - wartość tj.: blue,12px,center,620px,gray,left,both

Selektory można opisywać:
1. W pliku html w sekcji <head> opisując znacznikami np.:

<style>
#footer
{
clear:both;
background-color:black;
color:white
}
</style>

2. W pliku html jako definicja in-line np.:

<h1 style="text-align:center;">Dowolny tekst</h1>
<img src="img/aro.png" style="float:left;margin:6px/>

3. Poprzez dołączenie w sekcji <head> linku do pliku zewnętrznego css np.:

<link rel="stylesheet" href="css/style.css" type="text/css">

Przykład

Założenie:
Witryna składa się z 6 głównych obszarów. 5 z nich jest widocznych poniżej: 1.logo, 2.nav, 3.content, 4.ad, 5.footer oraz niewidoczny obszar (6.contenair) który zawiera wszystkie. Obszary w html oznaczamy jako <div>.

Budowę struktury rozpoczynamy od definicji wszystkich 6 obszarów w sekcji <body> oraz wprowadzeniu tekstu, linków, obrazków:
-------------------------------------------
<body>
<div id="contenair">

<div id="nav">
<h1 style="text-align:center;">2.nav</h1>
<a href="zadanie4.html" title="Powrót do strony głównej">Aktualności</a><br/>
<a href="http://www.onet.pl" title="Przejdź do Onet" target="_blank">Serwis Onet</a><br/>
<a href="http://wp.pl" title="Przejdź do WP" target="_blank">Serwis WP</a>
</div>

<div id="content">
<h1 style="text-align:center;">3.content</h1><br/>
<img src="img/aro.png" style="float:right;margin:6px;"/>
Pies domowy – ................. tekst, tekst itd
</div>

<div id="ad">
<h1 style="text-align:center;">4.ad</h1></br>
Miejsce na reklamę...
</div>

<div id="footer">
<h1 style="text-align:center;float:right;">5.footer</h1>
<h4>Strona edukacyjna html+css, &copy Mario 2014</h4>
</div>

</div>
</body>
-------------------------------

Następnie w sekcji <head> podłączamy plik ze stylami style.css, czyli wybierzemy metodę 3:
---------------------

<head>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>

----------------------

Następnie w katalogu css dokonujemy modyfikacji pliku style.css:

------------------

#contenair
{
width:1000px;
margin-right:auto;
margin-left:auto;
}

#logo
{
background-color:black;
text-align:center;
padding:20px;
color:white;
}

#nav
{
float:left;
width:140px;
padding:10px;
min-height:420px;
background-color:gray;
}

#content
{
float:left;
width:640px;
padding:10px;
min-height:420px;
background-color:yellow;
}

#ad
{
float:left;
width:160px;
padding:10px;
min-height:420px;
background-color:gray;
}

#footer
{
clear:both;
background-color:black;
padding:20px;
text-align:center;
color:white;
}

a:link
{
color:yellow;
}
a:visited
{
color:yellow;
}
a:hover
{
color:red;
}

-----------------------

#contentair - jest to główny obszar, w którym zawarte są wszystkie inne. Posiada właściwości szerokość 1000px, margines lewy i prawy ustalany będzie przez przeglądarkę.

#logo- obszar (div id="logo"), którego tło jest czarne, tekst jest wyśrodkowany, odstęp tekstu od krawędzi 20px, kolor tekstu biały. Szerokości obszaru #logo nie musimy ustalać ponieważ szerokość jest dziedziczona od #contentair.

dla selektorów #nav, #content, #ad powtarzamy zapis float:left, który pozwala na łączenie obszarów po ich lewych stronach. W przypadku stopki #footer - clear:both

#nav- obszar menu bocznego, szerokość obszaru 140px, minimalna wysokość 620px, tło szare

#content- tło żółte, pozostałe jw

#ad- jw

#footer- jw

Warto zwrócić uwagę na właściwości znacznika a dla linku (a:link), dla linku odwiedzonego (a:visited) dla tych znaczników ustalamy kolor żółty natomiast dla linku, na którego najeżdżamy myszką (a:hover) kolor czerwony.