Ten mini-poradnik napisałem z myślą o osobach które prowadzą własny blog bądź sprzedają coś na aukcjach internetowych. Tego typu serwisy często oferują możliwość wykorzystania HTML do formatowania tekstu. Niestety nie wszystkie z nich oferują na swych stronach wygodne narzędzia do tego celu, przez co możliwość stworzenia ładnie wyglądającej aukcji czy wpisu w blogu zostaje zarezerwowana dla grona "wtajemniczonych". Teraz i Ty możesz do nich dołączyć!
Podstawowe informacje
Język HTML korzysta z tzw. znaczników. Każdy z nich rozpoczyna się znakiem mniejszości, a kończy znakiem większości:
<znacznik>
Podany powyżej znacznik jest nazywany także znacznikiem otwierającym. Nazwa bierze się z faktu, że w HTML większość znaczników należy "zamknąć", używając znacznika otwierającego, którego nazwa poprzedzona jest znakiem slash "/"
<znacznik>kawałek tekstu</znacznik>
Znacznik może posiadać także atrybuty, które służą do ustalenia szczegółów jego działania. Stosowane one są tylko dla znacznika otwierającego; znacznik zamykający nie może mieć atrybutów. Jeżeli jest taka potrzeba, można równocześnie podać kilka atrybutów:
<znacznik atrybut="wartość" abc="xyz">tekst</znacznik>
Znaczniki można zagnieżdzać (czyli umieszczać jeden w drugim). Trzeba tylko pamiętać aby zamykać je w odwrotnej kolejności niż były otwierane - zaczynając od tego który był otwarty jako ostatni. Pomyśl sobie o tym jak o stosie talerzy - zawsze możesz zdjąć z niego tylko ten, który położyłeś tam jako ostatni.
<b><u>Dobrze</u></b>
<b><u>Zła kolejność</b></u>
Kilka dodatkowych uwag zanim stworzysz swoją pierwszą stronę WWW:
wielkość znaków nie ma znaczenia - zarówno w nazwach znaczników, jak i w atrybutach;
kilka spacji (odstępów) umieszczonych obok siebie jest traktowanych jako jedna spacja;
znaki nowej linii (entery) są traktowane tak jak spacja - nie przenoszą tekstu do kolejnego wiersza, tylko wstawiają odstęp. Uwaga z poprzedniego punktu też się ich dotyczy.
Pierwsza strona WWW
Poniżej znajduje się kod HTML Twojej Pierwszej Strony WWW. Przepisz go w Notatniku, lub w innym edytorze tekstu który nie używa formatowania tekstu, i zapisz na dysku jako plik z rozszerzeniem .html (np. index.html). Edytor MS Word z pakietu MS Office, lub inny podobny nie nadaje się do tego celu gdyż domyślnie zapisuje w pliku informacje o formatowaniu tekstu i wielu innych rzeczach, które są niepożądane.
<html>
<head>
<title>Moja Pierwsza Strona WWW</title>
</head>
<body>
To jest Moja Pierwsza Strona WWW
</body>
</html>
Krótki komentarz do powyższego kodu:
Znacznik <html> rozpoczyna dokument HTML i zawiera w sobie wszystkie inne znaczniki;
Znacznik <head> zawiera wewnątrz informacje o dokumencie HTML, które zazwyczaj nie są wyświetlane przez przeglądarkę. Jedynym wyjątkiem jest zastosowany tutaj znacznik <title>, który zawiera w sobie tytuł strony (jest on wyświetlany na pasku tytułu przeglądarki);
Znacznik <body> zawiera w sobie "ciało" dokumentu HTML, czyli to co się wyświetla w oknie przeglądarki WWW. To co znajduje się wewnątrz tego znacznika jest to ta część którą będziesz umieszczał(a) w opisie aukcji, lub w swoim blogu.
Paragrafy i łamanie linii
Aby utworzyć paragraf (blok) tekstu, należy użyć znacznika <p>. Znaczników tych nie powinno się zagnieżdżać. Po każdym wstawionym paragrafie przeglądarka wstawi dodatkowy wiersz odstępu. Jeżeli wiersze będą dłuższe niż szerokość okna przeglądarki, zostaną one odpowiednio złamane.
Uwaga: Od tego momentu do każdego fragmentu kodu HTML będę dodawał (w prawej części tabelki) przykład jak on wygląda w przeglądarce WWW.
| <p>Paragraf pierwszy</p> <p>Paragraf drugi</p> |
Paragraf pierwszy Paragraf drugi |
Jeżeli chcesz złamać linię w dowolnym miejscu, ale nie chcesz kończyć bieżącego paragrafu, możesz użyć znacznika <br>. Znacznik ten jest jednym z niewielu które nie wymagają zamykania:
| Pierwsza linia<br> Druga linia |
Pierwsza linia Druga linia |
Nagłówki
W języku HTML można korzystać z sześciu predefiniowanych nagłówków. Wstawia się je za pomocą znaczników <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.
| <h1>Nagłówek h1</h1> <h2>Nagłówek h2</h2> <h3>Nagłówek h3</h3> <h4>Nagłówek h4</h4> <h5>Nagłówek h5</h5> <h6>Nagłówek h6</h6> |
Nagłówek h1 Nagłówek h2 Nagłówek h3 Nagłówek h4 Nagłówek h5 Nagłówek h6 |
Wyrównanie tekstu
Tekst wewnątrz paragrafów (<p>) i nagłówków (od <h1> do <h6>) domyślnie wyrównana jest do lewej strony. Można to zmienić poprzez użycie atrybutu align, i wpisanie jako jego wartości sposobu wyrównania: left (do lewej), center (wycentrowane), right (do prawej).
| <p align=left>Wyrównanie do lewej</p> <p align=center>Wyrównanie do środka</p> <p align=right>Wyrównanie do prawej</p> |
Wyrównanie do lewej Wyrównanie do środka Wyrównanie do prawej |
Pogrubienie, pochylenie, podkreślenie i przekreślenie
Tytułowe formatowanie tekstu można uzyskać poprzez zastosowanie następujących znaczników:
pogrubienie - znacznik <b>;
pochylenie - znacznik <i>;
podkreślenie - znacznik <u>;
przekreślenie - znacznik <s>;
| <b>Tekst pogrubiony</b><br> <i>Tekst pochylony</i><br> <u>Tekst podkreślony</u><br> <s>Tekst przekreślony</s><br> <b><i><u><s>Tekst pogrubiony, pochylony, podkreślony i przekreślony<s><u><i><b> |
Tekst pogrubiony Tekst pochylony Tekst podkreślony Tekst przekreślony Tekst pogrubiony, pochylony, podkreślony i przekreślony |
Zmiana parametrów czcionki
Do zmiany parametrów czcionki służy znacznik <font>. Poszczególne parametry kontroluje się za pomocą podania odpowiednich atrybutów:
kolor - atrybut color. Jako jego wartość należy podać angielską nazwę koloru, lub jego kod (więcej na ten temat znajdziesz na innych stronach internetowych):
| <font color="red">Tekst czerwony</font><br> <font color="green">Tekst zielony</font><br> <font color="blue">Tekst niebieski</font><br> |
Tekst czerwony Tekst zielony Tekst niebieski |
wielkość - atrybut size. W HTML można podać wielkość od 1 (najmniejsza) do 7 (największa). Można podać także wielkość jako "+N" lub "-N", aby odpowiednio powiększyć lub pomniejszyć wielkość czcionki o N. Podane wielkości czcionek nie odnoszą się do żadnej określonej miary wielkości czcionek (np. punkty lub piksele), lecz wynikają ze standardu HTML. Każda przeglądarka przypisuje im sama odpowiednie wielkości "fizyczne".
| <font size="1">Tekst o wielkości 1</font><br> <font size="2">Tekst o wielkości 2</font><br> <font size="3">Tekst o wielkości 3</font><br> <font size="4">Tekst o wielkości 4</font><br> <font size="5">Tekst o wielkości 5</font><br> <font size="6">Tekst o wielkości 6</font><br> <font size="7">Tekst o wielkości 7</font><br> <font size="+2">Tekst o wielkości +2</font><br> <font size="-1">Tekst o wielkości -1</font><br> |
Tekst o wielkości 1 Tekst o wielkości 2 Tekst o wielkości 3 Tekst o wielkości 4 Tekst o wielkości 5 Tekst o wielkości 6 Tekst o wielkości 7 Tekst o wielkości +2 Tekst o wielkości -1 |
nazwa (krój) czcionki - atrybut face:
| <font face="Arial">Czcionka Arial</font><br> <font face="Times New Roman">Czcionka Times New Roman</font><br> <font face="Courier New">Czcionka Courier New</font><br> <font face="Verdana">Czcionka Verdana</font><br> <font face="Tahoma">Czcionka Tahoma</font><br> |
Czcionka Arial Czcionka Times New Roman Czcionka Courier New Czcionka Verdana Czcionka Tahoma |
Listy wypunktowane i numerowane
Listę wypunktowaną tworzy się za pomocą znacznika <ul>. Wewnątrz niego umieszcza się poszczególne punkty, każdy wewnątrz znacznika <li>:
| <ul> <li>Punkt pierwszy</li> <li>Punkt drugi</li> <li>Punkt trzeci</li> </ul> |
Punkt pierwszy Punkt drugi Punkt trzeci |
Listę wypunktowaną tworzy się podobnie jak listę wypunktowaną. Różnica polega jedynie na użyciu znacznika <ol> zamiast <ul>:
| <ol> <li>Punkt pierwszy</li> <li>Punkt drugi</li> <li>Punkt trzeci</li> </ol> |
Punkt pierwszy Punkt drugi Punkt trzeci |
Znaki specjalne
Język HTML definiuje wiele specjalnych kodów (tzw. encji), za pomocą których można uzyskać znaki które mają specjalne znaczenie dla języka HTML, lub trudno byłoby je uzyskać w inny sposób. Każdy z nich rozpoczyna się znakiem ampersand (&), a kończy średnikiem. Oto te najczęściej używane:
< - <
> - >
& - &
" - "
© - ©
- niełamalna (twarda) spacja. Sprawia że dwa wyrazy połączone za jej pomocą zawsze będą w jednym wierszu. Dodatkowo nie jest ona traktowana jako zwykła spacja, czyli po wstawieniu kilku z nich w linii przeglądarka wyświetli wszystkie z nich, a nie tylko jedną. Można to użyć np. do tworzenia wcięć:
| <p> Pierwsza linia<br> Druga linia</p> |
Pierwsza linia |
Podsumowanie
Po przeczytaniu tego artykułu posiadasz już pewną podstawową wiedzę na temat języka HTML, którą możesz zacząć wykorzystywać w praktyce. Jest to jednak zaledwie wprowadzenie i wiele ciekawych, ale bardziej zaawansowanych tematów zostało pominiętych, jak np. wstawianie tabel, odnośników (linków) do innych stron czy obrazków. Pełny Kurs języka HTML znajdziesz w serwisie Poradnik Webmastera.
