SP w Piotrowicach Strona Główna SP w Piotrowicach
Forum Szkoły Podstawowej nr 3 w Piotrowicach

FAQFAQ  SzukajSzukaj  UżytkownicyUżytkownicy  GrupyGrupy
RejestracjaRejestracja  ZalogujZaloguj  AlbumAlbum

Poprzedni temat «» Następny temat
Proste tabele
Autor Wiadomość
Greif 



Pomógł: 2 razy
Wiek: 44
Dołączył: 02 Paź 2007
Posty: 1577
Skąd: Piotrowice
Wysłany: 2007-11-03, 02:42   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. :-)
_________________
Pozdrawiam
----------------------------------
 
 
Greif 



Pomógł: 2 razy
Wiek: 44
Dołączył: 02 Paź 2007
Posty: 1577
Skąd: Piotrowice
Wysłany: 2007-11-03, 17:23   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.
_________________
Pozdrawiam
----------------------------------
 
 
WoJtEk ;) 
Pan i Władca



Wiek: 26
Dołączył: 10 Paź 2007
Posty: 93
Skąd: Przeciszów
Wysłany: 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 



Pomogła: 2 razy
Wiek: 26
Dołączyła: 10 Paź 2007
Posty: 1018
Skąd: Piotrowice
Wysłany: 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>
_________________
"Gdzie jest skarb Twój tam i serce Twoje"
 
 
 
Greif 



Pomógł: 2 razy
Wiek: 44
Dołączył: 02 Paź 2007
Posty: 1577
Skąd: Piotrowice
Wysłany: 2007-11-03, 21:20   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ć.
_________________
Pozdrawiam
----------------------------------
 
 
WoJtEk ;) 
Pan i Władca



Wiek: 26
Dołączył: 10 Paź 2007
Posty: 93
Skąd: Przeciszów
Wysłany: 2007-11-04, 00:26   

a jak moja praca ?
_________________

 
 
 
Greif 



Pomógł: 2 razy
Wiek: 44
Dołączył: 02 Paź 2007
Posty: 1577
Skąd: Piotrowice
Wysłany: 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.
_________________
Pozdrawiam
----------------------------------
 
 
Greif 



Pomógł: 2 razy
Wiek: 44
Dołączył: 02 Paź 2007
Posty: 1577
Skąd: Piotrowice
Wysłany: 2007-11-05, 00:42   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 :-)
_________________
Pozdrawiam
----------------------------------
 
 
faja94 
Użytkownik forum

Pomógł: 1 raz
Wiek: 25
Dołączył: 05 Lis 2007
Posty: 133
Skąd: Przeciszów
Wysłany: 2007-11-05, 10:44   

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

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



Pomógł: 2 razy
Wiek: 44
Dołączył: 02 Paź 2007
Posty: 1577
Skąd: Piotrowice
Wysłany: 2007-11-05, 14:59   

Wszystko jedno :-)
_________________
Pozdrawiam
----------------------------------
 
 
Kinia 


Wiek: 25
Dołączyła: 02 Lis 2007
Posty: 4
Skąd: Piotrowice
Wysłany: 2007-11-05, 15:32   

ehh :-/ ok niech panu będzie
 
 
faja94 
Użytkownik forum

Pomógł: 1 raz
Wiek: 25
Dołączył: 05 Lis 2007
Posty: 133
Skąd: Przeciszów
Wysłany: 2007-11-05, 15:43   

a to już skończyłem
 
 
 
Greif 



Pomógł: 2 razy
Wiek: 44
Dołączył: 02 Paź 2007
Posty: 1577
Skąd: Piotrowice
Wysłany: 2007-11-05, 15:57   

Kinia, to nie jest kara... :-D
_________________
Pozdrawiam
----------------------------------
 
 
faja94 
Użytkownik forum

Pomógł: 1 raz
Wiek: 25
Dołączył: 05 Lis 2007
Posty: 133
Skąd: Przeciszów
Wysłany: 2007-11-05, 15:58   

wysłane
 
 
 
WoJtEk ;) 
Pan i Władca



Wiek: 26
Dołączył: 10 Paź 2007
Posty: 93
Skąd: Przeciszów
Wysłany: 2007-11-05, 18:37   

Przypominam że ja też mogę doradzić xD
_________________

 
 
 
Wyświetl posty z ostatnich:   
Odpowiedz do tematu
Nie możesz pisać nowych tematów
Nie możesz odpowiadać w tematach
Nie możesz zmieniać swoich postów
Nie możesz usuwać swoich postów
Nie możesz głosować w ankietach
Nie możesz załączać plików na tym forum
Możesz ściągać załączniki na tym forum
Dodaj temat do Ulubionych
Wersja do druku

Skocz do:  

Powered by phpBB modified by Przemo © 2003 phpBB Group