Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

Tworzenie stron internetowych Tomasz Piłka Ucz się, jak gdybyś miał żyć wiecznie, żyj – jak gdybyś miał umrzeć jutro Św. Izydor z Sewilli Św. Izydor z.

Podobne prezentacje


Prezentacja na temat: "Tworzenie stron internetowych Tomasz Piłka Ucz się, jak gdybyś miał żyć wiecznie, żyj – jak gdybyś miał umrzeć jutro Św. Izydor z Sewilli Św. Izydor z."— Zapis prezentacji:

1 Tworzenie stron internetowych Tomasz Piłka Ucz się, jak gdybyś miał żyć wiecznie, żyj – jak gdybyś miał umrzeć jutro Św. Izydor z Sewilli Św. Izydor z Sewilli Podstawy HTML

2 HTML – historycznie HTML (Hypertext Markup Language) to język znacznikowy służący do pisania stron WWW. Przyjmuje się, że został opracowany przez Tima Bernersa-Lee w roku 1990, Prawdopodobnie najstarszy dokument HTML dostępny w Internecie został utworzony 13 listopada 1990 roku. Komputer NeXT, na którym pracował pierwszy serwer WWW (dziś znajduje się on w muzeum CERN w Meyrin). Tim Berners-Lee twórca koncepcji WWW (WorldWideWeb)

3 HTML HTML umożliwia zapis treści dokumentu i równocześnie opis jego układu graficznego. Dokument HTML to plik tekstowy, z ewentualnymi załącznikami, w którym znajduje się tekstowa treść przeplatana z rozkazami formatującymi, zapisanymi w formie tzw. znaczników (tags). Każdy znacznik HTML przyjmuje postać słowa kluczowego otoczonego ostrymi nawiasami (znakami " ").

4 HTML Większość znaczników HTML występuje w parach, na które składają się znacznik otwierający i znacznik zamykający. Znacznik zamykający różni się od otwierającego wyłącznie znakiem ukośnika poprzedzającym słowo kluczowe. Znaczniki HTML mogą posiadać atrybuty sterujące, które wpływają na ich funkcjonowanie. Atrybuty te są umieszczane wewnątrz znacznika, za słowem kluczowym. Język HTML dopuszcza też możliwość stosowania komentarzy, będących blokami tekstu ignorowanymi przez programy klientów HTTP (przeglądarki). Komentarze otacza się znakami " ".

5 Struktura dokumentu HTML Tekst Niewidoczna Zawartość pliku Widoczna Zawartość pliku Typ dokumentu

6 Elementy nag ł ówka tytuł strony

7 Elementy - tło dokumentu Obraz jako tło Kolor tła "kolor" może być podany imiennie (np. red, green, black, white) lub za pomocą wartości heksadecymalnych (szesnastkowych) w systemie RGB

8 Kolory w HTML-u Każda przeglądarka stron WWW pozwala uzyskać na ekranie jednocześnie 256 różnych kolorów, jednak tylko 216 z nich poprawnie wyświetlają wszystkie przeglądarki internetowe. Dowolny kolor składa się z trzech barw podstawowych: czerwonej, zielonej i niebieskiej (red, green, blue - czyli RGB). Do dyspozycji mamy 256 odcieni każdego z tych kolorów i poprzez ich mieszanie otrzymujemy dowolny inny kolor. Kolor RGB zapisywany jest w postaci #RRGGBB gdzie RR to zapisany szesnastkowo (heksadecymalnie) kolor czerwony (red), GG to kolor zielony (green), a BB to kolor niebieski (blue). Oznacza to, że każdy kolor może przyjmować wartości od 00 do FF.

9 Kolory w HTML-u Można też używać nazw kolorów. Podstawowe 16 określeń pochodzi od nazw kolorów, które można było uzyskać na komputerach z kartą graficzną VGA (komputery pokazywały kiedyś tylko 16 kolorów): white (kolor biały - #FFFFFF), black (kolor czarny - #000000), green, blue, fuchsia, yellow, lime, olive, purple, teal, silver, red, navy, maroon, gray, aqua. Ostatecznie zwiększono jednak liczbę dostępnych nazw kolorów do 140.

10 Linię poziomą wstawiamy za pomocą polecenia. Linii możemy nadać atrybuty: grubość, np.: długość określoną w pikselach lub w procencie szerokości strony wyrównanie na stronie (domyślnie na środku), np.: Atrybuty można łączyć, np.: Elementy - pozioma linia

11 Formatowanie tekstu - wiersz Polecenie przenosi tekst o jeden wiersz w dół (w ramach akapitu): To jest pierwszy wiersz To jest drugi wiersz To jest trzeci wiersz To jest czwarty wiersz Napisanie kilku kolejnych pozwala poszerzyć pionowy odstęp między elementami (przez wstawianie pustych wierszy):

12 Formatowanie tekstu - akapity Aby rozdzielić akapity, należy się posłużyć poleceniem : To jest treść pierwszego akapitu To jest treść drugiego akapitu Wyrównywanie tekstu w akapicie: środkowanie tekst akapitu wyrównywanie do prawego marginesu tekst akapitu wyrównywanie do lewego marginesu tekst akapitu wyrównanie jednocześnie do lewego i prawego marginesu tekst akapitu

13 Formatowanie tekstu - nagłówki cyfra n oznacza stopień nagłówka (mamy ich 6). Polecenie wprowadzające nagłówek stopnia pierwszego może wyglądać następująco: nagłówek pierwszego poziomu. Nagłówki można wyrównać używając polecenia align: na środku strony tytuł wyrównywanie do prawego marginesu tytuł wyrównywanie do lewego marginesu tytuł

14 Formatowanie tekstu - czcionka tekst pogrubiony tekst pochylony tekst podkreślony tekst przekreślony tekst maszynowy indeks górny indeks dolny tekst migający tekst lub obrazek na środku

15 Krój czcioki: tekst Na przykład: Time Arial Courier Kolor czcionki: tekst Formatowanie tekstu - czcionka

16 Wielkość czcionki. wartość absolutna: Tekst Możemy stosować czcionkę o wielkości od 1 do 7 (x = 1...7). Im większa wartość, tym większa czcionka w przeglądarce. wartość relatywna (względna)- wielkość zmiany. Czcionka standardowa ma wielkość 3, możemy dodać do niej co najwyżej 4 jednostki lub odjąć co najwyżej 2. Tekst Formatowanie tekstu - czcionka

17 kodefekt wykonania Pierwszy punkt Drugi punkt Trzeci punkt Pierwszy punkt Drugi punkt Trzeci punkt Listy (wykazy) wypunktowane

18 numerowanie wg wielkich liter numerowanie wg ma ł ych liter numerowanie wg wielkich liczebników rzymskich numerowanie wg ma ł ych liczebników rzymskich numerowanie wg liczebników arabskich kodefekt wykonania Pierwszy punkt Drugi punkt Trzeci punkt 1. Pierwszy punkt 2. Drugi punkt 3. Trzeci punkt Listy (wykazy) numerowane

19 Odsyłacze do stron WWW nazwa strony Przykład: Portal Onet.pl Wynik: Portal Onet.pl Uwagi: Na ekranie przeglądarki jest wyświetlany tekst, który znajduje się między znacznikami i. Adres internetowy jest podawany w cudzysłowie.

20 Odsyłacze do plików Odsyłacz do innego pliku HTML (w tym samym katalogu): Napis Odsyłacz do innego pliku HTML w katalogu podrzędnym: Napis Odsyłacz do pliku HTML w katalogu r ó wnorzędnym: Napis Odsyłacz do pliku tekstowego: Tekst Odsyłacz do pliku dźwiękowego/filmu: Tekst

21 Odsyłacze do miejsca na stronie Oznaczenie miejsca (etykiety) Odsyłacz do etykiety na tej samej stronie Tekst lub obrazek, na który klikamy Odsyłacz do etykiety na innej stronie Tekst lub obrazek, na który klikamy

22 tekst lub obrazek, na który klikamy Po kliknięciu zostanie na komputerze klienta uruchomiony standardowy program do obsługi poczty . Dodatkowe opcje: Napisz do mnie Odsyłacze do poczty elektronicznej

23 Elementy graficzne są wyświetlane na stronie dzięki poleceniu: Znacznik img może mieć dodatkowe atrybuty: width= szerokość height= wysokość alt= tekst_opisu obrazka border= grubość_obramowania align= top | middle | bottom | left | right (!) hspace= odstępy_poziome vspace= odstępy_pionowe Pliki graficzne musz ą zostać umieszczone na serwerze razem z plikami html tworz ą cymi stronę. Grafika

24 Na stronie można umieszczać r ó wnież tzw. mapy obrazkowe, czyli obrazy ze zdefiniowanymi obszarami, kt ó rych kliknięcia powoduje wyświetlenie innego pliku (są to tzw. hot-spots) przykład Definicja obrazka będącego mapą: Definicja obszar ó w hot-spots: Grafika

25 Tabela w HTML-u składa się z wierszy (zaznaczanych znacznikiem ) oraz zawartych w nich komórek (wprowadzanych znacznikiem ). W komórkach można umieszczać tekst lub grafikę. Komórka 11 Komórka 12 Komórka 21 Komórka 22 Tabele

26 Znacznik może mieć wiele atrybutów, m.in.: align – określa sposób wyrównania tabeli, width - określa szerokość tabeli w pikselach albo w postaci procentu szerokości ekranu przeglądarki, bgcolor - kolor tła we wszystkich komórkach tabeli, cellpading – ilość wolnej przestrzeni między zawartością komórki a jej brzegiem, cellspacing – przerwa (w pikselach) między poszczególnymi komórkami, border - grubość brzegów w pikselach frame - określa, które części zewnętrznych brzegów tabeli są wyświetlane. rules - pozwala manipulować wewnętrznymi liniami tabeli. Tabele

27 Niektóre atrybuty można nadać komórkom lub wierszom tabeli, np.: Atrybut colspan – umożliwia rozciągnięcie komórki tabeli na więcej kolumn w wierszu Atrybut rowspan – umożliwia rozciągnięcie komórki na więcej wierszy w kolumnie Komórkom można nadać kolor tła inny niż kolor tła całej tabeli.

28 Ramki pozwalaj ą na wy ś wietlenie na stronie innej strony internetowej lub innego pliku. tekst dla użytkowników przeglądarek nie obsługujących takich ramek Znacznik iframe mo ż e mie ć dodatkowe atrybuty: frameborder=0|1 height=wysoko ść _ramki width=szeroko ść _ramki marginwidth=szeroko ść _marginesu marginheight=wysoko ść _marginesu scrolling=yes|no|auto align=top | middle | bottom | left | right> Ramki

29 Dziękuję za uwagę


Pobierz ppt "Tworzenie stron internetowych Tomasz Piłka Ucz się, jak gdybyś miał żyć wiecznie, żyj – jak gdybyś miał umrzeć jutro Św. Izydor z Sewilli Św. Izydor z."

Podobne prezentacje


Reklamy Google