Write Less - Do more: HTML - Zawody mistrzostw świata

Trochę wstępu

Dawno, dawno temu, za siedmioma górami, za siedmioma lasami żył sobie internet. No i ten internet to był bardzo młody i taki hmmm… Nie wiedział za wiele. Brak mu było doświadczenia. Ciężko mu było zdefiniować się. Powstawały w tym czasie przeglądarki. Oczywiście każda musiała obowiązkowo mieć własne standardy i własną interpretację pewnych zdarzeń, znaczników itp. No i zapanował chaos wśród stron internetowych. I wtedy głos jednego przemówił, i tak oto rzekł:

- Zrobimy przeglądarki graficzne!

I chór się podniósł i wszyscy zgodnie wiwatowali. Niedługo jednak potem zaczęły powstawać problemy – jak organizować dane na stronach… I byli wśród nich starzy i młodzi, mędrcy oraz głupy takie, że o matko polskie społeczeństwo dni dzisiejszych by się nie powstydziło. Niemniej jednak były to burzliwe czasy. Jeden z mędrców powiedział – ZRÓBMY RAMKI! I tak też się stało, zaczęto budować strony internetowe które przypominały … Na pewno nie dzisiejsze portale. Powiem tylko, że co ładniejsze strony wyglądały naprawdę nieźle. Ale ciężko było organizować dane w ramkach. I widzieli ludzie, że ramki były brzydkie. Wtem jeden z nich, szlachetny Mietek z Mietkowa rzekł:

- Od dziś, żaden informatyk nie użyje ramki, która będzie wrogiem jego, która będzie wirusy zagnieżdżać na jego witrynach, a informatyk zniszczy ramkę i nikt już nie poważy się jej użyć. W zamian informatyk pochyli się przed tabelą i to ją miłować będzie od dziś aż po wsze czasy.

Tak też się stało, ale nie do końca.

Tabela - dobra praktyka dawnych lat

Tabeli używano tak jak i dziś, do przedstawiania wyników, do robienia zestawień, czy też cenników na stronach internetowych. Z czasem jednak tabele zaczęły przybierać na znaczeniu jako dobre kontenery użytkowe do gromadzenia treści. Przykład ten obrazuje poniższy fragment kodu:

<!-- przyklad_7_1.html -->
<html>
 <head>
   <title>Przyklad 1 rozdział 7.</title>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 </head>
 <body>
   <table border="1">
     <tr><td>-</td><td>1</td><td>2</td><td>3</td></tr> <!-- Wiersz pierwszy -->
     <tr><td>1</td><td>1;1</td><td>1;2</td><td>1;3</td></tr> <!-- Wiersz drugi -->
     <tr><td>2</td><td>2;1</td><td>2;2</td><td>2;3</td></tr> <!-- Wiersz trzeci -->
     <tr><td>3</td><td>3;1</td><td>3;2</td><td>3;3</td></tr> <!-- Wiersz czwarty -->
   </table>
 </body>
</html>

Powyższy przykład ukazuje samą idee tabelki. Tabelka jak każda inna, czyż nie ? Jeśli jeszcze tego nie widzisz, odpal powyższy przykład. Czas, aby poznać części składowe tego oto tworu.

<table> </table> - Początek i koniec całego ciała tabeli. Może posiadać różne atrybuty, takie jak wysokość etc. Tabela składa się z wierszy.
<tr> </tr> - Początek i koniec danego wiersza. Może posiadać różne atrybuty. Elementem wiersza może być tylko komórka.
<td> </td> - Początek i koniec komórki. Komórka jako cząstka elementarna (podstawowa) tabeli może także posiadać różne atrybuty. W niej umieszcza się tekst, wideo, obrazki, etc.

Atrybuty dodatkowe:

<table border=”x”> – border określa grubość (px) obramowania tabeli (ang border - obramowanie).
<table align=”x”> – align określa to, w jakiej pozycji ma być tabelka względem strony tj. wyrównana do: lewej, środka, prawej(left, center, right).
<table cellspacing=”x”> – ten atrybut określa odstępy między kolejnymi komórkami (ang. cell - komórka ; space - miejsce).
<table cellpadding=”x”> – atrybut określa padding (odstęp wewnętrzny) od krawędzi w komórkach tabeli.
<table width=”x”> – width (ang. width – szerokość) jest to atrybut, przyjmujący wartość w pixelach. Ustala szerokość tabeli.
<table height=”x”> – width (ang. height – wysokość) jest to atrybut, przyjmujący wartość j/w. Ustala wysokość tabeli.
<table bgcolor=”x”> – bgcolor (ang. background – tło) ustala kolor tła tabeli. Wartość może zostać podana w języku angielskim lub w trybie szesnastkowym (http://lmgtfy.com/?q=Tester+kolor%C3%B3w+hex - pierwszy link).
<td colspan=”x”> – col (ang. column -kolumna) span (ang. span – rozpiętość). Rozpiętość kolumny. x jest tu ilością komórek scalonych w jednym WIERSZU.
<td rowspan=”x”> – row (ang. row – wiersz). Rozpiętość wierszy. X jest tu ilością komórek scalonych w danej KOLUMNIE

Przykłady zastosowania:

1. Tabela wyników rozgrywek ligi mistrzów:

<!-- przyklad_7_2.html -->
<html>
  <head>
    <title>Liga mistrzów</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <table border="1" align="center" bgcolor="yellow">
      <tr><td>Lp.</td><td>T1</td><td>T2</td><td>W</td><td>PKT</td></tr> <!-- Wiersz pierwszy -->
      <tr><td>1</td><td>ManU</td><td>Real Madryt</td><td>3:1</td><td>2</td></tr> <!-- Wiersz drugi -->
      <tr><td>2</td><td>Chelsea</td><td>FC Barcelona</td><td>2:3</td><td>2</td></tr> <!-- Wiersz trzeci -->
      <tr><td>3</td><td>Bayern Munch</td><td>FC Porto</td><td>3;3</td><td>1</td></tr> <!-- Wiersz czwarty -->
    </table>
  </body>
</html>

2. Tabela z indeksu

<!-- przyklad_7_3.html -->
<html>
  <head>
    <title>Tabela z indeksu</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <table border="1" width="800">
      <tr><td colspan="5"> Semestr I </td></tr>
      <tr><td rowspan="2" width="200">Imię i Nazwisko</td><td rowspan="2" width="100">Podpis</td><td colspan="3" width="500">Wyniki</td></tr>
      <tr><td width="166">Zal.</td><td width="166">Egz.</td><td width="166">XYZ.</td></tr>
      <tr><td>mgr. Wojciech Burczymucha</td><td></td><td>4</td><td></td><td></td></tr>
      <tr><td>dr. Paweł Kiszczał</td><td></td><td></td><td>5</td><td></td></tr>
      <tr><td>prof. Stasiek Ogórski</td><td></td><td></td><td></td><td>3.5</td></tr>
    </table>
  </body>
</html>

3. Jakaś strona internetowa

<!-- przyklad_7_4.html -->
<html>
  <head>
    <title>Szablon strony internetowej</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <table border="1" width="1024" height="700" align="center">
      <tr><td colspan="3" height="200"> BANNER </td></tr>
      <tr><td width="262">MENU</td><td width="500">ŚRODEK STRONY</td><td width="262">MENU</td></tr>
      <tr><td colspan="3" height="20">STOPA</td></tr>
    </table>
  </body>
</html>

Praca domowa:

Na podstawie informacji z tego rozdziału oraz z rozdziałów poprzednich spróbuj zaprojektować stronę internetową portalu z informacjami sportowymi. (lub jakiegokolwiek innego)
Zrób tabelę o takich atrybutach:

Pierwszy wiersz – jedna komórka
Drugi wiersz 2 komórki, z czego ostatnia składa się z 4 komórek, dwóch w pionie 2 w poziomie
Trzeci wiersz – dwie komórki z czego pierwsza składa się z 2 komórek w poziomie a druga pochodzi z poprzedniego punktu.
Czwarty wiersz – cztery komórki z czego pierwsza z komórek składa się z dwóch w pionie.
Szerokość tabeli: 800
Wysokość tabeli: 440
Kolor tła: czerwony
Grubość obramowania: 3
Każda komórka powinna zawierać jedno dowolne słowo
Słowo powinno być w odległości 2 px od krawędzi każdej komórki
Tabela powinna być wycentrowana

Przeczytaj artykuł ponownie :)

Powodzenia!

Write Less - Do more

poniedziałek, 17 września 2012

HTML - Zawody mistrzostw świata – zróbmy tabelę!