SP w Piotrowicach
Forum Szkoły Podstawowej nr 3 w Piotrowicach

HTML - Proste tabele

Greif - 2007-11-03, 02:42
Temat postu: Proste tabele
6. Tworzenie stron WWW w języku HTML

  1. poprawne kodowanie "polskich" znaków diakrytycznych;
  2. wybór koloru lub/i tła strony;
  3. korzystanie z nagłówków;
  4. formatowanie koloru i rozmiaru czcionek;
  5. wstawianie i formatowanie grafiki;
  6. hiperłącza do innych stron (tekstowe i graficzne);
  7. wyliczanie i numerowanie;
  8. proste tabele;
  9. podział strony na ramki;
  10. interpretacja kodu strony i jego optymalizacja / poprawienie.

===
Nie musimy iść po kolei, ramy dokumentu html już znacie, więc możecie już proste tabele wstawiać, służą do tego znaczniki
<table> - otwiera tabelę
<tr> - otwiera wiersz tabeli (w html'u tabelę buduje się wierszami)
<td> - otwiera komórkę tabeli, powinno ich być w każdym wierszu tyle samo

Oczywiście każdy znacznik musimy zamknąć, np. </td></tr></table>
A właściwy tekst piszemy pomiędzy znacznikami
<td>...</td>

Może taki układ Wam więcej pomoże:

Kod:
<table>
   <tr>                              <!-- otwarcie 1 wiersza -->
      <td>Kolumna 1</td><td>Kolumna 2</td>
   </tr>                             <!-- zamknięcie 1 wiersza -->
   
   <tr>                              <!-- otwarcie 2 wiersza -->
      <td>Kolumna 1</td><td>Kolumna 2</td>
   </tr>                             <!-- zamknięcie 2 wiersza -->
</table>


Znaczniki "<!--" i "-->" służą do wstawiania komentarzy, które są pomijane przez przeglądarki i służą nam do tego, żebyśmy się nie pogubili we własnym kodzie, dobrym zwyczajem jest opisywanie komentarzami logicznych bloków kodu, np.
Kod:
<!-- Baner na górze strony -->
<!-- MENU -->
<!-- Tabela - plan lekcji -->


Należy pamiętać o odpowiedniej kolejności zamykania znaczników, żeby się "nie zazębiły".
Taka tabela nie będzie miała obramowania, więc zmodyfikujemy ją trochę, żeby nam zadanie nr 2 wyszło.
Zmieniamy znacznik <table>
na
Kod:
<table border="1">

i dostaniemy tabelę z ramką o grubości 1 piksel.

===
Zadanie nr 2
Proszę przysłać na adres postmaster@zspg-piotrowice.kei.pl plik "plan.html", gdzie będzie:
1. Poprawnie zakodowana polska strona kodowa.
2. Tło ustawione na białe, czcionka na czarną.
3. Nagłówek o treści "Plan lekcji"
4. Tabela z obramowaniem grubości 2 piksele, z waszym (aktualnym) planem lekcji.
5. Podpis autora strony, może być nick. :-)

Greif - 2007-11-03, 17:23
Temat postu: Słonko
Link do strony:
Plan lekcji

Plik plan.html słonka:

Dostrzeżone błędy:
  1. To nie błąd, ale na tym etapie nie musicie tego wstawiać, wystarczy strona kodowa.
  2. Znacznikiem <body> obejmuje się CAŁĄ treść strony, która ma być widoczna w przeglądarce, więc nie można go zamykać zaraz po otwarciu, tylko na końcu, bezpośrednio przed </html>
  3. Niepotrzebny odstęp między komórkami tabeli, niektóre przeglądarki źle to interpretują.
  4. Znacznika <th> nie objaśniałem, służy do wyróżnienia pierwszego wiersza tabeli, gdzie zwykle są etykiety kolumn. W pozostałej części tabeli należy używać znacznika <td>.
  5. Nie może być tekstu poza sekcją <body> a tym bardziej <html>. Widać, że w przeglądarce wyraz "słonko" wyświetlił się nad tabelą, a nie pod.


No i ostatni błąd, dosyć częsty, zapominanie domknięcia znaczników. Jak tego uniknąć? Bardzo prosto, zawsze wpisywać je parami. Robimy tabelę, wpisujemy
Kod:
<table>


</table>

...a potem odpowiednio pary <tr></tr>; <td></td> a na końcu dopiero wpisujemy właściwą treść.

Ok, na razie tyle, być może pozostali, którzy pracują nad zadaniami, unikną dzięki temu tych samych błędów.

Słonko, popraw błędy i możesz tu wkleić gotowy kod, pamiętając o zamknięciu go w tagi 'code'... '/code' w miejsce moich średników wstaw nawiasy kwadratowe.

WoJtEk ;) - 2007-11-03, 19:02

No to ja jeszcze wam zacznę truć głowę teorią.

Jest jeszcze coś takiego jak:
Cytat:
<th> </th>
Działa podobnie jak
Cytat:
<td> </td>
tylko tekst jest pogrubiony i wyśrodkowany.

A i co się wam jeszcze może przydać to indeks górny czyli
Cytat:
<sup> </sup>

słonko - 2007-11-03, 19:18

Kod:

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
         <title>Plan lekcji</title>
</head>
<body>
<h4>Plan Lekcji</h4>
<body bgcolor="white" ; text="black">
<table border="2">
<tr>
<th>Lp.</th><th>poniedziałek</th><th>wtorek</th><th>środa</th><th>czwartek</th><th>piątek</th>
</tr>
<tr>
<th>1.</th><td>-</td><td>geografia</td><td>w-f</td><td>matematyka</td><td>matematyka</td>
</tr>
<tr>
<th>2.</th><td>j.polski</td><td>religia</td><td>biologia</td><td>matematyka</td><td>fizyka</td>
</tr>
<tr>
<th>3.</th><td>j.polski</td><td>l.wychowawcza</td><td>j.polski</td><td>historia</td><td>j.angielski</td>
</tr>
<tr>
<th>4.</th><td>historia</td><td>biologia</td><td>matematyka</td><td>j.polski</td><td>j.niemiecki</td>
</tr>
<tr>
<th>5.</th><td>wos</td><td>j.angielski</td><td>j.angielski</td><td>religia</td><td>-</td>
</tr>
<tr>
<th>6.</th><td>fizyka</td><td>j.niemiecki</td><td>tech/inf</td><td>chemia</td><td>-</td>
</tr>
<tr>
<th>7.</th><td>muzyka</td><td>w-f</td><td>tech/inf</td><td>-</td><td>-</td>
</tr>
<tr>
<th>8.</th><td>sks</td><td>w-f</td><td>-</td><td>-</td><td>-</td>
</tr>
</table>
slonko
</body>
</html>

Greif - 2007-11-03, 21:20
Temat postu: Linka
Plik planlekcji.html Linki


Uwagi:
  1. To samo, co u Sylwii, znacznik <th> w całej tabeli, a to jest znacznik nagłówka tabeli, zresztą nawet nie mówiłem, żeby go używać. Przy dalszym formatowaniu tabeli, poknoci się wszystko, proszę używać <td>.
  2. Nazwa pliku miała być plan.html, uważnie czytać polecenia proszę.
  3. Kod jest "za gęsty", daj czasem puste linie, bo z czasem się pogubisz.
  4. Taki zapis <th> "kilka spacji" </th> będzie w przyszłości źle interpretowany, wiem że chciałaś mieć w kodzie przynajmniej zarys tej tabeli, która miała się pojawić, dlatego te puste miejsca. Jednak przeglądarki to takie bestie, że na swój sposób wiele rzeczy interpretują

Generalnie nie są to duże błędy, tylko chcę Was zmusić do DOKŁADNEGO wykonywania poleceń, wiem że niektórzy wiedzą już więcej o html'u, niemniej jednak już zdążyliście sobie utrwalić złe nawyki i nad tym trzeba pracować.

WoJtEk ;) - 2007-11-04, 00:26

a jak moja praca ?
Greif - 2007-11-04, 00:58

No napisałem, że w porządku, tylko śledźcie polecenia i wykonujcie je precyzyjnie. No i piszcie kod w porządnych edytorach.
Greif - 2007-11-05, 00:42
Temat postu: Kinga
Kod:
<td> - </td> <td> J.Niemiecki </td> <td> W-F </td> <td> - </td> <td> J.Niemiecki </td>

Kinga, pousuwaj te zbędne spacje z kodu, w przyszłości będą one miały negatywny wpływ na formatowanie.
Poprawiony plik prześlij do mnie jeszcze raz.

Zadanie 1 i 2 będziesz miała wtedy zaliczone :-)

faja94 - 2007-11-05, 10:44

Greif napisał/a:
z waszym (aktualnym) planem lekcji.

Naszym, jak dziewczyny mają inny, to ich nie :?:

Greif - 2007-11-05, 14:59

Wszystko jedno :-)
Kinia - 2007-11-05, 15:32

ehh :-/ ok niech panu będzie
faja94 - 2007-11-05, 15:43

a to już skończyłem
Greif - 2007-11-05, 15:57

Kinia, to nie jest kara... :-D
faja94 - 2007-11-05, 15:58

wysłane
WoJtEk ;) - 2007-11-05, 18:37

Przypominam że ja też mogę doradzić xD

Powered by phpBB modified by Przemo © 2003 phpBB Group