Autor artykułu: SANTANA
Kilkakrotnie spotkałam się z pytaniami o przekreślone w Pajączku znaczniki i atrybuty. Ten artykuł jest o zastępowaniu zaniechanych w specyfikacji HTML 4 znaczników i atrybutów stylami.
W najnowszej specyfikacji HTML kilkanaście znaczników i wiele atrybutów znaczników zostało oznaczone statusem „deprecated”. W tłumaczeniu można to napisać „przestarzałe”. Organizacja nadzorująca specyfikacje (W3C.org) sugeruje w ten sposób, że w przyszłych specyfikacjach elementy oznaczone jako „przestarzałe” mogą przestać być obecne. Należy zatem takich znaczników i atrybutów używać ostrożnie. Alternatywą dla przestarzałych elementów są najczęściej style, które pozwalają bardziej swobodnie operować wyglądem elementów strony. Pajączek 2000 wspiera HTML w najnowszej specyfikacji i przekreślając niektóre znaczniki atrybuty ostrzega użytkownika o niewskazanym użyciu takich elementów.
Przejdźmy teraz do konkretów. Na początek znacznik BODY – nie, nie jest przestarzały, ale do zaniechanych w specyfikacji HTML 4 należą niektóre jego atrybuty. Zobaczymy teraz, jak zastąpić je stylami.
BACKGROUND – powtarzalne tło strony:
<BODY STYLE="background-image: url(jakis_obrazek.gif)"> treść dokumentu </BODY>
BGCOLOR – kolor tła dokumentu:
<BODY STYLE="backround-color: #005780"> treść dokumentu </BODY>
TEXT – kolor tekstu dokumentu:
<BODY STYLE="color: #000000"> treść dokumentu </BODY>
Atrybuty LINK, ALINK i VLINK – kolor odnośników, odnośników aktywnych i odnośników odwiedzonych zastępujemy pseudoklasami: A:LINK, A:ACTIVE, A:VISITED.
Zobaczmy teraz, jak będzie wyglądał arkusz stylów zagnieżdżony w dokumencie HTML, złożony z wymienionych elementów:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
BODY {
background-image : url(jakis_obrazek.gif);
background-color : #005780;
color : #000000;
}
A:LINK {
color : #000000;
}
A:ACTIVE {
color : #CC0033;
}
A:VISITED {
color : #FFFFFF;
}
</STYLE>
</HEAD>
<BODY>
treść dokumentu
</BODY>
</HTML>Przejdźmy teraz do znacznika FONT zaniechanego w specyfikacji HTML 4 wraz z atrybutami COLOR, FACE i SIZE. Ustanawiał on czcionkę dla tekstu – kolor, rodzaj czcionki i jej rozmiar. Użyję w tym przykładzie znacznika DIV:
<DIV STYLE="color: #000080; font-family: Verdana; font-size: 8pt"> jakiś tekst </DIV>
Zagnieżdżony arkusz stylów:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
DIV {
color : #000080;
font-family : Verdana;
font-size : 8pt;
}
</STYLE>
</HEAD>
<BODY>
<DIV> jakiś tekst </DIV>
</BODY>
</HTML>Lub przy użyciu klasy:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.text {
color : #000080;
font-family : Verdana;
font-size : 8pt;
}
</STYLE>
</HEAD>
<BODY>
<DIV CLASS="text"> jakiś tekst </DIV>
</BODY>
</HTML>Pokażę jeszcze jak zastąpić znacznik CENTER, który służył do wyśrodkowania elementów na stronie:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.centered {
text-align: center;
}
</STYLE>
</HEAD>
<BODY>
<DIV CLASS="centered"> jakiś element wyśrodkowany </DIV>
</BODY>
</HTML>Myślę, że na początek wystarczy – wiemy już, jak „omijać” przestarzałe znaczniki i atrybuty i zastępować je stylami w przypadku określania wyglądu naszej strony – tła, koloru odnośników i formatowania tekstu. Takich znaczników jest oczywiście więcej.
Zainteresowanym polecam korzystanie z pomocy Pajączka, gdzie znajdziecie opis każdego znacznika i atrybutu wraz ze wskazaniem sposobu zastąpienia zaniechanych stylami oraz książek o CSS wydawanych przez wydawnictwo „Helion”.
pozdrawiam,
Santana
Administratorem Twoich danych osobowych będzie Rafał Płatek, prowadzący działalność gospodarczą pod firmą CREAM.SOFTWARE RAFAŁ PŁATEK, wpisaną do rejestru ewidencji gospodarczej CEiDG pod numerem NIP 681-112-89-55. Szczegóły związane z przetwarzaniem danych osobowych znajdziesz w polityce prywatności.