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 <b> a zamykającym </b>, możesz pochylić tekst używając znacznika otwierającego <i> i zamykającego </i>. 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 <br /> 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: <br />.

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:

  1. Pierwszy element listy
  2. 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>

<< Lesson 5: Czego się dotychczas nauczyłeś?

Lesson 7: Atrybuty >>

cron