Podstawy języka HMTL
Pierwsza strona internetowa
Język HTML składa się z tzw. tagów (zwanych także znacznikami), które zapisywane są w nawiasach trójkątnych (< i >). Do tagów można podać pewne atrybuty (inaczej parametry; nie zawsze jednak jest to konieczne, bądź możliwe). Atrybut może posiadać także przypisaną pewną wartość, bądź występować samodzielnie - wtedy określa on uaktywnienie bądź nie pewnej cechy znacznika. Większość tagów wymaga także "zamknięcia" przy użyciu taga o identycznej nazwie jak tag otwierający, jednak poprzedzonej znakiem "/". Tagi zamykające nigdy nie posiadają parametrów. Wartości parametrów mogą być otoczone cudzysłowami lub apostrofami. Nie jest to wymagane gdy wartość jest pojedynczą liczbą lub słowem (zalecane za względu na XHTML), wielkość liter nie jest znacząca, ale zaleca się aby pisać tagi małymi literami (XHTML).
Ponższy kod przedstawia podstawową kod strony WWW napisanej w języku HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Moja Pierwsza Strona WWW</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
</head>
<body>
<p> MOJA PIERWSZA STRONA - TREŚĆ WWW</p>
</body>
</html>
Kod musi zostać zapisany w pliku tekstowym o rozszerzeniu *.html lub *.htm. Zwyczajowo przyjęło się że główna strona dokumentu html nazywana jest index.html lub index.htm.
Pierwsza linia w powyższym kodzie zawiera znacznik <!DOCTYPE>, który określa tzw. DTD (Document Type Definition - definicja typu dokumentu). Linia ta określa m.in. której wersji języka HTML będziemy używać na stronie. Do wyboru są Strict (najbardziej restrykcyjna, która wymaga aby formatowanie wyglądu tekstu było wykonane za pomocą arkuszy styli CSS), Transitional (zawiera znaczniki określające wygląd tekstu) i Frameset (do tworzenia dokumentów z ramkami).
Po linii określającej DTD, pojawia się tag <html>, natomiast na końcu kodu znajduje się zamykający go tag </html>. Ta para tagów określa granice dokumentu HTML, w ramach których powinny zawrzeć się wszystkie pozostałe znaczniki tworzące dokument.
Po znaczniku <html> pojawiają się znaczniki określające dwie podstawowe części dokumentu - nagłówek (tagi <head> i </head>) i tzw. ciało dokumentu (tagi <body> i </body>). W nagłówku dokumentu zawarta jest para tagów pomiędzy którymi znajduje się tytuł strony (tagi <title> i </title>) - jest on zwykle wyświetlany w pasku tytułu przeglądarki. W tej części znajdują się też tzw. meta-tagi (tagi <meta>), które określają pewne parametry pracy przeglądarki przy wyświetlaniu tej strony. W dokumencie umieszczono jeden taki znacznik, określający sposób kodowania polskich znaków w dokumencie (standard ISO-8859-2).
Właściwa część strony, która jest wyświetlana wewnątrz okna przeglądarki, czyli tzw. ciało strony, umieszczone jest pomiędzy znacznikami <body> i </body>. W powyższym przykładzie ciałem strony jest napis "MOJA PIERWSZA STRONA - TREŚĆ WWW" umieszczony dodatkowo w znaczniku <p> służącym do tworzenia paragrafów tekstu. Przy wpisywaniu tekstu należy zwrócić uwagę na fakt, iż nie wszystkie znaki można wpisać bezpośrednio, gdyż zostały one zarezerwowane do określonych celów w języku HTML. Znaki te można uzyskać w utworzonym dokumencie podając w tekście dokumentu odpowiednie kody postaci &nazwa;. Do najczęściej używanych należą:
" - znak cudzysłowu "
< - znak mniejszości <
> - znak większości >
& - ampersand (znak AND) &
- tzw. twarda (niełamalna) spacja (wyrazy połączone taką spacją pozostaną w tej samej linii przy podziale tekstu strony na wiersze)
Formatowanie tekstu w HTMLu
Znaczniki formatujące można podzielić na fizyczne - określają one jedynie wygląd tekstu oraz logiczne - dzięki nim oprócz zmiany wyglądu tekstu możliwe jest określenie jego logicznej funkcji, jak np. adres czy cytat, co może być wykorzystane przez niektóre programy analizujące treść strony. Tekst w nich zawarty jest także odpowiednio formatowany przez przeglądarkę, ale tutaj formatowanie jest sprawą umowną i może być różne w różnych przeglądarkach.
Kaskadowe arkusze stylów (CSS):
Style CSS można umieścić na stronie na kilka sposobów. Jednym z nich jest użycie atrybutu style. Kaskadowe arkusze stylów CSS definiują szereg właściwości, którym można przypisywać wartości. Przykładami takich właściwości są np. właściwości związane z formatowaniem czcionek. Wartość właściwości od jej nazwy oddziela się za pomocą dwukropka:
<znacznik style = "wlasciwosc: wartosc">
Za pomocą atrybutu style można podać też wartości dla kilku właściwości równocześnie - należy je rozdzielić od siebie średnikami:
<znacznik style="wlasciwosc1: wartosc1; wlasciwosc2: wartosc2">
Atrybut style można dodać do większości znaczników HTML. Czasami jednak istnieją sytuacje gdy potrzeba np. podkreślić pojedyncze słowo w tekście. W takim przypadku z pomocą przychodzi znacznik <span> - sam z siebie ten znacznik nic nie robi, ale pozwala on przypisać określony styl CSS dla wycinka tekstu który się w nim znajdzie.
Znacznik formatujące fizyczne
Fizyczne właściwości tekstu to jest to co zazwyczaj mamy na myśli myśląc o formacie tekstu, czyli np. nazwę czcionki, jej wielkość, kolor czy np. pogrubienie. Atrybuty te można ustawić zarówno stosując odpowiednie znaczniki HTML, jak i komendy arkuszy stylów CSS. W poniższych przykładach pokazano obie metody formatowania. Zaleca się aby stosować wyłącznie formatowanie z użyciem komend arkuszy stylów.
Tekst pogrubiony (bold)
<b> Tekst pogrubiony </b>
<span style = "font-weight: bold"> Tekst pogrubiony </span>
Tekst pochylony (kursywa, italic)
<i> Kursywa </i>
<span style = "font-style: italic"> Kursywa </span>
Tekst podkreślony (underlined)
<u> Podkreślenie </u>
<span style = "text-decoration: underline"> Podkreślenie </span>
Tekst przekreślony (strike, Line-through)
<s> Przekreślenie </s>
<strike> Przekreślenie </strike>
<span style = "text-decoration: line-through"> Przekreślenie </span>
Indeks górny (superskrypt)
Indeks <sup> górny </sup> w tekście
Indeks <span style = "vertical-align: super"> górny </span> w tekście
Uwaga! Domyślnie przy zastosowaniu stylu CSS wielkość czcionki nie zostanie zmniejszona. Należy ją ustawić osobno.
Indeks dolny (subskrypt)
Indeks <sub> dolny </sub> w tekście
Indeks <span style = "vertical-align: sub"> dolny </span> w tekście
Uwaga! Domyślnie przy zastosowaniu stylu CSS wielkość czcionki nie zostanie zmniejszona. Należy ją ustawić osobno.
Czcionka o stałej szerokości znaków
<tt> Stała szerokość </tt>
<span style = "font-family: monospace"> Stała szerokość </span>
Czcionka pomniejszona o jeden punkt
Czcionka <small> mniejsza </small>
Czcionka <span style = "font-size: smaller"> mniejsza </span>
Czcionka powiększona o jeden punkt
Czcionka <big> większa </big>
Czcionka <span style="font-size: larger"> większa </span>
Znacznik <font>
Pozwala na ustawienie dodatkowych atrybutów związanych z tekstem np. koloru czcionki itp. Nie jest zalecany, należy raczej korzystać ze stylów CSS. Przy jego pomocy można ustawić następujące parametry tekstu:
kolor czcionki - służy do tego parametr color. Jako jego wartość podaje się nazwę koloru, lub jego kod w systemie szesnastkowym poprzedzony znakiem "#", po którym podaje się kolejno wartości składowych RGB (czerwony-zielony-niebieski).
<font color = "red"> Czerwony </font>
<font color = "green"> Zielony </font>
<span style = "color: red"> Czerwony </span>
<span style = "color: green"> Zielony </span>
Lub:
<font color = "#FF0000"> Czerwony </font>
<font color = "#008000"> Zielony </font>
<span style = "color: #FF0000"> Czerwony </span>
<span style = "color: #008000"> Zielony </span>
Typ czcionki - służy do tego parametr face.
<font face = "Arial"> Arial </font>,
<font face = "Times New Roman"> Times New Roman </font>
<span style = "font-family: Arial"> Arial </span>,
<span style = "font-family: Times New Roman"> Times New Roman </span>
wielkość czcionki - służy do tego parametr size. Jako wartość podaje się wielkość czcionki, którą się chce uzyska. Jest dostępnych siedem predefiniowanych wielkości, ponumerowanych od 1 (najmniejsza) do 7 (największa). Można także podać o ile punktów czcionka ma być większa bądź mniejsza od aktualnie używanej w danym miejscu czcionki, podając jako wartość odpowiednio wyrażania "+n" i "-n".
Czcionka <font size = "+1"> powiększona o jeden </font>,
Czcionka <font size = "-1"> pomniejszona o jeden </font>,
<font size = "5"> oraz o rozmiarze 5 </font>
Czcionka <span style = "font-size: larger"> powiększona o jeden </span>,
<span style = "font-size: smaller"> pomniejszona o jeden </span>
<span style = "font-size: large"> oraz o rozmiarze 5 </span>
Arkusze stylów CSS pozwalają na znacznie precyzyjniejsze ustawienie wielkości czcionki niż za pomocą znacznika <font> - oprócz predefiniowanych siedmiu wielkości czcionki możliwe jest też podanie jej wielkości w innych jednostkach, np. w punktach (jak na przykład w edytorze tekstu MS-Word):
<span style = "font-size: 12pt"> Kurs języka HTML </span>
Arkusze stylów CSS również posiadają siedem predefiniowanych wielkości czcionek - ich nazwy to xx-small, x-small, small, medium, large, x-large i xx-large. Ich wielkości są jednak nieco mniejsze niż odpowiadających im wielkości ustawianych za pomocą znacznika <font size="X"> - wielkość xx-large jest w przybliżeniu identyczna jak rozmiar czcionki 6 ustawiony za pomocą znacznika <font>.
Ustawianie kilku parametrów na raz:
<font color = "red" face="Courier New" size="4"> Tekst </font>
<span style = "color: red; font-family: Courier New; font-size: medium">
Tekst </span>
Możliwe jest również ustawienie czcionki jaka ma być używana w całym dokumencie, za pomocą znacznika <basefont>. Znacznik ten nie wymaga zamykania. Zmiany wprowadzone za jego pomocą obowiązują do końca dokumentu, lub do kolejnego miejsca w którym znajduje się kolejny znacznik <basefont>. Znacznik ten posiada parametry color, face i size, których znaczenie jest identyczne jak w przypadku znacznika <font>. Jeżeli za pomocą tego znacznika nie ustawi się domyślnej wielkości czcionki, to wynosi ona 3.
Ustawienie koloru czcionki na całej stronie można także wykonać poprzez użycie parametru text znacznika <body> , którego wartością będzie nazwa koloru lub jego szesnastkowy kod.
<body text = "blue">
Znaczniki formatujące logiczne
Znaczniki logiczne służą do określenia funkcji jaką pełni dany fragment tekstu w całym dokumencie, np. w ten sposób można zaznaczyć fragmenty które są szczególnie ważne, są przykładowymi danymi wpisywanymi do programu lub wyświetlanymi przez program, lub też zostały dodane bądź usunięte z dokumentu.
Tekst wyróżniony (emfaza)
<em> Tekst wyróżniony </em>
Tekst mocno wyróżniony
<strong> Tekst mocno wyróżniony </strong>
Cytat lub odniesienie do innego tekstu
<cite> Reality is merely an illusion, albeit a very persistent one </cite>
Krótki cytat, wypowiedź
Newton Said : <q> If I have seen further it is only by standing on the shoulders of giants </q>
Definicja
<dfn> In quantum physics, a system observable is a property of the system state that can be determined by some sequence of physical operations </dfn>
Fragment kodu program komputerowego
<code> int licz(int& liczba1,int& liczba2)
{
return liczba1 + liczba2;
} </code>
Przykładowy wynik działania program, skryptu
<samp> focal_length [pix] = $\begin{bmatrix} 3182.773 & 3181.884 \\ \end{bmatrix} \pm \begin{bmatrix} 15.689 & 15.207 \\ \end{bmatrix}\ $ </samp>
Tekst wprowadzany przez użytkownika z klawiatury
<kbd> Tekst wpisany z klawiatury </kbd>
Oznaczenie zmiennej lub parametru w programie
<var> x_coordinate </var>
Skrót
<abbr> prof. dr hab. Inż. </abbr> Taduesz Uhl
Akronim
<acronym> AGH </acronym>
Wstawiony fragment tekstu
<ins> Ten fragment został wstawiony </ins>
Usunięty fragment tekstu
<del> Ten fragment został usunięty </del>
Formatowanie tekstu na stronie WWW.
Język HTML daje możliwości formatowania tekstu m.in. podziału tekstu na paragrafy i wstawiania nagłówków.
Nagłówki - dostępnych jest sześć różnych nagłówków, różniących się wielkością czcionki. tworzy się je za pomocą znaczników od <h1> (największy) do <h6> (najmniejszy).
<h1> Nagłówek stopnia 1 </h1>
<h2> Nagłówek stopnia 2 </h2>
<h3> Nagłówek stopnia 3 </h3>
<h4> Nagłówek stopnia 4 </h4>
<h5> Nagłówek stopnia 5 </h5>
<h6> Nagłówek stopnia 6 </h6>
Nagłówek można także wyrównywać za pomocą parametru align, przypisując mu wartości left (wyrównanie do lewej), center (wyrównanie do środka), right (wyrównanie do prawej strony) i justify (tekst wyjustowany). Atrybut ten nie jest zalecany - zamiast niego powinno się stosować polecenie kaskadowych arkuszy stylów CSS text-align.
<h2 align = "left"> Nagłówek wyrównany do lewego marginesu strony </h2>
<h2 align = "center"> Nagłówek który został wyrównany do środka strony </h2>
<h2 align = "right"> Nagłówek wyrównany do prawego marginesu strony </h2>
<h2 align = "justify"> Nagłówek który został wyjustowany względem obydwu marginesów </h2>
<h2 style = "text-align: left"> Nagłówek wyrównany do lewego marginesu strony </h2>
<h2 style = "text-align: center"> Nagłówek który został wyrównany do środka strony </h2>
<h2 style = "text-align: right"> Nagłówek wyrównany do prawego marginesu strony </h2>
<h2 style = "text-align: justify"> Nagłówek który został wyjustowany względem obydwu marginesów </h2>
Dla nagłówka (oraz także dla bardzo wielu innych znaczników) można także przypisać dodatkowy tekst, który zostanie przez przeglądarkę wyświetlony gdy kursor myszki na dłużej się nad nim zatrzyma (tzw. tooltip - tekst pomocniczy). Służy do tego parametr title.
<h3 title = "To jest właśnie opis który może się pokazać jako dodatkowe wyjaśnienie"> Zatrzymaj tu kursor myszki </h3>
Paragrafy - definiuje się je za pomocą znacznika <p>. Znacznik ten posiada także parametry które zostały wymienione powyżej przy opisywaniu znaczników definiujących nagłówki, czyli align i title.
Wymuszenie przełamania wiersza (przejście do nowej linii) - służy do tego znacznik <br>.
Znacznik ten jest też jednym ze znaczników które w HTML nie mają znacznika zamykającego, dlatego pisząc swoją stronę w XHTML należy o jego zamknięciu.
Cytat - do stworzenia większego bloku zawierającego cytat, służy znacznik <blockquote>. Tak stworzony cytat jest odsunięty nieco od lewego brzegu dokumentu. Do rozdzielania kolejnych linii (np. w wierszu) należy stosować znacznik <br>.
<blockquote> <div> [...] Rational Mechanics will be the science of motions resulting from any forces whatsoever, and of the forces required to produce any motions, accurately proposed and demonstrated [...] And therefore we offer this work as mathematical principles of philosophy. For all the difficulty of philosophy seems to consist in this—from the phenomena of motions to investigate the forces of Nature, and then from these forces to demonstrate the other phenomena [...]</div> </blockquote>
Adres
<address> Katedra Robotyki I Mechatroniki <br> ul. Reymonta 7 <br> 30-059 Kraków </address>
Obramowanie – tworzy ramkę wokół tekstu
<fieldset> Ten napis znajduje się w ramce </fieldset>
Jeżeli wewnątrz niego wstawiony zostanie znacznik <legend>, to ramka będzie posiadała tytuł. Taką ramkę można użyć np. do zgrupowania przycisków radiowych w formularzu.
<fieldset><legend> Tytuł </legend> Tekst w ramce z tytułem </fieldset>
Pozioma linia
tekst nad linią <hr> tekst pod linią
Za pomocą parametrów tego znacznika można uzyskać następujące efekty:
-Usunąć "cień", za pomocą parametru noshade.
<hr noshade>
<hr style = "border-bottom: solid 1px gray">
-Zmienić grubość linii za pomocą parametru size.
<hr size = "10">
<hr style = "height: 10px">
-Zmienić długości linii - odpowiednią wartość należy podać w pikselach lub w procentach, jako wartość parametru width.
linia o długości 100 pikseli <hr width = "100">
linia o długości 50% <hr width = "50%">
linia o długości 100 pikseli <hr style = "width: 100px">
linia o długości 50% <hr style = "width: 50%">
-Wyrównać linię do jednego z brzegów lub do środka, za pomocą parametru align. Dozwolone są wartości: left (wyrównanie do lewej strony), center (wyrównanie do środka) i right (wyrównanie do prawej strony).
<hr width = "50%" align = "left">
<hr width = "50%" align = "center">
<hr width = "50%" align = "right">
<hr style = "width: 50%; text-align: left; margin-left: 0">
<hr style = "width: 50%; text-align: center; margin-left: auto; margin-right: auto">
<hr style = "width: 50%; text-align: right; margin-right: 0">
Element grupujący blokowy - czyli znacznik <div>. Został wprowadzony przede wszystkim aby umożliwić łatwe zastosowanie kaskadowego arkusza stylów w stosunku do określonej grupy znaczników HTML, ale można go także użyć go pozycjonowania elementów poprzez wykorzystanie parametru align z wartościami left, center i right.
<div align = "right">
<p> Pierwszy paragraf wyrównany do prawej </p>
<p> Drugi paragraf wyrównany do prawej </p>
</div>
<div style = "text-align: right">
<p> Pierwszy paragraf wyrównany do prawej </p>
<p> Drugi paragraf wyrównany do prawej </p>
</div>
Komentarz - w pewnych sytuacjach chcielibyśmy wstawić komentarz do pliku HTML, aby np. oznaczyć pewne miejsca (jak np. miejsce od którego zaczyna się menu czy właściwa treść strony), lub też "wyłączyć" pewne fragmenty kodu, które tymczasowo nie są potrzebne. Służy do tego znacznik <!-- -->, w obrębie którego wstawia się komentarz.
<!-- to jest komentarz -->
Grafika na stronach WWW:
Do wstawiania obrazków służy znacznik <img>. Znacznik ten nie jest zamykany w HTML, dlatego w XHTML należy pamiętać aby go zamknąć. Lokalizację obrazka podaje się za pomocą parametru src.
<img src = "Lena.jpg" alt = "Lena">
<img src = "Lena.jpg" alt = "Lena" />
Plik z obrazkiem powinien być w formacie GIF, JPEG lub PNG - te formaty plików są powszechnie obsługiwane w przeglądarkach internetowych. Adres pliku z obrazkiem można podać na kilka sposobów:
jeżeli plik jest w tym samym katalogu co strona, to najprościej podać samą nazwę pliku, czyli Obrazek.gif. Najlepiej wszystkie nazwy plików podawać małymi literami, i stosować wyłącznie znaki alfabetu łacińskiego (czyli bez na przykład bez polskich liter), cyfry, minus i znak podkreślenia "_"
jeżeli plik jest w katalogu będącym podkatalogiem katalogu gdzie jest strona, to podać należy także katalog(i) które należy "przejść" aby dotrzeć do pliku, np. images/landscapes/lake.gif. W Internecie do rozdzielania nazw katalogów w ścieżce dostępu używa się wyłącznie znaku slash "/".
jeżeli plik z grafiką znajduje się w katalogu będącym "wyżej" w strukturze katalogów niż strona na której on ma być użyty, to do tego celu stosuje się symbol .. (dwie kropki) dla oznaczenia każdego katalogu będącego "powyżej" przez który się "przechodzi", np. ../../Lena.gif, lub ../obrazki/Lena.gif jeżeli na końcu potrzebne jest jeszcze wejście do jakiegoś podkatalogu;
powyższe przykłady podawały lokalizację pliku jako względną (i taka jest zalecana). Niekiedy jednak konieczne może być podanie pełnej ścieżki dostępu do pliku względem katalogu głównego serwera (tzw. ścieżka bezwzględna na serwerze). Ścieżkę taką należy rozpocząć od znaku "/", i następnie podać wszystkie katalogi które należy "przejść" aby dotrzeć do pliku, np. /pliki/grafika/Obrazek.gif. Uwaga: jeżeli konto założone jest na serwerze i adresem strony głównej serwisu jest np. www.serwer.pl/~student/, to na początku ścieżki musisz umieścić /~student/, np. /~student/pliki/grafika/Obrazek.gif;
adres można w końcu podać także jako bezwzględny w Internecie, podając przed ścieżką także adres serwera poprzedzony oznaczeniem protokołu (zwykle http://), np. http://www.serwer.com.pl/grafika/plik.gif.
Parametry obrazków
szerokość - za pomocą parametru width, wysokość - za pomocą parametru height
<img src = "Lena.gif" width = "120" height = "140" alt = "Lena">
Za pomocą podanych parametrów można także przeskalować obrazek, podając nowy rozmiar w pikselach lub w procentach szerokości ekranu (lub elementu blokowego w którym obrazek się znajduje). Jeżeli poda się tylko jeden rozmiar, to przeglądarka dobierze drugi tak aby zachować proporcje obrazka.
<img src = "Lena.gif" width = "60%" alt = "Lena">
<img src = "Lena.gif" height = "180" alt = "Lena">
<img src = "Lena.gif" width = "160" alt = "Lena">
Podając obydwa parametry, można te proporcje zniekształcić.
Szerokość ramki otaczającej obrazek - za pomocą parametru border.
<img src = "Lena.gif" width="72" height="84" alt = " Lena " border = "5" />
<img src = "Lena.gif" width = "72" height = "84" alt = " Lena "
style = "border-width: 5px; border-style: solid" />
Alternatywny tekst dla obrazka - czyli tekst wyświetlany podczas gdy obrazek się wczytuje. Ten tekst jest też wyświetlany przez niektóre przeglądarki w momencie gdy kursor myszki zatrzyma się na dłużej nad obrazkiem. Jest też on wyświetlany przez przeglądarki tekstowe oraz indeksowany przez wyszukiwarki internetowe. Do ustawienia tekstu alternatywnego służy parametr alt.
<img src = "Lena.gif" width = "72" height = "84" alt = "Lena ">
Aby ten tekst pojawiał się po najechaniu myszką na obrazek we wszystkich przeglądarkach, należy dodatkowo dodać parametr title z tym samym tekstem:
<img src = "Lena.gif" width="72" height="84" alt = "Lena" title =" Lena">
Parametr ten jest wymagany. Przyda się on osobom korzystającym z przeglądarek tekstowych lub wyłączającym wyświetlanie grafiki aby przyśpieszyć wyświetlanie się strony a także wyszukiwarkom internetowym. Także w przypadku gdy obrazki nie wczytają się np. z uwagi na problemy z połączeniem, ten opis będzie bardzo pomocny dla osoby oglądającej stronę.
Odstęp od tekstu w poziomie - służy do tego parametr hspace.
Obrazek odsunięty od tekstu o 30 pikseli w poziomie
<img src = "Lena.gif" width = "72" height = "84" alt = "Lena"
hspace = "30">
Obrazek odsunięty od tekstu o 30 pikseli w poziomie
<img src = "Lena.gif" width = "72" height = "84" alt = "Lena"
style = "margin-left: 30px; margin-right: 30px">
Odstęp od tekstu w pionie - do tego służy parametr vspace.
obrazek odsunięty od tekstu <br>
<img src = "Lena.gif" width = "72" height = "84" alt = "Lena"
vspace = "30"><br> o 30 pikseli w pionie
obrazek odsunięty od tekstu <br>
<img src = "Lena.gif" width = "72" height = "84" alt = "Lena"
Style = "margin-top: 30px; margin-bottom: 30px"><br>
o 30 pikseli w pionie
położenie obrazka względem oblewającego go tekstu - służy do tego parametr align.
Atrybut ten może przyjmować następujące wartości:
left - obrazek po lewej stronie, wiele wierszy tekstu obok niego.
<img src="Lena.gif" width="35" height="35" alt="Lena" align="left">
<img src="Lena.gif" width="35" height="35" alt="Lena" style="float: left">
right - obrazek po lewej stronie, wiele wierszy tekstu obok niego
<img src="Lena.gif" width="35" height="35" alt="Lena" align="right">
<img src="Lena.gif" width="35" height="35" alt="Lena" style="float: right">
top - obrazek po lewej stronie, pojedynczy wiersz tekstu wyrównany do góry obrazka, pozostałe wiersze pod obrazkiem.
<img src="Lena.gif" width="35" height="35" alt="Lena" align="top">
<img src="Lena.gif" width="35" height="35" alt="Lena" style="vertical-align: top">
middle - obrazek po lewej stronie, pojedynczy wiersz tekstu wyrównany do środka obrazka, pozostałe wiersze pod obrazkiem.
<img src="Lena.gif" width="35" height="35" alt="Lena" align="middle">
<img src="Lena.gif" width="35" height="35" alt="Lena" style="vertical-align: middle">
bottom - obrazek po lewej stronie, pojedynczy wiersz tekstu wyrównany do dołu obrazka, pozostałe wiersze pod obrazkiem.
<img src="Lena.gif" width="35" height="35" alt="Lena" align="bottom">
<img src="Lena.gif" width="35" height="35" alt="Lena" style="vertical-align: baseline">
Kolor tła strony - za pomocą parametru bgcolor znacznika <body>. Jako jego wartość podaje się nazwę lub kod szesnastkowy koloru.
<body bgcolor = "green">
<body style = "background-color: green">
Plik graficzny jako tło - do tego celu można wykorzystać parametr background znacznika <body>. Jako parametr podaje się położenie pliku którego chcemy użyć jako tło. W przypadku gdy wskazany obrazek będzie miał mniejszy rozmiar niż aktualny rozmiar okna przeglądarki, przeglądarka wyświetli go tyle razy obok siebie aby wypełnić cały obszar okna przeglądarki - z tego powodu należy zadbać aby grafika używana jako tło została odpowiednio przygotowana, aby miejsca gdzie będą stykać się brzegi obrazków pozostały niewidoczne.
Przy używaniu tego znacznika warto także ustawić kolor tła za pomocą parametru bgcolor (lub polecenia CSS background-color) na kolor zbliżony do koloru obrazka - dzięki temu osoba odwiedzająca stronę będzie mogła się zapoznawać z jej treścią w momencie gdy tło nie zostało wczytane z uwagi np. na powolność łącza lub wyłączenie grafiki.
<body bgcolor="#BDB5AD" background="tlo.gif">
<body style="background-color: #BDB5AD; background: url(tlo.gif)">
Odsyłacze
Do tworzenia odnośnika używa się znacznika <a>. Jako jego parametr href podaje się adres pliku który ma być wyświetlony po kliknięciu na linku. Pomiędzy znacznikiem otwierającym a zamykającym umieszcza się zaś opis danego odnośnika.
<a href= " http://kridm.imir.agh.edu.pl/ "> Katedra Robotyki i Mechatroniki </a>
Można używać następujących protokołów, dla których obowiązują następujące zasady tworzenia adresów:
http - protokół za pomocą którego przesyłane są pliki z serwerów WWW. Można podać sam adres serwera - wtedy wczytany zostanie domyślna strona z katalogu głównego serwera:
http://www.serwer.pl
Można także podać nazwę katalogu - wtedy wczytany zostanie domyślny plik z tego katalogu:
http://www.serwer.pl/katalog
Można także podać nazwę konkretnego pliku o który nam chodzi:
http://www.serwer.pl/katalog/plik
https - szyfrowana wersja protokołu http, używana głównie do przesyłania poufnych danych. Zasady tworzenia adresu są identyczne jak powyżej, zmienia się tylko oznaczenie protokołu:
https://www.serwer.pl/katalog/plik
ftp - w oparciu o ten protokół stawiane są serwery których celem jest udostępnianie innym różnych plików. Protokół ten pozwala także na wysyłanie plików na serwer. Adres tworzy się identycznie jak w powyższych przykładach, zmienia się tylko oznaczenie protokołu:
ftp://serwer.pl/katalog/plik
Jeżeli do serwera należy się logować na konto inne niż anonimowe, to nazwę konta i Ew . hasło można także podać w adresie, stosując jeden z zapisów:
ftp://konto@serwer.pl/katalog/plik
ftp://konto:hasło@serwer.pl/katalog/plik
mailto - nie jest to typowy protokół, ale raczej polecenie dla przeglądarki aby po kliknięciu na link uruchomił domyślny program pocztowy. Podstawowa postać adresu jest następująca:
mailto:jan.kowalski@serwer.pl
List można także wysłać równocześnie do kilku osób, rozdzielając ich adresy średnikiem:
mailto:jan.kowalski@serwer.pl;artur.nowak@serwer.pl
Za adresem e-mail można umieścić po znaku "?" dodatkowe parametry, które zostaną przesłane do programu pocztowego:
adres(y) osób, które mają otrzymać kopię listu - parametr cc
mailto:jan.kowalski@serwer.pl?cc=artur.nowak@serwer.pl;
adres(y) osób, które mają otrzymać kopię listu, przy czym ich adres(y) e-mail nie będą podane w listach otrzymanych przez poszczególnych adresatów - parametr bcc
mailto:jan.kowalski@serwer.pl?bcc=szef@serwer.pl;
temat (tytuł) listu - parametr subject
mailto:jan.kowalski@serwer?subject=Zamówione materiały;
treść listu - można podać całą treść listu lub jej fragment, jako parametr body. Jeżeli będzie konieczność wstawienia znaku przejścia do nowej linii, można go wstawić zakodowany jako "%0A" mailto:jan.kowalski@serwer.pl?body=Najlepsze życzenia z okazji urodzin!%0AJan Kowalski.
Odnośniki do miejsc na stronie internetowej
Odnośnik może też prowadzić do określonego miejsca w dokumencie, także w tym który jest właśnie wyświetlany w oknie przeglądarki. Można to wykorzystać to utworzenia odnośnika pozwalającego na szybki powrót z końca strony na jej początek. Aby jednak taki "skok" był możliwy, najpierw w dokumencie w odpowiednim miejscu należy umieścić tzw. kotwicę (zakładkę), wykorzystując do tego parametr name znacznika <a>
<a name = "start"></a>
Aby przenieść się do tak oznaczonego punktu w obrębie tego samego dokumentu, należy stworzyć odnośnik, w którym miejscem docelowym będzie zdefiniowana nazwa kotwicy poprzedzona znakiem "#"
<a href = "#start"> Początek strony </a>
W przypadku gdy odnośnik ma prowadzić do miejsca umieszczonego w innym dokumencie niż bieżący, należy stworzyć odnośnik z uwzględnieniem wszystkich zasad podanych powyżej, na końcu adresu dodając jedynie nazwę docelowego miejsca w dokumencie poprzedzoną znakiem "#".
<a href = "grafika.php#ramka"> Otaczanie obrazka ramką </a>
Sposób otwierania odnośników
Docelowy dokument nie musi się także otwierać w tym samym oknie. Do uzyskania tego efektu należy użyć parametru target znacznika <a>. Parametr ten pozwala na określenie miejsca gdzie ma się załadować podana strona. Dostępne są następujące wartości specjalne:
_blank - link otwiera się w nowym oknie;
_top - link otwiera się w głównym oknie przeglądarki; ten sposób jest przydatny jeżeli strona otwiera się w ramce - dzięki niemu można "wyskoczyć" z wszystkich ramek;
_parent - podobny nieco do _top, ale wyskakuje tylko z jednej ramki (ramki mogą być zagnieżdżone);
_self - link otwiera się w tym samym oknie (lub w tej samej ramce jeżeli korzystasz z ramek). Jest to wartość domyślna.
Przykład zastosowania:
<a href = "/kursy/html/" target = "_blank"> Kurs języka HTML</a>
Zmiany kolorów linków
Do zmiany kolorów utworzonego odnośnika tekstowego można użyć parametrów znacznika <body>. Dostępne są trzy parametry:
link - określa kolor odnośnika nieodwiedzonego;
alink - określa kolor odnośnika aktywnego, czyli np. klikniętego. Kolor ten odnośnik przyjmuje po kliknięciu na nim, a przed załadowaniem się kolejnej strony.
vlink - określa kolor odnośnika odwiedzonego.
<body link = "green" alink = "yellow" vlink = "blue">
Można także ustawić kolor odnośników w taki sposób jak ustawia się kolor tekstu, czyli za pomocą znacznika <font>:
<a href="/kursy/html/"><font color="green"> Kurs języka HTML </font></a>
<a href="/kursy/html/" style="color: green"> Kurs języka HTML </a>
W HTML-u możliwe jest także tworzenie odnośników graficznych, stosując zamiast opisu tekstowego obrazek wstawiony z użyciem znacznika <img>.
<a href = "/kursy/html/"> <img src = "image.gif" width = "101" height = "77" alt = "Kurs języka HTML"> </a>
Ramka wokół obrazka może być usunięta przy pomocy znacznika border. Przy tworzeniu odnośników graficznych ważne jest aby podać opis obrazka jako parametr alt.
<a href = "/kursy/html/"> <img src = "webdir.gif" width = "101" height="77"
alt = "Kurs języka HTML" border = "0"> </a>
<a href = "/kursy/html/"> <img src = "webdir.gif" width = "101" height="77" alt = "Kurs języka HTML" style = "border-width: 0"> </a>
Mapy odsyłaczy
Podane powyżej przykłady nie wyczerpują możliwości tworzenia graficznych odsyłaczy - do dyspozycji są jeszcze tzw. mapy odsyłaczy. Mapa taka pozwala na określenie obszarów obrazka, które będą "aktywne" i określić jakie pliki ma przeglądarka załadować po ich kliknięciu. Mapę odsyłaczy tworzy się następująco:
do znacznika <img> dodaje się dodatkowy parametr usemap, którego wartością jest nazwa mapy odsyłaczy poprzedzona znakiem "#";
dodaje się do strony znacznik <map> z atrybutem name, który określa nazwę tworzonej mapy odsyłaczy;
w obrębie znacznika <map> definiuje się poszczególne aktywne obszary za pomocą znaczników <area>.
Parametry które można ustawić dla znacznika <area>:
shape oraz coords - pierwszy parametr określa kształt obszaru, zaś drugi jego współrzędne. Dostępne są następujące kształty obszarów:
rect - prostokąt, jako współrzędne podaje się współrzędne x i y lewego górnego oraz prawego dolnego narożnika obszaru. Współrzędne liczy się od jeden, początek układu współrzędnych znajduje się w lewym górnym rogu obrazka, zaś oś Y jest odwrócona (dodatnie wartości są liczone "w dół").
circle - koło, jako współrzędne podaje się współrzędne środka oraz długość promienia;
poly - wielokąt, jako współrzędne podaje się pary współrzędnych x, y kolejnych wierzchołków tego wielokąta.
href - adres dokumentu który ma się załadować po kliknięciu na danym obszarze;
alt - opis odsyłacza, który może zostać wyświetlony przez przeglądarkę gdy kursor zatrzyma się nad danym obszarem;
title - tytuł odsyłacza,
nohref - w pewnych wypadkach możemy zechcieć aby zdefiniowany obszar nie był odsyłaczem, wtedy przy jego definicji oprócz parametrów shape i coords należy podać ten parametr.
Przykład:
<img src="Obrazek.gif" width="101" height="77" alt="Linki"
title="Linki" border="0" usemap="#mapa">
<map name="mapa">
<area shape="rect" coords="1, 1, 101, 30" href="/kursy/html/"
alt="Kursy" title="Kurs">
<area shape="rect" coords="1, 48, 101, 77" href="kursy.php "
alt="Kursy PHP" title="Kursy PHP">
</map>
<img src="Obrazek.gif" width="101" height="77" alt="Linki"
title="Linki" style="border-width: 0" usemap="#mapa">
<map name="mapa" id="mapa">
<area shape="rect" coords="1, 1, 101, 30" href="/kursy/html/"
alt="Kursy" title="Kursy">
<area shape="rect" coords="1, 48, 101, 77" href="kursy.php"
alt="Kursy PHP" title="Kursy PHP">
</map>
Listy
- Lista wypunktowana
<ul>
<li> element 1 </li>
<li> element 2 </li>
<li> element 3 </li>
</ul>
Zmiana graficznego wyglądu listy:
type - określa jakich znaczników należy używać do oznaczania poszczególnych pozycji. Może przybierać następujące wartości:
disc – wypełnione kółko
<ul type = "disc">
<li> element 1 </li>
<li> element 2 </li>
</ul>
<ul style = "list-style-type: disc">
<li> element 1 </li>
<li> element 2 </li>
</ul>
circle – kółko puste w środku
square- wypełniony kwadrat
- Lista numerowana
<ol>
<li> element 1 </li>
<li> element 2 </li>
<li> element 3 </li>
</ol>
type - określa jakich znaczników należy używać do oznaczania poszczególnych pozycji. Może przybierać następujące wartości:
1 - wyliczanie z użyciem liczb arabskich:
<ol type = "1">
<li> element 1 </li>
<li> element 2 </li>
</ol>
<ol style = "list-style-type: decimal">
<li> element 1 </li>
<li> element 2 </li>
</ol>
A - wyliczanie z użyciem dużych liter alfabetu;
a - wyliczanie z użyciem małych liter alfabetu;
I - wyliczanie z użyciem liczb rzymskich pisanych dużymi literami;
i - wyliczanie z użyciem liczb rzymskich pisanych małymi literami;
- Lista definicyjna - Składa się ona z par wyrażenie-definicja.
<dl>
<dt> wyrażenie 1 </dt>
<dd> definicja 1 </dd>
<dt> wyrażenie 2 </dt>
<dd> definicja 2 </dd>
</dl>
Listy mogą być zagnieżdżane jedna w drugiej.
Tabele w HTML
Przy tworzeniu tabeli podstawę stanowią następujące znaczniki:
<table> - ten znacznik stanowi "ramę" wewnątrz której zawiera się cała definicja tabeli;
<tr> - ten znacznik służy do zdefiniowania pojedynczego wiersza tabeli. W jego obrębie muszą znajdować się definicje poszczególnych komórek tabeli;
<td> - ten znacznik z kolei służy do zdefiniowania pojedynczej komórki tabeli;
<th> - znacznik ten podobnie jak znacznik <td> definiuje pojedynczą komórkę tabeli. Różnica jest jednak taka że znacznik <th> tworzy komórkę nagłówka - test w takiej komórce jest pogrubiony.
<table>
<tr>
<th> A </th>
<th> B </th>
<th> C </th>
</tr>
<tr>
<td> D </td>
<td> E </td>
<td> F </td>
</tr>
<tr>
<td> G </td>
<td> H </td>
<td> I </td>
</tr>
</table>
Modyfikowanie wyglądu wyświetlanej tabeli
Grubość obramowania wokół tabeli - atrybut border. Jako wartość podaje się grubość obramowania (w pikselach):
<table border="5">
<tr>
<td> 11 </td><td> 12 </td>
</tr><tr>
<td> 21 </td><td> 22 </td>
</tr>
</table>
Wielkość odstępu pomiędzy komórkami (w pikselach) - atrybut cellspacing:
<table border="1" cellspacing="10">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
Wielkość odstępu pomiędzy zawartością komórki a jej obramowaniem (w pikselach) - atrybut cellpadding:
<table border="1" cellpadding="10">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
Szerokość tabeli - atrybut width. Można ją określić w pikselach lub w procentach szerokości elementu wewnątrz którego tabela jest umieszczona (jeżeli nie jest w żadnym, to brana jest szerokość okna przeglądarki):
<table border="1" width="200">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
<br>
<table border="1" width="50%">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
Wysokość tabeli (w pikselach) - atrybut height.
<table border="1" height="100">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
<table border="1" style="height: 100px">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
Kolor tła tabeli - atrybut bgcolor. Jako wartość należy podać nazwę koloru lub jego kod szesnastkowy:
<table border="1" bgcolor="yellow">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
<table border="1" style="background-color: yellow">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
Obrazek jako tło tabeli - atrybut background.
<table border="1" background="tlo.gif">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
<table border="1" style="background: url(tlo.gif)">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
Wyrównanie tabeli do brzegów dokumentu - atrybut align. Dostępne są wartości: left - wyrównanie do lewej (wartość domyślna), center - wyrównanie do środka, right - wyrównanie do prawej strony. Dodatkowo przy zastosowaniu tego parametru tekst będzie odpowiednio "oblewał" tabelę.
<table border="1" align="right">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
<table border="1" style="float: right">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
Modyfikowanie wyglądu wierszy w tabeli
Wyrównanie tekstu w komórkach w wierszu - atrybut align. Dostępne są wartości: left, center i right.
<table border="1" width="200">
<tr align="center">
<td>11</td><td>12</td>
</tr><tr align="right">
<td>21</td><td>22</td>
</tr>
</table>
Wyrównanie tekstu w pionie w komórkach w wierszu - atrybut valign. Dostępne są wartości: top - wyrównanie do góry komórki, middle - wyrównanie do połowy wysokości komórki (wartość domyślna), bottom - wyrównanie do dołu komórki.
<table border="1" width="200" style="height: 100px">
<tr valign="top">
<td>11</td><td>12</td>
</tr><tr valign="bottom">
<td>21</td><td>22</td>
</tr>
</table>
Kolor tła komórek w wierszu - atrybut bgcolor. Jako wartość należy podać nazwę koloru lub jego kod szestnaskowy.
<table border="1">
<tr bgcolor="red">
<td>11</td><td>12</td>
</tr><tr bgcolor="yellow">
<td>21</td><td>22</td>
</tr>
</table>
<table border="1">
<tr style="background-color: red">
<td>11</td><td>12</td>
</tr><tr style="background-color: yellow">
<td>21</td><td>22</td>
</tr>
</table>
Modyfikowanie wyglądu komórek tabeli
Wyrównanie tekstu w komórce - atrybut align. Dostępne są następujące wartości: left, center i right.
<table border="1" width="200">
<tr>
<td align="right">11</td><td align="center">12</td>
</tr><tr>
<td align="left">21</td><td>22</td>
</tr>
</table>
Wyrównanie zawartości komórki w pionie - atrybut valign. Dostępne są wartości: top, middle i bottom.
<table border="1" width="200" style="height: 100px">
<tr>
<td valign="top">11</td><td valign="middle">12</td>
</tr><tr>
<td valign="bottom">21</td><td>22</td>
</tr>
</table>
Szerokość komórki (w pikselach lub w procentach szerokości tabeli) - atrybut width.
<table border="1">
<tr>
<td width="50">11</td><td width="100">12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
<br>
<table border="1" width="200">
<tr>
<td width="30%">11</td><td width="70%">12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
<table border="1">
<tr>
<td style="width: 50px">11</td><td style="width: 100px">12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
<br />
<table border="1" width="200">
<tr>
<td style="width: 30%">11</td><td style="width: 70%">12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
Wysokość komórki (w pikselach lub w procentach wysokości tabeli) - atrybut height.
<table border="1">
<tr>
<td height="20">11</td><td>12</td>
</tr><tr>
<td height="40">21</td><td>22</td>
</tr>
</table>
<br>
<table border="1" height="100">
<tr>
<td height="30%">11</td><td>12</td>
</tr><tr>
<td height="70%">21</td><td>22</td>
</tr>
</table>
<table border="1">
<tr>
<td style="height: 20px">11</td><td>12</td>
</tr><tr>
<td style="height: 40px">21</td><td>22</td>
</tr>
</table>
<br>
<table border="1" style="height: 100px">
<tr>
<td style="height: 30%">11</td><td>12</td>
</tr><tr>
<td style="height:70%">21</td><td>22</td>
</tr>
</table>
kolor tła w komórce - atrybut bgcolor. Jako jego wartość należy podać nazwę koloru lub jego kod szestnastkowy.
<table border="1">
<tr>
<td bgcolor="red">11</td><td bgcolor="green">12</td>
</tr><tr>
<td bgcolor="yellow">21</td><td bgcolor="blue">22</td>
</tr>
</table>
<table border="1">
<tr>
<td style="background-color: red">11</td>
<td style="background-color: green">12</td>
</tr><tr>
<td style="background-color: yellow">21</td>
<td style="background-color: blue">22</td>
</tr>
</table>
obrazek użyty jako tło komórki - atrybut background.
<table border="1">
<tr>
<td background="tlo.gif">11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
<table border="1">
<tr>
<td style="background: url(tlo.gif)">11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
połączenie komórek w wierszu - atrybut colspan. Niekiedy konieczne jest stworzenie tabeli, gdzie zachodzi potrzeba połączenia kilku komórek w jedną. Za pomocą tego parametru można połączyć kilka komórek w wierszu - jako parametr podaje się liczbę łączonych komórek. Po połączeniu, zawartość "większej" komórki podaje się jednokrotnie:
<table border="1" width="100" style="height: 100px">
<tr>
<td>11</td><td>12</td><td>13</td>
</tr><tr>
<td colspan="2">21,22</td><td>23</td>
</tr><tr>
<td>31</td><td>32</td><td>33</td>
</tr>
</table>
połączenie komórek w kolumnie - atrybut rowspan. Za pomocą tego parametru łączy się komórki w kolumnie w jedną większą - obowiązują te same reguły co przy atrybucie colspan:
<table border="1" width="100" style="height: 100px">
<tr>
<td>11</td><td rowspan="2">12,22</td><td>13</td>
</tr><tr>
<td>21</td><td>23</td>
</tr><tr>
<td>31</td><td>32</td><td>33</td>
</tr>
</table>
Użycie zarówno colspan jak i rowspan
<table border="1" width="100" style="height: 100px">
<tr>
<td colspan="2" rowspan="2">11,12,21,22</td><td>13</td>
</tr><tr>
<td>23</td>
</tr><tr>
<td>31</td><td>32</td><td>33</td>
</tr>
</table>
Tytuł tabeli
Tabelę można także zaopatrzyć w tytuł, wstawiany za pomocą znacznika <caption>. Znacznik ten umieszcza się zaraz po znaczniku <table>.
<table border="1" width="400">
<caption>Tytuł tabeli</caption>
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
Ustawienie tytułu tabeli:
<table border="1" width="400">
<caption style="text-align: right">Tytuł tabeli</caption>
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
Tabelę można także podzielić na części odpowiadające jej funkcjom - nagłówek, stopkę i "ciało". Służą do tego znaczniki: <thead> (definicja nagłówka tabeli), <tfoot> (definicja stopki tabeli) i <tbody> (definicja ciała tabeli). Każda z takich sekcji musi zawierać co najmniej jeden wiersz tabeli, zdefiniowany z użyciem znacznika <tr>. Znaczniki zamykające we wszystkich tych znacznikach nie są wymagane, ale warto je podać. Przy znaczniku <tbody> nie trzeba również podawać znacznika otwierającego jeżeli definicja tabeli nie zawiera znaczników <thead> i <tfoot>. Tabela może zawierać kilka "ciał" zdefiniowanych znacznikami <tbody> jeżeli zawierają one odrębne grupy danych, co można później wykorzystać do obramowania tabeli w miejscach gdzie łączą się ze sobą poszczególne grupy.
<table border="1" width="200">
<thead>
<tr>
<th colspan="2">Nagłówek tabeli</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="2">Stopka tabeli</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>11</td><td>12</td>
</tr>
</tbody>
</table>
Wygląd obramowania tabeli – służy do tego parametr frame.
void - brak obramowania
<table width="60" style="height: 60px" border="1" frame="void">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
above - tylko górna krawędź
below - tylko dolna krawędź
lhs - tylko lewa krawędź
rhs - tylko prawa krawędź
hsides - górna i dolna krawędź
vsides - lewa i prawa krawędź
box - wszystkie krawędzie
border - wszystkie krawędzie
Istnieje też możliwość sterowania rysowaniem wewnętrznych krawędzi tabeli. Służy do tego parametr rules znacznika <table>. Parametr ten może przyjmować następujące wartości:
none - brak linii wewnętrznych
<table width="60" style="height: 60px" border="1" rules="none">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
all - wszystkie linie wewnętrzne są rysowane
rows - rysowane są tylko linie oddzielające wiersze
cols - rysowane są tylko linie oddzielające kolumny
Ramki
Nie zaleca się stosowania ramek podczas projektowania stron internetowych. Rozdział został dodany w celu przedstawienia kompletnego opisu języka HTML.
Strona wykorzystująca ramki:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Strona z ramkami</title>
</head>
<frameset cols = "25%,*">
<frame src = "ramka1.html">
<frame src = "ramka2.html">
<noframes>
<body>
Wersja strony dla przeglądarek nie obsługujących ramek
</body>
</noframes>
</frameset>
</html>
Podstawową zmianą jest tu brak elementu <body> - zamiast niego pojawił się <frameset>. Służy on do określenia w jaki sposób strona powinna zostać podzielona na wiersze bądź kolumny. Określa to atrybut rows (podział na wiersze) lub cols (podział na kolumny). Wysokość wierszy/szerokość kolumn można podać na trzy różne sposoby:
w procentach (np. 25%)
w pikselach (np. 100)
jako specjalną wartość "to co pozostało" (gwiazdka *)
W powyższym przykładzie strona została podzielona na dwie kolumny, o szerokości 25%, oraz szerokości odpowiadającej pozostałej części strony (tutaj 75%).
Przykład strony podzielonej na ramki w sposób bardziej skomplikowany:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Strona z ramkami</title>
</head>
<frameset rows="40%,60%">
<frameset cols="40%,*">
<frame src="ramka1.html">
<frame src="ramka2.html">
</frameset>
<frameset cols=\"25%,*,100\">
<frame src="ramka3.html">
<frame src="ramka4.html">
<frame src="ramka5.html">
</frameset>
<noframes>
<body>
Wersja strony dla przeglądarek nie obsługujących ramek
</body>
</noframes>
</frameset>
</html>
Atrybuty jakie może przyjmować znacznik <frame>:
scrolling - określa czy suwaki do przewijania zawartości ramki mają być zawsze widoczne (wartość yes; jeżeli suwak jest niepotrzebny, wyświetlany jest jako nieaktywny), zawsze ukryte (wartość no) lub pokazywane tylko gdy są potrzebne (auto - jest to wartość domyślna).
<frame src="ramka6.html" scrolling="yes">
<frame src="ramka6.html" scrolling="no">
<frame src="ramka6.html" scrolling="auto">
noresize - pozwala na zabezpieczenie przed zmianą rozmiaru ramki (za pomocą myszki można przeciągnąć belkę oddzielającą dwie ramki od siebie). Domyślnie rozmiary ramek można zmieniać.
<frame src="ramka1.html" noresize>
frameborder - określa czy obramowanie ramki powinno być wyświetlane (1 lub yes) bądź nie (0 lub no). Domyślnie obramowania są wyświetlane.
<frame src="ramka1.html" frameborder="0">
marginwidth i marginheight - określają odpowiednio marginesy lewy/plawy oraz górny/dolny dla ramki. Zawartość ramki będzie odsunięta o podaną ilość pikseli od jej krawędzi.
<frame src="ramka1.html" marginwidth="10" marginheight="50">
<frame src="ramka2.html" marginwidth="50" marginheight="10">
name - pozwala nadać ramce nazwę. Można ją użyć jako wartość atrybutu target znacznika <a>, gdy chcemy aby strona otworzyła się w innej ramce niż bieżąca.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Strona z ramkami</title>
</head>
<frameset cols="25%,*">
<frame src="ramka-menu.html" name="menu">
<frame src="ramka1.html" name="strona">
<noframes>
<body>
Wersja strony dla przeglądarek nie obsługujących ramek
</body>
</noframes>
</frameset>
</html>
W pliku ramka-menu.html znajdują się m.in. takie linie:
<a href="ramka1.html" target="strona"> Ramka 1</a><br>
<a href="ramka2.html" target="strona"> Ramka 2</a><br>
<a href="ramka3.html" target="strona"> Ramka 3</a><br>
Atrybut name można użyć także dla znacznika <frameset> - w ten sposób, odpowiednio ustawiając atrybut target można sprawić że nowa strona która się załaduje zmieni bieżący układ ramek. Dla atrybutu target można przypisać także kilka specjalnych wartości:
_blank - strona zostanie otwarta w nowym oknie przeglądarki.
_top - strona zostanie otwarta bezpośrednio w oknie przeglądarki (bieżąca struktura ramek zostanie usunięta).
_parent - strona zostanie otwarta w ramce która jest ramką nadrzędną dla bieżącej ramki.
_self - strona zostanie otwarta bieżącej ramce (wartość domyślna).
Ramki pływające
Aby wstawić ramkę pływającą na stronę, należy użyć znacznika <iframe>. Najprostszy sposób wstawienia ramki pływającej na stronę wygląda następująco:
<iframe src="ramka_iframe.html" width="400" height="300"> Ramka pływająca!
</iframe>
W przykładzie powyżej podane są następujące atrybuty dla znacznika <iframe>:
src - określa adres dokumentu który zostanie załadowany do ramki;
width - określa szerokość ramki w pikselach;
height - określa wysokość ramki w pikselach;
Wewnątrz taga <iframe> należy napisać tekst który pojawia się gdy przeglądarka nie obsługuje ramek.
Podobnie jak w przypadku zwykłych ramek, można kontrolować czy paski przewijania mają się pojawić lub nie. Służy do tego atrybut scrolling. Można do niego przypisać następujące wartości:
auto - wartość domyślna. Paski przewijania pojawią się tylko wtedy gdy to będzie konieczne;
yes - paski przewijania zawsze będą widoczne (jeżeli zawartość ramki nie będzie wymagała przewijania, pasek przewijania będzie nieaktywny);
no - paski przewijania nie będą wyświetlane. Jeżeli zawartość ramki będzie wymagała przewinięcia, jedynym sposobem dostania się do treści poniżej jest przyciśnięcie lewego przycisku myszy w ramce i przeciągnięcie w dół, lub użycie kółeczka na myszce (ale te sposoby nie zawsze działają).
Likwidacja obramowania ramki pływającej:
<iframe src="ramka_iframe.html" width="400" height="300" frameborder="0">
Twoja przeglądarka nie obsługuje ramek pływających!
</iframe>
Określenie szerokości marginesów w pionie i poziomie:
<iframe src="ramka_iframe.html" width="400" height="300"
marginwidth="50" marginheight="30">
Twoja przeglądarka nie obsługuje ramek pływających!
</iframe>
Ramce pływającej można też przypisać nazwę, za pomocą której można się do niej odwołać jako miejsca docelowego dla odnośnika, lub z poziomu JavaScript. Służy do tego atrybut name.
Formularze w HTML
Podstawowe ramy formularza wyznacza znacznik <form>. Znacznik ten posiada kilka atrybutów których można użyć. Jednym z nich jest atrybut action. Jest to atrybut obowiązkowy, który określa gdzie mają zostać wysłane dane z formularza. Jego wartością może być dowolny adres URL. Zazwyczaj wstawia się tu adres rozpoczynający się od http:// lub https://, wymaga to jednak posiadania skryptu który uruchomi się na serwerze i przetworzy przesłane dane (np. skrypt napisany w PHP). Można też skorzystać z możliwości wysłania zawartości formularza na adres email, podając swój adres email w formacie mailto:alias@serwer.com.pl.
Drugim atrybutem który warto zawsze ustawiać, jest method. Może on przyjąć dwie wartości: get albo post. W przypadku gdy chcemy wysłać dane z formularza na adres email, należy użyć wartości post. Jeżeli natomiast dane trzeba wysłać do skryptu na serwerze, można użyć dowolnej z tych dwóch wartości.
Szkielet formularza:
Warunkiem zgodności kodu HTML strony ze standardem (X)HTML Strict jest aby zawartość formularza umieścić wewnątrz znacznika będącego pojemnikiem, takim jak np. <> czy <div>.
<form action="alias@serwer.com.pl" method="post"><div>
Treść formularza
</div></form>
Zawartość formularza jest przed wysyłaniem odpowiednio przetwarzana. Domyślnie dane z formularza kodowane są wg standardu URL Encode. Powyższy ciąg znaków jest to wynik wysłania formularza który zawierał pola imie, nazwisko i adres strony WWW. Polskie znaki oraz niektóre znaki nie będące literami lub cyframi zostały zakodowane w postaci %XX, co jest mało czytelne. Nazwy pól są połączone z ich wartościami za pomocą znaków "=", a wszystkie takie pary są dodatkowo połączone w jeden długi ciąg znaków za pomocą znaków "&". Sposób kodowania danych z formularza można określić za pomocą dodatkowego atrybutu enctype. Aby zawartość wysyłanego maila była czytelna, należy mu przypisać wartość text/plain, co w wolnym tłumaczeniu oznacza "czysty tekst". Po jego dodaniu, szkielet formularza będzie wyglądał następująco:
<form action="ktos@gdzies.com.pl" method="post" enctype="text/plain">
<div>
Tutaj będzie zawartość formularza
</div>
</form>
Elementy formularza:
Pola tekstowe:
<input type = "text" name = "imie">
Znacznik <input> jest używany także do tworzenia wielu innych elementów formularza - zależy to od wartości atrybutu type. Drugim atrybutem który użyłem jest name - określa on nazwę pola formularza; to ona pojawia się po lewej stronie znaku równości. Do wyświetlonego pola tekstowego można wpisać jakiś swój tekst który pojawi się po wyświetleniu strony. Do tego celu służy atrybut value:
<input type="text" name="imie" value="Daniel">
Można też ograniczyć maksymalną ilość znaków:
<input type="text" name="kod_pocztowy" maxlength="6">
Wielowierszowe pola tekstowe
Pole tekstowe stworzone za pomocą znacznika <input type="text"> pozwala na wpisanie tylko jednego wiersza tekstu. Czasami jest jednak potrzeba wpisania kilku wierszy tekstu. Wtedy należy użyć znacznika <textarea>.
<textarea name="tresc" rows="5" cols="50">Tekst wyświetlany domyślnie po otwarciu strony</textarea>
Pole do wpisywania haseł – password
W przypadku gdy jednym z pól formularza jest pole do podania hasła (np. w formularzu logowania), wtedy ze względów bezpieczeństwa zalecane jest użycie znacznika <input type="password">. Jest to nieco zmodyfikowana wersja znacznika <input type="text">, która wyświetla zamiast wpisywanych znaków gwiazdki, zatem osoba postronna która akurat będzie w pobliżu nie będzie mogła zobaczyć hasła.
<input type="password" name="haslo" value="TajneHaslo">
Pole jednokrotnego wyboru (radio buttons)
<input type="radio" name="odpowiedz" value="tak" checked> Tak <br>
<input type="radio" name="odpowiedz" value="nie"> Nie <br>
<input type="radio" name="odpowiedz" value="niewiem"> Nie wiem
Znacznik ten posiada atrybuty type, name i value. Wszystkie trzy znaczniki podane w powyższym przykładzie posiadają tą samą przypisaną nazwę - w ten sposób przeglądarka rozpoznaje grupę przycisków, z których tylko jeden można będzie zaznaczyć na raz. W momencie wysłania formularza wartość zaznaczonego przycisku zostanie wysłana razem z jego wartością, np. odpowiedz=tak. Jeżeli żaden z przycisków nie zostanie zaznaczony, nic nie zostanie wysłane. Czasami możesz chcieć aby jeden z przycisków był domyślnie zaznaczony - do tego służy atrybut checked.
Pole wielokrotnego wyboru (checkbox)
Służy on do tworzenia pól wielokrotnego wyboru.
<input type="checkbox" name="zainteresowania" value="sport" checked> Sport<br>
<input type="checkbox" name="zainteresowania" value="ksiazki">Książki<br>
<input type="checkbox" name="zainteresowania" value="komputery" checked> Komputery
Pole listy (listbox) i listy rozwijanej (combobox)
Do formularza można także wstawić pola listy (listbox) i pola listy rozwijalnej (combobox). Obydwa można utworzyć za pomocą znacznika <select>. Znacznik ten posiada atrybut size, który określa ile elementów ma być widocznych, czyli inaczej wysokość listy. Ustawiony na 1 daje pole listy rozwijalnej, dla wartości > 1 – pole zwykłej listy. Wszystkie elementy listy umieszcza się wewnątrz znacznika <select>, ograniczając je dodatkowo znacznikami <option>.
<select name="jezyk" size="1">
<option> Polski </option>
<option> Angielski </option>
<option> Niemiecki </option>
<option> Francuski </option>
</select>
Na liście rozwijalnej (combo) domyślnie wybrany jest pierwszy element. Wartością która zostanie wysłana do serwera po wybraniu któregoś z elementów jest zawartość znacznika <option> </option>. Aby przesyłać inne wartości, można je podać za pomocą atrybutu value.
<select name="jezyk" size="3">
<option value="pl">Polski</option>
<option value="en">Angielski</option>
<option value="de">Niemiecki</option>
<option value="fr">Francuski</option>
</select>
W polu listy (listbox) można domyślnie zaznaczyć tylko jeden element. Można to zmienić poprzez dodanie do znacznika <select> atrybutu multiple. Atrybut ten nie wymaga podania żadnej wartości. Po jego użyciu, będzie możliwe zaznaczenie większej ilości elementów poprzez klikanie na nich z naciśniętym klawiszem Ctrl na klawiaturze.
Dla każdej z list (listbox i combobox) można określić który element ma być domyślnie wybrany. Służy do tego atrybut selected, który należy umieścić we właściwym znaczniku <option>. Nie wymaga on podawania wartości. W przypadku pola listy (listbox) i atrybutu multiple, można użyć tego atrybutu kilkakrotnie aby zaznaczyć kilka elementów listy:
<select name="jezyk" size="3" multiple>
<option selected>Polski</option>
<option selected>Angielski</option>
<option>Niemiecki</option>
<option>Francuski</option>
</select>
Wysyłanie formularza
Po wypełnieniu formularza, użytkownik będzie chciał go wysłać. Aby mu to umożliwić, należy użyć znacznika <input type="submit">:
<input type = "submit">
<input type="submit" name="wyslij" value="Wyślij">
Lub poprzez zastosowanie grafiki:
<input type="image" src="Obrazek.gif" alt="Wyślij">
Kolejnym znacznikiem który jest od czasu do czasu stosowany jest znacznik <input type="reset">. Jego naciśnięcie spowoduje usunięcie wszystkich wartości wpisanych do formularza i zastąpienie ich wartościami domyślnymi (czyli takimi które pojawiły się zaraz po załadowaniu strony).
<input type="reset">
<input type="reset" value="Wyczyść formularz">
Wysyłanie pliku na serwer
<input type = "file" name = "plik">
Użycie tego znacznika jest jednak nieco trudniejsze od pozostałych, gdyż dodatkowo trzeba ustawić typ kodowania formularza na multipart/form-data za pomocą atrybutu enctype znacznika <form>:
<form action="wyslij_plik.php" method="post" enctype="multipart/form-data"><div>
Tutaj będzie zawartość formularza
</div></form>
Formularze zakończenie
Oprócz wymienionych powyżej znaczników, jest jeszcze kilka innych które przydają się podczas konstrukcji formularzy. Pierwszym z nich jest znacznik <fieldset>, który wraz ze znacznikiem <legend> pozwala tworzyć ramki z tytułem.
<fieldset><legend>Wybierz odpowiedź</legend><br>
<input type="radio" name="odpowiedz" value="tak">Tak<br>
<input type="radio" name="odpowiedz" value="nie">Nie<br>
<input type="radio" name="odpowiedz" value="niewiem">Nie wiem
</fieldset>
Drugim przydatnym znacznikiem jest <label>. Pozwala on na tworzenie opisów tekstowych, których kliknięcie spowoduje uaktywnienie określonej kontrolki. Aby to zrobić, należy przypisać kontrolkom w formularzu identyfikatory za pomocą atrybutów id (każda musi mieć inny identyfikator, nawet jeżeli mają te same nazwy nadane atrybutem name). Następnie identyfikatory używa się jako wartości atrybutu for znacznika <label>.
<input type="radio" name="odpowiedz" id="odp_tak" value="tak"><label for="odp_tak">Tak</label><br>
<input type="radio" name="odpowiedz" id="odp_nie" value="nie"><label for="odp_nie">Nie</label><br>
<input type="radio" name="odpowiedz" id="odp_niewiem" value="niewiem"><label for="odp_niewiem">Nie wiem</label>
Wysyłanie formularza bez pomocy programu pocztowego
Do wysyłania formularzy konieczny jest program pocztowy, np. MS Outlook, Mozilla Thunderbird lub inny. Problem w tym, że część użytkowników w ogóle takiego programu nie posiada, ponieważ swoją pocztę odczytują za pomocą tzw. aplikacji webmail, czyli specjalnej strony WWW. Takie strony-aplikacje udostępniają wszystkie duże portale oferujące darmowe konta e-mail. W języku HTML ani nawet JavaScript nic nie da się zrobić. Z pomocą przychodzą skrypty obsługiwane po stronie serwera, jak np. PHP. Aby skorzystać z tego rozwiązania, serwer na którym znajduje się strona przede wszystkim musi obsługiwać PHP. Co więcej, funkcja służąca do wysyłania listów e-mail (pod nazwą: mail) za pośrednictwem skryptów PHP musi być włączona. Niestety administratorzy, zwłaszcza darmowych serwerów, czasami blokują tę funkcję, aby konta nie były wykorzystywane do rozsyłania spamu.
Przedstawiony poniżej opis zakłada, że Twój serwer obsługuje skrypty PHP, a funkcja mail nie została zablokowana. Ponadto zwracam uwagę, że poniższy skrypt zadziała dopiero po wprowadzaniu strony na serwer WWW. Nie będzie można go przetestować na swoim dysku lokalnym, a co więcej sam wygląd formularza może być wtedy nieprawidłowy.
Aby wysłać formularz bez pośrednictwa programu pocztowego, należy utworzyć normalną stronę HTML. Ważne jest tylko, aby plikowi nadać rozszerzenie *.php, a nie *.html, czyli np. formularz.php.
<?php
if (count($_POST))
{
////////// USTAWIENIA //////////
$email = 'adres e-mail gdzie wysłać formularz';
// Adres e-mail adresata
$subject = 'temat'; // Temat listu
$message = 'Dziękujemy za wysłanie formularza';
// Komunikat
$error = 'Wystąpił błąd podczas wysyłania formularza';
// Komunikat błędu
$charset = 'iso-8859-2'; // Strona kodowa
//////////////////////////////
$head =
"MIME-Version: 1.0\r\n" .
"Content-Type: text/plain; charset=$charset\r\n" .
"Content-Transfer-Encoding: 8bit";
$body = '';
foreach ($_POST as $name => $value)
{
if (is_array($value))
{
for ($i = 0; $i < count($value); $i++)
{
$body .= "$name=" . (get_magic_quotes_gpc() ? stripslashes($value[$i]) : $value[$i]) . "\r\n";
}
}
else $body .= "$name=" . (get_magic_quotes_gpc() ? stripslashes($value) : $value) . "\r\n";
}
echo mail($email, "=?$charset?B?" . base64_encode($subject) . "?=", $body, $head) ? $message : $error;
}
else
{
?>
<form action="?" method="post">
Tutaj umieść wszystkie pola formularza
</form>
<?php
}
?>
adres e-mail gdzie wysłać formularz - Twój adres poczty elektronicznej e-mail.
Temat - Tytuł, jaki będzie nosił formularz, tzn. temat listu, który otrzymasz, kiedy formularz zostanie wysłany.
Dziękujemy za wysłanie formularza - Komunikat, który zostanie wyświetlony użytkownikowi po wysłaniu formularza. W jego treści można używać dowolnych znaczników HTML.
Wystąpił błąd podczas wysyłania formularza - Komunikat, który zostanie wyświetlony użytkownikowi w przypadku wystąpienia błędu. W jego treści można używać dowolnych znaczników HTML.
iso-8859-2 - Wartość, która musi być identyczna jak strona kodowa dokumentu HTML, w którym znajduje się formularz. Warto zauważyć, że jeśli prawidłowo wypełnisz tę wartość, nie powinno być żadnych problemów z wysyłaniem formularzy zawierających polskie znaki diakrytyczne, jak to ma miejsce w przypadku prostego formularza pocztowego.
Tutaj umieść wszystkie pola formularza- Właściwa zawartość formularza, utworzona w tradycyjny sposób.
Zwróć uwagę na specjalną formę znacznika <form>...</form> - nie należy nic w niej zmieniać. We właściwej treści formularza nie wolno już umieszczać drugiego znacznika <form>...</form>. Zauważ także, że za znacznikiem zamykającym </form> znajduje się jeszcze dodatkowy krótki blok kodu. Nie zapomnij go wpisać!
Przykład formularza którego treść może zostać wysłana na maila:
<p>Jaką lubisz muzykę (możesz zaznaczyć więcej możliwości)?</p>
<input type="checkbox" name="Muzyka[]" value="Rock" />Rock<br />
<input type="checkbox" name="Muzyka[]" value="Metal" /> Metal<br />
<input type="checkbox" name="Muzyka[]" value="Pop" />Pop<br />
<input type="checkbox" name="Muzyka[]" value="Techno" />Techno<br />
<input type="checkbox" name="Muzyka[]" value="Muzyka poważna" />Muzyka poważna<br />
<input type="checkbox" name="Muzyka[]" value="Inna" />Inna (podaj jaka):
<input name="Muzyka[]" />
<p>Jakie znasz systemy operacyjne (możesz wybrać kilka opcji trzymając klawisz Ctrl)?</p>
<select name="System operacyjny[]" multiple="multiple" size="3">
<option selected="selected">Dos</option>
</select>
Jeżeli w formularzu takim znajdują się pola wyboru (<input type="checkbox" />) albo lista rozwijalna z możliwością wyboru kilku opcji - typ rozszerzony (<select multiple="multiple">...</select>), na końcu nazwy każdego pola typu checkbox oraz w nazwie takiego elementu select, obowiązkowo należy postawić pusty nawias kwadratowy: []. Wewnątrz tych nawiasów nie może być żadnego znaku, nawet spacji!