Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

Podstawy HTML Tworzenie stron www 5 Joanna Brzozowska.

Podobne prezentacje


Prezentacja na temat: "Podstawy HTML Tworzenie stron www 5 Joanna Brzozowska."— Zapis prezentacji:

1 Podstawy HTML Tworzenie stron www 5 Joanna Brzozowska

2 Logo

3 Joanna Brzozowska Moduł E4 - podsumowanie Netykieta webmastera Użyteczność Staranność Bezbłędność Jakość MarketingMix Product Idea PricePlacePromotionPeople

4 Joanna Brzozowska Forum Asynchroniczność Napiszę, to już zostanie Kontakt z klientami Kontakt stały Odbiór poczty – codziennie …

5 Joanna Brzozowska Przebieg zajęć Edytory HTML Struktura dokumentu Odsyłacze Formatowanie dokumentu – CSS Grafika na stronie Tabele Programy pomocnicze

6 Joanna Brzozowska HTML Dokument WWW jest to plik, który zawiera informacje potrzebne przeglądarce do poprawnego wyświetlenia strony WWW. Do tworzenia tego typu dokumentów używa się języka HTML. HTML (Hyper Text Markup Language - Hipertekstowy Język Opisu Strony) jest zbiorem komend odpowiedzialnych za wygląd treści publikowanej na stronie internetowej. Jest raczej zbiorem specjalnych kodów (znaczników), które wbudowane w tekst powodują jego odpowiednie sformatowanie. Znaczniki HTML służą do dwóch celów. Po pierwsze: określają strukturę dokumentów. Po drugie - określają odsyłacze do innych dokumentów HTML lub do istotnych części tego samego dokumentu. Oprócz tego są używane do określenia ważnych fragmentów tych dokumentów.

7 Joanna Brzozowska Edytor plików HTML pliki HTML są zwykłymi plikami tekstowymi do ich tworzenia wystarcza najprostszy z możliwych edytor, np.: Notatnik WordPad Notepad++ Źródło strony

8 Joanna Brzozowska Ćwiczenie 1 Otwórz notatnik (Start / Wszystkie programy / Akcesoria / Notatnik). Stwórz dokument: Moja pierwsza strona. Dokument zapisz jako mps.html (zapisz jako... / wszystkie dokumenty (all types)) W dokumencie dopisz w sekcji body (otwórz dokument mps.html / prawy przycisk / Pokaż źródło / klik): kolor tła – zielony kolor liter – czerwony kolor ramek – niebieski jeden dwa trzy Zapisz zmiany, odśwież okno przeglądarki.

9 Joanna Brzozowska Struktura dokumentu Znaczniki Znaczniki zamykające Nagłówek... naglowki.html Komentarze

10 Joanna Brzozowska Struktura dokumentu Lista nieuporządkowana Lista uporządkowana mps.html Znaczniki wyróżnione

11 Joanna Brzozowska Ćwiczenie 2 To ćwiczenie pokaże Ci, ze przeglądarki są w stanie wybaczyć naprawdę wiele, chociaż nie wszystko. W dokumencie mps.html dodaj wiersz w sekcji : To jest tekst. Sam go napisałem. A to co to? Oczywiście, link! i zapisz. Następnie sprawdź w ulubionej przeglądarce i zapisz na karcie, co się dzieje, gdy: 1. Klikniesz na tekst A to co to? 2. Pominiesz jeden ze znaczników lub 3. Zamiast napiszesz 4. Zamiast napiszesz (b) a href=http://www.onet.pl (c) (g) (h) 5. Pominiesz znacznik 6. Zamiast napiszesz

12 Joanna Brzozowska Odsyłacze (Anchor – kotwica) Strona zewnętrzna A co to jest? Podstrona Moja Pierwsza strona Miejsce w tym dokumencie Etykieta

13 Joanna Brzozowska Odsyłacze (Anchor – kotwica) Umieszczamy tylko działające linki! Pamiętajmy o linku wstecz! Ważny schemat nawigacji!

14 Joanna Brzozowska Przerwa

15 Joanna Brzozowska Ćwiczenie 3 Otwórz notatnik (Start / Wszystkie programy / Akcesoria / Notatnik). Stwórz dokument: body { background-color: rgb(173,230,172); font-family: Arial; font-size: 25px; color: rgb(255,0,0); text-align: left; } h1 { background-color: rgb(0,0,0); margin-left: auto; margin-right: auto; text-align: center; font-weight: bold; font-size: 30px; border: 3px solid black; border-color: rgb(0,0,255); } img { border: 3px solid black; width: auto; height: auto; } ol { text-align: right; font-family: Courier New; color: rgb(255,255,0); } Zapisz go jako imie.css W dokumencie mps.html dopisz wiersz w sekcji head: Otwórz dokument mps.html. Czy coś się zmieniło?

16 Joanna Brzozowska Formatowanie CSS Selektory body h1 img ol Właściwości background margin-left margin-right text-align font-weight font-size border border-color Wartości rgb(173,230,172) Arial 25px left KOLORY

17 Joanna Brzozowska Ćwiczenie 4 W sekcji body dokumentu mps.html wstaw: Zapisz zmiany. W dokumencie imie.css dopisz właściwości i ich wartości w selektorze img: float: right; width: 100; height: 100; Zapisz zmiany. Otwórz dokument mps.html w przeglądarce.

18 Joanna Brzozowska Grafika na stronie float: right; width: 342; height: 353; Zmniejszenie rozmiarów w definicji nie wpływa na wielkość pobieranego obrazka – jest on pobierany w oryginalnym rozmiarze, a następnie zmniejszany przez przeglądarką.

19 Joanna Brzozowska Stosowanie grafiki na stronie używaj podpisu obrazka ALT="opis zdjęcia" - przed załadowaniem grafiki użytkownik będzie wiedział co zdjęcie przedstawia. Gdy budujesz graficzne menu lub galerię zdjęć, użytkownik może od razu przejść na stronę, która go interesuje - nie musi czekać, aż załadują się obrazki do końca. wpisuj rozmiary obrazka czyli WIDTH (szerokość) i HEIGHT (wysokość) podawaną w pikselach (lub procentach - procent szerokości lub wysokości strony) - dzięki temu przeglądarka będzie wiedziała ile dany obrazek zajmuje miejsca na stronie i szkielet strony będzie szybciej widoczny. nie umieszczaj więcej niż 30 Kb na stronie - jeżeli chcesz więcej (np.: zamieszczasz kolekcję zdjęć), zawsze ostrzeż oglądającego, że strona może się długo ładować. Dobrym pomysłem jest przygotowanie miniaturek zdjęć oraz odnośników do pełnowymiarowych fotografii - dzięki temu użytkownik zorientuje się co zdjęcie przedstawia i jeżeli będzie chciał je obejrzeć to sam o tym zadecyduje. tam gdzie jest to możliwe używaj tekstu zamiast grafiki, dzięki temu strona będzie się szybciej ładować. używaj kolorów z rozwagą - staraj się, aby strona była stonowana, nadużywanie kolorów męczy wzrok oglądającego i rozprasza jego uwagę postaraj się powstrzymać od używania animacji (szybko "męczy") oraz map graficznych nie stosuj tła, które ma dużą objętość - staraj się, by wielkość pliku nie była większa niż 5Kb tekst i tło powinny ze sobą kontrastować (jasny tekst na ciemnym tle i vice versa), oszczędnie stosuj tła graficzne nie używaj niepotrzebnych graficznych ozdobników pamiętaj o prawach autorskich - nie kopiuj pomysłów ani grafiki bez zgody autora

20 Joanna Brzozowska Ćwiczenie 5 Wpisz w dokumencie mps.html w sekcji body: Zapisz zmiany. Odśwież stronę. Czy coś się zmieniło w dokumencie mps.html wyświetlanym w przeglądarce? Na końcu dokumentu imie.css wpisz: table { width: 50%; background-color: rgb(255,126,0); border: 3px solid black; color: rgb(255,255,255); } Zapisz zmiany. Co widzisz w przeglądarce?

21 Joanna Brzozowska Tabele Współcześnie panuje tendencja odchodzenia od stosowania tabel w charakterze szkieletu stron Obecnie tabelom przypisuje się wyłącznie rolę pojemnika dla danych tabelarycznych, natomiast układy stron budowane są z użyciem pojemników (bloków, warstw) div, formatowanych za pomocą kaskadowych arkuszy stylów CSS. Zapewne proces przechodzenia z układów ramkowych czy tabelarycznych na blokowe będzie trwać długo i być może nigdy się nie zakończy…

22 Joanna Brzozowska What you see is what you get WYSIWYG – edytory webmasterskie Front Page

23 Joanna Brzozowska Korzystanie z podręcznika Paweł Wimmer

24 Joanna Brzozowska Praca domowa Stwórz stronę www, na której umieścisz 3 elementy samodzielnie stworzone przy pomocy podręcznika. Przygotuj szablon swojej strony na papierze oraz rozrysuj schemat nawigacji.


Pobierz ppt "Podstawy HTML Tworzenie stron www 5 Joanna Brzozowska."

Podobne prezentacje


Reklamy Google