header

Umieszczanie tekstu na stronie internetowej.

Umieszczanie tekstu wewnątrz znacznika <p></p>

Najprostszym sposobem umieszczenia tekstu na stronie internetowej jest po prostu wpisanie go w kodzie html wewnątrz znacznika <p></p>. Tak wpisany tekst będzie wyswietlał się w kolorze czarnym, domyślną czcionką. Jeżeli tekst będzie dłuższy niż jedna linijka, tekst będzie przechodził do nowej linii dostosowując się do wielkości okienka w którym jest wyświetlany. Jeżeli chcemy wymusić przejście do nowej linii, w odpowiednim miejscu wpisujemy <br>

Podsumowująć:

  • <p> treść </p> - powoduje wyświetlenie treści jako osobnego akapitu i dodanie stosownego odstępu przed oraz po nim
  • <br> - wymusza zmianę wiersza

Przykad 1:

<p> To jest pierwszy akapit. </p>
<p> Natomiast to jest drugi akapit. </p>

To jest pierwszy akapit.

Natomiast to jest drugi akapit.

Przykad 2:

<p> To jest pierwsza linia. <br> Natomiast to jest druga linia. </p>

To jest pierwsza linia.
Natomiast to jest druga linia.

Nagłówki. Umieszczanie tekstu wewnątrz znaczników <h1> </h1>...<h6> </h6>

Przeglądarki internetowe domyślnie formatują, głównie wielkość, tekst wpisywany jako nagłówek. Tekst w nagłówku jest również odróżniany od zwykłego tekstu przez wyszukiwarki i może mieć znaczenie dla wyników. Ogólnie zaleca się stosowanie nagłówków.

Przykad:

<h1> Nagłówek poziomu 1 </h1>
<h2> Nagłówek poziomu 2 </h2>
<h3> Nagłówek poziomu 3 </h3>
<h4> Nagłówek poziomu 4 </h4>
<h5> Nagłówek poziomu 5 </h5>
<h6> Nagłówek poziomu 6 </h6>

Nagłówek poziomu 1

Nagłówek poziomu 2

Nagłówek poziomu 3

Nagłówek poziomu 4

Nagłówek poziomu 5
Nagłówek poziomu 6

Umieszczanie fragmentów tekstu w znacznikach <div> </div> i <span> </span>

Grupowanie blokowe:

  • <div> zawartość </div>

zawartość - fragment treści dokumentu, który ma by potraktowany jako osobny "blok"; w szczególności, jego początek i koniec polecają przegldarce zmienić wiersz (nie są dodawane odstępy pionowe).

Grupowanie wewnętrzne:

  • <span> tekst </span>

tekst - wyodrębniany "wewnętrzny" (niebędący blokiem) fragment dokumentu; np. jeden wyraz

Wyodrębnianie fragmentów tekstu - przykłady:

<p>To jest zwykły tekst.
<div style="color: purple; background-color: white;">
To jest wyróżnienie.
</div>
I znowu zwykły tekst.</p>

To jest zwykły tekst.

To jest wyróżnienie.

I znowu zwykły tekst.

<p>To jest zwykły tekst.
<span style="color: purple; background-color: white;">
To jest wyróżnienie.
</span>
I znowu zwykły tekst.</p>

To jest zwykły tekst. To jest wyróżnienie. I znowu zwykły tekst.

w przedstawionych wyżej przykładach zastosowałem dla zmiany koloru czcionki i tła style: style="color: purple; background-color: white;".

Dodatkowe znaczniki do formatowania tekstu (style wbudowane).

Wyróżnienia logiczne:

  • <em> ... </em> - emfaza (domyślny sposób wyróżnienia: kursywa)
  • <strong> ... </strong> - wyraźne uwypuklenie (wytuszczenie)
  • <cite> ... </cite> - krótki cytat (kursywa)
  • <samp> ... </samp> - tekst przykadowy (czcionka o stałej szerokości)

Przykład:

<p> To jest tekst <em>wyróżniony</em>,
a to<strong>uwypuklony</strong>.
Tak wygląda <cite>cytat</cite>,
a tak - <samp>tekst przykładowy.</samp> </p>

To jest tekst wyróżniony, a to uwypuklony. Tak wygląda cytat, a tak - tekst przykładowy.

Uwaga: style wbudowane = <span> ... </span> + style CSS

Wyróżnienia fizyczne:

  • <i> ... </i> - kursywa
  • <b> ... </b> - wytuszczenie
  • <tt> ... </tt> - czcionka o stałej szerokości
  • <sub> ... </sub> - indeks dolny
  • <sup> ... </sup> - indeks górny

Przykład:

<p> To jest <i>kursywa</i>, a to
<b>wytuszczenie</b>, czcionka o
<tt>stałej szerokości </tt>oraz indeksy:
<sub>dolny</sub> i <sup>górny</sup></p>

To jest kursywa, a to wytłuszczenie, czcionka o stałej szerokości oraz indeksy: dolny i górny