Lekcja Druga

Co jeszcze potrzebuję wiedzieć o kodach do wyświetlania tekstu?

Przyznam się, że zapmniałem o jednej prostej, ale ważnej rzeczy. Czasem potrzeba, aby fragment tekstu wyróżniał się spośród reszty. Jak to zrobiłem? A tak:

Czasem potrzeba, aby fragment tekstu <B>wyróżniał</B> się spośród reszty.

Do pogrubiania tekstu używa się kodów <B> (Bold) albo <STRONG>. Do uzyskania tekstu pochylonego należy użyć <I> (Italics) albo <EM> (Emphasis). 

<I>Ten tekst jest pochylony</I><BR>
<B>Ten tekst jest pogrubiony</B><BR>
<B><I>Ten tekst jest pochylony i pogrubiony.</I></B>

Efekt:

Ten tekst jest pochylony
Ten tekst jest pogrubiony
Ten tekst jest pochylony i pogrubiony.

Chcę zrobić listę, taką ponumerowaną, albo z kropkami...

To proste. Do tworzenia listy jest specjany kod. Lista numerowana wymaga kodu <OL> (Orderd List); lista nienumerowana (z kropkami) wymaga kodu <UL> (Unorderd List). Każdy element listy musisz poprzedzić kodem <LI>, który nie ma kodu zamykającego, obowiązuje zaś do końca linii. Oto przykład: 

Instrukcja obsługi długopisu:
<OL>
<LI>Nacisnąć przycisk wysuwający końcówkę wkładu
<LI>Przyłożyć długopis do papieru
<LI>Przesuwać długopis tak, aby końcówka dotykała papieru
</OL>
Rzeczy potrzebne na bezludnej wyspie:
<UL>
<LI>Radio tranzystorowe
<LI>Pralka i suszarka
<LI>Kuchenka mikrofalowa
<LI>Dobry nastrój
</UL>

Przeglądarka pokaże to tak:

Instrukcja obsługi długopisu:

  1. Nacisnąć przycisk wysuwający końcówkę wkładu
  2. Przyłożyć długopis do papieru
  3. Przesuwać długopis tak, aby końcówka dotykała papieru
Rzeczy potrzebne na bezludnej wyspie:

Chcę dołączyć fragment tekstu, ale bez przerabiania go na HTML

Wbrew pozorom, jest to bardzo użyteczna możliwość. Ja np. w ten sposób pokazuję moje przykłady: tekst który przeglądarka wyświetli dokładnie tak, jak został wpisany, zachowując odstępy i końce linii. Jednym z zastosowań tej metody jest prezentacja programów komputerowych. Należy po prostu umieścić żądany fragment tekstu pomiędzy kodami <PRE> oraz </PRE> (Preformatted). Oto przykład: 

Poniżej prezentujemy dawkę komputerowej chińszczyzny:
<PRE>
#include 

main()
{
printf("Hello World!\n");
}
</PRE>

A tak to widać:

Poniżej prezentujemy dawkę komputerowej chińszczyzny: 
#include 

main()
{
printf("Hello World!\n");
}

Jak się robi tytuły?

Jest sześć "stopni" tytułów: od największego (głównego) poprzez mniejsze (podtytuły) do najmniejszego. Są one ponumerowane od 1 do 6, z literką H (od słowa Heading). A więc, są to: <H1>, <H2>, ... , <H6>. Oto przykład użycia różnych tytułów: 

<H1>Powieść</H1>
<H2>Przedmowa</H2>
Moja powieść jest fascynującym przykładem zastosowania oszczędnej formy przekazu autora do czytelnika.
<H2>Rozdział 1</H2>
<P>
Zdzisław jak zwykle wrócił z pracy, powiesił swój płaszcz na wieszaku i usiadł przed telewizorem. 
</P>
KONIEC

A tak to dzieło prezentuje się w przeglądarce:

Powieść

Przedmowa

Moja powieść jest fascynującym przykładem zastosowania oszczędnej formy przekazu autora do czytelnika.

Rozdział 1

Zdzisław jak zwykle wrócił z pracy, powiesił swój płaszcz na wieszaku i usiadł przed telewizorem.

KONIEC

Jak zrobić, żeby odnośnikiem był obrazek?

Własnie, o tym zapomniałem powiedzieć w poprzedniej lekcji. Mam nadzieję, że mi wybaczysz, już naprawiam ten błąd. Sekret jest prosty: zamiast tekstu w nazwie odnośnika umieszczamy obrazek. Proste, prawda? Przejdźmy do przykładu: 

Oto jest obrazek, który jednocześnie jest odnośnikiem. 
Kliknij w niego myszką: 
<A HREF="przyklad.html"><IMG SRC="angel.gif"></A>.<BR>
<BR>
Można też tak: <A HREF="przyklad.html"><IMG SRC="angel.gif"> Przykład</A>

I oczywiście demonstracja:

Oto jest obrazek, który jednocześnie jest odnośnikiem. Kliknij w niego myszką:

Można też tak: Przykład

Zauważ, że gdy obrazek jest odnośnikiem, przeglądarka dodaje do niego ramkę w takim kolorze, jaki ma normalnie odnośnik. To ułatwia zorientowanie się, że obrazek jest rzeczywiście odnośnikiem. Ale można również zrobić odnośnik bez ramki, należy po prostu użyć parametru BORDER w obrazku, który mówi przeglądarce, jak gruba powinna być ramka wokół obrazka. Robi sie to tak: 

Oto jest obrazek, który jednocześnie jest odnośnikiem. 
Kliknij w niego myszką: 
<A HREF="przyklad.html"><IMG SRC="angel.gif" BORDER=0></A>.<BR>
<BR>
Można też ramkę pogrubić: <A HREF="przyklad.html"><IMG SRC="angel.gif" BORDER=5></A>

Który efekt wolisz, zależy oczywiście od Ciebie:

Oto jest obrazek, który jednocześnie jest odnośnikiem. Kliknij w niego myszką:

Można też ramkę pogrubić:

Na niektórych stronach są takie fajne kreseczki, odzielające fragmenty tekstu. Jak to zrobić?

Taka kreseczka ma kod <HR> (Horizontal Rule). Można dodatkowo podać parametr WIDTH o pożądanej długości kreski, na przykład procentowo względem szerokości strony. Oto przykład: 

To jest pierwsza linia<BR>
<HR>
To jest druga linia<BR>
<HR WIDTH="30%">
To jest następna linia<BR>
<HR WIDHTH="50">
To jest ostatnia linia

Co po wyświetleniu da następujący efekt:

To jest pierwsza linia
To jest druga linia
To jest następna linia
To jest ostatnia linia

I to by było na tyle w lekcji drugiej. Dziękuję za uwagę. Jak zwykle, chętnie odpowiem na pocztę.