Prezentacja programu PowerPoint

Transcript Prezentacja programu PowerPoint

Informatyka
2MPDI
Wykład 4
Strony WWW (World Wide Web)
Mosaic – pierwsza przeglądarka 1993
• Internet Explorer
• Opera
• Firefox(Mozilla)
• Safari
• Chrome(Google)
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 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ów HTML
• 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.
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 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
Znaczniki (tagi) – postać ogólna
<ZNACZNIK atrybuty> zawartość </ZNACZNIK>
atrybuty są opcjonalne (niekonieczne)
PODSTAWOWA STRUKTURA dokumentu HTML
konfiguracja
treść
strony
<HTML>
<HEAD>
<TITLE> Tytuł w nagłówku okna </TITLE>
</HEAD>
<BODY>
Tu są elementy pojawiające się na stronie
</BODY>
</HTML>
Przykład
<A href="jakiś_adres"> Onet </A>
nazwa
atrybutu
znacznik
otwierający
wartość
atrybutu
zawartość
znacznik
zamykający
Znaczniki podstawowe (jest ich ok. 80)
Strukturalne, np .
H1 – nagłówek
P – akapit
TABLE - tabela
DIV, SPAN - grupujące
Prezentacyjne – określające formę – np.
B – pogrubienie
I – italic
Hiperłącza (kotwice)
A
Zagnieżdżanie znaczników
<P> Tekst1<B><I> Tekst2 </I> Tekst 3</B></P>
Tekst1
Tekst2
Tekst3
<TD><IMG src="obraz.jpg" /></TD>
obrazek w komórce tabeli
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ą
Wybrane znaczniki …
Akapit tekstowy - znacznik <P> Przykłady:
<P align="center"> Tytuł </P>
<P align="left"> Tytuł2 </P>
wybór kroju, koloru, rozmiaru czcionki przez atrybut
style i jego cechy – o tym za chwilę
Dawniej określał to znacznik <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>
Linie poziome
znacznik HR
pusty – nie ma znacznika zamykającego
<HR SIZE="7" WIDTH="400" COLOR="yellow" />
<HR SIZE="8" WIDTH="100" ALIGN=left COLOR="navy" />
white aqua silver gray blue
fuchsia lime red teal olive yellow maroon navy
Kolory
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
R G B
czyli np. #00FF00 to zielony
Styl czcionki
<B> tekst </B>
<I> tekst </I>
<U> tekst </U>
pogrubiona
kursywa
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
Kolor tła strony – jako atrybut znacznika BODY
<BODY BGCOLOR="nazwa koloru">
poprawniej:
<BODY style="background-color:nazwa koloru">
motywy lub obrazek w tle strony można
zdefiniować innymi parametrami stylu dla BODY
– o tym za chwilę
Tabele
<TABLE BORDER="1">
….
<TR>…</TR> znacznik wiersza
<TD>…</TD> znacznik kolumny
</TABLE>
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>
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>
Przykład
<ol>
<li>Punkt 1.</li>
<li>Punkt 2.
<ul>
<li>Podpunkt 1.</li>
<li>Podpunkt 2.</li>
</ul>
</li>
</ol>
1. Punkt 1.
efekt
2. Punkt 2.
•
Podpunkt 1.
•
Podpunkt 2.
Grafika
znacznik IMG
<IMG SRC="ścieżka_do_pliku/nazwa_pliku" />
<IMG border="0" src="email_7.gif" width="55" height="45" />
<IMG SRC="OBRAZY/plik.jpg" HEIGHT="80" />
folder podrzędny
względem tego, w
którym jest plik
HTML
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) i pozwala skoczyć do
niego za pomocą kliknięcia na niej myszką.
<A HREF= "adres " >
Tekst (lub obrazek), który należy kliknąć
</A>
Np.
<A HREF= " http://www.wp.pl" > Wirtualna Polska </A>
<A HREF="http://www.microsoft.com/poland/”> Możesz
zaglądnąć pod ten adres </A>
<A HREF="./reklama.htm"> <IMG SRC="reklama.jpg" >
</A>
Formularze
<FORM>
<SELECT name="Typy" multiple="multiple">
<OPTION selected="selected">Rock and roll</OPTION>
<OPTION>Jazz</OPTION>
<OPTION>Blues</OPTION>
ta sama
</SELECT>
nazwa
<INPUT type="RADIO" name="wybor" value="p" />Podstawowe
<INPUT type="RADIO" name="wybor" value="s" />Średnie
<INPUT type="RADIO" name="wybor" value="w" />Wyższe
Wpisz tekst:<INPUT type="text" name="T1" size="20"/>
<INPUT type="submit" value="OK" name="B1" />
<INPUT type="reset" value="Reset" name="B2" />
cd. …
<INPUT TYPE="CHECKBOX" NAME="ok" VALUE="B" /> OK
<TEXTAREA NAME="TEKST" ROWS="5" COLS="20">
MIEJSCE NA WIĘKSZY TEKST
</TEXTAREA><BR />
</FORM>
efekt…
Dla obsługi danych wpisanych do formularzy
(np. ich wysłanie na serwer w celu zapisu czy
też analizy) konieczne jest zastosowanie
specjalnych metod
Przykład dokumentu HTML
<HTML>
<HEAD>
<TITLE> Moja strona </TITLE>
</HEAD>
<BODY bgcolor="gray">
<H1> To jest moja strona </H1>
<HR size="2" align=left color="navy" />
<TABLE BORDER="3">
<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
lista
hiperłączy
BODY
CSS – arkusze stylów
opiera się na zasadzie określania cech elementy dzięki
atrybutowi style
<ZNACZNIK style="cecha:wartość"> ...
Styl może mieć wiele cech, np.:
<P style="font-size:20px;color:blue"> ...
<TABLE style=" background-color:#ff0000; border:2px solid red;"> ...
cechy stylu oddzielamy średnikami
Przykładowe cechy stylów
Opis
Styl
Przykładowa wartość
background-color
kolor tła
#ff0000 albo rgb(255,0,0)
blue
background-image
adres tła graficznego
url('rys1.gif ')
border-color
kolor ramki
red
border-style
styl i wygląd obramowania
dotted
dashed
solid
border
wiele cech obramowania
2px solid yellow
color
kolor tekstu
yellow
#669933
font-family
rodzaj oraz rodzina czcionki
Arial sans-serif
font-size
wielkość czcionki
14px
2cm
font-style
styl czcionki
italic
font-weight
grubość (waga) czcionki
bold lighter
height
wysokość elementu
10px
3mm
width
szerokość elementu
odległość od lewej (górnej)
krawędzi
100px
10cm
3mm
position
określenie współrzędnych
elementu
fixed relative
margin
odległości od zewnętrznego 3px 3px 10px 20px
elementu
margin-top
margin-bottom
margin-left
margin-right
każdy margines osobno
text-align
wyrównanie poziome tekstu left center justify
text-decoration
wygląd tekstu
underline
vertical-align
wyrównanie w pionie
top bottom
padding
oddalenie wewnętrznego
elementu
left
top
5cm
definiowany element
element
wewnętrzny
element
zewnętrzny
Przykład zastosowania margin i padding
<DIV style="border:1px solid red; width:600px;background-color:yellow;">
<DIV style=" border:1px solid black; margin:20px 20px 20px 20px;padding:
100px 10px 100px 30px;text-align:center;background-color:grey;" >
<P style="background-color:green;">Tekst w komórce</P>
</DIV>
</DIV>
Obejrzeć efekt
w przeglądarce
Sposoby definicji stylów znaczników
1 sposób: bezpośrednio w elemencie
<P style="color:red"> To jest tekst </P>
To jest tekst
2 sposób: w bloku HEAD wewnątrz znacznika <STYLE>
<HTML><HEAD><TITLE>Indeks: elementy</TITLE>
<STYLE type="text/css">
p {font-size: 44px;}
dla akapitów
table {background-color:#ff0000;}
</STYLE>
</HEAD>
<BODY>
<P> To jest tekst 1</P>
<TABLE> <TR><TD>AAA</TD></TR></TABLE>
</BODY></HTML>
dla tabel
Można zestaw cech nazwać – jest to tzw. klasa – i
stosować atrybut class dla różnych znaczników
. (kropka)
<HTML><HEAD><TITLE>Indeks: elementy</TITLE>
<STYLE type="text/css">
.czerwony {background-color:#ff0000;}
</STYLE>
zastosowania
klasy
</HEAD>
<BODY>
<TABLE class="czerwony"><TR><TD>A</TD><TD>B</TD></TR></TABLE>
<P class="czerwony"> Tekst </P>
</BODY></HTML>
A
B
Tekst
tabela
akapit
Przykład2:
<style type="text/css">
body, td, p {font: 14px helvetica, sans-serif; border:2px solid red}
table {border:2px solid black;}
.gruby {font: bold 18px helvetica, sans-serif;}
</style>
i dalej..
<TABLE>
<TR><TD>A</TD><TD>B</TD></TR>
</TABLE>
<p class="gruby"> tekst akapitu </p>
A
B
tekst akapitu
Można też stosować identyfikatory znaczników
#
<HTML><HEAD><TITLE>Indeks: elementy</TITLE>
<STYLE type="text/css">
#maly {font-size:10px;}
#duzy {font-size:30px;}
</STYLE>
</HEAD>
<BODY>
<P id="maly"> Tekst 1 </P>
<P id="duzy"> Tekst 2 </P>
</BODY></HTML>
Tekst 1
Tekst 2
3 sposób: W osobnym pliku robimy definicje stylów
Plik style.css
p {font-size: 44px;}
.czerwony {background-color:#ff0000;}
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>
Przykład skryptu HTML z arkuszem stylów
<HTML>
<HEAD>
<TITLE> Moja strona </TITLE>
<link rel=stylesheet href="style.css" type="text/css">
</HEAD>
<BODY>
plik style.css
<H1> To jest moja strona </H1>
body{ background-color:gray}
<HR size="2" align=left color="navy">
table{border-width:3px;}
<TABLE>
.lista {font-size:20px}
<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 class="lista">
<LI> <A HREF='http://www.onet.pl>Onet</A> </LI>
<LI> <A HREF='http://www.google.pl>GOOGLE</A> </LI>
<LI> <A HREF='http://www.interia.pl>INTERIA</A> </LI>
</UL>
</BODY>
</HTML>
Javascript
JavaScript jest to interpretowany, zorientowany
obiektowo, skryptowy język programowania.
JavaScript jest oddzielnym językiem (nie jest
uproszczoną wersją Javy).
Może być osadzany w innych programach, na przykład w
przeglądarce internetowej, aby, mając dostęp do obiektów
otoczenia (np. modelu obiektowego przeglądarki internetowej
- DOM), można sprawować nad tym otoczeniem kontrolę.
Javascript jest łatwy w nauce i pozwala na pewne
„zdynamizowanie” stron internetowych.
Przeglądarki mogą pytać o zezwolenie na wykonanie skryptu.
Wstawienie skryptu do dokumentu HTML
Skrypty JavaScript są zagnieżdżane w dokumentach HTML. Skrypt
JavaScript umieszczane są między znacznikami <SCRIPT> i
</SCRIPT>.
<SCRIPT LANGUAGE="JavaScript">
treść skryptu
</SCRIPT>
<HTML><HEAD></HEAD>
<BODY>
<P> To jest tekst 1</P>
<SCRIPT LANGUAGE="JavaScript">
treść skryptu 1
</SCRIPT>
<P> To jest tekst 2</P>
<SCRIPT LANGUAGE="JavaScript">
treść skryptu 2
</SCRIPT>
</BODY></HTML>
Może istnieć wiele skryptów naprzemiennie z
pozostałym kodem HTML
Aby tworzyć działające skrypty JavaScript
wymagane są:
- jakaś metoda wprowadzania i
przechowania danych (liczb, tekstów)
- jakieś instrukcje, które umożliwią
obliczenia wyników
- jakieś metody pokazania wyniku
Wykorzystanie skryptu Javascript w dokumencie HTML
<HTML><HEAD></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
// obiekt document i jego metoda write - wypisanie tekstu
document.write ("To jest zwykły tekst");
// wysyłamy też znacznik HTML
document.write ("<BR />");
//nadajemy wartość zmiennej
x=5;
// ... i wyświetlamy jej wartość
document.write("Wartość zmiennej <I>x</I> : "+x);
document.write ("<BR>To jest liczba PI:"+Math.PI);
</SCRIPT>
<P> a to już akapit poza skryptem</P>
</BODY></HTML>
właściwość
obiektu
Kilka zasad pisania skryptów
Komentarze
Komentarz o kilku wierszach,
/*
treść komentarza
*/
Jednowierszowy komentarz
// tekst
Wykorzystywane są w celu:
- opisy wyjaśniające
- dezaktywowanie instrukcji (testy, błędy)
Identyfikatory
Są to nazwy elementów (zmiennych, obiektów, funkcji)
Zmienne służą do przechowania wartości określonego
typu
Jednym z podstawowych sposobów nadania wartości
zmiennej jest instrukcja przypisania (nadania wartości)
Ciąg liter, cyfr, znaków podkreślenia (nie wolno spacji!)
Musi się zaczynać od litery
Ważne duże i małe litery ! (w odróżnieniu od innych języków)
Przykłady identyfikatorów dla zmiennych:
x
alfa
Alfa
to dwie różne
zmienne
mojaZmienna
styl
"wielbłądzi"
B11
c_33
Operatory
Arytmetyczne: +
-
*
/
%(reszta z dzielenia)
Przypisania:
=
+=
–=
*=
/=
++
-%=
x+=5 odpowiada x=x+5,
x–=5 odpowiada x=x–5,
x*=5 odpowiada x=x*5,
x/=5 odpowiada x=x/5,
inkrementacja – zwiększenie o 1 x++ odpowiada x=x+1
dekrementacja – zmniejszenie o 1 x-- odpowiada x=x-1
x%=5
odpowiada
x=x%5 (reszta z dzielenia)
+ konkatenacja (łączenie tekstów)
"Mateusz " + 'Kowalski'
para " lub para '
Przykładowo:
<SCRIPT LANGUAGE="JavaScript">
x = 7; //początkowo x ma wartość 7
x++; //zwiększamy o 1
x += 4; //dodajemy 4
x %= 10; //reszta z dzielenia z przez 10, a więc ….. 2
//tu trzeba by wypisać wartość x na ekranie, zaraz się nauczymy
</SCRIPT>
Operatory porównania
wyrażenie operator wyrażenie
==
!=(nierówne)
<=
<
>
Przykładowo:
x==5
x>=3
a+b> 3*y
jest to pytanie: czy jest spełnione
odpowiedź: tak lub nie (TRUE/FALSE)
>=
Operatory logiczne
• koniunkcja (i)
&&
• alternatywa (lub)
||
• negacja
!
true && false daje false
!false daje true
Instrukcje – wykonanie akcji!
Instrukcje języka oddzielamy średnikami (jeśli
zapisujemy w tym samym wierszu).
Czasem blok kilku instrukcji otaczamy klamrami { }
zazwyczaj we wnętrzu instrukcji warunkowych i
iteracyjnych (np. if, for, while) – o nich za chwilę
<SCRIPT LANGUAGE="JavaScript">
instrukcja1;
{
instrukcja2;
traktowany w
instrukcja3;
całości jako blok
instrukcji
instrukcja4;
}
</SCRIPT>
Typy instrukcji
- przypisania (nadania wartości);
- warunkowe
- pętle
- wykonania funkcji (metody obiektu)
Instrukcja przypisania
zmienna = wyrażenie;
Po lewej stronie znaku = tylko nazwa zmiennej!!!
Po prawej stronie znaku = piszemy wyrażenie (bardzo
podobne jak w Excelu), zawierające liczby, operatory,
nawiasy okrągłe, funkcje – metody obiektów, oraz zmienne
o ZNANYCH WARTOŚCIACH
Wyrażenie jest obliczane i jego wartość przechowana w
zmiennej
Przykłady:
x=5;
alfa= 3*x;
b15=(3-x)+2/alfa;
Instrukcja wypisania na ekranie
document.write (element);
document to wbudowany obiekt w Javascript, a write (pisz) to
jedna z jego funkcji (tzw. metoda)
identyfikator obiektu i identyfikator jego metody oddzielamy kropką
Przykład
<SCRIPT LANGUAGE="JavaScript">
document.write ("To jest zwykły tekst<BR />");
x=5; //przypisujemy wartość zmiennej
// wyświetlamy jej wartość
document.write("Wartość zmiennej <I>x</I> : "+x+"<BR />");
napis="Mateusz " + 'Kowalski';
document.write(napis);
</SCRIPT>
Jak widzimy można wysyłać znaczniki (do pozycjonowania, formatowania itp.)
Obiekt Math (uwaga! – z dużą literą M)
Wbudowany obiekt Math zawiera wartości
matematyczne, jako właściwości (ang. property) i
metody (ang. method).
Są tutaj przechowywane pewne stałe matematyczne:
Math.property
lub gotowe funkcje
Math.method
gdzie property lub method jest jednym z podanych
niżej elementów.
property (właściwości)
E
e - stała Eulera, która wynosi ok. 2.718
PI
wartość liczby , czyli ok. 3.14159
method (metody)
abs(wyrażenie)
wartość bezwzględna liczby
cos(wyrażenie)
sin(wyrażenie)
tan(liczba)
funkcje trygonometryczne (argument w
radianach!!!)
ceil(liczba)
zaokrąglenie do całkowitej w górę
floor(liczba)
zaokrąglenie do całkowitej w dół
round(liczba)
zaokrąglenie do najbliższej całkowitej
exp(liczba)
ex UWAGA!!!
log(liczba)
logarytm naturalny liczby !
pow(liczba1,liczba2)
wartość liczby1 podniesionej do potęgi
liczby2
random()
wartość pseudolosowa z przedziału
(0,1) – bez argumentu
sqrt(liczba)
pierwiastek kwadratowy liczby
Przykłady:
<SCRIPT LANGUAGE="JavaScript">
document.write(Math.sin(4*Math.PI/180)+"<BR />");
</SCRIPT>
lub wykorzystując zmienną:
<SCRIPT LANGUAGE="JavaScript">
wynik=Math.sin(3*Math.PI/180);
document.write(wynik);
</SCRIPT>

Prezentacja programu PowerPoint

Transcript Prezentacja programu PowerPoint

Directory