Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

Znaczniki span oraz br

Znacznik span

<span>...</span> - sam w sobie właściwie nic nie jest w stanie pokazać, dopiero w połączeniu ze stylami CSS, umożliwia formatowanie tekstu objętego tym znacznikiem. W pokazanym poniżej przykładzie fragment tekstu objęty znacznikiem <span>...</span>, jest wyświetlony w kolorze czerwonym.

Znacznik br

Znacznik ten występuje pojedynczo i ma postać <br />. Spacja przed ukośnikiem jest wymagana. Najczęściej tekst jest automatycznie dopasowywany do szerokości obiektu - "rodzica". Jest wiele sytuacji, kiedy chcemy w danym miejscu wymusić złamianie linii tekstu i rozpocząć nowy wiersz - to zadanie spełnia znacznik <br />.

Przykład zastosowania znaczników span oraz br

Poniższy kod:

<body>
  <p>
    To jest jakiś tekst akapitu.<span style="color:red;">Od tego miejsca czcionka powinna być czerwona</span>, od tego miejsca kolor wrócił do domyślnego.
  </p>
  <p>
    W tym i następnym akapicie chcę zademonstrować wymuszone złamianie linii tekstu. W bieżacym akapicie nic nie stosujemy tylko, piszemy jak najwięcej, żeby powstało kilka linii tekstu. Następny akapit, będzie kopią obecnego, przy czym dwa wiersze będą złamane. Trochę jeszcze za mało tego tekstu, a więc zaczęrpnę kilka zdań z klasyka. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat.
  </p>
  <p>
    Ten akapit jest kopią poprzedniego i pokazuje wymuszone złamianie linii tekstu.<br /> Tutaj złamałem linię tekstu. Następny akapit, będzie kopią obecnego, przy czym dwa wiersze będą złamane. Trochę jeszcze za mało tego tekstu, a więc zaczęrpnę kilka zdań z klasyka. Jednak najpierw złamię linię wiersza aby łacina ropoczynała się od nowego wiersza. <br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat.
  </p>
</body>

przeglądarka wyświetli następująco:

Ćwiczenie 2_2_5_1

Wykonaj stronę, na której zademonstrujesz działanie znaczników span oraz br.

Praca domowa

Wykonaj stronę na dowolny temat, na której zademonstrujesz zastosowanie znaczników span oraz br.


Jeżeli nie jesteś pewny, jak wykonane zadania zapisać na pendriwie, to zajrzyj do pierwszego ćwiczenia, w którym zostało to dokładnie wytłumaczone.