Gazeta Internetowa

 

KODOWANIE POLSKICH ZNAKÓW

Przy tworzeniu polskich stron WWW można stanąć przed dylematem - jaki wybrać sposób kodowania polskich znaków ? Zalecany, popularny i zgodny z polską normą jest standard iso-8859-2 (w tym standardzie kodowana jest np. Gazeta Internetowa). Dla osób tworzących strony WWW pod sytemem Windows łatwiejszy w użyciu jest mniej lubiany i mniej popularny microsoftowski standard windows-1250.
Wielu czytelników zwracało nam uwagę, że źle robimy używając w kursie html standardu windows-1250. Otóż celem kursu jest nauczenie HTMLa od podstaw, i dla uproszczenia nauki użyto standardu microsoftowskiego. Przy kodowaniu w iso-8859-2 uczestnicy kursu musieliby używać specjalnego konwertera do przekodowywania tekstów (konwerter taki można znaleźć w dziale DOWNLOAD na stronach WWW Gazety). Sprawą standardu kodowania w naszym kursie zajął się także Newsletter z Niespodzianką agencji prasowej Insider:
(cytat)

"Gazeta Internetowa" rozpoczela wlasnie publikowanie kursu HTML autorstwa Krzysztofa Grzegorza Stolera. Zapowiada sie bardzo ciekawie - juz w pierwszym odcinku czytamy:

"Bardziej lansowana w Polsce [jest strona kodowa - przyp. NzN] 8859-2, ale uniemozliwia nam ona pisanie dokumentow Notepadem, piszemy wiec 1250 - tak jak ogonki w Notepadzie."

---> Bardziej lansowany jest w Polsce ruch prawostronny, ale utrudnia nam utrzymywanie stalego odstepu od krawedzi jezdni, jezdzimy wiec lewa strona - tak, jak w Wielkiej Brytanii... ;-)

http://www.gazeta.sky.pl/gi4k.htm#programy

 (koniec cytatu)
Otóż nasz kurs jest odpowiednikiem placu manewrowego dla uczących do egzaminu się na prawo jadzy. Po takim placu można jeżdzić prawą stroną, lewą stroną, środkiem, do tyłu, a nawet ruszać z piskiem opon (gdy instruktor nie widzi :) ). Odbiorcy kursu - nie martwcie się, na zanim 'wyjedziecie na drogę' nauczymy was odpowiednich przepisów.



Lech Baczyński

[spis treści]

 

HTML - częsć druga

Właściwości tekstu

Tekst objęty klamrami <body> </body> wyprowadzany jest jednym ciurkiem na monitor. Literom można nadawać specjalne atrybuty stosując znaczniki HTML. Wszystkie znaczniki nadające atrybuty znakom są parzyste. Zmiana czcionki na i odwołanie. Niektóre atrybuty można zagnieżdżać czy mieszać. Język HTML posiada wszystkie możliwości formatowania tekstu i znaków edytora Wordpad. Poniżej wymienione zostały znaczniki formatowania znaków (uwaga - nie wszystkie może wyświetlić twoja przeglądarka) :
  • <i> italik czyli kursywa </i>
  • <b> bold czyli tłusty </b>
  • <strong> mocny </strong>
  • <u> underlined czyli podkreślony </u>
  • <strike> przekreślony </strike>
  • <big> duży </big>
  • <small> mały </small>
  • <blink> tekst migający </blink>
  • <blackquote> służy do wyróżnienia cytatu </blackquote>
  • <adress> wyróżnienie adresu internetowego </adress>
  • <tt> teletype (czcionka maszynowa) </tt>
  • <cite> wyróżnienie cytatu </cite>
  • <code> wyróżnienie kodu programu </code>
  • <dfn> wyróżnienie definicji </dfn>
  • <em> wyróżnienie teksu </em>
  • <kbd> wyróznienie tekstu pisanego klawiaturą </kbd>
  • <listing> wyróżnienie listingu programu </listing>
  • <marquee...> wiersz rolowany </marquee>
  • <sub> subscript czyli indeks dolny </sub>
  • <sup> superscript czyli indeks górny </sup>
  • <xmp> przykład </xmp>
  • <basefont ... > zmiana wielkości czcionki
Jak widać powyżej niektóre z powyższych znaczników mają znaczenie tylko umowne. Dwa ze znaczników marquee i basefont nabierają znaczenia wraz z parametrami. Możemy napisać 
<basefont size=3>
aby zmienić wielkość czcionki na 3 lub 
<basefont size=+3>
aby zmienić wielkość czcionki o 3. Niektóre przeglądarki zezwalają na 
<basefont size=2 color="#ffff00">
aby zmienić także kolor. O kolorach póśniej przy opisie znacznika body

Znacznik narquee może mieć następujące parametry

  • behavior=scroll scrolowanie
  • behavior=slide przesuwanie
  • behavior=alternate odbijanie
  • direction=left kierunek w lewo
  • direction=right kierunek w prawo
  • loop=n n razy
  • scrollamount=n odstęp pomiędzy powtórzeniami w pikselach
  • scrolldelay=n odstęp pomiędzy powtórzeniami w milisekundach
  • height=n wysokość
  • width=n szerokość
  • hspace=n odstęp poziomy
  • vspace=n odstęp pionowy
  • align=right / left / center dosunięcie do prawej / lewej
  • border obwódka
Parametry height, width, hspace, vspace, align, border powtarzają się przy innych znacznikach

Teraz krótki test. Otwieramy edytor tekstowy i piszemy: 

<html>
  <head><meta http-equiv="Content-Type"
      content="text/html; charset=windows-1250">
    <title>Test pisma</title>
  </head>
  <body>
      Ten tekst jest pisane normalną czcionką. 
    <br>
      Używam znacznika <br> aby przeglądarka umieszczała
      dalszy ciąg tekstu w nowym wierszu. <br>
      H<sub>2</sub>O <br>
      a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>
      <marquee behavior=alternate>
          abc<b>def<i>ghi<u>jkl</b>mno</i>pqr</u>stu
      </marquee>
  </body>
</html>
Efekt zobaczymy w przeglądarce. Niestety Netscape nie obsługuje prawidłowo znacznika marquee , Internet Explorer nie obsługuje blink. Odmienności takich z czasem poznamy więcej, a schody zaczną się przy grafice, która musi być ładnie rozmieszczona bez względu na rozdzielczość monitora. Większość ładnych stron WWW ma komentarze - ta strona jest dobrze widziana przy rozdzielczości 800 x 600 lub cos podobnego. Takie rzeczy tylko ręcznie można ładnie rozplanować, a edytory stron Web psują wszystko.

Formatowanie tekstu

Umiemy już dowolnie formatować kształt czcionki. W części tej poznamy wybór czcionki i formatowania tekstu. Będziemy mogli edytorem typu Notepad dowolnie sformatować i ukształtować dokument tekstowy jak w prawdziwym edytorze. Bardziej zaawansowane rzeczy jak listy, tabelki poznamy później, aby wykład nie był zbyt monotonny. Na później pozostawimy też sobie arkusze stylów - to coś takiego jak style w Wordzie. Bardzo wygodne narzędzie, wielokrotnie zmniejszające nakład pracy przy tworzeniu stron z większą ilością tekstu. Ostatnio stają sie modne, a komisja standaryzacyjna sugeruje, że przy kolejnych wersjach HTML wyprą większość stosowanych znaczników. Myślę, że nie prędko. Jedną z cech dzisiejszej informatyki jest trzymanie się za wszelką cenę tradycji i zachowywanie kompatybilności wstecz. Póki co popularne narzędzia HTML nie zachowywują tekstu z użyciem arkuszy styli. Style jednak wchodzą. Są na stronach najpoważniejszych witryn internetowych, a nie ma co ukrywać najważniejszą chyba formą nauki i samego aktu tworzenia jest podpatrywanie.

Najbardziej uniwersalnym znacznikiem pozwalającym na kształtowanie czcionki jest znacznik </font>. Znacznik pozwala na zmianę:

  • rozmiaru - <font size=10 >, myślę, że komentarz jest niepotrzebny, rozmiar można ustawić doświadczalnie,
  • czcionki - <font face="Courier New" >, tu też komentarz zbyteczny,
  • koloru - <font color="#00ff00">, tu następuje opis, który pasować będzie do wszystkich znaczników posiadających atrybut kolor (jak np. poznany wcześniej basefont. Kolor w HTML można wpisać na dwa sposoby:
    • Podając arytmetycznie nasycenie barw składowych RGB (red, green, blue),czyli sumy kolorów: czerowny, zielony, niebieski w kodzie szesnastkowym (od 00 do FF). Liczba #FF0080 to kolor będący sumą pełnego nasycenia czerwieni i częściowego (połówka) niebieskiego, #808080 to po połówce wszystkich trzech kolorów (liczba 80 to w kodzie szesnastkowym 128 czyli połówka FF - 255), #000000 to oczywiście czarny, a #FFFFFF to biały.
    • wpisując nazwę koloru, jednak w zależności od przeglądarki rozumiany tekst może być w zakresie od 16 do 256 (a może i więcej kolorów), a więc <font color="red"> red </font>, blue yellow brown silver gray maroon green navy purple olive teal black white lime gold margenta cyan itd.
  • lub dowolnej kombinacji w/w cech: np. <font size=10 face="Courier New" color="#00ff00">
Znacznik jest parzysty i użycie klamry kończącej </font> odwołuje wszystkie zmiany wprowadzone poprzedzającą go deklaracją. Znaczniki można zagnieżdżać, a więc np. w przykład: 
tekst1
<font size=6>
  tekst2
  <font face="Courier New">
    tekst3
    <font color="#00ff00">
      tekst4
    </font>
    tekst5
  </font>
  tekst6
</font>
tekst7

będzie wyglądał następująco:

tekst1 tekst2 tekst3 tekst4 tekst5 tekst6 tekst7

Tu w przykładzie widać, że zamiast pisać ciurkiem jak niżej: 

tekst1 <font size=6> tekst2 <font face="Courier New"> tekst3
<font color="#00ff00"> tekst4 </font> tekst5 </font>
tekst6 </font> tekst7
stosowałem wcięcia. Jest to może ciut bardziej pracochłonne, ale efekt jest dużo czytelniejszy i odzwierciedla strukturę tekstu. W przypadku błedu dużo łatwiej znaleźć błąd typu brak znaku < lub > , albo brak znacznika zamykającego do pary.

Bardzo ważne jest przy tym znaczniku (jak i wszystkich parzystych) odwołanie każdej deklaracji, a więc powtórzenie znacznika z nazwą poprzedzoną kreską ukośną i bez parametrów. Brak odwołania znacznika spowoduje działanie jego w dalszym tekście. Wyrażnie widac to w poprzednim przykładzie.

Znudziło nam się pisanie ciurkiem. Jak przejść do nowego wiersza? Nie wystarczy wcisnąć klawisza enter . Jak napisałem wczesniej przeglądarka znak nowego wiersza traktuje jak spację. Ano trzeba użyć znacznika <br>. Znacznik jest nieparzysty, można użyć go w dowolnym miejscu tekstu i nie odwoływać. Prosto i skutecznie. Można użyć bardziej złożonej postaci <br clear="sposóbczyszczenia">, aby oczyścić przestrzeń koło rysunku oblewanego przez tekst.

Odwrotnym w działaniu jest parzysty znacznik <nobr>. Tekst pomiędzy <NOBR> a </NOBR> nie jest zawijany.

Jeżeli w ramach części tekstu ograniczonego przez <nobr> zezwalamy na złamanie tekstu piszemy <wbr>

Podobno bardziej eleganckim znacznikiem jest <P>. Znacznik ten oddziela paragrafy. Postawienie go w dowolnym miejscu bez parametrów powoduje zakończenie bieżącego paragrafu i rozpoczęcie nowego, a pomiędzy nimi wstawienie pustej linii. Coś tak jak klawisz enter w edytorach tekstowych.
Druga forma znacznika <P> jest parzysta, wymaga odwołania </P>. Forma ta zmienia sposób wyświetlania poszczególnych wierszy:

  • <P align="CenTer"> centruje akapit
  • <P align="left"> dosuwa znaki do lewej
  • <P align="right"> dosuwa znaki do prawej

Podobnie jak znacznikiem <P> rozmieszczać tekst w wierszu można znacznikiem <DIV align="center">. Różnica pomiędzy znacznikami jest taka, że <DIV> nie zamyka paragrafu, rozpoczyna tylko nowy wiersz. Zamiast słowa center wipsać można right lub left podobnie jak w <P>.

Najprostszym z tej rodziny jest po prostu <center>. Robi to sa mo co <div align="center">

Podobnie jak w edytorach czasami trzeba przed akapitem dać tytuł. W starych edytorach aby uwidocznić tytuł pisało się go tłustą czcionką zmieniało się jej wielkość lub krój. W nowych edytorach są predefiniowane style dla nagłówków. Podobnie w HTML. Styli jest 6: od najgłówniejszego <h1> do najmniej głównego <h6>. Znacznik nagłówka jest parzysty. Postawienie go przerywa bieżący paragraf, pzostawia pusty wiersz i zmienia styl. Niestety tych predefinowanych styli samemu zmienić nie można.

Aby oddzielić dwa fragmenty tekstu poziomą linią należy użyć znacznika <HR>. Znacznik jest nieparzysty. Znacznikowi można podać jeden z poniższych parametrów:

  • size=nn rozmiar
  • width=nn szerokość
  • align=left/right/center położenie w wierszu
  • noshade linia jednowymiarowa

Jeżeli tekst ma byc pisany w dwóch kolumnach używamy parzystego znacznika <multicol>. Znacznik może mieć następujące parametry:

  • <multicol cols=4> wskazujący na ilośc kolumn (tu 4)
  • <multicol gutter=15> wskazujący na odstęp pomiędzy kolumnami teksu w pikselach (domyślnie 10)
  • <multicol width=30%> definiuje szerokość kolumny w pikselach lub procentach.

Parzysty znacznik <pre> wydziela część tekstu, która wyświetlana jest tak jak została wprowadzona, a więc na ekran wyświetlana jest taka ilość spacji i znaków nowego wiersza, jakie zostały wprowadzone do pliku. Tekst wyświetlany jest czcionką typu Courier. Najczęściej stosuje się do wyświetlania listingów programów i rysunków. Ja tym stylem pokazuję przykłady.

Znacznik <plaintext> oddziela część tekstu podobnie jak <pre> i wyświetla go w formie podobnej jak została wprowadzona czcionką najczęściej typu Courier.

Znacznik samp działa podobnie jak <i> lub <b> i pokazuje tekst podobnie czcionką Courier jak <pre> jednakże nie oddziela akapitu.

Ostatni znacznik z tej grupy to <spacer>. Pozwala na wykonywanie odstępów innych niż standardowe.

  • <spacer type=horizontal size=25> wykonuje odstęp 25 pikseli. Można użyć na początku akapitu by zrobić wcięcie. Wpisanie dowolnej liczby spacji jest ignorowane
  • <spacer type=vertical size=60> powoduje zdefiniowany odstęp pomiędzy wierszami.
Znacznik ten rozumiany jest tylk przez Netscape. Wprowadzony dokument HTML należy sprawdzić na kilku przeglądarkach, a przynajmniej Netscape i Internet Explorer. Szczególnie jeżeli robiony jest generatorem. Robiąc ręcznie możemy uniknąć niezamierzonego działania, które szczególnie przykre jset przy wklejaniu grafiki. Drugi problem to sprawdzenie dokumentu przy kilku rozdzielczościach monitora. Czasami przy zmianie rozdzielczości cały dokument sie rozjeżdża, przestaje być elegancki. Ta uwaga dotyczy też bardziej dokumentów z ilustracjami i tabelami. Przy wprowadzaniu znaczników czułych na wielkośc okna i rozdzielczość zwrócę na to uwagę. Przy formatowaniu tekstu, też są minimalne różnice, znacznik <pre> w Explorerze zmienia tylko rodzaj fontu, w Netscapie natomiast zmniejsza czcionke w stosunku do normalnej. Warto sprawdzić.

Teraz prosty przykład. Tylko z komendami formatowania tekstu, bez zmian kroju czcionek itp. 

<br>
  <h1>
    <center>
      Tytuł Książki
    </center>
  </h1>
  <h2> Rozdział 1 </h2>
  Tu jest treść rozdziału. Litwo Ojczyzno Moja, Ty jesteś jak zdrowie
  ile Cię trzeba cenić ten tylko się dowie, kto Cię stracił, dziś
  piękność Twą w całej ozdobie
  <h2> Rozdział 2 </h2>
  <h3> Podrozdział 2.1 </h3>
  <p align="center">
  Tu jest treść rozdziału. centrowana. Litwo Ojczyzno Moja, Ty jesteś
  jak zdrowie
  ile Cię trzeba cenić ten tylko się dowie, kto Cię stracił, dziś
  piękność Twą w całej ozdobie 
  </p>  
  <h3> Podrozdział 2.2 </h3>
  <p align="right">
  Tu jest treść rozdziału. dosuwana do prawej. Litwo Ojczyzno Moja, Ty
  jesteś jak zdrowie
  ile Cię trzeba cenić ten tylko się dowie, kto Cię stracił, dziś
  piękność Twą w całej ozdobie 
  </p>  
<br>
I to samo widoczne na ekranie:

Tytuł Książki

Rozdział 1

Tu jest treść rozdziału. Litwo Ojczyzno Moja, Ty jesteś jak zdrowie ile Cię trzeba cenić ten tylko się dowie, kto Cię stracił, dziś piękność Twą w całej ozdobie

Rozdział 2

Podrozdział 2.1

Tu jest treść rozdziału. centrowana. Litwo Ojczyzno Moja, Ty jesteś jak zdrowie ile Cię trzeba cenić ten tylko się dowie, kto Cię stracił, dziś piękność Twą w całej ozdobie

Podrozdział 2.2

Tu jest treść rozdziału. dosuwana do prawej. Litwo Ojczyzno Moja, Ty jesteś jak zdrowie ile Cię trzeba cenić ten tylko się dowie, kto Cię stracił, dziś piękność Twą w całej ozdobie


Proponuję teraz parę ćwiczeń.

  • Utworzyć kilkuwierszowy tekst z formatowaniem, czcionkami i kolorami
  • Pooglądac go w Explorerze
  • Wczytać go do Worda (starsze wersje Worda tego nie potrafią) - w Wordzie będzie wyglądał identycznie jak w przeglądarce.
  • Zapisać go jako plik Worda (.doc) i porownać obie wielkości
  • Teraz ćwiczenie odwrotne - utworzyć tekst w Wordzie
  • Zapisac jako html (tylko Word 97 i 95 z uzupełnieniami to potrafią) - przy okazji Word zapyta o sposób kodowania polskich ogonków.
  • Podnieść dokument zapisany w Wordzie Explorerem
  • Wczytać ten sam dokument do Wordpada i zaobaczyć jakie funkcje formatujące zostały użyte. Będzie trochę raziła rozrzutność Worda, a także to, że co prawda dzieli tematycznie znaczniki, ale nie robi wcięć, tak więc treść będzie trochę trudniejsza do zinterpretowania
  • Proponuję jeszcze jeden test. Dowolny list pisany w Outlook Expresie - jeżeli format będzie ustawiony na tekst sformatowany , wtedy można stuknąć na zakładkę źródło i zobaczyć jak wygląda to w HTML. Po teksty sformatowane wysyłane przez e-mail też są w HTML. Przy okazji - odkrywając formę źródłową można dokonać "retuszu" i wprowadzić do tekstu znaczniki, jakich w menu nie ma. Bombowy efekt uzyskać można wpisując przy powitaniu w liście znacznik <marquee>. To zaszokuje potencjalnych odbiorców
Z powyższych punktów wynika, że obrabianie tekstu różnymi narzędziami nie jest wykluczone. Niektóre partie tekstu, czy tabelki wygodniej jest zrobić w Wordzie lub Excellu, a potem wyprowadzić do HTMLu, i wkleić do dokumentu.

Krzysztof Grzegorz Stoler

[spis treści]

Podobała Ci się ta Gazeta ? Powiedz o niej swoim znajomym !