O znacznikach html dla trzykropczastych, drugie

Krótkim wstępem – po pierwszym wpisie o HTMLu, wiemy już, jak używać abrewiacji, cytatów, emfazy, dekoracji i definicji. Dziś, po odkryciu encji zajmiemy się dalszym poznawaniem znaczników.

Spis treści

1. Encje
2. Udekoruj swoją czcionkę stałą szerokością – pre, tt
3. Bądź mroczny i pisz kod; code, samp, kbd
4. Tutaj wpisz adres – var
5. Listy – ul, ol, li, oraz dl, dt, dd

Encje

W języku HTML, encja to skrót, najczęściej ułatwiający wpisanie znaku, którego nie da się wybrać z domyślnie ustawionej klawiatury – ot, wielokropek …, oznaczony jako … to dobra ilustracja.

Istnieje jeszcze jeden powód – specyfikacja HTML definiuje nawiasy trójkątne jako początki i końce znaczników. Jak więc zapisać same nawiasy? I tutaj encje przychodzą z pomocą – nawias otwierający < daje nam <, a zamykający > >. Jak widać, wszystkie encje zaczynają się od znaku &, a kończą średnikiem. Zaszła więc potrzeba zdefiniowania jeszcze jednej encji dla &: zapisuje się ją za pomocą &.

Jeśli zaś przyjdzie nam umieszczać cudzysłowy wewnątrz atrybutów jakiegoś znacznika – twórcy na talerzu umieścili ".

Inne przydatne encje to:

• cudzysłowia drukarskie – „ oraz “ i ” („ oraz “ i ”);
• cudzysłowia drukarskie (używane do zaznaczania cytatów wewnątrz cytowanego tekstu – często znajdowane chociażby w Biblii) – « oraz » (« oraz »);
• znaki pauzy – – i — (– i —). Wielkość pauzy jest równa wielkości odpowiadającej litery (n lub m).

Już niedługo w zapisie kodu pojawi nam się &lt; i &gt;. Bądźmy czujni!

Udekoruj swoją czcionkę stałą szerokością – pre, tt

Motywy dekoracyjne przewijają się w HTMLu często, widać twórcy języka mieli słabość do sztuki secesyjnej. pre oraz tt to kolejne znaczniki, które tak naprawdę nic nie znaczą i służą jedynie wizualizacji. tt jest liniowy, a pre blokowy. Nie mówią one nic o swojej zawartości – jedyną informacja, którą przekazują, jest prośba do graficznej przeglądarki, by wyświetliła ich zawartość stałą czcionką (z zachowaniem wszelkich odstępów, przełamań linii, tabulacji i innych zaliczanych do białych znaków – #).

Stwarza to różne możliwości, szczególnie dla znacznika pre, który nie musi zawierać się wewnątrz danego akapitu. Z całą pewnością możemy umieścić tam kod (korzystając ze znaczników, których opis znajduje się poniżej), tekst piosenki, czy też obrazek ASCII.

A czego nie możemy wewnątrz pre umieszczać? Zwykłych obrazków oraz znaczników sup, sub, big oraz small (poznamy je w następnej części), a także object, który służy do osadzania innych typów danych – np. apletów java wewnątrz kodu (często bywają na nich oparte czaty na większych portalach internetowych). Nie możemy również umieszczać innych elementów blokowych.

Między tt a b, czy i można postawić znak równości – żaden znacznik nie może znaleźć się wewnątrz.

Przykład (działanie):
Potwora z Lochy z Nessie (Joan G. Stark).
<pre>
                          _   _       _a_a
              _   _     _{.`=`.}_    {/ ''\_
        _    {.`'`.}   {.'  _  '.}  {|  ._oo)
       { \  {/ .-. \} {/  .' '.  \} {/  |  
~jgs^~`~^~`~^~`~^~`~^~^~`^~^~`^~^~^~^~^~^~`^~~`
</pre>

Bądź mroczny i pisz kod; code, samp, kbd

Zacni ludzie, którzy zbudowali Internet, potrzebowali sposobu na publikowanie swoich dokumentów w sieci dla innych zacnych ludzi, którzy mieli go rozwijać. Gdy wprowadzono ogólnie pojęte WWW, od razu zaistniała potrzeba, by rozprzestrzeniać kod różnego rodzaju za pomocą nowego medium. Dzięki temu powstały odpowiednie znaczniki w HTMLu.

code deklaruje literki zawarte w nim, jako kod programistyczny. Czy to HTML, czy jakiś egzotyczny język programowania, wszystkie kawałki kodu należy umieszczać wewnątrz tego znacznika.

samp i kbd będą się często ze sobą przeplatać – choć nie zawsze. Pierwszy z nich określa wszystko to, co wypluł komputer w reakcji na nasze działania. Drugi, analogicznie, wszystkie dane, które do niego wprowadziliśmy za pomocą klawiatury.

Przykłady (działanie):
Dziwny kod:
<code>kod.dziwnosc = true;</code>
Oto znacznik:
<code>p</code> służy do opisania akapitu.
Zapisany skrót klawiaturowy:
Nową kartę w Firefoksie i Operze 9 otwieramy, wciskając <kbd>Ctrl+T</kbd>.
Przykładowe polecenie z konsoli Windows (obrazek):
<pre>F:\&gt;<kbd>dir /D</kbd>
<samp> Wolumin w stacji F nie ma etykiety.
 Numer seryjny woluminu: 385A-6F1F

 Katalog: F:\

[WINNT]                  [Program Files]          [Inferno]
[Documents and Settings] [MinGW]
               0 plik(ów)               0 bajtów
               5 katalog(ów)     809 680 896 bajtów wolnych</samp>
F:\&gt;</pre>

Tutaj wpisz adres – var

Znacznik var, jak wiele osób mogłoby sądzić, nie określa zmiennych w programie komputerowym. Jego zastosowanie jest diametralnie inne. Przykładowo, przyda się w dokumencie pokazującym, jak powinnyśmy wypełnić furmularz PIT. Wtedy nasz znacznik powinien otaczać wszystkie dane, które powinniśmy zmienić, aby prawidłowo wypełnić formularz.

Przykład (działanie):
<pre>Konieczne jest wypełnienie poszczególnych pól:
Adres: <var>tu wpisz aktualny adres</var>
PESEL: <var>podaj swój PESEL</var></pre>

Listy – ul, ol, li, oraz dl, dt, dd

Pierwsze dwie – ul i ol to lista nieuporządkowana i uporządkowana. Domyślny ich wygląd jest zależny od przeglądarki – najczęściej jednak ul jest wykropkowana, a elementy ol zaczynają się od kolejnych numerów. Znacznik li służy do oznaczania poszczególnych elementów listy.

Przykład (działanie):
<ul>
	<li>element listy</li>
	<li>elemeny listy</li>
</ul>

Trochę dziwniejszą rzeczą są listy definicji, które mogą nam się skojarzyć z wcześniej poruszanym znacznikiem definicji. Działają na ten sam sposób, jednak są bardzo przydatne w definiowaniu większej ilości rzeczy.

Znacznik dl wskazuje, że wewnątrz niego znajduje się lista definicji. Pojedynczą definicję opisuje się przy użyciu dt – pojęcia, oraz dd – opisu.

Możliwa jest sytuacja, gdzie kilka pojęć będzie pasować do jednego, lub kilku opisów, i na odwrót. Wtedy stosujemy następującą notację: poszczególne pojęcia zapisujemy kolejno, jedno pod drugim, a pod nimi umieszczamy opisy w ten sam sposób.

Przykład (działanie):
Dwa pojęcia - jeden opis.
<dl>
	<dt>Czemu niebo jest niebieskie?</dt>
	<dt>Niebo nie jest czarne, czemu?</dt>
	<dd>Powietrze rozprasza padające światło...
		[wzory]
		[więcej wzorów]
		... jak widać.
	</dd>
</dl>
Pojęcie, opis, inne pojęcie, inny opis.
<dl>
	<dt>Krzesło</dt>
	<dd>Służy do siedzenia.</dd>
	<dt>Stół</dt>
	<dd>Zazwyczaj do siedzenia nie służy.</dd>
</dl>

Notatka: Elementy listy li, dd mogą zawierać zarówno elementy liniowe, jak i blokowe. Element dt tylko liniowe.

Notatka: Wewnątrz ul, ol, oraz dl nie można umieszczać niczego poza odpowiadającymi im znacznikami elementów listy.

Już można przestać myśleć 😉

Właśnie udało się nam przedrzeć do końca drugiej części tegoż małego poradnika. Tak więc proponuję odpocząć nieco od tego całego HTMLa, a za jakiś czas, z odświeżonym umysłem, wrócić z powrotem do artykułu – przemęczanie się i ślęczenie nad jednym zagadnieniem po pewnym czasie staje się bezproduktywne.

Możliwe, iż niedługo pojawi się mały teścik z pierwszej i drugiej części. A potem – następny minirozdział, tym razem o znacznikach pogrubiających, zmniejszających, kasujących i wstawiających.