Dydaktyka Informatyki-internet i podstawy języka HTML

Transkrypt

1 Dydaktyka Informatyki-internet i podstawy języka HTML Instytut Matematyki Uniwersytet Gdański

2 HTML-wprowadzenie HTML to język hipertekstowego znakowania, który jest ustanowiona przez konsorcjum World Wide Web Consortium (W3C) specyfikacja, określajac a postać dokumentów prezentowanych w Internecie. Skrót HTML powstał od nazwy HyperText Markput Language. Hyper oznacza, że HTML nie jest językiem liniowym. Języki programowania maja zazwyczaj strukturę liniowa, innymi słowy struktura programu określa kolejność jego wykonywania. W przypadku stron WWW użytkownik ma możliwość skorzystania z dowolnej opcji strony w dowolnym czasie.

3 HTML-wprowadzenie Drugi człon nazwy, Text, to narzędzie, którym się posługujemy a jest to zwykły (no, może nie całkiem zwykły) tekst. Niezwykłość tekstu bierze się stad, że jest on umieszczony w specjalnych znacznikach <>, </> i one sa właśnie odpowiedzialne za kolejny człon nazwy: Markput. Dzięki znacznikom przegladarka wie, że ma do czynienia z kodem strony WWW a nie ze zwykłym tekstem. Znaczniki instruuja przegladarkę, jak interpretować wyglad tekstu. Ostatnia litera w skrócie HTML pochodzi od słowa Language, czyli język. HTML jest bowiem językiem publikowania w sieci WWW.

4 HTML-wprowadzenie Aby zaczać pisać w języku HTML należy posiadać przegladarkę internetowa (nie trzeba mieć dostępu do sieci) oraz dowolny Edytor plików tekstowych. Może to być np. zwykły Notatnik, czy Word, poleca się jednak bezpłatnie specjalne edytory do pisania kodu HTML np. Web Edit. Dokument HTML powinnień mieć rozszerzenie.html. Należy o tym pamiętać, gdy używamy Notatnika, czy też Worda do pisania stron WWW. Aby zobaczyć jak wyglada napisania przez Ciebie strona WWW należy zapisany dokument otworzyć za pomoca przegladarki internetowej.

5 HTML-podstawy Oto przykład podstawowego dokumentu HTML: <html> <head> <meta http-equiv= content-type content= text/html; charset=iso > <title>tytul strony</title> </head> <body> Treść strony </body> </html> Zadanie Utwórz swoja pierwsza stronę korzystajac z powyższego kodu. Nadaj jej tytuł i kilka zdań treści.

6 HTML-podstawy Znaczniki sa stosowanie zazwyczaj w parach <znacznik otwierajacy>... </znacznik zamykajacy> np. <html> </html>. Choć od tej reguły jest kilka wyjatków np. <br> znacznik nowego wiersza; <hr> znacznik umożliwiajacy dodanie linii poziomej. Atrybuty znacznika dostarczaja dodatkowych informacji o elementach strony np. <body bgcolor= green >. Atrybut definiowany jest za pomoca pary atrybut= wartość i zawsze umieszczany jest w znaczniku otwierajacym danego elementu HTML.

7 HTML-podstawy <html> </html> informuję przegladarkę, że to co jest pomiędzy stanowi kod HTML <head> </head> wyznacza obszar nagłówka strony. <body> </body> wyznacza obszar treści strony. Aby umożliwić kodowanie polskich znaków wpisujemy w nagłówku: <meta http-equiv= content-type content= text/html; charset=iso >

8 HTML-podstawy Do przekształcania tekstu w nagłówek służa znaczniki od <h1> do <h6> (nie zapomnij o znacznikach zamykajacych </h1> do </h6>). Znaczniki nagłówka powiększaja i pogrubiaja tekst. Aby wycentrować tekst używamy znacznika <center> np. <center><h2>mój nagłówek</h2></center> <p> nowy akapit. <br> nowa linia (bez znacznika zamykajacego) <b> pogrubienie <i> kursywa <u> podkreślenie <tt> czcionka maszynowa <big> czcionka większa od reszty tekstu <small> czcionka mniejsza od reszty tekstu

9 HTML-podstawy <sub> indeks dolny <sup> indeks górny <hr> umieszcza w tekście linie pozioma. Zadanie Napisz stronę internetowa, która będzie wygladała identycznie jak podana na kolejnym slajdzie

10 HTML-podstawy Rysunek : strona do zadania 2

11 HTML-podstawy Atrybuty znacznika <hr>: size= piksele określa grubość linii (najmniejsza 2) width= piksele wartość% określa długość linii w poziomie (w pikselach lub procentach) align= left right center definicja wyrównania lenni. Np. <hr width= 50% size= 3 align= center > Zadanie Zmodyfikuj stronę, aby wygladała tak jak na kolejnym slajdzie.

13 HTML-listy <ul> definiuje listę wypunktowana <ol> definiuje listę numerowaniom <li> definiuje elementy listy Przykład <ul> <li>pierwszy podpunkt</li> <li>drugi podpunkt</li> </ul> Zadanie Zrób stronę taka jak na kolejnym slajdzie.

15 HTML-wstawianie obrazu Wstawienie obrazków umożliwia znacznik <img />. Znacznik ten nie ma znacznika zamykajacego. Przykład <img src= nazwa.jpg alt= tekst alternatywny /> Przy nazwie obrazu zapisujemy też rozszerzenie.jpg lub.gif. Tekst alternatywny pokaże się, gdy obrazek nie będzie mógł być wyświetlony. Niektóre atrybuty znacznika <img /> align= left right obrazek jest wyświetlony przy lewym prawym marginiesie vspace= piksele odległość obrazka od tekstu w pionie hspace= piksele odległość obrazka od tekstu w poziomie

16 HTML-wstawianie obrazu height= piksele wartość% określa wysokość obrazu w pikselach w procentach w stosunku do oryginału. widght= piksele wartość% określa szerokość obrazu w pikselach w procentach w stosunku do oryginał. Przykład <img src= tablica.jpg height= 50% widht= 50% alt= obrazek align= right /> Zadanie Wykonaj stronę taka sama jak przykładowa (dowolny tekst i obrazek skopiuj z internetu, ważne jest tylko rozmieszczenie tekstów i obrazków).

17 HTML-podstawy

18 HTML-tworzenie połaczeń Znacznik HTML, za pomoca którego tworzone jest połaczenie, nosi nazwę znacznika zakotwiczenia i ma następujac a postać: <a href= nazwa.html >Tekst połaczenia</a> Przykład <a href= dydaktyka_inf.html >Dydaktyka informatyki</a> <a href= 01 dyd info.pdf > Wprowadzenie</a> Zadanie Zrobić stronie internetowa na której będa m.in. 2-3 obrazy, lista, 2-3 odnośniki do innych stron. Wykorzystaj informacje poznane na zajęciach jak i na stronie (na razie nie trzeba robić tabel i ramek, zagadnienia te zostana omówione w dalszej części zajęć).

19 HTML-kaskadowy arkusz stylów (CSS) Kaskadowy arkusz stylów CSS (Cascading Style Sheets) służy do bf definiowania sposobu wyświetlania elementów HTML. Z kaskadowymi arkuszami stylów wiaż a się dwa pojęcia: dziedziczenie stylów i ich kaskadowy charakter. Podstawowe zalety stylów CSS to możliwość szybkiej i prostej modyfikacji stylu oraz błyskawiczna wręcz aktualizacja postaci dokumentu w przypadku takich zmian. Definicja stylu może się pojawić w konkretnym elemencie HTML (styl wpisany), między znacznikami <head> </head> (styl osadzony) lub może zostać pobrany z pliku zewnętrznego (zewnętrzny lub łaczony arkusz stylów). Wszystkie typy arkusza CSS moga być stosowane jednocześnie. Łaczone arkusze stylów sa przechowywane w zewnętrznym pliku o rozszerzeniu.css

20 HTML-kaskadowy arkusz stylów (CSS) Oddziaływanie stylów z arkuszy zewnętrznych może być modyfikowane przez styl zdefiniowany w nagłówku dokumentu, to zaś może być modyfikowane przez styl zdefiniowany bezpośrednio w treści dokumentu. Postać arkusza stylów zależy od typu arkusza. Styl wpisany a więc zdefiniowany w konkretnym znaczniku ma postać: <znacznik style= właściwość: wartość; > Styl wpisany powinień być stosowany tylko wtedy, gdy konieczne jest zastosowanie specyficznego stylu do pojedynczego elementu.

21 HTML-kaskadowy arkusz stylów (CSS) Przykład: <p style="font-size: 25pt» To jest akapit ze stylem</p> <p> To jest akapit bez stylu</p> <p style="font-size: 16pt» To jest akapit z nowym stylem</p> Zadanie Stwórz stronę z trzema zdaniami i do jednego z tych zdań zastosuj styl wpisany.

22 HTML-kaskadowy arkusz stylów (CSS) Styl osadzony umieszczony w nagłówku ma następujac a postać: <style type= text/css >  </style> Jeśli wartość ma postać wielowyrazowa to umieszczamy ja w cudzysłowie.

23 HTML-kaskadowy arkusz stylów (CSS) Przykład: <head> <title>nawigacja</title> <meta http-equiv= Content-Type content= text/html; charset=iso > <style type= text/css >  </style> </head> Zwróć uwagę w jaki sposób jednemu selektorowi przypisać kilka właściwości oraz kilku selektorom te same własności.

24 HTML-kaskadowy arkusz stylów (CSS) Pobierz Tabelę 1 z właściwościami stylu. Zadanie Stwórz stronę poświęcona pakietowi Ms Office (krótki opis każdego z programów ze zdjeciem jak wyglada ten program po uruchomieniu). Zdjęcia maja być wykonane samodzielnie za pomoca zrzutu ekranu (po otwarciu programu wykonać zrzut ekrazu, otworzyć obrazek w paincie, zmiejszyć rozmiar i zapisać jako JPEG). Na stronie powinnien być zdefiniowany styl osadzony w którym zostanie użyte co najmniej 7 własności z pobranej tabeli 1. Tekst powinien być wyjustowany.

25 HTML-kaskadowy arkusz stylów (CSS) Zewnętrzny (lub inaczej łaczony) arkusz stylów to doskonałe rozwiazanie dla witryn, czyli układu wielu stron. Wówczas te same style moga być stosowane do wszystkich stron witryny. Aby zmienić wyglad wszystkich witryn wystarczy zrobić korektę stylu tylko w jednym pliku. W kodzie każdej ze stron, korzystajacych z zewnętrznego arkusza stylów, musi zostać zdefiniowane połaczenie z plikiem zewnętrznym za pomoca atrybutu link. Umieścia się go w sekcji head. <head> <link rel= stylesheet type= text/css href= mojestyle.css > </head> Definicja stylu jest umieszczona w pliku mojestyle.css - nazwa może być dowolna, ale rozszerzenie musi być.css.

26 HTML-kaskadowy arkusz stylów (CSS) Plik.css można przygotować w dowolnym edytorze tekstu. Plik nie powinień zawierać znaczników HTML. Oto przykład zawartości. hr {color: sienna} p {margin-left: 20px; font-size: 14pt} body {bacground-image: url( images/obraz.gif )}

27 HTML-kaskadowy arkusz stylów (CSS) Zadanie Stwórz stronie poświęconiom programom graficznym (paint, Gimp). Stwórz mini witrynę. Ze strony domowej (stwórz ja) utwórz połaczenia do stron o programach pakieku Ms office i programów graficznych. Styl który był zastosowany do strony poświęconej programom Ms Office przenieś teraz do zewnętrznego pliku i stwórz z niego zewnętrzny arkusz stylów. Pamiętaj, aby na każdej ze stron witryny zdefiniować połaczenie z zewnętrznym arkuszem stylów.

28 HTML-tabele Tabela w HTML ma następujac a strukturę: <table> <caption> Tytuł tabeli </caption> <tr> </tr> <tr> </tr> <tr> <th>nagłówek 1</th> <td>wiersz 1 kol 1</td> <td>wiersz 2 kol 1</td> </tr> </table> <th>nagłówek 2</th> <td>wiersz 1 kol 2</td> <td>wiersz 2 kol 2</td>

29 HTML-tabele <table> - znacznik tabeli, <tr> - znacznikiem wiersza, <td> - znacznik pojedynczej komórki, <th> - znacznik nagłówka (automatycznie pogrubia tekst), <caption> - znacznik nazwy tabeli. Tabele w HTML pozwalaja na sterowanie układem m.in. danych, tekstu, obrazków, połaczeń, a także innych tabel. Zadanie Stwórz tabelkę wygladaj ac a dokładnie jak ta na kolejnym slajdzie.

30 HTML-tabele

31 HTML-tabele Atrybuty znacznika table: border= x - określa grubość ramki (x pikseli), cellpadding= x - określa szerokość marginesu w pikselach, cellspacing= x - szerokość odstępu między sasiednimi komórkami w pikselach, Przykład: <table border= 3 cellpadding= 10 cellspacing= 20 > Zadanie Zmodyfikuj poprzednia tabelkę w ten sposób, aby miała obramowanie grubości 2 pikseli i odległość tekstu od krawędzi komórki wynosiła 15 pikseli.

32 HTML-tabele Atrybutem caption umożliwiajacym zmiane położenia tytułu jest align= ustawienie, gdzie jako ustawienie należy podać: top - tytuł górny (domyślnie) bottom - tytuł dolny left - ustawienie przy lewej krawędzi tabeli right - przy prawej krawędzi center - na środku Przykład: <caption align= bottom >Tytuł</caption>

33 HTML-tabele Zmianę rozmiarów całej tabeli lub pojedynczej komórki umożliwiaja atrybuty: width= x x% - długość w pikselach lub procentach. height= y y% - wysokość w pikselach lub procentach. Zadanie Wykonaj stronę taka jak na kolejnym slajdzie. Zastosuj do tego tabelę bez obramowania. Tabelka powinna być rozciagnięta na cały ekran. Uwaga: Więcej o tworzeniu tabel można znaleźć na stronie

34 HTML-tabele

35 HTML-ramki Ramka to zdefiniowania przez jej twórcę część okna przegladarki, której przypisano właściwości takie jak całemu oknu. Tak więc ramka może być przewijana niezależnie od pozostałej zawartości okna. Można także zmieniać jej rozmiary. Zawartość ramki tworzy standardowy plik HTML. <frame> - znacznik tworzacy ramkę. Atrybuty <frame> to: src= nazwa pliku.htm - przypisujemy ramcę dokument, scrolling= yes no auto - sposób przewijania ramki, name= nazwa ramki - nadaje nazwę ramce, frameborder= czy ma być wyświetlane obramowanie ramki, marginheight= x wymusza dodatkowy odstęp u góry i u dołu ramki (w pikselach), marginwidth= x - wymusza margines lewy i prawy (w pikselach).

36 HTML-ramki Przykład: <frame scrolling= auto name= nazwa ramki src= nazwa pliku.htm > Układ ramek jest definiowany w pliku HTML, w którym element body został zastapiony elementem frameset. Znacznik <frameset> przyjmuje dwa atrybuty cols i rows, które umożliwiaja określenie liczby kolumn i wierszy na które zostanie podzielone okno przegladarki. Oto w jaki sposób możemy podzielić okno przegladarki na kolumny o określonych rozmiarach: <frameset cols= szerokość kol1, szerokość kol2,... >

37 HTML-ramki Liczba kolumn określana jest liczba wartości atrybutu cols. Wartości te sa podawane kolejno z przecinkami. Szerokość kolumny można zdefiniować w pikselach, w procentach oraz za pomoca znaku (maksymalna możliwa szerokość). Przykład podziału okna przegladarki na 3 kolumny i wczytania do każdej z kolumn osobnego dokumentu HTML. <html> <head> <title>układ trzech ramek</title> </head> <frameset cols= 25%,50%,25%> <frame src= ramka1.html > <frame src= ramka2.html > <frame src= ramka3.html > </frameset> </html>

38 HTML-ramki Zadanie Stwórz stronę WWW poświęconia systemom operacyjnym. Strona powinna być złożona z 3 ramek. W środkowej ramce powinien znajdować się tekst. W dwóch pozostałych maja znajdować się obrazki oraz odnośniki do innych stron. W ramkach maja zostać ustawione marginesy. Należy dopuścić możliwość przewijania tylko w środkowej ramce. UWAGA: Na stronie powinny się znaleźć m.in. następujace informacje: czym jest i jakie sa zadania systemu operacyjnego, krótka informacja o systemach MS DOS, Microsoft Windows, Mac OS, Unix, Linux oraz Android.