Podstawowy układ strony HTML składa się z czterech obszarów:
Podstawowe elementy dzielimy na elementy blokowe i elementy wierszowe.
Elementy blokowe to m.in.: div, p, h1, h2, …, h6, body, ul, ol, li.
W elementach blokowych każdy blok rozpoczyna się od nowej linii.
Natomiast elementy wierszowe występują w elementach blokowych jako elementy
wplecione w kontekst wiersza. Są to elementy typu: q, em, i, b, a, img.
Podstawowym rozkładem strony jest tzw. rozkład Luke. Każdy element blokowy jest pobierany
w kolejności w jakiej jest zapisany w kodzie i zajmuje całą szerokość okna przeglądarki, każdy nowy element blokowy
zajmuje nowy wiersz.
Natomiast elementy wewnątrzwierszowe rozmieszczane są w poziomie zaczynając od lewego górnego wierzchołka obszaru
elementu jeden obok drugiego, gdy zabraknie miejsca w wierszu pozostałe elementy wewnątrzwierszowe automatycznie
są przenoszone do nowego wiersza.
W elementach blokowych marginesy w poziomie dodają się, natomiast w pionie występuje większy z nich.
Pozycjonowanie elementów strony:
Podstawowa składnia deklaracji stylu: wstaw element np. div, p lub h1, następnie użyj pary nawiasów klamrowych otwierającego i zamykającego. Pomiędzy tymi nawiasami deklarujemy style np. width, margin, padding.
Zasady i przykłady pozycjonowania
| Rodzaj | Opis |
|---|---|
| float | należy określić minimum dwie właściwości: width i float. Przykład: width: 230px; float: right;. Przykładem jest zastosowane na tej stronie menu tzw. pasek boczny. Jest umiejscowiony po prawej stronie przeglądarki. W pionie przesuwa się razem z kontekstem strony. Należy pamiętać, aby następny element wsytępujący po elemencie float posiadał właściwość clear. Gdy float:right to clear: right, gdy float:left to clear:left oraz gdy float:both to clear:both. |
| absolute | pozycjonowanie bezwględne, położenie względem najbliższego elementu nadrzędnego, oddzielony od układu strony. To pozocjonowanie zależne jest od krawędzi okna przeglądarki, ale niezależne od kontekstu strony. Jeśli przesuwamy krawędzie w pionie lub w poziomie to pozycjonowanie występuje w zależności od której krawędzi są ustalone odległości. |
| fixed | należy określić minimum trzy właściwości: width, top, position. Przykład: width:180px; top:200px; position: fixed;. Właściwość width to szerokość elementu, top oznacza odległość od górnej krawędzi, position jest stałe dla tego pozycjonowania i zawsze określamy jako fixed. Na tej stronie jako przykład jest zbudowane menu po prawej stronie przeglądarki. Element jest zakotwiczony na stałe względem przeglądarki, nie ma wpływu przesuwanie strony w pionie czy też w poziomie. W tym przykładzie będzie zawsze utrzymywało się przy prawej krawędzi przeglądarki i na z góry ustalonej stałej wysokości. |
| relative | pozycjonowanie z zasadami tak jak absolute, tylko, że tutaj element pozostaje w układzie strony. Poniżej są przykłady elementów w kształcie kół o ściśle określonym pozycjonowaniu względem elementu nadrzędnego, w którym się znajdują. |
Pozycjonowanie relatywne w elemencie "p" względem nadrzędnego też elementu "p"
Pozycjonowanie relatywne w elemencie "p" względem nadrzędnego też elementu "p"
Pozycjonowanie relatywne w elemencie "p" względem nadrzędnego też elementu "p"
Zaokrąglanie narożników elementu DIV.
Do zaokrąglania narożników elementów służy polecenie CSS3 border-radius.
Dla przykładu posłużymy sie elementem DIV. Chcemy, aby wszystkie narożniki były
zaokrąglone o wartość 5%. W arkuszu stylu dla tego elementu należy wpisać
border-radius: 5%. Jeśli element będzie miał rozmiary w kształcie kwadratu wówczas
ustawienie wartości 50% spowoduje, że otrzymamy kształt koła.
Przykłady zastosowania elementu border-radius.
|
font-size:10px;
width: 150px; height: 150px; padding: 30px 30px; margin: 6px; background-color: brown; color: azure; border-radius: 0%; |
font-size:10px;
width: 150px; height: 150px; padding: 30px 30px; margin: 6px; background-color: brown; color: azure; border-radius: 5%; |
font-size:10px;
width: 150px; height: 150px; padding: 30px 30px; margin: 6px; background-color: brown; color: azure; border-radius: 25%; |
font-size:10px;
width: 150px; height: 150px; padding: 30px 30px; margin: 6px; background-color: brown; color: azure; border-radius: 50%; |
font-size:10px;
width: 150px; height: 150px; padding: 30px 30px; margin: 6px; background-color: brown; color: azure; border-radius: 5% 0%; |
font-size:10px;
width: 150px; height: 150px; padding: 30px 30px; margin: 6px; background-color: brown; color: azure; border-radius: 5% 20%; |
font-size:10px;
width: 150px; height: 150px; padding: 30px 30px; margin: 6px; background-color: brown; color: azure; border-radius: 0% 50%; |
font-size:10px;
width: 150px; height: 150px; padding: 30px 30px; margin: 6px; background-color: brown; color: azure; border-radius: 0% 50% 50% 10%; |
Jednym z podstawowych zdarzeń stosowanych na stronach HTML jest zdarzenie onload (przy załadowaniu strony)
lub onclick (przy kliknięciu). W przykładzie wystąpi wyświetlenie komunikatu po załadowaniu strony:
<body onload="alert('Witaj');">
Przy załadowaniu strony przypisana jest funkcja 'alert', która wyświetla wpisany do tej funkcji tekst.
Kod JavaSrcipt może być umieszczony na trzy sposoby: w nagłówku strony, bezpośrednio w elementach kodu HTML,
w osobnym pliku z rozszerzeniem js.
Poniżej zastosowane jest zdarzenie onmouseover do zmiany tekstu po najechaniu na obecny tekst myszką.
Odkryj tekst ukryty po najechaniu na ten tekst myszką.
Skrypty na stronie WWW są to niewielkie fragmenty kodu komputerowego. Skrypty wykonywane na serwerze
nazywany skryptami strony serwera, natomiast skrypty wykonywane u użytkownika nazywamy skryptami strony klienta.
Po stronie klienta skrypty mogą być napisane w językach: JavaScript, Java, także można wykorzystać VBScript,
komponenty ActiveX.
Po stronie serwera skrypty mogą być napisane w językach: PHP, Java Server Pages (JSP), Perl,
Active Server Pages (ASP), ColdFusion, Python.