Muzyka budzi w sercu pragnienie dobrych czynów

• 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 10 - CSS i wstawianie CSS

Wprowadzenie:

Od ćwiczenia 10 zajmować się będziemy CSS czyli Kaskadowymi Arkuszami Stylów (Cascading Style Sheets). CSS stanowią uzupełnienie dla HTML-a. HTML odpowiada za zawartość strony WWW, a CSS za jej wygląd. CSS umożliwia przypisanie dowolnemu elementowi dokumentu HTML (np. akapitowi, komórce tabeli, poziomej linii) określonego stylu.

1. zadania do wykonania

Przeniesienie opisów formatowania elementów do arkuszy stylów i pozostawienie w dokumencie wyłącznie znaczników HTML (bez ustawiania wartości atrybutów) pozwala oddzielić strukturę dokumentu i jego treść od formy przekazu. Sam kod HTML staje się przez to mniejszy i bardziej przejrzysty, a witryny ładują się znacznie szybciej.

Style pozwalają kontrolować takie atrybuty, jak:

1. rodzaj, rozmiar i kolor czcionki
2. wyrównywanie i wielkość marginesów
3. głębokość wcięcia akapitu
4. kolor i grafikę tła
5. odstępy między elementami
6. wzajemne położenie elementu i otaczającego go tekstu

Można zbudować stronę jedynie w oparciu o HTML-a i nadać jej jakiś wygląd, ale będzie to w porównaniu z możliwościami CSS bardzo skromne.

Za używaniem CSS przemawia kilka poważnych argumentów:

źródło: www.kurshtml.boo.pl

Arkusze stylów zawierają reguły. Każda z tych reguł jest instrukcją formatującą, która ma zastosowanie na stronie WWW. Arkusze stylów mogą zawierać pojedynczą regułę lub wiele reguł.

Reguły CSS mają specyficzną budowę. Składają się z trzech głównych elementów, a ich format jest następujący: selektor {właściwość: wartość;}.

1. selektor:
2. co ma być zmienione
3. konkretny element poddawany formatowaniu

1. właściwość:
2. jak ma być zmienione
3. typ formatowania

1. wartość:
2. o ile ma być zmienione
3. wartość typu formatowania

Przykład: h1 {color: #ff0000;} oznacza, że sformatowane mają być nagłówki h1 (selektor), mają zostać pokolorowane (właściwość), na kolor #ff0000; czyli: red (wartość).

Budowa reguły może być bardziej poszerzona, można objąć większą ilość selektorów tym samym formatowaniem np.: h1, h2, h3 {color: #ff0000;}, jak również jeden selektor jednocześnie objąć kilkoma właściwościami i wartościami np.: h1 {color: #ff0000; text-align: center;}, a także kilka selektorów jednocześnie formatować różnymi właściwościami i wartościami np.: h1, h2, h3 {color: #ff0000; text-align: center;}.

Należy przestrzegać ścisłych zasad budowy reguł:

a) selektory oddzielone są przecinkami i spacjami (, )

b) po selektorze ostatnim (tym najbliżej właściwości) nie wpisuje się przecinka, jedynie spację

c) właściwości i wartości wpisuje się w nawiasy klamrowe ({ })

d) właściwość i wartość oddzielone są dwukropkiem i spacją (: )

e) kolejne właściwości następują po średniku i spacji (; )

f) na końcu średnik nie jest wymagany, ale dobrze jest go wpisać, co ułatwia dodanie kolejnej właściwości

Ogólny schemat reguły jest następujący: selektor_1, selektor_2, selektor_3 {właściwość_1: wartość_1; właściwość_2: wartość_2; właściwość_3: wartość_3;}.

Istnieją trzy sposoby dołączania arkusza stylów do dokumentu HTML:

a) styl lokalny - wewnątrzwierszowy

b) wewnętrzny arkusz stylów

c) zewnętrzny arkusz stylów

Styl lokalny - wewnątrzwierszowy - tutaj reguła formatująca umieszczona jest bezpośrednio w określonym znaczniku HTML i tylko jego dotyczy. Budowa reguły jest tu nieco odmienna - regułę wpisuje się bezpośrednio do znacznika: <selektor style="właściwość: wartość;">...</selektor>.

Ważne jest by dopisać po selektorze czyli znaczniku wyrażenie style="...", a w cudzysłowiu umieścić właściwości i wartości.

Styl lokalny dotyczy tylko jednego selektora, natomiast może zawierać więcej właściwości i wartości np.: <h1 style="color: #800000; text-align: center;">...</h1>. Ta reguła oznacza, że tylko ten nagłówek zostanie w ten właśnie sposób sformatowany: pokolorowany kolorem #800000; (maroon) i wyrównany na środek.

Dla stylów duże znaczenie ma znacznik <span>...</span>. Z jego pomocą można sformatować pewien większy fragment dokumentu. Można nim objąć inne znaczniki wyświetlane w linii, takie jak wytłuszczenie tekstu lub kursywę.

Kolejnym istotnym znacznikiem jest znacznik <div>...</div>. Dzięki niemu można wydzielić określone bloki dokumentu i swobodnie je formatować. Może zawierać w sobie różne znaczniki jak i inne bloki.

Na kolejnych zrzutach pokazane są przykłady formatowania wewnątrzwierszowymi arkuszami stylów:

1. nagłówki i akapit
2. z wykorzystaniem bloków div i span
3. kod HTML i CSS poprzedniego przykładu

Wewnętrzny arkusz stylów - jest wbudowany w dokument HTML - znajduje się wewnątrz elementu <head>...</head>. W takim arkuszu można wpisać komentarze używając znaków: /*...*/ - nie będą one interpretowane przez przeglądarkę. Ogólny shcemat arkusza wygląda następująco:

1. <head>
2. <style type="text/css">
3. /* komentarz */
4. selektor_1 {właściwość_1: wartość_1; właściwość_2: wartość_2;}
5. selektor_2 {właściwość_1: wartość_1; właściwość_2: wartość_2;}
6. /* inny komentarz */
7. </style>
8. </head>

Taki arkusz będzie dotyczył wszystkich elementów ujętych w nim i będzie rozciągał się na cały dokument HTML. Czyli, jeżeli selektorem będzie na przykład akapit lub nagłówek h2, to wszystkie wystąpienia tego akapitu lub nagłówka w danym dokumencie HTML zostaną w wyznaczony sposób sformatowane.

Na kolejnych zrzutach pokazane są przykłady formatowania wewnętrzymi arkuszami stylów:

1. przykład
2. wewnętrzny arkusz stylów w pliku HTML

Zewnętrzny arkusz stylów - zapisywany jest w osobnym pliku z rozszerzeniem css Reguły formatowania są całkowicie odseparowane od strony HTML. Ten sam arkusz może być użyty wielokrotnie do różnych dokumentów HTML.

Powiązanie arkusza stylów z plikiem HTML następuje poprzez wstawienie odwołania do tego arkusza w części nagłówkowej dokumentu HTML. Wygląda to następująco:

1. <head>
2. <link rel="stylesheet" href="ścieżka dostępu do pliku" type="text/css">
3. </head>

1. ścieżka dostępu do pliku:
2. względna ścieżka dostępu do pliku css
3. należy wpisać drogę uwzględniając wszystkie foldery
4. wchodząc do folderu wpisujemy jego nazwę/
5. wychodząc z folderu wpisujemy ../
6. na końcu podajemy nazwę pliku z rozszerzeniem css

Budowa natomiast pliku z arkuszem stylów jest podporządkowana budowie reguł stylów. W dowolnym edytorze należy wpisać wszystkie reguły formatowania stosując ogólną zasadę: selektor {właściwość: wartość;}.

Edytor kED podaje na przykład taki zestaw reguł we wbudowanym szablonie arkusza CSS:

1. html, body
2. {background: #ffffff;
3. text-align: center;
4. font-size: 1em;
5. font-family: verdana, tahoma, arial, helvetica, sans-serif;
6. }
7. img
8. {border: 0px;
9. }
10. h1
11. {font-size: 1.4em;
12. font-weight: bold;
13. }
14. h2
15. {font-size: 1.2em;
16. }
17. h3
18. {font-size: 1em;
19. font-weight: bold;
20. }
21. table
22. {padding: 0px;
23. border: 0px;
24. margin: 0px auto 0px auto;
25. width: 700px;
26. background: #fafafa;
27. }
28. td
29. {text-align: left;
30. vertical-align: top;
31. background: #ffffff;
32. }

Wstawienie białych znaków (spacje, tabulacje, nowe linie) w arkuszu CSS nie ma wpływu na jego działanie, warto więc wpisywać reguły w taki sposób, aby były czytelne, jak np. powyżej.

Do danego dokumentu HTML można dołączyć więcej arkuszy stylów. Dzięki temu uzyska się możliwość wyboru wyglądu strony. Należy przygotować kilka plików CSS z alternatywnym formatowaniem stron WWW i odpowiednio je podłączyć do tych dokumentów.

źródło: www.kurshtml.boo.pl

Istnieje jeszcze jeden sposób dołączania arkusza stylów, który polega na imporcie tego arkusza z zasobów Internetu. Można zaimportować go i do wewnętrznego jak i zewnętrznego arkusza stylów.

Jednakże z racji tego, że celem zajęć jest umiejętność projektowania stron WWW z użyciem również CSS, to tym sposobem na ćwiczeniach zajmować się nie będziemy...

Dla porządku podaję sposób importu:

1. <head>
2. <style type="text/css">
3. @import url("http://www.jakisadres.pl/arkusz.css");
4. </style>
5. </head>

Kaskadowość arkuszy stylów. W związku z tym, że style mogą pochodzić z różnych źródeł, należy zapoznać się z pierwszeństwem ich oddziaływania na elementy strony.

Na przykład w zewnętrznym arkuszu stylów nagłówek h1 ma ustalony kolor #ff0000; (red) lecz w jednym z plików HTML w jednym nagłówku h1 ustalony został kolor #0000ff; (blue). Jakiego koloru będzie ten nagłówek?

źródło: www.kurshtml.boo.pl

Zadania do wykonania:

Jako, że w tym ćwiczeniu nie było jeszcze mowy o konkretnych właściwościach i ich wartościach, tu zostaną użyte jedynie przykładowe, bo celem tego ćwiczenia jest przede wszystkim umiejętność dołączania arkuszy stylów.

Właściwości jakie zostaną użyte to:

1. color: #rrggbb; - kolor tekstu
2. background-color: #rrggbb; - kolor tła
3. text-align: left, right, center, justify; (do wyboru) - wyrównanie tekstu

Informacje o kolorach: tutaj

Zadanie polega na wykonaniu formatowania za pomocą arkuszy stylów: zewnętrznego, wewnętrznych i wewnątrzwierszowych w kilku plikach HTML.

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

1. foldery:
2. cw_10 - 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. plik_3.html - w folderze pliki
5. style.css - w folderze style

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

1. zawartość plików:
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. nazwa pliku w znaczniku <p>...</p>
8. menu nawigacyjne w znaczniku <div>...</div>
9. napis: Nagłówek h2 w znaczniku <h2>...</h2>
10. jedną wstawkę: Lorem w znacznikach <div><p>...</p></div>
11. napis: Nagłówek h3 w znaczniku <h3>...</h3>
12. jedną wstawkę: Lorem w znaczniku <p>...</p>
13. napis: Nagłówek h2 w znaczniku <h2>...</h2>
14. napis: Nagłówek h3 w znaczniku <h3>...</h3>
15. jedną wstawkę: Lorem w znaczniku <p>...</p>
16. w każdym akapicie środkowe zdanie objąć znacznikiem <span>...</span>

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

Krok 1

3. Formatowanie zewnętrznym arkuszem stylów. W pliku style.css należy ustalić formatowanie dla wszystkich elementów znajdujących się w plikach:

1. selektor {właściwość: wartość;}:
2. body {background-color: #c0c0c0; color: #ff0000;}
3. div {text-align: center; background-color: #ffff00;}
4. p {text-align: justify;}
5. h2 {color: #0000ff; text-align: center;}
6. h3 {color: #800000; text-align: right;}
7. span {color: #00ff00;}

Po zapisaniu pliku style.css pliki powinny wyglądać tak:

Krok 2

Pozostałe dwa pliki wyglądają identycznie:

plik_2.html

plik_3.html

4. Formatowanie wewnętrznym arkuszem stylów - patrz tutaj. W plikach: plik_2.html i plik_3.html w sekcji nagłówkowej należy zapisać znacznik <style>...</style> z takim samym, odpowiednim formatowaniem:

1. selektor {właściwość: wartość;}:
2. h2 {background-color: #00ffff;}
3. h3 {text-align: left; color: #800080;}
4. span {background-color: #ffffff;}

Po modyfikacji oba pliki HTML powinny wyglądać tak:

Krok 3

Tak samo wygląda plik_3.html:

plik_3.

5. Formatowanie wewnątrzwierszowym arkuszem stylów - patrz tutaj. W pliku plik_3.html należy dokonać lokalnych modyfikacji na wybranych znacznikach:

1. <selektor style="właściwość: wartość;">:
2. pierwszy nagłówek h2: color: #ff00ff; background-color: #00ff00;
3. drugi nagłówek h2: text-align: right;
4. drugi nagłówek h3: text-align: center; color: #ffff00; background-color: #800000;
5. w trzecim fragmencie tekstu - span: background-color: #00ff00; color: #ffffff;

Po modyfikacji plik_3.html powinien wyglądać tak:

Krok 4

Oceniany będzie folder cw_10 z podfolderami: pliki i style i z plikami: plik_1.html, plik_2.html, plik_3.html i style.css w odpowiednich folderach. Pliki HTML powinny być sformatowane za pomocą CSS, na trzy sposoby: zewnętrznym arkuszem stylów (wszystkie pliki), wewnętrznym arkuszem stylów (plik_2.html i plik_3.html) i wewnątrzwierszowym arkuszem stylów (plik_3.html) - odpowiednie selektory - zgodnie z podanymi właściwościami i ich wartościami.

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