Szablon strony internetowej
edytor html css ...
teoria, ćwiczenia HTML
struktura dokumentu html
1. <!doctype html> 2. <html> 3. <head> 4. <meta charset="UTF-8" /> 5. <title>Tytuł strony...</title> 6. </head> 7. <body> 8. </body> 9. </html>
Znacznik div
<div></div> nie niesie żadnego znaczenia semantycznego, niemniej jest niezbęny w konstuowaniu strony. Znacznik div jest pojemnikiem (kontenerem, pudełkiem) dla innych znaczników. Dzięki niemu można w dokumencie tworzyć warstwy. Styl CSS zdefiniowany dla danego znacznika div może obowiązywać również znaczniki nim objęte. Na marginesie mówiąc, przed wersją 5 HTML w specyfikacji języka był tylko div, w obecnej wersji jest uzupełniony znacznikami semantycznymi takimi jak section, article, aside, header, footer, nav oraz main.
Grupowanie znaczników za pomocą div
Stosujemy go podczas konstruowania szkieletu/szablonu strony. Można powiedzieć, że znacznik <div>...</div> może grupować wszystko, w odróżnieniu od <figure>...</figure>, który jest przeznaczony do grupowania elementów tworzących logiczną całość. W szczególności div, może obejmować inny div, który z kolei obejmuje następny div, itd. Podstawową zasadą stosowania znacznika div, jest sprawdzenie czy aby objęty nim obszar nie ma znaczenia semantycznego. Jeżeli tak jest, to należy zastowować jeden ze znaczników: section, article, header, footer lub aside. Warto wiedzieć, że w poprzednich wersjach HTML, div był jedynym znacznikiem - pełniącym funkcje wszystkich wymienionych znaczników. Kod pokazany poniżej pokazuje przykład zastosowania znacznika div:
<body>
<article>
<h1>Zwierzęta hodowane w Polsce</h1>
<p>
W Polsce hoduje sie między innymi krowy, świnie, konie, kury, kaczki i gęsi.
</p>
<div style="background-color:#d1dcf3;">
<section>
<h3>Krowy</h3>
<p>
Krowa jest fajnym zwierzaczkiem, bo daje mleko.
</p>
</section>
<section>
<h3>Świnki</h3>
<p>
Zwane są oficjalnie trzodą chlewną.
</p>
</section>
</div>
<div style="background-color:#d5e7d5;">
<section>
<h3>Kury</h3>
<p>
Wcześniej mówiliśmy o ssakach, natomiast kury są ptakami.
</p>
</section>
</div>
</article>
</body>
Podstawowe style
width – definiujący szerokość elementu height – definiujący wysokość elementu margin -definiujący wielkość marginesu dla elementu padding –definiujący odległość zawartości elementu od obramowania border –definiujący właściwości obramowania elementu float - definiujący kierunek oblewania elementu przez tekst lub inne elementyPrzykłady zastosowań styli w tagu DIV /zalecane jest w pliku css, tutaj tylko na potrzeby wstępnej lekcji/
<div style="width:100px; height:100px; background-color:red;"> czerwony kwadrat </div>
DIV w DIVie:
<div style="width:600px; height:800px;"> <div style="width:200px; height:200px; background-color:red;"> div 1 </div> <div style="width:300px; height:200px; background-color:blue;"> div 2 </div> <div style="width:100px; height:200px; background-color:green;"> div 3 </div> </div>
szablon z zastosowaniem DIV
Układ liniowy poziomo
Układ złożony 1
Układ złożony 2
Test wiedzy
|
Zadanie 1. Znacznik <s> spowoduje A. przekreślenie tekstu. B. pochylenie tekstu. C. uzyskanie indeksu górnego. D. r ozpo częcie akapitu. Zadanie 2. Znaczrikjem pozwalającym na utworzenie bloku tekstu jest A. <b>. B, <a>. C. <p>. D.<i>. Zadanie 3. |aki aĘbut musi być lżyĘ, aby poprawnie stworzyć odsyłacz w dokumencie HTMLi A. class. B. href C. align. D. color. Zadanie 4. Do zdeprecjonowanych elementów języka HTML 4.01 nie zaliczamy znacznika A. <center>. B. <s>. c. <b>. D. <u>. Zadanie 5. Do grupowania elementów liniowych, takich jak tekst lub grafiki, można wykorzystać znacznk A. <hr>. B. <span>. C. <title>. D. <pre>.