Spis poleceń HTML#
Atrybuty globalne#
W języku xHTML istnieją pewne atrybuty, które mogą być stosowane z większością znaczników. Nazwałem je atrybutami globalnymi i przeniosłem do osobnego wykazu. Dzięki temu opisy poszczególnych elementów nie będą niepotrzebnie rozwleczone.
| Atrybut | Zastosowanie | Opis |
|---|---|---|
| Podstawowe | ||
| class | Wszystkie prócz <!DOCTYPE>, <!-- -->, <base>, <basefont>, <head>, <html>, <meta>, <param>, <script>, <style>, <title> | Lista klas rozdzielonych odstępami |
| id | Wszystkie prócz <!DOCTYPE>, <!-- -->, <base>, <head>, <html>, <meta>, <script>, <style>, <title> | Identyfikator unikalny w dokumencie |
| style | Wszystkie prócz <!DOCTYPE>, <!-- -->, <base>, <basefont>, <head>, <html>, <meta>, <param>, <script>, <style>, <title> | Informacja stylów |
| title | Wszystkie prócz <!DOCTYPE>, <!-- -->, <base>, <basefont>, <head>, <html>, <meta>, <param>, <script>, <title> | Tytuł pomocniczy |
| Językowe | ||
| dir | Wszystkie prócz <!DOCTYPE>, <!-- -->, <applet>, <base>, <basefont>, <bdo>, <br>, <frame>, <frameset>, <iframe>, <param>, <script> | Kierunek tekstu |
| lang | Wszystkie prócz <!DOCTYPE>, <!-- -->, <applet>, <base>, <basefont>, <br>, <frame>, <frameset>, <iframe>, <param>, <script> | Kod języka |
class#
Atrybut class pozwala przypisać do elementu klasę (lub listę klas rozdzielonych spacjami), która będzie mogła zostać wykorzystana przez kaskadowe arkusze stylów. Przypisanie tej samej klasy rozmaitym elementom dokumentu spowoduje, że będą formatowane w identyczny sposób. W CSS wybór elementów o określonych klasach odbywa się za pomocą selektora klasy. Selektor może wybierać elementy na różne sposoby, np. jedna klasa, lista klas, podzbiory klas. Oto kompleksowy przykład:
<html>
<head>
<style>
.ogolne {color: blue;}
.dodatkowa {font-weight: bold;}
.ogolne.wazna {background-color: yellow;}
</style>
</head>
<body>
<p class="ogolne">Akapit z jedną ogólna klasą.</p>
<p class="ogolne dodatkowa">Akapit z ogólną i dodatkową klasą.</p>
<p class="ogolne dodatkowa wazna">Akapit z ogólną, dodatkową i ważną klasą.</p>
</body>
</html>Selektory CSS to jeden z najważniejszych aspektów kaskadowych arkuszy stylów. Są na tyle uniwersalne, że znalazły zastosowanie na różnym polu programistycznym (np. metody JavaScript, narzędzia typu Zen Coding). Arkusze stylów stanowią rozległy temat, śmiem twierdzić, że opis języka CSS (szczególnie w wersji trzeciej) byłby znacznie obszerniejszy niż prezentowany kurs xHTML. Obydwa języki się przeplatają (uzupełniają), dlatego znajomość każdego jest obowiązkowa przy projektowaniu stron WWW.
id#
Atrybut przypisuje do elementu unikatowy identyfikator (pierwszy znak musi być literą). W dokumencie nie mogą pojawić się dwa identyczne identyfikatory. ID wykorzystywany jest przez arkusze stylów (selektor identyfikatora), w skryptach JS (getElementById), w etykietach odsyłaczowych, etykietach pól itd. Prosty przykład:
<html>
<head>
<style>
#wazne {color: red;}
</style>
</head>
<body>
<p class="ogolne">To jest treść akapitu z <strong id="wazne">bardzo ważną informacją</strong>.</p>
<script type="text/javascript">
alert(document.getElementById("wazne").innerHTML);
</script>
</body>
</html>Identyfikator jest najłatwiejszym sposobem oznaczania danego elementu, jednocześnie pozostaje najszybszą metodą wyboru przy stosowaniu CSS lub JavaScript. Z tego względu wielu autorów stron umieszcza masę atrybutów ID, czasami niepotrzebnie. Zachowanie takie określa się mianem iditis (obok classitis, divitis, spanitis). Ogólnie chodzi o to, żeby tworzyć kod jak najbardziej przejrzysty (prosty) - stosowanie dużych ilości atrybutów globalnych tego nie zapewnia. Style CSS oraz JavaScript posiadają metody, które pozwalają swobodnie operować elementami, bez przesadnego oznaczania każdego tagu atrybutem ID (lub podobnymi).
style#
Atrybut pozwala przypisać definicję stylu dla konkretnego elementu. Ten sposób wstawiania CSS nazywany jest stylem lokalnym (lub śródliniowym). Przykład:
<p style="border: solid 2px #FFAAAA;">Akapit z lokalnie ustawionym obramowaniem.</p>Intencją wprowadzenia kaskadowych arkuszy stylów było oddzielenie prezentacji (wyglądu) od struktury strony (znaczniki). Stosowanie atrybutu style="" burzy ten porządek, dlatego powinniśmy korzystać z niego okazjonalnie.
title#
Atrybut pozwala określić dodatkowe informacje, opisy, lub inne uwagi dla elementu, który go posiada. Wartość atrybutu najczęściej wyświetlana jest przez przeglądarki w postaci "dymku" (tooltip). Umiejętne stosowanie title zwiększa użyteczność strony. Prosty przykład:
Moim promotorem jest <abbr title="Profesor">prof.</abbr> Krzysztof Jarzyna.W dziale "Odsyłacze - Wskazówki" opisałem kilka porad odnośnie stosowania title.
dir#
Atrybut pozwala określić bazowy kierunek (lub nowy kontekst), od którego zależy sposób działania dwukierunkowego algorytmu Unicode. Jest to istotne w przypadku tworzenia treści, gdzie przeplatają się dwa odmienne sposoby zapisu znaków (od lewej do prawej, lub od prawej do lewej). Domyślną wartością ustawianą przez przeglądarki jest dir="ltr" - zapis od lewej do prawej.
Więcej szczegółowych informacji umieściłem w dziale "Kierunek tekstu".
lang#
Atrybut określa język elementu, co w zamierzeniach miało być przydatne np. przy syntezie dźwięku, automatycznym dobieraniu znaków w zależności od języka (np. kropek dziesiętnych czy cudzysłowów). W praktyce najczęściej powiązywany jest ze stylami (selektor atrybutu lub pseudoklasa).
Więcej szczegółowych informacji umieściłem w dziale "Języki".