Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

Wykład 1 TECHNOLOGIE INTERNETOWE. P3F, I stopień wykład 30 h lab. 30h dr inż. Tomasz Bajorek Wydział Budowy Maszyn i Lotnictwa Zakład Informatyki, Bud.L,

Podobne prezentacje


Prezentacja na temat: "Wykład 1 TECHNOLOGIE INTERNETOWE. P3F, I stopień wykład 30 h lab. 30h dr inż. Tomasz Bajorek Wydział Budowy Maszyn i Lotnictwa Zakład Informatyki, Bud.L,"— Zapis prezentacji:

1 Wykład 1 TECHNOLOGIE INTERNETOWE

2 P3F, I stopień wykład 30 h lab. 30h dr inż. Tomasz Bajorek Wydział Budowy Maszyn i Lotnictwa Zakład Informatyki, Bud.L, pok.28

3 1. Standardy HTML, DHTML, XHTML - CSS – arkusze stylów. DOM. Język skryptowy Javascript (client-side) – składnia podstawowych instrukcji. 2. Język PHP (server-side) – strony dynamiczne. Elementy składni języka. Instrukcje. Typy liczbowe i łańcuchowe. Arytmetyka. Instrukcje logiczne. Iteracja. Tablice numeryczne i asocjacyjne. Obsługa plików. Upload plików. 3. MySQL – struktura, administracja. Kwerendy. Zarządzanie danymi z poziomu PHP. 4. CMS. Zasady korzystania. Przykłady. Ajax. 5. XML, XSL – zasady, struktura. 6. Flash i Action Script. Przykłady.Inne elementy technologii sieciowych (komunikator, chat, RSS, WEB2.0) Szkic zakresu problematyki

4 HTML (ang. HyperText Markup Language, 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 z rozszerzeniem htm lub html HTML zdefiniowanie sposobu 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ów HTML. HTML

5 Pierwsza dostępna specyfikacja języka HTML, nazwana HTML Tags (znaczniki HTML) została opublikowana przez: Bernersa-Lee 1991r. Zawiera 22 znaczniki HTML 3.0, HTML 4.0 – wprowadził CSS (oddzielenie warstwy logicznej od prezentacji) HTML 4.01 HTML 5 – 2008 r. - szkic próba standaryzacji – usuwanie starych elementów Wersje późniejsze:

6 Dynamiczny HTML lub DHTML (ang. Dynamic HyperText Markup Language, dynamiczny hipertekstowy język znaczników) techniki służące do dynamicznej zmiany treści, wyglądu, zachowania dokumentu HTML umożliwiających interakcję strony www z użytkownikiem i stosowanie efektów wizualnych

7 Przeglądarki internetowe Internet Explorer Opera Mozilla Firefox inne: Safari, Google Chrome Berners-Lee – www, protokół http – Mosaic – pierwsza przeglądarka PHP – Rasmus Lerdorf stworzył zbiór narzędzi do obsługi swojej strony domowej – mechanizm interpretacji zestawu makr; np.: książka gości, licznik odwiedzin (PHP – Personal Home Pages) – włączenie baz danych INTERAKCJA UŻYTKOWNIKÓW problemy i wojny przeglądarek- Microsoft, Netscape

8 Narzędzia "webmasterskie" Pajączek 3.0 Light MS Word oraz MS FrontPage ACE HTML FREE HTML Macromedia Dreamweaver Visual Studio.NET

9 Znaczniki (tagi) Tytuł w nagłówku okna Tu są elementy pojawiające się na stronie STRUKTURA dokumentu HTML zawartość

10 Onet znacznik otwierający atrybuty zawartość znacznik zamykający

11 Strukturalne H1 – nagłówek P – akapit DIV, SPAN - grupujące Prezentacyjne B – pogrubienie I – italic Hiperłącza (kotwice) A

12 Zagnieżdżanie Tekst1 Tekst2 Tekst 3 Tekst1 Tekst2Tekst3

13 Znaczniki elementów pustych przykładowo: można pisać: lub lecz zgodnie z XHTML powinno być (ze spacją) a nawet

14 Wybrane znaczniki Znacznik - akapit Przykłady: Tytuł Tytuł2 Nagłówek pierwszy Nagłówek drugi Nagłówek trzeci Nagłówek czwarty Nagłówek piąty Nagłówek szósty Linie poziome:

15 Kroje czcionki pogrubiona kursywa podkreślona Kolor tła strony można tak: ale lepiej white aqua silver gray blue fuchsia lime red teal olive yellow maroon navy atrybut style jego cechy poznamy za chwilę ale tak się już pisze rzadko – lepiej jest stosować atrybut style dla poszczególnych znaczników

16 znacznik wiersza znacznik kolumny Tabele Przykład: AA AB BA BB CA CB Tabela o rozmiarze 3x2

17 Dla znacznik zamykający: opcjonalny tekst punktu pierwszego tekst punktu drugiego tekst punktu trzeciego Lista wypunktowana Lista numerowana tekst punktu pierwszego tekst punktu drugiego tekst punktu trzeciego

18 Grafika albo lepiej znacznik (bez treści) lokalizacja grafiki w atrybucie SRC

19 Odsyłacze (link – hiperłącze) Np. hiperłącze do URL Wirtualna Polska hiperłączem jest obrazek hiperłącze do klienta poczty Napisz do autorów tej strony hiperłącze do nazwanej zakładki Skocz do rozdziału 1 defincja zakładki Rozdział 1 lub Rozdział 1 Odsyłaczem jest konstrukcja, która wskazuje pewne miejsce w Internecie i pozwala skoczyć do niego za pomocą kliknięcia na niej myszką. Jej konstrukcję można przedstawić w postaci: Tekst (lub obrazek), który należy kliknąć

20 Formularze Rock and roll Jazz Blues

21 wnętrze Fragment dokumentu wydzielony za pomocą bloku. DIV z elementami poprzedzającymi i następującymi wyświetlany jest w pionowo, a SPAN w osobnym wierszu. np: 1 wnętrze div 1 2 wnętrze span 2 Bloki grupujące i

22 CSS – arkusze stylów Styl może mieć wiele parametrów:... oddzielamy średnikami

23 Indeks: elementy p {font-size: 144px;}.czerwony {background-color:#ff0000;border:1px solid black;} #moj {background-color:00cc00;} To jest tekst 1 AAA BBB tag klasa Definicje stylów znaczników lub klasy 1. bezpośrednio w elemencie 2. w bloku HEAD To jest tekst identyfikator

24 Plik style.css p {font-size: 44px;}.czerwony {background-color:#ff0000;} Plik index.html Indeks: elementy '; To jest tekst 1 AAA 3. W osobnym pliku

25 Styl OpisPrzykładowa wartość background-color kolor tłared background-image adres tła graficznegorys.gif border-color kolor ramki#33FF99 border-style styl i wygląd obramowaniadashed solid border grubość styl i kolor ramki1px solid green cursor wygląd kursorahand color kolor tekstuyellow font-family rodzaj oraz rodzina czcionkiArial sans-serif font-size wielkość czcionki14px font-style styl czcionkiitalic Przykładowe cechy stylów

26 font-weight grubość (waga) czcionkibold lighter height wysokość elementu10cm left top odległość od lewej (górnej) krawędzi 10cm position określenie współrzędnych elementu fixed text-align wyrównanie poziome tekstuleft text-decoration wygląd tekstuunderline vertical-align wyrównanie w pionietop width szerokość elementu200px margin odległość od zewnętrznego elementu 10mm padding odległość od krawędzi elementu 5mm Pełny opis możliwych do zastosowanie cech stylów: np.

27 Przykładowo: margin Tekst w komórce padding Obejrzeć efekt w przeglądarce

28 .. itd tekst akapitu body, td, br, p, center {font: 14px helvetica, sans-serif;} p.gruby {font: bold 16px helvetica, sans-serif;} Przykładowo: i dalej..


Pobierz ppt "Wykład 1 TECHNOLOGIE INTERNETOWE. P3F, I stopień wykład 30 h lab. 30h dr inż. Tomasz Bajorek Wydział Budowy Maszyn i Lotnictwa Zakład Informatyki, Bud.L,"

Podobne prezentacje


Reklamy Google