HTML - podstawy języka przeglądarki Internetowej


HTML jest "językiem" przeglądarki.. HTML został wynaleziony w 1990 przez naukowcę Tima Berners-Lee.
Celem było ułatwienie naukowcom na różnych uniwersytetach dostępu do dokumentów badawczych innych naukowców.
Projekt okazał się wielkim sukcesem, większym niż wyobrażał sobie to Tim Berners-Lee.
Poprzez wynalezienie języka HTML, położył on fundamenty internetu takiego jaki znamy dziś.

HTML jest językiem, który umożliwia prezentację informacji (np. badań naukowych) w Internecie.
To co widzimy kiedy przeglądamy strony to interpretacja kodu HTML przez przeglądarkę.
Aby zobaczyć kod HTML strony w internecie, po prostu kliknij "Widok" w górnym menu przeglądarki i wybierz "Źródło".
Do czego można używać kodu HTML?

Jeżeli chcemy robić strony internetowe, nie ma innej drogi niż HTML.
Nawet jeżeli korzystamy z programu do robienia stron, takiego jak np. Dreamweaver, podstawowa wiedzia na temat języka HTML ułatwia  życie i ulepszy  stronę internetową.
HTML jest łatwy do nauczenia i użycia.

HTML jest używany do tworzenia stron internetowych. 
HTML jest skrótem od "HyperText Mark-up Language" - już teraz wiesz więcej niż potrzeba na tym etapie. 
Hyper jest odwrotnością słowa liniowy. W dawnych dobrych czasach -  programy komputerowe działały liniowo: kiedy program uruchomił jedną akcję szedł do następnej linii,
zaraz po tym do kolejnej i tak dalej.
Ale HTML jest inny - możesz iść gdziekolwiek chcesz i kiedy chcesz. Na przykład, nie trzeba odwiedzić MSN.com zanim wejdziesz na HTML.net.
Text - tekst.
Mark-up (podnosić) oznacza to co robisz z tekstem. Podnosisz standard tekstu tak jak to robisz za pomocą edytorów tekstowych z tytułami, wypunktowaniem lub pogrubianiem i tak dalej.
Language (język) to czym jest HTML. Używa wielu Angielskich wyrazów.

 XHTML (Extensible HyperText Mark-up Language) który, w skrócie, jest nową i bardziej strukturalną wersją języka HTML.

Elementy i znaczniki języka HTML

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 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.

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

Zawsze trzeba 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ą.
Umieszczamy 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.


Tworzymy swoją pierwszą stronę internetową


Potrzebny edytor, np. Notatnik i przeglądarka Internetowa do tworzenia stron internetowych


  <head>
  <title>Moja pierwsza strona internetowa </title>
  </head>

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

</html>

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

Zapisujemy, np. str1.htm (lub rozszerzenie html)


<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>

Przykład 2.  str2.htm

<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>


Nowe elementy: <i>,. <b>,  <i>, <small>, <br>, <hr>

Pochylanie tekstu - używając znacznika otwierającego <i> i zamykającego </i>. Tak, "i" jest skrótem od "italic" czyli styl liter pochylonych.

<i>To powinno być pochylone.</i>
To powinno być pochylone.

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


<b><i>Tekst jest pogrubiony i pochylony</i></b>
Tekst jest pogrubiony i pochylony

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

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):

<hr />

Listy:

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).
Przykłady:

<ul>
  <li>Element 1 listy</li>
  <li>Element 2 listy</li>
</ul>


<ol>
  <li>Pierwszy element listy</li>
  <li>Drugi element listy</li>
</ol>

  1. Pierwszy element listy
  2. Drugi element listy
Przykład 3. str3.htm

<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>

Atrybuty

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.
np.
<h2 style="background-color:#ff0000;">Moja przyjaźń z HTML</h2>

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

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
Jest wiele różnych atrybutów. Pierwszy  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>

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.Np.
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.
Można także używać angielskich nazw popularnych kolorów (biały - white, czarny - black, czerwony - red, niebieski - blue, zielony - green i żółty - yellow).

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

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.
Element

Odnośniki

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 przedstawie przykład jak może wyglądać odnośnik do strony HTML.net:

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).
 "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>

Jeżeli chcemy 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:
<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:
<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ć "../../").

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>

Przykład z odnośnikami:

<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

Możesz także zrobić odnośnik do adresu e-mail. Robisz to prawie tak samo jak dla dokumentu HTML:
Przykład:
<a href="mailto:nobody@html.net">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


Obrazki

Wstawianie obrazków, np.
<img src="david.jpg" alt="David" />

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").
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.


Można  umieścić obrazek w innym folderze, lub nawet obrazek zamieszczony na innej stronie Internetowej:

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

Obrazek może być odnośnikiem:
<a href="http://www.html.net">
<img src="logo.png" /></a>
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:

<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:

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

Dwa dodatkowe ważne atrybuty to width i height:

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

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ą:

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

akż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.

Tabele

Tabele są używane do przedstawiania "danych tabelarycznych" tzn., informacji logicznie zaprezentowanych w kolumnach i wierszach.
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>?
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:

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

Atrybuty tabeli
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>

Tak jak z obrazkami, możesz także ustawić szerokość tabeli w pikselach - lub alternatywnie w procentach ekranu:
<table border="1" width="30%">

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ół).

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

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:

<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>

Wynik:
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.

Inny przykład:

<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

Rowspan

Rowspan określa na ile wierszy ma zostać komórka rozciągnięta:

<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 2
Komorka 1  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.

Układ graficzny elementów (CSS)


Aby dodać na swojej stronie układ graficzny wykorzystaj Kaskadowe Arkusze Styłów (Cascading Style Sheets - CSS).
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).
CSS może być dodany dzięki atrybutowi style.

Na przykład, możesz ustawić czcionki i wielkość czcionki akapitu:

<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>

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:

<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>

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.

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');">


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
<p style="padding:25px;border:1px solid red;">Kocham CSS</p>

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ę:

<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>

Za pomocą właściwości position, możesz umieścić element na swojej stronie dokładnie tam gdzie chcesz:
<img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />

Publikacja stron


Aby umieścić stronę w internecie, musisz tylko mieć trochę miejsca na serwerze w inernecie oraz darmowy program FTP.
Można też wykorzystać np. Total Commander do publikacji w roli FTP (Sieć, FTP Połączenie)

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.