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 doradcazawodowy@onet.eu Logo

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

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

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

6 Joanna Brzozowska doradcazawodowy@onet.eu 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 doradcazawodowy@onet.eu 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 doradcazawodowy@onet.eu Ć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 doradcazawodowy@onet.eu Struktura dokumentu Znaczniki Znaczniki zamykające Nagłówek... naglowki.html Komentarze

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

11 Joanna Brzozowska doradcazawodowy@onet.eu Ć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 doradcazawodowy@onet.eu Odsyłacze (Anchor – kotwica) Strona zewnętrzna A co to jest? Podstrona Moja Pierwsza strona Miejsce w tym dokumencie 1. 2. Etykieta www.twojakariera.republika.pl

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

14 Joanna Brzozowska doradcazawodowy@onet.eu Przerwa

15 Joanna Brzozowska doradcazawodowy@onet.eu Ć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 doradcazawodowy@onet.eu 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 doradcazawodowy@onet.eu Ć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 doradcazawodowy@onet.eu 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 doradcazawodowy@onet.eu 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 doradcazawodowy@onet.eu Ć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 doradcazawodowy@onet.eu 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 doradcazawodowy@onet.eu What you see is what you get WYSIWYG – edytory webmasterskie Front Page

23 Joanna Brzozowska doradcazawodowy@onet.eu Korzystanie z podręcznika Paweł Wimmer

24 Joanna Brzozowska doradcazawodowy@onet.eu 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