Rozdział 4.
Zaczynamy od podstaw
W poprzednich rozdziałach dowiedziałeś się, jak za pomocą World Wide Web
zaplanować i zorganizować swoje witryny internetowe oraz dlaczego HTML jest
niezbędny do tworzenia stron WWW. Utworzyłeś nawet swoją pierwszą stronę. Dziś
dowiesz się więcej o każdym z podstawowych znaczników HTML oraz rozpoczniesz
pisanie stron WWW zawierających nagłówki, paragrafy i różne rodzaje list. Rozdział
ten poświęcony jest następującym tematom i znacznikom HTML, wyliczonym poniżej:
znaczniki ogólnej struktury strony: , i ,
znaczniki tytułów, nagłówków i paragrafów:
, <H1>& <H6> oraz <P>, <br> znaczniki komentarzy: <!--& -->, <br> znaczniki list: <OL>, <UL>, <LI>, <DT> oraz <DD>. <br>Struktura HTML-a <br>W HTML-u zdefiniowane są trzy znaczniki, które opisują ogólną strukturę strony oraz <br>dostarczają podstawowych informacji nagłówkowych. Znaczniki te, <HTML>, <HEAD> <br>oraz <BODY>, identyfikują stronę WWW w przeglądarkach lub w innych narzędziach <br>HTML. Mogą także zawierać najistotniejsze informacje o stronie, na przykład, tytuł lub <br>nazwisko autora. Znaczniki, opisujące strukturę strony, nie mają wpływu na jej wygląd w <br>przeglądarce, istnieją tylko po to, aby pomóc przeglądarkom w przetwarzaniu plików <br>HTML. <br>Zgodnie ze ścisłą definicją HTML-a, znaczniki te są opcjonalne, znaczy to, że ich brak <br>nie uniemożliwia odczytania strony przez przeglądarkę. Znaczniki te są jednak <br>wymagane w XHTML-u 1.0. Nie jest również wykluczone, że pojawią się narzędzia, <br>które będą ich wymagały. Już teraz powinieneś wyrobić sobie nawyk stosowania <br>znaczników określających strukturę strony. <br>Choć użycie znaczników struktury strony nie jest konieczne, proponowana specyfikacja <br>XHTML 1.0 wymaga jednego dodatkowego elementu w kodzie strony WWW. Pierwsza linia <br>każdej strony musi zawierać identyfikator DOCTYPE, określający wersję XHTML 1.0, z którą <br>Twoja strona jest zgodna oraz definicję rodzaju dokumentu (DTD Document Type <br>Definition), która określa jego specyfikację. Następnie wprowadzasz znaczniki <HTML>, <br> 66 Część 1. Informacje wstępne <br><HEAD> i <BODY>. <br>W poniższym przykładzie, przed znacznikami struktury strony występuje określenie typu <br>dokumentu XHTML 1.0 Strict: <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br> "http://www.w3.org/TR/xhtml1/DTD/strict.dtd"> <br><html> <br><head> <br><title>Tytuł strony ...treść Twojej strony...
W specyfikacji XHTML 1.0 określone zostały trzy rodzaje dokumentów HTML 4.0: Strict,
Transitional oraz Frameset. Więcej informacji o znaczniku DOCTYPE znajdziesz w rozdziale
10. XHTML i arkusze stylów , natomiast informacje o dokumentach Strict, Transitional i
Frameset odnajdziesz w rozdziale 24. Projektowanie witryn do praktycznych
zastosowań .
Znacznik
Pierwszym znacznikiem struktury, znajdującym się na każdej stronie jest .
Mówi on o tym, że zawartość odczytywanego właśnie pliku to kod, napisany
w HTML-u. W proponowanej specyfikacji XHTML 1.0 znacznik powinien
zostać poprzedzony identyfikatorem DOCTYPE (o którym wspominałam w powyższej
notatce), jak pokazałam w poniższym przykładzie.
Cała zawartość pliku, czyli treść i znaczniki powinny znajdować się pomiędzy
początkowym i końcowym znacznikiem , tak jak w poniższym przykładzie:
"http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
...twoja strona....
Znacznik
Para znaczników & wyznacza nagłówek strony. W obrębie nagłówka
znajduje się tylko kilka innych znaczników (najczęściej tytuł strony, opisany w dalszej
części). W żadnym wypadku nie należy umieszczać w tym miejscu treści strony.
Oto typowy przykład poprawnego użycia znacznika (o znaczniku
<br>opowiem pózniej): <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <br> "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <br><html><head><title>To jest Tytuł ....
Rozdział 4. Zaczynamy od podstaw 67
Znacznik
Pozostała część strony (w poniższym przykładzie przedstawiona jako .... treść strony
.... ), znajduje się pomiędzy początkowym i końcowym znacznikiem . Cały
kod, łącznie ze znacznikami i , przedstawia się następująco:
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
To jest Tytuł. Dalej znajdziesz więcej wyjaśnień .... treść strony ....
W powyższym przykładzie widać wyraznie, że znaczniki HTML są w sobie nawzajem
zagnieżdżone. Obydwa znaczniki i znajdują się pomiędzy początko-
wym i końcowym znacznikiem , podobnie sprawa ma się w przypadku znaczni-
ków . Wszystkie znaczniki HTML-a działają właśnie w ten sposób formatują
zagnieżdżone fragmenty tekstu. Musisz bardzo uważać, aby nie mylić kolejności
znaczników, jak w poniższym, błędnym przykładzie:
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
Za każdym razem, kiedy zamykasz znacznik, musisz upewnić się, że zamykasz ostatni, któ-
ry został otwarty (więcej o zamykaniu znaczników dowiesz się w dalszej części tekstu).
W HTML 4.0 i wcześniejszych wersjach używanie niektórych znaczników zamykających nie
jest konieczne. Użycie niektórych znaczników zamykających jest wręcz zabronione. W
proponowanej specyfikacji XHTML 1.0 wszystkie znaczniki muszą być zamykane. Jak, gdzie
i dlaczego używać znaczników zamykających, bardziej szczegółowo omówimy w rozdziale
10. XHTML i arkusze stylów . Jednakże już teraz przykłady demonstrowane w niniejszej
książce pokazują właściwy sposób zamykania znaczników, tak aby starsze przeglądarki
interpretowały poprawnie znaczniki zamykające XHTML 1.0.
Tytuł
Każda strona, napisana w HTML-u powinna posiadać tytuł. Z tego tytułu korzystają póz-
niej przeglądarki i programy katalogujące strony WWW, umieszczając je na tworzonych
przez siebie listach ulubionych stron. Do nadawania tytułu służy znacznik
. <br>Tytuł określa temat, o którym traktuje strona WWW i on właśnie wyróżnia stronę <br>na wszelkiego rodzaju listach czy wykazach ostatnio odwiedzanych miejsc. <br>Poza tym, w wielu przeglądarkach graficznych, tytuł pojawia się na pasku tytułowym okna <br>programu (m.in. Netscape i Microsoft Internet Explorer). <br> 68 Część 1. Informacje wstępne <br>Znacznik <TITLE> znajduje się zawsze w obrębie nagłówka strony (znaczniki <HEAD>) <br>i jego zadaniem jest skrótowe opisanie jej treści: <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <br> "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <br><HTML> <br><HEAD> <br><TITLE>Lew, Wiedzma i Garderoba .... treść strony ....
Strona może posiadać tylko jeden tytuł, który z kolei może zawierać tylko tekst, żadne
inne znaczniki nie są dozwolone.
Wybierając tytuł, kieruj się tym, aby był on krótki oraz by możliwie jak najdokładniej opi-
sywał treść strony. Musisz mieć na uwadze takich czytelników, którzy trafią na Twoją
stronę zupełnie przypadkowo, korzystając z połączenia losowego lub czyjegoś spisu ulu-
bionych stron. Tacy ludzie, którzy nie mają pojęcia, gdzie właściwie się znalezli, powinni
mieć możliwość natychmiastowego spostrzeżenia, o czym właściwie traktuje strona, która
znalazła się przed ich oczami. Krótki, treściwy tytuł powinien bardzo im w tym pomóc.
Z racji tego, że niektóre przeglądarki umieszczają tytuł strony na pasku tytułowym okna
programu, jego długość może być ograniczona (tekst pomiędzy znacznikami
<br>może mieć dowolną długość, ale może zostać obcięty przez przeglądarkę przy wyświetla-<br>niu). Poniżej przedstawiam kilka przykładów poprawnych tytułów: <br><TITLE>Rośliny trujące Ameryki Północnej Edycja obrazu: Przewodnik Turystyczna oferta odwiedzin cmentarzy, lato 1998 Instalacja oprogramowania: Otwieranie płyty CD Strona domowa Laury Lemay A oto kilka tytułów, które są raczej niefortunne:
Część druga Przykład Zainteresowania Niguela Franklina Niezapomniane chwile Drugiego Walnego Zebrania Czwartej <br>Konferencji Komitetu Ochrony Angielskich Róż, dzień czwarty, po <br>obiedzie Na rysunku 4.1 przedstawiony został sposób, w jaki tytuł strony jest wyświetlany w prze-
glądarce Internet Explorer.
Rośliny trujące Ameryki Północnej Rysunek 4.1.
Wyniki wyświetlone
w przeglądarce Internet
Explorer
Rozdział 4. Zaczynamy od podstaw 69
Nagłówki
Nagłówki służą do podziału tekstu na części, tak jak książka dzielona jest na rozdziały
(słowo Nagłówki napisane powyżej wytłuszczonym drukiem to właśnie nagłówek).
W HTML-u zdefiniowanych jest sześć poziomów nagłówków. Znacznik nagłówka wy-
gląda następująco:
Zakładanie zamka
Liczby określają poziom nagłówka (od H1 do H6). Nagłówki nie są numerowane pod-
czas wyświetlania. Różnią się między sobą wielkością i atrybutami czcionki (pogrubie-
nie, podkreślenie, wielkie litery) i w ten sposób odróżniają się od reszty tekstu.
O nagłówkach należy myśleć jak o elementach ogólnego planu strony. Jeżeli tekst po-
siada strukturę, właśnie nagłówki powinny stanowić jej odzwierciedlenie, tak jak poka-
zano w poniższym przykładzie. (Zwróć uwagę na fakt, że tekst pod nagłówkami każde-
go kolejnego poziomu został napisany z coraz większym wcięciem, co lepiej odzwier-
ciedla jego strukturę. Wcięcia te zostaną oczywiście zignorowane przez przeglądarkę.)
Mitologia na przestrzeni dziejów
Powszechne tematy mitologiczne
Najwcześniej znane mity
yródła mitologii
Mitologia Mezopotamska
Mitologia Egipska
Opowieść o Izys i Ozyrysie
Horus i Set: Bitwa między Dobrem a Złem
Dwanaście godzin Świata Zmarłych
Rzeka Styks
Historia w mitach
W przeciwieństwie do tytułów, nagłówki mogą być dowolnie długie, mogą składać się
z wielu linii tekstu (należy jednak pamiętać, że długi tekst, który jest w jakiś sposób wy-
różniony, może być nieczytelny).
Częstą praktyką jest umieszczanie nagłówka najwyższego poziomu na samej górze
strony, gdzie jego treść jest powieleniem tytułu lub tytułem sformułowanym nieco ina-
czej, bardziej skrótowo. Jeżeli strona zawiera kilka przykładów zakładek i jest częścią
większej prezentacji na temat zakładek w ogóle, jej tytuł mógłby wyglądać następująco:
Jak tworzyć zakładki: kilka przykładów Natomiast nagłówek najwyższego poziomu mógłby brzmieć:
Przykłady
Staraj się nie używać nagłówków, jeżeli pragniesz tylko wyróżnić w jakiś sposób frag-
ment tekstu. Może to wyglądać znakomicie w przeglądarce, z której sam korzystasz, ale
nigdy nie będziesz wiedział, co zobaczą inni czytelnicy Twojej strony. Być może, inne
przeglądarki numerują nagłówki lub formatują je w jakiś inny, nietypowy sposób. Do-
datkowym niebezpieczeństwem jest fakt, że narzędzia tworzące indeksy do przeszuki-
wania zasobów sieci WWW korzystają z nagłówków, aby oznaczyć najważniejsze ele-
menty strony.
70 Część 1. Informacje wstępne
Używając nagłówków do oznaczenia czegoś, co nagłówkiem nie jest, wprowadzasz je
w błąd, co może przynieść nieoczekiwane rezultaty. Poniższy przykład przedstawia kil-
ka nagłówków. Rysunek 4.2 przedstawia nagłówki w przeglądarce Internet Explorer.
Mitologia na przestrzeni dziejów
Powszechne tematy mitologiczne
Najwcześniej znane mity
yródła mitologii
Mitologia Mezopotamska
Mitologia Egipska
Opowieść o Izys i Ozyrysie
Horus i Set: Bitwa między Dobrem a Złem
Dwanaście godzin Świata Zmarłych
Rzeka Styks
Historia w mitach
Rysunek 4.2.
Wyniki w przeglądarce
Internet Explorer
Akapity
Teraz, kiedy strona posiada już tytuł i nagłówki, można dopisać do niej trochę treści
w postaci zwykłych akapitów. W pierwszej wersji HTML-a znacznik
był zdefinio-
wany jako pojedynczy. Nie było czegoś takiego jak znacznik zamykający (
), a
oznaczał koniec, nie początek akapitu. Akapity w pierwszej wersji HTML-a wyglądały
następująco:
Powoli i ostrożnie, Enigern zbliżył się do potężnego smoka.
Szelest pośród drzew pobliskiego lasu oderwał na chwilę jego uwagę,
śmiertelny błąd dzielnego rycerza.
Smok rzucił się na niego, zionąc nagłym tchnieniem ognistego oddechu.
Kiedy smok wzniósł się ponad nim, Enigern padł na ziemię. Szybko
wyciągnął miecz i pchnął nim w pierś smoka.
Rozdział 4. Zaczynamy od podstaw 71
Większość przeglądarek zakładała, że akapity będą formatowane w ten właśnie sposób.
Gdy te wczesne wersje przeglądarek odnajdywały znacznik
, przechodziły do nowej
linii, która była trochę bardziej oddalona w pionie od poprzedniej.
Sposób obsługi znacznika akapitu został zmieniony w specyfikacji HTML 4.0 (jak rów-
nież w HTML 3.2 i 2.0) i oczywiście w kolejnych wersjach przeglądarek. W tej chwili
znacznik
(
&
) jest podwójny, przy czym znacznik
oznacza odpo-
wiednio początek akapitu. Poza tym, znacznik końca akapitu jest opcjonalny. Historia
Enigerna wygląda teraz następująco:
Powoli i ostrożnie, Enigern zbliżył się do potężnego smoka.
Szelest pośród drzew pobliskiego lasu oderwał na chwilę jego uwagę,
śmiertelny błąd dzielnego rycerza.
Smok rzucił się na niego, zionąc nagłym tchnieniem ognistego oddechu.
Kiedy smok wzniósł się ponad nim, Enigern padł na ziemię. Szybko
wyciągnął miecz i pchnął nim w pierś smoka.
Dobrze jest wyrobić sobie przyzwyczajenie do używania znacznika
na początku
każdego akapitu. Okaże się to szczególnie ważne, kiedy będziemy mówić o dosuwaniu
tekstu do prawej i lewej strony czy też o jego centrowaniu.
Starsze przeglądarki poprawnie przetwarzają tekst, sformatowany w taki sposób. Nie-
gdyś stosowanie zamykającego znacznika
było opcjonalne, jednak w XHTML-u 1.0
sytuacja uległa zmianie, gdyż wszystkie znaczniki muszą być zamykane. W przykła-
dach zawartych w tej książce będę go używała.
Niektórzy używają dodatkowych znaczników
pomiędzy akapitami, aby bardziej
oddalić je od siebie. Przypominam ponownie naczelną zasadę: najważniejsza jest treść
nie forma. Użytkownika tekstowej przeglądarki w żadnym wypadku nie zainteresuje
dodatkowa linia, którą tak skrzętnie umieściłeś, a niektóre przeglądarki graficzne mogą
potraktować kilka znaczników
jak jeden, burząc w ten sposób Twoją wizję strony.
Rysunek 4.3 przedstawia kolejny akapit tekstu o Enigernie i smoku wyświetlony w prze-
glądarce Internet Explorer.
Smok zwalił się na ziemię, jęcząc i wijąc się z bólu.
Moc miecza Enigerna okazała się śmiertelna, gdyż rychło
smok wydał ostatnie tchnienie. Teraz Enigern mógł bez
przeszkód uwolnić Lady Aelfleadę uwięzioną w smoczej
jamie.
Rysunek 4.3.
Wygląd powyższego
akapitu wyświetlonego w
przeglądarce
Internet Explorer
72 Część 1. Informacje wstępne
Listy, listy i jeszcze raz listy
Najpowszechniej, oprócz nagłówków i akapitów, używanym elementem HTML-a są li-
sty. Po przeczytaniu tego podpunktu będziesz nie tylko wiedział, jak tworzyć listy
w HTML-u, ale będziesz potrafił stworzyć pięć różnych rodzajów list!
W HTML 4.0 zdefiniowane są trzy typy list:
listy numerowane, oznaczane kolejnymi liczbami,
listy wypunktowane, oznaczone kropkami lub innymi symbolami,
listy definicji, gdzie każdy element składa się z pojęcia oraz definicji,
a pojęcie jest w jakiś sposób wyróżnione.
W specyfikacji HTML 4.0 znajdują się także listy uznane za przestarzałe: listy menu
(lub
listy wypunktowanej).
Przestarzały znacznik lub atrybut to taki, który wciąż jest obsługiwany przez przeglądarki,
jednak jego działanie można zastąpić, wykorzystując nowsze rozwiązania.
Zwykle przeglądarki obsługują elementy uznane za przestarzałe, aby zachować
kompatybilność ze starszymi standardami. Jeśli zakładasz, że część użytkowników
przeglądających Twoje strony używać będzie przeglądarek zgodnych ze standardem HTML
3.2, takich jak Netscape Navigator 3 i Microsoft Internet Explorer 3 bądz ich wcześniejszych
wersji, koniecznie musisz opanować również elementy przestarzałe. Ponieważ elementy te
mogą okazać się przestarzałe w przyszłych wersjach HTML, kiedy to tylko możliwe, staraj
się używać nowszych metod.
W HTML 4.0 większość znaczników i atrybutów jest uznana za przestarzałe z powodu użycia
arkuszy stylów (Cascading Style Sheet CSS), które zostały szerzej omówione w rozdziale
10. XHTML i arkusze stylów .
Znaczniki list
Wszystkie znaczniki list posiadają następujące, wspólne elementy:
cała lista jest objęta przez znaczniki początkowe i końcowe, odpowiednie
dla danego rodzaju listy (na przykład , i
),
każdy element listy posiada swój własny znacznik: - i
- dla listy pojęć
oraz - dla pozostałych list.
Zamykanie znaczników - ,
- oraz
- nie jest obowiązkowe w HTML.
Jednak, w ramach przygotowań do posługiwania się XHTML 1.0, używaj znaczników
zamykających , i .
Znaczniki list mogą być ułożone w kodzie HTML w różnoraki sposób. Ja osobiście pre-
Rozdział 4. Zaczynamy od podstaw 73
feruję układ, w którym znaczniki list i wszystkie elementy znajdują się w osobnych
liniach. Układ ten jest bardzo przejrzysty, pozwala na łatwe odróżnienie od siebie poje-
dynczych elementów oraz dodatkowo wyróżnia całą listę w strukturze strony. Inaczej
mówiąc, uważam, że poniższy układ:
Trylogia Sienkiewicza składa się z następujących części:
- Ogniem i mieczem
- Potop
- Pan Wołodyjowski
jest dużo czytelniejszy niż ten:
Trylogia Sienkiewicza składa się z następujących części:
- Ogniem i mieczem
- Potop
- Pan Wołodyjowski
choć obydwa fragmenty wyglądają identycznie w przeglądarce.
Listy numerowane
Listy numerowane są objęte znacznikami &
(OL oznacza skrót od ang. Orde-
red List, lista uporządkowana), a każdy element listy rozpoczyna się od znacznika -
(ang. List Item, element listy).
W HTML-u - jest znacznikiem pojedynczym, nie trzeba stosować zamykającego
znacznika , gdyż jest on opcjonalny. Pojawienie się kolejnego znacznika -
(lub zamykającego znacznika lub
) oznacza koniec bieżącego elementu listy.
Jednak, aby stworzyć poprawny dokument XHTML, kończenie elementów list znacznikiem
jest konieczne.
Przeglądarka, wyświetlając elementy listy, numeruje je kolejno i wyświetla z odpo-
wiednimi wcięciami. Nie musisz robić nic, co związane byłoby z nadawaniem nume-
rów; całą pracę wykonuje przeglądarka. Jeżeli dodasz lub usuniesz jakiś element, przy
następnym odczycie strony numeracja zostanie zaktualizowana.
Listy numerowane to listy, w których każdy element posiada swój numer.
List numerowanych powinieneś używać tylko wtedy, kiedy chcesz wyraznie zaznaczyć,
że kolejność elementów listy jest istotna. Doskonale nadają się one do tworzenia przepi-
sów i innego rodzaju opisów czynności, które należy wykonywać w określonym po-
rządku. Jeżeli pragniesz tylko wypisać składniki jakiejś większej całości, skorzystaj z li-
sty wypunktowanej.
W poniższym przykładzie zastosowano listę numerowaną, zawierającą poszczególne
kroki instalacji nowego systemu operacyjnego. W przykładzie pokazano zarówno zró-
dłowy kod HTML, jak i wygląd strony w przeglądarce Internet Explorer na rysunku 4.4.
74 Część 1. Informacje wstępne
Instalacja nowego systemu operacyjnego
- Włóż CD-ROM do stacji.
- Wybierz URUCHOM.
- Wprowadz literę stacji CD-ROM (przykładowo: D:\),
i SETUP.EXE.
- Instaluj według kolejnych kroków programu
istalacyjnego.
- Po zainstalowaniu wszystkich plików zrestartuj
komputer.
- Módl się.
Rysunek 4.4.
Wygląd strony
w przegladarce
Internet Explorer
Formatowanie list numerowanych w HTML 3.2
Listy numerowane w HTML-u 3.2 posiadają kilka atrybutów, za pomocą których możesz
sterować sposobem wyświetlania listy przez przeglądarkę. Atrybuty te pozwalają, między
innymi na wybór schematu numerowania, który zostanie wykorzystany do nadawania ko-
lejnych numerów, pozwala też na określenie liczby, od której numeracja ma się rozpocząć
(jeżeli nie chcesz zaczynać od 1). W HTML-u 4.0 atrybuty omawiane w tym podrozdziale
zostały uznane za przestarzałe i zamiast nich należy stosować właściwości i wartości ar-
kuszy stylów, spełniające analogiczną rolę. Niemniej jednak, aby zapewnić odpowiedni
wygląd strony w przeglądarkach zgodnych ze standardem HTML 3.2, od czasu do czasu
możesz zostać zmuszony do wykorzystania omawianych atrybutów.
Atrybuty to specjalne elementy znaczników, które zawierają dodatkowe opcje lub informacje
o znacznikach.
Listy numerowane można dopasować do własnych potrzeb na dwa sposoby: można
określić schemat numeracji oraz liczbę, od której ma się ona rozpocząć. W HTML-u 3.2
został zdefiniowany atrybut TYPE, który umożliwia wybór jednego z pięciu możliwych
schematów numerowania:
"1": standardowa numeracja za pomocą liczebników arabskich (1, 2, 3 itd.),
"a": numeracja za pomocą kolejnych, małych liter alfabetu (a, b, c, d itd.),
"A": numeracja za pomocą kolejnych, wielkich liter alfabetu (A, B, C, D itd.),
Rozdział 4. Zaczynamy od podstaw 75
"i": numeracja za pomocą kolejnych liczb alfabetu rzymskiego, zapisanych małymi
literami (i, ii, iii, iv itd.),
"I": numeracja za pomocą kolejnych liczb alfabetu rzymskiego, zapisanych
wielkimi literami (I, II, III, IV itd.).
Schemat numeracji zapisuje się wewnątrz znacznika
w następujący sposób:
. W sytuacji, gdy atrybut TYPE nie zostanie określony, przyjmowana
jest standardowa wartość "1".
Przeglądarki WWW mają tę zaletę, że ignorują atrybuty, których znaczenia nie znają.
Oznacza to, że starsza przeglądarka, której obcy jest atrybut TYPE znacznika ,
napotkawszy go, po prostu go pominie.
Jako przykład rozpatrzmy następującą listę:
Dni tygodnia w języku francuskim:
- Lundi
- Mardi
- Mercredi
- Jeudi
- Vendredi
- Samedi
- Dimanche
Jeżeli dodałbyś do znacznika atrybut TYPE="I", lista ta, wyświetlona w Internet
Explorerze wyglądałaby jak na rysunku 4.5.
Dni tygodnia w języku francuskim:
- Lundi
- Mardi
- Mercredi
- Jeudi
- Vendredi
- Samedi
- Dimanche
Rysunek 4.5.
Wyniki w przeglądarce
Internet Explorer
76 Część 1. Informacje wstępne
Atrybut TYPE może być również stosowany w znaczniku - . Wpływa on wtedy na
zmianę schematu numeracji od pewnego miejsca listy, dotyczy bowiem elementu,
w którym został użyty oraz wszystkich następnych.
Inny atrybut, START, pozwala na określenie, od jakiej liczby lub litery należy rozpocząć
numerację. Standardowo przyjmowaną liczbą jest oczywiście 1, ale START pozwala na
zmianę tej wartości. Tak więc spowoduje rozpoczęcie numeracji li-
sty od liczby 4, natomiast sprawi, że pierwszą literą listy
numerowanej alfabetycznie będzie c , po niej nastąpi d itd.
Zmodyfikujmy więc poprzedni przykład, tak aby numeracja zaczynała się od piątej
z kolei liczby alfabetu rzymskiego. Rezultat tej zmiany pokazany jest na rysunku 4.6.
- Lipiec
- Sierpień
- Wrzesień
- Pazdziernik
- Listopad
- Grudzień
Rysunek 4.6.
Wyniki w przeglądarce
Internet Explorer
W przypadku atrybutu TYPE można było zmienić schemat numeracji od pewnego miej-
sca listy, analogicznie można postąpić z wartością. Do tego celu służy atrybut VALUE,
który sprawia, że od miejsca, w którym został wstawiony, numeracja listy rozpoczyna
się niejako od nowa, począwszy od podanej wartości.
Spróbujmy zastosować to do naszego przykładu. Załóżmy, że chcemy, aby trzy ostatnie
składniki przepisu na sernik nosiły numery 10, 11 i 12, a nie 6, 7 i 8. Można to zrobić
właśnie za pomocą atrybutu VALUE.
Składniki sernika:
- Twaróg
- Miód
- Kakao
- Olejek waniliowy
- Mąka
- Jajka
- Orzechy włoskie
- Margaryna
Rozdział 4. Zaczynamy od podstaw 77
Listy wypunktowane
W listach wypunktowanych kolejność występowania elementów nie ma najmniejszego
znaczenia. Z punktu widzenia HTML-a lista wypunktowana wygląda prawie tak samo
jak lista numerowana, z tym, że ta pierwsza zawarta jest pomiędzy znacznikami , a nie . Elementy listy oznaczone są znacznikiem - , dokładnie tak jak
w listach numerowanych.
Przeglądarki formatują listy wypunktowane w ten sposób, że przed każdym elementem
wstawiają kropkę lub inny symbol, natomiast Lynx przeglądarka tekstowa wsta-
wia w te miejsca gwiazdki (*).
W liście wypunktowanej elementy oznaczone są kropkami lub innymi symbolami.
Poniższy przykład pokazuje listę wypunktowaną. Rysunek 4.7 przedstawia stronę wy-
nikową w przeglądarce Internet Explorer.
Oto co lubię robić każdego ranka:
- Wypić filiżankę kawy
- Oglądać wschód słońca
- Słuchać śpiewu ptaszków
- Słuchać szmeru liści pobliskich drzew
- Przeklinać odgłosy pobliskiej budowy burzące pogodny nastrój
Rysunek 4.7.
Wyniki w przeglądarce
Internet Explorer
Formatowanie list wypunktowanych w HTML-u 3.2
Postać list wypunktowanych, podobnie jak numerowanych, można modyfikować przy
wykorzystaniu atrybutów HTML 3.2 (także one zostały uznane za przestarzałe
w HTML-u 4.0). Większość przeglądarek (w tym Netscape oraz Internet Explorer)
standardowo formatuje listy numerowane za pomocą kropek (przeglądarki tekstowe,
jak, na przykład, Lynx, zwykle używają gwiazdek). Atrybut TYPE pozwala na zmianę
tego symbolu w części przeglądarek. Zgodnie ze specyfikacją HTML 3.2. atrybut TYPE
może przyjmować trzy następujące wartości:
78 Część 1. Informacje wstępne
"disc": kółko lub kropka, jest to wartość przyjmowana standardowo,
"square": mały kwadrat,
"circle": większość przeglądarek wyświetla disc jako wypełnione kółko,
ale w tym wypadku powinno pojawić się puste.
W poniższym przykładzie zostały porównane trzy rodzaje list wypunktowanych. Rysu-
nek 4.8 przedstawia rezultat w przeglądarce Internet Explorer.
- DAT - Digital Audio Tapes
- CD - Compact Discs
- Kasety magnetofonowe
- DAT - Digital Audio Tapes
- CD - Compact Discs
- Kasety magnetofonowe
- DAT - Digital Audio Tapes
- CD Compact Discs
- Kasety magnetofonowe
Rysunek 4.8.
Wyniki w przeglądarce
Internet Explorer
Kolejnym podobieństwem do list numerowanych jest to, że można zmienić symbol wy-
punktowania, poczynając od dowolnego miejsca listy, dołączając atrybut TYPE do zna-
cznika - . Także ten atrybut w HTML-u 4.0 został uznany za przestarzały.
Listy definicji
Listy definicji różnią się nieznacznie od pozostałych. Każdy element listy składa się
bowiem z dwóch, a nie jednej części:
pojęcia,
definicji.
Rozdział 4. Zaczynamy od podstaw 79
Każda część elementu listy definicji posiada swój znacznik: - oznacza pojęcie
(skrót od ang. definition term), a - definicję Obydwa te znaczniki są pojedyncze i
występują zazwyczaj parami, chociaż większość przeglądarek radzi sobie bez proble-
mów z samym pojęciem czy też samą definicją. Cała lista definicji objęta jest znaczni-
kami &
.
W listach definicji każdy element składa się z dwóch części: pojęcia i definicji.
Listy te zwane są czasem listami słownikowymi.
Poniżej pokazany jest przykład listy definicji, zawierającej krótki opis kilku ziół.
- Bazylia
- Roślina jednoroczna. Osiąga wysokość czterech stóp
jej drobne białe kwiatki pachną bosko.
- Oregano
- Roślina wieloletnia. Wypuszcza dużo podziemnych pędów i trudno
ją przesadzić w inne miejsce.
- Kolendra
- Roślina jednoroczna. Lubi łagodną aurę wiosny i jesieni.
Przeglądarki formatują zazwyczaj listy definicji tak, że pojęcie i definicja znajdują się
w osobnych liniach, a linia definicji jest dodatkowo przesunięta w prawo w stosunku do
poprzedzającej ją linii pojęcia. Zastosowanie tego typu list nie ogranicza się, oczywi-
ście, tylko do objaśniania pojęć, może być ono bowiem znacznie szersze. Oto przykład:
- Żona
- Byłam u ojca Beniamina, obiecał mi się na pojutrze.
- Mąż
- Dziękuję ci.
- Żona
- Posłałam do cukiernika, żeby kilka tort przysposobił, boś podobno
dużo gości sprosił na chrzciny - wiesz - takie czekoladowe, z cyfrą
Jerzego Stanisława.
- Mąż
- Dziękuję ci.
- Żona
- Bogu dzięki, że już raz się odbędzie ten obrządek - że Orcio nasz
zupełnie chrześcijaninem się stanie - bo choć już chrzczony z wody,
zdawało mi się zawsze, że mu nie dostaje czegoś.
Poniższy przykład przedstawia, jak lista definicji formatowana jest przez przeglądarkę
Internet Explorer (patrz rysunek 4.9).
- Bazylia
- Roślina jednoroczna. Osiąga wysokość czterech
stóp, jej drobne białe kwiatki pachną bosko.
- Oregano
- Roślina wieloletnia. Wypuszcza dużo podziemnych pędów
i trudno ją przesadzić w inne miejsce.
- Kolendra
- Roślina jednoroczna. Lubi łagodną aurę wiosny i jesieni.
80 Część 1. Informacje wstępne
Rysunek 4.9.
Wyniki w przeglądarce
Internet Explorer
Listy zagnieżdżone
Co stanie się, gdy wstawisz jedną listę wewnątrz drugiej? Zagnieżdżanie list
w HTML-u działa bardzo sprawnie wystarczy wstawić całą listę jako element innej.
Lista zagnieżdżona w ten sposób staje się elementem listy macierzystej i jest wyświe-
tlana z odpowiednim wcięciem. Jest to szczególnie dobry sposób na odzwierciedlenie
struktur hierarchicznych, takich jak wszelkiego rodzaju spisy treści.
Pisanie kodu HTML z odpowiednimi wcięciami jest bardzo pożyteczne, pozwala bo-
wiem na uzmysłowienie sobie związków poszczególnych elementów z właściwym
układem na stronie:
- WWW
- Organizacje
- Nauka HTML
- Czym jest HTML
- Jak, pisać w HTML'u
- Struktura dokumentu
- Nagłówki
- Paragrafy
- Komentarze
- Linki
- Więcej o HTML
Wiele przeglądarek odróżnia listy zagnieżdżone i ich listy nadrzędne, formatując je
w różny sposób. Może być to inny niż kropka symbol wypunktowania w liście zagnież-
dżonej, czy też inny schemat numeracji (liczby w liście nadrzędnej, litery w liście za-
gnieżdżonej). Jednakże, nie możesz zakładać, że tak właśnie będzie i, na wszelki wypa-
dek, nie umieszczaj w tekście odniesień typu rozdział 8., podpunkt 8. , nie możesz
bowiem być pewien, że tak właśnie przeglądarka ponumeruje listę.
Poniższy przykład przedstawia, jak listy zagnieżdżone są formatowane przez przeglą-
darkę Internet Explorer (rysunek 4.10).
Rozdział 4. Zaczynamy od podstaw 81
Rodzaje linii rysunkowych
- Gruba
- Cienka
- Ciągła
- Kreskowa
- Punktowa
- Dwupunktowa
- Falista
- Bardzo gruba
Rysunek 4.10.
Wyniki w przeglądarce
Internet Explorer
Komentarze
Istnieje możliwość wstawiania komentarzy do kodu napisanego w języku HTML. Mogą
one służyć opisowi elementów strony, mogą również w pewien sposób określać jej sta-
tus. Tekst zawarty w komentarzach jest ignorowany przez przeglądarkę, co oznacza, że
ich treść nigdy nie pojawia się na ekranie (w końcu dlatego nazywają się komentarza-
mi). Składnia komentarza jest następująca:
Każda linia tekstu powinna posiadać odpowiadający jej komentarz. Nie powinieneś
wstawiać w komentarzach żadnych innych znaczników HTML, może to bowiem kom-
pletnie zmylić przeglądarkę, która nie wiedząc, na co właściwie natrafiła, może komen-
tarz wyświetlić. Dobrze jest wobec tego przyjąć żelazną zasadę, aby nie używać
w komentarzach znaków <, > i --.
Oto kilka przykładowych komentarzy:
82 Część 1. Informacje wstępne
Ćwiczenie 4.1: Tworzymy prawdziwą stronę HTML
W tym momencie wiesz już wystarczająco dużo, aby móc tworzyć pierwsze, proste
strony HTML. Wiesz już, czym jest HTML, znasz kilka znaczników, próbowałeś nawet
przeglądać plik HTML. Nie utworzyłeś jeszcze wprawdzie żadnego połączenia, ale doj-
dziemy i do tego już w następnym rozdziale.
W tym ćwiczeniu pragnę zademonstrować, jak stworzyć plik HTML wykorzystujący po-
znane dotąd znaczniki. Pozwoli Ci to zrozumieć, jak poszczególne znaczniki są odzwier-
ciedlane na sformatowanej stronie i jakie typowe pomyłki na Ciebie czyhają. Nikt nie jest
nieomylny, dlatego też często edytory HTML, które wstawiają znaczniki za użytkownika
okazują się bardzo pomocne. Edytor nigdy nie zapomni wstawić znacznika zamykającego,
nie pominie ukośnika ani też nie popełni żadnego innego błędu w pisowni.
Spróbuj napisać swój pierwszy przykład w zwykłym edytorze. Tak naprawdę, nie musi
on być zbyt skomplikowany, znajdą się w nim znaczniki struktury, kilka nagłówków
i jeden, może dwa akapity. Mógłby on wyglądać następująco:
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
Profil Spółki, Camembert Sp. z o.o.
Camembert Sp. z o.o.
"Całymi nocami śniłem o serze -- najczęściej o tostach z serem."
-- Robert Louis Stevenson
Co robimy
Produkujemy ser. Mnóstwo sera; ponad osiem ton rocznie.
Dlaczego?
Ludzie, którzy lubią ser płacą nam mnóstwo forsy. Więc produkujemy
więcej.
Nasze ulubione sery
- Brie
- Havarti
- Camembert
- Mozzarella
Zapisz utworzony plik z rozszerzeniem .htm lub .html, otwórz go w przeglądarce i oceń,
jak się prezentuje.
Jeżeli tylko dysponujesz inną przeglądarką, najlepiej na zupełnie innym komputerze,
radzę obejrzeć ten plik również tam. Jeżeli uda Ci się to zrobić, zwróć baczną uwagę na
różnice w wyglądzie strony. Możesz być bardzo zdziwiony, widząc, jak bardzo strona
może się zmienić, gdy jest oglądana w innej przeglądarce.
Rozdział 4. Zaczynamy od podstaw 83
Oto ilustracja, która przedstawia stronę producenta serów za pomocą przeglądarki In-
ternet Explorer (rysunek 4.11). Czy teraz rozumiesz, co mam na myśli?
Rysunek 4.11.
Strona producenta serów
wyświetlona
w przegladarce
Internet Explorer
Podsumowanie
HTML to tekstowy język znaczników, używany do tworzenia hipertekstowych stron
w sieci WWW, opisujący strukturę strony, a nie jej układ na ekranie.
W tym rozdziale nauczyłeś się, czym jest HTML oraz jak tworzyć i edytować proste
strony WWW. Poza tym poznałeś następujące znaczniki HTML.
Warsztat
Ponieważ w niniejszym rozdziale nauczyłeś się wielu nowych rzeczy, warsztaty pomo-
gą Ci zapamiętać parę najważniejszych elementów. W pierwszej części postarałam się
przewidzieć pytania, które mógłbyś mi zadać.
Pytania i odpowiedzi
P. Przeglądając kod zródłowy różnych stron WWW zauważyłem, że znaczniki
struktury strony (, , ) nie są zbyt często używane. Czy
wobec tego są one naprawdę potrzebne, skoro bez nich strony wyglądają cał-
kiem dobrze?
Tabela 4.1
Znaczniki HTML opisane w tym rozdziale
84 Część 1. Informacje wstępne
Znacznik Atrybut Opis
& Cała strona HTML.
& Nagłówek strony HTML.
& Treść strony HTML.
& Tytuł strony. <br>
&
Nagłówek pierwszego poziomu.
&
Nagłówek drugiego poziomu.
&
Nagłówek trzeciego poziomu.
&
Nagłówek czwartego poziomu.
&
Nagłówek piątego poziomu.
&
Nagłówek szóstego poziomu.
&
Akapit.
&
Lista numerowana. Każdy element listy rozpoczyna się
od znacznika - .
TYPE
Określa schemat numerowania listy. Przestarzały w HTML 4.0.
START
Określa, od jakiej liczby ma się rozpocząć numeracja.
Przestarzały w HTML 4.0.
Lista wypunktowana. Każdy element listy rozpoczyna się od
znacznika - .
TYPE
Określa symbol używany do oznaczania pozycji na liście.
Przestarzały w HTML 4.0
Lista menu (lista niewielkich elementów lub akapitów).
& Lista szczególnie krótkich elementów (jedno-dwuwyrazowych).
Listy tego typu nie są zbyt często wykorzystywane.
- &
Element listy numerowanej, wypunktowanej, menu lub katalogu.
Znacznik zamykający jest opcjonalny w HTML-u,
lecz wymagany w XHML-u 1.0.
TYPE
Powoduje zmianę schematu numerowania lub symbolu
wypunktowania, począwszy od elementu listy, w którym
występuje. Można go stosować tylko w listach i .
Przestarzały w HTML 4.0
VALUE
Powoduje rozpoczęcie numerowania od podanej wartości.
Przestarzały w HTML 4.0
&
Lista definicji. Jej elementy składają się z dwóch części: pojęcia i
jego definicji.
- &
Pojęcie na liście definicji. Znacznik zamykający jest opcjonalny
w HTML-u, lecz wymagany w XHML-u 1.0.
- &
Definicja pojęcia podanego po znaczniku - . Znacznik
zamykający jest opcjonalny w HTML-u, lecz wymagany w XHML-u
1.0.
Komentarz.
Rozdział 4. Zaczynamy od podstaw 85
O. Większość przeglądarek będzie poprawnie wyświetlać strony WWW zawierające sam
kod HTML bez znaczników struktury strony. Gdy jednak przejdziemy do XHTML,
gdzie znaczniki te są wymagane, koniecznie trzeba będzie umieszczać je w kodzie
tworzonych stron. A zatem, wyrobienie sobie nawyku stosowania tych znaczników już
teraz jest dobrym pomysłem. Stosowanie znaczników struktury strony już teraz spra-
wi, że Twoje strony WWW będą mogły być czytane przez większą ilość ogólnych na-
rzędzi SGML oraz umożliwi wykorzystanie możliwości przeglądarek, które pojawią
się w przyszłości. Poza tym, stosowanie tych znaczników jest poprawne , jeśli zależy
Ci na tym, aby Twoje strony były zgodne ze specyfikacją HTML.
P. Coś jest nie jest w porządku z listą definicji, którą utworzyłem. Pojęcia są wy-
świetlane z większym wcięciem niż definicje!
O. Nie pomieszałeś przypadkiem ze sobą znaczników - i
- ? Znacznik
-
(pojęcie) powinien znajdować się zawsze przed - (definicja). Ja często mylę je
ze sobą. Za dużo w tym wszystkim litery D.
P. Widziałem w jednym z plików HTML znacznik - , znajdujący się poza
jakąkolwiek listą, wstawiony zupełnie luzem, w pewnym miejscu strony:
- I wtedy powiedział: zapisz to na mój rachunek
O. Większość przeglądarek powinna zaakceptować tego typu zapis i wyświetlić go
w formie zwykłego akapitu lub pojedynczego punktu bez wcięcia. Jednakże,
z punktu widzenia specyfikacji języka HTML, takie użycie znacznika - jest błę-
dem, tak więc nie powinno się to zdarzać na dobrych stronach. A ponieważ bardzo
chciałabym, aby strony, które będziesz tworzył po przeczytaniu tej książki były na-
prawdę dobre, stanowczo nie polecam stosowania tego typu zapisu. Element listy
powinien zawsze znajdować się na swoim miejscu, czyli wewnątrz niej.
P. Wspomniałaś, że niektóre znaczniki list i atrybuty są przestarzałe w HTML 4.0.
Jak mogę je zastąpić?
O. Zależy to od użytkowników odwiedzających Twoje strony. Przykładowo, jeśli Twoje
strony znajdują się w sieci wewnętrznej przedsiębiorstwa, kiedy jesteś pewien, że każ-
dy używa przeglądarki zgodnej z HTML 4.0 obsługującej arkusze stylów (CSS), za-
miast zdeprecjonowanych znaczników możesz skorzystać z właściwości arkuszy sty-
lów CSS. Jeśli jednak Twoja strona znajduje się w Internecie, gdzie wszyscy używają
różnych przeglądarek i platform sprzętowych, korzystniejsze będzie użycie zdeprecjo-
nowanych znaczników, aby Twoje strony były poprawnie wyświetlane również
w starszych typach przeglądarek. Zalety i wady obydwu rozwiązań oraz przykłady za-
stępowania przestarzałych znaczników zostały przedstawione w rozdziale 24.
Quiz
1. Które trzy znaczniki HTML służą do określania ogólnej struktury strony WWW
i jaka jest rola każdego z nich?
2. Jakie jest działanie znacznika i w jakim celu jest używany? <br> 86 Część 1. Informacje wstępne <br>3. Ile różnych rodzajów nagłówków jest używanych w HTML? Jakie są ich znaczniki? <br>4. Dlaczego warto używać znacznika zamykającego paragraf </P>, mimo że jego <br>użycie nie jest wymagane? <br>5. Które dwa rodzaje list są już zdeprecjonowane? Jak można je zastąpić? <br>Odpowiedzi <br>1. Znacznik <HTML> wskazuje, że dokument został napisany w języku HTML. <br>Znacznik <HEAD> wskazuje, że tekst pomiędzy parą znaczników jest <br>wprowadzeniem do reszty dokumentu. Znacznik <BODY> zawiera pozostałą część <br>strony HTML (tekst, połączenia, obrazki, itd.). <br>2. Znacznik <TITLE> zawiera tytuł strony wyświetlany w pasku tytułowym <br>przeglądarki oraz zapamiętywany przez wyszukiwarkę internetową. Znacznik ten <br>zawsze znajduje się wewnątrz pary znaczników <HEAD>. <br>3. W HTML jest używanych sześć różnych rodzajów nagłówków. Nagłówki <br>są zawarte między znacznikami od <H1 & /H1> do <H6 & /H6>. <br>4. Użycie znacznika zamykającego </p> nabiera istotnego znaczenia w momencie, <br>gdy tekst jest wyrównywany do lewej strony, do prawej, bądz wyśrodkowany. <br>Konieczne jest również użycie znacznika zamykającego w XHTML 1.0. <br>5. Rodzaje list <MENU> oraz <DIR> stały się już zdeprecjonowane, na korzyść użycia <br>list wypunktowanych lub nieuporządkowanych, <UL>. <br>Ćwiczenia <br>1. Wzorując się na stronie Camembert Incorporated, utwórz stronę zwięzle omawiającą <br>tematy, które chciałbyś poruszyć na łamach swojej strony. W następnym rozdziale, <br>za pomocą tej strony nauczysz się, jak tworzyć połączenia (ang. link). <br>2. Utwórz następną stronę, rozwijając jeden z tematów ze strony utworzonej <br>w poprzednim ćwiczeniu. Na stronie wstaw kilka nagłówków (na przykład, takich <br>jak na rysunku 4.2). Możesz także uzupełnić treść strony oraz dodać parę list, <br>w miejscach do tego odpowiednich. Ćwiczenie to także pomoże Ci przygotować <br>się do materiału prezentowanego w następnym rozdziale. <br><br>
<br>Wyszukiwarka<br>
<form method="get" action="https://zanotowane.pl/szukaj3.php">
<input value="" id="q" name="q" />
<input type="submit" value="Szukaj" />
</form>
<br>Podobne podstrony:<br><a href="../../143/2310">str 04 07 maruszewski</a><br><a href="../../119/4337">stan wod pow zlew San 04 07</a><br><a href="../../180/1089">2008 04 07 14h23m 01 199(12384021159182)</a><br><a href="../../134/6562">11 04 07 as Nuerburgring Karte englisch</a><br><a href="../../136/6372">16 04 07</a><br><a href="../../108/952">r 04 07</a><br><a href="../../162/7711">pdm 2015 04 07</a><br><a href="../../84/1875">Waszyngton nie ma już ochoty składać Iraku (04 07 2009)</a><br><a href="../../84/8409">04 07</a><br><br><a href="https://zanotowane.pl/szukaj3.php?q=R+04+07+%282%29" rel="nofollow">więcej podobnych podstron</a><br><br><form method="get" action="https://zanotowane.pl/szukaj3.php"><input value="" id="q" name="q" /><input type="submit" value="Szukaj" /></form>
</div>
<!-- /.container -->
<footer>
<div class="footer-blurb">
<div class="container">
<div class="row">
<div class="col-sm-4 footer-blurb-item">
</div>
</div>
<!-- /.row -->
</div>
</div>
<div class="small-print">
<div class="container">
<p><a href="mailto:edibk@onet.pl">Kontakt</a> | <a href="../../polityka.php">Polityka prywatności</a></p>
</div>
</div>
</footer>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-L8W7STRP18"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-L8W7STRP18');
</script>
</body>
</html>