[IM] dr inż. Michał Głębowski
Plan zajęć bazy danych (cz.2) teoria, definicje, tabele, relacje język SQL, interfejs, zapytania MySQL, własna baza język (x)html budowa, struktura, tagi, CSS, walidacja, własna strona grafika rastrowa/wektorowa Inkscape/GIMP 2
Wymagane oprogramowanie Bazy danych MySQL Server 5.x (na serwerze) MySQL GUI Tools (Administrator + Query Browser) PSPad (lub inny edytor tekstu z podświetlaniem składni) DB Designer (opcjonalnie) Tworzenie stron www ked lub PSPad (lub inny edytor tekstu z podświetlaniem) Kompozer (lub inny edytor wysiwyg) opcjonalnie przeglądarka internetowa (lub kilka: IE/FF/O/CH) Grafika rastrowa / wektorowa Inkscape / GIMP / Paint.NET 3
Bazy danych - porządek w szafie 4
Przykłady zastosowań baz danych??? 5
Przykłady zastosowań baz danych (1) biblioteka: księgozbiór, książki wypożyczone, baza czytelników rejestr sportowców (np. biegaczy) i ich wyników, rekordów rejestr obywateli państwa: pesel, nip rejestr przedsiębiorców: regon, krs baza pracowników w przedsiębiorstwie, ich danych, ich wypłat baza firm klientów, baza firm dostawców, baza towarów baza zamówień, towarów i klientów baza pracowników i wydziałów na uczelni, baza publikacji baza sklepów i ich asortymentu 6
Przykłady zastosowań baz danych (2) baza telefonów i adresów mieszkańców miasta (ks. telefoniczna) baza firm z podziałem na branże (yellow pages) baza studentów na uczelni, z podziałem na wydziały, przedmioty, oceny cząstkowe, oceny z zaliczeń i egzaminów baza bezrobotnych zarejestrowanych w urzędzie pracy (wraz z przebiegiem zatrudnienia, odebranymi zasiłkami, itp.) biblioteka domowa podział książek na działy, ISBN domowa wideoteka baza filmów, podział na gatunki, wskaźnik wypożyczenia książka kucharska baza przepisów z podziałem na rodzaje potraw, użyte składniki 7
Przykłady zastosowań baz danych (3) baza ubezpieczonych dane kierowców i ich aut wraz z przebiegiem ubezpieczenia, wypłatami odszkodowań, itp. baza klientów banku, ich lokat, funduszy, inwestycji, przelewów, transakcji, zleceń stałych, blokad, itp. baza osób notowanych w kartotekach kryminalnych - dane personalne, lista wykroczeń, odbyte kary baza firmy zakupy, sprzedaż, faktury wystawione, podatki VAT, PIT rejestr środków trwałych w firmie, z podziałem na datę i koszt zakupu, położenie (nr pokoju), czas amortyzacji, itp. rejestr pacjentów przychodni dentystycznej wraz z ich stanem uzębienia oraz historią leczenia 8
Bazy danych część 2 (powtórka) Baza danych struktura składająca się z tabel dane między tabelami powiązane relacjami (RDBMS) Tabela główny (czasem jedyny) składnik bazy zbudowana jest z pól przechowuje dane w postaci rekordów 9
Struktura bazy konstrukcja (definicja) baza tabela 1 pole 1 pole 2 tabela 2 tabela 3 pole3 pole 1 pole 1 pole 2 pole3 pole 2 pole 4 10
Tabela - definicja sposób zapisu i przedstawiania informacji, w którym dane umieszcza się w kolumnach i wierszach tabela bazy danych składa się z pól (kolumn) oraz rekordów (wierszy) Id_klienta Nazwa klienta Miasto 1 Bartexim Wrocław 2 Hilton Białowieża 3 Agawa Łódź 4 Tracer Pabianice Tabela Klienci liczba kolumn (pól)? liczba rekordów (wierszy)? Każde pole posiada następujące cechy: nazwa typ (łańcuch znaków, liczba całkowita, liczba rzeczywista, typ logiczny, typ wyliczeniowy) długość atrybuty (not null, auto increment, indexed) 11
Bazy danych - tabela Tabela Definicja Dane Definicja tabeli określa strukturę tabeli, liczbę i rodzaj pól 12
Przykład definicji tabeli Poniższa tabela składa się z czterech pól nr pola nazwa typ długość obowiązk. inne 1 id INTEGER - tak AUTO INCREMENT 2 nazwisko VARCHAR 32 tak - 3 data_ur DATE - tak - 4 pensja FLOAT - nie - 13
Przykład definicji tabeli w zapisie SQL CREATE TABLE test1 ( id INT NOT NULL AUTO_INCREMENT KEY, nazwisko VARCHAR(32) NOT NULL, data_ur DATE NOT NULL, pensja FLOAT NULL ) ENGINE = MyISAM ; 14
Składnia definicji tabeli wersja prosta CREATE TABLE tbl_name( col_name data_type col_options, col_name data_type col_options,... ); NULL pole nieobowiązkowe NOT NULL pole obowiązkowe 15
Tabela - definicja pojedynczego pola col_name data_type col_options col_name nazwa kolumny (pola) data_type typ pola: podstawowe typy pól VARCHAR, INT lub INTEGER, FLOAT, DATE, TIME, CHAR 16
Nazewnictwo - reguły Nazewnictwo baz, tabel, pól znaki alfanumeryczne (litery, cyfry), podkreślenie brak spacji, bez znaków diakrytycznych rozróżnianie wielkości znaków zal. od systemu Przykłady: base two zamówienia nazwisko 17
Terminologia Rekord wiersz wpis (ang. record) Kolumna pole Relacja powiązanie Kwerenda - zapytanie 18
Definicja tabeli proste zadanie Utwórz tabelę KLIENT składającą się z 3 pól: pole id typu INT pole nazwisko typu VARCHAR o długości 32 znaki pole poczatek typu DATE 19
Definicja tabeli rozwiązanie CREATE TABLE klient ( id INT, nazwisko VARCHAR(32), poczatek DATE ); 20
Podstawowe wykorzystanie zapytań CREATE TABLE... Bazy: - tworzenie i definicja - usuwanie Tabele: - tworzenie i definicja - usuwanie INSERT INTO... SELECT... FROM... Tabele - rekordy: Tabele - rekordy: - wstawianie danych (rekordów) - usuwanie rekordów - aktualizacja rekordów - filtrowanie - sortowanie - łączenie danych - inne SELECT * FROM klient; CREATE TABLE klient ( INSERT INTO klient VALUES SELECT nazwisko FROM klient WHERE id > 3; id INT, (1,'Kowalski','2008-12-04'), nazwisko VARCHAR(32), (2,'Nowacki','2008-10-30'), poczatek DATE (3,'Kulig','2009-01-03'), WHERE poczatek BETWEEN (4,'Pralski', '2009-01-04'); '2008-12-01' AND ); SELECT id, data FROM klient '2009-01-02'; 21
Definicja tabeli CREATE TABLE klient ( id INT NOT NULL AUTO_INCREMENT KEY, nazwisko VARCHAR(32) NOT NULL, poczatek DATE NULL ); CREATE TABLE nazwa_tabeli( nazwa_kolumny typ_kolumny opcje, nazwa_kolumny typ_kolumny opcje,... ); 22
Wstawianie danych (rekordów) INSERT INTO nazwa_tabeli VALUES (wartości pól w kolejności jak w def.), (wartości pól w kolejności jak w def.), (wartości pól w kolejności jak w def.); INSERT INTO nazwa_tabeli (nazwy_wybranych_pól) VALUES (wartości wybranych pól), (wartości wybranych pól); 23
Wstawianie danych (rekordów) INSERT INTO klient VALUES (1, 'Kowalski', '2008-12-04'), (3, 'Kulig', NULL), (4, 'Pralski', NULL); INSERT INTO klient (id, nazwisko) VALUES (NULL, 'Cieplak'), (NULL, 'Gawron'); INSERT INTO klient (nazwisko, data) VALUES ('Braniak', NULL), ('Kraska', NULL); 24
Zapytania do bazy (wybór) SELECT nazwisko, data FROM klienci WHERE data > 2008-12-01 OR id < 3 ORDER BY data ASC LIMIT 2 SELECT lista_pól lub obliczenia FROM nazwa_tabeli WHERE lista_warunków połączona AND lub OR ORDER BY lista_pól ASC DESC itd... 25
Zapytania do bazy wersja rozszerzona SELECT [ALL DISTINCT DISTINCTROW ] [HIGH_PRIORITY] [STRAIGHT_JOIN] [SQL_SMALL_RESULT] [SQL_BIG_RESULT] [SQL_BUFFER_RESULT] [SQL_CACHE SQL_NO_CACHE] [SQL_CALC_FOUND_ROWS] select_expr [, select_expr...] [FROM table_references [WHERE where_condition] [GROUP BY {col_name expr position} [ASC DESC],... [WITH ROLLUP]] [HAVING where_condition] [ORDER BY {col_name expr position} [ASC DESC],...] [LIMIT {[offset,] row_count row_count OFFSET offset}] [PROCEDURE procedure_name(argument_list)] [INTO OUTFILE 'file_name' export_options INTO DUMPFILE 'file_name' INTO var_name [, var_name]] [FOR UPDATE LOCK IN SHARE MODE]] 26
Inne zastosowanie SELECT 1.SELECT 12; 2.SELECT 5*7 AS wynik; 3.SELECT now() AS teraz; 4.SELECT 4*SIN(PI()/2) AS w, 'hej!' AS slowo; 5.SELECT 'ala', 'ma', 'kota'; 6.SELECT CONCAT('ala', ' i ', 'kot') AS zdanie; 7.SELECT DATEDIFF('2009-03-01', '1974-05-14'); 8.SELECT DATE_ADD(now(), INTERVAL 1000 DAY); 9.SELECT DATE_ADD(now(), INTERVAL -100 MINUTE); 27
Wstęp do MySQL Query Browser pasek zakładek widok pełny ekran pole wpisywania zapytań pole wyświetlania wyników nagłówki wyników rekordy wynikowe 28
Przykłady SELECT z wynikami (1) komenda SELECT wykonuje również obliczenia nie wymaga pracy na tabelach obliczenia wykonywane są w składni podobnej do składni w językach programowania lub np. Excela (Calca) można stosować wbudowane funkcje MySQL (jest ich kilkaset), podobnie do funkcji w innych językach lub Excelu jeśli nie zdefiniujemy nazwy kolumny wynikowej (... AS nazwa), jej nazwa będzie taka, jak wyrażenie obliczane (lub nazwa pola tabeli) 29
Przykłady SELECT z wynikami (2) obliczenia, jak i pola rozdzielamy średnikiem podobnie jak w arkuszu kalk. można pracować na ciągach znaków, które muszą być w apostrofach 30
Przykłady SELECT z wynikami (3) Ile dni jest między dwoma datami? dodaj x dni do obecnej daty (i czasu) odejmij x minut od obecnej daty 31
Cel ćwiczeń 1.3 1.4 Nauczenie się składni tworzenia bazy danych i definicji tabel Nauczenie się wczytywania gotowego skryptu do bazy tu zawierającego inserty - dane do tabel Nauczenie się uruchamiania skryptów, usuwania bazy, poprawianie skryptów w MySQL Query browser Nauczenie się tworzenia zapytań do bazy (do tabel) Nauczenie się pracy z zakładkami w MySQL Query Browser Zapoznanie się z potrzebą autoryzacji przy logowaniu do bazy 32
Kroki wykonywane w ćwiczeniach 1.3 1.4 CREATE TABLE... Tworzenie bazy danych i definicja tabel na podstawie wpisanego skryptu INSERT INTO... VALUES Wczytanie i uruchomienie skryptu wstawiającego dane do utworzonych tabel SELECT... FROM... Zbudowanie i uruchomienie zapytań do zbudowanej i wypełnionej bazy (tabel) 33
Działania wykonane w ćwiczeniach 1.3-1.4 ćw 1.3 PS Pad losowanie numeru (od 1 do 10) wybór bazy danych CREATE DATABASE baza_nazwisko; USE baza_nazwisko; CREATE TABLE tabela1 ( pole1 typ opcje, pole2 typ opcje... ); wpisanie skryptu tworzącego: wczytanie skryptu w programie MySQL Query Browser CREATE TABLE tabela1 ( pole1 typ opcje, pole2 typ opcje... ); bazę danych i dwie tabele na podstawie numeru i załączonej tabeli ćw 1.4 działa zakładka 3 Stworzenie i wykonanie kwerend z punktu 5 ćw. 1.4 (jedna po drugiej) - zapis kwerend do pliku zakładka 2 dz. zapisanie pliku we własnym katalogu Wczytanie i uruchomienie skryptu zawierającego inserty (z pobranego pliku cw1_4.7z) zakładka 1 Uruchomienie skryptu CREATE DATABASE... nie działa dla odpowiedniego numeru bazy (1-10) Usunięcie bazy nie działa Poprawienie błędów 34
MySQL Q.B. podpowiedź karty zakładek przycisk nowej zakładki Wczytany nowo skrypt trafia do nowej zakładki 35
Ćwiczenie 1.5 złączenia tabel Celem ćwiczenia jest zapoznanie się ze sposobem łączenia dwóch tabel Należy przedstawić dane z jednej tabeli oraz dane z odpowiadających rekordów z drugiej tabeli Składnia: SELECT A.*, B.pole_wynikowe FROM A... LEFT JOIN B ON B.pole_klucza_własnego = A.pole_klucza_obcego 36
ćw. 1.5 struktura tabel i dane Baza: cw15 tabela: tabela: klient zamowienia 37
ćw. 1.5 składnia tworzenia tabel CREATE TABLE zamowienie ( id INT NOT NULL AUTO_INCREMENT PRIMARY id_klienta INT NOT NULL, towar VARCHAR(32) NOT NULL, ilosc FLOAT NOT NULL ); KEY, CREATE TABLE klient ( id INT NOT NULL AUTO_INCREMENT PRIMARY nazwa VARCHAR(32) NOT NULL, miasto VARCHAR(32) NULL, aktywny INT NULL ); KEY, 38
ćw. 1.5 wstawianie danych INSERT INTO klient VALUES ( 1, 'Abeta', 'Łódź', 1), ( 2, 'Creato', 'Gdańsk', 1), ( 3, 'Fireto', 'Warszawa', 1); INSERT INTO zamowienie VALUES ( 1, 1, 'krzesło draco', 120.00), ( 4, 2, 'biurko kotes', 16.00), ( 7, 2, 'stół klon', 62.00), ( 8, 3, 'biurko kotes', 104.00); 39
ćw. 1.5 kwerenda łącząca zamowienie (pk) id (fk) id_klienta towar ilosc klient INTEGER INTEGER VARCHAR(32) FLOAT (pk) id nazwa miasto aktywny INTEGER VARCHAR(32) VARCHAR(32) INTEGER -- pokaż wszystkie rekordy i pola z tabeli zamówienie SELECT * FROM zamowienie; SELECT id, towar, ilosc FROM zamowienie; SELECT id, towar, ilosc, klient.nazwa FROM zamowienie LEFT JOIN klient ON klient.id = zamowienie.id_klienta 40
ćw. 1.5 przykład na żywo Object 2 41
ćw. 1.5 etapy Otwórz MySQL Query Browser zaloguj się z uprawnieniami administratora (konto: root) W nowej karcie (zakładce) wyników: utwórz nową bazę: cw15_nazwisko ustaw utworzoną bazę jako domyślną utwórz dwie tabele na podstawie podanego skrytpu wstaw podane dane do tabel 42
Bazy danych - rozwiązania Technologia klient-serwer Scentralizowane dane Wielu klientów jednocześnie Terminale nie wymagają mocy obliczeniowej 43
Relacje (cz. 1) tabela Zamówienia Id_zamówienia Klient Miasto Adres NIP Data Produkt 1 Bartexim Wrocław ul. Zimowa 1 123-112-33-41 14.05.2004 Kawa 2 Hilton Białowieża ul. Letnia 4 722-223-68-69 14.05.2004 Mąka 3 Bartexim Wrocław ul. Zimowa 1 123-112-33-41 15.05.2004 Ryż 4 Agawa Łódź ul. Jesienna 3 455-233-98-09 15.05.2004 Kwiaty..................... co się stanie, gdy klient B zmieni nazwę, miasto lub adres? 44
Relacje (cz. 2) tabela Zamówienia Id_zamówienia Klient Miasto Adres NIP Data Produkt 1 Bartexim Wrocław ul. Zimowa 1 123-112-33-41 14.05.2004 Kawa 2 Hilton Białowieża ul. Letnia 4 722-223-68-69 14.05.2004 Mąka 3 Bartexim Wrocław ul. Zimowa 1 123-112-33-41 15.05.2004 Ryż 4 Agawa Łódź ul. Jesienna 3 455-233-98-09 15.05.2004 Kwiaty..................... tabela Klienci Nazwa klienta Miasto Adres NIP 1 Bartexim Wrocław ul. Zimowa 1 123-112-33-41 2 Hilton Białowieża ul. Letnia 4 722-223-68-69 3 Agawa Łódź ul. Jesienna 3 455-233-98-09 4 Tracer Pabianice ul. Wiosenna 2 229-998-98-54 Id_klienta tabela Zamówienia - zmodyfikowana Id_zamówienia Id_klienta Data Produkt 1 1 14.05.2004 Kawa Zalety relacji: 2 2 14.05.2004 Mąka 3 1 15.05.2004 Ryż 4 3 15.05.2004 Kwiaty łatwa masowa aktualizacja danych mniejsza objętość danych łatwiejsze wykonywanie zapytań 45
Relacje (cz. 3) tabela Zamówienia Id_zamówienia Id_klienta Data Produkt 1 1 14.05.2004 Kawa 2 2 14.05.2004 Mąka 3 1 15.05.2004 Ryż 4 3 15.05.2004 Kwiaty relacja: pole Zamowienia. Id_klienta = Klienci. Id_klienta Nazwa klienta Miasto Adres NIP 1 Bartexim Wrocław ul. Zimowa 1 123-112-33-41 2 Hilton Białowieża ul. Letnia 4 722-223-68-69 3 Agawa Łódź ul. Jesienna 3 455-233-98-09 4 Tracer Pabianice ul. Wiosenna 2 229-998-98-54 Id_klienta tabela Klienci Zamowienia. Id_klienta jest kluczem obcym w tabeli Zamowienia 46
Więzy integralności dbają o poprawność relacji reagują podczas usuwania rekordów z tabel połączonych relacjami co się stanie gdy spróbujemy usnąć dane z tabeli klientów, do której odwołują się rekordy z tabeli zamówienia? 1) Zezwolenie usunięcia rekord zostanie usunięty, baza utraci integralność danych, bowiem niektóre klucze obce nie będą posiadały odpowiedników w swoich tabelach. 2) Usunięcie kaskadowe, czyli usunięcie również wszystkich zamówień usuniętego klienta 3) Zabronienie usunięcia powiązanego rekordu. 47
Kwerendy Kwerenda zapytanie kwerendy pisane w języku SQL: tworzenie baz, tabel, definiowanie pól definicja uprawnień sortowanie, filtrowanie rekordów, tworzenie widoków tworzenie procedur składowych, funkcji SQL Structured Query Language różni producenci stosują różne standardy (ANSI SQL) 48
Technologia klient - serwer Dane zawarte w bazie są scentralizowane i znajdują się w jednym komputerze serwerze, z którym łączą się komputery klienty. Dzięki temu możliwa jest jednoczesna praca z bazą wielu użytkowników na wielu komputerach. Jednocześnie powoduje to, że w celu pracy z bazą wymagane jest działanie komputera serwera oraz jego połączenie z komputerami klientami. Każdy klient łączący się z bazą może zmieniać dane poprzez udostępniony mu interfejs, jednak dane te zmieniane są jedynie na serwerze. Pozwala to uniknąć wielu problemów związanych z synchronizacją danych pochodzących od wielu klientów oraz zoptymalizować układ komputerów klientów i serwera. serwer klient baza interfejs 49
Praca z systemami baz danych wszystkie operacje na poziomie serwera bazy danych odbywają się w języku SQL użytkownik (programista / administrator) bazy danych ma możliwość interakcji z bazą za pomocą: linii komend (bezpośrednio w języku SQL) interfejsów (programów pośredniczących, front-endów) interfejs serwer bazy danych (front-end) SQL użytkownik 50
Praca z bazą danych - terminal/sql 1 2 3 4 5 6 51
Praca z bazą danych interfejs (OO3 base) 52
Projektowanie bazy DB Designer 4 53
Zarządzanie i administracja -MySQL Admin 54
Interakcja z bazą danych Komendy można wpisywać: bezpośrednio w terminalu z linii komend (DOS) w programie MySQL Query Browser w pliku tekstowym (później wysyłanym na serwer DB) 55
Uprawnienia do pracy z bazą Aby wykonywać jakiekolwiek prace z bazą należy się do niej zalogować. Nie da się wykonać żadnej operacji zapisu czy odczytu bez posiadania pewnych praw do: serwera bazy danych, lub baz(y) danych lub pojedynczych tabel Uprawnienia mogą zezwalać na: odczyt danych z tabel, zapis danych do tabel modyfikacje struktury tabel, tworzenie nowych upr. itd. 56
Ćwiczenie 0 przygotowanie środowiska ćwiczenie polega na instalacji aplikacji potrzebnych do łączenia się i pracy z serwerem bazy danych MySQL należy zainstalować następujące programy: MySQL GUI Tools (MySQL Admininstrator / Query Browser) DBDesigner 4 (graficzne tworzenie baz) PSPad (edytor tekstu) 57
Ćwiczenia baza danych Utworzenie skryptu tworzącego bazę oraz w niej dwie tabele na podstawie uzyskanych wytycznych Połączenie się z bazą Uruchomienie wcześniej utworzonego skryptu Analiza i uruchomienie skryptu dodającego dane do bazy Wykonanie kwerend wyszukujących, eksport danych 58
WWW okno na świat 59
Źródła wiedzy w sieci Angielskie w3.org twórcy standardów w3schools http://www.w3schools.com/ Polskie Kurs Pawła Wimmera najstarszy i najlepszy http://webmaster.helion.pl/kurshtml/ 60
Co to jest strona WWW? Strona WWW plik tekstowy (w formacie tekstowym) z rozszerzeniem.htm lub.html plik zapisany jest w języku HTML (hyper-text markup language) plik wyświetlany przez przeglądarkę internetową plik tworzony w edytorze www lub dowolnym edytorze tekstu 61
Co może zawierać strona www? tekst, tekst sformatowany pogrubiony, pochylony, ustawiany rozmiar i krój czcionki tabele grafikę zdjęcia, obrazy, grafikę wektorową, animacje filmy, dźwięk, multimedia interaktywne formularze odsyłacze do innych stron oraz do plików w sieci skrypty wykonywalne (programy) w JavaScript 62
Tworzenie stron WWW - sposoby (1) Edytor tekstu (html) z podświetlaniem składni, ked, PSPad (2) Edytor graficzny WYSIWYG np. MS FrontPage, KompoZer, Adobe DreamWeaver (3) Inny program mający możliwość eksportu do HTML, np. OO Writer, OO Impress, MS Word, MS PowerPoint 63
Tworzenie stron jaką drogę wybrać? edytor tekstowy html (ked, PSPad) złożone strony z nietypowymi funkcjonalnościami edytor graficzny (WYSIWYG) proste strony i witryny szybkie tworzenie stron niw wymaga znajomości html aplikacje CMS (CRM) portale internetowe obejmujące wysoką interaktywność z użytkownikiem (portale społecznościowe, fora) 64
Podstawowe pojęcia (terminologia) www www world wide web (pajęczyna ogólnoświatowa) (x)html (extensible) hypertext markup language (rozszerzalny hipertekstowy język znaczników) css cascade style sheet (arkusz stylu kaskadowego) js javascript język programowania url - uniform resource locator - ujednolicony format adresowania zasobów ip internet protocol 65
Adres internetowy http://www.wikipedia.com/wiki/url fragment adresu objaśnienie http protokół www.wikipedia.com adres serwera wiki/url ścieżka dostępu do zasobu Przykłady protokołów internetowych: - http, https - ftp, mailto - telnet, news 66
Jak działa translacja adresów URL 1 DNS (2) adres trafia do serwera DNS, który zwraca adres IP szukanego serwera (1) użytkownik wpisuje do przeglądarki adres www, np: 208.80.152.2 2 serwer IP=208.80.152.2 (3) komputer użytkownika łączy się bezpośrednio ze wskazanym IP, z którego pobiera dane 67
Ogólny plan zajęć (1) ogólna budowa pliku (x)html praca z przeglądarką, walidacja i formatowanie kodu podstawowe znaczniki: i, b, u, font ul, ol, li, table, td, tr, th img, a atrybuty znaczników style 68
Pierwsze ćwiczenia 69
HTML język oparty na znacznikach HTML hypertext markup language (język znaczników) język opisu stron internetowych (luźna składnia) czytelny dla programisty i użytkownika kod źródłowy język oparty na znacznikach (ang TAGS) znaczniki w nawiasach ostrych < > strony HTML interpretowane są przez przeglądarki internetowe (IE, FF, Opera, Safari) 70
HTML a xhtml HTML hypertext markup language (język znaczników) język opisu stron internetowych (luźna składnia) xhtml HTML zgodny z XML (język o silnie restrykcyjnej składni) Obecnie przechodzi się z HTML na xhtml oba języki są niemal identyczne xhtml wprowadza pewne ograniczenia znane z XML 71
Strona www na lokalnym komputerze 1) Tworzymy i redagujemy stronę www na komputerze 2) Sprawdzamy jej wygląd w przeglądarce wpisując jej adres na lokalnym komputerze (file://adres w lokalnym systemie plików) 72
Przeglądarki internetowe Internet Explorer (v6-v8) (MS Windows) Mozilla Firefox (v2-v3) (MS Windows / Linux) Opera (v9) (MS Windows / Mobile / Symbian) Safari (Mac OS) Google Chrome (MS Windows) Przeglądarka internetowa: interpretuje kod (x)html interpretuje arkusze styli CSS interpretuje język JS (JavaScript) poprzez plug-iny umożliwia interpretację Flash, Java, itp. 73
Mój pierwszy plik html 1) otwórz edytor PSPad (lub inny) 2) wpisz linie, jak pokazano obok 3) zapisz plik w swoim katalogu w podkatalogu IM \ html (załóż podkatalogi jeśli ich nie ma) pod nazwą: wersja1.html 4) otwórz plik w domyślnej przeglądarce klikając na nim dwukrotnie 74
Struktura prawidłowego pliku html (v1) <html> nagłówek <head> </head> treść <body> tutaj treść </body> </html> 1) 2) 3) znaczniki (tu pogrubione), znaczniki kończące z ukośnikiem na początku wcięcia w tekście opcjonalne (nie mają wpływu na działanie strony) 75
Anatomia znacznika xhtml 1)<znacznik>... </znacznik> 2)<znacznik /> Przykłady: <h1>oto nagłówek jeden</h1> <hr /> <strong>pogrubione i <i>pochylone</i></strong> 76
Zagnieżdżanie znaczników - przykład Wcięcia tylko dla zwiększenia czytelności 77
Zagnieżdżanie znaczników (2) Źle: <pre><cite> treść wewnątrz </pre></cite> Dobrze: <pre><cite> treść wewnątrz </cite></pre> 78
HTML nagłówek sekcja <head> W części <head> znajdują się m.in. informacje: o pliku, autorze, słowa kluczowe o kodowaniu znaków narodowych, łącza do zewnętrznych arkuszy stylów, łącza do plików JavaScript tytuł strony (wyświetlany w pasku tytułowym przeglądarki) Wszystkie elementy nagłówka są opcjonalne 79
Przykład nagłówka pliku (x)html 80
Jak to robią inni? Podgląd budowy strony z poziomu przeglądarki FF3, O9: Widok Źródło strony IE6: Widok Źródło Dla stron zbudowanych na ramkach (FRAMESET) źródło strony kontenera 81
Mój drugi plik html 1) otwórz edytor PSPad (lub inny) 2) wpisz linie, jak pokazano obok 3) zapisz plik w swoim katalogu w podkatalogu IM \ html (załóż podkatalogi jeśli ich nie ma) pod nazwą: wersja2.html 4) otwórz plik w domyślnej przeglądarce klikając na nim dwukrotnie 82
Walidacja Proces sprawdzenia poprawności kodu (tu html) względem reguł języka poprawność tagów (ortografia błędy literowe) prawidłowość zagnieżdżeń ( <a><b>...</b></a>) poprawność umiejscowienia tagów i elementów (niektóre tagi nie mogą być zagnieżdżone w innych) zgodność z zadeklarowaną wersją (x)html Popularne walidatory offline: html tidy online: http://validator.w3.org/ 83
ked Edytor do (x)html darmowy polski lekki rozbudowany i wygodny szablony typów plików html podświetlanie składni, ściąga ze znacznikami walidacja kodu przy pomocy wbudowanego TIDY automatyczne zamykanie znaczników (opcja) skróty klawiaturowe dla tagów (Ctrl +...) wbudowane okienko podglądu 84
ked wygląd programu 85
ked ćwiczenie 1 (a) Otwórz program ked Z menu Plik wybierz Nowy z szablonu z podmenu wybierz XHTML 1.0 Transitional na ekranie pojawi się gotowy do uzupełnienia plik 86
ked ćwiczenie 1 (b) usuń linijkę z komentarzem <!-- tutaj... --> wpisz w to miejsce swoje imię i nazwisko zapisz plik w swoim katalogu w podkatalogu html jako cwiczenie1.html obejrz zapisany plik w przeglądarce www klikając na nim dwukrotnie 87
Białe znaki w pliku html Wszystkie pojedyncze i wielokrotne białe elementy w pliku html, czyli: spacje, znaczniki nowej linii, znaki tabulacji przedstawiane są jako pojedyncza spacja 88
Podstawowe znaczniki (1) <p> - akapit (ang. paragraph) <h1>, <h2>, <h3> - nagłówki <p>oto jest akapit. Kilka zdań, kilka wierszy</p> <h1>nagłówek pierwszego poziomu</h1> <b> - pogrubienie (ang. bold) <b>wyrazy pogrubione</b> <i> - pochylenie (ang. italic) <u> - podkreślenie (ang. underline) <hr> - linia pozioma (ang. horizontal rule), xhtml <hr /> 89
Podstawowe znaczniki (2) <ul> - lista nieuporządkowana (ang. unordered list) <ul><li>punktor </li><li>punktor 2</li></ul> <ol> - lista uporządkowana (ang. ordered list) <ol><li>pozycja pierwsza </li><li>pozycja 2</li></ol> <table> - tabela <tr> - wiersz w tabeli (ang. table row) <td> - komórka tabeli (ang. table data) <th> - komórka nagłówkowa tabeli (ang. table header) 90
Kodowanie polskich znaków Kilka standardów kodowania znaków Najpopularniejsze: ISO-8859-2 (linux, standard ISO) Windows-1250 (windows, microsoft) UTF-8 (międzynarodowy) Zgodność standardu w pliku (edytor) i w nagłówku html <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250" /> 91
Jazz z tabelami (1) Najprostsza tabela: <table><tr><td></td></tr></table> czyli inaczej: <table> <tr> <td></td> </tr> </table> - tabela składająca się z jednego wiersza (row) i jednej kolumny 92
Jazz z tabelami (2) <table border="2"> <tr> <td>pole 1</td> <td>pole 2</td> </tr> </table> <hr /> <table border="2"> <tr> <td>wiersz 1</td> </tr> <tr> <td>wiersz 2</td> </tr> </table> treść tabeli znajduje się wewnątrz: <table>... </table> treść wiersza znajduje się w: <tr>... </tr> treść komórki znajduje się w: <td>...</td> 93
Tabele dobrze czy źle? 1 <table> <td> <tr>abc</tr> </td> </table> 4 <table><tr><td> MNO </tr></td></table> 2 <td> <tr> <table>wiersz 1</table> </tr> </td> 5 <table><tr><td> atari </td><tr></table> 3 <table> <tr><td>xyz</td></tr> </table> 94
Atrybuty znaczników (X)HTML Każdy znacznik (X)HTML może zawierać atrybuty definiują parametry (właściwości) znacznika występują w znaczniku początkowym rozdzielone są spacjami mogą występować dowolne ich zestawienia mają postać: parametr= wartość są zależne od typu znacznika Przykłady: <font size= 4 face= georgia color= blue >tekst</font> <table border="2" class="tab1">... 95
Kolory, rozmiary i kroje czcionek Znacznik <font> pozwala na zmianę parametrów tekstu, który otacza: koloru czcionki, rozmiaru czcionki (1-7), kroju czcionki jest przestarzały i nie zalecany (ang. deprecated) Główne atrybuty znacznika <font> size rozmiar czcionki (od 1 do 7) color kolor (nazwa lub wartość rgb hex) face nazwa czcionki (np. Times) 96
Przykładowe kroje znaków 97
Wyrównanie Działa m.in. do akapitu <p>, oraz nagłówków <h1> ma cztery wartości: left do lewej right do prawej center do środka justify do obu stron Przykład <p align= center >Pewien mały akapit</p> <h2 align="right">nagłówek drugi</h2> 98
Obrazki Atrybuty i budowa znacznika <img> src źródło obrazka (obligatoryjny) alt treść zastępcza (wymagany) title tytuł wyśw. po najechaniu (przydatny) width/height rozmiar w pikselach (wys. i szer.) Przykład: <img src="http://www.w3.org/icons/w3c_main.png" alt="przykład" title="przykład" width= 256 height="128" /> 99
Odsyłacze Znacznik <a> (a ang. anchor) pozwala na przejście do innej strony (adresu) nowa strona może być otwarta w nowym oknie również służy jako zakładka Główne atrybuty znacznika <a> href adres, do którego kieruje odsyłacz target docelowe okienko name nazwa odsyłacza Przykład: <a href="http://wykop.pl">oto odsyłacz</a> 100
Kolory Definiowane jako nazwy (angielskie) Lub jako składowe RGB w notacji szesnastkowej (hex): 000000 003300 006600 009900 00CC00 00FF00 330000 333300 336600 339900 33CC00 33FF00 660000 663300 666600 669900 66CC00 66FF00 jako 3 wartości 00-FF, np. #12ab3c 000033 003333 006633 009933 00CC33 00FF33 330033 333333 336633 339933 33CC33 33FF33 660033 663333 666633 669933 66CC33 66FF33 000066 003366 006666 009966 00CC66 00FF66 330066 333366 336666 339966 33CC66 33FF66 660066 663366 666666 669966 66CC66 66FF66 000099 003399 006699 009999 00CC99 00FF99 330099 333399 336699 339999 33CC99 33FF99 660099 663399 666699 669999 66CC99 66FF99 0000CC 0033CC 0066CC 0099CC 00CCCC 00FFCC 3300CC 3333CC 3366CC 3399CC 33CCCC 33FFCC 6600CC 6633CC 6666CC 6699CC 66CCCC 66FFCC 0000FF 0033FF 0066FF 0099FF 00CCFF 00FFFF 3300FF 3333FF 3366FF 3399FF 33CCFF 33FFFF 6600FF 6633FF 6666FF 6699FF 66CCFF 66FFFF 990000 993300 996600 999900 99CC00 99FF00 CC0000 CC3300 CC6600 CC9900 CCCC00 CCFF00 FF0000 FF3300 FF6600 FF9900 FFCC00 FFFF00 990033 993333 996633 999933 99CC33 99FF33 CC0033 CC3333 CC6633 CC9933 CCCC33 CCFF33 FF0033 FF3333 FF6633 FF9933 FFCC33 FFFF33 990066 993366 996666 999966 99CC66 99FF66 CC0066 CC3366 CC6666 CC9966 CCCC66 CCFF66 FF0066 FF3366 FF6666 FF9966 FFCC66 FFFF66 990099 993399 996699 999999 99CC99 99FF99 CC0099 CC3399 CC6699 CC9999 CCCC99 CCFF99 FF0099 FF3399 FF6699 FF9999 FFCC99 FFFF99 9900CC 9933CC 9966CC 9999CC 99CCCC 99FFCC CC00CC CC33CC CC66CC CC99CC CCCCCC CCFFCC FF00CC FF33CC FF66CC FF99CC FFCCCC FFFFCC 9900FF 9933FF 9966FF 9999FF 99CCFF 99FFFF CC00FF CC33FF CC66FF CC99FF CCCCFF CCFFFF FF00FF FF33FF FF66FF FF99FF FFCCFF FFFFFF 101
Kolory wartości liczbowe i nazwy (140) nazw a RGB HEX nazw a RGB HEX nazw a RGB HEX nazw a RGB HEX AliceBlue #F0F8FF kolor DarkSlateGray #2F4F4F kolor LightSalmon #FFA07A PaleVioletRed #D87093 AntiqueWhite #FAEBD7 DarkTurquoise #00CED1 LightSeaGreen #20B2AA PapayaWhip #FFEFD5 Aqua #00FFFF DarkViolet #9400D3 LightSkyBlue #87CEFA PeachPuff #FFDAB9 Aquamarine #7FFFD4 DeepPink #FF1493 LightSlateGray #778899 Peru #CD853F Azure #F0FFFF DeepSkyBlue #00BFFF LightSteelBlue #B0C4DE Pink #FFC0CB Beige #F5F5DC DimGray #696969 LightYellow #FFFFE0 Plum #DDA0DD Bisque #FFE4C4 DodgerBlue #1E90FF Lime #00FF00 Pow derblue #B0E0E6 Black #000000 FireBrick #B22222 LimeGreen #32CD32 Purple #800080 BlanchedAlmond #FFEBCD FloralWhite #FFFAF0 Linen #FAF0E6 Red #FF0000 Blue #0000FF ForestGreen #228B22 Magenta #FF00FF RosyBrow n #BC8F8F BlueViolet #8A2BE2 Fuchsia #FF00FF Maroon #800000 RoyalBlue #4169E1 Brow n #A52A2A Gainsboro #DCDCDC MediumAquaMarine #66CDAA SaddleBrow n #8B4513 BurlyWood #DEB887 GhostWhite #F8F8FF MediumBlue #0000CD Salmon #FA8072 CadetBlue #5F9EA0 Gold #FFD700 MediumOrchid #BA55D3 SandyBrow n #F4A460 Chartreuse #7FFF00 GoldenRod #DAA520 MediumPurple #9370D8 SeaGreen #2E8B57 Chocolate #D2691E Gray #808080 MediumSeaGreen #3CB371 SeaShell #FFF5EE Coral #FF7F50 Green #008000 MediumSlateBlue #7B68EE Sienna #A0522D Cornflow erblue #6495ED GreenYellow #ADFF2F MediumSpringGreen #00FA9A Silver #C0C0C0 Cornsilk #FFF8DC HoneyDew #F0FFF0 MediumTurquoise #48D1CC SkyBlue #87CEEB Crimson #DC143C HotPink #FF69B4 MediumVioletRed #C71585 SlateBlue #6A5ACD Cyan #00FFFF IndianRed #CD5C5C MidnightBlue #191970 SlateGray #708090 DarkBlue #00008B Indigo #4B0082 MintCream #F5FFFA Snow #FFFAFA DarkCyan #008B8B Ivory #FFFFF0 MistyRose #FFE4E1 SpringGreen #00FF7F DarkGoldenRod #B8860B Khaki #F0E68C Moccasin #FFE4B5 SteelBlue #4682B4 DarkGray #A9A9A9 Lavender #E6E6FA NavajoWhite #FFDEAD Tan #D2B48C DarkGreen #006400 LavenderBlush #FFF0F5 Navy #000080 Teal #008080 DarkKhaki #BDB76B Law ngreen #7CFC00 OldLace #FDF5E6 Thistle #D8BFD8 DarkMagenta #8B008B LemonChiffon #FFFACD Olive #808000 Tomato #FF6347 DarkOliveGreen #556B2F LightBlue #ADD8E6 OliveDrab #6B8E23 Turquoise #40E0D0 Darkorange #FF8C00 LightCoral #F08080 Orange #FFA500 Violet #EE82EE DarkOrchid #9932CC LightCyan #E0FFFF OrangeRed #FF4500 Wheat #F5DEB3 kolor kolor 102
Tabele łączenie komórek tabele mogą mieć połączone wiersze lub kolumny łączenie komórek odbywa się poprzez umieszczenie atrybutu w <td> (lub <th>) colspan= n łączenie kolumn rowspan= n łączenie wierszy gdzie n liczba komórek do połączenia należy pamiętać o pominięciu nieistniejących komórek Przykłady: <td colspan="2">dwie komórki w jednej</td> <td rowspan="3">trzy wiersze w jednym</td> 103
Tabele łączenie komórek - przykład <table border="2"> <tr> <td>górna lewa</td> <td>górna prawa</td> </tr> <tr> <td>dolna lewa</td> <td>dolna prawa</td> </tr> </table> <table border="2"> <tr> <td colspan="2">górna</td> </tr> <tr> <td>dolna lewa</td> <td>dolna prawa</td> </tr> </table> <table border="2"> <tr> <td rowspan="2">lewy</td> <td>górna prawa</td> </tr> <tr> <td>dolna prawa</td> </tr> </table> 104
Tabele wersja podstawowa <h2>prosta tabela</h2> <table border="2"> <tr> <td>górna lewa</td> <td>górna prawa</td> </tr> <tr> <td>dolna lewa</td> <td>dolna prawa</td> </tr> </table> Aby zachować kolejność w kodzie jak w wyglądzie tabeli komórki w jednym wierszu 105
Tabele połączone kolumny <h2>tabela z połączonymi kolumnami</h2> <table border="2"> <tr> <td colspan="2">dwie komórki w jednej</td> </tr> <tr> <td>dolna 1</td> <td>dolna 2</td> </tr> </table> 106
Tabele połączone wiersze <h2>tabela z połączonymi wierszami</h2> <table border="2"> <tr> <td rowspan="2">dwa wiersze w jednym</td> <td>prawa góra</td> </tr> <tr> <td>prawy dół</td> </tr> </table> 107
Tabele mieszanka <h2>tabela w stylu hardcore</h2> <table border="4"> <tr> <td colspan="2">komórka podwójna</td> <td rowspan="3">trzy wiersze</td> </tr> <tr> <td rowspan="2">dwa wiersze?</td> <td>mała komóreczka</td> </tr> <tr> <td>następny maluch</td> </tr> </table>? 108
Tabela zadanie? 109
Spis znaczników (x)html tag <a> <abbr> <acronym> <address> <area> <b> <base> <basefont> <bdo> <big> <blockquote> <body> <br> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <div> <dl> <dt> <em> <fieldset> opis kotwica skrót akronim adres obszar pogrubienie czcionki adres bazowy czcionka bazowa kierunek tekstu zwiększenie czcionki cytat blokowy ciało dokumentu przełamanie wiersza przycisk podpis tabeli środkowanie cytat czcionka kodu kolumna grupa kolumn treść definicji usunięty tekst definicja wycinek lista definicji hasło definicji emfaza czcionki grupa elementów form. tag <font> <form> <frame> <frameset> <head> <hr> <html> <hx> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <meta> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <param> opis czcionka formularz ramka układ ramek nagłówek dokumentu pozioma linia szkielet dokumentu śródtytuły pochylenie czcionki pływająca ramka ilustracja pole formularza wstawiony tekst czcionka z klawiatury etykieta kontrolki formularza tytuł grupy elementów form. element wykazu powiązanie dokumentu mapa graficzna własności dokumentu alternatywa ramek alternatywa skryptu obiekt multimedialny wykaz uporządkowany grupowanie opcji w form. opcja w formularzu akapit parametr obiektu tag <pre> <q> <s> <samp> <script> <select> <small> <span> <strike> <strong> <style> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <title> <tr> <tt> <u> <ul> <var> <!DOCTYPE> opis blok preformatowany cytat w wierszu czcionka przekreślona czcionka przykładu definicja skryptu rozwijane pole formularza zmniejszenie czcionki blok liniowy czcionka przekreślona silne wyróżnienie czcionki styl indeks dolny czcionki indeks górny czcionki tabela ciało tabeli komórka tabeli pole tekstowe formularza stopka tabeli nagłówek kolumny tabeli nagłówek tabeli tytuł dokumentu wiersz tabeli czcionka "maszynowa" podkreślenie czcionki wykaz nieuporządkowany nazwa zmiennej standard języka dokumentu 110
Ściąga (x)html Szablon dokumentu HTML <html> <head> <title>tutaj tytuł dokumentu</title> </head> <body> Widoczna treść tutaj </body> </html> Elementy nagłówka <h1>największy nagłówek</h1> <h2> <h3> <h4> <h5>............ </h2> </h3> </h4> </h5> <h6>najmniejszy nagłówek</h6> Elementy tekstowe <p>to jest akapit</p> <br /> (podział wiersza) <hr /> (linia pozioma) <pre>tekst preformatowany</pre> Style logiczne <em>tekst wyróżniony (ang. emphasized)</em> <strong>tekst mocny (ang. strong)</strong> <code>tu jakiś kod komputerowy</code> Style fizyczne <b>to jest tekst pogrubiony</b> <i>to jest tekst pochylony</i> Odsyłacze, kotwice, elementy obrazu <a href="http://www.example.com/">to jest odsyłacz</a> <a href="http://www.example.com/"><img src="url" alt="tekst alternatywny"></a> <a href="mailto:webmaster@example.com">wyślij e-mail</a> Nazwane kotwice <a name="tips">rozdział z użytecznymi poradami</a> <a href="#tips">skocz do Rozdziału z użytecznymi poradami</a> Lista nieuporządkowana <ul> <li>pozycja pierwsza</li> <li>następna pozycja</li> </ul> Lista uporządkowana <ol> <li>first item</li> <li>next item</li> </ol> Lista definicji <dl> <dt>pierwsze hasło</dt> <dd>definicja</dd> <dt>drugie hasło</dt> <dd>definicja</dd> </dl> Tabele <table border="1"> <tr> <th>jakiś nagłówek</th> <th>jakiś nagłówek</th> </tr> <tr> <td>jakaś treść</td> <td>jakaś treść</td> </tr> </table> Ramki <frameset cols="25%,75%"> <frame src="page1.htm"> <frame src="page2.htm"> </frameset> Formularze <form action="http://www.example.com/test.asp" method="post/get"> <input type="text" name="nazwisko" value="nixon" size="30" maxlength="50"> <input type="password"> <input type="checkbox" checked="checked"> <input type="radio" checked="checked"> <input type="submit"> <input type="reset"> <input type="hidden"> <select> <option>jabłka</option> <option selected>banany</option> <option>wiśnie</option> </select> <textarea name="komentarz" rows="60" cols="20"></textarea> </form> Znaki specjalne < to to samo, co < > to to samo, co > to to samo, co Inne elementy <!-- To jest komentarz --> <blockquote> Tekst zacytowany (ang. quoted) z jakiegoś źródła. </blockquote> <address> Adres 1<br /> Adres 2<br /> Miasto<br /> </address> Źródło : http://www.w3schools.com/html/html_quick.asp 111
Tabele komórki nagłówki tabele mogą zawierać komórki nagłówka <th> zamiast <td> taka sama funkcjonalność, jak <td> zazwyczaj pogrubiony tekst i wyrównany do środka komórki 112
Jednostki w HTML/CSS px piksele (punkty), wartości bezwzględne można dokładnie zdefiniować wielkość nie nadaje się do różnych rozdzielczości np. 30px em rozmiar wzlędny (1em = normalny rozmiar) np. 1em, 1.2em, 2em, 0.75em % rozmiar względny w procentach np. 100%, 120%, 55% 113
Przydatne adresy w sieci Kurs HTML (po polsku) Kurs CSS (po polsku) http://webmaster.helion.pl/kurshtml/ http://pl.html.net/tutorials/css/ Edytor HTML on-line http://htmledit.squarefree.com/ 114
HTML zaawansowany Elementy zaawansowanego formatowania treści style Elementy interaktywne JavaScript w plikach HTML oraz w plikach zewnętrznych JS Formularze interakacja z użytkownikiem w plikach HTML oraz w plikach zewnętrznych CSS <form>... Programowanie po stronie serwera PHP (CGI) 115
Style (CSS) 116
Style język w języku (CSS w HTML) pozwalają na formatowanie elementów są bardziej elastyczne i wszechstronne od tagów służących do formatowania (<b> <i> <u> <font>) mogą być definiowane bezpośrednio w znacznikach lub w osobnych plikach (css) znajdują się w znaczniku (w atrybucie style) dotyczą treści znacznika, w którym występują 117
Anatomia styli właściwości rozdzielone są średnikami ( ; ) każda właściwość jest w postaci: nazwa: wartość spacje w treści nie mają znaczenia Przykłady <h1 style="color: red; font-size: 4em;">... <p style="text-align:left; color:red; background:yellow; width:50%; font-size:200%">... </p> 118
Znaczniki dla styli <span> blok liniowy (ang. in-line element) <div> wycinek (ang. block element) podobnie jak akapit wprowadza nowe linie różnice między znacznikami span łatwe formatowanie pojedynczych znaków, wyrazów, wierszy div formatowanie całych akapitów, większych części 119
Style a znaczniki formatujące Style pozwalają na dużo większe możliwości formatowania ustawianie paramtrów niedostępnych z poziomu samych znaczników formatujących marginesy, kolor tła, obramowanie, itp. proste formatowanie, które może być uzyskane znacznikami jest wygodniejsze: Znaczniki wygodniejsze (krótsze) do użycia bez styli: pogrubienie <b>, podkreślenie <u>, pochylenie <i> wyróżnienie <em>, silne wyróżnienie <strong> 120
Style - kaskadowość Kaskadowość oznacza wpływ stylu zewnętrznego na całą treść wewnętrzną (kaskadowo na znaczniki wewnętrzne) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> </head> <body style="background:yellow"> <div style="font-weight: bolder"> Pogrubiony tekst w znaczniku <div> <br /> <span style="color: blue"> niebieski napis w wewnętrznym znaczniku <span> </span> </div> </body> </html> 121
Styl dla całego pliku (treści) <body style="margin-top:4%;margin-left:15%; margin-right:15%; width:70%;background:silver;font-family:trebuchet MS;font-size:80%"> <body style=" "> margin-top: 4%; margin-left: 15%; margin-right: 15%; width: 70%; background: silver; font-family: Trebuchet MS; font-size: 80% 122
Styl znacznika <body> 100% margin-left: 15% width: 70% margin-right: 15% margin-top: 4% <body style=" margin-top: 4%; margin-left: 15%; margin-right: 15%; width: 70%; background: silver; font-family: Trebuchet MS; font-size: 80% "> backgorund: silver 123
Style kaskadowo rozmiar tekstu <html> <body style="font-size:100%"> <h1>nagłówek h1</h1> <html> <h2>nagłówek h2</h2> <body style="font-size:75%"> <p>zwykła treść w akapicie</p> <html> <h1>nagłówek h1</h1> Tekst poza akapitem <body style="font-size:50%"> <h2>nagłówek h2</h2> </body> <h1>nagłówek h1</h1> <p>zwykła treść w akapicie</p> </html> <h2>nagłówek h2</h2> Tekst poza akapitem <p>zwykła treść w akapicie</p> </body> Tekst poza akapitem </html> </body> </html> 124
Definiowanie czcionki <font> a <span> Bez stylów (nie zalecane) <font color="blue">napis</font> Za pomocą styli (zalecane) <span style="color:blue">napis</span> <font face="garamond" color="red" size="6"><i><b> garamond</b></i></font> <span style="color:red; font: bold italic 2em garamond">garamond</span> <span style="padding:4px; background: greenyellow; color:green; font:2.5em georgia">georgia</span> 125
Kolory tła definiowane poprzez atrybut: background nazwy i wartości jak dla color stosowane np. do <h1>, <p>, <table>, <td>, itp. Przykłady: <td style="background:red">red</td> <p style="background:crimson">krótki akapit - crimson</p> 126
Kolory tła - przykład <table> <tr> <td style="background:red">red</td> <td style="background:blue">blue</td> <td style="background:yellow">yellow</td> <td style="background:green">green</td> <td style="background:silver">silver</td> <td style="background:white">white</td> </tr> <tr> <td style="background:brown">brown</td> <td style="background:magenta">magenta</td> <td style="background:black">black</td> <td style="background:violet">violet</td> <td style="background:gray">gray</td> <td style="background:cyan">cyan</td> </tr> </table> <h1 style="background:gold">nagłówek 1 - gold</h1> <h2 style="background:coral">nagłówek 2 - coral</h2> <h3 style="background:chocolate">nagłówek 3 - chocolate</h3> <p style="background:crimson">krótki akapit - crimson</p> <ul> <li style="background:beige">beige</li> <li style="background:lime">lime</li> </ul> <ol> <li style="background:pink">pink</li> <li style="background:purple">purple</li> </ol> <a href="#" style="background:salmon">odsyłacz - salmon</a> Informatyka <a href="#" style="background:plum">odsyłacz plum</a> i Multimedia 127
Style in-line ( w pliku HTML) <html> <head> <title>wstęp do styli</title> </head> <body style="margin-top:4%; margin-left:15%; margin-right:15%; width:70%; background:silver; font-family:trebuchet MS; font-size:80%"> <h1 style="color:#226688;text-decoration:underline">internet dzisiaj</h1> <hr style="width:50%; color:white"/> <h2 style="color:#226688">połączenie komputera z Internetem</h2> <p style="text-align:justify; color:#882266"> coś tam, coś tam... </p> <p style="text-align:justify; color:#882266"> insze insze... </p>... <body> </html> 128
Pliki CSS Style na zewnątrz pliku HTML w osobnym pliku CSS Plik dołączany w części HEAD pliku HTML: <html> <head> <title>tytuł strony</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body>... 129
Style in-line CSS <html> <head> <title>wstęp do styli</title> </head> <body style="margin-top:4%; margin-left:15%; margin-right:15%; width:70%; background:silver; font-family:trebuchet MS; font-size:80%"> <h1 style="color:#226688;text-decoration:underline">internet dzisiaj</h1> <hr style="width:50%; color:white"/> <h2 style="color:#226688">połączenie komputera z Internetem</h2> <p style="text-align:justify; color:#882266"> coś tam, coś tam... </p> <p style="text-align:justify; color:#882266"> insze insze... </p> <html> <head> <title>wstęp do styli</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> XHTML + CSS <h1>internet dzisiaj</h1> <hr /> <h2>połączenie komputera z Internetem</h2> <p> coś tam, coś tam... </p> <p> insze insze... </p> body { margin-top:4%; margin-left:15%; margin-right:15%; width:70%; background:silver; font-family:trebuchet MS; font-size:80% } h1 { color:#226688; text-decoration:underline } hr { width:50%; color:white } i Multimedia h2 {Informatyka color:#226688 } p { text-align:justify; color:#882266 } 130
CSS przykład body { background: white url(../img/bkg.jpg); } body, table tr td { font: 0.9em Verdana, sans-serif; line-height: 1.6; color: #222; } table #list { margin-top: 1em; } #list th, #list td { font-size: 0.9em; } #list th { text-align: left; font: 0.8em Verdana, sans-serif; font-weight: bold; line-height: 1.6; color: #333; background-color: #ddd; border-bottom: 1px solid #777; padding-left: 0.5em; padding-right: 0.5em; background:#f0f0f0 repeat-x url(../img/th.jpg); } #list td { line-height: 1.6; border-bottom: 1px solid #aaa; padding-top: 0.8em; padding-bottom: 0.8em; padding-left: 0.5em; padding-right: 0.5em; } #list td.hd { font-weight: bolder; color: #000; } 131
Marginesy, rozciągnięcie, obwódki margin (marginesy) margin: 10px; margin-top: 1em; margin: 20 10 50 0; padding (rozciąganie) border (obwódki) dodatkowo: top, right, bottom, left 132