Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

HTML edytory, formularze, CSS prowadzący: Piotr Chojnacki Wrocław, dn. 16 maja 2006 roku.

Podobne prezentacje


Prezentacja na temat: "HTML edytory, formularze, CSS prowadzący: Piotr Chojnacki Wrocław, dn. 16 maja 2006 roku."— Zapis prezentacji:

1 HTML edytory, formularze, CSS prowadzący: Piotr Chojnacki Wrocław, dn. 16 maja 2006 roku

2 2 HTML – niezbędne pojęcia

3 3 Czym jest strona WWW? Strona WWW – dokument napisany w języku HTML i w takiej postaci przechowywany w serwerze WWW. Zawiera hipertekst uzupełniony elementami graficznymi i multimedialnymi. Osoba zainteresowana obejrzeniem danej strony może ją pobrać z serwera, posługując się przeglądarką zainstalowaną we własnym komputerze.

4 4 Czym jest język HTML? Język HTML – (Hypertext Markup Language - Hipertekstowy Język Oznaczania) język przeznaczony do opisywania dokumentów hipertekstowych, prezentowanych i odczytywanych następnie w sieci WWW za pomocą przeglądarki. Poszczególne elementy składowe strony WWW, takie jak tytuły, akapity, obrazy, dźwięki, łączniki z innymi dokumentami, adresy stron WWW są wyróżniane w tym języku za pomocą znaczników, które pełnią funkcję poleceń dla przeglądarki. Dzięki temu hipertekst może być opisany z użyciem bardzo prostego edytora tekstowego.

5 5 Czym jest dokument HTML? Dokument HTML – dokument napisany w języku HTML. Taki dokument można utworzyć w najprostszym edytorze tekstu, np. w Notatniku, programie ze środowiska Windows zapisując go z rozszerzeniem.htm lub.html. Do odczytywania dokumentów HTML służą przeglądarki.

6 6 Co jest potrzebne, żeby napisać stronę internetową? Teoretycznie może to być dowolny edytor tekstu i dobre chęci. Jak wcześniej wspomnieliśmy dokument HTML jest po prostu plikiem tekstowym, gdzie wpisujemy wszystkie polecenia, dotyczące formatowania tekstu i wstawiania grafiki. Lecz pisanie strony w zwykłym edytorze tekstu, byłoby bardzo uciążliwe. Dlatego powstało wiele wyspecjalizowanych edytorów, które ułatwią, przyspieszą i uprzyjemnią Twoją pracę.

7 7 Edytory

8 8Edytory Edytor znaczników ezHTML 2.0 Alef (darmowy): ezHTML jest łatwy i intuicyjny w obsłudze oraz posiada wiele zaawansowanych narzędzi edycyjnych. Na uwagę zasługują np. Zakładki HTML, które umożliwiają dostęp do wszystkich możliwości języka HTML, umieszczone na nich zostały wszystkie istotne znaczniki, a także "czarodzieje" i inne kreatory, w znakomity sposób przyśpieszające pracę. Dużym atutem jest również fakt, iż jest to program całkowicie darmowy. Wraz z programem dołączene są Tagik - do sprawdzania poprawności kodu HTML oraz Kartograf - służący do seryjnego wstawiania obrazków.

9 9Edytory EdHTML 5.01 (darmowy) EdHTML programem wspomagającym tworzenie stron WWW (HTML, xHTML, WML) z wykorzystaniem języków PHP, PERL i JavaScript. Wspiera również CSS (CSS1, CSS2) i bazę danych MySQL. Posiada bardzo wiele funkcji ułatwiających wstawianie określonych (szablonowych) elementów, znacznie przyspieszając powstawanie strony. Zawiera wbudowanych szereg szablonów gotowych witryn, rozbudowany kurs HTML, a także pomoc do komend PHP, MySQL czy C++. Jest szybki, mały i można go dowolnie konfigurować.

10 10Edytory CoreEditor (płatny) Licencje: EDUCATION (darmowa), HOME (49zł), PROFESSIONAL(99zł) lub ENTERPRISE(229 zł) CoreEditor jest następcą cieszącego się sporą popularnością, darmowego EdHTML-a. Wspiera kilkadziesiąt różnych kompilatorów, ponad sto schematów kolorowania składni. Sprawdza się również jako edytor dla piszących dokumenty w TeX. Największy nacisk w programie położono na wsparcie XHTML, CSS, PHP, JavaScript i MySQL, choć również sprawdza się jako edytor do Pascala, C czy Javy. Sporo kreatorów, szablonów i gotowych do wykorzystania funkcji usprawnia pracę nad kodem.

11 11Edytory Pajączek (płatny) Zawiera ponad 40 różnych schematów kolorowania składni, obsługuje serwery FTP oraz oferuje synchronizację serwisów. Wspiera pracę grupową oraz posiada zaawansowane narzędzia edycji dla różnych języków (PHP, XHTML, XML, JavaScript) i zarządzania witrynami. Warto zauważyć, że pomimo adresowania programu do profesjonalistów Pajączka cechują bardzo przejrzysty interfejs użytkownika i duża wygoda pracy.

12 12 HTML – składnia

13 13 Język HTML Dokument HTML zawiera tekst, który ma być umieszczony na stronie i polecenia (zwane znacznikami, tagami), które stanowią informacje dla przeglądarki, jak ten dokument ma być wyświetlony na ekranie. Polecenia, dla odróżnienia od zwykłego tekstu umieszcza się w nawiasach. Prawie każde polecenie języka HTML składa się z dwóch części – otwierającej i zamykającej. Różnią się one tym, że część zamykająca poprzedzona jest znakiem /. Polecenia informują przeglądarkę, co ma zrobić z tekstem, a parametry tych poleceń, jak ma to być zrobione.

14 14 Budowa dokumentu HTML tytuł strony treść strony tytuł strony treść strony

15 15 Polskie znaki – znaczniki meta (kilka wybranych). Polecenia te są deklaracją strony kodowej, czyli sposobu, w jaki będą kodowane znaki na naszej stronie WWW. Zamiast charset=iso można wpisać: charset=windows-1250, ale jest to mocno odradzane, ponieważ polecenie takie deklaruje inną stronę kodową, podczas gdy w całym niemal polskim Internecie przyjęto standard kodowania iso

16 16 Poprawność kodu Deklaracja typu dokumentu: Strict DTD - (ścisła) zawiera wszystkie elementy i atrybuty, które nie są zdeprecjonowane (nie deprecated) oraz nie pojawiają się w dokumentach z ramkami. Transitional DTD - (przejściowa) lub inaczej loose DTD ("luźna") - zawiera wszystko co w Strict DTD plus elementy i atrybuty zdeprecjonowane Frameset DTD - (dla ramek) zawiera wszystko co w Transitional DTD plus elementy odnoszące się do ramek: FRAME, FRAMESET oraz NOFRAMES. Specyfikacja HTML 4.01: opracowana przez organizację W3C: określa elementy i atrybuty, które spełniają dotychczasowe standardy pisania w języku HTML.www.w3.org/TR/html4http://www.w3.org

17 17 Wybrane polecenia ustalenie wyróżnienia czcionki – kursywa ustalenie wyróżnienia czcionki – pogrubiona ustalenie wyróżnienia czcionki – podkreślona ustawienie tekstu i grafiki na środku strony zmiana wiersza – przeniesienie tekstu o jeden wiersz w dół dodatkowy odstęp – wprowadzenie dodatkowej spacji << >> "" && wypisuje przekreślony tekst

18 18 Zagnieżdżanie znaczników Na jeden fragment tekstu może wpływać więcej niż jeden znacznik - i wtedy mówimy o znacznikach zagnieżdżonych. Jednak zawsze należy zachować w takim przypadku kolejność domykania znaczników - jako ostatni musi być domknięty ten, który został otwarty pierwszy. Podobnie, jako pierwszy domykać zawsze trzeba ten znacznik, który był otwarty ostatnio. Tak, więc poprawna będzie konstrukcja: Fragment ważnego tekstu możemy wyróżnić pogrubieniem. natomiast błędna będzie. Fragment ważnego tekstu możemy wyróżnić pogrubieniem.

19 19 Polecenia z parametrami PolecenieParametr Wybrane wartości parametrów Znaczenie SIZE1-7ustalenie wielkości czcionki COLORwhite, green, blue, red, purple, yellow, navy, olive ustalenie koloru czcionki HREFplik.htmlwstawienie odnośnika ALIGNwprowadzenie akapitu poprzedzonego interlinią centerustawienie akapitu na środku strony rightwyrównanie akapitu do prawego marginesu leftwyrównanie akapitu do lewego marginesu justifywyrównanie akapitu do prawego i lewego marginesu

20 20 Polecenia z parametrami… PolecenieParametr Wybrane wartości parametrów Znaczenie BGCOLORustawienie koloru tła TEXTustawienie koloru tekstu LINKustawienie koloru odnośnika VLINKustawienie koloru odwiedzonego odnośnika ALIGNustawienie w nowym wierszu tytułu poziomu od 1 (największy rozmiar czcionki) do 6 centerustawienie tytułu na środku rightwyrównanie tytułu do prawego marginesu leftwyrównanie tytułu do lewego marginesu justifywyrównanie tytułu od prawego do lewego marginesu align, center, right, left, color, sizelinia

21 21 Polecenia z parametrami… PolecenieParametr Wybrane wartości parametrów Znaczenie SRCplik.gifpobieranie obrazka z pliku ALIGNleftustawienie obrazka po lewej stronie tekstu rightustawienie obrazka po prawej stronie tekstu topustawienie obrazka u góry middleustawienie obrazka w środku bottomustawienie obrazka na dole ALTobjaśnienie WIDTH liczba pikseli szerokość obrazka HEIGHTliczba pikseli wysokość obrazka HSPACEliczba pikseli odległość obrazka od tekstu w pionie VSPACEliczba pikseli odległość obrazka od tekstu w poziomie

22 22 Indeksy dolne i górne Indeksy dolne i górne można uzyskać stosując znaczniki:.., który oznacza indeks górny lub.., który oznacza indeks dolny jako przykład mogą posłużyć następujące wzory: a 2 + b 2 = c 2 3x 1 2 = e 2 log 3 x 1

23 23 Tabela i lista Punkt pierwszy Punkt drugi Punkt trzeci

24 24 Formularze

25 25 Formularz Dzięki formularzom, które są umieszczane bezpośrednio na stronie WWW, można uzyskać wiele informacji o użytkownikach odwiedzających nasz serwis. Służą one również do zamawiania różnych towarów w sklepach internetowych, chociaż wtedy należy dodatkowo zadbać o bezpieczeństwo przesyłanych danych. Zajmiemy się prostym formularzem pocztowym.

26 26 Formularz… Ramy formularza: (Tutaj umieszcza się pola formularza) lub (Tutaj umieszcza się pola formularza)

27 27 Formularz… pole tekstowe, pole wyboru, lista rozwijana lub gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skróconą treść pytania), która nie powinna być jednak zbyt długa! Zostanie ona później wysłana wraz z formularzem.

28 28 Formularz… pole tekstowe, pole wyboru, lista rozwijana Tu wpisz opis pola gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skróconą treść pytania), która nie powinna być zbyt długa. Zostanie ona później wysłana wraz z formularzem. Natomiast jako "wartość" podaj treść danej odpowiedzi. Zostanie ona również dołączona do formularza.

29 29 Formularz… pole tekstowe, pole wyboru, lista rozwijana Tu wpisz pierwszą możliwość Tu wpisz drugą możliwość (...) gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skróconą treść pytania). Zostanie ona później wysłana wraz z formularzem (wysłane zostaną również wpisane możliwości odpowiedzi).

30 30 Formularz… wysyłanie gdzie jako "wartość" należy wpisać napis, który pojawi się na przycisku wysyłania formularza. Jeśli opuścimy ten parametr, pojawi się tam domyślny tekst, np.: "Prześlij kwerendę".

31 31 CSS

32 32 Co to są style? Jest to potężne narzędzie do formatowania stron WWW (CSS - Cascading Style Sheets - Kaskadowe Arkusze Stylów). Dają one ogromne możliwości manipulowania wyglądem dokumentów i zwiększają efektywność narzędzi. Dodatkowo nie powodują problemów w przeglądarkach, które ich nie obsługują. Styl jest zespołem poleceń formatujących i pozwala zmieniać wygląd pojedynczych elementów strony lub nawet całej serii dokumentów.

33 33 Dlaczego warto używać styli? Style stały się już praktycznie podstawowym narzędzie formatującym. Jeśli poważnie myślisz o zajęciu się projektowaniem stron WWW, koniecznie musisz je poznać. Przestarzałe atrybuty i znaczniki, znajdujące się bezpośrednio w składni HTML, które dotyczą formatowania, będą stopniowo wycofywane przez producentów przeglądarek internetowych, na rzecz rekomendowanych analogicznych deklaracji stylów. Widać już nawet różnice pomiędzy IE4 a IE5! Dokumenty pisane z wykorzystaniem arkuszy stylów są zwykle bardziej przejrzyste i krótsze.

34 34 Dlaczego warto używać styli? Style pozwalają w łatwy sposób zarządzać całą serią dokumentów, poprzez stosowanie zewnętrznych arkuszy stylów. Dzięki temu w łatwy i wygodny sposób, można dokonać modyfikacji rodzaju formatowania jednocześnie we wszystkich dokumentach, zmieniając dane tylko w jednym pliku! Dzięki możliwości stosowania klas selektorów, znacznie oszczędzamy sobie pisania. W jednym miejscu określamy wszystkie atrybuty formatowania (których może być bardzo dużo), odnoszące się do wielu elementów, które mają wyglądać tak samo. Bezpośrednio przy elemencie wystarczy podać tylko nazwę klasy i nie musimy już wypisywać "litanii" poleceń. Znacznie przyspiesza to późniejszą modyfikację strony, ponieważ zmian dokonujemy tylko w jednym miejscu, a wpływają one na wiele elementów jednocześnie. Możliwość stosowania różnorodnych jednostek oraz sposobów definiowania kolorów.

35 35 Wstawianie styli styl lokalny:... rozciąganie stylu:... wydzielone bloki:...

36 36 Wstawianie styli wewnętrzny arkusz styli: (...) zewnętrzny arkusz styli: (...) (...) import arkusza styli:

37 37 Kaskadowość styli Kaskadowość stylów określa pierwszeństwo w oddziaływaniu na te same elementy strony, stylów z różnych źródeł. Jeśli w dokumencie znajduje się kilka źródeł stylów, pierwszeństwo mają te, które znajdują się "bliżej" formatowanego elementu. Oddziaływanie stylów z arkuszy zewnętrznych może być modyfikowane przez style zdefiniowane w nagłówku dokumentu, to zaś może być zmieniane przez style zdefiniowane bezpośrednio w ciele dokumentu (inline). Zatem priorytet ważności stylów (pierwszeństwo) wyglądałby tak: Styl lokalny (inline) Rozciąganie stylu (SPAN) oraz wydzielone bloki (DIV) Wewnętrzny arkusz stylów Zewnętrzny arkusz stylów oraz import arkusza stylów

38 38 Kaskadowość styli Można jednak świadomie zmienić zasady kaskadowości. Służy do tego polecenie !important. Jeżeli pojawi się ono w deklaracji stylu po wartości cechy, spowoduje to, że taka cecha będzie miała pierwszeństwo przed innymi, nawet, jeśli ma niższy priorytet

39 39 Selektory klasy selektorów: SELEKTOR.klasa { cecha: wartość } selektor identyfikatora : SELEKTOR#identyfikator { cecha: wartość } Np.: p.bialy {color:white;} użycie: jakiś paragraf Np.:.bialy {color:white;} Np.: p#bialy {color:white;} użycie: jakiś paragraf

40 40 Omówienie podstawowych poleceń formatowania SELEKTOR { font-size: rozmiar } xx-smal - najmniejsza x-small - mniejsza small - mała medium - średnia large - duża x-large - większa xx-large - największa bądź px, em, in itp. SELEKTOR { font-family: rodzaj, rodzaj1, rodzaj2,... } SELEKTOR { font-style: styl } Natomiast jako "styl" należy wpisać: normal - czcionka normalna (podstawowa) italic - czcionka pochylona oblique - również czcionka pochylona (podobna jak poprzednio)

41 41 Omówienie podstawowych poleceń formatowania SELEKTOR { font-weight: waga } normal - czcionka normalna (podstawowa) bold - czcionka pogrubiona 100, 200, 300, 400 (odpowiednik "normal"), 500, 600, 700 (odpowiednik "bold"), 800, każdy następny numer wskazuje wagę czcionki przynajmniej tak samo wytłuszczonej jak dla poprzedniej wartości w sekwencji SELEKTOR { color: kolor } SELEKTOR { text-decoration: dekoracja } none - bez zmian underline - podkreślenie line-through - przekreślenie overline - nadkreślenie SELEKTOR { text-align: wyrównanie } left - wyrównanie tekstu do lewego marginesu (domyślnie) right - wyrównanie do prawego marginesu center - do środka (wyśrodkowanie) justify - do obu marginesów jednocześnie (justowanie).

42 42 Omówienie podstawowych poleceń formatowania SELEKTOR { text-indent: wcięcie } SELEKTOR { background-color: kolor } SELEKTOR { background-image: url(ścieżka dostępu do obrazka) } SELEKTOR { background-repeat: powtarzanie } Natomiast jako "powtarzanie" należy wpisać: repeat - powtarzanie tła w obu kierunkach (domyślnie) repeat-x - powtarzanie tła tylko w kierunku poziomym repeat-y - powtarzanie tła tylko w kierunku pionowym no-repeat - brak powtarzania tła (zostanie wyświetlone jako pojedynczy obrazek)

43 43 Omówienie podstawowych poleceń formatowania SELEKTOR { margin-top: rozmiar } SELEKTOR { margin-bottom: rozmiar } SELEKTOR { margin-left rozmiar } SELEKTOR { margin-right: rozmiar } SELEKTOR { padding-top: rozmiar } SELEKTOR { padding-bottom: rozmiar } SELEKTOR { padding-left: rozmiar } SELEKTOR { padding-right: rozmiar } SELEKTOR {height : wysokość } SELEKTOR { width: szerokość }

44 44 Pseudoklasy a.odnosnik:link {color: #666666; text-decoration: underline; font-size: 16px; } a.odnosnik:visited {color: #666666; text-decoration: underline; font-size: 16px; } a.odnosnik:active {color: #666666; text-decoration: underline; font-size: 16px; } a.odnosnik:hover { color: black; background: none; text-decoration: none; font- size: 16px; }

45 45 Dziękuję koniec części teoretycznej Prezentację jak i materiały do tego wykładu można znaleźć na stronie: (strona główna) ( bezpośrednio dydaktyka informatyki) Większość materiałów zawartych w tej prezentacji opiera się na kursie


Pobierz ppt "HTML edytory, formularze, CSS prowadzący: Piotr Chojnacki Wrocław, dn. 16 maja 2006 roku."

Podobne prezentacje


Reklamy Google