1 / 28

Informatyka

2MPDI wykład 30 h lab. 30h egzamin. Informatyka. egzamin. dr inż. Tomasz Bajorek Wydział Budowy Maszyn i Lotnictwa Zakład Informatyki, Bud.L , pok.28. Wykład - skrót tematyki :. Rozszerzony hipertekst: CSS , Javascript .

ervin
Download Presentation

Informatyka

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 2MPDI wykład 30 h lab. 30h egzamin Informatyka • egzamin dr inż. Tomasz Bajorek Wydział Budowy Maszyn i Lotnictwa Zakład Informatyki, Bud.L, pok.28

  2. Wykład - skrót tematyki: Rozszerzony hipertekst: CSS, Javascript. Algorytmy i sposoby ich zapisu (pseudokod, schematy blokowe, kod), analiza poprawności i optymalizacja algorytmów, złożoność algorytmów. Algorytmy sortowania i wyszukiwania danych, algorytmy iteracyjne i rekurencyjne. Języki programowania (składnia, semantyka). Idea programowania strukturalnego. Program i jego składowe. Struktura prostego programu. Stałe, zmienne. Proste typy danych, operacje. Zmienne łańcuchowe. Operatory logiczne, relacyjne. Instrukcje proste, instrukcje strukturalne (warunkowe, iteracyjne) - definicje, przykłady zastosowań. Generator losowy, obliczenia statystyczne.

  3. Strukturalnetypy danych: tablica, rekord, plik tekstowy i elementowy. Operacje na strukturach. Dynamiczne struktury danych: listy, tablicowe implementacje list, stos, kolejki, sterty, drzewa i ich reprezentacje, implementacje struktur dynamicznych przy pomocy tablic. Typ zbiorowy - operacje teoriomnogościowe. Procedury, funkcje i moduły. Rekurencja. Typ obiektowy, charakterystyka, programowanie dla GUI, programy komponentowe: wykorzystanie pól i metod komponentów, programowanie zdarzeń. Matlab - operacje tablicowe.

  4. Literatura Oho A. V., Hopcroft J. E., Ullman J. D., Algorytmy i struktury danych, Helion, Gliwice 2003. Marciniak Andrzej: Borland Pascal 7.0 z elementami programowania, wyd.Nakom,1995. Cantu M.: Delphi 5 : Praktyka programowania, Mikom, 2000. alternatywnie: TeixeiraS., Pacheco X, Delphi 4 : vademecum profesjonalisty, Helion, 2000. ReisdorphK. : Delphi 4 dla każdego, Helion, 1999. Aho A. V., Hopcroft J. E., Ullman J. D.: Algorytmy i struktury danych, Helion, Gliwice, 2003 Struzińska-Walczak A., Walczak K., Delphi : Nauka programowania wizualno-obiektowego, WaW, 2000 Lis M., JavaScript. Ćwiczenia praktyczne. Wydanie II, Helion,

  5. Strony WWW (World Wide Web) Mosaic – pierwsza przeglądarka 1993 • Internet Explorer • Opera • Firefox(Mozilla) • Safari • Chrome(Google)

  6. HTML HTML (ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) – język wykorzystywany do tworzenia stron internetowych HTML – kod źródłowy języka, można bezpośrednio pisać korzystając z edytora tekstu nieformatowanego (ASCII) np. Notatnik – zapis w pliku tekstowym ASCII, z rozszerzeniem htm lub html • HTML • zdefiniowanie sposobu strukturalnej i wizualnej prezentacji dokumentu w przeglądarce internetowej, • osadzanie ciągów instrukcji języków skryptowych, wpływających na zachowanie przeglądarek lub innych parserówHTML • przeglądarka dla przesyłu dokumentów HTML korzysta przede wszystkim z protokołu HTTP (hypertext transfer protocol) – ale także bezpieczniejszego (szyfrowanego) protokołu HTTPS.

  7. Dynamiczny HTML lub DHTML (ang. DynamicHyperTextMarkupLanguage, dynamiczny hipertekstowy język znaczników) • techniki służące do dynamicznej zmiany treści, wyglądu, zachowania dokumentu HTML w przeglądarce • umożliwiające interakcję strony WWW z użytkownikiem i stosowanie efektów wizualnych • plik HTML - tekst nieformatowany – małe pliki łatwe do przesyłu w sieci

  8. PODSTAWOWA STRUKTURA dokumentu HTML <HTML> <HEAD> <TITLE> Tytuł w nagłówku okna </TITLE> </HEAD> <BODY> Tu są elementy pojawiające się na stronie </BODY> </HTML> konfiguracja treść strony

  9. Znaczniki (tagi) – postać ogólna <ZNACZNIKatrybuty> zawartość</ZNACZNIK> atrybuty są opcjonalne (niekonieczne)

  10. Przykład <A href="jakiś_adres"> Onet </A> nazwa atrybutu wartość atrybutu znacznik zamykający znacznik otwierający zawartość

  11. Znaczniki podstawowe (jest ich ok. 80) • Strukturalne, np. • P – akapit • TABLE - tabela • DIV, SPAN – grupujące • H1 – nagłówek • Prezentacyjne – określające formę – np. • B – pogrubienie • I – italic • Hiperłącza (kotwice) • A

  12. Zagnieżdżanie znaczników <P> Tekst1<B><I>Tekst2 </I> Tekst 3</B></P> Tekst2 Tekst3 Tekst1 <TD><IMGsrc="obraz.jpg" /></TD> obrazek w komórce tabeli np. UWAGA: ciąg spacji HTML traktuje jak jedną – przy konieczności użycia kilku spacji stosuje się twarde spacje &nbsp; text&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text

  13. Znaczniki elementów pustych <ZNACZNIK /> przykładowo: <BR /> wymuszona zmiana wiersza <IMG /> grafika <INPUT /> pole formularza można pisać: <BR> </BR> lub <BR/> lecz zgodnie z XHTML powinno być: <BR /> ze spacją

  14. Wybrane znaczniki … Akapit tekstowy - znacznik <P> Przykład: <P> Tytuł </P> wybór kroju, koloru, rozmiaru czcionki przez atrybut style i jego cechy – o tym za chwilę Dawniej określały to znaczniki <FONT> ale niezalecany dla nowszych standardów HTML Akapity nagłówkowe określonych gotowych stylów <H1> Nagłówek pierwszy </H1> <H2> Nagłówek drugi </H2> <H3> Nagłówek trzeci </H3> <H4> Nagłówek czwarty</H4> <H5> Nagłówek piąty</H5> <H6> Nagłówek szósty</H6>

  15. Linie poziome znacznik HR pusty – nie ma znacznika zamykającego <HRstyle="……tu opis stylu…………….."/>

  16. Kolory Standardowe nazwy angielskie whiteaqua silvergraybluefuchsia lime red teal olive yellow maroon navy Oprócz nazw ang. można podawać 3 dwupozycyjne liczby w układzie szesnastkowym (cyfry 0123456789ABCDEF), określające nasycenie składowych RGB (red, green, blue) od 00 (minimum) do FF (maksimum = 25510) np. #17AACF czyli np. #00FF00 to zielony R G B

  17. Styl czcionki <B> tekst </B> pogrubiona <I> tekst </I> kursywa <U> tekst </U> podkreślona Stosuje się tylko lokalnie, np. wewnątrz akapitu dla krótkiego fragmentu tekstu <P>Litwo, <B> Ojczyzno </B> moja</P> tylko jedno słowo pogrubione

  18. Kolor tła strony cecha stylu znacznika BODY <BODY style="background-color:nazwa koloru"> motywy lub obrazek w tle strony można zdefiniować innymi parametrami stylu dla BODY – o tym za chwilę

  19. Tabele znacznik tabeli <TABLE > …. </TABLE> znacznik wiersza <TR>…</TR> znacznik kolumny <TD>…</TD> Przykład: <TABLE> <TR> <TD> AA </TD> <TD> AB </TD></TR> <TR> <TD> BA </TD> <TD> BB </TD> </TR> <TR> <TD> CA </TD> <TD> CB </TD> </TR> </TABLE>

  20. Lista wypunktowana <UL> <LI> tekst punktu pierwszego </LI> <LI> tekst punktu drugiego </LI> <LI> tekst punktu trzeciego </LI> </UL> Lista numerowana <OL> <LI> tekst punktu pierwszego </LI> <LI> tekst punktu drugiego </LI> <LI> tekst punktu trzeciego </LI> </OL>

  21. Przykład listy wielopoziomowej • <ol> • <li>Punkt 1.</li> • <li>Punkt 2. • <ul> • <li>Podpunkt 1.</li> • <li>Podpunkt 2.</li> • </ul> • </li> • </ol> • 1. Punkt 1. • 2. Punkt 2. • Podpunkt 1. • Podpunkt 2. efekt

  22. Grafika znacznik IMG znacznik pusty, posiada atrybut SRC określajacy ścieżkę względną i nazwę pliku graficznego <IMGSRC="ścieżka_do_pliku/nazwa_pliku" /> <IMG SRC="email_7.gif"style="…tu opis stylu……" /> <IMG SRC="./OBRAZY/plik.jpg" /> folder podrzędny względem tego, w którym jest plik HTML

  23. Odsyłacze (link – hiperłącze) Odsyłaczem jest konstrukcja, która wskazuje pewien adres (zakładka na tej samej stronie, inna strona, inny adres URL, zakładka na tej samej stronie) pozwala skoczyć do niego za pomocą kliknięcia na niej myszką. Posiada atrybut HREF określający lokalizację. <A HREF= "lokalizacja "> Tekst (często grafika), który należy kliknąć </A> Np. <A HREF= "http://www.wp.pl" > Wirtualna Polska </A> <A HREF="http://www.microsoft.com/poland/"> <IMG src="…" /> </A> <A HREF="./reklama.html"> <IMG SRC="reklama.jpg" > </A> tekst grafika inny dokument w tym samym folderze

  24. Formularze <FORM> <SELECTname="Typy" multiple="multiple"> <OPTION selected="selected">Rock and roll</OPTION> <OPTION>Jazz</OPTION> <OPTION>Blues</OPTION> </SELECT> <INPUTtype="RADIO" name="wybor" value="p" />Podstawowe <INPUTtype="RADIO" name="wybor" value="s" />Średnie <INPUTtype="RADIO" name="wybor" value="w" />Wyższe Wpisz tekst:<INPUTtype="text" name="T1" size="20" /> <INPUTtype="submit" value="OK" name="B1" /> <INPUTtype="reset" value="Reset" name="B2" /> pole rozwijane Uwaga: ta sama nazwa grupa radiowa przyciski cd. …

  25. pole tak/nie <INPUTtype="CHECKBOX" name="ok" VALUE="B" /> OK <TEXTAREAname="TEKST" rows="5" cols="20"> MIEJSCE NA WIĘKSZY TEKST </TEXTAREA><BR /> pole tekstowe </FORM> Jak widać elementy formularza mają istotne atrybuty: type, namevaluei inne.

  26. efekt…

  27. Dla obsługi danych wpisanych do formularzy (np. ich wysłanie na serwer w celu zapisu czy też analizy) konieczne jest zastosowanie specjalnych metod

  28. Przykład dokumentu HTML <HTML> <HEAD> <TITLE> Moja strona </TITLE> </HEAD> <BODY style="background-color:gray;margin-left:3cm"> <H1> To jest moja strona </H1> <HR style="width:100%;height:3px;background-color:black"/> <TABLE style="border:1px solid red"> <TR> <TD> AA </TD> <TD> AB </TD></TR> <TR> <TD> BA </TD> <TD> BB </TD> </TR> <TR> <TD> CA </TD> <TD> CB </TD> </TR> </TABLE> <UL> <LI> <A HREF='http://www.onet.pl">Onet</A> <LI> <A HREF='http://www.google.pl">GOOGLE</A> <LI> <A HREF='http://www.interia.pl">Interia</A> </UL> </BODY> </HTML> HEAD tabela BODY lista hiperłączy zastosowano tu już atrybut style (następny wykład)

More Related