plik z ćwiczeniami - e

Transkrypt

Michał Głębowski
Informatyka i multimedia
Ćwiczenia, str. 1 / 18
1
1
Bazy danych
1.1
Zapoznanie z MySQL Query Browser
1.
Uruchom program MySQL Query Browser, zaloguj się używając podanych przez prowadzącego danych.
2.
Wykonaj poniższe zapytania (pojedynczo), obserwuj wyniki pojawiające się na ekranie. Każdą następującą kwerendę
wpisuj pod poprzednią (nie usuwając poprzedniej).
(1) SELECT 12;
dane logowania do serwera:
(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');
Server Host:
serwer
Username:
student
Password:
student
(8) SELECT DATE_ADD(now(), INTERVAL 1000 DAY);
(9) SELECT DATE_ADD(now(), INTERVAL -100 MINUTE);
3.
Dopisz i wykonaj kwerendę znajdującą liczbę dni dzielącą datę obecną i datę Twojego urodzenia.
4.
Zapisz skrypt do swojego katalogu pod nazwą cw_1_1.sql (Plik->zapisz ... Plik skryptu SQL ANSI).
5.
Zamknij program.
1.2
Proste kwerendy na istniejącej tabeli
1.
Uruchom program MySQL Query Browser, zaloguj się używając wskazanych danych. Wszystkie poniższe komendy zapisuj
jedna pod drugą, nie kasując poprzednich. Na koniec zapiszesz plik zawierający wszystkie wpisane komendy.
2.
Wskaż serwerowi, że będziesz pracował na bazie Cwiczenia (wpisz poniższą komendę i uruchom ją poprzez Ctrl+ENTER,
kursor musi znajdować się w linii komendy, którą chcesz uruchomić).
USE Cwiczenia;
3.
Aby dowiedzieć się jakie tabele zawiera baza Cwiczenia, uruchom komendę
SHOW TABLES;
4.
Pokaż wszystkie dane z istniejącej tabeli metropolie kwerendą
SELECT * FROM metropolie;
- w wyniku pojawi się pełna tabela te wszystkimi danymi w takim porządku, jak zostały wpisane.
5.
Aby dowiedzieć się jakie są nazwy pól w tabeli metropolie (choć widać je w nagłówku wyniku), wpisz:
SHOW FIELDS FROM metropolie;
6.
- przyjrzyj się tabeli wyników
Pokaż miasta, oraz ich obszary w kolejności od największego obszaru
SELECT miasto, obszar FROM metropolie ORDER BY obszar DESC;
7.
Wybierz miasta, oraz ich gęstości zaludnienia malejąco (gęstość zaludnienia = ludność / obszar)
SELECT miasto, ludnosc/obszar AS gzal FROM metropolie ORDER BY ludnosc/obszar DESC;
8.
Wybierz id oraz miasta, gdzie populacja jest większa niż 20 mln (2*107)
SELECT id, miasto FROM metropolie WHERE ludnosc>2e7;
9.
Wybierz trzy miasta o największym obszarze (pokaż od największego obszaru)
SELECT miasto FROM metropolie ORDER BY obszar DESC LIMIT 3;
10. Wybierz wszystkie rekordy, dla których miasta zaczynają się na M
SELECT * FROM metropolie WHERE miasto LIKE 'm%';
11. Wybierz pięć rekordów o największej gęstości zaludnienia
SELECT *, ludnosc/obszar FROM metropolie ORDER BY ludnosc/obszar DESC LIMIT 5;
12. Znajdź liczbę rekordów dla których długość nazwy miasta (liczba liter) wynosi 7
SELECT COUNT(*) FROM metropolie WHERE LENGTH(miasto)=7;
13. Podaj sumę pola ludnosc dla wszystkich rekordów
SELECT SUM(ludnosc) FROM metropolie;
14. Wybierz każde państwo oraz sumę ludności jego metropolii (grupowanie danych wg państw)
SELECT panstwo, SUM(ludnosc) FROM metropolie GROUP BY panstwo;
15. Zapisz listę wpisanych komend do swojego katalogu jako cw_1_2.sql (Plik->zapisz ... Plik skryptu SQL ANSI).
16. Zamknij program.
Michał Głębowski
1
1.3
Tworzenie tabel (w pliku tekstowym)
W ćwiczeniu należy utworzyć (skrypt) posługując się językiem SQL. Składnia i przykład tabeli w SQL są następujące:
składnia
przykład
CREATE TABLE tbl_name(
col_name data_type col_options,
col_name data_type col_options,
...
);
CREATE TABLE test1 (
id INT NOT NULL AUTO_INCREMENT,
nazwisko VARCHAR(32) NOT NULL,
data_ur DATE NULL,
pensja FLOAT NULL
) ENGINE = MyISAM ;
1.
Otwórz program PSPad, z menu Plik wybierz Nowy, typ pliku wybierz SQL (MySQL)
2.
Wpisz skrypt tworzący bazę oraz tabele zgodnie z otrzymanymi założeniami.
3.
Po utworzeniu skryptu zapisz go w swoim katalogu pod nazwą cw_1_3.sql
Składnia tworzenia bazy danych:
CREATE DATABASE nazwa_bazy_danych;
Użycie bazy danych:
USE nazwa_bazy_danych;
Tworzenie tabeli:
CREATE TABLE nazwa_tabeli (definicja pól rozdzielona średnikami);
Na podstawie otrzymanego numeru utwórz skrypt (plik tekstowy): tworzący bazę oraz dwie tabele, które będą miały pola jak
w tabeli. Nazwa bazy danych ma być taka jak podano w tabeli + _ + nazwisko bez polskich znaków, np. dla pkt 7:
CREATE DATABASE place_glebowski;
Nr
baza
1
Tabela 1
nazwa
zamowienie
1. id INT obowiązkowe auto_increment PRIMARY KEY
2. id_klienta INT obowiązkowe
3. towar VARCHAR(32) obowiązkowe
4. ilosc FLOAT obowiązkowe
autor
2. nazwisko VARCHAR(32), obowiązkowe
3. imie VARCHAR(32), obowiązkowe
4. rok_urodzenia YEAR, nieobowiązkowe
ksiazka
2. tytul VARCHAR(64) obowiązkowe
3. id_autora INT obowiązkowe
4. rok_wydania YEAR nieobowiązkowe
pracownik
4. id_wydzialu INT obowiązkowe
5. kierownik INT nieobowiązkowe
3
wydzial
4
biegi
5
2. nazwa VARCHAR(32), obowiązkowe
3. liczba_pracownikow INT, nieobowiązkowe
biegacz
5. plec ENUM('K', 'M') obowiązkowe
wynik
producent
3. miasto VARCHAR(32), nieobowiązkowe
4. zagraniczny ENUM('T', 'N')
wyrob
3. id_producenta INT obowiązkowe
4. opis VARCHAR(200), nieobowiązkowe
sklep
3. id_marketu INT obowiązkowe
4. telefon VARCHAR(24)
produkcja
6
market
sklepy
7
place
8
2. data DATE obowiązkowe
3. wartosc FLOAT obowiązkowe
4. id_biegacza INT obowiązkowe
pracownik
6. telefon VARCHAR(24) nieobowiązkowe
7. email VARCHAR(32) nieobowiązkowe
8. nrpokoju INT nieobowiązkowe
wyplata
uzytkownik
2. login VARCHAR(12), obowiązkowe
3. haslo VARCHAR(32), nieobowiązkowe
4. aktywny ENUM ('T', 'N') obowiązkowe
log
2. id_uzytkownika INT obowiązkowe
3. start DATETIME nieobowiązkowe
4. koniec DATETIME nieobowiązkowe
firma
4. nip VARCHAR(20), obowiązkowe
5. regon VARCHAR(12), nieobowiązkowe
projekt
2. nazwa VARCHAR(32) obowiązkowe
3. id_firmy INT obowiązkowe
4. rozpoczeto DATE nieobowiązkowe
5. zakonczono DATE nieobowiązkowe
pojazd
2. producent VARCHAR(32), obowiązkowe
3. model VARCHAR(32), obowiązkowe
4. kolor VARCHAR(20), nieobowiązkowe
5. nrrej VARCHAR(12), obowiązkowe
6. nrsilnika VARCHAR(24), obowiązkowe
czaspracy
9
projekty
10
ubezpieczenia
objaśnienia (pola)
klient
biblioteka
kadra
nazwa
4. aktywny INT nieobowiązkowe
zamowienia
2
objaśnienia (pola)
Tabela 2
zdarzenie
2. id_pracownika INT obowiązkowe
3. kwota FLOAT, obowiązkowe
2. id_pojazdu INT obowiązkowe
3. szkoda ENUM('stluczka', 'kasacja') nieobowiązkowe
Michał Głębowski
1
1.4
Uruchamianie zapisanych kwerend
1.
Uruchom i zaloguj się do programu MySQL Query Browser
2.
Otwórz skrypt, utworzony w ćwiczeniu 1.3. Uruchom skrypt, sprawdź, czy wykonał się bez błędów.
3.
Otwórz (kolejny) skrypt odpowiadający numerem bazie z poprzedniego ćwiczenia, pobierając spakowany plik:
- źródło pliku: http://glebowski.pl/ti/pliki/cw1_4.7z - skrypt zawierający „INSERTY” dane do wprowadzenia do tabel
- przed uruchomieniem zmodyfikuj linię USE ... - wstawiając rzeczywistą nazwę bazy.
4.
Wykonaj następujące kwerendy (zapisuj je jedna pod drugą, nie kasując poprzednich):
a)
Pokaż wszystkie rekordy z pierwszej tabeli
b)
Pokaż wszystkie rekordy z drugiej tabeli
c)
Pokaż wszystkie rekordy z drugiej tabeli podstawiając powiązane pole (np. nazwa) z pierwszej tabeli.
Przykład – pomoc do punktu c)
jeśli:
tabela A: pola (id, produkt, cena),
tabela B: pola (id, klient, id_produktu, ilosc).
Aby wyświetlić dane z tabeli B dodając pole nazwy produktu z tabeli A należy wpisać:
SELECT B.*, A.produkt FROM B
→ wybierz wszystkie pola z tabeli B oraz pole produkt z tabeli A,
LEFT JOIN A ON A.id = B.id_produktu
→ połącz tabelę A dla równych pól A.id = B.id_produktu
tabela A
id INT
produkt VARCHAR(20)
cena FLOAT
5.
tabela B
id INT
klient VARCHAR(24)
id_produktu INT
ilosc INT
Wykonaj kwerendy dla wybranej bazy (numery, to numery baz 1-10). Kwerendy wpisuj jedna pod drugą (po wykonaniu).
1.
Wybierz wszystkie rekordy z tabeli zamowienie dla których ilosc > 100
Wybierz rekordy z zamowienie dla których id_klienta = 5
Podaj sumę dla pola ilosc wszystkich rekordów
2.
Wybierz wszystkie rekordy z tabeli ksiazka gdzie rok_wydania większy niż 2000
Wybierz tytul z tabeli ksiazki dla których id_autora wynosi 2
Wybierz wszystkie rekordy z ksiazki dla których tytuł zaczyna się od litery „P” a rok_wydania jest mniejszy od 1998
3.
Wybierz wszystkie rekordy z tabeli pracownik, gdzie pierwsza litera nazwiska to M
Podaj ilość rekordów dla wydziału 4
Wybierz id i nazwisko z tabeli pracownik, gdzie kierownik = 1
4.
Podaj liczbę rekordów z tabeli biegacz, dla których płeć to M (mężczyzna) oraz rok urodzenia jest większy od 1990
Wybierz wszystkie rekordy z tabeli wynik, gdzie rok jest 2008 (YEAR(data)=2008)
Podaj liczbę rekordów z tabeli wynik, gdzie wartosc jest mniejsza niż 34
5.
Wybierz wszystkie rekordy z tabeli wyrob gdzie długość pola opis > 16
Wybierz pole nazwa z tabeli wyrob, gdzie id_producenta mniejsze niż 4 oraz id wyrobu większe niż 5
Podaj liczbę wszystkich rekordów z tabeli wyrob gdzie id wyrobu mniejsze niż 32 lub większe od 4
6.
Wybierz id oraz nazwę z tabeli market gdzie nazwa marketu zaczyna się na „G”
Podaj liczbę rekordów z tabeli sklep, gdzie id sklepu > 4 oraz id_marketu < 4
Wybierz nazwę oraz telefon z tabeli sklep, gdzie nazwa kończy się na „r”
7.
Wybierz rekordy z tabeli pracownik gdzie rok urodzenia wynosi 1977 a imię pracownika kończy się na „a”
Podaj sumę kwot wypłat z tabeli wyplata dla pracownika o id równym 5
Wybierz id z tabeli wyplata, gdzie kwota jest pomiędzy 2200 a 2400.
8.
Wybierz id oraz login z tabeli uzytkownik, gdzie login kończy się na „ek”
Wybierz rekordy z tabeli log oraz dla każdego podaj czas pracy (różnicę czasu między polem koniec a start (TIMEDIFF(k,s))
Podaj liczbę rekordów z tabeli log gdzie id_uzytkownika jest 1 lub 4 (... BETWEEN x AND y)
9.
Podaj liczbę rekordów z tabeli firma, dla których długość pola nazwa (liczb znaków) jest większa niż 13
Wybierz wszystkie rekordy z tabeli projekt, które zostały rozpoczęte (pole rozpoczeto nie jest NULL)
Wybierz id oraz zakonczono z tabeli projekt, gdzie id_firmy wynosi 1 oraz zakonczono wynosi NULL
10.
Wybierz wszystkie rekordy z tabeli pojazd dla których kolor zawiera słowo „blue”
Podaj liczbę rekordów z tabeli pojazd dla których producent zaczyna się na literę „F”
Wybierz rekordy z tabeli zdarzenie, dla których rok z daty (YEAR(data)) jest 2008 oraz id_pojazdu większe niż 7
Zapisz treść wpisanych (trzech kwerend) do pliku cw_1_4.sql w swoim katalogu. Zamknij program.
Michał Głębowski
1
1.5
Kwerendy łączące
Wykonanie ćwiczenia wymaga odpowiednio wykonanych ćwiczeń 1.3 oraz 1.4.
1.
Uruchom i zaloguj się do programu MySQL Query Browser.
2.
Pokaż wszystkie rekordy z drugiej tabeli podstawiając powiązane pole (np. nazwa) z pierwszej tabeli.
Przykład – pomoc do punktu c)
jeśli:
tabela A: pola (id, produkt, cena),
tabela B: pola (id, klient, id_produktu, ilosc).
Aby wyświetlić dane z tabeli B dodając pole nazwy produktu z tabeli A należy wpisać:
SELECT B.*, A.produkt FROM B
→ wybierz wszystkie pola z tabeli B oraz pole produkt z tabeli A,
LEFT JOIN A ON A.id = B.id_produktu
→ połącz tabelę A dla równych pól A.id = B.id_produktu
tabela A
id INT
produkt VARCHAR(20)
cena FLOAT
tabela B
id INT
klient VARCHAR(24)
id_produktu INT
ilosc INT
Michał Głębowski
1
2
Ćwiczenia z (x)html
2.1
Edytor kED, pierwszy plik (x)html
2.1.1 Otwórz program kED
2.1.2 z menu Plik wybierz Nowy z szablonu
2.1.3 z podmenu wybierz XHTML 1.0 Transitional (na ekranie pojawi się
gotowy do uzupełnienia plik)
2.1.4 usuń linijkę z komentarzem 
2.1.5 wpisz w to miejsce swoje imię i nazwisko
2.1.6 zapisz plik w swoim katalogu w podkatalogu html jako cwiczenie1.html
2.1.7
2.2
obejrzyj zapisany plik w przeglądarce www klikając na nim dwukrotnie
Jak sobie ułatwić pracę podczas tworzenia strony (szablon)
2.2.1 otwórz program PSPad
2.2.2 zamknij domyślnie otwarte dokumenty (Plik → Zamknij wszystkie dokumenty) (lub 2-klik na każdej zakładce)
2.2.3 utwórz nowy plik typu XHTML (Plik → Nowy → XHTML) (lub ikonka Nowy → z listy wyboru: XHTML)
▪
na ekranie pojawi się plik wypełniony elementami struktury kodu XHTML
2.2.4 pobierz z sieci plik i zapisz go w swoim katalogu:
▪
http://glebowski.pl/im/pliki/cw2_wsad.txt
2.2.5 w PSPad wstaw treść pobranego pliku między znaczniki <body>
▪
postaw kursor między znacznikami <body> a </body>
▪
z menu Edycja → Dodatkowo → Wstaw z pliku, wybierz pobrany plik cw2_wsad.txt (zmień
rozszerzenie na Wszystkie pliki w okienku dialogowym wyboru pliku).
2.2.6 zapisz plik w swoim katalogu jako cwiczenie2.html
2.2.7
otwórz plik w przeglądarce Firefox (np. przeciągając plik z eksploratora na okienko otwartej przeglądarki)
▪
2.3
zwróć uwagę na odmienny sposób przełamania tekstu (klawisz enter nie daje przełamania)
Proste formatowanie treści w pliku html
W zadaniu nadasz wcześniej stworzonej treści pewne elementy formatowania.
2.3.1 otwórz PSPad, wczytaj przygotowany w ćw. 2.2 plik cwiczenie2.html
2.3.2 wstaw treść w znaczniki akapitów <p> oraz </p> następująco:
<p>Oto treść... ...w przeglądarce.</p>
<p>W ćwiczeniu... ...rozdzielającą.</p>
<p>W tym zdaniu... ...akapicie.</p>
<p>Poniższe zdania... ...akapitu.</p>
2.3.3 zapisz stronę jako cwiczenie3.html, otwórz przeglądarkę firefox i zobacz obecny wygląd strony
•
uwaga: aby zobaczyć stronę w przeglądarce, należy przeciągnąć plik na okno otwartej przeglądarki
•
jeżeli firefox jest domyślną przeglądarką, to wystarczy dwuklik na pliku html (który otworzy przeglądarkę)
•
inną opcją jest wpisanie lokalnego adresu do pliku, np.:
◦
file:///D:/Moje dokumenty/Papiernictwo/IM/tmp/html/cwiczenie3.html
2.3.4 sformatuj kolejne elementy:
<h1>To jest nagłówek pierwszego poziomu</h1>
<h2>Oto nagłówek poziomu drugiego</h2>
W tym zdaniu proszę pogrubić <b>te wyrazy</b>.
<i>Proszę pochylić całe to zdanie.</i>
<u>To zdanie niech zostanie podkreślone.</u>
2.3.5 sformatuj dalsze elementy, zwróć uwagę na kolejność znaczników w zagnieżdżeniach:
<b>To zdanie należy pogrubić, ale dodatkowo <u>pochylić te wyrazy</u>.</b>
W tym zdaniu <u>od tego miejsca do końca podkreślić, <i>a to pochylić</i></u>.
<i>Całe zdanie pochylić od początku do końca, <u>to (i dalej) podkreślić, <b>a to dodatkowo pogrubić</b>.</u></i>
<hr />Powyżej wstaw znacznik linii poziomej.
Michał Głębowski
1
2.3.6 zapisz stronę (^s), odśwież okienko przeglądarki (F5) lub (Widok → Odśwież)
2.3.7
z menu HTML wybierz Sprawdź kod HTML, jeżeli nie popełniłeś błędu na dole programu PSPad pojawi się
komunikat:
•
Found 0 errors 0 warnings
2.3.8 w razie wystąpienia błędów poszukaj ich, popraw, i powróć do punktu 2.3.7 .
2.3.9 zapisz stronę (^s), odśwież okienko przeglądarki (F5) lub (Widok → Odśwież)
2.4
Automatyczne uzupełnienie pliku html o brakujące elementy xhtml
2.4.1 otwórz program PSPad, utwórz nowy plik tekstowy (Menu Plik → Nowy → TXT file)
2.4.2 zapisz nowy (pusty) plik jako cwiczenie4.html
2.4.3 wpisz w pliku znacznik: <html>
2.4.4 pozwól uzupełnić pozostałe elementy programowi:
•
menu Widok → Zmień składnię → XHTML (aby poinformować program, że jest to plik XHTML)
•
menu HTML → TiDy → Tidy Clean document – no wrap (aby automatycznie dodać brakujące el.)
▪
2.4.7
2.5
▪
▪
rozszerzenie na Wszystkie pliki w okienku dialogowym wyboru pliku)
zapisz plik, otwórz plik w przeglądarce Firefox
Listy i tabele
W zadaniu nadasz wcześniej stworzonej treści pewne elementy formatowania poprzez dodanie znaczników.
2.5.1 otwórz program PSPad, wczytaj przygotowany w ćw. 2.4 plik cwiczenie4.html
2.5.2 utwórz listę nieuporządkowaną (punktory) w tym celu dopisz znaczniki:
<ul>
<li>punkt pierwszy</li>
<li>punkt kolejny</li>
<li>następny</li>
<li>i ostatni</li>
</ul>
2.5.3 utwórz listę wypunktowaną (uporządkowaną), w tym celu dopisz znaczniki:
<ol>
<li>pozycja pierwsza</li>
<li>pozycja druga</li>
<li>pozycja trzecia</li>
<li>pozycja czwarta</li>
<li>pozycja piąta</li>
</ol>
2.5.4 utwórz tabelę
<table>
<tr>
<td>kolumna 1, wiersz 1</td>
</tr><tr>
</tr><tr>
</tr>
</table>
2.5.5 dodaj znaczniki nowego wiersza (przełamanie wiersza)
W tym wierszu nastąpi przełamanie tekstu do nowego wiersza <br />w tym miejscu oraz <br />w tym miejscu.
2.5.6 Zapisz plik, zobacz jego wygląd w przeglądarce.
Michał Głębowski
1
2.6
Kodowanie polskich znaków
2.6.1 otwórz w programie PSPad plik cwiczenie4.html
2.6.2 dopisz do pliku w kolejnej linii po znaczniku otwierającym treść: <body> następujący paragraf:
<p>Zazółcić gęślą jaźń</p>
2.6.3 zapisz plik i otwórz go w przeglądarce firefox
2.6.4 sprawdź, czy polskie znaki są prawidłowo wyświetlane
2.6.5 jeśli nie – dopisz w części <head> następującą linię definiującą kodowanie polskich znaków:
<meta http-equiv="content-type" content="text/html; charset=windows-1250" />
2.6.6 zapisz plik, odśwież widok w przeglądarce
2.7
Ćwiczenie 7 – listy zagnieżdżone
2.7.1
otwórz program PSPad
2.7.2
utwórz nowy plik typu XHTML (Plik → Nowy → XHTML) (lub ikonka Nowy → z listy wyboru: XHTML)
2.7.3
pobierz z sieci plik i zapisz go w swoim katalogu:
2.7.4
w PSPad wstaw treść pobranego pliku między znaczniki <body>
▪
▪
Postaw kursor między znacznikami <body> a </body>
▪
Z menu Edycja → Dodatkowo → Wstaw z pliku, wybierz pobrany plik cw7_wsad.txt (zmień
2.7.5
zapisz plik jako cwiczenie7.html, otwórz plik w przeglądarce Firefox
2.7.6
wstaw znaczniki list w następujący sposób:
<h1>Główni producenci ziemniaków na świecie w roku 2006 (miliony ton)</h1>
<ol>
<li> Azja
<ul>
<li>Chiny (70)</li>
<li>Rosja (39)</li>
<li>Indie (24)</li>
</ul>
</li>
<li> Ameryka Płn.
<ul>
<li>USA (20)</li>
</ul>
</li>
<li> Europa
<ul>
<li>Ukraina (19)</li>
<li>Niemcy (10)</li>
<li>Polska (9)</li>
<li>Belgia (8)</li>
<li>Holandia (7)</li>
<li>Francja (6)</li>
</ul>
</li>
</ol>
2.7.7
2.8
Zapisz plik, otwórz plik w przeglądarce Firefox.
Ćwiczenie sprawdzające
▪
na ekranie pojawi się plik wypełniony elementami struktury kodu XHTML
▪
▪
▪
rozszerzenie na „Wszystkie pliki” w okienku dialogowym wyboru pliku).
2.8.5 podziel tekst na 3 akapity, i sformatuj, jak poniżej
▪
Pierwszy napis HTML (jak i dwa następne nagłówki) ma być nagłówkiem H1
▪
dolna tabela ma się zaczynać: <table border=”2”> .....
Michał Głębowski
1
2.8.6 sprawdź poprawność dokumentu (HTML → Sprawdź kod HTML), w razie błędów – popraw treść
2.8.7
zapisz dokument jako cwiczenie8.html
Michał Głębowski
1
2.9
Kolory, rozmiary i kroje czcionek
▪
▪
▪
2.9.5 zapisz dokument jako cwiczenie9.html, zobacz jego wygląd w przeglądarce
2.9.6 nadaj formatowanie jak poniżej
<font size="1" color="red" face="arial">Oto czerwony tekst rozmiar 1 o kroju Arial.</font><br />
<font size="2" color="green" face="courier">Oto zielony tekst rozmiar 2 o kroju Courier.</font><br />
<font size="3" color="blue" face="times">Oto niebieski tekst rozmiar 3 o kroju Times.</font><br />
<font size="4" color="maroon" face="georgia">Oto kasztanowy tekst rozmiar 4 o kroju Georgia.</font><br />
<font size="5" color="olive" face="helvetica">Oto oliwkowy tekst rozmiar 5 o kroju Helvetica.</font><br />
<font size="6" color="navy" face="trebuchet ms">Oto morski tekst rozmiar 6 o kroju Trebuchet MS.</font><br />
<font size="7" color="purple" face="impact">Oto purpurowy tekst rozmiar 7 o kroju Impact.</font><br />
<font size="6" color="teal" face="comic sans ms">Oto zielono-niebieski tekst rozmiar 6 o kroju Comic Sans MS.</font><br />
<font size="5" color="silver" face="verdana">Oto srebrny tekst rozmiar 5 o kroju Verdana.</font><br />
<font size="4" color="gray" face="sans-serif">Oto szary tekst rozmiar 4 o kroju Sans-Serif.</font><br />
<font size="3" color="lime" face="book antiqua">Oto limonkowy tekst rozmiar 3 o kroju Book Antiqua.</font><br />
<font size="2" color="yellow" face="cursive">Oto żółty tekst rozmiar 2 o kroju Cursive.</font><br />
<font size="3" color="fuchsia" face="britannic bold">Oto fuksjowy tekst rozmiar 3 o kroju Britannic bold.</font><br />
<font size="5" color="aqua" face="brush script mt">Oto wodny tekst rozmiar 5 o kroju Brush Script MT.</font><br />
2.9.1 zapisz dokument jako, sprawdź poprawność (HTML → Sprawdź ...), zobacz jego wygląd w przeglądarce
2.10 Odsyłacze, obrazki
2.10.3 zapisz dokument jako cwiczenie10.html, zobacz jego wygląd w przeglądarce
2.10.4 w części <body> wstaw następującą treść
<img src="http://www.w3.org/Icons/w3c_main.png" alt="przykład" title="przykład" />
2.10.5 zapisz dokument, zobacz jego wygląd w przeglądarce
▪
http://glebowski.pl/im/pliki/666.png
2.10.7 w części <body> dopisz następującą treść
<br />
<img src="666.png" alt="wykres" title="wykres" />
2.10.9 dopisz kolejną linię (ogranicz szerokość rysunku – pomniejsz go do danej szerokości):
<br />
<img src="666.png" width=”256” />
2.10.11 dopisz treść:
<a href="http://w3.org/">przejdź do w3c</a>
2.10.12 zapisz dokument, zobacz jego wygląd w przeglądarce, kliknij na utworzonym odsyłaczu
2.10.13 powróć do poprzedniej strony (przycisk „do tyłu” w przeglądarce)
2.10.14 dopisz treść:
<a href="http://w3.org/">
<img src="http://www.w3.org/Icons/w3c_main.png" alt="logo" title="do w3c!"/>
</a>
2.10.15 zapisz dokument, zobacz jego wygląd w przeglądarce, kliknij na utworzonym odsyłaczu
2.10.16 najedź myszką na obrazek na dole, zobacz po chwili tytuł w podpowiedzi, wciśnij na obrazek
2.10.17 zamknij PSPad
Michał Głębowski
1
2.11 Plik (x)HTML „od zera”
2.11.1 otwórz program notatnik (Start → Programy → Akcesoria → Notatnik)
2.11.2 wpisz w notatniku ogólny schemat pliku html:
2.11.3
<html>
<head>
</head>
<body>
</body>
</html>
2.11.4 zapisz plik w swoim katalogu html jako cwiczenie11.html, zamknij notatnik
2.11.5 otwórz PSPad, wczytaj zapisany plik cwiczenie11.html
2.11.6 zobacz wygląd strony w przeglądarce Firefox (powinna pojawić się pusta strona)
2.11.7 utwórz tabelę składającą się z dwóch wierszy po dwie komórki
2.11.8 ustaw grubość ramki tabeli na 2 (atrybut: border=”2”)
2.11.9 w pierwszym wierszu w pierwszej komórce wpisz: Przykładowa tabela
2.11.10 w pierwszym wierszu w drugiej komórce utwórz listę numerowaną (<ol>...):
▪
1. HTML
▪
2. CSS
▪
3. JavaScript
2.11.11 w drugim wierszu, w pierwszej komórce wstaw obrazek z adresu: http://pomozmysobie.pl/img/go-home.png
2.11.12 w drugim wierszu, w drugiej komórce:
▪
▪
wstaw odsyłacz do adresu: http://pomozmysobie.pl/img/go-home.png
odsyłacz ma być podpisany jako obrazek
2.11.13 zapisz plik, sprawdź jego poprawność (HTML → Sprawdź kod HTML),
2.11.14 w razie wystąpienia błędów ponów punkt 2.11.13
2.11.15 zamknij plik PSPad.
2.12 Wyrównanie akapitów, kolorowanie tekstu elementów
2.12.1 otwórz plik PSPad, otwórz plik z ćwiczenia 2.3 (cwiczenie3.html),
2.12.2 zapisz ten plik jako cwiczenie12.html, wyświetl plik w przeglądarce Firefox
2.12.3 zmodyfikuj plik nadając kolejnym czterem akapitom atrybuty (akapit: tekst między znacznikami <p> i </p>)
▪
pierwszy akapit: <p align=”center”>...
▪
drugi akapit: <p align=”left”>...
▪
trzeci akapit: <p align=”right”>...
▪
czwarty akapit: <p align=”justify”>...
2.12.4 sprawdź poprawność pliku, zapisz plik, zobacz plik w przeglądarce Firefox
2.12.5 zmodyfikuj analogicznie nagłówki w pliku:
▪
<h1 align=”center”>...
▪
<h2 align=”left”>...
2.12.6 zmień kolor pierwszego nagłówka na zielony (<h1... <font color=”green”>...)
2.12.7 zmień kolor drugiego nagłówka na niebieski (<h2... <font color=”blue”>...)
2.12.8 zmień kolor pierwszego akapitu na czerwony (<p... <font color=”red”>...)
2.12.9 zmień kolor dolnej linii poziomej na fioletowy (<hr color="magenta" />)
2.13 Ćwiczenie sprawdzające (2)
2.13.1 otwórz plik PSPad, utwórz plik html, który będzie wyglądał jak przedstawiono poniżej
2.13.2 sprawdź poprawność, zapisz ten plik jako cwiczenie13.html, wyświetl plik w przeglądarce Firefox
Michał Głębowski
1
2.14 Jak wyświetlać znaki zarezerwowane oraz inne znaki specjalne?
2.14.1 otwórz plik PSPad, utwórz nowy plik typu XHTML (Plik → Nowy → XHTML)
▪
znaki < > są w kodzie html zarezerwowane dla znaczników, aby je wyświetlić należy w kodzie wpisać ich
odpowiedniki (skróty)
▪
znak < (mniejszy niż, ang. less than) <
▪
znak > (większy niż, ang. greater than) >
▪
wpisz oba znaki w pliku html a między nimi wpisz wyraz tag
2.14.2 sprawdź poprawność, zapisz ten plik jako cwiczenie14.html, wyświetl plik w przeglądarce Firefox
2.15 Automatyczne formatowanie i kompresja pliku html
2.15.1 otwórz plik PSPad
▪
http://glebowski.pl/im/pliki/cwiczenie15.html
2.15.3 zauważ, że plik nie został sformatowny (tzn. nie popsiada wcięć)
2.15.4 wybierz HTML → Kompresuj kod HTML, zobacz zmianę kodu
2.15.5 wybierz HTML → Formatuj kod HTML, zobacz zmianę kodu
2.15.6 zapisz plik, zamknij PSPad
Michał Głębowski
1
2.16 Ćwiczenie sprawdzające (3) – html „od zera”
2.16.1 otwórz PSPad, utwórz plik html zawierający treść jak na poniższym rysunku
2.16.2 aby nie musieć wpisywać treści strony, możesz pobrać plik tekstowy z adresu:
▪
http://glebowski.pl/im/pliki/sprawdzian1_wsad.txt
2.16.3 sprawdź poprawność pliku html, zapisz pod nazwą sprawdzian1.html, porównaj plik w przeglądarce.
treść umieszczona w tabeli zawierającej
jeden wiersz i dwie komórki
adres rysunku:
http://i.wp.pl/a/i/super_sport/wp2.gif
dwa nagłówki
pierwszego poziomu
tytuł strony
adres odsyłacza:
index.html
dwa akapity,
górny pogrubiony
cztery akapity, górny
pogrubiony i czerwony
cytat kursywą
2.17 Tabele – zaawansowane – łączenie komórek
2.17.2 utwórz tabele jak na rysunku
▪
grubość ramki ustal atrybutem border=”2”
▪
napisy nad tabelami wykonano nagłówkiem 3
▪
łączenie wierszy: rowspan=”x”
▪
łączenie komórek: colspan=”x”
2.17.3 sprawdź poprawność kodu, zapisz wynik jako cwiczenie17.html
2.17.4 zobacz wynik w przeglądarce Firefox, zamknij program PSPad
akapit wyrównany
do prawej
Michał Głębowski
1
2.18 Tabele – łączenie komórek, komórki nagłówki
2.18.2 utwórz tabele jak na rysunku
▪
grubość ramek ustal atrybutem border=”1”
▪
tworząc komórki zacienione na rysunku użyj znacznika <th> zamiast <td>
2.18.3 aby zacieniować komórki <th> w całym pliku, w części nagłówkowej pliku html (w
znaczniku <head>) dodaj linijki
<style>
th {background: #abc}
</style>
2.18.4 sprawdź poprawność kodu, zapisz wynik jako cwiczenie18.html
2.18.5 zobacz wynik w przeglądarce Firefox, zamknij program PSPad
2.19 Znacznik <pre> - zachowanie białych znaków w tekście
▪
▪
▪
2.19.5 otocz wstawiony tekst znacznikiem <pre> (ang. preformatted – sformatowany)
2.19.6 wstaw jeszcze raz ten sam tekst, tym razem otocz go znacznikiem akapitu (<p>).
2.19.7 sprawdź poprawność dokumentu, zapisz dokument jako cwiczenie19.html
2.19.8 zobacz jego wygląd w przeglądarce, porównaj różnice przedstawienia tekstu w obu znacznikach (<pre> i <p>)
2.20 Style – dekorowanie gotowego dokumentu
▪
http://glebowski.pl/im/pliki/cwiczenie20_wsad.html
2.20.2 otwórz ten plik w PSPad, zapisz ten plik jako cwiczenie20.html,
2.20.3 wyświetl plik w przeglądarce Firefox
2.20.4 nanieś w pliku następujące zmiany (nadaj znacznikom style)
▪
do znacznika <body> dopisz:
<body style="margin-top:4%; margin-left:15%; margin-right:15%;
width:70%; background:silver;
font-family:Trebuchet MS; font-size:80%">
▪
do pozostałych znaczników dopisz style:
<h1 style="color:#226688;text-decoration:underline">...
<hr style="width:50%; color:white"/>
<h2 style="color:#226688">...
<p style="text-align:justify; color:#882266">Przyłączenie...
<p style="text-align:justify">Typowe...
<p style="text-align:justify">Aby...
<hr style="width:50%; color:green" />
<hr style="width:60%; color:blue" />
<hr style="width:70%; color:black" />
2.20.5 sprawdź poprawność pliku, zapisz plik, wyświetl plik w przeglądarce Firefox
Michał Głębowski
1
2.21 Style – operacje na tekście
2.21.2 utwórz nowy plik typu XHTML (Plik → Nowy → XHTML)
2.21.3 wstaw następującą treść do pliku
<p style="">Przykład zastosowania różnych styli do tej samej treści</p>
2.21.4 skopiuj wpisaną treść 11 razy do kolejnych wierszy
2.21.5 zapisz plik jako cwiczenie21.html, zobacz w przeglądarce Firefox
2.21.6 nadaj następujące style do kolejnych akapitów (od pierwszego akapitu)
<p
<p
<p
<p
<p
<p
<p
<p
<p
<p
<p
style="font-size: 120%">...
style="font-weight: bolder">...
style="font-family: garamond">...
style="font-variant: small-caps">...
style="font: italic bold 20px arial, sans-serif">...
style="text-decoration: underline">...
style="text-decoration: overline">...
style="text-decoration: line-through">...
style="text-transform: uppercase">...
style="text-transform: capitalize">...
style="text-transform: lowercase">...
2.22 Style – operacje na akapitach
2.22.2 utwórz nowy plik typu XHTML (Plik → Nowy → XHTML)
2.22.3 wstaw następującą treść do pliku
<p style="">
Niniejsze akapity zostaną sformatowane z zastosowaniem
przeróżnych stylów umieszczonych w atrybucie <em>style</em>.
Postaramy się zmienić kolory, obramowanie, marginesy, wyrównanie
i inne elementy akapitu. Każdy z akapitów będzie miał inny wygląd.
Zapraszamy do pracy.
</p>
2.22.4 skopiuj wpisaną treść 4 razy do kolejnych wierszy
2.22.5 zapisz plik jako cwiczenie22.html, zobacz w przeglądarce Firefox
2.22.6 nadaj następujące style do kolejnych akapitów (od drugiego akapitu)
<p style="font-size:120%; font-family:garamond; color:blue; background:papayawhip;
padding:1em">...
<p style="font-size:120%; font-family:verdana; color:green;
background:lightsteelblue; margin:1em">...
<p style="font-size:80%; font-family:Courier New; color:brown; background:darkgray;
border:1px solid black">...
<p style="font-size:120%; text-transform:capitalize; font-family:Impact;
color:dimgray; background:lavender; border:2px dotted blue; padding:2em">...
2.23 Edytor HTML on-line
2.23.1 otwórz program PSPad, otwórz w nim zapisany w poprzednim ćwiczeniu plik cwiczenie22.html
2.23.2 zaznacz cały tekst i skopiuj go do schowka (np. ^C lub Edycja → Kopiuj)
2.23.3 otwórz przeglądarkę Firefox, otwórz adres: http://htmledit.squarefree.com/
2.23.4 wklej w górnej części zawartość schowka (np. ^V), w dolnej części zobaczysz wynik
2.23.5 zmodyfikuj wklejony kod (np. usuń wszystko poza akapitami (<p>)), zmodyfikuj parametry styli
2.23.6 obserwuj zmiany pojawiające się na bieżąco w dolnej części strony. Zamknij Firefox i PSPad.
Michał Głębowski
1
2.24 Przeniesienie styli do zewnętrznego pliku
Twoim zadaniem jest usunięcie z pliku html wszystkich styli i przeniesienie ich do zewnętrznego pliku CSS.
2.24.1 otwórz program PSPad, otwórz utworzony przez siebie plik z ćwiczenia 2.22 (cwiczenie22.html)
2.24.2 utwórz plik w formacie CSS w kolejnej zakładce w programie PSPad
▪
menu Plik → Nowy → Cascading Style Sheet
2.24.3 Przenieś wszystkie style z pliku html do pliku CSS, w ten sposób w pliku CSS zostaną utworzone cztery style
(czterech akapitów od drugiego do piątego), nadaj im nazwy kolejne: par1..par4
2.24.4 Usuń style z pliku html, zamieniając je na atrybut class zawierający nazwę stylu
Pliki CSS oraz HTML mają mieć podobną postać do (przykład):
fragment przykładowego pliku CSS
p.par1 {
font-size:120%;
font-family:garamond;
color:blue;
background:papayawhip;
padding:1em
}
p.par2 {
font-size:120%;
font-family:verdana;
itd....
fragment zmodyfikowanego pliku html
<p class="par1">
Niniejsze akapity zostaną sforma...
</p>
<p class="par2">
Niniejsze akapity zostaną sforma...
2.24.5 Zapisz plik CSS jako style24.css
2.24.6 Aby podłączyć nowy plik CSS do pliku HTML, dodaj w części HEAD pliku HTML odwołanie do pliku CSS
<link rel="stylesheet" href="style24.css" type="text/css" />
2.24.7 Zapisz plik HTML jako cwiczenie24.html
2.24.8 Otwórz zapisany plik html w przeglądarce Firefox, sprawdź poprawność wykonania zadania.
2.24.9 Zamknij PSPad.
2.25 Przeniesienie styli do zewnętrznego pliku
Twoim zadaniem jest usunięcie z pliku html wszystkich stylów i dopisanie ich do zewnętrznego pliku CSS.
2.25.1 otwórz program PSPad, otwórz utworzony przez siebie plik z ćwiczenia 2.21 (cwiczenie21.html)
2.25.2 otwórz plik CSS utworzony w poprzednim zadaniu (style24.css) w kolejnej zakładce w programie PSPad
2.25.3 Przenieś (dopisz) wszystkie style z pliku html do pliku CSS, nadaj im nazwy kolejne: f1..f11
2.25.4 Usuń style z pliku html, zamieniając je na atrybut class zawierający nazwę stylu
Pliki CSS oraz HTML mają mieć podobną postać do (przykład):
fragment przykładowego pliku CSS
..tutaj poprzednie style z pliku...
p.f1 { font-size:120%; }
p.f2 { font-weight:bolder;
itd....
fragment zmodyfikowanego pliku html
<p class="f1">Przykład zastosowania r...</p>
<p class="f2">Przykład zastosowania r...</p>
itd...
2.25.5 Zapisz plik CSS
2.25.6 Aby podłączyć plik stylów do pliku HTML, dodaj w części HEAD pliku HTML odwołanie do pliku CSS
2.25.7 Zapisz plik HTML jako cwiczenie25.html
2.25.8 Otwórz zapisany plik html w przeglądarce Firefox, sprawdź poprawność wykonania zadania. Zamknij PSPad.
2.26 Zadanie zaliczeniowe
Wykonaj witrynę html złożoną z 3 do 5 stron html.
•
strony mają być powiązane łączami (<a href=”...)
•
na każdej stronie ma znajdować się przynajmniej 1 (maks. 3) rysunek
•
przynajmniej na jednej ze stron ma znajdować się tabela
•
zastosuj paragrafy, oraz różne sposoby formatowania graficznego treści
•
wszystkie pliki powinny znajdować się w jednym katalogu
•
pliki mają być zgodne ze standardem xhtml (mają „przechodzić” walidację)
•
tematyka może być zbieżna z tematyką prezentacji wykonywanej na zaliczenie z programu OO Impress.
Michał Głębowski
1
2.27 Cztery pliki, cztery odsyłacze
W zadaniu wykorzystaj zamiast PSPad-a (dla odmiany) program kED.
2.27.1 Utwórz w swoim katalogu podkatalog czterypliki
2.27.2 w katalogu utworzysz cztery pliki html o nazwach jeden, dwa, trzy i cztery (wszystkie z rozszerzeniem html)
2.27.3 wszystkie pliki będą miały podobną treść za wyjątkiem:
▪
nagłówka (<h1>) i tytułu (<title>): każdy ma mieć takie jak jego nazwa (np. <h1>jeden</h1>)
▪
koloru tła strony (np. <body style=”background: silver”>)
▪
jeden: lavender, dwa: orange, trzy: skyblue, cztery: pink
2.27.4 pod nagłówkiem (<h1>) rozpoczynającym treść strony ma naleźć się linia pozioma
2.27.5 następnie ma pojawić się lista numerowana
2.27.6 każdy element listy ma zawierać odsyłacz do jednego z plików html
(np. <a href=”cztery.html”>cztery</a>)
2.27.7 Sprawdź poprawność wpisanego kodu, sprawdź jak działają utworzone strony w przeglądarce www
2.28 Grafiki z google w html
W zadaniu wykorzystaj zamiast PSPad-a (dla odmiany) program kED.
2.28.1 Pomnóż liczbę liter swojego imienia, razy liczbę liter swojego nazwiska
2.28.2 jeśli otrzymana wartość jest dwucyfrowa, zsumuj cyfry ze sobą, jeśli nadal jest dwucyfrowa, ponów sumowanie
2.28.3 na podstawie uzyskanej wartości w postaci cyfry, wybierz odpowiednie hasło z poniższej tabeli:
#
hasło
#
hasło
#
1
traktor
4
szkoła
7
hasło
wilk
2
wino
5
czosnek
8
kask
3
grzyb
6
wieża
9
papier
2.28.1 otwórz przeglądarkę www, otwórz stronę google (google.pl), wpisz uzyskane z tabeli hasło do wyszukiwarki,
wyszukaj grafiki reprezentujące dane hasło (przycisk grafika)
2.28.2 utwórz stronę html o nazwie grafiki.html
2.28.3 utwórz listę nienumerowaną zawierającą
▪
sześć wybranych grafik znalezionych na google oraz
▪
odsyłacze do stron zawierających je (uruchamiane po kliknięciu na nich)
przykład: <a href=”http://www.vatman.pl/”><img
src=”http://www.vatman.pl/pictures/czerpany/papier_kolorowy.jpg” alt=”” /></a>
2.28.4 zapisz plik, sprawdź poprawność działania w przeglądarce www
2.29 Wyszukiwanie informacji – populacja Polski
2.29.1 wyszukaj w internecie (poprzez google) danych populacji (liczby ludności) Polski w latach od ok. 1945 do dziś
2.29.2 umieść te dane na stronie populacja.html w postaci tabeli (utwórz nowy plik html)
2.29.3 pierwsza kolumna ma zawierać rok, druga liczbę ludności
▪
niech pierwsza kolumna tabeli zawiera komórki nagłówkowe (<th> zamiast <td>)
2.29.4 zmień tło strony na srebrne (silver), zmień wszystkie marginesy strony na 2em
2.29.5 zmień czcionkę strony na Tahoma
2.29.6 umieść pod tabelą odsyłacz(-e) do danych źródłowych
2.29.7 ponad tabelą umieść nagłówek Populacja Polski
2.29.8 znajdź w internecie aktualne godło Polski i umieść je również na stronie, umieść godło po prawej stronie
2.29.9 zobacz plik w przeglądarce, zamknij używany edytor html
Michał Głębowski
1
2.30 Style dla tabel, zdefiniowane w części nagłówkowej pliku html
2.30.1 otwórz program kED, utwórz nową stronę xHTML (menu Plik → Nowy z szablonu → XHTML 1.0 Transitional)
2.30.2 wpisz (w treści) poniższy kod tworzący tabelę (trzy kolumny, dwa wiersze)
<table>
<tr> <th>Droga</th> <th>Czas</th> <th>Prędkość</th> </tr>
<tr> <td>100 m</td> <td>12 s</td> <td>8,33 m/s</td> </tr>
<tr> <td>250 m</td> <td>30 s</td> <td>8,33 m/s</td> </tr>
</table>
2.30.3 zapisz plik jako cwiczenie30.html, zobacz plik w przeglądarce
2.30.4 w części nagłówkowej (<head>) pliku html dodaj następującą definicję stylów
▪
zmiana czcionki dla całej tabeli na: 1.2em verdana, zmiana koloru tła na: #eee
▪
szerokość komórek nagłówkowych (<th>)5em, tło: #ccc, rozciągnięcie: 1em, obwód: linia czarna ciągła, gr. 1px
▪
szerokość komórek z danymi: wyrównanie do środka, kolor niebieski, rozciągnięcie: 0,4em, obwód: linia srebrna
ciągła, gr. 1px
<style>
table { font: 1.2em verdana; background: #eee }
th {width: 5em; background: #ccc; padding: 1em; border: 1px solid black}
td {text-align: center; color: blue; padding: 0.4em; border: 1px solid silver}
</style>
2.30.5 zapisz plik, zobacz plik w przeglądarce, zamknij edytor kED
2.31 Znaki specjalne i symbole w html
2.31.2 umieść w treści nagłówek pierwszego poziomu o treści: Równanie
2.31.3 wpisz (w treści) poniższy kod tworzący wyrażenie przedstawiające równanie Darcy – Weisbacha
Δp = L / d · ρ · u² / 2
▪
wpisz wyrażenie: Δp = L / d ⋅ ρ ⋅ u<sup>2</sup> / 2
2.31.4 poniżej umieść nagłówek h2, z treścią karty
2.31.5 dopisz dalej w treści poniższy tekst: <br />&spades; &clubs; &hearts; &diams;<br />
2.31.6 dopisz w treści pogrubiony tekst: <br /><b>© 2009 IM</b>
2.31.7 zmień kolor tła na srebrny, a czcionki na zielony, wyrównanie do środka, w tym celu zmodyfikuj znacznik body:
<body style=”background: silver; color: green; text-align: center”>
2.31.8 zapisz plik jako cwiczenie31.html, zobacz plik w przeglądarce, zamknij edytor kED
2.31.9 więcej informacji znajdziesz wpisując w google: symbole html
2.32 Obwódki elementów html, tło strony
2.32.2 wpisz poniższe wiersze do treści pliku
<p style="border-left: solid 10px #ffaa00; padding: 15px;"><i>Przykład lewej obwódki</i></p>
<p style="border: dashed 5px #005588; padding: 10px; width: 20em;">obwódka paskowana</p>
<p style="border-bottom: dotted 3px #ffaa99; padding: 5px; width: 15em"><b>kropki</b></p>
<p style="border: double 10px #99aabb; padding: 5px; color: #19F">podwójne</p>
<p style="border: inset 10px #ffaa00; padding: 15px">wklęsłe</p>
<h1 style="border: groove 20px #885588; padding: 5px; font-size: 2em; width: 20%">groove!</h1>
2.32.4 przeanalizuj działanie poszczególnych właściwości stylów
2.32.5 dopisz do znacznika body następujący styl umieszczający jako tło obrazek z innej strony:
style=”background-image:url(http://pajacyk.pl/img/menu_tlo_m.jpg)”
2.32.6 zmień tytuł strony na ramki
2.32.7 zapisz plik, zobacz ponownie plik w przeglądarce, zamknij edytor kED
Michał Głębowski
1
2.33 Marginesy, rozcignięcia, obwódki – model ramkowy, ang. CSS Box-model
2.33.2 wpisz poniższe wiersze do treści pliku
<table>
<tr><td>
<tr><td>
<tr><td>
<tr><td>
<tr><td>
<tr><td>
<tr><td>
<tr><td>
<tr><td>
</table>
<p
<p
<p
<p
<p
<p
<p
<p
<p
style="">standard - bez dodatkowego stylu</p> </td></tr>
style="margin: 20px">margin: 20px</p> </td></tr>
style="padding: 20px">padding: 20px</p> </td></tr>
style="margin: 20px">margin: 20px</p> </td></tr>
style="margin: 20px; padding: 20px">margin: 20px; padding: 20px</p> </td></tr>
style="margin-left: 40px">margin-left: 40px</p> </td></tr>
style="padding-left: 40px">padding-left: 40px</p> </td></tr>
style="padding: 2em 0 1em 0">padding: 2em 0 1em 0</p> </td></tr>
style="margin: 4em 0 0 4em">padding: 4em 0 0 4em</p> </td></tr>
2.33.3 dopisz do części nagłówkowej (head) następujące style:
▪
treść w tabeli wyśrodkowana, szerokość tabeli 50% szerokości strony, granice
komórek mają być wspólne (border-collapse)
▪
każda komórka ma mieć obwódkę z linii ciągłej, grubość 4 piksele, kolor OrangeRed
▪
każdy akapit ma mieć kolor tła: LightSkyBlue, oraz obwódkę 2 piksele, MediumBlue
<style>
table {text-align: center; width: 50%; border-collapse:collapse}
td {border: 4px solid OrangeRed; background: Moccasin}
p {background: LightSkyBlue; border: 2px solid MediumBlue}
</style>
2.33.5 przeanalizuj działanie poszczególnych właściwości stylów
2.33.6 zmień tytuł strony na Marginesy, rozcignięcia, obwódki
2.33.7 zapisz plik, zobacz ponownie plik w przeglądarce, zamknij edytor kED
2.33.8 przejdź na stronę: http://www.somacon.com/p141.php aby poćwiczyć zachowanie przeglądarki dla różnych
parametrów modelu ramkowego.
2.34 Dziedziczenie właściwości (style)
Chcesz przedefiniować wygląd trzech tabel na stronie html, chcesz, aby wszystkie posiadały pewne wspólne elementy
formatowania, jednak każda z nich ma posiadać również pewne unikatowe style. W tym celu utworzysz specjalny
kaskadowy arkusz stylów (CSS).
▪
2.34.3 wstaw treść pobranego pliku między znaczniki <body>
2.34.5 zmodyfikuj plik, dołączając w części nagłówkowej odsyłacz do pliku CSS
2.34.6 utwórz plik stylów: style34.css, wpisz do niego następującą treść:
body {
background: darkgreen; color: gold; font: 0.9em Verdana; margin-left: 5%; }
table { background: darkblue
url(http://fc08.deviantart.com/fs37/f/2008/258/d/0/car_by_Hamsterfly.jpg);
border-collapse: collapse; text-align: center; }
td, th { padding: 0.8em border: 1px solid orangered; }
2.34.7 zapisz plik, zobacz plik html w przeglądarce
W celu rozróżnienia tabel kolorystycznie oraz wysunięcia każdej z nich, dopisz w pliku css klasy t1..t3:
.t1 { color: red; margin-left: 4em; }
.t2 { color: greenyellow; margin-left: 8em; }
.t3 { color: cyan; margin-left: 12em;}
2.34.8 dopisz w pliku html do każdego znacznika <table> odpowiednio po kolei: class=”t1” ... class=”t2”...
<table class="t1">
2.34.9 zapisz pliki, zobacz plik html w przeglądarce, zamknij program kED.

plik z ćwiczeniami - e

Transkrypt

Podobne dokumenty

GIMP 1. Gimp jest przeznaczony do tworzenia i przetwarzania

1. Jeden z kątów trójkąta ma miarę , drugi jest o 40 ∘ większy

Zaproszenie do składania ofert na wynajem nieruchomości