HTML Cz.2
Nagłówek i treść
Znaczniki <body>...</body> oraz <meta /> określają pewne informacje na temat strony jako całości.
Polecenie BODY powinno wchodzić w skład każdego dokumentu HTML. Stanowi ono właściwą treść, czyli tzw. ciało, w którym zawierają się wszystkie inne znaczniki,
dotyczące formatowania, a także zwykły tekst. Podając dodatkowe atrybuty dla znacznika BODY, można określić niektóre cechy wyglądu całej strony, takie jak kolor
tła oraz tekstu lub szerokość marginesów.
W jednym dokumencie może się znajdować tylko jeden znacznik <body> - zaraz po nagłówku strony (<head>...</head>).
Nagłówek i treść
Znacznik <meta /> stanowi tzw. metainformację, pozwalającą określić pewne ogólne wiadomości, dotyczące dokumentu, m.in. sposób kodowania znaków, opis
zawartości strony, jej autora czy język, w którym została napisana.
Metainformacje nie wpływają bezpośrednio na wygląd dokumentu, lecz cechy które podają, są równie ważne. Chociaż nie są one wymagane, warto je stosować,
ponieważ może to np. pomóc w odszukaniu strony przez wyszukiwarki sieciowe.
Każdy dokument powinien zawierać obowiązkowo przynajmniej deklarację strony kodowej, bez której polskie litery na stronie mogą zostać błędnie wyświetlone! W pojedynczym dokumencie znajduje się zwykle kilka znaczników <meta /> - każdy
dotyczy innej wiadomości - wszystkie muszą znajdować się wewnątrz nagłówka strony (<head>...</head>).
Tło obrazkowe
<body background="ścieżka dostępu do obrazka">...</body>
lub
<body background="ścieżka dostępu do obrazka" bgproperties="fixed">...</body>
Należy unikać stosowania w tle dużych obrazków wyciętych ze zwykłych zdjęć. Tło powinno: mieć łagodne kolory (pastelowe, blade albo całkiem ciemne, ale nie jaskrawe; szczególnie odradza się jednoczesnego stosowania barw jasnych oraz
ciemnych, ponieważ uniemożliwia to dobranie odpowiednio czytelnego koloru tekstu), składać się z powtarzalnych wzorów o niezbyt wielkich rozmiarach oraz być
nieco rozmyte - nieostre (można to uzyskać w dowolnym bardziej rozbudowanym programie graficznym - odpowiedni efekt nazywa się zwykle: Rozmywanie albo
Blur). Dobrym pomysłem są tła imitujące strukturę jakiejś powierzchni.
UWAGA!
Jeśli ustalimy kolor tekstu strony (text="...") zbliżony do domyślnego koloru tła (zwykle biały), wskazane jest podanie dodatkowo takiego koloru tła (bgcolor="..."),
aby tekst był na nim czytelny.
Jeżeli tego nie zrobimy, a obrazek nie zostanie wyświetlony, może wystąpić sytuacja typu: "biały tekst na białym tle".
UWAGA!
Atrybut BACKGROUND jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.
Atrybut BGPROPERTIES nie wchodzi w skład specyfikacji HTML 4.01 - zaleca się stosowanie stylów.
Wyświetlanie
Język HTML przewiduje dwa podstawowe modele wyświetlania treści znaczników:
w bloku - podczas wyświetlania bloku w przeglądarce, automatycznie dodawane są znaki końca linii (linijki przerwy) przed oraz po takim bloku tak, że każdy taki element jest wyświetlany w nowej linii. Generalnie element blokowy może zawierać
wewnątrz siebie zwykły tekst, jak również inne elementy blokowe. Został on pomyślany do tworzenia obszerniejszych struktur niż elementy wyświetlane w linii.
Wyjątkami od tej reguły są akapit i adres, które mimo że stanowią elementy blokowe, nie mogą zawierać w sobie dodatkowych bloków - w tym innych
akapitów.
w linii - elementy takie są wyświetlane normalnie, tzn. bez dodawania dodatkowych interlinii przed i po (tak jak zwykły tekst). Dwa takie elementy mogą znajdować się w jednej linii - obok siebie. Nie mogą one zawierać w sobie elementów blokowych,
ale mogą inne elementy wyświetlane w linii oraz zwykły tekst.
Akapit
<p>...</p>
wyświetlanie: w bloku
Akapit jest to część tekstu objęta znacznikami: <p>...</p>. Następujące
bezpośrednio po sobie akapity są oddzielone przerwą w tekście (pustą linią). Dzięki umieszczaniu w kolejnych akapitach treści nieco różniącej się tematycznie, strona
stanie się bardziej estetyczna oraz czytelniejsza.
Akapit
Stosując akapity możemy skorzystać z kilku metod wyrównywania tekstu na stronie (czyli jego ustawienia):
Wyrównanie do lewej (domyślnie)
<p align="left">...</p> lub <p>...</p>
Wyrównanie do prawej
<p align="right">...</p>
Wyśrodkowanie
<p align="center">...</p>
Justowanie (wyrównanie do obu marginesów jednocześnie)
<p align="justify">...</p>
Atrybut ALIGN jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.
Tytuł
<hn>...</hn>
(n = 1...6)
Aby nadać tytuł (nagłówek) jakiejś części tekstu (rozdziałowi), możesz użyć tej komendy. Istnieje sześć rzędów tytułów. Najwyższym rzędem jest rząd pierwszy:
<h1>...</h1>, a najniższym - szósty: <h6>...</h6>. Tytuł wyższego rzędu jest pisany większą czcionką
UWAGA: Znaczniki tytułów (nagłówków) nie mogą zawierać elementów blokowych.
Blok
<div>...</div>
Polecenie to wydziela większy blok tekstu.
W odróżnieniu od paragrafu, blok może zawierać wewnątrz siebie inne elementy wyświetlane w bloku. Kolejne bloki są oddzielane od siebie znakami nowej linii, ale
nie są dodawane linijki przerwy
(aby je dodać, należy np. zastosować znacznik <br />).
Migotanie
(nie wszystkie przeglądarki!)
<blink>...</blink>
Wprowadza na ekran migający tekst.
Znacznik BLINK nie wchodzi w skład specyfikacji HTML 4.01 - zaleca się stosowanie stylów.
Wyróżnienie
Zwykłe (emfaza)
<em>...</em>
Mocne (mocna emfaza)
<strong>...</strong>
Pozwala wyróżnić dowolny tekst (tzw. emfaza), aby podkreślić jego znaczenie.
Indeks
Indeks górny
<sup>...</sup>
Indeks dolny
<sub>...</sub>
Umożliwia wprowadzenie indeksów (górnych lub dolnych) przy cyfrach i literach.
Pozioma linia
<hr />
Polecenie to pozwala narysować na ekranie poziomą linię. Może ona np. rozdzielać kolejne rozdziały, które różnią się tematycznie, przez co strona staje się bardziej
czytelna i przejrzysta.
Wygląd poziomej linii może się różnić w zależności od przeglądarki.
Obramowanie
<fieldset>...</fieldset>
Wprowadza obramowanie wokół wybranego fragmentu tekstu.
Prawdziwe zastosowanie znacznika <fieldset> to grupowanie pól formularza.
Tabele – struktura
<table>
<tr>
<td>...</td> <td>...</td>
</tr>
<tr>
<td>...</td> <td>...</td>
</tr>
</table>
Jest to najprostsza tabela, gdzie:
<table>...</table>
jest znacznikiem tabeli
<tr>...</tr>
jest znacznikiem wiersza
<td>...</td>
jest znacznikiem pojedynczej komórki
W miejsce kropek należy wpisać treść poszczególnych komórek tabeli.
UWAGA: w obrębie tabeli tekst i inne elementy można wstawiać tylko wewnątrz znaczników komórek i ewentualnie tytułu tabeli, a nie poza nimi! Poza obrębem tych znaczników można umieszczać tylko ściśle określone elementy, które zostaną
szczegółowo opisane w tym rozdziale. Zatem poniższy kod będzie nieprawidłowy:
PRZYKŁAD1: Po wpisaniu:
<table>
<tr>
<td>komórka1</td> <td>komórka2</td>
</tr>
<tr>
<td>komórka3</td> <td>komórka4</td>
</tr>
</table>
Otrzymamy:
komórka1 komórka2 komórka3 komórka4
Jak widać, taka tabela nie ma obramowania, dlatego jest mało czytelna.
UWAGA:
W oparciu o tabele można tworzyć strukturę strony (wydzielone miejsca na nagłówek, menu, treść itd..). Jest to jednak podejście daleko nieprofesjonalne i obecnie uważane za błędne. Strukturę strony powinno się budować w oparciu o
elementy blokowe, a tabeli używać do prezentacji treści do tego odpowiednich.
Obramowanie
<table border="x">...</table>
gdzie "x" oznacza grubość zewnętrznej ramki tabeli (w pikselach).
Dodaje obramowanie pomiędzy komórkami tabeli, czyli pionowe i poziome linie dzielące poszczególne wiersze oraz kolumny. Pozwala określić szerokość
zewnętrznej części tego obramowania.
Marginesy w komórkach
<table border="1" cellpadding="x">...</table>
gdzie "x" oznacza szerokość marginesu (w pikselach).
Komenda wprowadza dodatkowe marginesy (poziome i pionowe) we wszystkich komórkach tabeli, przez co wygląda ona bardziej estetycznie.
Odstępy między komórkami
<table border="1" cellspacing="x">...</table>
gdzie "x" oznacza szerokość odstępu między sąsiednimi komórkami (w pikselach).
Znacznik ten umożliwia wprowadzenie dodatkowych odstępów pomiędzy wszystkimi sąsiadującymi komórkami tabeli. Aby zobaczyć różnicę pomiędzy tego
typu odstępami a marginesami wewnątrz komórek, trzeba nadać tabeli obramowanie.
Wymiary
Wymiary całej tabeli
<table width="x" height="y">...</table>
lub
<table width="x%" height="y%">...</table>
Gdzie "x" oznacza szerokość w pikselach, a "x%" szerokość w procentach całego ekranu lub względem wymiarów elementu nadrzędnego.
Wymiary
Wymiary pojedynczej komórki
<table>
<tr>
<td width="x" height="y">...</td>
</tr>
</table>
lub
<table>
<tr>
<td width="x%" height="y%">...</td>
</tr>
</table>
UWAGA1: Atrybut HEIGHT dla znacznika TABLE nie wchodzi w skład specyfikacji HTML 4.01.
UWAGA2: Atrybuty WIDTH oraz HEIGHT dla komórki tabeli (TD) są
zdeprecjonowane przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.
Przykład:
Wyrównanie tabeli
<table align="rodzaj">...</table>
gdzie jako "rodzaj" należy wpisać:
"left" - wyrównanie tabeli do lewej strony (domyślnie), względem otaczającego tekstu
"right" - wyrównanie tabeli do prawej strony, względem otaczającego tekstu
"center" - wyśrodkowanie tabeli
Polecenie to pozwala umiejscowić tabelę w wybranym przez nas miejscu na ekranie.
Uwaga: Atrybut ALIGN jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.
Wyrównanie zawartości tabeli
Wyrównanie zawartości całego wiersza
<table>
<tr align="rodzaj" valign="ustawienie">...</tr>
</table>
Wyrównanie zawartości pojedynczej komórki
<table>
<tr>
<td align="rodzaj" valign="ustawienie">...</td>
</tr>
Wyrównanie zawartości tabeli
W obu przypadkach należy podać:
RODZAJ:
"left" - wyrównanie zawartości (wiersza lub komórki) do lewej (domyślnie)
"right" - wyrównanie zawartości do prawej
"center" - wyśrodkowanie zawartości
USTAWIENIE:
"top" - ustawienie zawartości (wiersza lub komórki) na górze
"bottom" - ustawienie zawartości na dole
"middle" - ustawienie zawartości po środku (domyślnie)
Łączenie komórek
Poziome łączenie komórek
<table>
<tr>
<td colspan="x">...</td>
</tr>
</table>
gdzie "x" oznacza liczbę komórek do połączenia w poziomie.
Polecenie to pozwala na poziome lub pionowe łączenie komórek w tabeli, dzięki czemu jedna komórka (połączona) może się rozciągać na kilka komórek
pojedynczych.
Pionowe łączenie komórek
<table>
<tr>
<td rowspan="y">...</td>
</tr>
</table>
gdzie "y" oznacza liczbę komórek do połączenia w pionie.
Polecenie to pozwala na poziome lub pionowe łączenie komórek w tabeli, dzięki czemu jedna komórka (połączona) może się rozciągać na kilka komórek
pojedynczych.
Multimedia
Obrazek
<img src="ścieżka dostępu" alt="Tekst alternatywny" />
O określonych rozmiarach:
<img src="ścieżka dostępu" alt="Tekst alternatywny" width="x" height="y" />
lub
<img src="ścieżka dostępu" alt="Tekst alternatywny" width="x%" height="y%" />
gdzie jako "x" oraz "y" należy wpisać odpowiednio: długość i wysokość obrazka w pikselach.
Natomiast jako "x%" oraz "y%" należy wpisać odpowiednio: długość i wysokość obrazka w procentach ekranu.
Obrazek
O określonym ustawieniu względem tekstu:
<img src="ścieżka dostępu" alt="Tekst alternatywny" align="rodzaj" />
gdzie jako "rodzaj" należy wpisać:
"left" - obrazek ustawiony po lewej stronie względem otaczającego go tekstu
"right" - obrazek po prawej stronie względem tekstu
"top" - tekst ustawiony na górze obrazka
"middle" - tekst ustawiony na średniej wysokości względem obrazka
"bottom" - tekst ustawiony na dole obrazka (domyślnie)
UWAGA: Atrybut ALIGN jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.
Formularze
Dzięki formularzom, które są umieszczane bezpośrednio na stronie WWW, możesz uzyskać wiele informacji o użytkownikach odwiedzających Twój serwis.
Formularz ma formę elektronicznej ankiety, którą wypełnia się wprost na stronie.
Możliwe jest przy tym wpisywanie tekstu, odpowiadanie na zadane pytania, czy zaznaczanie jednej bądź kilku z podanych możliwości wyboru. Taki formularz może
być przesłany pocztą elektroniczną e-mail (prosty formularz pocztowy) i odebrany przez adresata. Istnieje wiele programów wspomagających odbieranie formularzy i
grupowe wysyłanie listów na ich podstawie, przez co czynność ta może stać się mniej żmudna. Są to zarówno aplikacje w postaci programów instalowanych tradycyjnie, jak i specjalne skrypty wykonywane bezpośrednio w przeglądarce (np.
PHP).
Ramy formularza
<form action="mailto:adres " method="post">
(Tutaj umieszcza się pola formularza)
</form>
lub
<form action="mailto:adres?subject=temat" method="post">
(Tutaj umieszcza się pola formularza)
</form>
gdzie jako "adres" podaj swój adres poczty elektronicznej e-mail.
Natomiast zamiast "temat" można wpisać tytuł, jaki będzie nosił formularz (jest to przydatne zwłaszcza w przypadku stosowania programów obsługujących
formularze).
UWAGA!
Formularzy nie można zagnieżdżać, tzn. umieszczać jednego w drugim.
W przypadku użycia Strict DTD, wewnątrz znaczników <form>...</form> muszą się znaleźć dodatkowe znaczniki obejmujące wszystkie elementy formularza.
Znacznikami obejmującymi mogą być: div, p, fieldset, h1, h2, h3, h4, h5, h6, pre, address, ins, del.
Formularz – pola
Każdy formularz składa się z różnych typów pól, dzięki którym użytkownik może wprowadzać dane. Są to np. pola do wpisywania tekstu, czy też pozwalające wybrać
jedną, bądź kilka, z podanych opcji.
Jako wartość atrybutu action="..." można również podać adres skryptu PHP lub CGI (jeśli znajduje się on na tym samym serwerze, wystarczy podać względną ścieżkę dostępu). Skrypt taki stanowi specjalny program, wykonywany wprost na stronie WWW (na serwerze). Potrafi on, zgodnie z poleceniami programisty, przetworzyć
wszystkie dane i np. zapisać je w oddzielnym pliku. W ten sposób oszczędzamy sobie wiele pracy, a wyniki mogą zostać natychmiastowo wyświetlone na ekranie -
nie trzeba tego wykonywać ręcznie.
Pole tekstowe
<form action="..."> <input type="text" name="nazwa" /> </form>
lub
<form action="..."> <input name="nazwa" /> </form>
gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skróconą treść pytania), która nie powinna być jednak zbyt długa! Zostanie ona później wysłana wraz z
formularzem.
Atrybut name="...", powinien być unikatowy w obrębie formularza, tzn. żadne dwa pytania w tym samym formularzu nie powinny mieć takiej samej nazwy.
Pole tekstowe
Możliwe jest także podanie dodatkowych atrybutów:
Odpowiedź domyślna:
<input type="text" name="nazwa" value="odpowiedź domyślna" />
W miejsce tekstu: "odpowiedź domyślna" można wpisać domyślną treść danej odpowiedzi. Zostanie ona dołączona do formularza, jeśli użytkownik nie wpisze
innej.
Pole tekstowe
Możliwe jest także podanie dodatkowych atrybutów:
Długość pola:
<input type="text" name="nazwa" size="k" />
gdzie jako "k" można podać długość pola w ilości znaków, które będą w nim jednocześnie widoczne (domyślnie 20 - w Internet Explorerze). Oczywiście
użytkownik będzie mógł wpisać do takiego pola dowolną liczbę znaków, niezależnie od atrybutu size="...".
Pole tekstowe
Możliwe jest także podanie dodatkowych atrybutów:
Maksymalna ilość znaków, które można wpisać do pola:
<input type="text" name="nazwa" maxlength="n" />
gdzie jako "n" podaj maksymalną dopuszczalną ilość liter, z których może składać się odpowiedź - użytkownik nie będzie mógł wpisać dłuższego tekstu.
Pole tekstowe
Możliwe jest także podanie dodatkowych atrybutów:
Pole tylko do odczytu:
<input type="text" name="nazwa" readonly="readonly" />
Wstawienie atrybutu readonly="readonly" powoduje, że tekstu zapisanego domyślnie w tym polu (atrybut value="odpowiedź domyślna"), nie będzie można
modyfikować. Wartość pola jest jednak normalnie przesyłana w formularzu.
Pole tekstowe
Możliwe jest także podanie dodatkowych atrybutów:
Blokada pola:
<input type="text" name="nazwa" disabled="disabled" />
Wstawienie atrybutu disabled="disabled" powoduje zablokowanie pola.
Hasło
<form action="...">
<input type="password" name="nazwa" />
</form>
gdzie jako "nazwa" należy wpisać nazwę danego pola. Zostanie ona później wysłana wraz z formularzem. Nazwa nie powinna być zbyt długa!
Pole wyboru
<form action="...">
<input type="checkbox" name="nazwa" value="wartość" />Tu wpisz opis pola
</form>
gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skróconą treść pytania), która nie powinna być zbyt długa. Zostanie ona później wysłana wraz z
formularzem.
Natomiast jako "wartość" podaj treść danej odpowiedzi. Zostanie ona również dołączona do formularza.
Pole wyboru
UWAGA: Wszystkie pola tego typu, które dotyczą tego samego pytania, powinny nosić taką samą nazwę! Dodatkowo atrybut value="..." jest tutaj absolutnie konieczny - musi on być inny dla każdej możliwości odpowiedzi!
Pole opcji
<form action="...">
<input type="radio" name="nazwa" value="wartość" />Tu wpisz opis pola
</form>
gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skróconą treść pytania), która nie powinna być zbyt długa. Zostanie ona później wysłana wraz z
formularzem.
Natomiast jako "wartość" podaj treść danej odpowiedzi. Zostanie ona również dołączona do formularza.
Pole opcji
UWAGA: Pamiętaj aby wszystkie pola tego typu, które dotyczą tego samego pytania, nosiły koniecznie taką samą nazwę! Dodatkowo atrybut value="..."
jest tutaj absolutnie konieczny - musi on być inny dla każdej możliwości odpowiedzi!
Domyślne zaznaczenie pola:
<input type="radio" name="nazwa" value="wartość" checked="checked" />Opis
Podanie atrybutu checked="checked" powoduje domyślne zaznaczenie pola
Lista rozwijalna
<form action="...">
<select name="nazwa">
<option>Tu wpisz pierwszą możliwość</option>
<option>Tu wpisz drugą możliwość</option>
(...)
</select>
</form>
gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skróconą treść pytania).
Zostanie ona później wysłana wraz z formularzem (wysłane zostaną również
Obszar tekstowy
<form action="...">
<textarea name="nazwa" cols="x" rows="y">tekst domyślny</textarea>
</form>
gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skróconą treść pytania).
Zostanie ona później wysłana wraz z formularzem.
Natomiast "x" oraz "y" oznaczają odpowiednio: ilość kolumn i wierszy tekstu, które mogą się jednocześnie zmieścić w polu, bez jego przewijania.
Formularze – inne pola
Formularze oferują jeszcze pola innego typu – bardziej zaawansowane lub specyficzne przydane przy konkretnych zastosowaniach. Temat warto zgłębić
doczytując szczegóły w sieci lub książce.
Wysłanie formularza
Przycisk tekstowy:
<form action="...">
<input type="submit" value="wartość" />
</form>
gdzie jako "wartość" należy wpisać napis, który pojawi się na przycisku wysyłania formularza. Jeśli opuścimy ten parametr, pojawi się tam domyślny tekst, np.:
"Prześlij kwerendę".
Polecenie wprowadza na ekran przycisk z tekstem, po naciśnięciu którego, nastąpi wysłanie formularza.
Przycisk
<button type="rodzaj">Treść przycisku</button>
gdzie "rodzaj" określa typ przycisku i można tutaj podać:
"submit" - przycisk wysłania formularza "reset" - przycisk wyczyszczenia danych "button" - zwykły przycisk (domyślnie)
Wprowadza na ekran przycisk. Polecenie to jest zbliżone do przycisków: wysłania oraz wyczyszczenia formularza, a także do: <input type="button" value="napis" />.
Jednak pozwala ono dodatkowo, wprowadzić do przycisku grafikę, tabelkę i inne elementy - wystarczy umieścić dodatkowe znaczniki pomiędzy <button> a
</button> (w miejsce treści przycisku). Można również dowolnie formatować tekst,
Grupowanie pól
Wersja podstawowa:
<fieldset>
(Pola formularza) </fieldset>
Wersja z tytułem:
<fieldset>
<legend>Tytuł</legend>
(Pola formularza) </fieldset>
Pozwala zgrupować tematycznie kilka pól formularza, dzięki czemu zostają one objęte ramką.
KONIEC cz.2
