Informatyka i Multimedia [IM] dr inż. Michał Głębowski

Wielkość: px
Rozpocząć pokaz od strony:

Download "Informatyka i Multimedia [IM] dr inż. Michał Głębowski"

Transkrypt

1 [IM] dr inż. Michał Głębowski

2 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

3 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

4 Bazy danych - porządek w szafie 4

5 Przykłady zastosowań baz danych??? 5

6 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

7 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

8 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

9 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

10 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

11 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

12 Bazy danych - tabela Tabela Definicja Dane Definicja tabeli określa strukturę tabeli, liczbę i rodzaj pól 12

13 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

14 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

15 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

16 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

17 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

18 Terminologia Rekord wiersz wpis (ang. record) Kolumna pole Relacja powiązanie Kwerenda - zapytanie 18

19 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

20 Definicja tabeli rozwiązanie CREATE TABLE klient ( id INT, nazwisko VARCHAR(32), poczatek DATE ); 20

21 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',' '), nazwisko VARCHAR(32), (2,'Nowacki',' '), poczatek DATE (3,'Kulig',' '), WHERE poczatek BETWEEN (4,'Pralski', ' '); ' ' AND ); SELECT id, data FROM klient ' '; 21

22 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

23 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

24 Wstawianie danych (rekordów) INSERT INTO klient VALUES (1, 'Kowalski', ' '), (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

25 Zapytania do bazy (wybór) SELECT nazwisko, data FROM klienci WHERE data > 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

26 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

27 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(' ', ' '); 8.SELECT DATE_ADD(now(), INTERVAL 1000 DAY); 9.SELECT DATE_ADD(now(), INTERVAL -100 MINUTE); 27

28 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

29 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

30 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

31 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

32 Cel ćwiczeń 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

33 Kroki wykonywane w ćwiczeniach 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

34 Działania wykonane w ćwiczeniach ć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

35 MySQL Q.B. podpowiedź karty zakładek przycisk nowej zakładki Wczytany nowo skrypt trafia do nowej zakładki 35

36 Ć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

37 ćw. 1.5 struktura tabel i dane Baza: cw15 tabela: tabela: klient zamowienia 37

38 ć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

39 ć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', ), ( 4, 2, 'biurko kotes', 16.00), ( 7, 2, 'stół klon', 62.00), ( 8, 3, 'biurko kotes', ); 39

40 ć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

41 ćw. 1.5 przykład na żywo Object 2 41

42 ć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

43 Bazy danych - rozwiązania Technologia klient-serwer Scentralizowane dane Wielu klientów jednocześnie Terminale nie wymagają mocy obliczeniowej 43

44 Relacje (cz. 1) tabela Zamówienia Id_zamówienia Klient Miasto Adres NIP Data Produkt 1 Bartexim Wrocław ul. Zimowa Kawa 2 Hilton Białowieża ul. Letnia Mąka 3 Bartexim Wrocław ul. Zimowa Ryż 4 Agawa Łódź ul. Jesienna Kwiaty co się stanie, gdy klient B zmieni nazwę, miasto lub adres? 44

45 Relacje (cz. 2) tabela Zamówienia Id_zamówienia Klient Miasto Adres NIP Data Produkt 1 Bartexim Wrocław ul. Zimowa Kawa 2 Hilton Białowieża ul. Letnia Mąka 3 Bartexim Wrocław ul. Zimowa Ryż 4 Agawa Łódź ul. Jesienna Kwiaty tabela Klienci Nazwa klienta Miasto Adres NIP 1 Bartexim Wrocław ul. Zimowa Hilton Białowieża ul. Letnia Agawa Łódź ul. Jesienna Tracer Pabianice ul. Wiosenna Id_klienta tabela Zamówienia - zmodyfikowana Id_zamówienia Id_klienta Data Produkt Kawa Zalety relacji: Mąka Ryż Kwiaty łatwa masowa aktualizacja danych mniejsza objętość danych łatwiejsze wykonywanie zapytań 45

46 Relacje (cz. 3) tabela Zamówienia Id_zamówienia Id_klienta Data Produkt Kawa Mąka Ryż Kwiaty relacja: pole Zamowienia. Id_klienta = Klienci. Id_klienta Nazwa klienta Miasto Adres NIP 1 Bartexim Wrocław ul. Zimowa Hilton Białowieża ul. Letnia Agawa Łódź ul. Jesienna Tracer Pabianice ul. Wiosenna Id_klienta tabela Klienci Zamowienia. Id_klienta jest kluczem obcym w tabeli Zamowienia 46

47 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

48 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

49 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

50 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

51 Praca z bazą danych - terminal/sql

52 Praca z bazą danych interfejs (OO3 base) 52

53 Projektowanie bazy DB Designer 4 53

54 Zarządzanie i administracja -MySQL Admin 54

55 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

56 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

57 Ć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

58 Ć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

59 WWW okno na świat 59

60 Źródła wiedzy w sieci Angielskie w3.org twórcy standardów w3schools Polskie Kurs Pawła Wimmera najstarszy i najlepszy 60

61 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

62 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

63 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

64 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

65 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

66 Adres internetowy fragment adresu objaśnienie http protokół adres serwera wiki/url ścieżka dostępu do zasobu Przykłady protokołów internetowych: - http, https - ftp, mailto - telnet, news 66

67 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: serwer IP= (3) komputer użytkownika łączy się bezpośrednio ze wskazanym IP, z którego pobiera dane 67

68 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

69 Pierwsze ćwiczenia 69

70 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

71 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

72 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

73 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

74 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

75 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

76 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

77 Zagnieżdżanie znaczników - przykład Wcięcia tylko dla zwiększenia czytelności 77

78 Zagnieżdżanie znaczników (2) Źle: <pre><cite> treść wewnątrz </pre></cite> Dobrze: <pre><cite> treść wewnątrz </cite></pre> 78

79 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

80 Przykład nagłówka pliku (x)html 80

81 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

82 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

83 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: 83

84 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

85 ked wygląd programu 85

86 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

87 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

88 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

89 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

90 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

91 Kodowanie polskich znaków Kilka standardów kodowania znaków Najpopularniejsze: ISO (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

92 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

93 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

94 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

95 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

96 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

97 Przykładowe kroje znaków 97

98 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

99 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

100 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

101 Kolory Definiowane jako nazwy (angielskie) Lub jako składowe RGB w notacji szesnastkowej (hex): CC00 00FF CC00 33FF CC00 66FF00 jako 3 wartości 00-FF, np. #12ab3c CC33 00FF CC33 33FF CC33 66FF CC66 00FF CC66 33FF CC66 66FF CC99 00FF CC99 33FF CC99 66FF CC 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 CC00 99FF00 CC0000 CC3300 CC6600 CC9900 CCCC00 CCFF00 FF0000 FF3300 FF6600 FF9900 FFCC00 FFFF CC33 99FF33 CC0033 CC3333 CC6633 CC9933 CCCC33 CCFF33 FF0033 FF3333 FF6633 FF9933 FFCC33 FFFF CC66 99FF66 CC0066 CC3366 CC6666 CC9966 CCCC66 CCFF66 FF0066 FF3366 FF6666 FF9966 FFCC66 FFFF CC99 99FF99 CC0099 CC3399 CC6699 CC9999 CCCC99 CCFF99 FF0099 FF3399 FF6699 FF9999 FFCC99 FFFF CC 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

102 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 # Peru #CD853F Azure #F0FFFF DeepSkyBlue #00BFFF LightSteelBlue #B0C4DE Pink #FFC0CB Beige #F5F5DC DimGray # LightYellow #FFFFE0 Plum #DDA0DD Bisque #FFE4C4 DodgerBlue #1E90FF Lime #00FF00 Pow derblue #B0E0E6 Black # FireBrick #B22222 LimeGreen #32CD32 Purple # BlanchedAlmond #FFEBCD FloralWhite #FFFAF0 Linen #FAF0E6 Red #FF0000 Blue #0000FF ForestGreen #228B22 Magenta #FF00FF RosyBrow n #BC8F8F BlueViolet #8A2BE2 Fuchsia #FF00FF Maroon # 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 # MediumSeaGreen #3CB371 SeaShell #FFF5EE Coral #FF7F50 Green # 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 # SlateGray # 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 # LavenderBlush #FFF0F5 Navy # Teal # DarkKhaki #BDB76B Law ngreen #7CFC00 OldLace #FDF5E6 Thistle #D8BFD8 DarkMagenta #8B008B LemonChiffon #FFFACD Olive # 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

103 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

104 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

105 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

106 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

107 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

108 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

109 Tabela zadanie? 109

110 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

111 Ś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 </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 : 111

112 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

113 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

114 Przydatne adresy w sieci Kurs HTML (po polsku) Kurs CSS (po polsku) Edytor HTML on-line 114

115 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

116 Style (CSS) 116

117 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

118 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

119 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

120 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

121 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

122 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

123 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

124 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

125 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

126 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

127 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

128 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

129 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>

130 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:# } p { text-align:justify; color:# } 130

131 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

132 Marginesy, rozciągnięcie, obwódki margin (marginesy) margin: 10px; margin-top: 1em; margin: ; padding (rozciąganie) border (obwódki) dodatkowo: top, right, bottom, left 132

HTML (HyperText Markup Language) hipertekstowy język znaczników

HTML (HyperText Markup Language) hipertekstowy język znaczników HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony

Bardziej szczegółowo

HTML część 4. Obrazki, tła i kolory

HTML część 4. Obrazki, tła i kolory HTML część 4 Obrazki, tła i kolory Wstawia obrazek na stronę WWW Atrybuty wymagane: src, alt Atrybuty opcjonalne: height, ismap, longdesc, usemap, width nie zalecane: align, border, hspace, vspace

Bardziej szczegółowo

HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych

HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych HTML HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych HTML zdefiniowanie sposobu wizualnej prezentacji dokumentu w przeglądarce

Bardziej szczegółowo

STRONY INTERNETOWE mgr inż. Adrian Zapała

STRONY INTERNETOWE mgr inż. Adrian Zapała 1 STRONY INTERNETOWE mgr inż. Adrian Zapała STRONY INTERNETOWE Rodzaje stron internetowych statyczne (statyczny HTML + CSS) dynamiczne (PHP, ASP, technologie Flash) 2 JĘZYKI STRON WWW HTML (ang. HyperText

Bardziej szczegółowo

Akademia Techniczno-Humanistyczna w Bielsku-Białej

Akademia Techniczno-Humanistyczna w Bielsku-Białej Akademia Techniczno-Humanistyczna w Bielsku-Białej Wydział Budowy Maszyn i Informatyki Laboratorium z sieci komputerowych Ćwiczenie numer: 8 Temat ćwiczenia: Tworzenie stron WWW (HTML, skrypty CSS). 1.

Bardziej szczegółowo

Programowanie WEB PODSTAWY HTML

Programowanie WEB PODSTAWY HTML Programowanie WEB PODSTAWY HTML Najprostsza strona HTML tytuł strony To jest moja pierwsza strona WWW. tytuł strony

Bardziej szczegółowo

HTML podstawowe polecenia

HTML podstawowe polecenia HTML podstawowe polecenia Szkielet dokumentu:

Bardziej szczegółowo

Hyper Text Markup Language

Hyper Text Markup Language Podstawy projektowania dokumentów WWW Język znaczników HTML Hyper Text Markup Language Język słuŝący do zapisu dokumentów WWW. Opisuje wygląd dokumentu i definiuje łączniki hipertekstowe, pozwalające na

Bardziej szczegółowo

Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).

Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional). Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06 Moduł 4. Style Zajęcia poświęcone będą kaskadowym arkuszom stylów (por. slajdy 18.-27. z wykładu 2.) Wiele uwagi poświęcaliśmy do tej pory planowaniu szkieletu

Bardziej szczegółowo

Programowanie internetowe

Programowanie internetowe Programowanie internetowe Wykład 1 HTML mgr inż. Michał Wojtera email: mwojtera@dmcs.pl Plan wykładu Organizacja zajęć Zakres przedmiotu Literatura Zawartość wykładu Wprowadzenie AMP / LAMP Podstawy HTML

Bardziej szczegółowo

Laboratorium 1: Szablon strony w HTML5

Laboratorium 1: Szablon strony w HTML5 Laboratorium 1: Szablon strony w HTML5 Czas realizacji: 2 godziny Kurs: WYK01_HTML.pdf, WYK02_CSS.pdf Pliki:, Edytor: http://www.sublimetext.com/ stabilna wersja 2 (portable) Ćwiczenie 1. Szablon strony

Bardziej szczegółowo

Zaawansowana Pracownia Komputerowa - Ćwiczenia. Krzysztof Miernik

Zaawansowana Pracownia Komputerowa - Ćwiczenia. Krzysztof Miernik Zaawansowana Pracownia Komputerowa - Ćwiczenia Krzysztof Miernik HTML - Podstawowe Informacje HTML to hipertekstowy język znaczników (ang. HyperText Markup Language) służacy do tworzenia stron internetowych

Bardziej szczegółowo

Podstawy (X)HTML i CSS

Podstawy (X)HTML i CSS Inżynierskie podejście do budowania stron WWW momat@man.poznan.pl 2005-04-11 1 Hyper Text Markup Language Standardy W3C Przegląd znaczników Przegląd znaczników XHTML 2 Cascading Style Sheets Łączenie z

Bardziej szczegółowo

Edukacja na odległość

Edukacja na odległość Ćwiczenie 2. Edukacja na odległość Obsługa konta WWW na serwerze Linuksowym Tworzenie portalu edukacyjnego o określonej, wybranej przez studenta tematyce naukowej. Cel ćwiczenia: Projektowanie strony czołowej

Bardziej szczegółowo

I. Formatowanie tekstu i wygląd strony

I. Formatowanie tekstu i wygląd strony I. Formatowanie tekstu i wygląd strony Akapit: ... aby wyrównać tekst do lewego marginesu aby wyrównać tekst do prawego marginesu:

Bardziej szczegółowo

za pomocą: definiujemy:

za pomocą: definiujemy: HTML CSS za pomocą: języka HTML arkusza CSS definiujemy: szkielet strony wygląd strony Struktura dokumentu html - znaczniki Znaczniki wyznaczają rodzaj zawartości. element strony

Bardziej szczegółowo

Tworzenie stron internetowych w oparciu o język HTML

Tworzenie stron internetowych w oparciu o język HTML Ćwiczenie 1 Temat: Tworzenie stron internetowych w oparciu o język HTML Cel ćwiczenia: Celem ćwiczenia jest zapoznanie studenta z technologią tworzenia stron internetowych z wykorzystaniem języka HTML.

Bardziej szczegółowo

Tworzenie stron internetowych w kodzie HTML Cz 5

Tworzenie stron internetowych w kodzie HTML Cz 5 Tworzenie stron internetowych w kodzie HTML Cz 5 5. Tabele 5.1. Struktura tabeli 5.1.1 Odcięcia Microsoft Internet Explorer 7.0 niepoprawnie interpretuje białe znaki w komórkach tabeli w przypadku tworzenia

Bardziej szczegółowo

Ćwiczenie 9 - CSS i wstawianie CSS

Ćwiczenie 9 - CSS i wstawianie CSS Ćwiczenie 9 - CSS i wstawianie CSS Wprowadzenie: Od tego ćwiczenia zajmować się będziemy CSS czyli Kaskadowymi Arkuszami Stylów (Cascading Style Sheets). CSS stanowią uzupełnienie dla HTML-a. HTML odpowiada

Bardziej szczegółowo

Specyfikacja techniczna dot. mailingów HTML

Specyfikacja techniczna dot. mailingów HTML Specyfikacja techniczna dot. mailingów HTML Informacje wstępne Wszystkie składniki mailingu (pliki graficzne, teksty, pliki HTML) muszą być przekazane do melog.com dwa dni albo maksymalnie dzień wcześniej

Bardziej szczegółowo

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np.

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR> Język html to język znaczników inaczej tagów, czyli słów lub skrótów pochodzących z języka angielskiego ujętych w nawiasy ostrokątne , np.. . W większości przypadków spotykamy znaczniki początku (inaczej

Bardziej szczegółowo

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css. Kaskadowe arkusze stylów CSS Geneza - oddzielenie struktury dokumentu HTML od reguł prezentacji - poszerzenie samego HTML Korzyści - przejrzystość dokumentów - łatwe zarządzanie stylem (wyglądem) serwisu

Bardziej szczegółowo

e r T i H M r e n L T n

e r T i H M r e n L T n s e r T t w o i H M r e o T n w z n L Podstawy 1. Nawigacja na stronie jest niezwykle istotna, powinna być możliwie jak najprostsza. Pamiętajmy, że im mniej kroków do celu tym lepiej. 2. Projekt graficzny

Bardziej szczegółowo

XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania.

XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania. XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania. Reformuje on znane zasady języka HTML 4 w taki sposób, aby były zgodne z XML (HTML przetłumaczony na XML).

Bardziej szczegółowo

Struktura języka HTML ZNACZNIKI. Oto bardzo prosta strona WWW wyświetlona w przeglądarce: A tak wygląda kod źródłowy takiej strony:

Struktura języka HTML ZNACZNIKI. Oto bardzo prosta strona WWW wyświetlona w przeglądarce: A tak wygląda kod źródłowy takiej strony: Struktura języka HTML ZNACZNIKI Oto bardzo prosta strona WWW wyświetlona w przeglądarce: Rysunek 1: Przykładowa strona wyświetlona w przeglądarce A tak wygląda kod źródłowy takiej strony: Rysunek 2: Kod

Bardziej szczegółowo

Źródła. cript/1.5/reference/ Ruby on Rails: http://www.rubyonrails.org/ AJAX: http://www.adaptivepath.com/publications/e ssays/archives/000385.

Źródła. cript/1.5/reference/ Ruby on Rails: http://www.rubyonrails.org/ AJAX: http://www.adaptivepath.com/publications/e ssays/archives/000385. Źródła CSS: http://www.csszengarden.com/ XHTML: http://www.xhtml.org/ XML: http://www.w3.org/xml/ PHP: http://www.php.net/ JavaScript: http://devedgetemp.mozilla.org/library/manuals/2000/javas cript/1.5/reference/

Bardziej szczegółowo

Krótki przegląd własności języka CSS

Krótki przegląd własności języka CSS Krótki przegląd własności języka CSS Stosując arkusze stylów CSS, w sposób wyraźny oddziela się formatowanie dokumentu XHTML od jego warstwy znaczeniowej umieszczonej w sekcji . Niżej zestawiono

Bardziej szczegółowo

Języki programowania wysokiego poziomu. HTML cz.2.

Języki programowania wysokiego poziomu. HTML cz.2. Języki programowania wysokiego poziomu HTML cz.2. Model pudełkowy HTML Elementy blokowe w tym table oraz div są wyświetlane według tzw. modelu pudełkowego: Zawartość Odstęp (padding) Obramowanie (border)

Bardziej szczegółowo

www.fwrl.pl/szkolenie

www.fwrl.pl/szkolenie STRONA www.fwrl.pl/szkolenie MS WORD HTML HTML i dostarczają informację dla silnika przeglądarki o tym jak ma być zbudowana i wyświetlona strona HTML HTML HTML (warstwa logiczna co i gdzie ma być) (wastwa

Bardziej szczegółowo

Bazy Danych - Instrukcja do Ćwiczenia laboratoryjnego nr 8

Bazy Danych - Instrukcja do Ćwiczenia laboratoryjnego nr 8 Bazy Danych - Instrukcja do Ćwiczenia laboratoryjnego nr 8 Bazowy skrypt PHP do ćwiczeń z bazą MySQL: Utwórz skrypt o nazwie cw7.php zawierający następującą treść (uzupełniając go o właściwą nazwę uŝytkownika

Bardziej szczegółowo

O stronach www, html itp..

O stronach www, html itp.. O stronach www, html itp.. Prosty wstęp do podstawowych technik spotykanych w internecie 09.01.2015 M. Rad Plan wykładu Html Przykład Strona www Xhtml Css Php Js HTML HTML - (ang. HyperText Markup Language)

Bardziej szczegółowo

AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ

AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ Poznań, 2012-10-04 AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ NAZWA ADRES STRONY ILOŚĆ BŁĘDÓW WCAG 33 ILOŚĆ OSTRZEŻEŃ WCAG 3 TYP DOKUMENTU UŻYTY FORMAT (X)HTML JĘZYK OWANIE STRONY Urząd Marszałkowski Województwa

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 6

Tworzenie Stron Internetowych. odcinek 6 Tworzenie Stron Internetowych odcinek 6 CSS kaskadowe arkusze stylów CSS (Cascading Style Sheets), czyli Kaskadowe Arkusze Stylów "stylów" "arkusze" Reguły opisujące wygląd dokumentu opisanego za pomocą

Bardziej szczegółowo

Wymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr 351203)

Wymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr 351203) Wymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr 351203) Technikum - kl. 3 Td, semestr 5 i 6 Ocena niedostateczna dopuszczająca Wymagania edukacyjne wobec ucznia: Uczeń nie

Bardziej szczegółowo

2. Prezentacja wizualna

2. Prezentacja wizualna 2. Prezentacja wizualna 2.1. Opis rozdziału Rozdział ten przedstawia jak stworzyć przykładowy układ graficzny dla naszej gry w HTML5 i CSS3, które w dalszej części poradnika zostaną wykorzystane do stworzenia

Bardziej szczegółowo

2 Podstawy tworzenia stron internetowych

2 Podstawy tworzenia stron internetowych 2 Podstawy tworzenia stron internetowych 2.1. HTML5 i struktura dokumentu Podstawą działania wszystkich stron internetowych jest język HTML (Hypertext Markup Language) hipertekstowy język znaczników. Dokument

Bardziej szczegółowo

Ćwiczenia laboratoryjne nr 11 Bazy danych i SQL.

Ćwiczenia laboratoryjne nr 11 Bazy danych i SQL. Prezentacja Danych i Multimedia II r Socjologia Ćwiczenia laboratoryjne nr 11 Bazy danych i SQL. Celem ćwiczeń jest poznanie zasad tworzenia baz danych i zastosowania komend SQL. Ćwiczenie I. Logowanie

Bardziej szczegółowo

Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów Aplikacje internetowe KL. III Rok szkolny: 011/01 Nr programu: 31[01]/T,SP/MENIS/004.06.14 Okres kształcenia: łącznie ok. 180 godz. lekcyjne Wojciech Borzyszkowski Zenon Kreft Moduł Bok wprowadzający Podstawy

Bardziej szczegółowo

Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp.

Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp. Style CSS Wstęp Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp. Podstawową zaletą i zadaniem stylów jest oddzielenie

Bardziej szczegółowo

WITRYNY I APLIKACJE INTERNETOWE

WITRYNY I APLIKACJE INTERNETOWE WITRYNY I APLIKACJE INTERNETOWE TECHNIKUM INFORMATYCZNE wg programu 351203 KLASA II 3 godz. tygodniowo 90 godziny Liczba godzin w cyklu kształcenia 180 rok szkolny 2013/2014 Sylwia Płonka 2. W 1980 fizyk

Bardziej szczegółowo

5-6. Struktura dokumentu html. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

5-6. Struktura dokumentu html. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów Aplikacje internetowe KL. III Rok szkolny: 013/01 Nr programu: 31[01]/T,SP/MENIS/00.06.1 Okres kształcenia: łącznie ok. 170 godz. lekcyjne Moduł Bok wprowadzający 1. Zapoznanie z programem nauczania i

Bardziej szczegółowo

I. Wstawianie rysunków

I. Wstawianie rysunków I. Wstawianie rysunków Wstawiane rysunku Bez parametrów: Tekst alternatywny Tytuł obrazka

Bardziej szczegółowo

APLIKACJE INTERNETOWE 1 HTML - STRUKTURA STRONY INTERNETOWEJ

APLIKACJE INTERNETOWE 1 HTML - STRUKTURA STRONY INTERNETOWEJ APLIKACJE INTERNETOWE 1 HTML - STRUKTURA STRONY INTERNETOWEJ PLAN PREZENTACJI Wprowadzenie do HTML Struktura dokumentu HTML Komentarze Znaczniki Nagłówki (tytuły) Akapit Znacznik końca wiersza Linia pozioma

Bardziej szczegółowo

Wprowadzenie do języka HTML

Wprowadzenie do języka HTML Radosław Rudnicki (joix@mat.umk.pl) 05.09.2009 r. Wprowadzenie do języka HTML Do tworzenia stron internetowych wystarczy użyd zwykłego Notatnika oferowanego przez system Windows, czy dowolny inny system

Bardziej szczegółowo

Odsyłacze. Style nagłówkowe

Odsyłacze. Style nagłówkowe Odsyłacze ... polecenie odsyłcza do dokumentu wskazywanego przez url. Dodatkowym parametrem jest opcja TARGET="...", która wskazuje na miejsce otwarcia wskazywanego dokumentu, a jej parametrami

Bardziej szczegółowo

Język (X)HTML. Podstawowe znaczniki i parametry. dr Konrad Dominas / UAM

Język (X)HTML. Podstawowe znaczniki i parametry. dr Konrad Dominas / UAM Język (X)HTML Podstawowe znaczniki i parametry Szablon dokumentu (X)HTML

Bardziej szczegółowo

Układy witryn internetowych

Układy witryn internetowych 1. CEL ĆWICZENIA Celem ćwiczenia jest zapoznanie się z możliwościami kaskadowych arkuszy stylów CSS w zakresie kontrolowania położenia elementów na stronie. 2. MATERIAŁ NAUCZANIA W normalnym układzie opartym

Bardziej szczegółowo

Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.

Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1. Widżety KIWIPortal tworzenie umieszczanie na stronach internetowych opcje zaawansowane Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.3 Strona 1 z 17 1 SPIS TREŚCI 2 Metody osadzania widżetów... 3 2.1

Bardziej szczegółowo

Ćwiczenie 4 - Tabele

Ćwiczenie 4 - Tabele Ćwiczenie 4 - Tabele W ćwiczeniu tym zajmujemy się tabelami. Tabele moŝna wykorzystywać do róŝnych celów. W tabelach moŝna prezentować dane i je wyliczać, moŝna ustalić określony układ treści i stworzyć

Bardziej szczegółowo

rk HTML 4 a 5 różnice

rk HTML 4 a 5 różnice rk HTML 4 a 5 różnice kompatybilność Pierwszym dużym plusem języka HTML 5 jest to, że jest zdefiniowany w sposób umożliwiający kompatybilność wstecz. Składnia Przykład dokumentu podporządkowującego się

Bardziej szczegółowo

Wordpress: http://wordpress.org. Joomla! http://www.joomla.org/ Drupal. http://drupal.org

Wordpress: http://wordpress.org. Joomla! http://www.joomla.org/ Drupal. http://drupal.org System zarządzania treścią (Content Management System, CMS) jest to aplikacja internetowa lub ich zestaw, pozwalająca na łatwe utworzenie serwisu WWW oraz jego późniejszą aktualizację i rozbudowę. Prezentacja

Bardziej szczegółowo

Podstawy HTML i styli CSS. selektor {właściwość1: wartość1; właściwość2: wartość2}

Podstawy HTML i styli CSS. selektor {właściwość1: wartość1; właściwość2: wartość2} Kaskadowe arkusze stylów (CSS) W trakcie projektowania własnego serwisu w języku HTML napotkamy problem z określeniem precyzyjnego pozycjonowania tekstu i grafiki oraz elastycznym formatowaniem tekstu.

Bardziej szczegółowo

Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie

Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie Scenariusz lekcji informatyki klasa II gimnazjum Temat : Strona WWW pierwsze

Bardziej szczegółowo

HTML5 i CSS. Deklaracja musi być na początki dokumentu napisanego w HTML5 przed tagiem .

HTML5 i CSS. Deklaracja <!DOCTYPE> musi być na początki dokumentu napisanego w HTML5 przed tagiem <html>. Dokumenty HTML5 Każda przeglądarka dostępna na rynku obsługuje HTML5 w różnym stopniu. Możesz sprawdzić swoją testerem dostępnym pod adresem (http://html5test.com). HTML5 wprowadza cały zestaw zupełnie

Bardziej szczegółowo

SQL (ang. Structured Query Language)

SQL (ang. Structured Query Language) SQL (ang. Structured Query Language) SELECT pobranie danych z bazy, INSERT umieszczenie danych w bazie, UPDATE zmiana danych, DELETE usunięcie danych z bazy. Rozkaz INSERT Rozkaz insert dodaje nowe wiersze

Bardziej szczegółowo

Laboratorium nr 4. Temat: SQL część II. Polecenia DML

Laboratorium nr 4. Temat: SQL część II. Polecenia DML Laboratorium nr 4 Temat: SQL część II Polecenia DML DML DML (Data Manipulation Language) słuŝy do wykonywania operacji na danych do ich umieszczania w bazie, kasowania, przeglądania, zmiany. NajwaŜniejsze

Bardziej szczegółowo

Języki programowania wysokiego poziomu. PHP cz.4. Bazy danych

Języki programowania wysokiego poziomu. PHP cz.4. Bazy danych Języki programowania wysokiego poziomu PHP cz.4. Bazy danych PHP i bazy danych PHP może zostać rozszerzony o mechanizmy dostępu do różnych baz danych: MySQL moduł mysql albo jego nowsza wersja mysqli (moduł

Bardziej szczegółowo

Bazy danych - wykład wstępny

Bazy danych - wykład wstępny Bazy danych - wykład wstępny Wykład: baza danych, modele, hierarchiczny, sieciowy, relacyjny, obiektowy, schemat logiczny, tabela, kwerenda, SQL, rekord, krotka, pole, atrybut, klucz podstawowy, relacja,

Bardziej szczegółowo

Tworzenie i publikowanie stron www. Krzysztof Kadowski Wydział Zamiejscowy w Człuchowie Wyższa Szkoła Pedagogiczna TWP

Tworzenie i publikowanie stron www. Krzysztof Kadowski Wydział Zamiejscowy w Człuchowie Wyższa Szkoła Pedagogiczna TWP Tworzenie i publikowanie stron www. Krzysztof Kadowski Wydział Zamiejscowy w Człuchowie Wyższa Szkoła Pedagogiczna TWP Technologie stron www Strony www Statyczne HTML. CSS. Dynamiczne Oparte o bazy danych.

Bardziej szczegółowo

Lab.1. Praca z tekstem: stosowanie arkuszy stylów w dokumentach OO oraz HTML/CSS

Lab.1. Praca z tekstem: stosowanie arkuszy stylów w dokumentach OO oraz HTML/CSS Lab.1. Praca z tekstem: stosowanie arkuszy stylów w dokumentach OO oraz HTML/CSS Cel ćwiczenia: zapoznanie się z pojęciem stylów w dokumentach. Umiejętność stosowania stylów do automatycznego przygotowania

Bardziej szczegółowo

ECDL/ICDL Web Editing Moduł S6 Sylabus - wersja 2.0

ECDL/ICDL Web Editing Moduł S6 Sylabus - wersja 2.0 ECDL/ICDL Web Editing Moduł S6 Sylabus - wersja 2.0 Przeznaczenie Sylabusa Dokument ten zawiera szczegółowy Sylabus dla modułu ECDL/ICDL Web Editing. Sylabus opisuje zakres wiedzy i umiejętności, jakie

Bardziej szczegółowo

Podstawy języka SQL. SQL Structured Query Languagestrukturalny

Podstawy języka SQL. SQL Structured Query Languagestrukturalny Podstawy języka SQL SQL Structured Query Languagestrukturalny język zapytań DDL Język definicji danych (np. tworzenie tabel) DML Język manipulacji danych (np. tworzenie zapytań) DCL Język kontroli danych

Bardziej szczegółowo

Box model: Content. Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości.

Box model: Content. Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości. Box model Box model: Content Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości. Box model: Padding Content Content - obszar zawartości określany jest za pomocą deklaracji

Bardziej szczegółowo

p { color: yellow; font-weight:bold; }

p { color: yellow; font-weight:bold; } Barbara Łukawska, Adam Krechowicz, Tomasz Michno Ćwiczenie nr 13: CSS Wstęp Cascading Style Sheets (Kaskadowe Arkusze Styli, w skrócie CSS) jest językiem, który opisuje sposób w jaki będzie wyświetlana

Bardziej szczegółowo

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable W zadaniach można używać programu Notepad++ (jest wygodny, ponieważ m.in. koloruje składnię i uzupełnia funkcje) albo też jakiegoś innego edytora zainstalowanego w systemie (np. notatnika). Najnowszą,

Bardziej szczegółowo

Wprowadzenie do HTML, CSS, JavaScript, PHP. Kurs 18.11 2008 22 12. 2008

Wprowadzenie do HTML, CSS, JavaScript, PHP. Kurs 18.11 2008 22 12. 2008 Wprowadzenie do HTML, CSS, JavaScript, PHP Kurs 18.11 2008 22 12. 2008 Narzędzia do tworzenia i utrzymania dokumentów web owych Edytory HTML Server WWW i baz danych Przeglądarka internetowa kompilator

Bardziej szczegółowo

Kaskadowe arkusze stylów (CSS)

Kaskadowe arkusze stylów (CSS) Kaskadowe arkusze stylów (CSS) CSS (Cascading Style Sheets) jest to język opisujący sposób, w jaki przeglądarki mają wyświetlać zawartość odpowiednich elementów HTML. Kaskadowe arkusze stylów służą do

Bardziej szczegółowo

MODUŁ 3. WYMAGANIA EGZAMINACYJNE Z PRZYKŁADAMI ZADAŃ

MODUŁ 3. WYMAGANIA EGZAMINACYJNE Z PRZYKŁADAMI ZADAŃ MODUŁ 3. WYMAGANIA EGZAMINACYJNE Z PRZYKŁADAMI ZADAŃ E.14. Tworzenie aplikacji internetowych i baz danych oraz administrowanie bazami 1. Przykłady zadań do części pisemnej egzaminu dla wybranych umiejętności

Bardziej szczegółowo

PROGRAM NAUCZANIA DLA ZAWODU TECHNIK INFORMATYK, 351203 O STRUKTURZE PRZEDMIOTOWEJ

PROGRAM NAUCZANIA DLA ZAWODU TECHNIK INFORMATYK, 351203 O STRUKTURZE PRZEDMIOTOWEJ PROGRAM NAUCZANIA DLA ZAWODU TECHNIK INFORMATYK, 351203 O STRUKTURZE PRZEDMIOTOWEJ Systemy baz danych 1. 2 Wstęp do baz danych 2. 2 Relacyjny model baz danych. 3. 2 Normalizacja baz danych. 4. 2 Cechy

Bardziej szczegółowo

Strony WWW - podstawy języka HTML

Strony WWW - podstawy języka HTML Strony WWW - podstawy języka HTML Jacek Krzaczkowski 2004 r. HTML (Hyper Text Markup Language) jest językiem opisu dokumentu używanym do tworzenia stron WWW. Znaczniki języka HTML informują przeglądarkę

Bardziej szczegółowo

Bazy danych. Wykład IV SQL - wprowadzenie. Copyrights by Arkadiusz Rzucidło 1

Bazy danych. Wykład IV SQL - wprowadzenie. Copyrights by Arkadiusz Rzucidło 1 Bazy danych Wykład IV SQL - wprowadzenie Copyrights by Arkadiusz Rzucidło 1 Czym jest SQL Język zapytań deklaratywny dostęp do danych Składnia łatwa i naturalna Standardowe narzędzie dostępu do wielu różnych

Bardziej szczegółowo

Projektowanie systemów baz danych

Projektowanie systemów baz danych Projektowanie systemów baz danych Seweryn Dobrzelewski 4. Projektowanie DBMS 1 SQL SQL (ang. Structured Query Language) Język SQL jest strukturalnym językiem zapewniającym możliwość wydawania poleceń do

Bardziej szczegółowo

LABORATORIUM 8,9: BAZA DANYCH MS-ACCESS

LABORATORIUM 8,9: BAZA DANYCH MS-ACCESS UNIWERSYTET ZIELONOGÓRSKI INSTYTUT INFORMATYKI I ELEKTROTECHNIKI ZAKŁAD INŻYNIERII KOMPUTEROWEJ Przygotowali: mgr inż. Arkadiusz Bukowiec mgr inż. Remigiusz Wiśniewski LABORATORIUM 8,9: BAZA DANYCH MS-ACCESS

Bardziej szczegółowo

Celem ćwiczenia jest zapoznanie z językiem HTML i JavaScript, zasadami tworzenia stron WWW i umieszczania na nich skryptów w języku JavaScript.

Celem ćwiczenia jest zapoznanie z językiem HTML i JavaScript, zasadami tworzenia stron WWW i umieszczania na nich skryptów w języku JavaScript. Instrukcja laboratoryjna do ćwiczenia: 1. Cel ćwiczenia Strona internetowa w systemach unix-owych Celem ćwiczenia jest zapoznanie z językiem HTML i JavaScript, zasadami tworzenia stron WWW i umieszczania

Bardziej szczegółowo

Projektowanie aplikacji internetowych. CSS w akcji

Projektowanie aplikacji internetowych. CSS w akcji Projektowanie aplikacji internetowych CSS w akcji Tak to ma wyglądać Strona : 2 Założenie Treść strony ma być oddzielona od informacji o jej wyglądzie. Kod HTML nie powinien zawierać żadnych informacji

Bardziej szczegółowo

Tworzenie bazy danych na przykładzie Access

Tworzenie bazy danych na przykładzie Access Tworzenie bazy danych na przykładzie Access Tworzenie tabeli Kwerendy (zapytania) Selekcja Projekcja Złączenie Relacja 1 Relacja 2 Tworzenie kwedend w widoku projektu Wybór tabeli (tabel) źródłowych Wybieramy

Bardziej szczegółowo

Laboratorium 6 Tworzenie bloga w Zend Framework

Laboratorium 6 Tworzenie bloga w Zend Framework Laboratorium 6 Tworzenie bloga w Zend Framework Przygotowanie bazy danych 1. Wykonaj skrypt blog.sql, który założy w bazie danych dwie tabele oraz wpisze do nich przykładowe dane. Tabela blog_uzytkownicy

Bardziej szczegółowo

obecnie tabeli nie stosuje się do budowy struktury witryny (stosuje się za to pozycjonowanie elementów i warstwy) faktycznie wymagają

obecnie tabeli nie stosuje się do budowy struktury witryny (stosuje się za to pozycjonowanie elementów i warstwy) faktycznie wymagają Tabela obecnie tabeli nie stosuje się do budowy struktury witryny (stosuje się za to pozycjonowanie elementów i warstwy) tabel używa się wyłącznie do prezentacji tych danych, które tego tabel używa się

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 5

Tworzenie Stron Internetowych. odcinek 5 Tworzenie Stron Internetowych odcinek 5 Nagłówek zawiera podstawowe informacje o dokumencie, takie jak: tytuł strony (obowiązkowy) metainformacje/metadane (obowiązkowa deklaracja

Bardziej szczegółowo

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable W zadaniach można używać programu Notepad++ (jest wygodny, ponieważ m.in. koloruje składnię i uzupełnia funkcje) albo też jakiegoś innego edytora zainstalowanego w systemie (np. notatnika). Najnowszą,

Bardziej szczegółowo

Tworzenie i edycja dokumentów w aplikacji Word.

Tworzenie i edycja dokumentów w aplikacji Word. Tworzenie i edycja dokumentów w aplikacji Word. Polskie litery, czyli ąłóęśźżń, itd. uzyskujemy naciskając prawy klawisz Alt i jednocześnie literę najbardziej zbliżoną wyglądem do szukanej. Np. ł uzyskujemy

Bardziej szczegółowo

I. Dlaczego standardy kodowania mailingów są istotne?

I. Dlaczego standardy kodowania mailingów są istotne? 1 Tabela zawartości: I. Dlaczego standardy kodowania mailingów są istotne? 3 II. Budowa nagłówka wiadomości. 4 III. Style kaskadowe CSS. 4 IV. Elementarna budowa szablonu. 6 V. Podsumowanie. 9 2 I. Dlaczego

Bardziej szczegółowo

Język HTML i podstawy CSS

Język HTML i podstawy CSS Notatki do wykładu Język HTML i podstawy CSS dr Jacek Tarasiuk WFiIS, AGH wersja 2006 Spis treści Język HTML...1 Rodzaje dokumentów HTML...1 Budowa dokumentu HTML...1 Zestawienie znaczników...2 Szkielet

Bardziej szczegółowo

BAZY DANYCH Formularze i raporty

BAZY DANYCH Formularze i raporty BAZY DANYCH Formularze i raporty Za pomocą tabel można wprowadzać nowe dane, przeglądać i modyfikować dane już istniejące. Jednak dla typowego użytkownika systemu baz danych, przygotowuje się specjalne

Bardziej szczegółowo

ĆWICZENIA Z JĘZYKA HTML. 1. Znaczniki. 2. Struktura dokumentu HTML. 3. Tworzymy stronę WWW Podróże po stolicach Europy

ĆWICZENIA Z JĘZYKA HTML. 1. Znaczniki. 2. Struktura dokumentu HTML. 3. Tworzymy stronę WWW Podróże po stolicach Europy Informatyka - podstawowe tematy WSzPWN - Język HTML, podstawy str. 1 ĆWICZENIA Z JĘZYKA HTML Struktura dokumentu, znaczniki, tabele, hiperłacza Być może trudno w to uwierzyć, jednak strony WWW są tekstem

Bardziej szczegółowo

Języki programowania wysokiego poziomu. Ćwiczenia

Języki programowania wysokiego poziomu. Ćwiczenia Języki programowania wysokiego poziomu Ćwiczenia Języki programowania Ćwiczenia Strukturalny HTML Arkusze CSS Formularze HTML i PHP Baza danych MySQL Forum internetowe Strukturalny HTML Zadania Dokument

Bardziej szczegółowo

strukturalny język zapytań używany do tworzenia i modyfikowania baz danych oraz do umieszczania i pobierania danych z baz danych

strukturalny język zapytań używany do tworzenia i modyfikowania baz danych oraz do umieszczania i pobierania danych z baz danych SQL SQL (ang. Structured Query Language): strukturalny język zapytań używany do tworzenia strukturalny język zapytań używany do tworzenia i modyfikowania baz danych oraz do umieszczania i pobierania danych

Bardziej szczegółowo

URL: http://www.ecdl.pl

URL: http://www.ecdl.pl Syllabus WEBSTARTER wersja 1.0 Polskie Towarzystwo Informatyczne 2007 Copyright wersji angielskiej: Copyright wersji polskiej: The European Computer Driving Licence Foundation Ltd. Polskie Towarzystwo

Bardziej szczegółowo

KURS HTML. Wyższa Szkoła Humanistyczno-Ekonomiczna We Włocławku. Stanisł aw Wszelak. Materiał uzupełniający dla słuchaczy i studentów WSHE

KURS HTML. Wyższa Szkoła Humanistyczno-Ekonomiczna We Włocławku. Stanisł aw Wszelak. Materiał uzupełniający dla słuchaczy i studentów WSHE Wyższa Szkoła Humanistyczno-Ekonomiczna We Włocławku Stanisł aw Wszelak KURS HTML Materiał uzupełniający dla słuchaczy i studentów WSHE Włocławek, 2004 rok Jest to otwierający i zamykający

Bardziej szczegółowo

Cel ogólny lekcji: Wprowadzenie dodatkowych znaczników. Wprowadzenie odsyłacza, tabeli, listy numerowanej i wypunktowanej.

Cel ogólny lekcji: Wprowadzenie dodatkowych znaczników. Wprowadzenie odsyłacza, tabeli, listy numerowanej i wypunktowanej. Piotr Chojnacki IV rok, informatyka chemiczna Liceum Ogólnokształcące Nr I we Wrocławiu Wrocław dn. 26 lutego 2006 roku Czas trwania zajęć: 90 minut, przedmiot: TI Temat lekcji: Tworzenie strony internetowej

Bardziej szczegółowo

Witryny i aplikacje internetowe. mgr inż. Remigiusz Pokrzywiński

Witryny i aplikacje internetowe. mgr inż. Remigiusz Pokrzywiński Witryny i aplikacje internetowe mgr inż. Remigiusz Pokrzywiński Podstawowe pojęcia dotyczące stron internetowych Strona internetowa, strona WWW (ang. web page) dokument HTML udostępniony w Internecie przez

Bardziej szczegółowo

Relacyjne bazy danych. Podstawy SQL

Relacyjne bazy danych. Podstawy SQL Relacyjne bazy danych Podstawy SQL Język SQL SQL (Structured Query Language) język umożliwiający dostęp i przetwarzanie danych w bazie danych na poziomie obiektów modelu relacyjnego tj. tabel i perspektyw.

Bardziej szczegółowo

HTML jak zrobić prostą stronę www

HTML jak zrobić prostą stronę www HTML jak zrobić prostą stronę www Z tej prezentacji dowiemy się: - co to jest HTML - jak znając podstawy HTML'a zrobić prostą stronę Co to jest HTML? HTML = HyperText Markup Language, czyli język znaczników

Bardziej szczegółowo

Za pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco:

Za pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco: 1 1. Ramki Najbardziej elastycznym sposobem budowania stron jest uŝycie ramek. Ułatwiają one nawigowanie w wielostronicowych dokumentach HTML, poprzez podział ekranu na kilka obszarów. KaŜdy z nich zawiera

Bardziej szczegółowo

Technologie Informacyjne

Technologie Informacyjne Technologie Informacyjne Wykªad 6 Paweª Witkowski MIM UW Wiosna 2013 P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 1 / 18 HTML HyperText Markup Language J zyk oparty na znacznikach Opisuje

Bardziej szczegółowo

Bazy danych SQL Server 2005

Bazy danych SQL Server 2005 Bazy danych SQL Server 2005 TSQL Michał Kuciapski Typ zadania: Podstawowe zapytania Select Zadanie 1: Wyświetl następujące informacje z bazy: A. 1. Wyświetl informacje o klientach: nazwa firmy, imie, nazwisko,

Bardziej szczegółowo

Blok dokumentu.

Blok dokumentu. <div> </div> Blok dokumentu Polecenie div (blok, sekcja) jest jednym z najbardziej fundamentalnym poleceń języka HTML, które odgrywa kluczową rolę w grupowaniu wielu różnych elementów i pozycjonowaniu większych fragmentów

Bardziej szczegółowo

Specyfikacja mailingu GG Network

Specyfikacja mailingu GG Network Specyfikacja mailingu GG Network Styczeń 2012 2 Mailing założenia ogólne Do wysłanego mailingu konieczne jest dostarczenie: kreacji typu HTML (do 30 kb); tematu mailingu; nadawcy mailingu; danych reklamodawcy

Bardziej szczegółowo

HTML 1. Gimnazjum nr 1 w Barcinie gimbarcin.pl

HTML 1. Gimnazjum nr 1 w Barcinie gimbarcin.pl HTML 1 Gimnazjum nr 1 w Barcinie UWAGA: UTWÓRZ FOLDER HTML, a w nim HTML-1 dla pierwszego ćwiczenia. Imię_ nazwisko_html-1.html z dysku J: w folderze HTML 1. Tło strony - Jednolity kolor:

Bardziej szczegółowo