1 / 28

Wykład 1

TECHNOLOGIE INTERNETOWE. Wykład 1. 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. Szkic zakresu problematyki.

powa
Download Presentation

Wykład 1

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. TECHNOLOGIE INTERNETOWE Wykład 1

  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. Szkic zakresu problematyki 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)

  4. HTML 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.

  5. Pierwsza dostępna specyfikacja języka HTML, nazwana HTML Tags (znaczniki HTML) została opublikowana przez: Bernersa-Lee 1991r. Zawiera 22 znaczniki Wersje późniejsze: 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

  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 1989-90 Berners-Lee – www, protokół http – Mosaic – pierwsza przeglądarka 1993 1994 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" MS Word oraz MS FrontPage Pajączek 3.0 Light ACE HTML FREE HTML Macromedia Dreamweaver Visual Studio .NET

  9. Znaczniki (tagi) <TAGatrybuty>zawartość</TAG> STRUKTURA dokumentu HTML <HTML> <HEAD> <TITLE> Tytuł w nagłówku okna </TITLE> </HEAD> <BODY> Tu są elementy pojawiające się na stronie </BODY> </HTML>

  10. <A href=www.onet.pl> Onet </A> atrybuty znacznik zamykający zawartość znacznik otwierają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 <P> Tekst1<B><I> Tekst2 </I> Tekst 3</B></P> Tekst2 Tekst3 Tekst1

  13. Znaczniki elementów pustych <TAG /> przykładowo: <BR /> <IMG /> <INPUT /> <HR/> można pisać: <BR> </BR> lub <BR/> lecz zgodnie z XHTML powinno być <BR/> <BR /> (ze spacją) a nawet

  14. Wybrane znaczniki Znacznik <P> - akapit Przykłady: <P align="center"> Tytuł </P> <P align="left"> Tytuł2 </P> <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> Linie poziome: <HR SIZE="7" WIDTH="400" COLOR="yellow" /> <HR SIZE="8" WIDTH="100" ALIGN=left COLOR="navy" />

  15. Kroje czcionki <B> </B> pogrubiona <I> </I> kursywa <U> </U> podkreślona <FONT size= ……> <FONT> ale tak się już pisze rzadko – lepiej jest stosować atrybut style dla poszczególnych znaczników Kolor tła strony można tak: <BODY BGCOLOR="nazwa koloru"> ale lepiej <BODY style="background-color:kolor"> atrybut style jego cechy poznamy za chwilę whiteaqua silvergrayblue fuchsia lime red teal olive yellow maroon navy

  16. Tabele <TABLE BORDER="1"> </TABLE> <TR> znacznik wiersza <TD> znacznik kolumny Przykład: <TABLE BORDER="1"> <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> Tabela o rozmiarze 3x2

  17. Lista numerowana Lista wypunktowana <UL> <LI> tekst punktu pierwszego <LI> tekst punktu drugiego <LI> tekst punktu trzeciego </UL> <OL> <LI> tekst punktu pierwszego <LI> tekst punktu drugiego <LI> tekst punktu trzeciego </OL> Dla <LI> znacznik zamykający: opcjonalny

  18. Grafika znacznik <IMG …… /> (bez treści) lokalizacja grafiki w atrybucie SRC <IMG SRC="ścieżka\plik_graficzny" /> <img border="0" src="email_7.gif" width="55" height="45" /> albo lepiej <IMG SRC="plik.jpg"style="……." />

  19. Odsyłacze (link – hiperłącze) 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: <A HREF= "adres strony " > Tekst (lub obrazek), który należy kliknąć </A> Np. hiperłącze do URL <A HREF= " http://www.wp.pl" > Wirtualna Polska </A> hiperłączem jest obrazek <A HREF="./reklama.htm"> <IMG SRC="reklama.jpg" /> </A> hiperłącze do klienta poczty <A HREF=mailto:imię nazwisko@adres> Napisz do autorów tej strony</A> hiperłącze do nazwanej zakładki <A HREF="#zakladka1"> Skocz do rozdziału 1</A> defincja zakładki <P id="zakladka1">Rozdział 1</P> lub <A name="zakladka1"> Rozdział 1</P>

  20. Formularze <FORM> <SELECT name="Typy" multiple="multiple"> <OPTION selected="selected">Rock and roll</OPTION> <OPTION>Jazz</OPTION> <OPTION>Blues</OPTION> </SELECT> <INPUT type="text" name="T1" size="20"/> <INPUT type="submit" value="OK" name="B1"/> <INPUT type="reset" value="Reset" name="B2"/> </FORM>

  21. Bloki grupujące <DIV> i <SPAN> <DIV> wnętrze </DIV> <SPAN> wnętrze </SPAN> 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<DIV> wnętrze div </DIV>1 <BR /> 2<SPAN> wnętrze span</SPAN>2

  22. CSS – arkusze stylów <TABLE style=" background-color:#ff0000; "> ... Styl może mieć wiele parametrów: <TABLE style=" background-color:#ff0000; border:2px solid red;"> ... oddzielamy średnikami

  23. <HTML><HEAD><TITLE>Indeks: elementy</TITLE> <style type="text/css"> p {font-size: 144px;} .czerwony {background-color:#ff0000;border:1px solid black;} #moj {background-color:00cc00;} </style> </head> <BODY> <P> To jest tekst 1</P> <TABLE class="czerwony" style="margin:0 auto;font-size:40px;"> <TR><TD>AAA</TD> <TR><TD id="moj">BBB</TD></TR></TABLE> </BODY></HTML> tag klasa Definicje stylów znaczników lub klasy 1. bezpośrednio w elemencie <P style="color:red"> To jest tekst </P> 2. w bloku HEAD identyfikator

  24. 3. W osobnym pliku p {font-size: 44px;} .czerwony {background-color:#ff0000;} Plik style.css Plik index.html <HTML><HEAD><TITLE>Indeks: elementy</TITLE> <link rel=stylesheet href="style.css" type="text/css">'; </head> <BODY> <P> To jest tekst 1</P> <TABLE class="czerwony"> <TR><TD>AAA</TD></TR></TABLE> </BODY></HTML>

  25. Przykładowe cechy stylów

  26. Pełny opis możliwych do zastosowanie cech stylów: np. http://www.signs.pl/html/o/style.php

  27. Przykładowo: <DIV style="border:1px solid red; width:600px;background-color:yellow;margin:0 auto;"> <DIV style=" border:1px solid black; margin:20px 20px 20px 20px;padding: 100px 20px 200px 60px;text-align:center;background-color:grey;" > <p style="background-color:white;margin:0;font-size:44px;">Tekst w komórce</P> </DIV> </DIV> Obejrzeć efekt w przeglądarce margin padding

  28. Przykładowo: <style type="text/css"> body, td, br, p, center {font: 14px helvetica, sans-serif;} p.gruby {font: bold 16px helvetica, sans-serif;} </style> i dalej.. <table style="border: 3px solid green;">.. itd <p class="gruby"> tekst akapitu </p>

More Related