Centrowanie większych fragmentów dokumentu na stronie

Do centrowania (czyli umieszczenia w środku okna przeglądarki) jakiegoś fragmentu strony (tekstu, obrazka) możesz użyć znacznika <center>. Aby zakończyć centrowanie, należy użyć odpowiedniego znacznika zamykającego – czyli znacznika </center>. Zawartość strony znajdująca się pomiędzy tymi znacznikami zostanie umieszczona na środku strony, np. <centerxhl>Pan Tadeusz</hl></center>
Innym rozwiązaniem jest ujęcie danego fragmentu strony w tzw. blok za pomocą znacznika <div> i wyrównanie go do środka (bądź do lewej lub prawej) za pomocą atrybutu align tego znacznika. Znacznik bloku <div> jest zamykany znacznikiem </div>.
Linia rozdzielająca – znacznik <hr> Za pomocą poziomej linii tworzonej przez znacznik <hr> możesz oddzielać od siebie poszczególne fragmenty strony. Znacznik <hr> nie ma znacznika zamykającego. Jego wybrane atrybuty znacznika <hr> przedstawia tabela 18.3. Formatowanie tekstu Język HTML udostępnia szereg znaczników, za pomocą których można odpowiednio formatować tekst dokumentu HTML. Chodzi tutaj nie tylko krój czcionki, jej kolor, rozmiar, ale także tworzenie indeksów dolnych górnych. Wybrane znaczniki umożliwiające formatowanie tekstu przedstawia tabela 18.4.

Grafika jako tło dokumentu

Tło dokumentu może zostać zdefiniowane także przy użyciu pliku graficznego. Plik graficzny z tłem musi mieć jeden z uniwersalnych formatów graficznych: JPEG, GIF, PNG czy BMP. Przypisanie tła z pliku do strony umożliwia atrybut background. Za pomocą tego atrybutu określasz ścieżkę dostępu do pliku z grafiką (przeglądarka musi wiedzieć, skąd ma wczytać ten plik). Pamiętaj jednak, że jeśli plik grafiki znajduje się w tym samym folderze co strona, z poziomu której jest wczytywany, to wystarczy podać tylko nazwę pliku, np.
<body background=”tlo. gif”> Jeśli plik znajduje się w innym folderze, np. w folderze o nazwie grafika, i folder ten jest podfolderem folderu, w którym znajduje się strona, to musisz podać ścieżkę dostępu do tego pliku: <body background=”graf ika/tlo . gif”>. Gdyby plik znajdowałby się o jeden katalog wyżej, ścieżkę dostępu do niego określiłbyś tak: <body background=”../tlo. gif”>. Pamiętaj, że w niektórych systemach (np. Linux, Unix) dyski nie są oznaczane literami, tak jak ma to miejsce w Windows, dlatego przedstawiając ścieżki dostępu do plików i folderów witryny, używaj ścieżek względnych, bez podawania oznaczenia dysku. Ponadto w ścieżkach dostępu używaj wyłącznie prawego ukośnika /, ponieważ jest on poprawnie interpretowany przez większość systemów operacyjnych, w tym również Windows. Pamiętaj także, że niektóre systemy, w przeciwieństwie do Windows, rozróżniają duże i małe litery w nazwach folderów, plików czy rozszerzeń plików. W takim systemie pliki o nazwach Owoc.jpg, owoc.jpg czy owoc.JPG to zupełnie różne pliki. Dlatego tworząc nazwy plików i folderów używaj wyłącznie małych lub wyłącznie dużych liter.

Tło strony i kolory w języku HTML

Deklarując znacznikiem <body> sekcję zawartości strony, możesz za pomocą atrybutów tego znacznika określić charakterystyczne cechy całego dokumentu. Używając atrybutu bgcolor określisz np. kolor tła strony. W języku HTML barwę można wyznaczyć za pomocą literału, czyli nazwy (np. kolor czerwony to Red, niebieski to blue itd.): <body bgcolor=”silver”> lub za pomocą kodu RGB, w którym kolor jest tworzony z użyciem trzech składowych: czerwonej (Red), zielonej (Green) i niebieskiej (Blue). Kod koloru przedstawia się za pomocą trzech liczb. Każda składowa może przyjmować wartość od 0 do 255 i jest ona wyrażana za pomocą dwuznakowej liczby szesnastkowej. Kod tworzony według schematu RRGGFF poprzedza znak #. Pierwsza para znaków w kodzie to liczba szesnastkowa określająca intensywność koloru czerwonego, druga para określa kolor zielony, a trzecia niebieski. Np. srebrną barwę tła określa kod <body bgcolor=”#cOcOcO”>. Nazwy literałów wybranych kolorów i odpowiadający im kod RGB przedstawia tabela 18.2. Zmieniając wartości każdej z liczb, możesz wykorzystywać pełną gamę barw (czyli 16,7 miliona kolorów).

Nagłówki w tekście dokumentu

Za definiowanie nagłówków w tekście dokumentu HTML (nie myl ich z sekcją nagłówka strony) odpowiada znacznik nagłówka <h>. Zadaniem nagłówków jest wyróżnienie tekstu – przy ich użyciu możesz tworzyć w swoim dokumencie np. tytuły punktów i podpunktów. Rozróżnia się sześć nagłówków, numerowanych od największych do najmniejszych: <hl>Nagłówek pierwszego poziomu </hl> <h2>Nagłówek drugiego poziomu </h2> <h6>Nagłówek szóstego poziomu </h6> Na przykład, aby umieścić na stronie nagłówek drugiego poziomu wyświetlający tekst Nasz dom, wystarczy wpisać kod: <h2>Nasz dom</h2> Ponieważ treść nagłówka formatowanego przez znacznik <h> ma być widoczna w oknie przeglądarki, jak łatwo się domyślić, kod ten zostanie umieszczony wewnątrz sekcji body dokumentu. Zawartość nagłówków można wyrównywać względem krawędzi okna przeglądarki lub względem jego środka. Podobnie jak w przypadku znacznika akapitu, atrybutem umożliwiającym wyrównywanie zawartości nagłówka jest atrybut align. Może on przyjąć wartość lef t, center, right, W dokumencie z ćwiczenia 18.5. utwórz przed każdym akapitem nagłówek trzeciego poziomu, tak jak to pokazuje rysunek 18.7,.

Podział wierszy w dokumencie HTML i akapity

Jak łatwo zauważyć, długość linii tekstu wyznacza szerokość okna przeglądarki internetowej. Tekst jest w większym lub mniejszym stopniu zawijany do następnej linii. Jeśli jednak z jakichś powodów w wielowierszowym tekście na stronie WWW chcesz wymusić łamanie wiersza, to w miejscu, w którym wiersz ma zostać złamany, wstawisz znacznik <br>. Jest to znacznik końca wiersza (złamania linii). Znacznik <br> nie ma znacznika zamykającego. W dokumencie z ćwiczenia 18.3. za pomocą znacznika <br> wymuś łamanie kolejnych wierszy tekstu. Jeśli strona ma zawierać tekst podzielony na akapity, jego podziału dokonasz za pomocą znacznika <p>. Znacznik otwierający umieszczany jest na początku akapitu. Cała następująca po nim zawartość strony zostanie potraktowana przez przeglądarkę jako zawartość tego akapitu. Koniec akapitu wyodrębnia znacznik zamykający </p>. Tekst akapitu może zostać wyrównany do któregoś z marginesów, wyśrodkowany na stronie lub wyjustowany. Umożliwia to atrybut align znacznika <p>. Np. poniższy kod wyznacza dwa akapity, przy czym pierwszy z nich jest wyrównywany względem lewego marginesu okna przeglądarki, zaś drugi jest justowany.

Tekst w dokumencie HTML

Jak przeglądarka interpretuje tekst? Tekst na stronie WWW nie wymaga żadnego specjalnego znacznika – umieszczony pomiędzy znacznikiem <body> i </body> zostanie po prostu wyświetlony w oknie przeglądarki. Należy jednak mieć świadomość, że przeglądarka wyświetla tekst w inny sposób, niż ma to miejsce np. w edytorze Word. Przeglądarka nie potrafi odczytać znaku końca linii wstawionego za pomocą klawisza <Shift+Enter> czy znaku końca akapitu wstawionego za pomocą klawisza <Enter>, i wyświetla tekst jako jeden ciąg znaków. Przeglądarka także inaczej interpretuje spacje wstawiane pomiędzy znakami czy wyrazami w tekście. Poprawnie odczytywane są tylko pojedyncze spacje pomiędzy znakami (wyrazami). Otwórz plik index.html z ćwiczenia 18.2. w trybie edycji kodu. Utwórz w nim sekcję <body> i wpisz w niej poniższy tekst, pamiętając, aby na końcu każdego wiersza tekstu użyć klawisza <Enter>. Zapisz wprowadzone zmiany w dokumencie i sprawdź, jak zawartość pliku została zinterpretowana przez przeglądarkę. Zachowaj dokument.

Warto wiedzieć

Różne programy edytorów, w których tworzysz kod dokumentów HTML, w odmienny sposób kodują polskie znaki diakrytyczne. Aby przeglądarki użytkowników w sieci, którzy będą przeglądali twoją stronę, mogły w poprawny sposób wyświetlać te znaki, zanim opublikujesz stronę w Internecie, musisz przekonwertować ją do uniwersalnego standardu kodowania znaków o nazwie ISO-8859-2. Umożliwi ci to wiele darmowych programów do konwersji dokumentów, które znajdziesz m.in. w Internecie. Konwersję strony możesz przeprowadzić na koniec, już po jej utworzeniu. Oprócz znaczników <meta> w nagłówku strony możesz także umieścić tytuł strony. Umożliwią ci to znaczniki <title>i</title>, np. <title>Komputer bez tajemnic</title>. Podany w ten sposób tytuł strony będzie się pojawiał na pasku tytułowym okna twojej przeglądarki zawsze, gdy będzie ona wyświetlać tę stronę. Przykład sekcji nagłówka <head> dokumentu HTML wraz z kilkoma znacznikami <meta> oraz znacznikiem <title> pokazano na rysunku 18.3. Korzystając z dowolnego edytora HTML utwórz nowy dokument HTML zawierający znaczniki <htmi> i </htmi>. Następnie zadeklaruj w sekcji jego nagłówka podstawowe informacje o dokumencie, np. o jego tytule, autorze, standardzie kodowania itp. lub informacje o stronie. Dokument zapisz jako index.html. Wykorzystasz go także w ćwiczeniu 18.3.

Tworzenie nowego dokumentu HTML

Jeśli dokument HTML chcesz opublikować w sieci, to oprócz deklaracji, że jest to dokument HTML (znacznik <html>), powinieneś w nim umieścić także deklarację sekcji nagłówka (znacznik <head>), a w niej podstawowe informacje o dokumencie. Deklaracja nowego dokumentu HTML Jak już zostało wspomniane, pierwszym znacznikiem w dokumencie HTML jest znacznik <html>, ostatnim znacznik </html>. Przeglądając kod dokumentów w sieci WWW, zauważysz, że wiele z nich rozpoczyna się jednak od specyficznego komentarza zawierającego informację o użytej w dokumencie wersji języka HTML. Pomimo że komentarz ten nie jest wymagany, powszechnie się go stosuje. Zwykle przyjmuje formę: Jakie informacje umieszczone są w sekcji nagłówka strony? Wiesz już, że sekcję nagłówka strony WWW wyodrębnia znacznik <head> oraz że zawiera ona m.in. tytuł strony, dane o jej autorze itp. informacje. Podstawowym znacznikiem sekcji nagłówka jest <meta>. To nieobowiązkowy, lecz zalecany znacznik, za pomocą którego można deklarować wiele właściwości stron WWW. Możesz deklarować m.in.: informacje o adresie e-mail autora strony, np.  informację, które ze słów związanych ze stroną mają ułatwić odszukanie strony w sieci przez wyszukiwarki. Są to tzw. słowa kluczowe. Podając je oddzielasz je przecinkami, np. <meta name=”keywords” content=”komputer osobisty, PC, IBM”> informację o sposobie kodowania strony (znaków diakrytycznych w jej tekście). Istnieją różne standardy kodowania dla różnych języków.

Definicja

Edytor stron WWW to program umożliwiający projektowanie i tworzenie stron WWW. Edytor zwykle pozwala edytować „czysty kod” w trybie tekstowym i wprowadzać do niego znaczniki języka HTML, a także budować strony w sposób wizualny, wspomagając pewne operacje przy tworzeniu stron (wstawianie tabel, grafiki itp.). Niektóre edytory pozwalają na bezpośrednią edycję kodu stron w trybie tekstowym, a także wspomagają tworzenie strony, oferując generowanie wielu jej elementów. W programach takich, zamiast wpisywać samemu znaczniki HTML, za pomocą odpowiednich poleceń wstawiasz grafikę, tabele, a program sam edytuje kod w postaci znaczników HTML. Przykładem tej grupy edytorów jest np. popularny Pajączek (rysunek 18.4.). Inne edytory umożliwiają „składanie” strony w trybie graficznym. Są one nazywane graficznymi edytorami stron WWW lub edytorami WYSIWYG (What You See Is What You Get – otrzymujesz to, co widzisz). Dokument jest tworzony w podobny sposób jak dokument z tekstem i grafiką np. w edytorze tekstu Word. Cały kod HTML dokumentu jest generowany przez edytor graficzny. Przykładem programów tego typu może być Macromedia Dreamwaver czy Microsoft FrontPage. Proste, graficzne edytory stron WWW to także nowo czesne edytory tekstowe, np. Word czy WordPerfect. W tym przypadku dokument jest tworzony jako zwykły dokument, jednak przy zapisywaniu zostaje skonwertowany do formatu HTML.

Znaczniki HTML

Wszystkie znaczniki HTML umieszcza się w nawiasach kątowych: < i > np. <html>, <body>. Zdecydowana większość znaczników występuje parami. Pierwszy jest tzw. znacznikiem otwierającym, drugi – znacznikiem zamykającym. Dany znacznik otwierający, a także odpowiadający mu znacznik zamykający mają tę samą nazwę, dlatego aby je odróżnić, nazwę znacznika zamykającego zawsze poprzedza się symbolem ukośnika /. Np. znacznik otwierający dokument HTML ma postać <html>, odpowiadający mu znacznik końca dokumentu postać </html>. Tworząc kod HTML w swoich dokumentach możesz zapisywać znaczniki dużymi lub małymi literami – nie ma to wpływu na jego działanie. Przeglądarka internetowa w każdym przypadku zinterpretuje znacznik w ten sam sposób.
Warto wiedzieć Istnieją także znaczniki, które nie wymagają stosowania odpowiadających im znaczników zamykających, np. <br> będący znacznikiem złamania linii (końca wiersza) czy <hr> będący znacznikiem linii poziomej (tzw. linii rozdzielającej). Struktura strony WWW Język HTML zawiera wiele różnorakich znaczników umożliwiających definiowanie wyglądu i układu strony WWW. Niektóre spośród nich są wymagane na każdej stronie WWW, inne mogą być stosowane opcjonalnie. Jednak istnieją znaczniki, które występują w strukturze większości stron. Są to znaczniki: <html>, <head> oraz <body> i odpowiadające im odpowiednio znaczniki zamykające: </html>, </head> </body>. Wyznaczają one trzy podstawowe sekcje strony WWW: sekcję deklaracji strony wyodrębnianą przez znacznik <html>. Standardowo <html> jest pierwszym znacznikiem, który zostaje umieszczony w dokumencie. Przed nim mogą (ale nie muszą) zostać użyte np. znaczniki wyznaczające odpowiednio początek < ! — i koniec komentarza .