Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

HTML – Wprowadzenie. Spis zagadnień Zasady Tworzenia Linki Zasady Tworzenia Linki Struktura dokumentuPrzykładStruktura dokumentuPrzykład HEADKoniecHEADKoniec.

Podobne prezentacje


Prezentacja na temat: "HTML – Wprowadzenie. Spis zagadnień Zasady Tworzenia Linki Zasady Tworzenia Linki Struktura dokumentuPrzykładStruktura dokumentuPrzykład HEADKoniecHEADKoniec."— Zapis prezentacji:

1 HTML – Wprowadzenie

2 Spis zagadnień Zasady Tworzenia Linki Zasady Tworzenia Linki Struktura dokumentuPrzykładStruktura dokumentuPrzykład HEADKoniecHEADKoniec BODY Czcionka – znaczniki Odsyłacze Grafika Kolory Edytory HTML Przeglądarki

3 Zasady Tworzenia Stron 1.Tworzymy katalog, w którym będziemy przechowywać naszą stronę internetową wraz ze wszystkimi podstronami, zdjęciami, plikami dźwiękowymi. 2.Nazwa pliku nie może być dłuższa niż 8 znaków. 3.W nazwach plików nie możemy używać polskich znaków diakrytycznych. 4.W nazwach plików nie używamy polskich liter. 5.W nazwach pliku nie używamy znaków specjalnych. 6.W nazwach pliku nie używamy spacji. 7.Główna strona musi mieć w nazwie słowo „index”, posiadać rozszerzenie.htm lub „html. 8.Grafika na stronie powinna mieć rozszerzenie.jpg,.gif. Spis

4 Struktura dokumentu #1 Dokument HTML jest zwykłym dokumentem tekstowym o ustalonym kodowaniu znaków składającym się z elementów/tagów/znaczników. Element zwykle składa się z trzech części: znacznika początkowego (w formie ) zawartosci elementu (tekst i/lub inne elementy) znacznika końcowego (w formie ) Spis Dalej

5 Struktura dokumentu #2 Jest to otwierający i zamykający znacznik dokumentu, a między nimi jest umieszczana cała treść. Znacznik nie jest bezpośrednio widoczny w przeglądarce. Znacznik jest umieszczany wewnątrz znaczników HTML i sam zawiera podstawowe informacje o dokumencie, w pierwszym rzędzie tytuł strony. W ramach tego znacznika jest umieszczana tzw. część nagłówkowa. Jest to znacznik umieszczany wewnątrz znaczników HTML, za znacznikami HEAD. Zawiera konkretną treść dokumentu. Dalej Spis

6 Struktura dokumentu #3 Powinno to wyglądać tak: Informacje nagłówkowe o dokumencie, łącznie z tytułem Treść dokumentu - śródtytuły, tekst, grafika, odsyłacze itp. Spis

7 HEAD #1 Najważniejszym elementem jest tytuł strony, który ukazuje się w belce tytułowej przeglądarki. Zaleca się zwykle nieprzekraczanie 40 znaków. Tytułu nie należy mylić z pierwszym nagłówkiem strony, aczkolwiek oba te elementy mogą mieć oczywiście tę samą treść. Jest to opcjonalne polecenie, które bardziej szczegółowo informuje o zawartości dokumentu, np. dla celów katalogowych czy indeksów, wykorzystywanych przez odpowiednie programy, np. wyszukiwarki sieciowe. Zawiera ono trzy atrybuty: HTTP- EQUIV, NAME i CONTENT w kombinacji pierwszy z trzecim lub drugi z trzecim. HTTP-EQUIV definiuje zmienne systemowe, natomiast NAME - zmienne użytkownika. Dalej Spis

8 HEAD #2 Polecenie definiuje bazowy adres dokumentu. Polecenie w tej postaci zapewnia poprawność relatywnych odsyłaczy w dokumencie. Niekiedy dokumenty są przenoszone do innych miejsc, gdy wymaga tego porządek na serwerze. Jednak w dokumentach znajdują się zazwyczaj relatywne odsyłacze do innych stron na serwerze, a nie odsyłacze absolutne. Oznacza to, że nie jest w nich podawana pełna ścieżka dostępu, lecz jedynie jej fragmenty. Jest to znacznie wygodniejsze w trakcie konstruowania dokumentu. Dalej Spis

9 HEAD #3 Polecenie ma określać hierarchiczny porządek w zespole dokumentów dla celów nawigacyjnych. W tym miejscu warto o nim wspomnieć jedynie w kontekście stylów dołączanych, które w Internet Explorerze wpływają na postać wyświetlanego dokumentu. Spis

10 BODY #1 Definiując możemy wstawić dodatkowo kilka parametrów, które zadecydują o graficznej postaci strony. Parametr BACKGROUND="obrazek.gif" pozwala wybrać obrazek, który pokaże się w tle dokumentu w przeglądarce Parametr BGCOLOR="kolor" pozwala wybrać kolor tła dokumentu, który pokaże się w tle dokumentu w przeglądarce. Microsoft Internet Explorer pozwala dodatkowo wprowadzić lewy margines strony. Wartość LEFTMARGIN="xx" spowoduje przesunięcie zawartości dokumentu o xx pikseli w prawo. Dalej Spis

11 BODY #2 Ta sama przeglądarka akceptuje kod wprowadzający górny margines strony. Wartość TOPMARGIN="yy" spowoduje przesunięcie zawartości dokumentu o yy pikseli w dół. Możemy również określić kolory odsyłaczy. LINK="kolor" określa standardowy kolor odsyłacza. VLINK="kolor" (visited link) określa kolor odsyłacza, który został co najmniej raz użyty. ALINK="kolor" (active link) określa kolor aktywnego odsyłacza. Spis

12 Czcionka – znaczniki fizyczne Tekst pogrubiony Tekst pochylony Tekst podkreślony Tekst migający Tekst przekreślony Indeks górny Indeks dolny Spis Dalej

13 Czcionka – znaczniki fizyczne #2 Tekst pisany czcionką o stałej szerokości znaku DUŻA czcionka (+1) mała czcionka (-1) Spis

14 Odsyłacze W dokumencie możemy zamieszczać odsyłacze do różnych typów plików. Najczęściej jest to dokument HTML, choć równie dobrze może to być plik tekstowy (TXT), obrazek GIF lub JPG, plik dźwiękowy WAV, MID, AU czu AIFF, dokument Worda, plik Acrobata lub Envoya Odsyłaczem jest konstrukcja, która wskazuje pewne miejsce w Internecie i pozwala skoczyć do niego za pomocą kliknięcia na niej myszką. Jej budowę można obrazowo przedstawić w postaci: Tekst, na którym należy kliknąć Tekst, na którym należy kliknąć Oczywiście najczęściej stosujemy odsyłacze do stron WWW, których charakterystycznym elementem jest ciąg Konstrukcja może więc mieć postać: Tekst Tekst Spis

15 Grafika i Multimedia Wstawianie grafiki do dokumentu: Wstawianie grafiki do dokumentu: Podstawowa konstrukcja ma następującą postać: IMG jest skrótem od Image (obraz), natomiast SRC jest skrótem od Source (żródło) Jeśli nie stosujemy żadnych dodatkowych parametrów, obrazek jest ustawiany przy lewym brzegu dokumentu i ma wielkość oryginału. Możemy jednak użyć szeregu parametrów: HEIGHT HEIGHT (wysokość) WIDTH WIDTH (szerokość) BORDER BORDER (obramowanie) VSPACE VSPACE (vertical space) HSPACE HSPACE (horizontal space) Spis Dalej

16 Grafika i Multimedia #2 Efektownym elementem graficznym, akceptowanym przez Internet Explorer, a wprowadzonym przez Microsoft w ramach tzw. Microsoft Extensions, jest Marquee. Jest to "pływający" w poprzek ekranu napis. Tekst animacji Tekst animacji Dodatkowe parametry: BEHAVIOR=SCROLL BEHAVIOR=SCROLL powoduje, że tekst porusza się od jednego brzegu strony w kierunku drugiego, znika za nim i wypływa ponownie zza pierwszego brzegu. BEHAVIOR=SLIDE BEHAVIOR=SLIDE powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i zatrzymuje się. BEHAVIOR=ALTERNATE BEHAVIOR=ALTERNATE powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i "odbija się", powracając w kierunku pierwszego. Spis Dalej

17 Grafika i Multimedia #3 Parametry Marquee cd. : BGCOLOR=kolor BGCOLOR=kolor pozwala określić kolor tła, czyli drogi, po której porusza się napis. Kolor można podać w postaci numerycznej lub słownej. DIRECTION=LEFT DIRECTION=RIGHT Początkowy kierunek ruchu jest określany za pomocą parametru DIRECTION=LEFT lub DIRECTION=RIGHT. Domyślny jest kierunek w lewo. HEIGHT=xWIDTH=y Fizyczne wymiary drogi są wyznaczone przez parametry HEIGHT=x (wysokość) i WIDTH=y (szerokość). Można je wyrazić w pikselach lub procencie wysokości i szerokości ekranu. LOOP=x Parametr LOOP=x pozwoli powtórzyć ruch tekstu x razy. Spis Dalej

18 Grafika i Multimedia #4 HSPACE=xVSPACE=y Parametry HSPACE=x i VSPACE=y pozwalają określić odległość pola animacji w poziomie i/lub w pionie od sąsiadujących elementów, np. tekstu ALIGN=abc Parametr ALIGN=abc (top, middle, bottom) pozwala ustalić, gdzie (na jakiej wysokości pola) znajduje się tekst sąsiadujący z animacją. SCROLLAMOUNT=x Parametr SCROLLAMOUNT=x pozwala określić w pikselach skoki tekstu (ruch odbywa się skokami po x pikseli). Przy niewielkiej wartości ruch jest płynny i wolniejszy, przy dużych - nieco szarpany i szybszy. SCROLLDELAY=y Parametr SCROLLDELAY=y pozwala określić w milisekundach odstępy czasowe między kolejnymi skokami = 1 sekunda. Spis

19 Kolory Lista 16 podstawowych barw używanych w języku HTML: black silver graywhite Maroon redpurplefuchsia Maroon redpurplefuchsia Green limeolive yellow Green limeolive yellow Navyblue teal aqua Symbolami Można je również zastąpić następującymi Symbolami Symbolami Spis

20 Symbole kolorów Wstecz

21 Edytory HTML W środowisku Microsoft Windows polski użytkownik ma do dyspozycji całą paletę rodzimych produktów, w tym W środowisku Microsoft Windows polski użytkownik ma do dyspozycji całą paletę rodzimych produktów, w tym: Pajączek NxGTiger98TigerII Millenium płatne edytory: Pajączek NxG, Tiger98 i TigerII Millenium edHTMLExtra PageezHTMLHTML-owiecKiciaMiniPad SnapeTigerIIWebPageXpressWebsiteProZajączekPHP darmowe edytory: edHTML, Extra Page, ezHTML, HTML-owiec, Kicia, MiniPad, Snape, TigerII, WebPage Xpress, Website Pro, Zajączek PHP. Spośród wielu zagranicznych edytorów HTML warto wymienić: HomeSiteHotDogCoffeeCupHTML Editor płatne: HomeSite, HotDog, CoffeeCup HTML Editor 1'st Page2000ACE HTML EditorHTML-Kit darmowe: 1'st Page 2000, ACE HTML Editor, HTML-Kit. Spis

22 Przeglądarki Do najpopularniejszych przeglądarek stron HTML należą: Epiphany Galeon Internet Explorer Konqueror Lynx Mozilla Mozilla Firefox Netscape Opera Spis

23 Historia Wraz z rozwojem sieci WWW, a zwłaszcza jej upowszechnianiem, pojawiła się potrzeba dołączania do tekstów tabel, grafiki i plików multimedialnych, w wyniku czego zaczęły powstawać kolejne wersje HTML-a. Wersje te były rozwijane przez firmy produkujące przeglądarki stron WWW, bez wzajemnych konsultacji, co doprowadziło do częściowej niekompatybilności wersji HTML-a zaimplementowanych w przeglądarkach różnych producentów. Próbą odpowiedzi na tę sytuację było stworzenie W3C czyli World Wide Web Consortium, organizacji która zajmuje się ustanawianiem wspólnych standardów HTML-a, a także innych spraw związanych z pisaniem stron WWW. Kolejne "oficjalne" wersje HTML-a są uzgadnianie przez szeroką dyskusję ekspertów i przedstawicieli zainteresowanych firm i następnie definiowane za pomocą SGML-a. Pierwszą taką oficjalną wersją HTML-a był HTML 2, którego niewątpliwym sukcesem było to, że wszystkie ważniejsze przeglądarki takie jak Internet Explorer i Netscape są w zasadzie z nim zgodne. Spis

24 Ciekawe Linki HTML HTML HTML HTML (ENG) dot. języka HTML do stron Spis

25 Czcionka - znaczniki Link do strony Wstawiona Grafika Tytuł i adres

26 Dziękuję za obejrzenie prezentacji Spis


Pobierz ppt "HTML – Wprowadzenie. Spis zagadnień Zasady Tworzenia Linki Zasady Tworzenia Linki Struktura dokumentuPrzykładStruktura dokumentuPrzykład HEADKoniecHEADKoniec."

Podobne prezentacje


Reklamy Google