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.

Zachowanie formatowania pierwotnego

Pisząc różne teksty w kodzie HTML, należy pamiętać, że przeglądarka wyświetli je "po swojemu". Wykonajmy proste ćwiczenie, aby Ci to uzmysłowić:

Ćwiczenie 2_1_5_1

Sprawdź, jak przeglądarka wyświetli poniższy kod:
<body>
  --------------
  |   Litery   |
  --------------
  | a |  b | c |
  | d |  e | f |
  | i |  j | k |
  --------------
</body>
Strona utworzona za pomocą tego kodu powinna wyglądać następująco:

Przecież to jest zupełnie coś innego jak to co chcieliśmy osiągnąć! Zgadza się. Czy jest jakiś sposób aby przeglądarka wyświetliła naszą pracowicie utworzoną tabelkę w pierwotnej postaci?

Ćwiczenie 2_1_5_2

Sposób jest bardzo prosty. Należy zastosować znacznik <pre>...</pre>. Kod w naszym przykładzie powinien wyglądać następujaco:
<body>
  <pre>
  --------------
  |   Litery   |
  --------------
  | a |  b | c |
  | d |  e | f |
  | i |  j | k |
  --------------
  </pre>
</body>
Strona utworzona za pomocą tego kodu powinna wyglądać następująco:

Proste, prawda? Znacznik <pre>...</pre> stosuje się najczęściej do publikacji kodów źródłowych różnych języków programowania. Wszystkie kody HTML pokazane w tym opracowaniu są pokazywane przy zastosowaniu tego znacznika. Dlaczego? Dlatego, że w kodach niezwykle istotne są wcięcia i odstępy. Zwróć uwagę, że w pierwszym przykładzie tekst jest wyświetlany od lewej krawędzi okna przeglądarki, natomiast w drugim - z wyraźnym odstępem. Jest tak dlatego, ponieważ pisząć kod wykonałem wcięcie całego bloku tekstu względem znacznika <body>...</body>. Postąpiłem prawidłowo... ale nie w przypadku znacznika <pre>...</pre>. Uwzględnia on bowiem wszystkie spacje i tabulatory, a więc dodatkowe wcięcia wynikające ze struktury kodu. Aby tego uniknąć, należy wyłamać się ze struktury kodu i ropocząć jego pisanie od lewej krawędzi okna edytora. Możesz to sprawdzić analizując źródło tego tematu. Poniżej pokazuję fragment kodu tego tematu, związany z pierwszym ćwiczeniem.

Fragment kodu ze znacznikiem <pre>...</pre>
Rysunek 2_1_5_1. Fragment kodu ze znacznikiem <pre>...</pre>"

Zwróć uwagę, że zastosowano tutaj także znacznik <code>...</code>. Powoduje on zmianę czcionki na monotypiczną - używaną przez programistów. Jest to czcionka o stałej szerokości znaków, np.: Courier, Courier New.

Praca domowa

Wykonaj stronę, pokazującą kod źródłowy następującej listy:
  1. Kontynenty
    1. Europa
      1. Krainy geograficzne
        • Lasy
        • Jeziora
        • ...
      2. ...
    2. Afryka
    3. ...
  2. ...
W prawidłowo wykonanej stronie przeglądarka wyświetli:

Pamiętaj o stosowaniu znaków specjalnych w celu wyświetlenia "<" oraz ">". Zastosuj także znacznik <code>...</code>.


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.