Tworzenie stron www 5 Joanna Brzozowska Podstawy HTML Tworzenie stron www 5 Joanna Brzozowska
Logo Joanna Brzozowska doradcazawodowy@onet.eu
Moduł E4 - podsumowanie Netykieta webmastera Użyteczność Staranność Bezbłędność Jakość Joanna Brzozowska doradcazawodowy@onet.eu
Forum Asynchroniczność Napiszę, to już zostanie Kontakt z klientami Kontakt stały Odbiór poczty – codziennie … Joanna Brzozowska doradcazawodowy@onet.eu
Przebieg zajęć Edytory HTML Struktura dokumentu Odsyłacze Formatowanie dokumentu – CSS Grafika na stronie Tabele Programy pomocnicze 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. Joanna Brzozowska doradcazawodowy@onet.eu
zwykłymi plikami tekstowymi 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 Joanna Brzozowska doradcazawodowy@onet.eu
Ćwiczenie 1 Otwórz notatnik (Start / Wszystkie programy / Akcesoria / Notatnik). Stwórz dokument: <html> <head> <meta name=”Author” content=”Imię Nazwisko”> </head> <body> <h1> Moja pierwsza strona. </h1> </body> </html> 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): <ul> <li>kolor tła – zielony <li>kolor liter – czerwony <li>kolor ramek – niebieski </ul> <ol> <li>jeden <li>dwa <li>trzy </ol> Zapisz zmiany, odśwież okno przeglądarki. Joanna Brzozowska doradcazawodowy@onet.eu
Struktura dokumentu Znaczniki Znaczniki zamykające Nagłówek <html> <meta> <body> Znaczniki zamykające </meta> </body> </html> Nagłówek <h1>...</h1> <h2>...</h2> <h3>...</h3> naglowki.html Komentarze <!-- komentarz --> Joanna Brzozowska doradcazawodowy@onet.eu
Struktura dokumentu Lista nieuporządkowana Lista uporządkowana <ol> <li> </ol> mps.html Znaczniki wyróżnione <li> <br> <hr> 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 <body>: <p>To jest tekst. Sam go napisałem.</p> <a href=”http://www.onet.pl”>A to co to?</a> 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 <html> lub </html> 3. Zamiast </a> napiszesz </A> 4. Zamiast <a href=”http://www.onet.pl”> napiszesz (b) a href=”http://www.onet.pl” (c) <a href=http://www.onet.pl> (g) <a href=”http:www.onet.pl”> (h) <a href=”www.onet.pl”> 5. Pominiesz znacznik </a> 6. Zamiast </a> napiszesz </b> Joanna Brzozowska doradcazawodowy@onet.eu
Odsyłacze (Anchor – kotwica) Strona zewnętrzna <a href=„http://www.onet.pl”>A co to jest?</a> Podstrona <a href=„msp.html”>Moja Pierwsza strona</a> Miejsce w tym dokumencie <a id=„etykieta" name=„etykieta"></a> <a href=„#etykieta”>Etykieta</a> www.twojakariera.republika.pl Joanna Brzozowska doradcazawodowy@onet.eu
Odsyłacze (Anchor – kotwica) Umieszczamy tylko działające linki! Pamiętajmy o linku wstecz! Ważny schemat nawigacji! Joanna Brzozowska doradcazawodowy@onet.eu
Przerwa 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: <link rel="stylesheet" href="imie.css" type="text/css"> Otwórz dokument mps.html. Czy coś się zmieniło? Joanna Brzozowska doradcazawodowy@onet.eu
Formatowanie CSS KOLORY Selektory Wartości body rgb(173,230,172) 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 Joanna Brzozowska doradcazawodowy@onet.eu
Ćwiczenie 4 W sekcji body dokumentu mps.html wstaw: <img src="wazka.jpg" alt="opis, co jest na obrazku"> Zapisz zmiany. W dokumencie imie.css dopisz właściwości i ich wartości w selektorze img: float: right; width: 100; height: 100; Otwórz dokument mps.html w przeglądarce. Joanna Brzozowska doradcazawodowy@onet.eu
Grafika na stronie <img src="plik_graficzny" alt="nazwa alternatywna"> 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ą. 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 Joanna Brzozowska doradcazawodowy@onet.eu
Ćwiczenie 5 Wpisz w dokumencie mps.html w sekcji body: <table> <tr> <td> </td><td> </td> </tr> </table> 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? 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… Joanna Brzozowska doradcazawodowy@onet.eu
What you see is what you get WYSIWYG – edytory webmasterskie Front Page Joanna Brzozowska doradcazawodowy@onet.eu
Korzystanie z podręcznika Paweł Wimmer 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. Joanna Brzozowska doradcazawodowy@onet.eu