Lekcja 6: Kilka dodatkowych elementów

Czy udało ci się zrobić parę stron samemu? Jeżeli nie, tutaj masz przykład:


<html>

  <head>
  <title>Moja strona internetowa</title>
  </head>

  <body>
  <h1>Nagłówek</h1>
  <p>tekst, tekst tekst, tekst</p>
  <h2>Podnagłówek</h2>
  <p>tekst, tekst tekst, tekst</p>
  </body>
  
</html>

Teraz co?

Teraz czas nauczyć się siedmiu nowych elementów.

W ten sam sposób możesz pogrubić swój tekst umieszczając go między znacznikiem otwierającym  a zamykającym , możesz pochylić tekst używając znacznika otwierającego  i zamykającego . Tak, "i" jest skrótem od "italic" czyli styl liter pochylonych.

Przykład 1:


<i>To powinno być pochylone.</i>

Będzie tak wyglądał w przeglądarce:

To powinno być pochylone.

Podobnie, możesz uczynić tekst mniejszym używając znacznika small:

Przykład 2:


<small>To powinno być małe.</small>

Będzie tak wyglądał w przeglądarce:

To powinno być małe.

Czy mogę używać wielu elementów jednocześnie?

Możesz z łatwością korzystać z wielu elementów jednocześnie o ile unikasz nakładania się elementów. Najlepiej zilustrujmy na przykładzie:

Przykład 3:

Jeżeli chcesz wyświetlić pogrubiony i wytłuszczony tekst, musisz zrobić tak:


<b><i>Tekst jest pogrubiony i wytłuszczony</i></b>

Ale NIE tak:


<b><i>Tekst jest pogrubiony i wytłuszczony</b></i>

Różnica jest taka, że w pierwszym przykładzie pierwszy znacznik został zamknięty jako ostatni. W ten sposób unikniemy nieporozumień ze samym sobą i przeglądarką.

Więcej elementów !

Jak wspomniałem w Lekcji 3 istnieją elementy zamykane i otwierane tym samym znacznikiem. Te tak zwane puste elementy nie posiadają żadnej zawartości, są raczej oddzielnymi etykietami. Przykładem takiego znacznika jest   który tworzy przymusowy koniec linii:

Przykład 4:


Tekst<br /> i trochę tekstu w nowej linii

Będzie tak wyglądał w przeglądarce:

Tekst
i trochę tekstu w nowej linii

Zauważ że znacznik jest połączeniem zamykającego i otwierającego znacznika ze spacją i ukośnikiem na końcu:  .

Kolejny element, który zamykamy i otwieramy w jednym znaczniku to <hr />. Używamy go do rysowania linii poziomej ("hr" oznacza "horizontal rule" czyli wyliniowanie poziome):

Przykład 5:


<hr />

Będzie tak wyglądał w przeglądarce:

Przykłady elementów wymagających otwierającego i zamykającego znacznika - tak jak większość elementów - to ul, ol i li. Te elementy są używane do tworzenia listy.

ul jest skrótem od "unordered list" czyli lista nie uporządkowana i wstawia kulę przed każdą pozycją w liście. ol jest skrótem od "ordered list" czyli lista uporządkowana i numeruje każdą pozycję w liście. Aby umieszczać elementy w liście używaj znacznika li("list item" - element listy). Zdziwiony? Patrz na przykłady:

Przykład 7:


<ul>
  <li>Element 1 listy</li>
  <li>Element 2 listy</li>
</ul>

Będzie tak wyglądał w przeglądarce:

Element 1 listy
Element 2 listy

Przykład 8:


<ol>
  <li>Pierwszy element listy</li>
  <li>Drugi element listy</li>
</ol>

Będzie tak wyglądał w przeglądarce:

Pierwszy element listy
Drugi element listy

Hehe! I to wszystko?

Narazie wszystko. Jeszcze raz, eksperymentuj i twórz swoje własne strony korzystając z niektórych z siedmiu nowo poznanych elementów:


<i>Przetłuszczony</i>
<small>Mały tekst</small>
<br /> Koniec linii
<hr /> Linia pozioma
<ul>Lista</ul>
<ol>Lista uporządkowana</ol>
<li>Elment listy</li>