Wstęp - Darmowy kurs HTML

http://pl.html.net/tutorials/html/

Ludzie często myślą, że bardzo ciężko jest stworzyć stronę internetową. Nie w tym rzecz! Każdy może nauczyć się jak robić strony internetowe. Jeżeli zaczniesz czytać dalej, pierwszą zrobisz w zaledwie godzinę.

Inni wierzą - omyłkowo - że drogie i zaawansowane oprogramowanie jest potrzebne do tworzenia stron internetowych. Prawdą jest, że istnieje wiele różnych programów, które niby tworzą strony internetowe. Jedne są bardziej pomocne, inne mniej. Ale jeżeli chcesz zrobić to dobrze, musisz zrobić to sam. Naszczęście, jest to proste, darmowe i ty już posiadasz oprogramowanie, które potrzebujesz.

Zamiarem tego kursu jest łatwe i poprawne wprowadzenie cię w temat tworzenia stron internetowych. Kurs nie wymaga absolutnie żadnej wiedzy o programowaniu.

Kurs nie może pokazać ci wszystkiego. Więc zaangażowanie i chęć eksperymentowania są mile widziane. Ale nie martw się - nauka tworzenia stron internetowych da ci mnóstwo zabawy oraz satysfakcję z własnych osiągnięć.

W jaki sposób będziesz korzystał z kursu zależy od ciebie. Sugerujemy jednak abyś czytał nie więcej niż dwie lub trzy lekcje dziennie a resztę czasu wykorzystywał na eksperymenty z nową wiedzą jaką uzyskałeś w naszym kursie.

Dobrze, wystarczy gadania. Zaczynajmy!

Lekcja 1: Zaczynajmy

W tej pierwszej lekcji krótko zaprezentujemy ci narzędzia potrzebne do tworzenia stron internetowych.

Co jest potrzebne?

Prawdopodobnie już masz wszystko co jest potrzebne.

Posiadasz "przeglądarkę". Przeglądarka jest programem umożiwiającym serfowanie po internecie i otwieranie stron internetowych. Właśnie teraz patrzysz na tą stronę w swojej przeglądarce.

Nieważne jakiej przeglądarki użyjesz. Najbardziej popularny jest Microsoft Internet Explorer. Lecz jest jeszcze wiele innych takich jak Opera lub Mozilla Firefox i możesz skorzystać z której chcesz.

Możliwe że słyszałeś, lub używasz, programów takich jak Microsoft FrontPage, Macromedia Dreamweaver lub nawet Microsoft Word, które potrafią - lub twierdzą że potrafią - tworzyc strony internetowe dla ciebie. Na czas tego kursu zapomnij o nich! Nie są żadną pomocą w przypadku nauki tworzenia stron intrnetowych.

Zamiast nich potrzebujesz prostego edytora tekstowego. Jeżeli korzystasz z systemu Windows możesz używać Notatnika, który znajdziesz w menu Start, Programy i dalej Akcesoria:

Jeżeli nie korzystasz z systemu Windows, możesz użyć podobnego prostego edytora tekstowego. Na przykład, Pico (Linux) lub Simple Text (Mac).

Notatnik jest bardzo podstawowym narzędziem, lecz jest doskonałym do robienia stron gdyż nie wpływa w żaden sposób na to co piszesz, daje ci całkowitą kontrolę. Problemem wielu programów "tworzących" strony jest to, że posiadają wiele funkcji, lecz wszystko musi pasować do standardów tych funkcji. Tak więc, tego typu programy często nie potrafią stworzyć strony internetowej dokładnie takiej jaką chcesz. Albo - jeszcze bardziej uciązliwe - modyfikują kod który napisałeś. Dzięki Notatnikowi lub innemu prostemu edytorowi tekstowemu, tylko sobie zawdzięczasz wszystkie sukcesy i błędy.

Przeglądarka i Notatnik (lub podobny edytor tekstowy) są wszystkim czego potrzebujesz aby przebrnąć przez kurs i tworzyć własne strony internetowe.

Czy muszę być połączony z Internetem?

Nie musisz być podłączony do internetu - ani podczas czytania tego kursu, ani podczas tworzenia stron internetowych.

Jeżeli chcesz uniknąć bycia w internecie w trakcie czytania tego kursu, możesz po prostu wydrukować go lub odłączyć internet podczas czytania stony na ekranie. Możesz także zapisać swoją stronę na dysku i opublikować ją w internecie kiedy będzie ukończona.

Co dalej?

Idź do następnej lekcji i przeczytaj na temat języka HTML zanim zacznie się prawdziwa zabawa w Lekcji 3

Lekcja 3: Elementy i znaczniki

Jesteś teraz gotowy aby nauczyć się sedna języka HTML: elementów.

Elementy tworzą strukturę w kodzie dokumentu HTML i informują przeglądarkę w jaki sposób strona internetowa ma prezentować informację. Generalnie element składa się ze znacznika otwierającego, treści, i znacznika zamykającego.

"Znaczniki"?

Znaczniki to etykiety używane do zaznaczania początku i końca elementu.

Wszystkie znaczniki mają ten sam format: zaczynają się znakiem mniejszości "<" i kończą znakiem większości ">".

Generalnie mówiąc, są dwa rodzaje znaczników - otwierające: <html> i zamykające: </html>. Jedyną różnicą jest znak ukośnik "/" dodawany przy znacznikach zamykających. Zawartość elementu umieszczasz między znacznikiem zamykającym i otwierającym.

Wszystko w kodzie HTML opiera się na elementach. Nauczyć się języka HTML to nauczyć się i korzystać z różnych znaczników.

Czy możesz pokazać mi jakieś przykłady?

Ok, element b używamy aby pogrubić litery. Cały tekst pomiędzy znacznikiem otwierającym <b> i znacznikiem zmykającym </b> zostanie pogrubiony w oknie przeglądarki. ("b" jest skrótem od "bold" czyli wyraźny.)

Przykład 1:

<b>Ten tekst musi zostać pogrubiony.</b>

Będzie tak wyglądał w przeglądarce:

Ten tekst musi zostać pogrubiony.

Elementy h1, h2, h3, h4, h5 i h6 są używane do robienia nagłówków (h oznaczna "heading" czyli nagłówek), gdzie h1 jest pierwszym poziomem tak więc wynikiem jest tekst największy, h2 jest drugim poziomem i wynikiem będzie trochę mniejszy tekst, a h6 jest szóstym poziomem i jednocześnie ostatnim w hierarchii nagłówów - tekst będzie najmniejszy.

Przykład 2:

<h1>To jest nagłówek</h1>

<h2>To jest pod-nagłówek</h2>

Będzie tak wyglądał w przeglądarce:

To jest nagłówek

To jest pod-nagłówek

Więc, zawsze muszę otwierać i zamykać znaczniki?

Tak jak mówią, są wyjątki w regułach i w HTML wyjątkiem jest to, że istnieje kilka elementów, dla których znacznik zamykający i otwierający ma to samo znaczenie. Te tak zwane puste elementy nie są połączone w żaden sposób z tekstem, a jedynie tworzą oddzielne etykiety, na przykład, znacznik nowej linii wygląda tak: <br />.

Znaczniki lepiej pisać z dużej czy małej litery?

Większość przeglądarek nie patrzą na wielkość liter znaczników. <HTML>, <html> lub <HtMl> normalnie da ten sam rezultat. Jednak, poprawnie znaczniki pisze się małą literą. Więc wejdź w nawyk pisania znaczników małą literą.

Gdzie mam umieścić wszystkie te znaczniki?

Umieszczasz znaczniki w dokumencie HTML. Strona internetowa zawiera jeden lub więcej dokumentów HTML. Serfując po internecie, prawie za każdym razem otwierasz inne dokumenty HTML.

Jeżeli będziesz kontynuował naukę, w następnej lekcji w 10 minut stworzysz swoją pierwszą stronę internetową.

Lekcja 4: Stwórz swoją pierwszą stronę internetową

Dzięki temu czego nauczyłeś się w poprzednich lekcjach, jesteś teraz o krok od utworzenia swojej pierwszej strony internetowej.

Jak?

W lekcji 1 spojrzeliśmy na to, co jest nam potrzebne do tworzenia stron internetowych: przeglądarka i Notatnik (lub podobny edytor tekstowy). Odkąd czytasz to, wysoce prawdopodobne jest, że już masz otwartą przeglądarkę. Jedyną rzeczą jaką musisz zrobić to otworzyć dodatkowe okno przeglądarki (otwórz przeglądarkę jeszcze raz) tak byś mógł czytać ten kurs i patrzeć na swoją nową stronę internetową jednocześnie.

Więc, otwórz Notatnik (w Akcesoria pod Programy w menu Start):

Teraz jesteśmy gotowi!

Co mogę robić?

Zacznijmy od czegoś prostego. Może od strony z napisem: "Hurra! To jest moja pierwsza strona." Czytaj dalej i zobaczysz, jakie jest to proste.

HTML jest prosty i logiczny. Przeglądarka czyta HTML tak jak ty czytasz: od góry do dołu z lewej do prawej. Tak więc, dokument HTML zaczyna się tym co powinno być najpierw na stronie i kończy tym co powinno zostać wyświetlone na stronie jako ostatnie.

Pierwszą rzeczą jaką musisz zrobić jest powiedzenie przeglądarce, że będziesz "mówił" do niej językiem HTML. Zrobisz tak poprzez wstawienie znacznika <html> (bez niespodzianek).Więc zanim cokolwiek zrobisz wpisz "<html>" w pierwszej linii swojego dokumentu w Notatniku.

Odwołując się do pierwszej lekcji, <html> jest znacznikiem otwierającym więc powinien być także znacznik zamykający, który umieścimy na samym końcu dokumentu HTML. Więc, aby nie zapomnieć o umieszczeniu znacznika zamykającego HTML wpisz teraz "</html>" kilka linii niżej i umieść resztę dokumentu między znacznikami <html> i </html>.

Następną rzeczą potrzebną w twoim dokumencie jest "główka", która dostarcza informacji o dokumencie, oraz "ciało", które jest zawartością dokumentu. Odkąd HTML jest niczym jeżeli nie jest logiczny, główka (<head> i </head>) jest nad ciałem (<body> i </body>).

Twój dokument powinien teraz wyglądać następująco:

<html>

<head>

</head>

<body>

</body>

</html>

Zauważ jak znaczniki zostały ułożone w strukturę przy wykorzystaniu nowych linii oraz spacji. W zasadzie, nie ma znaczenia jak ułożysz swój dokument HTML. Ale by ci pomóc, oraz innym czytającym twój kod, jest wysoce rekomendowane abyś układał w strukturę swój kod HTML w schludny sposób poprzez wcięcia i nowe linie, jak w powyższym przykładzie.

Jeżeli twój dokument wygląda jak powyższy przykład, stworzyłeś swoją pierwszą stronę internetową - wyrażnie nudną i prawdopodobnie nie taką o jakiej mażyłeś zaczynając ten kurs lecz nadal jest to jakaś strona internetowa. To co zrobiłeś posłuży nam przy tworzeniu wszystkich kolejnych dokumentów HTML.

Do tej pory dobrze, ale jak dodać treść do mojej strony internetowej?

Jak wcześniej zauważyłeś, twój dokument HTML ma dwie części: nagłówek i ciało. W sekcji nagłówkowej umieszczasz ważne informacje dotyczące twojej strony, podczas gdy ciało dokumentu zawiera informację składającą się na stronę.

Na przykład, jeżeli chcesz nadać swojej stronie tytuł, który pojawi się w górnej części przeglądarki, powinieneś zrobić to w sekcji nagłówkowej. Element użyty do określenia tytułu to title. tzn. zapisz tytuł strony pomiędzy znacznikami <title> i </title>:

<title>Moja pierwsza strona internetowa</title>

Zauważ że tytuł nie pojawi się na stronie. Wszystko co ma pojawić się na stronie zawiera się pomiędzy znacznikami "ciała".

Tak jak obiecałem, chcemy by strona wyświetlała tekst "Hurrah! To jest moja pierwsza strona internetowa." To jest tekst który chcemy pokazać więc musi zawierać się w ciele strony. W sekcji ciała, wprowadź następujący kod:

<p>Hurrah! To jest moja pierwsza strona internetowa.</p>

P w znaczniku <p> jest skrótem od "paragraph" co traktujemy dosłownie - paragraf (akapit) tekstu.

Twój dokument HTML powinien wyglądać następująco:

<html>

<head>

<title>Moja pierwsza strona internetowa </title>

</head>

<body>

<p>Hurrah! To jest moja pierwsza strona internetowa.</p>

</body>

</html>

Skończone! Zrobiłeś właśnie swoją pierwszą prawdziwą stronę internetową!

Następnie wszystko co musisz zrobić to zapisać ją na dysku twardym i potem otworzyć w przeglądarce:

• W Notatniku wybierz "Zapisz jako..." w menu "Plik" w górnej części programu.

• Wybierz "Wszystkie pliki " w oknie "Zapisz jako typ". To jest bardzo ważne - inaczej, zapiszesz dokument w formacie tekstowym a nie jako dokument HTML.

• Teraz zapisz swój dokument jako "page1.htm" (zakończenie ".htm" określa typ pliku, w tym przypadku dokument HTML. ".html" daje ten sam rezultat. Zawsze używam ".htm", ale możesz wybrać drugi wariant). Nie ma to znaczenia gdzie zapiszesz dokument na dysku twardym - dopóki pamiętasz gdzie go zapisałeś tak by później go znaleść.

Teraz otwórz przeglądarkę i:

• W górnym menu wybierz "Otwórz" w "Plik".

• Kliknij "Przeglądaj" w otwartym oknie.

• Teraz poszukaj swojego dokumentu, zaznacz go i kliknij "Otwórz".

Teraz powinien wyświetlić się tekst "Hurrah! To jest moja pierwsza strona internetowa." w przeglądarce. Gratulacje!

Jeżeli chcesz aby cały świat mógł już zobaczyć twoje dzieło, możesz przeskoczyć do Lekcji 13 i nauczyć się jak publikować swoje strony w internecie. Inaczej, bądź cierpliwy i czytaj dalej. Zabawa dopiero się zaczeła.

Lekcja 5: Czego się dotychczas nauczyłeś??

<html>

<head>

<title></title>

</head>

<body>

</body>

</html>

Zawsze zaczynaj z podstawowym szablonem stworzonym w poprzedniej lekcji:

W sekcji nagłówkowej umieszczaj tytuł: <title>tytuł twojej strony</title>. Zauważ w jaki sposób zostanie wyświetlony tekst w lewym górnym rogu przeglądarki:

Tytuł jest wyjątkowo ważny ponieważ jest wykorzystywany w wyszukiwarkach (takich jak Google) do indeksowania stron internetowych i jest wyświetlany w rezultatach wyszukiwania.

W sekcji ciała umieszczasz zawartość strony. Już zdążyłeś nauczyć się paru podstawowych elementów:

<p>Jest używany przy akapitach.</p>

<b>Wyświetla tekst pogrubiony.</b>

<h1>Nagłówek</h1>

<h2>Podnagłówek</h2>

<h3>Pod-podnagłówek</h3>

Pamiętaj, jedyną drogą do nauczenia się języka HTML jest metoda prób i błędów. Ale nie martw się, nie ma możliwości zniszczenia w taki sposób komputera lub Internetu. Więc eksperymentuj - to jest najlepszy sposób pozyskania doświadczenia.

Co to miało znaczyć?

Nikt nie zostaje dobrym twórcą stron ucząc się tylko przykładów w tym kursie. To co dostaniesz w tym kursie to podstawa zrozumienia budowania klocków - aby być dobrym w tworzeniu stron wykorzystaj klocki w nowy, kreatywny sposób.

Więc, wejdź w głęboką wodę i stań na własnych stopach... albo może lepiej nie. Ale spróbuj eksperymentować z tym co dotychczas się nauczyłeś.

Więc co dalej?

Postaraj się zrobić parę stron samemu. Dla przykładu, zrób stronę z tytułem, nagłówkiem, podnagłówkiem i tekstem. Nie ma problemu jeżeli będziesz zerkał do kursu podczas tworzenia stron. Ale później, sprawdź czy możesz zrobić ją sam - bez patrzenia.

Patrz także

• Następna lekcja: Kilka dodatkowych elementów

• Poprzednia lekcja: Stwórz swoją pierwszą stronę

Lekcja 6: Kilka dodatkowych elementów

<html>

<head>

<title>Moja strona internetowa</title>

</head>

<body>

<h1>Nagłówek</h1>

<p>tekst, tekst tekst, tekst</p>

<h2>Podnagłówek</h2>

<p>tekst, tekst tekst, tekst</p>

</body>

</html>

Czy udało ci się zrobić parę stron samemu? Jeżeli nie, tutaj masz przykład:

Teraz co?

Teraz czas nauczyć się siedmiu nowych elementów.

W ten sam sposób możesz pogrubić swój tekst umieszczając go między znacznikiem otwierającym <b> a zamykającym </b>, możesz pochylić tekst używając znacznika otwierającego <i> i zamykającego </i>. Tak, "i" jest skrótem od "italic" czyli styl liter pochylonych.

Przykład 1: <i>To powinno być pochylone.</i>

Będzie tak wyglądał w przeglądarce:

To powinno być pochylone.

Podobnie, możesz uczynić tekst mniejszym używając znacznika small:

Przykład 2:

<small>To powinno być małe.</small>

Będzie tak wyglądał w przeglądarce:

To powinno być małe.

Czy mogę używać wielu elementów jednocześnie?

Możesz z łatwością korzystać z wielu elementów jednocześnie o ile unikasz nakładania się elementów. Najlepiej zilustrujmy na przykładzie:

Przykład 3:

Jeżeli chcesz wyświetlić pogrubiony i wytłuszczony tekst, musisz zrobić tak:

<b><i>Tekst jest pogrubiony i wytłuszczony</i></b>

Ale NIE tak:

<b><i>Tekst jest pogrubiony i wytłuszczony</b></i>

Różnica jest taka, że w pierwszym przykładzie pierwszy znacznik został zamknięty jako ostatni. W ten sposób unikniemy nieporozumień ze samym sobą i przeglądarką.

Więcej elementów !

Jak wspomniałem w Lekcji 3 istnieją elementy zamykane i otwierane tym samym znacznikiem. Te tak zwane puste elementy nie posiadają żadnej zawartości, są raczej oddzielnymi etykietami. Przykładem takiego znacznika jest <br /> który tworzy przymusowy koniec linii:

Przykład 4:

Tekst<br /> i trochę tekstu w nowej linii

Będzie tak wyglądał w przeglądarce:

Tekst
i trochę tekstu w nowej linii

Zauważ że znacznik jest połączeniem zamykającego i otwierającego znacznika ze spacją i ukośnikiem na końcu: <br />.

Kolejny element, który zamykamy i otwieramy w jednym znaczniku to <hr />. Używamy go do rysowania linii poziomej ("hr" oznacza "horizontal rule" czyli wyliniowanie poziome):

Przykład 5:

<hr />

Będzie tak wyglądał w przeglądarce:

Przykłady elementów wymagających otwierającego i zamykającego znacznika - tak jak większość elementów - to ul, ol i li. Te elementy są używane do tworzenia listy.

ul jest skrótem od "unordered list" czyli lista nie uporządkowana i wstawia kulę przed każdą pozycją w liście. ol jest skrótem od "ordered list" czyli lista uporządkowana i numeruje każdą pozycję w liście. Aby umieszczać elementy w liście używaj znacznika li("list item" - element listy). Zdziwiony? Patrz na przykłady:

Przykład 7:

<ul>

<li>Element 1 listy</li>

<li>Element 2 listy</li>

</ul>

Będzie tak wyglądał w przeglądarce:

• Element 1 listy

• Element 2 listy

Przykład 8:

<ol>

<li>Pierwszy element listy</li>

<li>Drugi element listy</li>

</ol>

Będzie tak wyglądał w przeglądarce:

1. Pierwszy element listy

2. Drugi element listy

Hehe! I to wszystko?

Zarazie wszystko. Jeszcze raz, eksperymentuj i twórz swoje własne strony korzystając z niektórych z siedmiu nowo poznanych elementów:

<i>Przetłuszczony</i>

<small>Mały tekst</small>

<br /> Koniec linii

<hr /> Linia pozioma

<ul>Lista</ul>

<ol>Lista uporządkowana</ol>

<li>Elment listy</li>

Patrz także

• Następna lekcja: Atrybuty

• Poprzednia lekcja: Czego się dotychczas nauczyłeś??

Lekcja 7: Atrybuty

Możesz dodawać atrybuty do elementów w dokumencie.

Co to jest atrybut?

Pewnie pamiętasz że elementy tworzą strukturę w dokumentach HTML i informują przeglądarkę jak ma wyglądać strona internetowa (na przykład, <br /> informuje przeglądarkę o utworzeniu nowej linii). Niektóre elementy mogą zawierać więcej informacji. Te dodatkowe informacje nazywane są atrybutami.

Przykład 1:

<h2 style="background-color:#ff0000;">Moja przyjaźń z HTML</h2>

Atrybuty są zawsze umieszczane w znaczniku otwierającym a wartość atrybutu umieszczana jest w cudzysłowiu. Średnik używamy do oddzielenia wartości dla atrybutu style. Wrócimy do tego później.

Jaki jest haczyk?

Jest wiele różnych atrybutów. Pierwszy którego się nauczysz to atrybut stylu. Za pomocą atrybutu stylu możesz dodać układ graficzny do swojej strony internetowej. Dla przykładu kolor tła:

<html>

<head>

</head>

<body style="background-color:#ff0000;">

</body>

</html>

Przykład 2:

pokaże czerwoną stronę w przeglądarce - sprawdź i się przekonasz. Za chwilkę wytłumaczymy dokładniej jak działa system kolorów.

Zauważ że pewne znaczniki i atrybuty używają pisowni amerykańskiej np.. color zamiast colour. Ważne jest abyś był ostrożny korzystając z tej samej pisowni jaką mamy w przykładachw kursie - inaczej, przeglądarka nie zrozumie kodu. Także, nie zapominaj umieszczać cudzysłowia na końcu wartości atrybutu.

Jak strona zmieniła kolor na czerwony?

W powyższym przykładzie, prosiliśmy o kolor tła o kodzie "#ff0000". To jest kod koloru czerwonego zapisany za pomocą numerów szesnastkowych (HEX). Każdy kolor ma swój własny numer w kodzie szesnastkowym. Oto parę przykładów:

Biały: #ffffff
Czarny: #000000 (zeros)
Czerwony: #ff0000
Niebieski: #0000ff
Zielony: #00ff00
Żółty: #ffff00

Kod szesnastkowy koloru zapisany jest za pomocą znaku # i sześciu liter. Jest ponad 1000 kodów HEX i nie jest łatwe który kod odpowiada za dany kolor. Dla ułatwienia zrobiliśmy mapę 216 najczęściej używanych kolorów: 216 Mapa kolorów WWW.

Możesz także używać angielskich nazw popularnych kolorów (biały - white, czarny - black, czerwony - red, niebieski - blue, zielony - green i żółty - yellow).

Przykład 3:

<body style="background-color: red;">

Wystarczy o kolorach. Wróćmy do atrybutów.

Które elementy mogą mieć atrybuty?

Różne atrybuty mogą być nadane większości elementów.

Często będziesz korzystał z atrybutów w znacznikach takich jak body, w innych rzadziej, na przykład, znacznik br ponieważ oznacza nową linię nie ma żadnych parametrów do ustawienia więc nie posiada atrybutów.

Tak jak jest wiele elementów, tak też jest wiele atrybutów. Pewne atrybuty są typowe tylko dla danych elementów podczas gdy inne mogą być użyte dla wielu różnych elementów. Także na odwrót: pewne elementy mogą zawierać tylko pewien typ atrybutów podczas gdy inne mogą zawierać wiele.

Może to zabrzmieć dziwnie ale jak raz zaczniesz korzystać z atrybutów z czasem zauważysz ich logikę, łatwość w użyciu i możliwości jakie dostarczają.

Ten kurs wprowadzi Cię w najważniejsze atrybuty.

Dokładnie z jakich części składa się element?

Ogólnie element składa się ze znacznika otwierającego z lub bez wielu atrybutów, zawartości oraz znacznika zamykającego. Proste jak drut :). Patrz na ilustrację poniżej.

Patrz także

• Następna lekcja: Odnośniki

• Poprzednia lekcja: Kilka dodatkowych elementów

Lekcja 8: Odnośniki

W tej lekcji nauczysz się jak tworzyć odnośniki do innych stron.

Co potrzebuję do zrobienia odnośnika?

Do zrobienia odnośnika będziemy używać tego samego co zawsze używamy w kodzie HTML: elementu. Prosty element z jednym atrybutem i już możesz umieścić odnośnik na swojej stronie. Tutaj przedstawię przykład jak może wyglądać odnośnik do strony HTML.net:

Przykład 1:

<a href="http://www.html.net/">Oto odnośnik do HTML.net</a>

Będzie wyglądał następująco w przeglądarce:

Oto odnośnik do HTML.net

Element a oznacza "anchor" czyli kotwica. Natomiast atrybut href jest skrótem od "hypertext reference" czli odnośnik hyper tekstowy, określający do kąd prowadzi odnośnik - najczęściej adres pliku w internecie.

W powyższym przykładzie atrybut href posiada wartość "http://www.html.net", która jest pełnym adresem prowadzącym do HTML.net i nazywa się URL (Uniform Resource Locator). Zapamiętaj że "http://" musi zawsze zawierać się w URLu. Zdanie "Oto odnośnik do HTML.net"jest tekstem ukazującym się jako odnośnik. Pamiętaj aby zamknąć element kotwicy znacznikiem </a>.

Co z odnośnikami pomiędzy moimi stronami?

Jeżeli chcesz umieścić odnośnik do swoich własnych stron Internetowych, nie musisz picać pełnego adresu (URL) dokumentu. Na przykład, jeżeli zrobiłeś dwie strony (nazwijmy je strona1.htm i strona2.htm) i zapisałeś je w tym samym katalogu możesz utworzyć odnośnik na jednej stronie do drugiej poprzez wpisanie tylko nazwy pliku jako adres strony. W takich okolicznościach odnośnik ze strony strona1.htm do strona2.htm może wyglądać następująco:

Przykład 2:

<a href="strona2.htm">Kliknij tutaj aby przejść do strony 2</a>

Jeżeli strona 2 została umieszczona w podfolderze (nazwanym "podfolder"), odnośnik może wyglądać tak:

Przykład 3:

<a href="podfolder/strona2.htm">Kliknij tutaj aby przejść do strony 2</a>

Natomiast gdy strona 2 (umieszczona w podfolderze) ma posiadać odnośnik do strony 1, odnośnik będzie wyglądał tak:

Przykład 4:

<a href="../strona1.htm">Odnośnik do strony 1</a>

"../" wskazuje na folder o jeden poziom wyższy od folderu, w którym znajduje się dokument z odnośnikiem. Tym samym sposobem, możesz wskazać plik dwa lub trzy poziomy wyżej poprzez wielokrotne powtarzanie sekwencji "../" (np. dla odnośnika w folderze dwa poziomy wyżej należy napisać "../../").

Czy już jest wszystko jasne? Alternatywnie, możesz umieścic kompletny adres strony (URL) jeżeli masz problem z krótkimi odnośnikami.

Co z wewnętrznymi odnośnikami na stronie?

Możesz także utworzyć wewnętrzny odnośnik we wnętrzu strony - na przykład tabelę ze spisem odnośników do nagłówków na stronie. Wszystko co musisz użyć to atrybut id (identyfikator) i symbol "#".

Używaj atrybutu id aby oznaczyć element do którego chcesz zrobić odnośnik:

<h1 id="heading1">nagłówek 1</h1>

Możesz teraz utworzyć odnośnik do elementu przy wykorzystaniu "#" w atrybucie odnośnika. Za symbolem "#" musi być umieszczona wartość atrybutu id elementu dla którego zrobiłeś odnośnik. Na przykład:

<a href="#heading1">Odnośnik do nagłówka 1</a>

Wszystko się wyjaśni w tym przykładzie:

Przykład 5:

<html>

<head>

</head>

<body>

<p><a href="#naglowek1">Odnośnik do nagłówka 1</a></p>

<p><a href="#naglowek2">Odnośnik do nagłówka 2</a></p>

<h1 id="naglowek1">Nagłówek 1</h1>

<p>Tekst tekst tekst tekst</p>

<h1 id="naglowek2">Nagłówek 2</h1>

<p>Tekst tekst tekst tekst</p>

</body>

</html>

będzie wyglądał tak w przeglądarce (kliknij na oba odnośniki):

Odnośnik do nagłówka 1

Odnośnik do nagłówka 2

Nagłówek 1

Tekst tekst tekst tekst

Nagłówek 2

Tekst tekst tekst tekst

(Pamiętaj: Atrybut id musi zaczynać się tylko literą)

Do czego jeszcze mogę zrobić odnośnik?

Możesz także zrobić odnośnik do adresu e-mail. Robisz to prawie tak samo jak dla dokumentu HTML:

Przykład 6:

<a href="mailto:[e-mail]">Wyślij e-mail do nikogo w HTML.net</a>

Będzie tak wyglądał w przeglądarce:

Wyślij e-mail do nikogo w HTML.net

Jedyną różnicą pomiędzy odnośnikiem do adresu e-mail a do pliku, jest umieszczenie mailto: przed adresem e-mail. Kiedy klikniesz na odnośnik, otworzy się standardowy program do obsługi wiadomości e-mail z pustą treścią i umieszczonym wstawionym adresem e-mail. Funkcja zadziała tylko gdy na komputerze jest już zainstalowany taki program. Spróbujmy!

Czy są inne atrybuty o których powinienem wiedzieć?

Do tworzenia odnośników, musisz zawsze używać atrybutu href. Dodatkowo, możesz umieścic title w odnośniku:

Przykład 7:

<a href="http://www.html.net/" title="Odwiedź HTML.net i naucz się HTML">HTML.net</a>

będzie wyglądał następująco w przeglądarce:

HTML.net

Atrybut title jest wykorzystywany do krótkiego opisu odnośnika. Jeżeli - bez klikania - umieścisz kursor nad odnośnikiem, zobaczysz tekst "Odwiedź HTML.net i naucz się HTMLa".

Patrz także

• Następna lekcja: Obrazki

• Poprzednia lekcja: Atrybuty

Lekcja 9: Obrazki

Czy nie było by wspaniale mieć możliwość umieszczania obrazków na swojej stronie?

Brzmi jak wyzwanie...

Możliwe, ale w praktyce jest to bardzo łatwe. Wszystko czego potrzebujesz to element:

Przykład 1:

<img src="david.jpg" alt="David" />

będzie wyglądał następująco w przeglądarce:

Jedyne co musisz zrobić to powiedzieć przeglądarce, że chcesz umieścić obrazek (img) i gdzie obrazek jest zlokalizowany (src, skrót od "Źródło"). Wiesz już o co chodzi?

Zauważ jak element img jest otwierany i zamykany przy użyciu tego zamego znacznika. Tak jak znacznik <br /> , nie jest on związany z tekstem.

"david.jpg" to nazwa pliku obrazka który chcemy umieścić na stronie. ".jpg" to typ obrazka. Tak jak rozszerzenie ".htm" oznacza dokument HTML, tak ".jpg" mówi przeglądarce że plikiem jest obrazek. Istnieją trzy różne typy plików obrazków które możesz umieścić na stronie:

• GIF (Graphics Interchange Format)

• JPG / JPEG (Joint Photographic Experts Group)

• PNG (Portable Network Graphics)

Obrazki GIF są często najlepszym rozwiązaniem dla orzedstawiania grafiki i rysunków, podczas gdy JPEG wykorzystywany jest przy fotografiach. Istnieją dwa powody takiego zachowania: Po pierwsze, obrazki GIF mogą składać się z maksymalnie 256 kolorów, podczas gdy obrazki JPEG mogą zawierać miliony kolorów. Po drugie, format GIF lepiej kompresuje prostą grafikę, natomiast format JPEG jest optymalny dla złożonych obrazków. Im większa kompresja, tym mniejsza wielkość pliku obrazka, i mniejszy czas ładowania strony. Pewnie wiesz z własnego doświadczenia, że 'ciężkie' strony potrafią być bardzo męczące dla użytkownika.

Tradycyjnie, formaty GIF i JPEG są dominującymi typami obrazków, ale prawdopodobnie, format PNG staje się coraz bardziej popularny (przede wszystkim z powodu kosztów formatu GIF). Format PNG zawiera pod wieloma względami cechy formatu JPEG oraz GIF: miliony kolorów i efektywna kompresja.

Skąd mam wziąść mój obrazek?

Aby zrobić swój własny obrazek, potrzebujesz edytora graficznego. Edytor graficzny to najistotniejszy program jakim będziesz się posługiwał przy tworzeniu pięknych stron Internetowych.

Niestety, żaden dobry edytor graficzny nie jest dostarczony wraz z systemem Windows lub innym. Z tego powodu, spróbuj skorzystać z programu takiego jak np. Paint Shop Pro, PhotoShop lub Macromedia Fireworks. Te trzy programy to najlepsze edytory graficzne aktualnie dostępne na rynku.

Jednakże, jak wcześniej powiedziałem, nie jest konieczne zakupienie drogich programów aby ukończyć ten kurs. Narazie, możesz ściągnąć wspaniały edytor graficzny o nazwie IfranView który jest tak zwanym programm typu 'freeware'. Jak sama nazwa wskazuję jest on darmowy.

Albo możesz po prostu porzyczyć zdjęcia z innych stron ściągając je. Ale proszę bądź ostrożny i nie łam przepisów prawnych ściągając zdjęcia. Wytłumaczymy teraz jak ściągać zdjęcia z Internetu:

1. Kliknij prawym przyciskiem myszki na obrazek na stronie.

2. Wybierz "Zapisz obrazek jako ..." w menu które się pojawi.

3. Wybierz miejsce gdzie chcesz zapisać swój obrazek i naciśnij "Zapisz ".

Zrób tak z obrazkiem poniżej i zapisz go na swoim komputerze w tym samym miejscu gdzie umieszczasz swoje dokumenty HTML. (Zauważ że plik jest zapisany w formacie PNG: logo.png):

Teraz możesz umieścić obrazek na swojej stronie internetowej. Spróbuj sam.

Czy to wszystko co muszę wiedzieć na temat obrazków?

Jest jeszczę parę spraw o których musisz się dowiedzieć.

Po pierwsze, możesz z łatwością umieścić obrazek w innym folderze, lub nawet obrazek zamieszczony na innej stronie Internetowej:

Przykład 2:

<img src="images/logo.png" />

Przykład 3:

<img src="http://www.html.net/logo.png" />

Po drugie, obrazek może być odnośnikiem:

Przykład 4:

<a href="http://www.html.net">

<img src="logo.png" /></a>

będzie wyglądał następująco w przeglądarce (kliknij na obrazek): kst<br

Czy są jeszcze inne atrybuty o których powinienem wiedzieć?

Zawsze musisz używać atrybutu src, który określa położenie obrazka umieszczanego na stronie. Poza tym, jest parę innych atrybutów które mogą być użyteczne podczas umieszczania obrazków.

Atrybut alt używamy aby dodać alternatywny opis do obrazka, wykorzystywany w przypadku, gdy z jakiegoś powodu obrazek nie zostanie pokazany na stronie. To jest wyjątkowo ważne dla użytkowników z gorszym wzrokiem, lub gdy strona ładuje się bardzo wolno. Z tego powodu, zawsze używaj atrybutu alt:

Przykład 5:

<img src="logo.png" alt="Logo HTML.net" />

Niektóre przeglądarki w przypadku najechania kursorem myszy na obrazek wyświetlają małe okienko z wartością tego atrybutu umieszczoną jako tekst w tym okienku. Proszę zapamiętaj że celem atrybutu alt jest dostarczenie alternatywnego opisu obrazka. Atrybut alt nie powinien być używany do wyświetlania specjalnej wiadomości typu pop-up (wyskakującej) gdyż użytkownicy o słabym wzroku usłyszą tą wiadomość ale nie będą wiedzieć co przedstawia obrazek.

Atrybut title może być używany aby dodawać informację do obrazka:

Przykład 6:

<img src="logo.png" title="Ucz się języka HTML na stronie HTML.net" />

Będzie tak wyglądał w przeglądarce:

Jeżeli, bez klikania, umieścisz kursor nad obrazkiem, zobaczysz tekst "Ucz się języka HTML na stronie HTML.net" wyświetlony w specjalnym wyskakującym okienku.

Dwa dodatkowe ważne atrybuty to width i height:

Przykład 7:

<img src="logo.png" width="141" height="32" />

Będzie tak wyglądał w przeglądarce:

Atrybuty width i height mogą zostać użyte do określenia szerokości oraz wysokości obrazka. Wartość użyta w tych atrybutach wyrażona jest w pikselach. Piksele to jednostka miary używana do określania rozdzielczości ekranu. (Najczęściej używamy rozdzielczości: 1024x768 pikseli). Odwrotnie niż w przypadku centymetrów, piksele to relatywna jednostka miary która zależna jest od rozdzielczości ekranu. Dla użytkownika z wysoką rozdzielczością ekranu, 25 pikseli może oznaczać 1 centymetr na ekranie, podczas gdy te same 25 pikseli w przypadku małej rozdzielczości mogą oznaczać 1.5 centymetra na ekranie.

Jeżeli nie ustawisz szerokości i wysokości, obrazek zostanie umieszczony z aktualną wielkością. Dzięki szerokości i wysokości możesz manipulować wielkością:

Przykład 8:

<img src="logo.png" width="32" height="32" />

Będzie tak wyglądał w przeglądarce:

Także, warto zapamiętać że wielkość pliku obrazka będzie taka sama i nie zmieni szybkości ładowania strony, nawet jeżeli zmniejszysz rozmiar obrazka na stronie. Z tego powodu, nie powinieneś nigdy zmniejszać rozmiaru obrazka za pomocą atrybutów width oraz height. Zamiast tego, powinieneś zawsze zmieniać rozmiar obrazka w edytorze graficznym jeżeli chcesz żeby strona ładowała się szybciej.

Tak jak powiedziałem, nadal dobrym pomysłem jest używanie atrybutów width oraz height ponieważ przeglądarka będzie mogła wykryć ile miejsca potrzebuje na umieszczenie obrazka zanim załaduje do końca plik obrazka. To pozwala przeglądarce ustawić stronę ładnie i w szybki sposób.

Narazie wystarczy o Dawidzie Hasselhoff i obrazkach.

Patrz także

• Następna lekcja: Tabele

• Poprzednia lekcja: Odnośniki

Lekcja 10: Tabele

Tabele są używane do przedstawiania "danych tabelarycznych" tzn., informacji logicznie zaprezentowanych w kolumnach i wierszach.

Czy jest to trudne?

Budowanie tabel w HTML może na początku wydawać się skomplikowane ale jeżeli spokojnie i dokładnie przeanalizujesz przykłady, zauważysz ich logikę i prostotę - tak jak wszędzie w języku HTML.

Przykład 1:

<table>

<tr>

<td>Komórka 1</td>

<td>Komórka 2</td>

</tr>

<tr>

<td>Komórka 3</td>

<td>Komórka 4</td>

</tr>

</table>

Będzie tak wyglądał w przeglądarce:

Komórka 1				Komórka 2
Komórka 3	Komórka 4

Jaka jest różnica między <tr> i <td>?

Jak widzisz, powyższy kod HTML jest prawdopodobnie najbardziej skomplikowany jaki dotychczas przedstawiliśmy. Przeanalizujmy go a wszystko się wyjaśni:

3 różne elementy są używane do wstawiania tabel:

• Znacznik otwierający <table> i zamykający </table> rozpoczyna i kończy definicję tabeli. Logiczne.

• <tr> oznacza "table row" (wiersz tabeli) i rozpoczyna oraz kończy wiersze poziome. Nadal logiczne.

• <td> jest skrótem dla "table data" (dane tabeli). Ten znacznik zaczyna i kończy każdą komórkę w wierszu twojej tabeli. Wszystko proste i logiczne.

Oto co się dzieje w Przykładzie 1: tabeli zaczyna się znacznikiem <table>, następny jest <tr>, który informuje o rozpoczęciu wiersza. Dwie komórki są wstawione w wierszu: <td>Komórka 1</td> i <td>Komórka 2</td>. Wiersz dalej jest zamknięty znacznikiem </tr> i natychmiast za nim <tr> rozpoczyna nowy wiersz. Nowy wiersz także zawiera dwie komórki. Tabela zostaje zamknięta znacznikiem </table>.

Dla jasności: wiersz jest poziomym zbiorem komórek a kolumny to pionowy zbiór komórek:

Komórka 1

Komórka 2

Komórka 3

Komórka 4

Komórka 1 i Komórka 2 formują wiersz. Komórka 1 i Komórka 3 formują kolumnę.

W powyższym przykładzie, tabela ma dwa wiersze i dwie kolumny. Jednak, tabeli może posiadać o wiele więcej wierszy i kolumn.

Przykład 2:

<table>

<tr>

<td>Komórka 1</td>

<td>Komórka 2</td>

<td>Komórka 3</td>

<td>Komórka 4</td>

</tr>

<tr>

<td>Komórka 5</td>

<td>Komórka 6</td>

<td>Komórka 7</td>

<td>Komórka 8</td>

</tr>

<tr>

<td>Komórka 9</td>

<td>Komórka 10</td>

<td>Komórka 11</td>

<td>Komórka 12</td>

</tr>

</table>

Będzie tak wyglądał w przeglądarce:

Komórka 1

Komórka 2

Komórka 3

Komórka 4

Komórka 5

Komórka 6

Komórka 7

Komórka 8

Komórka 9

Komórka 10

Komórka 11

Komórka 12

Są jakieś atrybuty?

Oczywiście że są atrybuty. Na przykład, atrybut border określa grubość obramowania wokół tabeli:

Przykład 3:

<table border="1">

<tr>

<td>Komórka 1</td>

<td>Komórka 2</td>

</tr>

<tr>

<td>Komórka 3</td>

<td>Komórka 4</td>

</tr>

</table>

Będzie tak wyglądał w przeglądarce:

Komórka 1

Komórka 2

Komórka 3

Komórka 4

Grubość obramowania określana jest w pikselach (Patrz lekcja 9)

Tak jak z obrazkami, możesz także ustawić szerokość tabeli w pikselach - lub alternatywnie w procentach ekranu:

Przykład 4:

<table border="1" width="30%">

Przykład będzie pokazany w przeglądarce jako tabela o szerokości 30% ekranu. Sprawdź sam.

Więcej atrybutów?

Jest wiele atrybutów dla tabel. Tutaj są kolejne dwa:

• align: określa poziome położenie zawartości dla całej tabeli, wiersza lub pojedyńczej komórki. Wartości: left (lewo), center (środek) lub right (prawo).

• valign: określa pionowe położenie zawartości w komórkach tabeli. Wartości, top (góra), middle (środek) lub bottom (dół).

Przykład 5:

<td align="right" valign="top">Komórka 1</td>

Co mogę umieścić w moich tabelach?

Teoretycznie, możesz umieścić wszystko w tabelach: tekst, odnośniki i obrazki... ALE przeznaczenie tabel to prezentacja danych tabelarycznych (np. dane które najlepiej są przedstawiane w kolumnach i wierszach) więc unikaj umieszczania elementów w tabelach tylko dlatego że chcesz by były przedstawione obok siebie.

W starych czasach Internetu - tzn. parę lat temu - tabele były często używane jako narzędzie do tworzenia układów graficznych na stronie. Ale jeżeli chcesz kontrolować prezentację tekstu i obrazków jest ciekawszy sposób aby to zrobić (wskazówka: CSS). Ten temat omówimy później.

Teraz, zbierzmy wszystko czego dotychczas się nauczyłeś i poćwiczmy tworzenie tabel o różnych wielkościach i układach. To powinno cię zająć na parę godzin..

Patrz także

• Następna lekcja: Więcej na temat tabel

• Poprzednia lekcja: Obrazki

Lekcja 11: Więcej na temat tabel

Tytuł "Więcej na temat tabel" może brzmieć trochę nudno. Ale popatrz na pozytywną stronę, kiedy opanujesz tabele, nie będzie już nic dotyczącego HTML czego nie będziesz potrafił zrozumieć.

Co więc zostało?

Dwa atrybuty colspan i rowspan są używane kiedy chcesz stworzyć zaawansowane tabele.

Colspan jest skrótem od "column span" (rozciągnięcie kolumny). Colspan jest używany w znaczniku <td> do określania na ile kolumn ma się rozciągnąć komórka:

Przykład 1:

<table border="1">

<tr>

<td colspan="3">Komórka 1</td>

</tr>

<tr>

<td>Komórka 2</td>

<td>Komórka 3</td>

<td>Komórka 4</td>

</tr>

</table>

Będzie tak wyglądał w przeglądarce:

Komórka 1

Komórka 2

Komórka 3

Komórka 4

Poprzez ustawienie colspan na "3", komórka w pierwszym wierszu rozciągnie się na trzy kolumny. Jeżeli zamiast tego ustawili byśmy colspan na "2", komórka rozciągnęła by się tylko na dwie kolumny i było by konieczne umieszczenie dodatkowej komórki w pierwszym wierszu tak by liczba kolumn była jednakowa w obu wierszach.

Przykład 2:

<table border="1">

<tr>

<td colspan="2">Komórka 1</td>

<td>Komórka 2</td>

</tr>

<tr>

<td>Komórka 3</td>

<td>Komórka 4</td>

<td>Komórka 5</td>

</tr>

</table>

Będzie tak wyglądał w przeglądarce:

Komórka 1

Komórka 2

Komórka 3

Komórka 4

Komórka 5

Co z rowspan?

Jak już pewnie zgadłeś, rowspan określa na ile wierszy ma zostać komórka rozciągnięta:

Przykład 3:

<table border="1">

<tr>

<td rowspan="3">Komórka 1</td>

<td>Komórka 2</td>

</tr>

<tr>

<td>Komórka 3</td>

</tr>

<tr>

<td>Komórka 4</td>

</tr>

</table>

Będzie tak wyglądał w przeglądarce:

Komórka 1

Komórka 2

Komórka 3

Komórka 4

W powyższym przykładzie rowspan jest ustawiony na "3" w komórce Komórka 1. To określa nachodzenie komórki na 3 wiersze (własny wiersz plus dodatkowe dwa). Komórka 1 oraz Komórka 2 są więc w jednym wierszu, podczas gdy Komórka 3 i Komórka 4 formują dwa niezależne wiersze.

Zdziwiony? Więc, nie jest to zbyt skomplikowane i trudne do analizy. Może łatwiej będzie ci zrozumieć to jak narysujesz sobie tabelę na kartce papieru zanim zaczniesz tworzyć ją w HTMLu.

Nie zdziwiony? Więc podążaj dalej i spróbuj samemu zrobić parę tabel wykorzystując atrybuty colspan oraz rowspa.

Patrz także

• Następna lekcja: Układ graficzny elementów (CSS)

• Poprzednia lekcja: Tabele

Lekcja 12: Układ graficzny elementów (CSS)

Czy nie było by wspaniale z łatwością manipulować układem graficznym stron na jaki zasługują?

Jasne, ale jak?

Aby dodać na swojej stronie układ graficzny wykorzystaj Kaskadowe Arkusze Styłów (Cascading Style Sheets - CSS). W tej lekcji wprowadze cię krótko w świat CSS. Póżniej możesz wszystkiego się nauczyć od początku do końca w naszym kursie CSS. Więc prosze potraktuj tą lekcję tylko jako przystawkę.

CSS jest lepszą połową języka HTML: HTML zajmuje się nieprzyjemną częścią (strukturą), podczas gdy CSS nadaje miły akcent (układ graficzny).

Jak pokazaliśmy w Lekcji 7, CSS może być dodany dzięki atrybutowi style. Na przykład, możesz ustawić czcionki i wielkość czcionki akapitu:

Przykład 1:

<p style="font-size:20px;">To jest czcionka wielkości 20</p>

<p style="font-family:courier;">To jest czcionka Courier</p>

<p style="font-size:20px; font-family:courier;">To jest czcionka Courier wielkości 20</p>

Będzie tak wyglądał w przeglądarce:

To jest czcionka wielkości 20

To jest czcionka Courier

To jest czcionka Courier wielkości 20

W powyższym przykładzie używamy atrybutu style do określenia typu czcionki (komenda font-family) i jej wielkości (komenda font-size). Zauważ jak w ostatnim akapicie ustawiliśmy typ czcionki i wielkość korzystając ze średnika.

Wygląda na mnóstwo pracy?

Jedną z inteligentnych cech CSS jest możliwość globalnego określenia wyglądu i układu graficznego elementów. Zamiast używania atrybutu style w każdym znaczniku, możesz powiedzieć przeglądarce by ten sam styl przypisała pewnej części elementów na stronie:

Przykład 2:

<html>

<head>

<title>Moja pierwsza strona CSS</title>

<style type="text/css">

h1 {font-size: 30px; font-family: arial;}

h2 {font-size: 15px; font-family: courier;}

p {font-size: 8px; font-family: "times new roman";}

</style>

</head>

<body>

<h1>Moja pierwsza strona CSS</h1>

<h2>Witam na mojej pierwszej stronie CSS</h2>

<p>Tutaj możesz zobaczyć jak działa CSS</p>

</body>

</html>

• Pokaż przykład

W powyższym przykładzie CSS został umieszczony w sekcji nagłówkowej więc ma zastosowanie na całej stronie. Aby to zrobić, wystarczy umieścić znacznik <style type="text/css">, który mówi przeglądarce że umieszczasz CSS.

W przykładzie wszystkie nagłówki na stronie będą miały czcionkę Arial wielkości 30px a podnagłówki Courier wielkości 15. Tekst w akapitach będzie posiadał czcionkę Times New Roman wielkości 8.

Kolejną opcją jest umieszczenie CSS w oddzielnym dokumencie. Dzięki oddzielnemu dokumentowi CSS możesz aplikować te same style dla wielu stron na raz. Bardzo mądrze jeżeli chcesz na przykład zmienić czcionkę dla strony internetowej z dużą ilością dokumentów HTML. Nie będziemy teraz wdawać się w szczegóły ale potem możesz zacząć się tego uczyć z naszego kursu CSS.

Co jeszczę mogę zrobić z CSS?

CSS może zostać użyty nie tylko do określania typu czcionki oraz rozmiarów. Daje on o wiele więcej możliwości. Na przykład, możesz dodać kolor i tło. Oto parę przykładów żebyś miał z czym poeksperymentować:

<p style="color:green;">Zielony napis</p>

<h1 style="background-color: blue;">Tytuł na niebieskim tle</h1>

<body style="background-image: url('http://www.html.net/logo.png');">

Spróbuj umieścić przykład na paru swoich stronach - tak jak w przykładzie lub poprzez użycie CSS w sekcji nagłówka.

Czy CSS to tylko kolory i typy czcionek?

Poza dodawaniem kolorów, typów czcionkek itp., CSS portafi także kontrolować pozycjonowanie elementów na stronie (marginesy, otaczanie, wyrównanie, szerokość, wysokość itp.). Poprzez regulowanie różnych ustawień elementów, dzięki CSS jesteś w stanie elegancko i precyzyjnie rozmieścić elementy na stronie.

Przykład 3:

<p style="padding:25px;border:1px solid red;">Kocham CSS</p>

Będzie tak wyglądał w przeglądarce:

Kocham CSS

Dzięki właściwości float element może ułożyć się na prawo lub na lewo a kolejne elementy będą go otaczać. Następujący przykład ilustruje zasadę:

Przykład 4:

<img src="bill.jpg" alt="Bill Gates" style= "float:left;" />

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,

sed diam nonummy nibh euismod tincidunt ut laoreet dolore

magna aliquam erat volutpat. Ut wisi enim ad minim veniam,

quis nostrud exerci tation ullamcorper suscipit

lobortis nisl ut aliquip ex ea commodo consequat...</p>

Będzie tak wyglądał w przeglądarce:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...

W tym przykładzie, jeden element (obrazek) płynie na lewo a inne elementy (tekst) otaczają go.

Za pomocą właściwości position, możesz umieścić element na swojej stronie dokładnie tam gdzie chcesz:

Przykład 5:

<img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />

• Pokaż przykład

W przykładzie obrazek jest umieszczony 50 pikseli od spodu i 10 pikseli od prawej w przeglądarce. Ale możesz umieścić go dokładnie tam gdzie sam zechcesz. Spróbuj. Bardzo fajne, prawda?

Fajne, jasne. Ale czy łatwe?

Nie nauczysz się CSS w 10 minut. Tak jak wspomniałem wcześniej, ta lekcja jest tylko krótkim wprowadzeniem. Później możesz nauczyć się więcej w kursie CSS.

Narazie, skoncentruj się na HTML, i ruszaj do następnej lekcji gdzie nauczysz się jak umieszczać swoją stronę w internecie tak by cały świat mógł ją oglądać!

Patrz także

• Następna lekcja: Publikacja stron

• Poprzednia lekcja: Więcej na temat tabel

Lekcja 13: Publikacja stron

Do teraz, jedyne co miałeś to satysfakcję z oglądania własnej strony. Teraz czas aby reszta świata także mogła oglądać twoje arcydzieło.

Czy świat jest na to gotowy?

Świat jest gotowy - ty wkrótce też będziesz. Aby umieścić stronę w internecie, musisz tylko mieć trochę miejsca na serwerze w inernecie oraz darmowy program FTP.

Jeżeli masz dostęp do Internetu, może już masz darmowe miejsce na serwerze dla twojej strony intenetowej. Twoje miejsce na serwerze najprawdopodomniej będzie wyglądało następująco: http://home.dostawca.com/~uzytkownik. Jest też możliwość że masz musisz jeszcze aktywować swoje konto na serwerze. Więcej informacji na ten temat znajdziesz na stronie dostawcy twojego internetu.

Inną opcją jest znalezienie darmowego miejsca na serwerze w internecie. W ten sam sposób jak zakładałeś konto poczty elektronicznej (na przykład na Hotmail lub WP), możesz zarejestrować za darmo miejsce na serwerze w internecie. Jest wiele firm oferujących taką usługę - jedna z nich to Angelfire (kliknij "Sign up " i dalej kieruj się instrukcją) - rejestracja zajmie tylko parę minut.

Aby mieć dostęp do serwera, musisz znać tak zwaną "Nazwę hosta" (Na przykład, ftp.osemka.pl) oraz nazwę użytkownika i hasło.

Czy to wszystko czego potrzebuję?

Aby mieć dostęp do serwera i załadować swoje strony, musisz mieć także klienta FTP. Możesz nie posiadać jeszcze takiego programu, ale naszczęście, możesz go ściągnąć za darmo.

Istnieje wiele różnych programów FTP. Jednym z lepszych jest FileZilla, która jest całkowicie za darmo. Więc teraz ściągnij FileZille ze strony filezilla.sourceforge.net.

I jak załaduje strony na serwer?

Niżej opisany jest sposób załadowania stron na darmowe konto na serwerze Angelfire za pomocą programu FileZilla. Ale procedura jest bardzo podobna także dla innych dostawców i programów FTP.

Otwórz program FTP podczas połączenia z Internetem. Wpisz "Nazwę Hosta " ("ftp.angelfire.com" w polu "Address"), użytkownika (pole "User") oraz hasło (pole "Password") i kliknij "Connect". Powinieneś teraz mieć dostęp do serwera. Po jednej stronie programu możesz zobaczyć zawartość swojego komputera ("Local Site"), a po drugiej, możesz zobaczyć zawartość serwera ("Remote Site"):

Znajdź swoje dokumenty HTML oraz obrazki na swoim dysku (w kategorii "Local site") i przekopiuj je na serwer (kategoria "Remote site") poprzez podwójne kliknięcie plików do skopiowania. Teraz cały świat może je zobaczyć! (Na przykład, pod adresem http://www.angelfire.com/folk/htmlnet/strona1.htm).

Nazwij jedną ze stron "index.htm" (lub "index.html") i stanie się ona domyślną stroną. tzn. jeżeli wpiszesz adres http://www.angelfire.com/folk/htmlnet (bez nazwy pliku) zobaczysz tak naprawdę strone http://www.angelfire.com/folk/htmlnet/index.htm.

Na przyszłość, dobrym pomysłem może być zakupienie własnej domeny (www.twoja-nazwa.com) i uniknięcie długiego i skomplikowanego adresu, który został ci przydzielony przez twojego dostawcę Internetu lub przez dostawcę usługi darmowego miejsca na serwerze. Możesz wykupić domenę na przykład na stornach home.pl lub domeny.pl.

Patrz także

• Następna lekcja: Standardy WWW i sprawdzanie poprawności

• Poprzednia lekcja: Rozmieszczenie (CSS)

Lekcja 14: Standardy WWW i sprawdzanie poprawności

W tej lekcji, uzyskasz wiedzę bardziej teoretyczną na temat HTML.

Co jeszcze można wiedzieć o HTML?

Możesz kodować w HTML różnymi sposobami. Tyloma samymi sposobami przeglądarka może odczytywać twój kod HTML. Można powiedzieć że HTML ma wiele dialektów. To powoduje że niektóre strony wyglądają inaczej w różnych przeglądarkach.

Próbowano wprowadzenia standardu HTML poprzez konsorcjum World Wide Web Consortium (W3C) założone przez Tima Berners-Lee (tak! wspaniały gość który wynalazł język HTML) ale okazało się że jest to długa i bardzo ciężka droga.

W starych czasach - kiedy przeglądarki były czymś za co musiałeś zapłacić - Netscape dominował wśród przeglądarek. Najlepiej wspieranym standardem HTML był standard 2.0 a póżnej 3.2. Ponieważ Netscape posiadał ponad 90% rynku, nie musiał dbać o standardy - i nie robił tego. Netscape wymyślił swoje własne dziwne elementy, które nie działały w innych przeglądarkach.

Przez wiele lat Microsoft prawie całkowicie ignorował internet. Po pewnym czasie podjął on współzawodnictwo z Netscape i wprowadził swoją przeglądarkę. Pierwsza wersja przeglądarki Microsoftu, Internet Explorer, nie była lepsza od Netscape pod względem współpracy ze standardem HTML. Ale Microsoft oddał swoją przeglądarkę za darmo (zawsze popularny sposób) i Internet Explorer szybko stał się najbardziej popularną przeglądarką.

Od wersji 4 i 5 Microsoft postawił sobie za cel współpracę ze standardem HTML należącym do W3C. Netscape nie zdołał stworzyć nowej wersji przeglądarki i kontynuował dystrybucję starej wersji 4.

Oto reszta historii. Dzisiaj standard HTML nazwany jest wersją 4.01 oraz XHTML. Teraz Internet Explorer zajmuje większość rynku. Internet Explorer nadal ma swoje dziwne elementy ale współpracuje także bardzo mocno ze standardem HTML - W3C. Tak samo jak inne przeglądarki, takie jak Mozilla, Opera oraz Netscape.

Więc, kiedy kodujesz w HTML według standardu W3C, robisz stronę widoczną we wszystkich przeglądarkach w taki sam sposób - teraz i w przyszłości. Naszczęście, to czego się uczyłeś w tym kursie to nowy, dokładny i czysty HTML zwany XHTML.

Jak określić wersję HTML której używam?

Musisz poinformować przeglądarkę jakiej wersji HTML używasz, w naszym przypadku jest to XHTML. Aby to zrobić, Używa się "Document Type Declaration" czyli Deklaracji Typu Dokumentu. Document Type Declaration jest zawsze umieszczana na samej górze dokumentu:

Przykład 1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="pl">

<head>

<title>Tytuł</title>

</head>

<body>

<p>tekst tekst</p>

</body>

</html>

Poza Deklaracją Typu Dokumentu (pierwsza linia w powyższym przykładzie), która mówi przeglądarce że używasz wersji XHTML, musisz także umieścić dodatkowe informacje w znaczniku html, a dokładnie atrybuty xmlns and lang.

Atrybut xmlns jest skrótem od "XML-Name-Space" (przestrzeń nazw XML) i powinien zawsze mieć taką samą wartość: http://www.w3.org/1999/xhtml. To wszystko co musisz wiedzieć. Ale jeżeli chcesz koniecznie wiedzieć więcej o przestrzeniach nazw to odsyłam do lektury na stronie W3C's.

W atrybucie lang określasz język dokumentu HTML. Dla tego używany jest standard ISO 639, który jest listą kodów wszystkich języków na świecie. W powyższym przykładzie ustawiony jest język Polski ("pl").

Dzięki DTD przeglądarka wie dokładnie jak ma czytać i pokazywać HTML. Tak więc, używaj przykładu powyżej jako szablon dla wszystkich swoich przyszłych dokumentów HTML.

DTD jest także ważne kiedy chcesz sprawdzić poprawność swoich stron.

Sprawdzanie poprawności? Po co i jak to robić?

Umieszczaj DTD na swoich stronach, dzięki temu zawsze będziesz mógł sprawdzić kod HTML i wyszukać błędy korzystając z darmowego walidatora W3C.

Aby sprawdzić samemu, zrób stronę i załaduj ją do Internetu. Teraz, idź do validator.w3.org, wpisz adres (URL) swojej strony i sprawdź ją. Jeżeli twój HTML jest poprawny otrzymasz wiadomość z gratulacjami. W innym przypadku wyświetlony zostanie raport z błędami i dokładnym miejscem ich występowania. Zrób specjalnie pare błędów żeby zobaczyć co się stanie.

Walidator nie jest tylko pomocnikiem w lokalizowaniu błędów. Niektóre przeglądarki starają się poprawić błędy popełnione w kodzie HTML przez twórców stron Internetowych, tak że możesz nigdy nie zobaczyć błędu w przeglądarce. Jednak inne przeglądarki mogą przedstawić stronę inaczej lub nawet nie przedstawić jej wogóle. Walidator pomoże ci znaleść także takie błędy, o których istnieniu nawet nie wiedziałeś.

Zawsze sprawdzaj swoje strony aby mieć pewność że zostaną one poprawnie zinterpretowane przez przeglądarkę.

Patrz także

• Następna lekcja: Ostateczne wskazówki

• Poprzednia lekcja: Publikacja stron

Lekcja 15: Ostateczne wskazówki

Gratulacje, dotarłeś do ostatniej lekcji.

Więc teraz wiem już wszystko?

Nauczyłeś się wiele i jesteś teraz gotowy do tworzenia swoich własnych stron internetowych! Jednak, to czego się nauczyłeś to podstawy i jest jeszcze wiele do opanowania. Lecz teraz masz dobre podstawy, które pomogą ci w dalszym rozwoju.

To jest ostatnia lekcja, więc otrzymasz jeszcze wskazówki:

• Po pierwsze, dobrym pomysłem jest utrzymywać porządek i strukturę w dokumentach HTML. Poprzez umieszczanie dobrze ułożonych dokumentów nie tylko pokarzesz innym, że panujesz nad kodem HTML ale także, łatwiej ci będzie uaktualniać strony w przyszłości.

• Trzymaj się standardów i sprawdzaj poprawność swoich stron, będzie to bardzo stresujące. Zawsze pisz czysty XHTML, używaj DTD i sprawdzaj poprawność stron w walidatorze.w3c.org.

• Dodaj treść do swoich stron. Pamiętaj że HTML jest narzędziem, które daje ci możliwość prezentacji informacji w internecie, więc upewnij się że posiadasz informację które będziesz prezentował. Upiększone strony mogą miło wyglądać ale większość ludzi kożysta z Internetu aby znaleść informacje.

• Unikaj wypełniania stron dużą ilością obrazków i innych fantazyjnych rzeczyktóre znalazłeś w internecie. Spowalnia to ładowanie strony i może być drażniące dla odwiedzających. Strony wymagające więcej niż 20 sekund do załadowania mogą stracić nawet do 50% odwiedzających.

• Pamiętaj aby dodać swoją stronę do wyszukiwarek tak by ludzie mogli ją znaleść i cieszyć się nią. Na głównej stronie większości wyszukiwarek znajdziesz odnośnik do strony dodawania nowych adresów Internetowych (Najbardziej popularna wyszukiwarka to Google, ale jest jeszcze wiele innych, np. DMOZ, Yahoo, AltaVista, AlltheWeb i Lycos).

• W tym kursie, nauczyłeś się korzystać z Notatnika, który jest bardzo prostym narzędziem, ale możliwe że pomocne będą narzędzia bardziej zaawansowane, które dadzą ci lepszy obraz kodu oraz więcej możliwości. Możesz znaleść streszczenie i recenzję innych edytorów tekstowych na stronie Download.com.

Jak nauczyć się więcej?

Przede wszystkim, ważne jest abyś kontynuował pracę i eksperymentował z rzeczami, o których dowiedziałeś się w tym kursie. Przeglądaj strony innych osób i jeżeli znajdziesz coś ciekawego zobacz jak jest to zrobione poprzez "Pokaż źródło " (Kliknij "Widok" w menu swojej przeglądarki i wybierz "Źródło").

Szukaj w internecie przykładów i artykułów dotyczących HTML. Jest wiele stron internetowych ze wspaniałą zawartością HTML.

Czytaj i zadawaj pytania na popularnych forach dyskusyjnych w internecie. Dwa najlepsze miejsca to Grupy dyskusyjne i Experts Exchange. Tutaj poznasz prawdziwych ekspertów, od których nauczysz się najwięcej.

Ostatnie, choć niemniej ważne: powinieneś - jak tylko będziesz gotowy - kontynuować naukę CSS w naszym kursie CSS.

Ostatnią rzeczą jaka mi została to życzyć wam wielu godzin zabawy z waszym nowym przyjacielem, językiem HTML.

Do zobaczenia w internecie :-)

Patrz także tłumaczenie Adam Tarkowski - [e-mail]

• Poprzednia lekcja: Standardy internetowe i sprawdzanie poprawności

3

---