Połącz się z nami

Internet Maker

HTML i formatowanie tekstu

Opublikowane

dnia

Praktycznie każda strona internetowa stworzona jest za pomocą języka opisu strony, nazwanego HTML (HyperText Markup Language). HTML daje dość dużą swobodę podczas tworzenia witryn, pozwalając formatować tekst, dodawać tabele, wypunktowania, obrazki, odnośniki do innych witryn i wiele innych elementów. Artykuł ten otwiera kurs tworzenia stron internetowych na poziomie podstawowym.

Szkielet

Stałe elementy strony internetowej

Opis strony w HTML-u składa się z tak zwanych tagów (znaczników). Tag jest swoistą informacją dla przeglądarki, mówiącą w jaki sposób ma zostać zinterpretowana informacja, która się w nim znalazła. Wśród wielu tagów istnieje kilka takich, których obecność jest obowiązkowa w każdej poprawnej witrynie. Tagi te tworzą szkielet strony internetowej:



   Informacje opisujące stronę


   Zawartość wyświetlana w przeglądarce

Jak widać, cała strona zawarta jest w tagu {html}{/html}. Zwróćmy uwagę na to, że wszystkie tagi składają się z dwóch elementów – tagu otwierającego oraz zamykającego. Tak jest w ogromnej większości przypadków, są jednak wyjątki od tej reguły (kilka z tych wyjątków poznamy czytając ten artykuł).

Należy przyjąć, że wszystkie tagi z zawartością (np. jakąś treścią) należy otworzyć, za tagiem otwierającym umieścić zawartość, a następnie zamknąć (tag zamykający ma zawsze taką samą nazwę jak otwierający, poprzedzoną znakiem /).
Należy jeszcze zwrócić uwagę na to, że nie można przeplatać różnych tagów otwierających oraz zamykających. Np. niepoprawny jest taki zapis:






Tagi należy zamykać w kolejności odwrotnej do ich otwierania, czyli gdy pierwszy został otworzony tag {html}{/html}, a po nim {html}{/html}, to zanim zamknie się tag {html}</html>{/html}, należy zamknąć tag {html}{/html}.

Aby być w zgodzie ze standardem ustalonym przez konsorcjum w3c (http://www.w3c.org), przed całym szkieletem strony należy jeszcze określić wersję HTML-a z której będziemy korzystać – w naszym przypadku będzie to XHTML 1.0 Transitional:


Nagłówek strony internetowej

Ustalamy informacje charakteryzujące naszą stronę

Tworząc stronę internetową, należy stworzyć jej nagłówek. Zawartość nagłówka umieszcza się w bloku {html}…{/html}, a zawiera on takie informacje jak tytuł strony, jej opis, czy słowa kluczowe. Informacji tych może być o wiele więcej, jednak te są najistotniejsze, więc do nich się ograniczymy.
Tytuł strony należy umieścić w tagu {html}{/html}:</p> <pre lang="html" line="1" ><title>Tytuł strony

Krótki opis oraz słowa kluczowe (oba te elementy wykorzystywane są przez przeglądarkę internetową) umieszcza się w tagu {html}{/html}:

 

Ważne, aby nie przesadzać z długością opisu strony. Maksymalnie powinno się tu umieszczać kilkadziesiąt wyrazów.
Słowa kluczowe są to wyrazy w jakiś sposób związane z tematyką strony. Umieszcza się je rozdzielając kolejne wyrazy spacjami.

Istnieje jeszcze jedna bardzo ważna wersja tagu meta, informująca przeglądarkę o tym, że będziemy korzystali z polskich znaków (takich jak ż czy ś). W świecie komputerów istnieje wiele sposobów na zapisanie takich znaków, przy czym jeden został uznany za standard obowiązujący w internecie. Standardem tym jest ISO-8859-2:

Zauważmy, że {html}{/html} jest jednym z tych tagów, które nie mają swojej wersji zamykającej. Dlatego, aby być w zgodzie z wymaganiami stawianymi przez standard HTML, należy na ich końcu umieścić znak /.

Dzięki temu przeglądarka nie będzie szukała w dokumencie tagu {html}{/html} (co prawda większość przeglądarek poprawnie zinterpretuje informację zawartą w tagach meta, jak i innych nie wymagających tagów zamykających w przypadku pominięcia znaku /, jednak pominięcie go stanowi naruszenie standardu oraz może spowodować problemy w nowszych wersjach przeglądarek).

Rys. 1 pokazuje szkielet strony internetowej oraz opis poszczególnych jego fragmentów.

ezHTML

Edytor do tworzenia stron internetowych

Niestety żaden standardowy edytor dostępny w systemie Windows nie potrafi zapisać dokumentu w wymagany sposób, czyli z wykorzystaniem ISO-8859-2. Darmowy program Edytor Znaczników HTML (ezHTML) nadrabia braki Windows, a jednocześnie zawiera kilka funkcji przyspieszających tworzenie prostych witryn w języku HTML.

W ramce \”Polskie znaki w ezHTML\” opisano, jak skonfigurować program, aby zapisywał dokumenty w standardzie ISO-8859-2.

Korzystając z ezHTML możemy za pomocą kilku kliknięć utworzyć szkielet strony (wymaga on modyfikacji elementu DOCTYPE, który odnosi się do HTML-a 4.0, podczas gdy my zajmujemy się nowszą jego wersją XHTML 1.0 Transitional, oraz dodania znaku / na końcu tagów meta) – patrz rys. 2.

Za pomocą myszki możemy sformatować tekst – zaznaczamy wybrany fragment tekstu, a następnie wybieramy odpowiednią opcję z paska narzędzi, np. na zakładce Format klikamy literkę B, co powoduje objęcie zaznaczonego tekstu tagiem {html}{/html}. Rys. 3 przedstawia interesujące nas opcje dostępne na pasku narzędzi.

Mimo że będę pokazywał jak dany efekt uzyskać w edytorze ezHTML, nie jesteśmy zmuszeni do jego używania. Jeśli ezHTML nam nie odpowiada, możemy skorzystać z innego edytora (patrz ramka \”Inne edytory HTML\”).

Formatujemy tekst…

…czyli pogrubiamy, pochylamy, podkreślamy…

Gdy mamy już utworzony szkielet strony, możemy zająć się wypełnianiem jej treścią. Między tagi {html}{/html} oraz {html}{/html} możemy wstawić dowolny tekst, a przeglądarka wyświetli go w swoim oknie. Jednak tak umieszczony tekst nie będzie zachęcający, bowiem przeglądarka internetowa ignoruje nawet typowe znaki nowej linii (czyli wstawione w tekście \”entery\”).

Powoduje to wyświetlenie całego dokumentu w jednej linii (lub kilku, łamanych jednak wówczas, gdy reszta nie zmieści się już w linii bieżącej).

Aby nakazać przeglądarce wstawienie znaku nowej linii oraz kontynuowanie wypisywania tekstu już w linii kolejnej, należy skorzystać z tagu {html}
{/html}. Tag ten, jak również {html}{/html}, jest tagiem nie wymagającym używania zamykana (nie stosujemy tagu zamykającego {html}
{/html}), tak więc kończy się on znakiem /.
HTML pozwala sformatować tekst na wiele sposobów. Najczęściej wykorzystuje się:

Polskie znaki w ezHTML

W internecie stosujemy polskie znaki w standardzie ISO-8859-2. By skonfigurować edytor do pracy w tym standardzie wybieramy z menu Konfiguracja opcję Ustawienia (przycisk F8), która otworzy nam okno konfiguracyjne. Na drzewie z lewej strony okna wybieramy Edytor / Inne, a następnie z prawej strony zaznaczamy przycisk opcji ISO-8859-2. Teraz możemy kliknąć guzik Gotowe!

  • pogrubienie – {html}{/html}tekst pogrubiany{html}{/html},
  • pochylenie – {html}{/html}tekst pochylony{html}{/html},
  • podkreślenie – {html}{/html}tekst podkreślony{html}{/html},
  • przekreślenie – {html}{/html}tekst przekreślony{html}{/html}.

Inne edytory HTML

ezHTML jest dostępny na stronie http://ezhtml.bydnet.com.pl. Oprócz niego istnieje wiele innych programów wartych uwagi, darmowych i komercyjnych, m.in.:

A oto inne, rzadziej stosowane style (w celu skrócenia zapisu, podaję tylko nazwę tagu otwierającego, pamiętajmy jednak, że każdy z tych tagów ma postać {html}{/html} tekst, który ma zostać zmodyfikowany {html}{/html}):

  • {html}{/html} - wypisanie tekstu czcionką o stałej szerokości,
  • {html}{/html} - wypisanie tekstu czcionką większą od pozostałego tekstu,
  • {html}{/html} - wypisanie tekstu czcionką mniejszą od pozostałego tekstu,
  • {html}{/html} - wypisanie tekstu w postaci indeksu dolnego,
  • {html}{/html} - wypisanie tekstu w postaci indeksu górnego,
  • {html}{/html} - informuje przeglądarkę, że tekst zawarty między nim ma zostać w jakiś sposób wyróżniony (najczęściej pochylony),
  • {html}{/html} - wymusza pogrubienie tekstu,
  • {html}{/html} - informuje przeglądarkę, że tekst zawarty między nim jest fragmentem kodu np. programu) i powinien być wyświetlony czcionką o stałej szerokości znaku,
  • {html}{/html} - znacznikiem tym obejmuje się teksty przykładowe (np. ilustrujące przykładowy wynik działania jakiegoś programu, przykładowe rozwiązanie jakiegoś problemu itd.); tekst taki jest wyświetlany jak w przypadku znacznika {html}{/html},
  • {html}{/html} - przykładowy tekst komendy wpisanej przez użytkownika z klawiatury (może zostać wykorzystany np. w instrukcji obsługi programu),
  • {html}{/html} - nazwa zmiennej bądź element, który powinien zostać zastąpiony przez użytkownika jakąś wartością,
  • {html}{/html} - nazwa definicji bądź cała definicja,
  • {html}{/html} - krótkie cytaty lub autorzy/źródło cytatów,
  • {html}{/html} - skrót słowa,
  • {html}{/html} - słowo utworzone z pierwszych liter kilku słów.

Znaczniki te można podzielić na dwie grupy: logiczną, która określa logiczne znaczenie tekstu w nich zawartego, oraz fizyczne, formatujące tekst. Do znaczników fizycznych należą: {html}{/html}, {html}{/html}, {html}{/html}, {html}{/html}, {html}{/html}, {html}{/html}, {html}{/html}, {html}{/html} oraz {html}{/html}. Wszystkie pozostałe znaczniki należą do grupy znaczników logicznych.

Zgodnie z ewolucją języka HTML, należy wszędzie, gdzie to możliwe stosować znaczniki logiczne. W najnowszej wersji HTML-a (XHTML-u w wersji Strict, którym się tu nie zajmujemy) odchodzi się już zupełnie od stosowania znaczników fizycznych, takich jak {html}{/html}. Rys. 4 pokazuje zachowanie się poszczególnych znaczników w przeglądarce Opera.

Pułapki

Miejsca, na które warto zwrócić uwagę

Jednym z miejsc sprawiających problemy, jest używanie spacji. HTML ignoruje tradycyjne znaki nowej linii (przypominam, że aby wstawić znak nowej linii, należy skorzystać ze znacznika {html}
{/html}), jak również powtarzające się spacje.

Inaczej mówiąc, jeśli w tekście wystąpi kilka spacji pod rząd, przeglądarka potraktuje je tak, jak by to była tylko jedna spacja. Jedynym sposobem na umieszczenie kilku odstępów, jest zastosowanie zamiast nich znaku specjalnego {html} {/html}. W HTML-u jest sporo znaków specjalnych. Każdy z nich rozpoczyna się znakiem {html}&{/html}, a kończy średnikiem.

Innym problemem jest próba wyświetlenia znaku < bądź >. Ponieważ jest on wykorzystywany przez znaczniki, nie zawsze przeglądarka jest w stanie \"domyślić się\", czy występujący w tekście znak < oznacza rozpoczęcie nowego taga, czy też ma być wyświetlony jak każdy inny znak.

Zatem zawsze gdy chcemy wyświetlić znak <, należy użyć znaku specjalnego {html}<{/html}, natomiast w przypadku znaku > - znaku {html}>{/html}. Natomiast znak {html}&{/html} wyświetla po prostu znak &.
Działanie znaków specjalnych pokazuje rys. 5.

Uwaga: wszystkie znaczniki należy pisać małymi literami.

Gdy powstanie już pierwsza strona, aby obejrzeć wyniki w przeglądarce, trzeba zapisać ją na dysku (nadając jej rozszerzenie .html - EzHTML sam o to zadba). Następnie wystarczy odnaleźć zapisany plik na dysku (korzystając np. z Exploratora Windows) i kliknąć go dwukrotnie. Spowoduje to pojawienie się utworzonej strony w przeglądarce internetowej.

Kontynuuj czytanie
Kliknij, by skomentować

Zostaw komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Internet Maker

Pozycjonowanie strony internetowej a reklamy w Internecie – czym się różnią?

Nie masz cierpliwości do pozycjonowania? Skorzystaj z pomocy profesjonalistów!

Opublikowane

dnia

przez

Chcesz osiągnąć sukces w e-biznesie i zwiększyć widoczność swojej strony w sieci? Nie pozostaje Ci nic innego jak zająć się promocją witryny. Zacznij od inwestycji w pozycjonowanie, czyli zgodnej ze wskazówkami Google optymalizacji strony pod wyszukiwarkę internetową. Pamiętaj, że największa ilość wejść pochodzi właśnie z wyszukiwarek, dlatego zajmowanie wysokiej pozycji w rankingu Google szybko przełoży się na lepsze statystyki.

(więcej…)

Kontynuuj czytanie

Internet Maker

Jak szybko i łatwo stworzyć stronę mobilną

Opublikowane

dnia

W dzisiejszych czasach coraz bardziej popularne staje się przeglądanie stron internetowych na urządzeniach mobilnych. Ba! Samo surfowanie po sieci to w sumie już przeszłość – obecnie zakupy czy płatności mobilne to chleb powszedni dla polskich internautów. 

(więcej…)

Kontynuuj czytanie

Internet Maker

Strona na WordPressie? Grunt to dobry hosting

Opublikowane

dnia

WordPress jest powszechnie uważany za najlepszy system zarządzania treścią zarówno dla prostych blogów i stron, jak i większych serwisów internetowych oraz sklepów. Szacuje się, że już 23% witryn na świecie korzysta z WordPressa, a wśród nich takie marki jak BBC,  MTV czy Sony.

(więcej…)

Kontynuuj czytanie

Internet Maker

Jak zabezpieczyć swoje zdjęcia w chmurze

Opublikowane

dnia

Niedawny wyciek nagich zdjęć znanych osobistości wznowił dyskusje na temat bezpieczeństwa naszych prywatnych danych. Jako że część fotografii została wykradziona poprzez iCloud, prezentujemy dziś jak zabezpieczyć swoje dane w chmurze. (więcej…)

Kontynuuj czytanie

Internet Maker

Jak usunąć historię swojej aktywności z Facebooka?

Opublikowane

dnia

Usunięcie swojej aktywności z Facebooka nie jest takie proste, jakby się mogło wydawać. Portal społecznościowy daje możliwość zachowania kopii swoich postów oraz zamknięcia całego konta, jednak co w przypadku gdy chcemy usunąć tylko poszczególne wpisy? (więcej…)

Kontynuuj czytanie
Reklama

Popularne