Jest to wersja do druku podręcznika HTML

Jeśli widzisz tę informację, to nie drukuj niczego! Kliknij na link Wersja do druku, aby pozbyć się tej ramki, paska nawigacyjnego i innych niepotrzebnych elementów.
Kliknij Odśwież tę stronę przed wydrukowaniem, by wczytać najnowsze zmiany.
Więcej informacji o książkach do druku znajdziesz na stronie Wikibooks:Podręczniki do druku.

Spis treści

Wstęp
Język HTML
Dodatek A
Dodatek B
Dodatek C - HTML5

O podręczniku

Założenia podręcznika

Celem tego podręcznika jest nauczenie czytającego tworzenia stron internetowych zgodnych ze standardami ustanowionymi przez World Wide Web Consortium (w skrócie W3C), które zapewniają zarazem poprawną interpretację stron przez znaczną większość aktualnie używanych przeglądarek internetowych. Autorzy mają na celu przedstawienie omawianych zagadnień w bardzo przystępny sposób. Tak aby każdy użytkownik komputera mógł nauczyć się tego języka, nie zagłębiając się w szczegóły.

Jak korzystać z tej książki?

Nie ma ścisłej reguły na to, jak masz przerabiać ten podręcznik. Jeżeli interesuje cię dane zagadnienie, śmiało możesz do niego zaglądnąć, omijając przy tym któryś z rozdziałów. Mimo to zalecamy przerobienie minimum trzech pierwszych rozdziałów. Zawierają one kluczową treść, która jest potrzebna do zrozumienia istoty języka, jak i dalszej nauki.

Pomoc

Jeżeli chcesz pomóc w rozwoju tego podręcznika, możesz zrobić to już teraz, np. edytować jakiś rozdział lub poprawić literówki. Będziemy bardzo zadowoleni z twojej współpracy. Należy przy tym pamiętać, by trzymać się konwencji tworzenia, która jest zawarta poniżej.

Konwencja

Jakiekolwiek tagi HTML lub też całe źródła dokumentów prosimy o wstawianie pomiędzy znacznik: <source lang="html4strict"></source>

Wstęp

Czym jest HTML?

Aby umieścić w Internecie jakąś treść dostępną dla wszystkich, musimy znać odpowiedni język, który będzie zrozumiały dla człowieka i maszyny. W dodatku język ten musi być uniwersalny i musi posiadać ścisłe reguły, by komputery wszystkich użytkowników mogły go odczytać. Tym językiem jest właśnie HTML (ang. HyperText Markup Language, pol. hipertekstowy język znaczników).

Co on umożliwia?

HTML umożliwia określenie wyglądu dokumentu w przeglądarce internetowej. Do szczegółowego opisu formatowania akapitów, nagłówków, użytych czcionek i kolorów, zalecane jest wykorzystywanie kaskadowych arkuszy stylów (CSS)

Do czego służy HTML?

publikacji dokumentów w których zawarte są między innymi: tekst, tabele, obrazy, listy itp.
wczytywania informacji za pośrednictwem hipertekstowych łączy zawartych w formie przycisku.
konstruowania różnego rodzaju formularzy, np. wyszukiwarki, rezerwacji itp.
umieszczania multimediów, np. klipów wideo, muzyki.

Historia HTML-a

W tym krótkim wstępie pominę pierwotne szkice HTML. Od razu zaczynamy od pierwszej specyfikacji.

Nie było nigdy HTML 1. Numeracja zaczęła się od 2.0, aby zobrazować różnicę tego języka od HTML i HTML+. Opublikowany został w 1996 jako Request for Comments, zawierała pomysły zarówno ze szkicu HTML jak i HTML+. Okazało się jednak, że na te czasy HTML 2 był zbyt złożony (wielu ludzi używało jeszcze komputerów z systemem DOS). Trzy miesiące później wstrzymano prace nad HTML 3 z tego samego powodu. Jednak kilka razy wstrzymywano i odnawiano prace nad tym językiem, aż HTML 3.2 został 14 stycznia 1997 roku stał się nowym standardem.

Pod koniec 97 roku niemal wszyscy mieli komputery o dużej mocy obliczeniowej i dobre przeglądarki, więc 18 grudnia W3C stworzyło nowy standard - HTML 4. Praktycznie żadna przeglądarka nie radziła sobie jeszcze z CSS i wieloma innymi elementami, ale wszystko było już na dobrej drodze. Wobec tego HTML 4 został podzielony na trzy standardy: Strict - kiedy przeglądarki będą gotowe, należy używać tego trybu; Transitional - zezwala na używanie elementów prezentacyjnych; Frameset - to Transitional + możliwość używania ramek.

W wigilię 1999 roku dołączone zostały drobne poprawki dla HTML 4 jako HTML 4.01.

W drugi dzień Świąt Bożego Narodzenia 2000 roku powstał XHTML 1.0 - HTML 4 przeniesiony na grunt XML-a. Przeglądarki i programiści byli gotowi na XML i wydanie Strict - wciąż jednak było dość daleko od ideału (a także zbyt wiele stron było zbudowanych w trybie Transitional i trochę w Frameset), więc pozostawiono wszystkie trzy tryby. Potem powstały kolejne poprawki i wersje, których nie będziemy omawiać.

Stan dzisiejszy i plany

Od 10 kwietnia 2001 roku nic się nie zmieniło z HTML-em, ale ludzie i komputery są już całkiem inni. Wszyscy byli gotowi na semantyczny kod (czyli każdy znacznik c o ś z n a c z y) i CSS, więc w połowie poprzedniej dekady W3C zebrało dwie grupy - jedna chciała stworzyć XHTML 2, który miał być całkowicie inny od HTML-a oraz HTML5, który miał być wysokim rozwinięciem HTML-a 4 i dodawać wiele możliwości. Dzięki naciskom producentów przeglądarek (kompatybilność wsteczna - wersje były wydawane za wolno, ludzie nie aktualizowali przeglądarek, IE kulał całkowicie) w 2009 roku grupa XHTML2 została zawieszona, a kadra została przeniesiona do prac nad HTML5, aby przyspieszyć jego pracę.

Na razie to tyle o historii. Zapraszam do dalszej lektury :)

Żadna dziedzina z kategorii programowania, nie jest teraz tak prosta, jak dziś. Teraz każdy może założyć swoją stronę - klubu, zbioru pewnej społeczności (np. forum), i to w ciągu kilku minut.

Jednak - takie strony nie zabierają jakieś ogromnej popularności. Często, jeśli faktycznie coś tam się dzieje, to taka strona zawsze wkrótce może wygasnąć. Dlatego warto założyć prawdziwą stronę WWW, która może mieć połączenie normalnej strony z artykułami + forum, galerie i co tylko nam dusza podpowie.

Strony, które cieszą się dużą popularnością, to przede wszystkim różnorakie portale - połączenie kilku „gatunków” na swojej jednej stronie. Prowadzenie, i skupianie się tylko na jednej rzeczy, owszem to dość dobre rozwiązanie pod warunkiem, że to się opłaca - by to sprawdzić, wystarczy zainwestować w prosty skrypt licznika odwiedzin.

Jeśli znudziły nam się gotowe rozwiązania dostępne na wielu stronach, możemy się zacząć skupić nad tworzeniem strony WWW...

WYSIWYG

Jakież to wspaniałe! Nie muszę się uczyć żadnych niezrozumiałych poleceń, wystarczy jedno kliknięcie tu i tam i gotowe!. Tak, to prawdziwa zaleta. Jednak tylko dla początkujących projektantów. Jednak bardziej obeznany użytkownik, może dostrzec pewne wady, a starzy wyjadacze chleba, praktycznie same wady:

Niezgodność - takie programy zwykle potrafią pisać kod tylko pod konkretną przeglądarkę. Nie ma Żadnej gwarancji na to, czy strona poprawnie wyświetli się na innej. Np. FrontPage - potrafi doskonale dostosować kod do przeglądarki Internet Explorer. Mamy na swojej stronie, migający tekst, wzorki, układ strony w tabeli etc. A teraz wchodzi na naszą stronę użytkownik Firefox - nie uświadczy u nas żadnych świecidełek, które powodują że strona staje się atrakcyjna. Widzi tylko samą grafikę i tekst, układ strony który został napisy w tabeli (nie natomiast w CSS) zupełnie się rozsypuje.
Objętość - Kod jest generowany automatycznie, często zawiera wiele niepotrzebnych informacji które nadal tam są, chociaż nie wypełniliśmy odpowiednio całego formularzu, odpowiadającego na odnośniki...
Wiedza - korzystając z takiego typu oprogramowania, praktycznie w ogóle się nie nauczymy tworzyć stron, bo do tego potrzebna jest znajomość kodu źródłowego, nie natomiast programu w którym go tworzymy.

WYWIWYG

Jest to kompromis, pomiędzy nic nie uczącym WYSIWYG, a pomiędzy topornością w edytorach tekstu dla programistów. Takie programy posiadają m.in. szablony stron, funkcje podobne do WYSIWYG, jednak główna metoda edycji strony ogranicza się tylko do trybu źródłowego - tzw. "trybem graficznym" można zobaczyć jako podgląd, nic w nim natomiast nie poprawimy.

Taki program ułatwia wypełnianie znaczników, często też posiadają szkice formularzy itd. jednak ich zgodność nie jest regułą.

Kilka programów dostępnych pod różne platformy:

Windows - kED (nierozwijany)
Linux - Bluefish
Mac OS - SilverMac

Edytory tekstu

Wyglądają jak proste edytory tekstu ala notatnik z Windows lub nano z systemu linux. Mają jednak bardzo ważną cechę - podświetlają składnię dla języków. Dlatego, pomimo swojej toporności dla programistów są one bardzo użyteczne - największe programy potrafią obsłużyć w zasadzie każdy język programowania.

poniżej kilka programów:

Windows - Notepad++
Linux - Gedit

Język HTML

Najprościej będzie jak zaczniemy naszą naukę od stworzenia swojej pierwszej strony. W tym celu w swoim edytorze stwórz nowy plik i przepisz lub skopiuj kod przedstawiony poniżej:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <!-- Deklaracja typu dokumentu -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <!-- standard w3c -->
<head>
  <meta http-equiv="Content-type" content="application/xhtml+xml; charset=iso-8859-2" /> <!-- Kod kodowania Polskich znaków -->
  <meta name="Description" content=" wstaw tu opis strony " />
  <meta name="Keywords" content=" wstaw tu słowa kluczowe " />
  <meta name="Author" content=" dane autora " />

  <title> tytuł strony </title>

  <link rel="stylesheet" href=" nazwa_arkusza_stylow.css " type="text/css" /> <!-- standard CSS -->
</head>
<body>

<p>tutaj wstaw treść strony</p>

</body>
</html>

Nie przejmuj się na razie, że nic z tego nie rozumiesz. Zaraz wszystko się wyjaśni. Zapisz teraz swoją stronę pod nazwą index.html. Teraz możemy otworzyć stronę w przeglądarce by zobaczyć rezultat. Brawo, stworzyłeś swoją pierwszą stronę. Na razie nikt prócz ciebie jej nie zobaczy, ponieważ jest ona tylko na twoim komputerze. Zajmijmy się teraz analizą stworzonej strony.

Przedstawiony powyżej kod zawiera w większości tzw. znaczniki, czyli tekst w nawiasach ukośnych, których używa się do budowy strony WWW. Prawie wszystkie znaczniki otwiera się i zamyka, umieszczając przykładowo <html> i </html>. Istnieją jednak wyjątki, takie jak tag <img>, służący do wstawiania obrazków na stronie, ale omówimy go później. Przestrzenie pomiędzy znacznikami otwierającym i zamykającym nazywamy sekcjami. W sekcjach można umieszczać inne znaczniki i tekst.

Analiza

Deklaracja typu dokumentu

Każdy poprawny dokument HTML rozpoczyna się od linijki definiującej jego typ. Ze względu na typ dokumenty HTML dzielimy na:

strict: w pełni zgodny ze standardami W3C,
transitional: zawierający elementy pozwalające na tworzenie stron w znacznej mierze zgodnych ze standardem W3C, jednak zapewniających dostęp do funkcji, które nie są przez W3C popierane, jak np. decydowanie za użytkownika, gdzie otworzyć się ma odnośnik (brak elementu target, będzie o nim mowa później),
frameset: wariant typu transitional pozwalający na użycie ramek.

Zależnie od typu dokumentu HTML musimy wybrać stosowną dla niego definicję, którą umieścimy w pierwszej linijce kodu naszej strony internetowej. Podręcznik jest ukierunkowany na naukę HTML-a o jak najlepszej zgodności ze standardami, więc wybierzemy typ strict.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Jeżeli chciałbyś skorzystać z typu transitional powinieneś zamiast tego wpisać:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Natomiast dla frameset:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Nie musisz oczywiście uczyć się tego na pamięć. Wystarczy, że będziesz miał te linijki gdzieś pod ręką.

Zapiszmy teraz nasz dokument. Nadajmy mu nazwę index.html – prawie wszystkie serwery stron WWW przeszukują na początku katalog z plikami naszej strony w poszukiwaniu pliku o tej nazwie, w wypadku nie znalezienia takiego pliku zwracają one zwykle błąd 404 (informujący o tym, że poszukiwana strona nie została odnaleziona) lub wyświetlają zawartość katalogu. Najlepiej utworzyć dla niego jakiś osobny katalog, ponieważ później dodamy jeszcze kilka innych plików.

Pozostałe

- W miejscu znaczników: <meta> - Pozwala umieścić bardzo ważne dla wyszukiwarek informacje. 3 Zostały w kodzie wyjaśnione (między znacznikami). Ten ostatni, z linijką ISO-8859-2 jest bardzo ważny - pozwala na uzyskanie polskich znaków. Jest to powszechnie uznany standard, i jego zmiana może spowodować błędy w większości komputerów!
- W miejscu znaczników: <title </title> wpisujemy tytuł strony. Jest wykorzystywany w belce tytułowej przeglądarki internetowej oraz jako nazwa odnośnika w wyszukiwarce (w Google odznacza się niebieskimi napisami)
- standard CSS - to osobny plik, o którym dowiemy się więcej w książce CSS. Pozwala na zdefiniowanie układu strony, np. menu po lewej stronie, na górze banner na dopiero na środku właściwa treść.
W miejscu tekstu: wstaw tu opis strony krótko opisujemy naszą witrynę. Z tej funkcji korzystają wyszukiwarki internetowe - tekst który tutaj wpiszesz, pojawi się w wyszukiwarce, poniżej odnośnika do twojej strony. Jeśli pozostawimy pole puste, pojawi się kilka pierwszych linijek które znajdują się na stronie.
W miejscu tekstu: wstaw tu słowa kluczowe - Tu wpisujemy słowa kluczowe, z których również korzysta wyszukiwarka by odnaleźć twoją stronę. Trzeba tam wpisać tagi tak dopasowane, by najwierniej odzwierciedlały zawartość strony. Jest to jedna z podstaw SEO których nie będziemy omawiać, ze względu na przeznaczenie książki. Zainteresowanych odsyłamy tutaj
Po tym przychodzi sekcja <body></body>. Obejmuje ona to, co chcemy umieścić na naszej stronie – czyli treść w postacji tekstu, zdjęć, obrazów i pozostałych właściwościach multimedialnych

W sekcji body utworzyliśmy akapit za pomocą znaczników <p></p>, w którego sekcji umieściliśmy nasz tekst. Nie jest to konieczne, ale zwiększa czytelność strony.

To wszystko. W dalszych rozdziałach będziemy rozbudowywać nasz dokument i poznawać nowe elementy. Ponadto, by wykorzystać ten szablon radzimy skasować z niego wszystko, co znajduje się pomiędzy 

Znaczniki

Jak już zapewne zauważyłeś, kod HTML składa się ze znaczników (ang. tags), które umieszczamy w nawiasach ostrych < i >. Z tych elementów składają się niemal wszystkie strony internetowe. Niemal każdy znacznik HTML musi zostać zamknięty – przeglądarka musi wiedzieć, gdzie np. rozpoczyna się tabelka, a gdzie kończy. Jeżeli zdarzy się, że zapomnisz domknąć któryś z otwartych znaczników, może to sprawić, że cały wygląd strony będzie zupełnie różny od oczekiwań.

Znacznik otwierający wygląda tak:

<jakis_znacznik>

natomiast zamykający:

</jakis_znacznik>

atrybuty

do każdego znacznika można dodać opcjonalne atrybuty. dodaje się je do znacznika otwierającego, a oddziela spacją, w taki sposób:

<jakis_znacznik atrybut="wartość" inny_atrybut="wartość">

I tak na przykładzie

<a href="http://www.wikibooks.pl" title="wikibooks">wikibooks</a>

Składnia

Należy także pamiętać o kolejności wstawiania znaczników. Nie wolno ich "mieszać".

<i>Lorem <b>ipsum</b>, <b>dolor</b> sit <u>amet</u></i>

To jest poprawny zapis. Natomiast:

<b>Lorem <i>ipsum</b> dolor <b><u>sit</i></u> amet</b>

Już nie jest poprawny. Prowadzi nie tylko do nieścisłości w kodzie, ale także do bałaganu. Lepiej od razu wyrobić sobie nawyk pisania znaczników we właściwej kolejności.

Wpisywanie tekstu

Jeśli chcemy umieścić na stronie WWW zwykły tekst, możemy wpisać go bezpośrednio z klawiatury - w miejsce właściwej treści dokumentu. Nie trzeba przy tym stosować żadnych dodatkowych poleceń. Należy jednak pamiętać, że przeglądarka internetowa automatycznie zawinie wszystkie wiersze, dlatego w edytorze HTML tekst możemy wpisywać dowolnie, np. po wpisaniu:

To jest zwykły tekst...
To jest zwykły tekst...
To jest zwykły tekst...
To jest zwykły tekst...

Na ekranie otrzymamy:

To jest zwykły tekst... To jest zwykły tekst... To jest zwykły tekst...

W edytorze możemy zakończyć linię (klawisz Enter) w dowolnym miejscu - tam, gdzie jest to wygodne. Nie należy przedzielać wyrazów, z jednej linii do drugiej, za pomocą pauzy:

To jest zwykły tekst... To jest zwykły tekst... To jest zwy-
kły tekst...

W HTML-u można oczywiście tworzyć listy różnego rodzaju.

Punktowanie

Aby coś wypunktować należy użyć znacznika

<ul>

w następujący sposób:

<ul>
<li>kropka 1</li>
<li>kropka 2</li>
..
..
..
</ul>

Numeracja

Aby coś wymienić po kolei należy użyć znacznika

<ol>

w podobny sposób jak w wypunktowaniu, czyli:

<ol>
<li>Numer 1</li>
<li>Numer 2</li>
..
..
..
</ol>

Listy definiowane

Czyli po prostu dwustopniowe. Aby zastosować ten typ listy należy wpisać:

<dl>
<dt>Produkt 1</dt>
<dd>Typ 1 Produktu 1</dd>
<dd>Typ 2 produktu 1</dd>
..
..
..
<dt>Produkt 2</dt>
<dd>Typ 1 Produktu 2</dd>
..
..
..
</dl>

W HTML można umieszczać linki (nazywane również odnośnikami lub (hiper)łączami) do dokumentów lub ich części. Wstawia się je w następujący sposób:

<a href="Adres">Opis odnośnika</a>

W miejsce adres możemy zamieścić praktycznie wszystko to, co znajdziesz w poniższej tabelce:

Spis odsyłaczy

Do	Opis	Kod	Przykład	Uwagi
Podstrony	W otrębie tej samej (naszej) strony	`<a href="względna ścieżka dostępu">opis</a>`	Wstęp do podręcznika
Etykiety	To pewne zaznaczone miejsce na stronie - w otrębie tego samego dokumentu	`<a href="(ścieżka do strony)#nazwa_etykiety">opis odsyłacza</a>`	Zob. tabela "Spis treści".
Adresu internetowego	Czyli hiperłącze poza naszym serwisem - w otrębie całego internetu :-)	`<a href="http://adres strony">opis</a>`	Nasz siostrzany projekt	Adres zawsze musi rozpoczynać się od http://
E-mail	Do komunikacji z czytelnikami	`<a href="mailto:adres e-mail">opis</a>`	mailto:mxmaru@gmail.com	By uchronić swój adres przed botami wysyłającym spam, można e-mail dodać do kodu źródłowego strony w sekcji `head` w miejscu `meta`, lub wykorzystać Web Code Protector
FTP		`<a href="ftp://ftp.adres">opis</a>`
NNTP	Network News Tranport Protocol - Sieciowy Protokół Transportu Wiadomości, używany przez grupy dyskusyjne.	`<a href="nntp://adres">opis</a>`
Telnet		`<a href="telnet://użytkownik@adres">opis</a>`
SSH		`<a href="ssh://użytkownik@adres">opis</a>`
SLL		`<a href="https://adres">opis</a>`
Odsyłacz do skryptu	Używany przede wszystkim wtedy, kiedy zwykle już się zagłębimy w tworzenie stron i będziemy używali np. Javy czy PHP.	`<a href="javascript:polecenia">opis</a>`
WAIS		`<a href="wais://adres">opis</a>`
Gopher		`<a href="gopher://adres">opis</a>`

Komunikatory internetowe

podlinkowania do komunikatorów mają swoje odzwierciedlenie także w HTML:

Do	Opis	Kod	Kod statusu użytkownika	Uwagi
Gadu-Gadu	Najpopularniejszy w Polsce protokół komunikacyjny	`<a href="gg:numer">opis</a>`	`<img src="http://status.gadu-gadu.pl/users/status.asp?id=numer&styl=styl" alt="Gadu-Gadu" />`	drugi znacznik pozwala na pokazanie statusu użytkownika. Gdzie styl należy podać liczbę która pojawi się w wypadku braku aktywności. 1 to niedostępny 2 dostępny 3 zaraz wracam
ICQ	Ten natomiast jest najpopularniejszym protokołem zagranicą.	`<a href="icq:numer">opis</a>`	<img src="http://web.icq.com/whitepages/online?icq=numer&img=status" alt="ICQ" />
Tlen	Konkurencyjny dla Gadu-gadu protokół	`<a href="tlen://chat\|użytkownik\|">opis</a>`	`<img src="http://status.tlen.pl/?u=użytkownik&t=styl" alt="Tlen" />`
Skype	Najpopularniejszy na świecie komunikator głosowy	`<a href="skype:użytkownik">opis</a> <a href="skype:użytkownik?akcja">opis</a>`^[1]	<img src="http://mystatus.skype.com/ikony/użytkownik" alt="Skype" />	Gdzie pisze ikony należy podać jeden z tych zestawów ikon: smallicon, mediumicon, smallclassic, bigclassic, balloon.
Jabber		`<a href="xmpp:użytkownik@serwer">opis</a>`	brak
Yahoo! Messenger		`<a href="ymsgr:sendim?użytkownik">opis</a>`	`<img src="http://opi.yahoo.com/online?u=użytkownik&m=g&t=typ" alt="Yahoo! Messenger" />`
AIM		`<a href="aim:goim?screenname=użytkownik&message=wiadomość">opis</a>`	brak

Po czym poznać hiperłącze?

Tekst

Na stronie internetowej jako hiperłącze może występować tekst. Poznać go można po tym, że jest najczęściej koloru granatowego i podkreślony. Jeśli dany link na stronie już odwiedziliśmy, pojawi się kolor fioletowy. Można zmieniać ich wygląd korzystając z CSS.

Obrazy

W przypadku obrazów też można rozpoznać hiperłącze - wokół obrazu pojawia się niebieska ramka. Łatwo jednak jest się jej pozbyć: wystarczy wstawić atrybut border="0" w znaczniku, jednak bardziej zalecane jest używanie styli CSS.

Przypisy

↑ Akcje:
call - rozmowa głosowa
chat - rozmowa tekstowa
add - dodaj do kontaktów
userinfo - profil użytkownika
voicemail - poczta głosowa
sendfile - wyślij plik

Wstawianie obrazów

Obrazy wstawiamy przez polecenie:

<img src="nazwaobrazka.rozszerzenie">

Co dziwniejsze, poniższy wiersz także jest dozwolony, lecz nie jest zalecany:

<img src="nazwaobrazka.rozszerzenie"></img>

Kiedy w taki sposób zapiszemy kod, pamiętajmy o tym, by pomiędzy tymi znacznikami nic nie wpisywać.
Przypuśćmy, że mamy obraz o nazwie woda z rozszerzeniem jpg. Wtedy piszemy:

<img src="woda.jpg">

Jeżeli obrazek znajduje się na innym serwerze, należy podać jego pełny adres, tak jak w przypadku odnośników.

Komentarze do obrazu

Umiesz już wstawiać obrazki. Co się stanie, jeżeli jakaś osoba wyłączy wyświetlanie obrazów na stronie WWW(chociaż to bardzo mało prawdopodobne)? Co się stanie, jeżeli obraz nie zostanie wyświetlony? Właśnie wtedy, możemy wykorzystać komentarze. Komentarz jest to tekst, jaki zostanie wyświetlony po najechaniu kursorem na obraz. W takim razie jak go umieścić? Jest to oczywiście bardzo proste. Służy do tego opcja alt.

<img src="woda.jpg" alt="Ten obraz przedstawia wodę!">

Efekt możemy zobaczyć, zatrzymując kursor na obrazie. Jednak nie należy w ten sposób tworzyć etykietek/komentarzy pojawiających się przy najechaniu myszką na obraz. Atrybut alt służy do ustalania tekstu wyświetlanego przy wyłączeniu wyświetlania obrazków. Oto poprawny przykład:

<img src="woda.jpg" alt="Ten obraz przedstawia wodę!" title="komentarz"/>

Powinniśmy zawsze dołączać takie komentarze do swoich obrazków, ponieważ jeśli tego nie zrobimy, to osoby niewidome korzystające z programów odczytu ekranu, nie będą wiedziały co jest na obrazku. Opis taki powinien być niezbyt długi i zawierać najważniejsze informacje.

Rozmiary

Obraz jest zbyt duży? Chcesz go zmniejszyć? Żaden problem. Służą do tego dwie proste instrukcje:
width - określa szerokość obrazu
height - określa wysokość obrazu
!UWAGA! Rozmiary podajemy w pikselach!
Przypuśćmy, że nasz obraz jest zbyt duży. Ma wymiary 700 pikseli szerokości i 500 pikseli wysokości. Chcemy, by miał 400 pikseli szerokości i 100 pikseli wysokości. Zatem:

<img src="woda.jpg" alt="Ten obraz przedstawia wodę!" width="400" height="100">

Pamietaj, że nawet jeśli zmniejszysz w ten sposób obrazek, to z serwera przesłany zostanie w pełnych rozmiarach, i przy dużych plikach wydłuży czas wczytywania strony.

Otwieranie obrazu w pełnych rozmiarach

Aby tego dokonać trzeba umieścić obraz w linku. Przypomnijmy, prototyp linku przedstawia się następująco:

<a href="adres">To jest link!</a>

Po kliknięciu na tekst, strona przenosi nas pod podany adres. A teraz zajmijmy się obrazkiem. Instrukcja powinna wyglądać tak:

<a href="woda.jpg"><img src="woda.jpg" alt="Ten obraz przedstawia wodę!" width="400" height="100"></a>

Po kliknięciu na obraz, zostaje on wyświetlony w nowym oknie. Ale można zauważyć niechciany efekt: niebieskie obramowanie. Aby je zlikwidować, trzeba dodać instrukcję border = 0. Tak więc całość będzie wyglądała tak:

<a href="woda.jpg"><img src="woda.jpg" alt="Ten obraz przedstawia wodę!" width="400" height="100" border="0"></a>

Jako href możemy podać też dowolny adres, by klikając na obrazek przejść do innej strony. Tak więc

<a href="http://pl.wikibooks.org"><img src="woda.jpg" alt="Ten obraz przedstawia wodę!" width="400" height="100" border="0"></a>

jest również poprawny.

Od czego zacząć?

Tabele można tworzyć na dwa sposoby:

- za pomocą znacznika pre
- za pomocą znacznika table

Na początek spróbujmy zrobić swoją pierwszą tabelę za pomocą znaczników

<pre></pre>

Jak wiemy, HTML ignoruje białe spacje. Na przykład chcemy stworzyć taką tabelę:

Imię	Nazwisko
Super	Programista
Jasiek	Kowalski

Gdy napiszemy:

<p>
Imię             Nazwisko
Super            Programista
Jasiek           Kowalski
</p>

zostanie wypisane:

Imię Nazwisko Super Programista Jasiek Kowalski

Niezupełnie nam o to chodziło. Jak widzimy, HTML całkiem zignorował białe spacje. Jednak wcześniej wymieniona instrukcja

<pre></pre>

pomija tą niedogodność.

W takim razie użyjmy ją! Zapisując:

<pre>
Imię             Nazwisko
Super            Programista
Jasiek           Kowalski
</pre>

Otrzymamy:

Imię             Nazwisko
Super            Programista
Jasiek           Kowalski

O to nam chodziło! Właśnie stworzyliśmy swoją pierwszą tabelę! Tylko zastanówmy się wówczas, co się stanie, gdybyśmy chcieli dodać więcej wierszy lub kolumn? Czy w taki sposób będziemy robić naszą tabelę? Niezupełnie. Po pierwsze jest to tzw. "bałaganiarstwo" w kodzie. Po drugie, uwzględniamy białe spacje, co nie jest dobrym pomysłem. W takim razie jak zrobimy naszą tabelę? Istnieje znaczny prostszy sposób - użycie znacznika

<table></table>

Znacznik table

Aby rozpocząć tworzenie nowej tabeli, najpierw musimy poinformować przeglądarkę o tym, że będziemy tworzyć tabelę. W takim razie zróbmy to! Wystarczy napisać:

<table>
</table>

Teraz musimy stworzyć nowy wiersz. Służy do tego instrukcja tr. Tak wygląda nasz kod:

<table>
<tr></tr>
</table>

Gdy mamy stworzony już wiersz, trzeba stworzyć komórkę za pomocą intrukcji td. Kod:

<table>
<tr><td></td></tr>
</table>

Brawo! Jeżeli rozumiesz ten kod, to znaczy, że umiesz już tworzyć tabele. Teraz wystarczy wstawić tekst pomiędzy komorki! Zróbmy to więc! Gdy napiszemy:

<table>
<tr><td>Imię</td><td>Nazwisko</td></tr>
</table>

zostanie wypisane:

Imię

Nazwisko

Dodajmy trochę więcej komórek. Pisząc:

<table>
<tr>
<td>Imię</td><td>Nazwisko</td>
</tr>
<tr>
<td>Super</td><td>Programista</td>
</tr>
<tr><td>Jasiek</td><td>Kowalski</td></tr>
</table>

otrzymasz:

Imię	Nazwisko
Super	Programista
Jasiek	Kowalski

Niestety, nie wygląda to zbyt ładnie. Może dodamy obramowanie? Czemu nie? Służy do tego instrukcja border. Jeżeli chcemy obramowanie dla całej tabeli, instrukcję border dopisujemy tylko do znacznika table. Czyli po zapisaniu:

<table border="1">
<tr>
<td>Imię</td><td>Nazwisko</td>
</tr>
<tr>
<td>Super</td><td>Programista</td>
</tr>
<tr><td>Jasiek</td><td>Kowalski</td></tr>
</table>

naszym oczom ukaże się:

Imię	Nazwisko
Super	Programista
Jasiek	Kowalski

Nie wiem jak dla ciebie, ale dla mnie te napisy w tabeli są zbyt blisko siebie, są ściśnięte. Naprawmy to. Aby zrobić trochę wolnego miejsca wokół komórek, użyjemy instrukcji cellpadding. Dodamy ją oczywiście do znacznika table. Tak więc pisząć:

<table border="1" cellpadding="6">
<tr>
<td>Imię</td><td>Nazwisko</td>
</tr>
<tr>
<td>Super</td><td>Programista</td>
</tr>
<tr><td>Jasiek</td><td>Kowalski</td></tr>
</table>

zobaczymy:

Imię	Nazwisko
Super	Programista
Jasiek	Kowalski

Od razu lepiej! Istnieje jeszcze instrukcja cellspacing - jest to odstęp pomiędzy komórkami.

Scalanie komórek

Umiesz już tworzyć proste tabele. Co wówczas, gdy chcesz stworzyć taką tabelę:

Nagłówek		Nagłówek
Komórka	Komórka	Komórka	Komórka
Komórka	Komórka	Komórka	Komórka

Wtedy musimy scalić komórki. Istnieje taka zasada: -jeżeli chcemy scalać komórki w poziomie, używamy instrukcji colspan -jeżeli chcemy scalać komórki w pionie, używamy instrukcji rowspan

Jak tego użyć? Przedstawiam kod:

<table border="1">
<tr><td colspan="2"><center>Nagłówek</center></td><td colspan="2"><center>Nagłówek</center></td></tr>
<tr><td>Komórka</td><td>Komórka</td><td>Komórka</td><td>Komórka</td></tr>
<tr><td>Komórka</td><td>Komórka</td><td>Komórka</td><td>Komórka</td></tr>
</table>

Jak widzimy została tutaj użyta instrukcja colspan, by scalić komórki w poziomie. Liczba oznacza ile komórek ma być scalonych. Pomiędzy tekstem został użyty znacznik center by wyśrodkować tekst. Radzę trochę poeksperymentować z kodem i spróbować zrobić własną tabelę z komórkami scalonymi w pionie. Miłej zabawy! Formularze służą do przekazywania informacji skryptom (o nich inny podręcznik).

Ramy formularza

Cały formularz obiega znacznik form.

<form method="post" action=""></form>

Method to metoda przekazywania informacji (post lub get).

Różnice między GET a POST

Podstawowymi różnicami między dwoma sposobami przesyłania danych z formularza są:

metoda GET przesyła dane w adresie strony, po znaku ?. Action wskazuje na adres strony, która się otworzy po wysłaniu formularza,
metoda POST przesyła dane w sposób niezauważalny dla zwykłego użytkownika.

Stosowanie GET a POST

W języku PHP te dwie metody są używane w dwóch różnych miejscach:

metoda GET służy do wysyłania danych na serwer,
metoda POST służy do wstawiania danych do bazy, np. MySQL.

input

<input> jest znacznikiem wstawiającym pole do formularza. Przyjmuje następujące argumenty:

name - określa nazwę pola (np. przesyłaną do skryptów PHP)
maxlength - określa maksymalną liczbę znaków jaką można wpisać do tego pola
autocomplete - w przypadku podania wartości "off" przeglądarka nie będzie wyświetlać podpowiedzi utworzonych z wcześniejszych wartości wpisanych do pola
type - ustala typ pola formularza. Wartości jakie może przyjmować to pole są przedstawione poniżej.

Atrybut type może przyjmować następujące wartości

type="text" - pole tekstowe
type="password" - co wyżej jednak zamiast liter pojawiają się gwiazdki lub kółka (w zależności od przeglądarki
type="checkbox" - pole wyboru, kwadrat, który można zaznaczać i odznaczać
type="submit" - przycisk, wysyłający dane formularza.
type="button" - przycisk, wygląda jak wyżej, ale nie wysyła formularza.

Label

Znacznikiem <label></label> określa się nazwę pola formularza. Dzięki temu znacznikowi gdy np. wpiszemy:

<label>Podaj imię<input type="text"></label>

To klikając na podaj imię zostanie uaktywnione pole tekstowe input. HTML/Obiekty

Dodatek A

HTML/Document Type Declaration W spisie znaczników HTML, niestety dopiero rozwijanym, znajdziesz większość znaczników stosowanych w oryginalnej specyfikacji HTML 4.01 rozwiniętej przez organizację W3C.

Komentarz - jest to fragment kodu źródłowego, który nie ma żadnego wpływu na wygląd i funkcjonowanie dokumentu. Używany w celu czysto informacyjnym, jest zazwyczaj przez interpreter pomijany.

<!-- tutaj będzie galeria --> 
... 
<!-- a tutaj tekst --> 
...

A

A - znacznik informujący przeglądarkę o hiperłączu.

<a href="http://adres-strony">Klik na ten tekst przeniesie do adres-strony</a>

B

B - znacznik informujący przeglądarkę o pogrubionym tekście.

<B>ten tekst zostanie pogrubiony</B>

BODY

BODY - użycie znacznika otwierającego

<body>

i zamykającego

</body>

pozwala na wprowadzenie treści dokumentu .html takich jak tabele, tekst, pliki multimedialne.

BORDER

BORDER - Jest to grubość ramki. Przykład:

<img src="" border="x">

x - grubość.

BR

BR - znacznik informujący przeglądarkę o złamaniu linii, czyli przeniesieniu linii do następnego wiersza.

przykładowy tekst<BR/>
reszta tekstu

CAPTION

CAPTION - znacznik używany do podpisania tabeli tytułem, bądź opisania czego dotyczy.

<caption>nazwa tabeli</caption>

CENTER

CENTER - znacznik informujący przeglądarkę o wyśrodkowaniu danego elementu, np. obrazu lub tekstu.

<center>Ten tekst zostanie wyśrodkowany!</center>

CODE

CODE - stosowany do prezentacji kodu programu, wyświetlany czcionką o stałej szerokości.

<code>tekst kodu programu</code>

DIV

Div - znacznik informujący przeglądarkę o bloku tekstu, czyli specjalnego formatowania obszaru. Standardowo obiekty ustawiane są pionowo.

<div>przykładowy tekst
</div>

H1, H2, H3, H4, H5, H6

Są to znaczniki informujące przeglądarkę o nagłówkach. h1 tworzy największy tekst, h2 mniejszy, h3 jeszcze mniejszy itd.
Sposób zastosowania:

<h1> tekst </h1>

HEAD

HEAD - para znaczników otwierającego

<head>

oraz zamykającego

</head>

wyznaczająca obszar nagłówka strony

HTML

HTML - jest pierwszym znacznikiem używanym podczas tworzenia strony w języku HTML. Mówi on o tym, że zawartość odczytywanego pliku to kod napisany właśnie w HTML-u. Znacznik otwierający

<html>

i znacznik zamykający umieszczany na końcu kodu

</html>

I

I - znacznik informujący przeglądarkę o pochyleniu tekstu

<i>pochylony tekst</i>

TABLE

TABLE - odpowiada za tworzenie tabel zawierających podpis, nagłówki, komórki i dane.

<table border="1">
  <caption>Statystyki</caption>
    <tr>
      <th>Imię</th>
      <th>Nazwisko</th>
      <th>Wiek</th>
    </tr>
    <tr>
      <td>Olga</td>
      <td>Kowalska</td>
      <td>20</td>
    </tr>
</table>

TD

TD - pozwala zdefiniować komórkę tabeli.

<td>tekst</td>

TH

TH - znacznik używany do tworzenia komórek nagłówka tabeli.

<th>tekst</th>

TR

TR - odpowiada za utworzenie nowego wiersza tabeli.

STRONG

Strong - Pozwala na wyróżnienie tekstu.

<em>Wyróżnienie zwykłe (emfaza)</em>

<strong>i mocniejsze wyróżnienie (mocna emfaza)</strong>

Poniżej znajduje się lista kolorów używanych w HTML.

Wartości barw podane szesnastkowo wraz z wymaganym znakiem "#"
(liczba *xyz* faktycznie oznacza liczbę xxyyzz)
(R(czerwony), G(zielony), B(niebieski))
#000	#003	#006	#009	#00c	#00f	#030	#033	#036	#039	#03c	#03f
#060	#063	#066	#069	#06c	#06f	#090	#093	#096	#099	#09c	#09f
#0c0	#0c3	#0c6	#0c9	#0cc	#0cf	#0f0	#0f3	#0f6	#0f9	#0fc	#0ff
#300	#303	#306	#309	#30c	#30f	#330	#333	#336	#339	#33c	#33f
#360	#363	#366	#369	#36c	#36f	#390	#393	#396	#399	#39c	#39f
#3c0	#3c3	#3c6	#3c9	#3cc	#3cf	#3f0	#3f3	#3f6	#3f9	#3fc	#3ff
#600	#603	#606	#609	#60c	#60f	#630	#633	#636	#639	#63c	#63f
#660	#663	#666	#669	#66c	#66f	#690	#693	#696	#699	#69c	#69f
#6c0	#6c3	#6c6	#6c9	#6cc	#6cf	#6f0	#6f3	#6f6	#6f9	#6fc	#6ff
#900	#903	#906	#909	#90c	#90f	#930	#933	#936	#939	#93c	#93f
#960	#963	#966	#969	#96c	#96f	#990	#993	#996	#999	#99c	#99f
#9c0	#9c3	#9c6	#9c9	#9cc	#9cf	#9f0	#9f3	#9f6	#9f9	#9fc	#9ff
#c00	#c03	#c06	#c09	#c0c	#c0f	#c30	#c33	#c36	#c39	#c3c	#c3f
#c60	#c63	#c66	#c69	#c6c	#c6f	#c90	#c93	#c96	#c99	#c9c	#c9f
#cc0	#cc3	#cc6	#cc9	#ccc	#ccf	#cf0	#cf3	#cf6	#cf9	#cfc	#cff
#f00	#f03	#f06	#f09	#f0c	#f0f	#f30	#f33	#f36	#f39	#f3c	#f3f
#f60	#f63	#f66	#f69	#f6c	#f6f	#f90	#f93	#f96	#f99	#f9c	#f9f
#fc0	#fc3	#fc6	#fc9	#fcc	#fcf	#ff0	#ff3	#ff6	#ff9	#ffc	#fff

Dodatek B

Załóżmy, że stworzyłeś już własną stronę internetową w HTML-u. Chcesz, aby twoi znajomi mogli ją obejrzeć w globalnej sieci. I co teraz?

Co potrzeba do opublikowania strony na serwerze?

Konto w darmowym hostingu (może być też płatny, ale na początek spróbuj darmowy)
Klient FTP
...i oczywiście twoja strona internetowa zapisana gdzieś na dysku

Hosting

W internecie znajdziesz wiele hostingów. Na początek, aby zapoznać się z całą tą "technologią" proponuje opublikować stronę na hostingu darmowym. Oczywiście są warunki korzystania z takiego hostingu np. ograniczenia miejsca na stronę, ograniczony transfer itp. Pamiętaj, że na większości darmowych hostingów twoja strona zostanie opatrzona reklamami! Proponuje przeczytać regulamin danego hostingu podczas zakładania konta. Przy wybieraniu hostingu pamiętaj, że do końcówka adresu twojej strony będzie inna niż samo .pl (np. twójadres.yoyo.pl).

Lista popularnych hostingów

Prv.pl
inne znajdziesz po wpisaniu w Google darmowy hosting

Jak już wybierzesz hosting dla siebie załóż tam konto i załóż nową domenę. Pod koniec formularza zakładania domeny zostaniesz poinformowany o tym jaki jest użytkownik, hasło i adres. Zapisz sobie te informacje (przydadzą się później) lub sprawdź e-maila czy nie dostałeś tych informacji drogą elektroniczną.

Klient FTP

Co to jest?

Klient FTP to program który łączy się z wybranym serwerem i umożliwia wymianę danych.

Jak wybrać?

Proponuje po prostu wyszukać sobie jakiegoś. Polecam FileZillę. Więcej na wikipedii.

Co potem?

Teraz otwórz swojego klienta FTP, wpisz w niego dane, które dostałeś przy zakładaniu domeny, kliknij połącz i poczekaj na połączenie. Później skopiuj swoją stronę na serwer hostingowy i rozłącz się.

Brawo! Twoja strona została właśnie opublikowana!

Dodatek C - HTML5

Tagi <Audio> i <Video> zostały wprowadzone w niezatwierdzonej jeszcze specyfikacji w:HTML5.

Historia problemu z kodekiem video

Twórcy przeglądarek nie potrafili się zgodzić, jakiego kodeka należy użyć. Mozilla i Opera preferowały OGG, ponieważ jest wolny, i nie chronią go żadne prawa autorskie czy patentowe. Microsoft, Google i Apple opowiedziały się za H.264, ponieważ posiada lepszą jakość obrazu. Firma Google wprowadziła również swój format - WebM.

Przeglądarka	OGG	H.264	WebM
Internet Explorer	brak	9.0	brak
Mozilla Firefox	3.5	Brak	3.7
Opera	10.00	brak	10.60
Apple Safari	brak	5.XX	brak
Google Chrome	brak	3.0.195	6.0.472

Budowa znacznika audio i video jest podobna. Wymagany jest atrybut src:

<video src="adres"></video>

W środku tagu można wpisać komunikat , który wyświetli się w przypadku braku obsługi tagu, lub np. alternatywny odtwarzacz we Flashu.

[1] Akcje:
call - rozmowa głosowa
chat - rozmowa tekstowa
add - dodaj do kontaktów
userinfo - profil użytkownika
voicemail - poczta głosowa
sendfile - wyślij plik

[1]