Czasem trzeba zamilknąć, żeby zostać wysłuchanym

• Joomla
• CSS
• HTML
• Początek
• Start

Początek

Strona Główna

HTML

Wprowadzenie

Ćw. 1 - Wstęp do HTML i XHTML

Ćw. 2 - Body i meta

Ćw. 3 - Tekst

Ćw. 4 - Odsyłacze

Ćw. 5 - Tabele

Ćw. 6 - Multimedia

Ćw. 7 - Ramki

Ćw. 8 - Formularze

Ćw. 9 - Kolory i znaki specjalne

CSS

Wprowadzenie

Ćw. 10 - CSS i wstawianie CSS

Ćw. 11 - Selektory

Ćw. 12 - Czcionki i tekst

Ćw. 13 - Tło i marginesy

Ćw. 14 - Obramowanie i wykazy

Ćw. 15 - Rozmiary i tabele

Ćw. 16 - Pozycjonowanie i kursory

Ćw. 17 - Suwaki i filtry

Ćw. 18 - Menu w CSS

Ćw. 19 - Strona na DIV-ach

Joomla

Wprowadzenie

Ćw. 20 - Instalacja i konfiguracja

Ćw. 21 - Treść, sekcje i kategorie

Ćw. 22 - Tworzenie menu

Ćw. 23 - Komponenty Joomla

Ćw. 24 - Szablony i inne atrakcje

Ćwiczenie 15 - Rozmiary i tabele

Wprowadzenie:

W tym ćwiczeniu omówione zostaną kolejne własności CSS. Tym razem będą to: wymiary i tabele.

1. zadania do wykonania

Własności wymiarów:

1. szerokość
2. szerokość minimalna
3. szerokość maksymalna
4. wysokość
5. wysokość minimalna
6. wysokość maksymalna

Własności tabel:

1. tytuł tabeli
2. układ tabeli
3. obramowanie w tabeli
4. odstępy w tabeli
5. puste komórki

Wymiary

Szerokość

Składnia reguły:

1. selektor {width: wielkość;}

Wyraz selektor ma zastosowanie do elementów wyświetlanych w bloku.

1. wielkość - jednostki miary:
2. piksele - px
3. punkty edytorskie - pt
4. wysokość litery "x" - ex
5. wysokość aktualnej czcionki - em
6. centymetry lub milimetry - cm, mm
7. części dziesiętne centymetra pisane z kropką np.: 0.5cm
8. cale - in (1in=2.54cm)

Dzięki temu poleceniu można ustalić szerokość danego elementu.

Przykład:

do góry

Szerokość minimalna

Składnia reguły:

1. selektor {min-width: wielkość;}

Wyraz selektor ma zastosowanie do elementów wyświetlanych w bloku.

1. wielkość - jednostki miary:
2. piksele - px
3. punkty edytorskie - pt
4. wysokość litery "x" - ex
5. wysokość aktualnej czcionki - em
6. centymetry lub milimetry - cm, mm
7. części dziesiętne centymetra pisane z kropką np.: 0.5cm
8. cale - in (1in=2.54cm)

Dzięki temu poleceniu można ustalić minimalną szerokość danego elementu.

Przykład:

Niestety, Internet Explorer 6.0 nie interpretuje tego polecenia.

do góry

Szerokość maksymalna

Składnia reguły:

1. selektor {max-width: wielkość;}

Wyraz selektor ma zastosowanie do elementów wyświetlanych w bloku.

1. wielkość - jednostki miary:
2. piksele - px
3. punkty edytorskie - pt
4. wysokość litery "x" - ex
5. wysokość aktualnej czcionki - em
6. centymetry lub milimetry - cm, mm
7. części dziesiętne centymetra pisane z kropką np.: 0.5cm
8. cale - in (1in=2.54cm)

Dzięki temu poleceniu można ustalić maksymalną szerokość danego elementu.

Przykład:

Niestety, Internet Explorer 6.0 nie interpretuje tego polecenia.

do góry

Wysokość

Składnia reguły:

1. selektor {height: wielkość;}

Wyraz selektor ma zastosowanie do elementów wyświetlanych w bloku.

1. wielkość - jednostki miary:
2. piksele - px
3. punkty edytorskie - pt
4. wysokość litery "x" - ex
5. wysokość aktualnej czcionki - em
6. centymetry lub milimetry - cm, mm
7. części dziesiętne centymetra pisane z kropką np.: 0.5cm
8. cale - in (1in=2.54cm)

Dzięki temu poleceniu można ustalić wysokość danego elementu.

Przykład:

do góry

Wysokość minimalna

Składnia reguły:

1. selektor {min-height: wielkość;}

Wyraz selektor ma zastosowanie do elementów wyświetlanych w bloku.

1. wielkość - jednostki miary:
2. piksele - px
3. punkty edytorskie - pt
4. wysokość litery "x" - ex
5. wysokość aktualnej czcionki - em
6. centymetry lub milimetry - cm, mm
7. części dziesiętne centymetra pisane z kropką np.: 0.5cm
8. cale - in (1in=2.54cm)

Dzięki temu poleceniu można ustalić minimalną wysokość danego elementu.

Przykład:

Niestety, Internet Explorer 6.0 nie interpretuje tego polecenia.

do góry

Wysokość maksymalna

Składnia reguły:

1. selektor {max-height: wielkość;}

Wyraz selektor ma zastosowanie do elementów wyświetlanych w bloku.

1. wielkość - jednostki miary:
2. piksele - px
3. punkty edytorskie - pt
4. wysokość litery "x" - ex
5. wysokość aktualnej czcionki - em
6. centymetry lub milimetry - cm, mm
7. części dziesiętne centymetra pisane z kropką np.: 0.5cm
8. cale - in (1in=2.54cm)

Dzięki temu poleceniu można ustalić maksymalną wysokość danego elementu.

Przykład:

Niestety, Internet Explorer 6.0 nie interpretuje tego polecenia.

do góry

Tabele

Tytuł tabeli

Składnia reguły:

1. selektor {caption-side: sposób;}

Wyraz selektor ma zastosowanie do elementu caption - czyli znacznika odpowiadającego za tytuł w tabeli.

1. sposób:
2. "top" - tytuł powyżej tabeli
3. "bottom" - tytuł poniżej tabeli

Dzięki temu poleceniu można dodać i ustawić tytuł tabeli.

Przykład:

do góry

Układ tabeli

Składnia reguły:

1. selektor {table-layout: ułożenie;}

Wyraz selektor ma zastosowanie do elementu table - czyli głównego znacznika odpowiadającego za budowę tabeli.

1. ułożenie:
2. "auto" - wielkość tabeli dostosowuje się do zawartości komórek (domyślnie)
3. "fixed" - wielkość tabeli nie dostosowuje się do zawartości komórek

Dzięki temu poleceniu można ustalić sposób układania się tabeli: względem zawartości, czy też względem wymiarów całej tabeli.

Przykład:

do góry

Obramowanie w tabeli

Składnia reguły:

1. selektor {border-collapse: styl;}

Wyraz selektor ma zastosowanie do elementu table - czyli głównego znacznika odpowiadającego za budowę tabeli.

1. styl:
2. "collapse" - obramowanie poszczególnych komórek wyświetlane będzie jako wspólne
3. "separate" - obramowanie poszczególnych komórek wyświetlane będzie osobno dla każdej komórki

Dzięki temu poleceniu można ustalić sposób rysowania obramowania w tabeli: albo wspólnego, zlanego w jedno, albo oddzielnie dla każdej komórki z pewnym odstępem.

Przykład:

do góry

Odstępy w tabeli

Składnia reguły:

1. selektor {border-spacing: wielkość;}

Wyraz selektor ma zastosowanie do elementu table - czyli głównego znacznika odpowiadającego za budowę tabeli.

1. wielkość - jednostki miary:
2. piksele - px
3. punkty edytorskie - pt
4. wysokość litery "x" - ex
5. wysokość aktualnej czcionki - em
6. centymetry lub milimetry - cm, mm
7. części dziesiętne centymetra pisane z kropką np.: 0.5cm
8. cale - in (1in=2.54cm)
10. jedna wielkość:
11. poziomy i pionowy odstęp będzie taki sam
13. dwie wielkości (oddzielone spacją):
14. pierwsza oznacza poziomy odstęp
15. druga oznacza pionowy odstęp

Dzięki temu poleceniu można ustalić poziomy i pionowy (osobno lub oddzielnie) odstęp między komórkami. Przy table-collapse: collapse; polecenie nie działa.

Przykład:

do góry

Puste komórki

Składnia reguły:

1. selektor {empty-cells: zachowanie;}

Wyraz selektor ma zastosowanie do elementu table - czyli głównego znacznika odpowiadającego za budowę tabeli.

1. zachowanie
2. "show" - ukazanie obramowania wokół pustych komórek
3. "hide" - schowanie obramowania wokół pustych komórek

Dzięki temu poleceniu można ustalić czy obramowanie wokół pustych komórek ma się wyświetlać czy nie.

Przykład:

do góry

Zadania do wykonania:

W tym ćwiczeniu należy zastosować własności CSS dotyczące rozmiarów i tabel do sformatowania plików HTML. Zadanie polega na sformatowaniu dwóch plików HTML jednym, zewnętrznym plikiem CSS, w którym użyte będą własności dotyczące obramowania i wykazów. W pliku plik_2.html zostanie dokonana również lokalna modyfikacja wewnętrznym i wewnątrzwierszowymi arkuszami stylów. Konieczne będzie także użycie klas selektorów.

1. Należy zacząć od przygotowania struktury folderów i plików:

1. foldery:
2. cw_15 - główny
3. pliki - zawarty w głównym
4. style - zawarty w głównym

1. pliki:
2. plik_1.html - w folderze pliki
3. plik_2.html - w folderze pliki
4. style.css - w folderze style

2. W obu plikach HTML należy umieścić taką samą treść:

1. zawartość plików HTML:
2. szablon HTML 4.01 Transitional
3. w sekcji <head>...</head>:
4. łącze do arkusza stylów - patrz tutaj
5. w znaczniku <title>...</title> nazwa pliku
6. w sekcji <body>...</body>:
7. znacznik <div>...</div> z klasą: klasa_1
8. w nim wzajemne łącza do plików
9. tabela: 3 kolumny na 3 wiersze
10. w komórkach odpowiednio, po kolei (wierszami na dół) wpisy: komórka 1, komórka 2, komórka 3, itd...
11. w pierwszej komórce wpis cztery razy
12. w znaczniku <table>...</table>: klasa_2
13. w znaczniku <caption>...</caption>: znacznik <h3>...</h3>
14. w tym znaczniku <h3>...</h3>: klasa_3
15. w nim tytuł tabeli
16. w pierwszym znaczniku <tr>...</tr>: klasa_4
17. w drugim znaczniku <tr>...</tr>: klasa_5
18. w trzecim znaczniku <tr>...</tr>: klasa_6

Po wpisaniu całej zawartości pliki powinny wyglądać tak - bez żadnego formatowania:

Krok 1

3. W pliku CSS należy przygotować dla wszystkich sześciu klas, sześć różnych reguł formatujących rozmiary i tabele, uwzględniających ich właściwości, a także reguły dla selektorów body i td.

1. zawartość pliku CSS:
2. body:
3. kolor tła: #808080; (gray)
5. klasa_1:
6. szerokość: 12cm;
7. kolor tła: #ffff00; (yellow)
8. obramowanie: 5px double #800000; (maroon)
9. wyrównanie tekstu: center;
10. marginesy:
11. górny: 10px;
12. prawy: 0px;
13. dolny: 30px;
14. lewy: 40px;
15. marginesy wewnętrzne:
16. górny i dolny: 15px;
17. lewy i prawy: 10px;
18. tak wyglądają pliki HTML po formatowaniu: klasa_1
20. klasa_2:
21. szerokość: 15cm;
22. wysokość: 10cm;
23. kolor tła: #000080; (navy)
24. układ tabeli: auto;
25. obramowanie w tabeli: collapse;
27. klasa_3:
28. szerokość: 10cm;
29. kolor tła: #800000; (maroon)
30. obramowanie: 5px solid #ffff00; (yellow)
31. kolor tekstu: #ffffff; (white)
33. klasa_4:
34. kolor tła: #c0c0c0; (silver)
36. klasa_5:
37. kolor tła: #00ffff; (aqua)
39. klasa_6:
40. kolor tła: #00ff00; (lime)
42. td:
43. obramowanie: 5px solid #ff0000; (red)
44. tak wyglądają pliki HTML po formatowaniu - cała tabela

Efekt powinien być taki, że oba pliki HTML będą tak samo sformatowane. Wygląda to następująco:

oba pliki - klasa_1

oba pliki - cała tabela

4. W pliku: plik_2.html należy dokonać wewnętrznych (zapisywanych w nagłówku dokumentu) i lokalnych wewnątrzwierszowych modyfikacji:

1. wewnętrzne modyfikacje w pliku: plik_2.html:
2. td:
3. obramowanie: 10px double #ff00ff; (fuchsia)

1. wewnątrzwierszowe modyfikacje w pliku: plik_2.html:
2. klasa_1:
3. szerokość: 5cm;
4. maksymalna wysokość: 1cm;
5. tak wygląda plik_2.html po modyfikacji: klasa_1
7. klasa_2:
8. szerokość: 18cm;
9. wysokość: 8cm;
10. kolor tła: #ffffff; (white)
11. układ tabeli: fixed;
12. obramowanie w tabeli: separate;
14. klasa_3:
15. szerokość: 12cm;
16. obramowanie: 5px double;
18. klasa_4:
19. wysokość: 4cm
20. kolor tła: #ff0000; (red)
22. klasa_5:
23. wysokość: 3cm;
24. kolor tła: #0000ff; (blue)
25. kolor tekstu: #ffffff; (white)
27. klasa_6:
28. wysokość: 1cm;
30. komórka 2:
31. szerokość: 8cm;
33. komórka 7
34. kolor tła: #008000; (green)
36. komórka 8
37. kolor tła: #c0c0c0; (silver)
39. komórka 9
40. kolor tła: #00ffff; (aqua)
41. tak wygląda plik_2.html po formatowaniu - cała tabela

Po wszystkich zmianach plik plik_2.html powinien wyglądać następująco:

plik_2.html - klasa_1

plik_2.html - cała tabela

Oceniany będzie folder cw_15 z dwoma podfolderami: pliki i style, w których zawarte będą odpowiednio pliki: w folderze pliki: plik_1.html i plik_2.html, w folderze style plik: style.css. Pliki HTML powinny być sformatowane zgodnie z poleceniami za pomocą zewnętrznego arkusza stylów z pliku style.css. Formatowanie obejmuje rozmiary i tabele - użyte są własności formatowania tych dwóch elementów. Ponadto w pliku plik_2.html dokonana ma zostać wewnętrzna i lokalna wewnątrzwierszowa modyfikacja wyżej wspomnianych elementów.

Strona Główna

do góry

Przy przygotowywaniu powyższego ćwiczenia wielką pomocą służył kurs HTML-a - w wersji online: http://www.kurshtml.boo.pl, jak również w wersji offline do pobrania z tej samej strony.

Copyright © 2008   Sławek Rokicki