Informatyka MTZI Transport zaoczne Wykład 2
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.
Strony WWW (World Wide Web) przeglądarki Mosaic pierwsza przeglądarka 1993 r Internet Explorer (95) Firefox(Mozilla) wcześniej Netscape Navigator (94) Opera Safari Chrome(Google)
Pierwsza dostępna specyfikacja języka HTML, nazwana HTML Tags (znaczniki HTML) została opublikowana przez: Berners'a-Lee 1991r. Zawiera 22 znaczniki Wersje późniejsze: HTML 3.0, do HTML 5 2008 r. - szkic próba standaryzacji usuwanie starych elementów
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 1989-90 Berners-Lee www, protokół http Mosaic pierwsza przeglądarka 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 SharePoint Designer 2007 Pajączek 3.0 Light Macromedia Dreamweaver Visual Studio.NET ACE HTML FREE HTML
Znaczniki (tagi) <znacznik atrybuty> zawartość </znacznik> STRUKTURA dokumentu HTML <HTML> <HEAD> <TITLE> Tytuł w nagłówku okna </TITLE> </HEAD> <BODY> Tu są elementy pojawiające się na stronie </BODY> </HTML>
Przykładowy znacznik hiperłącza (odnośnika): <A href="http://www.onet.pl"> Onet </A> atrybut znacznik hiperłącza (otwierający) znacznik zamykający zawartość (może być inny znacznik)
Podział znaczników Strukturalne, np. P akapit, TABLE tabela, IMG - obraz DIV, SPAN - grupujące Prezentacyjne, np. B pogrubienie I italic stosowane tylko dla małych fragmentów tekstu Hiperłącza (kotwice) A
Zagnieżdżanie znaczników <P> Tekst1<B><I> Tekst2 </I> Tekst 3</B></P> Tekst1 Tekst2 Tekst3 domyślnie elementy wewnętrzne dziedziczą cechy elementu zewnętrznego
Znaczniki elementów pustych <TAG /> przykładowo: <BR /> znacznik zmiany wiersza w akapicie <IMG /> <INPUT /> <HR/> można pisać: lub <BR> </BR> <BR/> lecz zgodnie z XHTML powinno być <BR /> (ze spacją)
Wybrane znaczniki Akapit - znacznik <P> Przykłady: <P style="opis_stylu"> Tytuł </P> <P style=" opis_stylu "> Tytuł2 </P> Akapity specjalne nagłówkowe (zdefiniowane style) <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> <HR style="opis stylu"/>
Kolory white aqua silver gray blue fuchsia lime red teal olive yellow maroon navy Oprócz nazw angielskich można podawać poprzedzone znakiem # 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 = 255 10 ) np. #17AACF R G B czyli np. #00FF00 to zielony
Style czcionki <B> </B> pogrubiona <I> </I> kursywa <U> </U> podkreślona <FONT size= "6"> <FONT> rozmiar ale tak się już pisze rzadko lepiej jest stosować atrybut style dla poszczególnych znaczników Kolor tła strony <BODY style="background-color: red"> atrybut style = suma cech zastąpił stare atrybuty
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 AA BA CA AB BB CC
Lista wypunktowana <UL> <UL> <LI> tekst punktu pierwszego </LI> <LI> tekst punktu drugiego </LI> <LI> tekst punktu trzeciego </LI> </UL> Lista numerowana <OL> <OL> <LI> tekst punktu pierwszego </LI> <LI> tekst punktu drugiego </LI> <LI> tekst punktu trzeciego </LI> </OL>
Grafika znacznik IMG <IMG src= /> (bez treści) lokalizacja grafiki to atrybut SRC <IMG src="ścieżka\plik_graficzny" /> <IMG SRC="plik.jpg" style="width:55px;height:45px" />
Odsyłacze (linki, hiperłącza) znacznik A 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> definicja zakładki <P id="zakladka1">rozdział 1</P> lub <P name="zakladka1"> Rozdział 1</P>
Formularze wiele znaczników <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 jednym wierszu. np: 1<DIV> wnętrze div </DIV>1 <BR /> 2<SPAN> wnętrze span</span>2
CSS arkusze stylów dla HTML nazwa cechy wartość cechy <ZNACZNIK style=" cecha1:wartość1; "> treść </ZNACZNIK> Styl znacznika może mieć wiele cech: <P style=" background-color:#ff0000; border:2px solid red;">... cechy oddzielamy średnikami
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
font-weight grubość (waga) czcionki bold lighter height wysokość elementu 10cm left top odległość od lewej (górnej) 10cm 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 padding odległość od zewnętrznego elementu odległość od krawędzi elementu 10mm 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;backgroundcolor: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
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.. <BODY>. <table style="border: 3px solid green;"><tr><td>.. itd </table> <p class="gruby"> tekst akapitu </p>.
PODSTAWOWE SYSTEMY SIECIOWE Unix system operacyjny napisany w 1969 r. w Bell Labs Linux rodzina "uniksopodobnych" systemów operacyjnych opartych o jądro Linux. Linux jest jednym z przykładów wolnego i otwartego oprogramowania (open source) Posiada wersje tzw. dystrybucje: RedHat, Debian, Ubuntu i inne Rola podstawowa sieciowy system plików, usługi sieciowe (serwery), ale może także posiadać aplikacje użytkowe. Są nakładki "okienkowe" ułatwiające administrację
System plików w Linux-ie Podobny do Windows jeden katalog główny i drzewiasta struktura katalogów Jeśli jest kilka dysków (także napędów optycznych) mogą być reprezentowane jako osobne katalogi (montowanie - mount) / symbol katalogu głównego (bez nazwy). symbol katalogu bieżącego (także ~).. symbol katalogu nadrzędnego
Programy do zdalnej pracy na odległym komputerze: telnet, putty Konfiguracja połączenia
ekran po zalogowaniu
polecenie: ls l informacja o zawartości katalogu Login: LOGIN Password: HASŁO %tu piszemy polecenia zgłoszenie powłoki prawa dostępu właściciel i grupa rozmiar - bajty data nazwa pliku lub foldera
Nazwy plików i katalogów - odróżnialne małe i duże litery - mogą się zaczynać od cyfry, niektóre znaki różne od cyfr i liter dozwolone, np. _, kropka - SPACJA w nazwie zabroniona!
Składnia polecenia: polecenie -opcje parametry
Podstawowe polecenia: pwd wyświetla nazwę katalogu bieżącego ls -l - pełna zawartość katalogu bieżącego (lub innego) opcja -l pełne informacje o prawach, rozmiarze, data utworzenia, właściciel
Poruszanie się po strukturze katalogów - polecenie cd (change directory) cd ścieżka cd.. cd / cd - zmiana katalogu bieżącego - zmiana katalogu bieżącego na nadrzędny dny - zmiana katalogu na główny - zmiana katalogu bieżącego na domowy użytkownika (powrót do domowego)
Tworzenie i usuwanie mkdir nazwa rmdir nazwa rm nazwa wzorzec - tworzenie katalogu - usuniecie katalogu (pustego!) - usunięcie pliku(-ów) lub wzorce * zastępuje dowolny ciąg znaków? zastępuje jeden znak
Przykłady wzorców rm * ls l p* rm a?? - usuwa wszystkie pliki w bieżącym katalogu - listuje pliki z nazwą na literę p - usuwa pliki na literę a i dwa dowolne znaki w nazwie (razem 3)
Kopiowanie polecenie cp cp źródło cel Przykłady cp plik1 plik2 -źródło i cel w tym samym katalogu (bieżącym) cp../plik1 plik2 -źródło w katalogu nadrzędnymi a cel w tym samym katalogu (bieżącym) cp plik1./kat/plik2 -źródło w katalogu bieżacym a cel w podrzednym do bieżącego katalogu KAT
Tworzenie pliku Tworzenie nowego pliku pustego touch nazwa_pliku Tworzenie nowego pliku z treścią cat> plik piszemy treść CTRL+D
Inne polecenia cat plik more plik head plik tail plik ps find cmp grep - listowanie zawartości pliku - listowanie zawartości pliku partiami - listowanie początkowej zawartości pliku - listowanie końcowej części pliku lista procesów wyszukiwanie plików porównywanie plików wyszukiwanie plików wg treści
Każdy plik (katalog) ma swojego właściciela indywidualnego (najczęściej jest to użytkownik, który utworzył plik) oraz właściciela zbiorowego (grupę). Właściciel pliku jest automatycznie członkiem grupy (czasami jest to grupa jednoosobowa). Pozostałym użytkownikom, również mogą być przypisane określone prawa do danego pliku. Wyjątkowym użytkownikiem jest root, który posiada wszystkie prawa dostępu do każdego pliku - może je zawsze zmienić, nawet gdy nie jest właścicielem pliku. W odniesieniu do konkretnego pliku określony użytkownik może posiadać dane prawo dostępu lub też nie.
W systemie wielodostępnym potrzebne jest narzędzie, które zapewnić powinno organizację i ochronę dostępu do danych. W Linuksie (UNIX-ie) wyróżniamy trzy rodzaje praw dostępu do pliku: prawo czytania (r - read) prawo pisania (w - write) prawo wykonywania (x - execute) Powyższe prawa w stosunku każdego pliku (katalogu) są niezależnie nadawane w trzech kategoriach: prawa właściciela pliku prawa użytkowników należących do określonej grupy prawa pozostałych użytkowników
Informacja o prawach -rwxrwxrwx właściciel grupa inni d - katalog
USTAWIANIE PRAW polecenie chmod Litera Znaczenie Parametr Liczbowy r prawo odczytu 4 w prawo zapisu 2 x prawo uruchomienia 1 - brak praw dostępu 0 Sumujemy liczby chmod 000 plik chmod 777 plik chmod 770 plik chmod 774 plik ustawienie braku praw ustawienie wszystkich praw ustawienie braku praw dla innych ustawienie braku praw wykonywania i zapisu dla innych (rwxrwxr--)
Drugi sposób metoda symboliczna u użytkownik (user) g grupa o inni + nadać - zabrać chmod o-w plik chmod g+x plik - odebranie innym prawa zapisu - nadanie grupie prawa wykonania
Posiadanie prawa: * czytania - umożliwia otwieranie pliku i przeglądanie jego zawartości * pisania - umożliwia otwieranie pliku i modyfikację jego zawartości * wykonywania - umożliwia wykonywanie programu (jeżeli jest to plik binarny) lub skryptu powłoki Dla katalogu: prawo czytania umożliwia listowanie zawartości, zaś prawo wykonywania dostęp do zawartości katalogu
Skrypt powłoki Tworzymy plik zawierający ciąg poleceń,np.: cat > plik_skryptu mkdir nowy_kat ls l ^D Musimy jeszcze nadać plikowi prawo x (wykonania)!!! Wówczas uruchamiamy plik:./plik_skryptu Wykonywane są polecenia będące treścią pliku
Dowiązania Dowiązania dzielimy na sztywne wykonywane poleceniem: ln nazwa_pliku i dowiązania miękkie, inaczej zwane symbolicznymi wykonywane poleceniem: ln s nazwa pliku
i-węzeł (ang. i-node) i-node to struktura w której jądro systemu przechowuje informacje o pliku. Każdy plik ma dokładnie jeden unikatowy i-węzeł - nazwę pliku skojarzoną wprost z i-węzłem nazywamy dowiązaniem sztywnym. Każdy plik ma co najmniej jedno sztywne dowiązanie, utworzenie nowego dowiązania sztywnego to niejako stworzenie innej nazwy dla tego samego pliku ma ten sam i-węzeł (usunięcie któregokolwiek dowiązania nie wpływa na poprawność). Dowiązanie symboliczne to skojarzenie nazwy pliku nie z jego i-węzłem, lecz z istniejącą już nazwą (ściślej: ścieżką dostępu) pliku plik dowiązania symbolicznego jest zwykle mały i ma inny i-węzeł. Podobieństwo do skrótu w Windows jeśli usuniemy plik to dowiązanie symboliczne jest puste.