Informatyka – szkoła gimnazjalna – Scholaris - © DC Edukacja Formatowanie treści oraz grafika w kodzie HTML Informatyka.

Prezentacja na temat: "Informatyka – szkoła gimnazjalna – Scholaris - © DC Edukacja Formatowanie treści oraz grafika w kodzie HTML Informatyka."— Zapis prezentacji:

1 Informatyka – szkoła gimnazjalna – Scholaris - © DC Edukacja Formatowanie treści oraz grafika w kodzie HTML Informatyka

2 Informatyka – szkoła gimnazjalna – Scholaris - © DC Edukacja Cele lekcji Podczas tej lekcji nauczysz się: –formatować akapity i czcionkę; –wstawiać grafikę; –przedstawiać informacje w formie list.

3 Informatyka – szkoła gimnazjalna – Scholaris - © DC Edukacja Przegląd zagadnień Dlaczego należy dbać o wygląd tworzonych stron. Zmiana domyślnego wyglądu szablonu strony. Formatowanie akapitów i określanie wyglądu czcionki. Listy wypunktowane i numerowane. Osadzanie rysunków na stronach HTML.

4 Informatyka – szkoła gimnazjalna – Scholaris - © DC Edukacja Dlaczego należy dbać o wygląd tworzonych stron Strona na jaką trafił Tomek zawiera wyłącznie tekst bez wyraźnego formatowania. Tekst ciągnie się przez wiele ekranów. Nawet jeśli są tu potrzebne informacje, Tomek ich nie znajdzie i jak większość użytkowników poszuka innych stron.

5 Informatyka – szkoła gimnazjalna – Scholaris - © DC Edukacja Dlaczego należy dbać o wygląd tworzonych stron Druga strona jest jeszcze gorsza. Strona w Budowie. Ktoś kiedyś ją zaczął, wiele napisał o czym strona będzie – przez co wyszukiwarki odnajdują ciekawe hasła – a strona nigdy nie została ukończona.

6 Informatyka – szkoła gimnazjalna – Scholaris - © DC Edukacja Dlaczego należy dbać o wygląd tworzonych stron Strony powinny wczytywać się możliwie szybko. Pomimo coraz szybszych łączy wiele stron jest czasami przeładowanych zbędnymi rysunkami czy animacjami. Jeśli w ciągu minuty strona nie zostanie wczytana, większość użytkowników poszuka kolejnej strony.

7 Informatyka – szkoła gimnazjalna – Scholaris - © DC Edukacja Dlaczego należy dbać o wygląd tworzonych stron Strona z dużą liczbą literówek i błędów także nie wzbudza uznania użytkowników.

8 Informatyka – szkoła gimnazjalna – Scholaris - © DC Edukacja Dlaczego należy dbać o wygląd tworzonych stron Wreszcie Tomek trafił na stronę, która posiada odpowiednią nawigację. Ważne terminy są wyróżnione, a grafika przyciąga do nich uwagę lub wyjaśnia zagadnienia interesujące Tomka. Tomek znalazł tu szukane informacje i prawdopodobnie będzie odwiedzał stronę w przyszłości.

9 Informatyka – szkoła gimnazjalna – Scholaris - © DC Edukacja Zmiana domyślnego wyglądu szablonu strony bgcolorKolor tła strony. backgroundRysunek tła strony. textDomyślny kolor tekstu. linkKolor łącza widocznego przy wejściu na stronę. vlinkKolor łącza już odwiedzonego. alinkKolor łącza w chwili klikania.

10 Informatyka – szkoła gimnazjalna – Scholaris - © DC Edukacja Formatowanie akapitów i określanie wyglądu czcionki Formatowanie pozwala zwiększyć czytelność tworzonej strony. Uzyskanie odpowiedniego zestawu kolorów, wielkości i grafik, nie jest jednak zadaniem łatwym.

11 Informatyka – szkoła gimnazjalna – Scholaris - © DC Edukacja Formatowanie czcionki Nagłówki. Indeksy. Atrybuty czcionki.

12 Informatyka – szkoła gimnazjalna – Scholaris - © DC Edukacja Nagłówki

13 Informatyka – szkoła gimnazjalna – Scholaris - © DC Edukacja Indeksy

14 Informatyka – szkoła gimnazjalna – Scholaris - © DC Edukacja Atrybuty czcionki

15 Informatyka – szkoła gimnazjalna – Scholaris - © DC Edukacja Listy wypunktowane i numerowane Można wyróżnić 5 typów list: Numerowane. Wypunktowane. Menu. Katalog. Lista definicji. Przedstawione zostaną tylko trzy najbardziej popularne typy.

16 Informatyka – szkoła gimnazjalna – Scholaris - © DC Edukacja Numerowane

17 Informatyka – szkoła gimnazjalna – Scholaris - © DC Edukacja Wypunktowane

18 Informatyka – szkoła gimnazjalna – Scholaris - © DC Edukacja Lista definicji

19 Informatyka – szkoła gimnazjalna – Scholaris - © DC Edukacja Lista zagnieżdżona

20 Informatyka – szkoła gimnazjalna – Scholaris - © DC Edukacja Osadzanie rysunków na stronach HTML Aby wstawić obraz na stronę korzystamy ze znacznika: Nazwa znacznika jest skrótem dwóch słów: Image (obraz) oraz Source (źródło). Grafiki wykorzystywane w zasobach internetowych to najczęściej pliki: GIF (Graphic Interchange Format). JPEG (Joint Photographic Experts Group). PNG (Portable Network Graphics).

21 Informatyka – szkoła gimnazjalna – Scholaris - © DC Edukacja Modyfikacja rozmiarów obrazka

22 Informatyka – szkoła gimnazjalna – Scholaris - © DC Edukacja Odstęp od obrazka

23 Informatyka – szkoła gimnazjalna – Scholaris - © DC Edukacja Położenie obrazka na stronie

24 Informatyka – szkoła gimnazjalna – Scholaris - © DC Edukacja Rysunek jako hiperłącze Aby z rysunku zrobić hiperłącze, wystarczy wstawić znacznik reprezentujący rysunek, zamiast tekstu w hiperłączu np. Wskazanie rysunku na stronie spowoduje, że wskaźnik myszy zmieni kształt, a na pasku stanu wyświetlony zostanie adres hiperłącza.

25 Informatyka – szkoła gimnazjalna – Scholaris - © DC Edukacja Podsumowanie Dlaczego należy dbać o wygląd tworzonych stron. Zmiana domyślnego wyglądu szablonu strony. Formatowanie akapitów i określanie wyglądu czcionki. Listy wypunktowane i numerowane. Osadzanie rysunków na stronach HTML.