: Home / HTML / CSS / kurs HTML / Warstwy (pojemniki)

Warning: file_get_contents(http://graph.facebook.com/http://youthcoders.net/html-css/kurs-html/19-warstwy-div-pojemniki.html): failed to open stream: HTTP request failed! HTTP/1.0 403 Forbidden in /var/www/old-yc/plugins/content/addthis.php on line 38
Warstwy (pojemniki)
Ocena użytkowników: / 1
SłabyŚwietny 
Wpisany przez Patryk yarpo Jar   
piątek, 18 września 2009 02:40

Może najpierw czym jest warstwa? Mylnie możesz sądzić, że to jakaś folia. Choć przy odpowiednim użyciu stylów CSS można warstw używać jak "folii", to jednak ja proponuję abyś uważał warstwę [znacznik div] za "pojemnik" .
Przez pojemnik rozumiem prostokąt o jakichś rozmiarach, w którym możesz umieścić co tylko chcesz. Co więcej taki pojemnik sam z siebie ma niewiele cech.
W pojemniku możesz trzymać jakbłka, truskawki, proszek do prania albo częsci rowerowe. Chodzi o to, że dzięki pojemnikowi są one zebrane razem. Nie zyskują nagle jakichkolwiek właściwości "dziedziczonych" z pojemnika.

Pamiętaj - prostokąt.

Przeróbmy zatem naszą stronę `index.htm', w taki sposób, aby pewne jej fragmenty powrzucać do pojemników.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>


<head>

    <title>Moja pierwsza strona!</title>

    <meta http-equiv="content-type" content="text/html;charset=utf-8">

</head>


<body>

    <div id="wrapper">

        <div id="top">

            <h1>To jest moja pierwsza strona!</h1>

        </div>

        <div id="menu">

            <ul>

                <li><a href="/index.htm" title="Przejdź do strony głównej">home</a></li>

                <li><a href="/kontakt.htm" title="Skontaktuj się ze mną">kontakt</a></li>

            </ul>

        </div>

        <div id="content">

            <p>Tu umieść jakiś krótki wstęp.</p>

            <p>Jeśli chciałbyś się ze mną skontaktować, to zajrzyj na stronę <a href="/kontakt.htm">kontaktu</a>.</p>

        </div>

    </div>

</body>

</html>


Jak widzisz mamy 4 pojemniki (warstwy):
wrapper
top
menu
content

Nazwy same mówią o tym, do czego mają służyć. Tak naprawdę, jeśli nie wykorzystuje się stylów CSS to warstwy bardzo niewiele dają.
Spokojnie - i do CSS dojdziemy w tym kursie (jako, że to kurs HTML, potraktujemy CSS bardzo pobieżnie, ale zawsze czegoś się nauczysz).
Zauważ, że tak naprawdę to niczego nie zmieniło na razie w sposobie prezentacji danych na stronie. Warstwy (znaczników div) używa się po to, aby pogrupować treść na stronie. Same z siebie niewiele formatują. Do tego służy CSS.
Teraz zapewne jesteś totalnie skołowany :P Spokojnie - w dalszej części się wszystko wyjaśni.

Zadanie dla ciebie:
Wprowadź podobną strukturę na stronie `kontakt.htm'
 

Tags:

Zobacz podobne artykuły

< Poprzednia   Następna >
 

Dodaj komentarz


Kod antysapmowy
Odśwież