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 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)
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.
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
Dynamiczny HTML lub DHTML (ang 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
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
Narzędzia "webmasterskie" MS Word oraz MS FrontPage Pajączek 3.0 Light ACE HTML FREE HTML Macromedia Dreamweaver Visual Studio .NET
<TAG atrybuty> zawartość </TAG> Znaczniki (tagi) <TAG atrybuty> 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>
<A href=www.onet.pl> Onet </A> atrybuty znacznik zamykający zawartość znacznik otwierający
Strukturalne H1 – nagłówek P – akapit DIV, SPAN - grupujące Prezentacyjne B – pogrubienie I – italic Hiperłącza (kotwice) A
Zagnieżdżanie <P> Tekst1<B><I> Tekst2 </I> Tekst 3</B></P> Tekst2 Tekst3 Tekst1
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
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" />
white aqua silver gray blue 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ę white aqua silver gray blue fuchsia lime red teal olive yellow maroon navy
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
Dla <LI> znacznik zamykający: opcjonalny Lista wypunktowana Lista numerowana <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
znacznik <IMG …… /> (bez treści) 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="……." />
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>
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>
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
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
Definicje stylów znaczników lub klasy 1. bezpośrednio w elemencie <P style="color:red"> To jest tekst </P> 2. w bloku HEAD <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 identyfikator
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>
Opis Przykładowa wartość Przykładowe cechy stylów Styl Opis Przykładowa wartość background-color kolor tła red background-image adres tła graficznego rys.gif border-color kolor ramki #33FF99 border-style styl i wygląd obramowania dashed solid border grubość styl i kolor ramki 1px solid green cursor wygląd kursora hand color kolor tekstu yellow font-family rodzaj oraz rodzina czcionki Arial sans-serif font-size wielkość czcionki 14px font-style styl czcionki italic
Pełny opis możliwych do zastosowanie cech stylów: font-weight grubość (waga) czcionki bold lighter height wysokość elementu 10cm left top odległość od lewej (górnej) krawędzi position określenie współrzędnych elementu fixed text-align wyrównanie poziome tekstu left text-decoration wygląd tekstu underline vertical-align wyrównanie w pionie top width szerokość elementu 200px 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. http://www.signs.pl/html/o/style.php
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> Obejrzeć efekt w przeglądarce margin padding
<style type="text/css"> body, td, br, p, center 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>