Szukaj na tym blogu

czwartek, 31 maja 2012

Wstęp do algorytmów

WSTĘP DO ALGORYTMÓW

Algorytm
         Zawiera opis danych, plan działania, czyli przetwarzania danych oraz opis wyników.
         Plan działania można przedstawić w postaci ciągu czynności, które muszą być wykonane w określonej kolejności.
         Opis czynności w algorytmie nazywamy instrukcjami. 


Algorytm musi być:
         Poprawny, tzn. dla każdego poprawnego zestawu danych, po wykonaniu skończonej liczby czynności prowadzi do poprawnych wyników
         Jednoznaczny, tzn. w każdym przypadku jego zastosowania dla tych samych danych uzyskamy ten sam wynik.
         Szczegółowy, aby wykonawca algorytmu rozumiał opisane czynności i potrafił je wykonać
         Uniwersalny, aby służył do rozwiązywania pewnej grupy zadań, a nie tylko jednego zadania.



W informatyce każdy program komputerowy realizuje jakiś algorytm zapisany
w zrozumiałym dla komputera języku programowania.


Rodzaje algorytmów:

1. Algorytm sekwencyjny
         Opisuje czynności wykonywane zgodnie z kolejnością, w jakiej występują w opisie.

 
Algorytm sekwencyjny telefonicznego wezwania lekarza do chorego
Algorytm 1
  1. Podnieś słuchawkę.
  2. Wybierz cyfrę 9.
  3. Wybierz cyfrę 9.
  4. Wybierz cyfrę 9.
  5. Przekaż informacje.
  6. Odłóż słuchawkę.


 
2. Instrukcja warunkowa
         Opisuje wykonanie różnych czynności zależnie od spełnienia bądź niespełnienia warunku.
         Działa według schematów:
„Jeśli spełniony jest warunek W, wykonaj instrukcję A” lub
„Jeśli spełniony jest warunek W, to wykonaj instrukcję A; w przeciwnym wypadku wykonaj instrukcję B”


Instrukcja warunkowa telefonicznego wezwania lekarza do chorego
Algorytm 2
  1. Podnieś słuchawkę.
  2. Wybierz cyfrę 9.
  3. Wybierz cyfrę 9.
  4. Wybierz cyfrę 9.
  5. Czy połączyłeś się z pogotowiem ratunkowym?
            5A. Jeśli TAK, to przejdź do kroku 6.
            5B. Jeśli NIE, to przejdź do kroku 7.
6. Przekaż informacje.
7. Odłóż słuchawkę.


3. Instrukcje iteracyjne (pętle)
         Opisują one wykonywanie pewnych powtarzających się czynności.
         Najprostsza instrukcja iteracyjna działa według schematu:
Pierwszy rodzaj pętli. „Wykonaj instrukcję A dokładnie n razy”



 Algorytm 3.
  1. Podnieś słuchawkę.
  2. Wykonaj czynność 3 razy.
            2A. Wybierz cyfrę 9
3. Czy połączyłeś się z pogotowiem ratunkowym?
            3A. Jeśli TAK, to przejdź do kroku 4.
            3B. Jeśli NIE, to przejdź do kroku 5.
4. Przekaż informacje.
5. Odłóż słuchawkę.




Drugi rodzaj pętli. „Powtarzaj wykonywanie instrukcji A, aż do spełnienia warunku W”.





Algorytm 4
  1. Czy słuchawka jest odłożona?
            1A. Jeśli TAK, to przejdź do kroku 2.
            1B. Jeśli NIE, to odłóż słuchawkę.
2. Podnieś słuchawkę.
3. Wykonaj czynność 3 razy.
            3A. Wybierz cyfrę 9.
4. Czy połączyłeś się z pogotowiem ratunkowym?
            4A. Jeśli TAK, to przejdź do kroku 5.
            4B. Jeśli NIE, to przejdź do kroku 1.
5. Przekaż informacje.
6. Odłóż słuchawkę.





Trzeci rodzaj pętli. „Dopóki warunek W jest spełniony, wykonuj instrukcję A”.

Algorytm 5
1.      Czy słuchawką jest odłożona?
            1A. Jeśli TAK, to przejdź do kroku 2.
            1B. Jeśli NIE, to odłóż słuchawkę.
2. Podnieś słuchawkę.
3. Czy linia jest zajęta?
            3A. Jeśli TAK, to:
                        3A.1 Odłóż słuchawkę.
                        3A.2 Podnieś słuchawkę.
                        3A.3 Przejdź do kroku 3.
            3B. Jeśli NIE, to przejdź do kroku 4.
4. Wykonaj czynność 3 razy.
            4A. Wybierz cyfrę 9.
5. Czy połączyłeś się z pogotowiem ratunkowym?
            5A. Jeśli TAK, to przejdź do kroku 6.
            5B. Jeśli NIE, to przejdź do kroku 1.
5. Przekaż informacje.
6. Odłóż słuchawkę.


Algorytm można przedstawić w różny sposób, np. za pomocą języka potocznego lub w postaci schematu blokowego.

Schemat blokowy to graficzny zapis algorytmu rozwiązania zadania, przedstawiający opis
i kolejność wykonywania czynności realizujących dany algorytm.



Schemat blokowy składa się z bloków przedstawionych w postaci symboli graficznych, których kształt określa rodzaj czynności, a umieszczone w nich napisy precyzują te czynność.
Kolejność wykonywania czynności jest ustalona za pomocą łączących je linii i strzałek.
 

Blok początkowy (start)
W każdym schemacie blokowym występuje jeden taki element, oznaczający rozpoczęcie działania algorytmu. Znajduje się on zawsze na początku schematu. Z bloku początkowego odchodzi dokładnie jedna linia – wyjście do dalszych działań programu.

Blok wejściowy
Blok przeznaczony do wczytywania danych i przypisywania ich zmiennym, które używane są
w dalszych obliczeniach. Prowadzi do niego jedna linia (wejście) i odchodzi od niego jedna linia (wyjście)
 
Blok operacyjny
Zawiera opis operacji lub grupy operacji. Mogą to być obliczenia, w wyniku których zmieniają się wartości zmiennych.
W opisie operacji występują m.in. nazwy zmiennych i znaki działań matematycznych. Blok operacyjny ma jedno wejście i jedno wyjście.

Blok warunkowy
Z tego bloku prowadzą dwie drogi wyjścia: jedną wybiera się wtedy, gdy warunek umieszczony w bloku jest spełniony, a drugi, gdy warunek nie jest spełniony.

 
Blok wyjściowy
W tym bloku opisuje się czynności wyprowadzenia wyniku wykonywanych działań. Prowadzi
do niego jedna linia (wejście) i odchodzi od niego jedna linia (wyjście).


Blok końcowy (koniec)
Blok ten oznaczający zakończenie działań algorytmu, musi pojawić się w każdym schemacie blokowym. Prowadzi do niego jedna linia (wejście), a ponieważ jest to ostatni blok schematu blokowego, nie ma z niego wyjścia.




 

czwartek, 10 maja 2012

Tabela w html

WSTAWIANIE TABELI NA STRONĘ

Tabelę wstawiamy na stronę, by zaprezentować dane liczbowe lub rozmieścić poszczególne elementy występujące na stronie.
Tabela składa się z wierszy i komórek.

Tabelę wstawiamy komendą <table> </table>
wiersze tworzy komenda <tr> </tr>
komórki tworzy komenda <td> </td>

Formatowanie tabeli:

border="x" - grubość obramowania wyrażone w pikselach
valign="middle" (top, bottom) - położenie obiektu w komórce tabeli - na środku, u góry, na dole
align="center" (left, right) - położenie obiektu w komórce tabeli, na środku, z lewej, z prawej
width="x" - szerokość komórki/tabeli wyrażona w pikselach
height="y" - wysokość komórki wyrażona w pikselach
bgcolor="angielska nazwa koloru" - kolor wypełnienia komórki
bordercolor="angielska nazwa koloru" - kolor obramowania i linii podziałów wewnętrznych tabeli
marginwidth="x" - lewy i prawy margines w komórce określony w pikselach
margineheight="y" - górny i dolny margines w komórce określony w pikselach


 Poniżej umieszczam przykład tabeli złożonej z 3 wierszy, każdy po 3 komórki. Środkowe komórki dwóch pierwszych wierszy wypełnione są kolorem szarym, a w środkowej komórce wiersza trzeciego wstawiony jest obrazek. Cała tabela otoczona jest ramką (border) w rozmiarze 4. Tekst w pozostałych komórkach jest wyśrodkowany w poziomie i pionie.


<table border="4" width="600" height="300"
<tr>
<td width="200" height="100" valign="middle" align="center"> Tekst </td>
<td width="200" height="100" valign="middle" align="center" bgcolor="gray"> Tekst </td>
<td width="200" height="100" valign="middle" align="center"> Tekst </td>
</tr>
<tr>
<td width="200" height="100" valign="middle" align="center"> Tekst </td>
<td width="200" height="100" valign="middle" align="center" bgcolor="gray"> Tekst </td>
<td width="200" height="100" valign="middle" align="center"> Tekst </td>
</tr>
<tr>
<td width="200" height="100" valign="middle" align="center"> Tekst </td>
<td width="200" height="100" valign="middle" align="center" bgcolor="gray"> <img src="obrazek.jpg"></td>
<td width="200" height="100" valign="middle" align="center"> Tekst </td>
</tr>
</table>

środa, 9 maja 2012

Grafika na stronie

GRAFIKA NA STRONIE

Umieszczenie grafiki na stronie www <img src="ścieżka dostępu i nazwa pliku">

Używamy tylko plików w formacie .jpg   .gif    .bmp

Aby zlikwidować ramkę dookoła rysunku używamy polecenia border="0"
np. <img src="obraz.jpg"  border="0">

Położenie grafiki na stronie:
wyśrodkowanie <p align="center"> grafika </p>
wyrównanie do lewej <p align="left"> grafika </p>
wyrównanie do prwej <p align="right"> grafika </p>

Obrazek jako przycisk uruchamiający powiększenie tego samego obrazka na dodatkowej stronie www:
<a href="nazwa pliku" target="newwindow"><img src="nazwa pliku" width="x" height="y"> </a>
(width="x" to szerokość wyrażona w pikselach, height="y" to wysokość wyrażona w pikselach)

Wzajemne położenie grafiki i tekstu:

góra <img src="obrazek.jpg" align="top">

środek <img src="obrazek.jpg" align="middle">

dół  <img src="obrazek.jpg" align="bottom">

Język HTML

PIERWSZE KROKI W JĘZYKU HTML

Tekst będący źródłem strony www nazywa się dokumentem HTML. Jest on sporządzony w języku HTML.
Dokument HTML zawiera tekst, który ma być umieszczony na stronie oraz polecenia (znaczniki), które informują przeglądarki, jak wyświetlić poszczególne elementy dokumentu.
Znaczniki umieszczone są w nawiasach <... >.
Większość z nich składa się z części otwierającej < ...> i zamykającej </...>

Dokument zapisany w języku HTML zawarty jest między znacznikami <html>  </html>
Składa się z nagłówka zapisanego pomiędzy znacznikami <head> </head> oraz
treści
zapisanej pomiędzy znacznikami <body> </body>

W nagłówku umieszczamy tytuł strony pomiędzy znacznikami <title> </title> (wyświetlany w pasku tytułowym przeglądarki).
Komentarz (nie ma wpływu na wygląd strony, zawiera informacje przydatne jej autorowi) wpisuje się go pomiędzy ciąg znaków < ! - - Tu wpisujemy komentarz - - >
Określenie języka, czyli możliwości wyświetlania polskich znaków diakrytycznych uzyskujemy wpisując:
<meta http-equiv="Content-Type" control="tekst/html; charset=ISO-8859-2">
<meta http-equiv="Content-Language" content="pl">

Zmiana koloru tła strony <body bgcolor="nazwa koloru w j. angielskim">
np. <body bgcolor="pink">

Szerokość marginesów <body leftmargin="50" rightmargin="50" topmargin="25" bottommargin="25">
(wymiary podajemy w pikselach; leftmargin to lewy margines, topmargin to górny margines, bottommargin to dolny margines)

Hiperłącze (odsyłacz) <a href="adres internetowy strony">  </a>
 np. <a href="http://onet.pl"> </a>

Kolory odsyłaczy <body link="kolor1" vlink="kolor2" alink="kolor3">
(gdzie link oznacza kolor odsyłaczy, które nie zostały jeszcze użyte, vlink - kolor odsyłaczy, które zosatły już użyte, alink - kolor aktywnego odsyłacza, który właśnie został użyty)

Formatowanie testu lub czcionki

krój czcionki <font face="nazwa kroju czcionki"> treść </font>
np. <font face="Arial"> Tu wpisujemy tekst </font>

kolor czcionki <font color="nazwa koloru w j. ang."> treść </font>
np. <font color="red"> tekst </font>

rozmiar czcionki <font size="1"> treść </font>
(można wpisać rozmiar od 1 do 7)

tekst wytłuszczony <b> treść </b>

tekst pochylony <i> treść </i>

tekst podkreślony <u> treść </u>

tekst pisany czcionką o stałej szerokości <tt> treść </tt>

tekst w formie indeksu górnego <sup> treść </sup>

tekst w formie indeksu dolnego <sub> treść </sub>

wyrównanie tekstu na stronie:
justowanie <p align="justify"> treść </p>
wyśrodkowanie <p align="center"> treść </p>
wyrównanie do prawej <p align="right"> treść </p>
wyrównanie do lewej <p align="left"> treść </p> 

przeniesienie tekstu do drugiego wiersza <br>

wprowadzenie spacji &nbsp

wprowadzenie interlinii <p>


wstawienie linii <hr>

parametry określające linię:
<hr width="50%"> (długość linii w procentach, na połowę ekranu)
<hr align="center"> (wyrównanie linii do środka)
<hr size="20"> (linia o grubości 20 pikseli)
<hr color="red"> (linia w kolorze czerwonym)

Parametry te można zapisać:
<hr widht="75%" size="30" color="green" align="center">

lista numerowana <ol> oraz <li>
<ol>
<li> treść
<li> treść
<ol>
<li> treść
<li> treść
</ol>
</li>

(jeśli wewnątrz znacznika <ol> dopiszesz type="A" to w wyliczeniu wystąpią litery A, B, C; type="a" - litery a, b, c; type="I" - cyfry rzymskie I, II, III; type="1" - cyfry arabskie 1, 2, 3)


lista wypunktowana <ul> oraz <li>
<ul>
<li>treść
<li> treść
<ul>
<li>treść
<li> treść
</ul>
</li>