|
Poniżej przedstawiony jest kod źródłowy przykładowego
dokumentu - należy zwrócić uwagę na sposób wprowadzania do dokumentu linii poziomej.
Wprowadzenie linii poziomej powoduje znacznik HR. Można dla niego stosować również
atrybuty formatujące linię.
Pozioma linia
<HR>
Przykład:
Linia może być pozbawiona cieniowania
<HR NOSHADE>
Linii możemy nadać dowolną grubość
<HR SIZE=5>
Linia może mieć określoną długość w pikselach
<HR WIDTH=300>
lub w procencie szerokości strony
<HR WIDTH=50%>
Linia może być umieszczona na środku (domyślnie)
<HR ALIGN=center>
<HR ALIGN=center SIZE=8 WIDTH=200>
Może być justowana do lewego brzegu strony...
<HR ALIGN=left>
<HR ALIGN=left NOSHADE SIZE=4 WIDTH=300>
... lub do prawego
<HR ALIGN=right>
<HR ALIGN=right SIZE=3 WIDTH=400>
Jeszcze jednym uzupełnieniem jest kolor poziomej linii, potocznie
zwanej separatorem - jest to rozszerzenie Internet Explorera, nie
wchodzące jednak w skład HTML 4. Zaleca się raczej stosowanie
stylów.
Polecenie:
<hr color="nazwa_koloru">
w prosty sposób zmienia barwę separatora. Możemy oczywiście
manipulować szerokością i długością linii.
Poniższy fragment tekstu przedstawia przykład kodu
źródłowego HTML umożliwiającego włączenie linii poziomych do tekstu. Zwróć uwagę na atrybuty
znacznika HR i ich wartości oraz efekt ich zastosowania.
<hr>
linia standardowa - zastosowano znacznik
HR bez atrybutów<p>
<hr size="1" width="70%"align="left">
linia o grubości 1 piksela i długości
równej 70% szerokości okna,
w którym jest
wyświetlana, wyrównana do lewej krawędzi okna,
z efektem 3D<p>
<hr size="2" width="70%"align="right">
linia o grubości 2 pikseli i długości
równej 70% szerokości okna, w którym jest
wyświetlana, wyrównywana do prawej krawędzi okna,
z efektem 3D<p>
<hr size="3" width="70%" align="center">
linia o grubości 3 pikseli i długości równej
70% szerokości okna,
w którym jest
wyświetlana, wycentrowana, z efektem 3D<p>
<hr size="6" width="70" align="center">
linia o grubości 6 pikseli i długości stałej,
równej 70 pikseli, wycentrowana, z efektem 3D
<hr size="6" width="70%"align="center">
linia o grubości 6 pikseli i długości równej
70% szerokości okna,
w którym jest
wyświetlana, wycentrowana, z efektem 3D
<hr size="7" width="100"align="left">
linia o grubości 7 pikseli i długości stałej,
równej 100 pikseli,
wyrównywana do
lewej krawędzi okna, z efektem
3D<p>
<hr size="7" width="100"align="right">
linia o grubości 7 pikseli i długości stałej,
równej 100 pikseli,
wyrównywana do
prawej krawędzi okna, z efektem
3D<p>
<hr size="8" width="100"align="left" noshade>
linia o grubości 8 pikseli i długości
stałej, równej 100 pikseli,
wyrównywana do
lewej krawędzi okna, bez efektu 3D<p>
<hr size="8" width="100"align="right" noshade>
linia o grubości 8 pikseli i długości stałej,
równej 100 pikseli,
wyrównywana do
prawej krawędzi okna, bez efektu 3D<p>
<hr size="9" width="100%"align="left" noshade>
linia o grubości 9 pikseli i długości równej
100% szerokości okna,
w którym jest
wyświetlana, wyrównywana do lewej krawędzi okna,
bez efektu 3D<p>
<hr size="9" width="100%"noshade>
linia o grubości 9 pikseli i długości
równej 100% szerokości okna,
w którym jest
wyświetlana; stosowanie atrybutu align w tym i
poprzednim przypadku nie ma sensu,
ponieważ linia i tak wyświetlana jest na całej
szerokości okna, bez efektu 3D<p>
<hr size="2" width="80%"color="FF7098">
linia o grubości 2 pikseli i długości
równej 80% szerokości okna,
w którym jest
wyświetlana; brak atrybutu align powoduje, że linia
jest centrowana; atrybut color
zmienia jej kolor ze standardowego na podany w notacji
heksadecymalnej.
</body>
</html>
W zamieszczonym powyżej przykładzie tekst jest jednocześnie
objaśnieniem działania poprzedzających go znaczników.
|