Technologia informacyjna - całokształt zagadnień i działań związanych z przetwarzaniem,
przechowywaniem i prezentowaniem danych przy zastosowaniu technologii komunikacyjnej
, oprogramowania i sprzętu komputerowego.
WWW (World Wide Web) - hipertekstowy, multimedialny, sieciowy, interakcyjny system
informacyjny oparty na publicznie dostępnych, otwartych standardach IETF i W3C.
Pierwotnym i w chwili obecnej nadal podstawowym zadaniem WWW jest publikowanie informacji.
URL (Uniform Resource Locator) - ujednolicony format adresowania zasobów (informacji,
danych, usług), stosowany w Internecie i w sieciach lokalnych.
Przykładowy URL:
http://www.agh.edu.pl/pl/studenci/organizacje-studenckie.html
http - protokół dostępu do zasobu
www.agh.edu.pl - adres serwera
studenci/organizacje-studenckie.html - ścieżka dostępu do zasobu
HTTP (Hypertext Transfer Protocol) - protokół przesyłania dokumentów hipertekstowych.
FTP (File Transfer Protocol) - protokół typu klient-serwer, który umożliwia przesyłanie plików
z i na serwer poprzez sieć TCP/IP.
HTML (HyperText Markup Language - hipertekstowy) -wykorzystywany do tworzenia stron
internetowych. Pozwala opisać strukturę informacji zawartych w dokumencie nadając znaczenie
poszczególnym fragmentom tekstu (formując linki, nagłówki, akapity, listy, itp.) oraz osadzić
w tekście dodatkowe obiekty np. statyczne grafiki, interaktywne formularze, dynamiczne animacje.
XHTML (Extensible HyperText Markup Language - rozszerzalny hipertekstowy język znaczników)
- język służący do tworzenia stron WWW ogólnego przeznaczenia. W odróżnieniu od HTML-a
(który jest aplikacją SGML), dokumenty pisane w XHTML są zgodne z oficjalną specyfikacją XML.
<html> informuje, że zawartość odczytywanego pliku to kod, napisany w html-u
<head> wyznacza nagłówek strony
<body> zawiera treść strony
<head>
<title> definiuje tytuł dokumentu, który będzie wyświetlany na pasku tytułu przeglądarki.
<meta> w elemencie meta umieszczane są opisy i słowa kluczowe wykorzystywane przez wyszukiwarki.
<meta name=”author|description|keywords|generator|revised|inny” content=„tekst”>
<meta http-equiv=”content-type|expires|refresh|set-cookie” content=„akcja”>
<link> określa relację pomiędzy dwoma dokumentami.
<script> umożliwia umieszczenie w dokumencie skryptu
<style> definiuje styl w dokumencie.
<style type=”text/css|text/javascript”
</head>
<h1> tekst </h1> - nagłówek
<p> tekst </p> - akapit
<b> pogrubienie
<i> kursywa
<u> podkreślenie
<s> przekreślenie
<sub> indeks dolny
<sup> indeks górny
<big> czcionka większa od pozostałych
<small> czcionka mniejsza od pozostałych
<pre> tekst preformatowany - każda spacja, znajdująca się pomiędzy znacznikami <pre> i </pre>,
zostanie wyświetlona. standardowo dodatkowe znaki spacji, tabulacji, nowej linii są ignorowane.
<hr> linia pozioma
atrybuty:
size grubość linii w pikselach
width długość linii w pikselach
color kolor wypełnienia linii
align położenie linii w poziomie
noshade brak cienia
<br> łamanie linii
align atrybut definiuje wyrównanie względem innych elementów
wartości:
right do prawej strony
left do lewej strony, wartość domyślna
center wyśrodkowanie
justify do prawej i do lewej strony
<center> wyśrodkowanie tekstu
<font> element definiuje właściwości czcionki.
atrybuty:
size wielkość
color kolor
face rodzaj
<li> definiuje pozycje listy
<ol> lista numerowana, oznaczana kolejnymi liczbami
<ul> lista wypunktowana, oznaczona kropkami lub innymi symbolami
<dl> lista definicji
<ol> - lista numerowana
atrybut type, który umożliwia wybór jednego z pięciu możliwych schematów numerowania:
"1" standardowa numeracja za pomocą liczebników arabskich
"a" numeracja za pomocą kolejnych, małych liter alfabetu
"a„ numeracja za pomocą kolejnych, wielkich liter alfabetu
"i„ numeracja za pomocą kolejnych liczb alfabetu rzymskiego, zapisanych małymi literami
"i„ numeracja za pomocą kolejnych liczb alfabetu rzymskiego, zapisanych wielkimi literami
atrybut start, pozwala na określenie, od jakiej liczby lub litery należy rozpocząć numerację.
<ul> - lista wypunktowana
atrybut type, który umożliwia wybór jednego z trzech możliwych schematów punktowania:
"disc„ kółko lub kropka
"square„ kwadrat
"circle„ większość przeglądarek wyświetla ”disc” jako wypełnione kółko
<dl> - lista definicji
Każda część elementu listy definicji posiada swój znacznik: <DT> oznacza pojęcie (definition term),
a <DD> definicję
<dl>
<dt>freeware</dt>
<dd>licencja oprogramowania umożliwiająca darmowe rozprowadzanie aplikacji bez ujawnienia
kodu źródłowego. </dd>
<dt>shareware</dt>
<dd>rodzaj licencji programu komputerowego, który jest rozpowszechniany bez opłat, ale z
pewnymi ograniczeniami</dd>
</dl>
Sposób na odzwierciedlenie struktur hierarchicznych, np. spisu treści. Wystarczy wstawić całą
listę jako element innej. Lista zagnieżdżona jest wyświetlana z odpowiednim wcięciem.
<ul>
<li>styczeń</li>
<li>luty</li>
<ul>
<li>poniedziałek</li>
<li>wtorek</li>
<li>środa</li>
</ull>
<li>marzec</li>
</ul>
<img> - znacznik służy do wyświetlania obrazów
atrybuty:
src adres obrazka
alt tekst alternatywny; pojawia się, jeśli obrazek nie mógł
być wyświetlony
width szerokość
height wysokość
align położenie obrazu względem tekstu (top, bottom, middle, left, right)
<img src=”../obrazek.jpg" alt="obrazek" width=”100%” height=”50%” align=”top”>
background - atrybut znacznika <body> definiuje adres graficznego tła strony.
bgproperties=”fixed” - efekt nieruchomego tła (przesuwać się będzie tylko tekst)
<body background=”/obrazek.jpg" bgproperties=”fixed”>
bgcolor - zmiana koloru tła, atrybut znacznika <body>
<body bgcolor=”#934ce8”> - kolor podany w postaci szesnastkowej
<body bgcolor=”white”> - kolor podany w postaci predefiniowanej nazwy
<!-- dowolna treść-- > - komentarz
<a> - odsyłacz, służy do tworzenia połączeń. Przykładowy atrybut:
href - definiuje adres strony lub miejsca, do których następuje odwołanie (Hypertext REFerence)
ścieżka względna - określa położenie pliku z punktu widzenia bieżącej pozycji w drzewie katalogów.
ścieżka bezwzględna - tworzona jest w oparciu o bezwzględną pozycję pliku w drzewie katalogów.
<a href="../../u1/lemay/file.html”> - ścieżka bezwzględna, (..) zawsze wskazują na katalog znajdujący się
bezpośrednio powyżej bieżącego.
<a href="/u1/lemay/file.html”> - ścieżka względna
kolory linków można zmieniać lokalnie (css), lub globalnie za pomocą atrybutów znacznika <body>
link kolor linka
vlink kolor linka, który zostały już przynajmniej raz wybrany
alink kolor linka, na których został naciśnięty, ale jeszcze nie zwolniony przycisk myszy
<body bgcolor="#d9d9d9" link="#ffffff">
<table> definicja tabeli
<tr> wiersz tabeli
<td> komórka tabeli
<th> komórka nagłówkowa
atrybuty:
colspan definiuje ilość połączonych kolumn
rowspan definiuje ilość połączonych wierszy
width szerokość
height wysokość
border obramowanie
cellpadding odległość pomiędzy obramowaniem i zawartością
cellspacing odległość pomiędzy komórkami
bgcolor kolor tła
align położenie zawartości w poziomie
valign położenie zawartości w pionie
walidacja strony
* poprawny kod może zwiększa prawdopodobieństwo, że strona będzie się dobrze
wyświetlać pod większością przeglądarek.
* strona nie zawierająca błędów ładuje się znacznie szybciej
* aktualizacja poprawnego kodu jest łatwiejsza
* zdobywamy dodatkową wiedzę o języku HTML
Pozycjonowanie strony - działanie zmierzające do wypromowania danego serwisu internetowego
na jak najwyższe pozycje w wynikach wyszukiwania wyszukiwarek internetowych dla wybranych
wyrażeń kluczowych.
CSS - kaskadowe arkusze stylów (Cascading Style Sheets) - język dający możliwość zarządzania
sposobem formatowania (wyglądem) www.
Selektor + deklaracja. Selektor to nazwa znacznika HTML. Deklaracja zawiera dwie części:
właściwość (lub atrybut) i wartość.
np.
H2 { color:blue; font-size:11pt; }
Styl wpisany jest wprowadzony wewnątrz dokumentu HTML w wybranym znaczniku i
parametryzuje zmiany tylko w nim. Takie ustawienia stają się dominujące nad stylem osadzonym
i zewnętrznym.
np.
</head>
<body>
<p style="color: blue; background-color: yellow;"> Niebieski tekst na żółtym tle
Niebieski tekst na żółtym tle</p>
</body>
</html>
np.
H1,H2 {font-family: verdana, helvetica; color: #112233}
H1
H2 {font-size: 20pt}
P. {font-size: 12pt; color: #778899}
P.mala {font-size: 6pt}
P.duza {font-size: 20pt}
<P class="mala"> klasa "mala"
<P class="duza"> klasa "duza"
PHP (Hypertext Preprocessor) - obiektowy, skryptowy język programowania
zaprojektowany do generowania dynamicznych stron internetowych.
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" Content="tekst/html"; charset=iso-8859-2">
<TITLE>Nazywam się...</TITLE>
</HEAD>
<BODY>
$imie="Jan";
$nazwisko="Nowak";
print("Nazywam się ".$imię." ".$nazwisko);
?>
</BODY>
</HTML>
Operatory matematyczne
+ dodawanie $a=$b+3;
- odejmowanie $a=$b-3;
* mnożenie $a=$b*3;
/ dzielenie $a=$b/3;
% dzielenie modulo (zwraca liczbę całkowitą stanowiącą resztę z dzielenia)
++ inkrementacja $a++ (dodaje do zmiennej wartość 1)
-- dekrementacja $a- (odejmuje od zmiennej wartość 1)
Operatory logiczne oraz operatory porównania
< mniejsze $a<$b
> większe $a>$b
<= mniejsze lub równe $a<=$b
>= większe lub równe $a<=$b
== równe $a==$b
!= różne $a!=$b
&& (AND) koniunkcja (logiczne i) $a==1 && $b==2
|| (OR) alternatywa (logiczne lub) $a==2 || $b==1
! (NOT) negacja !$a==1 (negacja powoduje zmianę prawda na fałsz)
Operatory przypisania
= przypisuje zmiennej zapisanej z lewej strony operatora wartość wyrażenia
umieszczonego z jego prawej strony
+= dodaje wartość podaną z prawej strony operatora do wartości zmiennej
zapisanej z jego lewej strony i zapisuje ją w tej zmiennej.
-= odejmuje wartość podaną z prawej strony operatora od wartości zmiennej
zapisanej z jego lewej strony i zapisuje ją w tej zmiennej.
*= mnoży wartość podaną z prawej strony operatora przez wartość zmiennej
zapisanej z jego lewej strony i zapisuje ją w tej zmiennej.
/= dzieli wartość podaną z prawej strony operatora przez wartość zmiennej
zapisanej z jego lewej strony i zapisuje ją w tej zmiennej.
%= przypisuje zmiennej zapisanej z lewej strony operatora jej wartość podzieloną
modulo przez wartość podaną z prawej strony operatora.
.= przypisuje zmiennej zapisanej z lewej strony operatora łańcuch znaków
będący połączeniem łańcucha zapisanego w zmiennej z łańcuchem podanym z prawej strony operatora.
Inne operatory
. konkatenacja (łączenie łańcuchów znaków)
$ odwołanie do zmiennej
& odwołanie do pamięci zajmowanej przez zmienną
-> odwołanie do metody lub właściwości klasy
=> określa domyślną wartość argumentu lub indeks tablicy
@ powstrzymuje wyświetlanie błędów funkcji
? trójargumentowy operator warunkowy
Zmienne środowiskowe są tworzone podczas uruchamiania nowego procesora poleceń systemu
operacyjnego. Zmienne te zawierają specjalne informacje dotyczące konfiguracji serwera WWW czy konfiguracji PHP.
np.
$SERVER_SOFTWARE - zawiera nazwę i wersję serwera WWW.
$SERVER_NAME - zawiera nazwę serwera.
$SERVER_PROTOCOL - zawiera nazwę protokołu serwera http
$SERVER_PORT - zawiera numer portu serwera.
$PATH_INFO - zawiera ścieżkę oraz nazwę uruchomionego skryptu.
$PATH_TRANSLATED - zawiera bezwzględną ścieżkę do uruchomionego skryptu.
$SCRIPT_NAME - zawiera nazwę skryptu.
$REMOTE_ADDR - zawiera IP osoby odwiedzającej stronę.
$REMOTE_HOST - zawiera nazwę hosta osoby odwiedzającej stronę.
$HTTP_REFERER - zawiera URL poprzedniej odwiedzonej strony.
$HTTP_USER_AGENT - zawiera nazwę przeglądarki oraz systemu operacyjnego, z którego korzysta
osoba oglądająca stronę. Mozilla/4.0
$HTTP_HOST - zawiera nazwę serwera.
$REQUEST_URI - zawiera nazwe skryptu.
$SERVER_ADMIN - zawiera adres e-mail administratora serwera.
Instrukcja jest wykonywana jeśli warunek jest spełniony.
if (warunek) {
instrukcja
}
if (warunek_1) {
blok instrukcji 1
} elseif (warunek_2) {
blok instrukcji 2
} elseif (warunek_3) {
blok instrukcji 3
........
} else {
blok instrukcji n
}
np.
if ($i>0) {
print (" $i jest większa od 0");
}
elseif ($i<0) {
print ("$i jest większa od 0");
}
else {
print ("$i jest równe 0");
}
Instrukcja switch zwana jest także instrukcją wyboru. Pozwala uzależnić wykonywany kod od
wartości wyrażenia. Jeżeli żadna wartość całkowita nie będzie odpowiadać wartości wyrażenia
, zostanie wykonana instrukcja znajdująca się po słowie kluczowym default.
Użycie break jest opcjonalne, jeśli nie występuje program przechodzi do instrukcji po następnym case.
switch (wyrazenie) {
case wartosc1:
dzialanie1;
break;
case wartosc2:
dzialanie2;
break;
….
default: dzialanie;
}
np.
<?
$dzien=date("l");
switch ($dzien) {
case "Monday":
print ("Dzisiaj jest poniedziałek");
break;
default: print ("Dzisiaj jest niedziela");
}
?>
Instrukcja switch zwana jest także instrukcją wyboru. Pozwala
switch (wyrazenie) {
case wartosc1:
dzialanie1;
break;
case wartosc2:
dzialanie2;
break;
….
default: dzialanie;
}
JavaScript (JS) - obiektowy skryptowy język programowania, wspomagający tworzenie stron WWW
. Skrypty służą przede wszystkim do zapewnienia interaktywności poprzez reagowanie na zdarzenia,
sprawdzania poprawności formularzy lub budowania elementów nawigacyjnych. W języku JavaScrip
t można także pisać pełnoprawne aplikacje.
Kod JavaScript musi być umieszczony pomiędzy znacznikami HTML <SCRIPT>
i </SCRIPT>. Znaczniki te można umieszczać w dowolnym miejscu dokumentu, jednak przyjmuje
się, że jeżeli jest to tylko możliwe, należy umieścić je na początku pliku HTML przed znacznikiem <BODY>.
Znacznik ten powinien zawierać parametr LANGUAGE z wartością JavaScript.
var nazwa_zmiennej
np.
var imie="Janek" // zmienna typu string
var wiek=20 // zmienna typu integer
document.write("Nasz gość ma na imie "+imie+".")
document.write(imie+" ma "+wiek+" lat")
Instrukcja jest wykonywana jeśli warunek jest spełniony.
if (warunek) {
instrukcja
}
if (warunek_1) {
blok instrukcji 1
}
else {
blok instrukcji n
}
np.
wiek=prompt("W jakim jestes wieku?")
if (wiek>18) {
document.write("Jestes pelnoletni, więc możesz wejsc dalej.")
document.write("<br><a href=\"adult.html\">Wejście dla dorosłych</a>")
}
wiek=prompt("W jakim jestes wieku")
if (wiek>18) {
document.write("Jestes pelnoletni")
}
else {
alert("Źle!!!")
document.write("Nie mozesz tu wejsc")
}
Instrukcja switch zwana jest także instrukcją wyboru.
Pozwala uzależnić wykonywany kod od wartości
wyrażenia. Jeżeli żadna wartość całkowita nie będzie
odpowiadać wartości wyrażenia, zostanie wykonana
instrukcja znajdująca się po słowie kluczowym default.
Użycie break jest opcjonalne, jeśli nie występuje program
przechodzi do instrukcji po następnym case.
switch (wyrazenie) {
case wartosc1:
dzialanie1;
break;
case wartosc2:
dzialanie2;
break;
….
default: dzialanie;
}
Instrukcja w pętli while jest wykonywana przez cały czas,
gdy warunek jest spełniony
while (warunek) {
instrukcja
}
Pętla musi być wykonana co najmniej 1 raz: nawet, gdy
warunek nie będzie spełniony. Jest to związane
z tym, że warunek jest sprawdzany na końcu:
do {
instrukcja
} while (warunek)
Pętla for może być wykorzystana do wykonania pewnych
instrukcji określoną ilość razy.
for(inicjalizacja_zmiennej; warunek; zmiana_zmiennej) {
instrukcje
}
onMouseOver
Zdarzenie jest wywoływane jednorazowo, gdy najedziemy
na obiekt posiadający obsługę tego zdarzenia.
Zdarzenie jest aktywne do momentu opuszczenia obszaru.
np.
<a href=„http://www.onet.pl/” onMouseOver=„window
.status=`to jest onet'; return true”> onet</a>
onMouseOut
Zdarzenie jest wywoływane jednorazowo, gdy opuszczamy kursorem obiekt posiadający obsługę teg
o zdarzenia. Zdarzenie jest aktywne do momentu umieszczenia kursora na jakimś obszarze.
np.
<a href=”http://www.onet.pl/” onMouseOver=”window.status=`to jest onet'; return true;”
onMouseOut= =”window.status=` '; return true” > onet</a>