|
Kurs HTML 4.01, XHTML 1.0 i CSS 2 z przykładami
autor: Dariusz Majgier
ostatnia aktualizacja kursu: 2003.06.01
|
[Start]
[Elementy HTML]
[Atrybuty HTML]
[Style CSS]
[Porady online]
[A]
[B]
[C]
[D]
[E]
[F]
[H]
[I]
[K]
[L]
[M]
[N]
[O]
[P]
[Q]
[R]
[S]
[T]
[U]
[V]
[W]
[Z]
[kolory]
[tekst]
[czcionki]
[rozmiary]
[pozycje]
[tabele]
[listy]
[formularze]
[struktura]
[linki]
[multimedia]
[bloki]
[obramowania]
[tła]
[synteza]
[druk]
align
Atrybut definiuje wyrównanie względem innych elementów w poziomie lub w pionie. Różne elementy HTML korzystają z różnych wartości atrybutu, więc warto zwracać uwagę na miejsce jego użycia. W tekscie najczęściej wykorzystywane są wartości "right", "justify" i "center" ("left" jest domyślną wartością). Elementy graficzne i formularze wykorzystują wartości "top", "middle" i "bottom".
nie zalecany, zastąp stylami:
text-align, vertical-align
Wartości atrybutu:
- left - (wartość domyślna w poziomie)
- wyrównanie do lewej strony
- center
- wycentrowanie w poziomie
- right
- wyrównanie do prawej strony
- justify
- wyrównanie do prawej i do lewej strony
- top
- wyrównanie w pionie do górnej części
- bottom - (wartość domyślna w pionie)
- wyrównanie w pionie do dolnej części
- middle
- wyrównanie w pionie do centralnej części
- char
- wyrównanie względem określonego znaku w tabelach, np. względem przecinka w liczbach dziesiętnych - nie wszystkie przeglądarki obsługują tą wartość
Atrybut używany w elementach:
[top|bottom|left|right] -
CAPTION,
LEGEND,
FIELDSET
[bottom|middle|top|left|right] -
APPLET,
IFRAME,
IMG,
INPUT,
OBJECT
[left|center|right] -
TABLE,
HR
[left|center|right|justify] -
DIV,
H1,
H2,
H3,
H4,
H5,
H6,
P
[left|center|right|justify|char] -
COL,
COLGROUP,
TBODY,
TD,
TFOOT,
TH,
THEAD,
TR
Przykładowe zastosowania:
Przykład 1:
<h3 align="right">przykładowy tytuł z prawej strony</h3>
przykładowy tytuł z prawej strony
Przykład 2:
<p align="center">przykładowy tekst na środku strony</p>
przykładowy tekst na środku strony
Przykład 3:
<table align="center" width="70%">
<caption "align=bottom">podpis pod tabelą</caption>
<tr><td><p align="justify">
<img src="../p/kamyki.jpg" align="right" width="100" height="75">
Teraz musimy użyć znacznie więcej treści aby pokazać, jak będzie
wyglądało formatowanie do lewej i do prawej strony. Na wszelki
wypadek warto jeszcze raz powtórzyć poprzednie zdanie. Teraz
musimy użyć znacznie więcej treści aby pokazać, jak będzie
wyglądało formatowanie do lewej i do prawej strony. Jak widać
obie strony tekstu są idealnie równe. O to chodziło!
</p></td></tr></table>
podpis pod tabelą
Teraz musimy użyć znacznie więcej treści aby pokazać, jak będzie
wyglądało formatowanie do lewej i do prawej strony. Na wszelki
wypadek warto jeszcze raz powtórzyć poprzednie zdanie. Teraz
musimy użyć znacznie więcej treści aby pokazać, jak będzie
wyglądało formatowanie do lewej i do prawej strony. Jak widać
obie strony tekstu są idealnie równe. O to chodziło!
|
Przykład 4:
Zdanie, w którym wstawiono ogromny <img src="../p/komp.gif" align="top"
width="70" height="68" alt="komputer"> komputer, ale tylko po to,
aby pokazać co stanie się z obrazkiem przy różnych wartościach
parametru align w większej ilości tekstu. Przykład praktyczny
zastępuje dziesiątki słów.
Zdanie, w którym wstawiono ogromny komputer, ale tylko po to, aby pokazać co stanie się z obrazkiem przy różnych wartościach parametru align w większej ilości tekstu. Przykład praktyczny zastępuje dziesiątki słów.
Przykład 5:
Zdanie, w którym wstawiono ogromny <img src="../p/komp.gif"
align="middle" width="70" height="68" alt="komputer"> komputer,
ale tylko po to, aby pokazać co stanie się z obrazkiem przy różnych
wartościach parametru align w większej ilości tekstu. Przykład
praktyczny zastępuje dziesiątki słów.
Zdanie, w którym wstawiono ogromny komputer, ale tylko po to, aby pokazać co stanie się z obrazkiem przy różnych wartościach parametru align w większej ilości tekstu. Przykład praktyczny zastępuje dziesiątki słów.
Przykład 6:
Zdanie, w którym wstawiono ogromny <img src="../p/komp.gif"
align="bottom" width="70" height="68" alt="komputer"> komputer,
ale tylko po to, aby pokazać co stanie się z obrazkiem przy
różnych wartościach parametru align w większej ilości tekstu.
Przykład praktyczny zastępuje dziesiątki słów.
Zdanie, w którym wstawiono ogromny komputer, ale tylko po to, aby pokazać co stanie się z obrazkiem przy różnych wartościach parametru align w większej ilości tekstu. Przykład praktyczny zastępuje dziesiątki słów.
Zobacz porady, skrypty, artykuły i gotowe rozwiązania dla właścicieli stron WWW!
|