Tworzenie stron

Ogólne ramy strony zapisane są w pliku gora.php i dol.php.

Konkretny plik musi zawierać wyłącznie treść danej podstrony.

Pliki muszą być zapisane z kodowaniem utf-8.

Jako, że strony mogą być w różnych folderach istnieją 3 wersje plików "ramowych".

Wzorce

Plik z głównego folderu (o adresie http://zsm3jaslo.pl/nazwa_pliku.php)

<?php
include ('../imieniny.php');
include ('gora.php');
?>
Treść podstrony, czyli to co ma być na jasnym tle.
<?php
include ('dol.php');
?>

Plik z podfolderu (o adresie http://zsm3jaslo.pl/folder/nazwa_pliku.php)

<?php
include ('../imieniny.php');
include ('../gora1.php');
?>
Treść podstrony, czyli to co ma być na jasnym tle.
<?php
include ('../dol1.php');
?>

Plik z podfolderu podfolderu (o adresie http://zsm3jaslo.pl/folder/podfolder/nazwa_pliku.php)

<?php
include ('../../imieniny.php');
include ('../../gora2.php');
?>
Treść podstrony, czyli to co ma być na jasnym tle.
<?php
include ('../../dol2.php');
?>

Okienko na treść ma 580px szerokości, a po uzględnieniu marginesów wychodzi, że grafiki mogą mieć maksymalnie width="570"

Poprawny plik po walidacji nie ma żadnych błędów - piszę w HTML5.

Jak widać w pliku CSS zdefiniowane są

Pozioma linia

Nagółwek H1

Nagółwek H2

Nagółwek H3

Nagółwek H4

Nagółwek H5

Nagółwek H6

Dwa poziomy list wypunktowanych

• pierwszy poziom
  • drugi poziom

Lista numerowana

1. pierwsze
   1. drugie - class="list-style-type: lower-alpha"

Określono rozmiar dla indeksu ^górnego 12¹⁵i _dolnegoH₂SO₄

Paragraf. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

klasa "wiersz"

lista definicyjna

termin

definicja

lista definicyjna ustawiona z lewej strony

termin

definicja

tabela

tabela na numerki - wszystko centralnie i kolumny szerokości 20%

table class="foto"

do miniaturek zdjęć bez ramek

div id="LINKI" do używania w "treści strony"

<div id="LINKI">
<ul>
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
</ul>
</div>

div id="LINK" do używania w "treści strony"gdy linki mają być jeden pod drugim

<div id="LINK">
<ul>
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
</ul>
</div>

klasa "ao"

do podawania np. adresu organizatora
na stronach konkursów
lub obramowywania innych.

klasa "l" do ustawiania z lewej

klasa "c" do ustawiania pośrodku

klasa "p" do ustawiania z prawej

i klasa "red"

klasa "v" do ustawiania zawartości komórki tabeli na górze

Wszystkie obrazki mają ustawione marginesy na 0 i border na "none". Ale na wszelki wypadek jest zdefiniowana klasa "m5" - margines 5px

Obrazki mogą być opływane z lewej - klasa klasa "lewo" i z prawej - klasa "prawo"

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.