Mój ulubiony wykonawca muzyczny to Sting.
Sting naprawdę nazywa się Gordon Matthew Sumner i urodził się w 1951 roku w Newcastle.

15 11. Odszukaj zdjęcie w Internecie i wstaw na stronęOdszukaj w Internecie zdjęcie związane ze swoim ulubionym filmem. Zapisz je na dysku (Zapisz obraz jako) w tej samej lokalizacji, w której znajduje się edytowana strona HTML. Nadaj zapisywanemu plikowi przyjazną nazwę (np. siedem.jpg). W celu umieszczenia obrazu graficznego na stronie, należy w wybranym miejscu umieścić znacznik . Znacznik ten musi posiadać atrybut src, którego wartość wskazuje na plik źródłowy obrazu. Umieść zapisany uprzednio plik graficzny obok tytułu filmu, którego on dotyczy. Zdjęcie zostało wyświetlone w miejscu, w którym w treści strony został umieszczony znacznik . Rozszerzenie pliku ze zdjęciem jest automatycznie dodawane przez przeglądarkę i może być różne w zależności od formatu pliku. Najczęściej jest to .jpg lub .gif. Atrybut src znacznika pozwala wskazać plik, w którym znajduje się wstawiony obraz. W najprostszym przypadku jest to po prostu nazwa pliku graficznego. Jeśli plik znajduje się w innym folderze niż strona HTML, wówczas należy podać nazwę pliku wraz ze względną ścieżką dostępu (np. img/siedem.jpg). Rozmiar wyświetlanego obrazu graficznego można zmodyfikować za pomocą atrybutów width i height, których wartości wskazują odpowiednio szerokość i wysokość obrazu prezentowanego na stronie, np. width="300" height=”200”. Dowolny obraz może zostać także wykorzystany jako tło strony. W tym celu ścieżka dostępu do pliku graficznego powinna zostać wstawiona jako wartość atrybutu background w znaczniku .

16 12. Dodaj odnośnik do strony w InternecieOdszukaj w Internecie stronę poświęconą swojemu ulubionemu filmowi. Wstaw odnośnik do odnalezionej strony na edytowanej stronie w postaci tekstu ‘O filmie’. O filmie Na stronie pojawił się tekst ‘O filmie’ będący odnośnikiem, który po kliknięciu powoduje przejście do strony o adresie podanym jako atrybut href znacznika . Aby powrócić do poprzedniej strony użyj przycisku Wstecz przeglądarki. Wszystkie elementy znajdujące się między znacznikami i są prezentowane na stronie jako odnośnik. Spraw, aby zdjęcie było odnośnikiem.

17 13. Wstaw listę nienumerowanąW celu umieszczenia na stronie nienumerowanej listy elementów wykorzystuje się znaczniki

oraz
• .
  • Mały Książę
  • Imię róży
  • Wojna i pokój
  Zawartość każdej pary znaczników
• i
jest wyświetlana na stronie jako osobny element listy poprzedzony znakiem wypunktowania. Wszystkie elementy listy muszą być ujęte pomiędzy znaczniki
i
. Zastąp parę znaczników
i
znacznikami
i
. Jaki jest tego rezultat?

18 14. Określ sposób kodowania polskich znakówW celu poprawnego wyświetlania polskich znaków przez przeglądarkę, w nagłówku strony powinna znaleźć się informacja o sposobie ich kodowania. W tym celu należy umieścić w nim znacznik z odpowiednimi atrybutami. Zwróć uwagę, jak przeglądarka wyświetla polskie znaki po dodaniu informacji o kodowaniu znaków. Najważniejszym atrybutem znacznika jest atrybut content, w ramach którego definiuje się parametr charset określający standard kodowania znaków zastosowany na danej stronie. Zalecanym standardem kodowania polskich znaków jest międzynarodowy standard ISO , który został także przyjęty jako Polska Norma. Trzeba zwrócić uwagę, że zadeklarowany sposób kodowania znaków musi być zgodny z faktycznym sposobem kodowania znaków użytym w pliku. Sposób ten zwykle można określić podczas zapisywania pliku na dysku, korzystając z odpowiednich ustawień programu lub też jest on automatycznie ustawiany przez program na podstawie zawartości pliku.

19 15. Utwórz szkielet tabeliTabelę definiuje się w obrębie znaczników

oraz . Zapisz zmiany w pliku oraz wyświetl stronę w przeglądarce. Na stronie znajduje się tabela, która składa się z dwóch wierszy i dwóch kolumn. Tabela jest definiowana przy wykorzystaniu znaczników oraz . Tabela składa się z wierszy – znaczniki oraz – a każdy wiersz składa się z komórek – znaczniki oraz . Komórka może zawierać dowolne elementy języka HTML, np.: tekst, obrazki, akapity, formularze, zagnieżdżone tabele. W ramach definicji tabeli można określić grubość obramowania przez zastosowanie atrybutu border znacznika table – domyślnie obramowanie tabeli ma wartość 0 i dlatego jest niewidoczne.

20 16. Dodaj komórki nagłówkowe tabeliKomórki nagłówkowe tabeli definiuje się za pomocą znaczników oraz . Zapisz zmiany w pliku oraz odśwież stronę w przeglądarce. Tabela składa się z trzech wierszy, przy czym tekst pierwszego – nagłówkowego – jest napisany czcionką pogrubioną. Zdefiniowana tabela zawiera komórki nagłówkowe, które określają rodzaj informacji w określonych kolumnach. Dodatkowo w tabeli znajdują się dwa wiersze opisujące albumy artysty zgodnie z typem informacji podanym w komórkach nagłówkowych. Domyślnie tekst komórek nagłówkowych jest prezentowany czcionką pogrubioną. Stwórz analogiczną tabelę zawierającą informacje o albumach ulubionego zespołu.

21 17. Odszukaj zdjęcia albumów ulubionego zespołu i umieść je w komórkach tabeliOdszukaj zdjęcia okładek albumów ulubionego zespołu muzycznego, które zostały opisane w Twojej tabeli. Wpisz znacznik img w komórce tabeli. Zapisz zmiany w pliku oraz odśwież stronę w przeglądarce. Tabela zawiera dodatkową kolumnę Zdjęcie. W rezultacie w każdym wierszu opisującym określony album artysty znajduje się zdjęcie okładki. Komórka tabeli może zawierać dowolny znacznik języka HTML, nawet definicję kolejnej tabeli.

22 18. Połącz komórki tabeli w poziomieDo łączenia komórek w poziomie wykorzystywany jest atrybut colspan znacznika td. Zapisz zmiany w pliku oraz odśwież stronę w przeglądarce Pierwsza komórka ostatniego wiersza tabeli obejmuje dwie kolumny. Należy zwrócić uwagę, że w wyniku połączenia komórek, ostatni wiersz zawiera jedynie trzy komórki zamiast czterech (patrz: liczba znaczników td). Do łączenia komórek tabeli w poziomie stosowany jest atrybut colspan znacznika td. Wartość atrybutu colspan określa liczbę kolumn, które będą składały się na komórkę. Dodaj dodatkowy wiersz, którego komórka obejmuje 3 albo 4 kolumny.

Zdjęcie	Nazwa albumu	Rok wydania	Czas trwania
	Marcury Falling	1996	67 minut		Sacred Love	2003	72 minuty	Synchronicity		1983	55 minut

23 19. Połącz komórki tabeli w pionieZapisz zmiany w pliku oraz odśwież stronę w przeglądarce. W ostatniej kolumnie znajduje się komórka, która obejmuje dwa wiersze. Należy zwrócić uwagę, że w wyniku połączenia komórek, drugi wiersz zawiera jedynie cztery komórki zamiast pięciu (patrz: liczba znaczników td). Nie mylić z ostatnim wierszem, który również zawiera cztery komórki, ale to wynika z połączenia komórek w poziomie w tym wierszu. Do łączenia komórek tabeli w pionie stosowany jest atrybut rowspan znacznika td. Wartość atrybutu rowspan określa liczbę wierszy, które będą składały się na komórkę. Stwórz komórkę obejmującą wszystkie wiersze oprócz nagłówkowego, która zawiera imię i nazwisko artysty (nazwę zespołu) wymienionych albumów.

Zdjęcie	Nazwa albumu	Rok wydania	Czas trwania	Typ
	Marcury Falling	1996	67 minut	Album solowy		Sacred Love	2003	72 minuty	Synchronicity		1983	55 minut	Zespół The Police

24 20. Wyśrodkuj nazwę artysty i tabelęDo umieszczenie w określonym miejscu, w szczególności wyśrodkowania, na stronie kilku znaczników można zastosować znacznik div.

Zapisz zmiany w pliku oraz odśwież stronę w przeglądarce. Wszystkie informacje, które znajdują się wewnątrz znacznika div zostały wyśrodkowane. Znacznik div grupuje inne znaczniki w jeden blok pozwalając na ich wspólne formatowanie. W ten sposób nie tylko pozwala na proste określenie w jaki sposób mają być formatowane informacje, ale również pozwala na precyzyjne określenie, w którym miejscu na stronie mają się one znaleźć.

25 21. Połącz dwie strony odnośnikamiBibliografia Zapisz zmiany w pliku oraz odśwież stronę w przeglądarce. Na stronie pojawił się tekst ‘Bibliografia’ będący odnośnikiem, który po kliknięciu powoduje przejście do strony o adresie podanym jako atrybut href znacznika . Aby powrócić do poprzedniej strony użyj przycisku Wstecz przeglądarki. W przypadku tworzenia odnośników do stron lokalnych – znajdujących się na tym samym komputerze – adres strony docelowej składa się jedynie ze ścieżki względnej do tej strony. Jeśli strona docelowa znajduje się w tym samym katalogu, co strona główna, ścieżka względna to nazwa strony docelowej. Natomiast jeśli strona docelowa znajduje się w podkatalogu w stosunku do strony głównej, ścieżka względna obejmuje nazwy podkatalogów i nazwę strony docelowej. Powyższa uwaga dotyczy również dołączania zdjęć lokalnych do strony HTML. Stwórz odnośnik, który pozwala przejść ze strony z bibliografią na stronę z życiorysem.

26 24. a) Dodaj regułę CSS do formatowania określonego znacznikaTekst na stronach można formatować na kilka różnych sposobów. Po pierwsze niektóre znaczniki HTML powodują zmianę wielkości i położenia tekstu (np.

wyświetla tekst dużymi, pogrubionymi literami w centrum strony). Po drugie można stosować specjalny znacznik i w jego atrybutach ustalać czcionkę, wielkość i kolor tekstu. Po trzecie można zastosować tzw. CSS (Cascading Styles Sheets), czyli style w mniej więcej takiej formule w jakiej występują np. w Word’zie. Pierwsze podejście jest najstarszą metodą formatowania tekstu. Powstało wraz z HTML i oferowało bardzo skromne możliwości. Dziś używa się w zasadzie tylko najprostszych znaczników formatujących , , itp.

27 24. b) Dodaj regułę CSS do formatowania określonego znacznikaDruga metoda miała wspomóc budowanie ładnych stron WWW. Umożliwia definiowanie czcionki, wielkości tekstu i jego koloru. Jednak w tej chwili metoda ta jest zarzucana i ze względu na zgodność z XHTML, który nie obsługuje znacznika , sugeruje się, aby jej nie używać. Trzeci sposób oferuje zdecydowanie największe możliwości formatowania wyglądu stron WWW. Poza definiowaniem czcionek, wielkości i kolorów tekstu umożliwia on, np. podanie wielkości odstępu między liniami, marginesów przed i za paragrafem, kolorów obramowania, tła, stylu wypunktowania w listach nienumerowanych, itd. Najprostszym sposobem zastosowania stylu CSS jest umieszczenie jego definicji w ramach znacznika, którego ma on dotyczyć. Wykorzystywany jest do tego atrybut style:

Logo mojej strony

Zapisz zmiany w pliku oraz odśwież stronę w przeglądarce. Tekst ‘Logo mojej strony’ został zapisany zgodnie z definicją stylu kaskadowego, tzn: użyta czcionka pochodzi z rodziny FreeStyle Script, rozmiar czcionki 50px, kolor czcionki srebrny a tekst został wyśrodkowany. Definicja stylu kaskadowego składa się z par właściwość: wartość oddzielonych od siebie średnikiem. Elementy to np.: wielkość odstępu między liniami, marginesy przed i za paragrafem, kolor obramowania, tła, stylu wypunktowania w listach nienumerowanych. W powyższym przykładzie zastosowano styl wpisany w znacznik. Istnieje jednak możliwość definiowania znaczników osadzonych na stronie lub w zewnętrznych plikach. Szczegóły sposobów stosowania styli znajdują się w skrypcie.

28 Stwórz stronę o ulubionym zespole muzycznym muzycznym:- Witryna ma zawierać stronę główną oraz pięć podstron (Biografia, Skład zespołu, Trasa koncertowa, Galeria, Przeboje). - Na każdej podstronie powinno znajdować się menu w formie tabelki, w której będą odnośniki do innych podstron. Menu umieść na samej górze witryny. - Ustaw inny kolor tła dla każdej podstrony (). - Niech na każdej podstronie, w nagłówku (znacznik h1), znajduje się jej tytuł. Na stronie głównej utwórz trzy akapity z tekstem o nowościach w zespole. Oddziel je od siebie liniami poziomymi. Przed każdym akapitem podaj tytuł nowości np.”Wrześniowy koncert w Warszawie”. Tytuł przedstaw jako nagłówek (znacznik h3). Bibliografia: Utwórz przynajmniej siedem akapitów, w których podaj rok oraz wydarzenie. Pamiętaj, żeby wyróżnić datę od reszty tekstu za pomocą kursywy, pogrubienia i podkreślenia (podpowiedź: nie mieszaj znaczników). Niech data będzie wyżej niż reszta tekstu. Skład zespołu: Przedstaw każdego członka zespołu. Imię i nazwisko niech będzie nagłówkiem (znacznik h2). Pod nazwiskiem dopisz przynajmniej po dwa zdania o danej osobie. Po prawej stronie umieść zdjęcie o odpowiednich wymiarach. Trasa koncertowa: Za pomocą list nienumerycznych przedstaw przynajmniej trzy trasy koncertowe. Pamiętaj, żeby przed każdą trasą podać jej datę rozpoczęcia i zakończenia. A od kropek wypisz poszczególne miasta, które zostały odwiedzone w danej trasie. Galeria: Tu powinno znaleźć się przynajmniej dziesięć obrazków o rozmiarach 200px na 300px. Układ galerii jest dowolny. Przeboje: Wymień przynajmniej siedem najlepszych kawałków Twojego ulubionego zespołu. Nazwę utworu przedstaw jako nagłówek (znacznik h3). Pod spodem dopisz krótką informację np. o dacie powstania oraz nazwie płyty, na której znajduje się przebój. Niech nazwa utworu będzie dodatkowo hiperłączem, które po kliknięciu na tekst przekieruje na inna stronę związaną z tym konkretnym kawałkiem.

29 Stwórz stronę , która będzie wizytówką Twojej przyszłej firmy:- Witryna ma zawierać stronę główną oraz 5 podstron (O nas, Produkty, Cennik, Współpraca, Kontakt). - Na każdej podstronie powinno znajdować się menu w formie tabelki, w której będą odnośniki do innych podstron. Menu umieść na samej górze witryny. - Ustaw inny kolor tła dla każdej podstrony (). - Niech na każdej podstronie, w nagłówku (znacznik h1), znajduje się jej tytuł. Na stronie głównej podaj w akapicie krótka notatkę o tym, czym zajmuje się Twoja firma. Opisz krótko firmę oraz stronę, na której znajduje się właśnie internauta (może być on Twoim przyszły klientem – zachęć go do współpracy). Poleć coś konkretnego na Twojej stronie (np. cennik) i dodaj do tego linka w tekście. Stwórz przynajmniej dwa takie akapity i oddziel je liniami poziomymi. Pod akapitami dodaj zdjęcie związane z działalnością Twojej firmy. O nas: Utwórz przynajmniej pięć akapitów, które będą w szczegółowy sposób opisywały działalność Twojej firmy. Wymień, kto jest założycielem firmy, jaki jest cel tego co robisz, podaj ile oddziałów ma Twoja firma i w jakich miejscowościach itp… Po prawej stronie witryny dodaj przynajmniej dwa zdjęcia związane z działalnością Twojej firmy. Produkty: Za pomocą listy numerycznej wymień przynajmniej dziesięć oferowanych produktów. W przynajmniej trzech zdaniach opisz każdy produkt, a najważniejsze informacje wyszczególnij za pomocą pogrubionej czcionki i podkreślenia. Cennik: Za pomocą tabeli stwórz cennik na swojej stronie. Podaj nazwę produktu, cenę oraz cenę w promocji. Współpraca: W akapitach szczegółowo opisz warunki współpracy oraz dostępne promocje (wymyśl przynajmniej dwie promocje dla Twoich przyszłych klientów). Po prawej stronie dodaj zdjęcie. Kontakt: Podaj dane adresowe, , telefon, numer konta itp… Nie zapomnij o czytelnym rozmieszczeniu tych informacji.

30 Dziękujemy za uwagę!