HTML – Wprowadzenie
Spis zagadnień Zasady Tworzenia Linki Struktura dokumentu Przykład HEAD Koniec BODY Czcionka – znaczniki Odsyłacze Grafika Kolory Edytory HTML Przeglądarki
Zasady Tworzenia Stron Tworzymy katalog, w którym będziemy przechowywać naszą stronę internetową wraz ze wszystkimi podstronami, zdjęciami, plikami dźwiękowymi. Nazwa pliku nie może być dłuższa niż 8 znaków. W nazwach plików nie możemy używać polskich znaków diakrytycznych. W nazwach plików nie używamy polskich liter. W nazwach pliku nie używamy znaków specjalnych. W nazwach pliku nie używamy spacji. Główna strona musi mieć w nazwie słowo „index”, posiadać rozszerzenie .htm lub „html. Grafika na stronie powinna mieć rozszerzenie .jpg, .gif. Spis
Element zwykle składa się z trzech części: 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 <znacznik>) zawartosci elementu (tekst i/lub inne elementy) znacznika końcowego (w formie </znacznik>) Spis Dalej
Struktura dokumentu #2 Spis Dalej <HTML> </HTML> 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. <HEAD> </HEAD> 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. <BODY> </BODY> Jest to znacznik umieszczany wewnątrz znaczników HTML, za znacznikami HEAD. Zawiera konkretną treść dokumentu. Spis Dalej
Struktura dokumentu #3 Spis Powinno to wyglądać tak: <HTML> <HEAD> Informacje nagłówkowe o dokumencie, łącznie z tytułem </HEAD> <BODY> Treść dokumentu - śródtytuły, tekst, grafika, odsyłacze itp. </BODY> </HTML> Spis
<TITLE></TITLE> HEAD #1 <TITLE></TITLE> 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ść. <META> 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. Spis Dalej
HEAD #2 Spis Dalej <BASE> Polecenie definiuje bazowy adres dokumentu. <BASE HREF="http://www.adres.com/dokument1.html"> 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. Spis Dalej
HEAD #3 Spis <LINK> 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
BODY #1 Definiując <BODY> możemy wstawić dodatkowo kilka parametrów, które zadecydują o graficznej postaci strony. <BODY BACKGROUND="URL albo ścieżka/nazwa_pliku.gif"> Parametr BACKGROUND="obrazek.gif" pozwala wybrać obrazek, który pokaże się w tle dokumentu w przeglądarce <BODY BGCOLOR="kolor"> Parametr BGCOLOR="kolor" pozwala wybrać kolor tła dokumentu, który pokaże się w tle dokumentu w przeglądarce. <BODY LEFTMARGIN="xx"> Microsoft Internet Explorer pozwala dodatkowo wprowadzić lewy margines strony. Wartość LEFTMARGIN="xx" spowoduje przesunięcie zawartości dokumentu o xx pikseli w prawo. Spis Dalej
BODY #2 Spis <BODY TOPMARGIN="xx"> 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ół. <BODY LINK="kolor1" VLINK="kolor2" ALINK="kolor3"> 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
Czcionka – znaczniki fizyczne <B></B> Tekst pogrubiony <I></I> Tekst pochylony <U></U> Tekst podkreślony <BLINK></BLINK> Tekst migający <STRIKE></STRIKE> Tekst przekreślony <SUP></SUP> Indeks górny <SUB></SUB> Indeks dolny Spis Dalej
Czcionka – znaczniki fizyczne #2 <TT> </TT> Tekst pisany czcionką o stałej szerokości znaku <BIG> </BIG> DUŻA czcionka (+1) <SMALL> </SMALL> mała czcionka (-1) Spis
<A HREF="http://host.domena">Tekst</A> 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: <A HREF="miejsce_docelowe">Tekst, na którym należy kliknąć</A> Oczywiście najczęściej stosujemy odsyłacze do stron WWW, których charakterystycznym elementem jest ciąg http://. Konstrukcja może więc mieć postać: <A HREF="http://host.domena">Tekst</A> Spis
Grafika i Multimedia Spis Dalej Wstawianie grafiki do dokumentu: Podstawowa konstrukcja ma następującą postać: <img src="plik_graficzny"> 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 (wysokość) WIDTH (szerokość) BORDER (obramowanie) VSPACE (vertical space) HSPACE (horizontal space) Spis Dalej
<MARQUEE>Tekst animacji</MARQUEE> 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. <MARQUEE>Tekst animacji</MARQUEE> Dodatkowe parametry: 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 powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i zatrzymuje się. BEHAVIOR=ALTERNATE powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i "odbija się", powracając w kierunku pierwszego. Spis Dalej
Grafika i Multimedia #3 Spis Dalej Parametry Marquee cd. : 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. Początkowy kierunek ruchu jest określany za pomocą parametru DIRECTION=LEFT lub DIRECTION=RIGHT. Domyślny jest kierunek w lewo. 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. Parametr LOOP=x pozwoli powtórzyć ruch tekstu x razy. Spis Dalej
Grafika i Multimedia #4 Spis 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 Parametr ALIGN=abc (top, middle, bottom) pozwala ustalić, gdzie (na jakiej wysokości pola) znajduje się tekst sąsiadujący z animacją. 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. Parametr SCROLLDELAY=y pozwala określić w milisekundach odstępy czasowe między kolejnymi skokami. 1000 = 1 sekunda. Spis
Kolory black silver gray white Maroon red purple fuchsia Lista 16 podstawowych barw używanych w języku HTML: black silver gray white Maroon red purple fuchsia Green lime olive yellow Navy blue teal aqua Można je również zastąpić następującymi Symbolami Spis
Symbole kolorów Wstecz
Spośród wielu zagranicznych edytorów HTML warto wymienić: Edytory HTML W środowisku Microsoft Windows polski użytkownik ma do dyspozycji całą paletę rodzimych produktów, w tym: płatne edytory: Pajączek NxG, Tiger98 i TigerII Millenium 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ć: płatne: HomeSite, HotDog, CoffeeCup HTML Editor darmowe: 1'st Page 2000, ACE HTML Editor, HTML-Kit. Spis
Do najpopularniejszych przeglądarek stron HTML należą: Przeglądarki Do najpopularniejszych przeglądarek stron HTML należą: Epiphany Galeon Internet Explorer Konqueror Lynx Mozilla Mozilla Firefox Netscape Opera Spis
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
Ciekawe Linki Spis http://www.gajdaw.pl/html/index.html Kurs HTML http://www.ncdesign.org/html/index.htm Kurs HTML (ENG) http://pl.wikipedia.org/wiki/Html Informacje dot. języka HTML http://www.htmlgoodies.com/ Dodatki do stron Spis
Tytuł i adres Wstawiona Grafika Czcionka - znaczniki Link do strony
Dziękuję za obejrzenie prezentacji Koniec Dziękuję za obejrzenie prezentacji Spis