Przedmiot: Grafika komputerowa i projektowanie stron WWW

Wielkość: px

Rozpocząć pokaz od strony:

Download "Przedmiot: Grafika komputerowa i projektowanie stron WWW"

Barbara Kubicka
6 lat temu
Przeglądów:

1 KARKONOSKA PAŃSTWOWA SZKOŁA WYŻSZA Kierunek: Dziennikarstwo i komunikacja społeczna Przedmiot: Grafika komputerowa i projektowanie stron WWW 1 opracował: dr inż. Jerzy Januszewicz

2 HTML (HyperText Markup Language) to język hipertekstowego znakowania, który stanowi ustanowioną przez konsorcjum World Wide Web Consortium (W3C) specyfikację nakreślającą postać dokumentów prezentowanych w Internecie. Encyklopedia PWN

3 1980 prototyp hipertekstowego systemu informacyjnego ENQUIRE Tim Berns Lee, 1989 dwie koncepcje hipertekstowych systemów informacyjnych dla Internetu - Tim Berns Lee i Robert Cailliau, 1990 wspólny projekt WorldWideWeb zaakceptowany przez CERN, 1991 pierwsza publiczna specyfikacja języka HTML, 1995 HTML 2.0 pierwsza oficjalna specyfikacja języka 1999 HTML 4.01 specyfikacja języka opublikowana przez W3C, 2001 XHTML 1.1 rekomendacja W3C 2008 HTML 5 szkic specyfikacji 2014 HTML 5 oficjalna wersja z rekomendacją W3C.

4 HTML 4.01 XHTML 1.0 XHTML 2.0 HTML 5

5 Plik z kodem HTML to zwykły plik tekstowy mający rozszerzenie htm lub html, można do jego tworzenia wykorzystać zwykły Notatnik systemowy. Tworzenie projektów ułatwia stosowanie specjalistycznych edytorów: tekstowych, graficznych (WYSIWYG). Edytory ułatwiają pracę przez: kolorowanie kodu, podpowiedzi do znaczników HTML, automatyczne zamykanie cudzysłowów i tagów, zaawansowaną pracę z tekstem, i udogodnienia inne w zależności od edytora

6 Każdy dokument HTML składa się ze znaczników które są zapisywane w nawiasach kątowych: <znacznik> Znaczniki pojawiają się prawie zawsze parami, tzn. występuje znaczniki otwierający i znacznik zamykający: <znacznik_otwierający> </znacznik_zamykający> Znacznik otwierający może zawierać szereg dodatkowych atrybutów określających jego własności

8 Znaczniki meta, przykłady:

9 Znaczniki nagłówków pozwalają zdefiniować kilka różnych poziomów tytułów, podtytułów, śródtytułów i innych nagłówków w tekstach. W języku HTML zdefiniowanych jest sześć poziomów nagłówków, służą do tego celu znaczniki od <H1> do <H6> Przykład: <H1> Nagłówek pierwszego poziomu </H1>

10 <BODY> <h1> Nagłówek pierwszego poziomu </h1> <h2> Nagłówek drugiego poziomu </h2> <h3> Nagłówek trzeciego poziomu </h3> <h4> Nagłówek czwartego poziomu </h4> <h5> Nagłówek piątego poziomu </h5> <h6> Nagłówek szóstego poziomu </h6> </BODY>

12 Znacznik <P> wstawia się na początku każdego akapitu. Przykład: <P> Przykład akapitu </P> Znacznik zamykający jest opcjonalny, należy go jednak stosować.

13 W HTML 4.0 zdefiniowane są trzy typy list: listy numerowane, oznaczane kolejnymi liczbami, listy wypunktowane, oznaczone kropkami lub innymi symbolami, listy definicji, gdzie każdy element składa się z pojęcia oraz definicji, a pojęcie jest w jakiś sposób wyróżnione.

Znaczniki list Wszystkie znaczniki list posiadają następujące, wspólne elementy: cała lista jest objęta przez znaczniki początkowe i końcowe, odpowiednie dla danego rodzaju listy <UL> i </UL dla

14 Znaczniki list Wszystkie znaczniki list posiadają następujące, wspólne elementy: cała lista jest objęta przez znaczniki początkowe i końcowe, odpowiednie dla danego rodzaju listy <UL> i </UL dla list nienumerowanych, <OL> i </OL> dla list numerowanych, <DL> i </DL> dla list pojęć każdy element listy posiada swój własny znacznik: <DT> i <DD> dla listy pojęć oraz <LI> dla pozostałych list.

15 Atrybuty "1": standardowa numeracja za pomocą liczebników arabskich (1, 2, 3 itd.), "a": numeracja za pomocą kolejnych, małych liter alfabetu (a, b, c, d itd.), "A": numeracja za pomocą kolejnych, wielkich liter alfabetu (A, B, C, D itd.), "i": numeracja za pomocą kolejnych liczb alfabetu rzymskiego, zapisanych małymi literami (i, ii, iii, iv itd.), "I": numeracja za pomocą kolejnych liczb alfabetu rzymskiego, zapisanych wielkimi literami (I, II, III, IV itd.). Przykład: <OL TYPE= "a">

16 <ol type= "1"> <li>pierwszy wiersz <li>drugi wiersz <ol> <li>pierwszy wiersz <li>drugi wiersz <li>trzeci wiersz <li>czwarty wiersz <li>piąty wiersz </ol> <li>trzeci wiersz <li>czwarty wiersz <li>piąty wiersz <li>szósty wiersz </ol>

18 Do kodu HTML można wstawiać komentarze, czyli informacje, które nigdy nie zostaną wyświetlone przez przeglądarkę. Służą do opisu elementów strony i są przydatne dla projektantów. Komentarz jest umieszczany pomiędzy znakami:  Przykład: <! To jest tekst komentarza -->

19 Do utworzenia hiperłącza w języku HTML potrzebne są następujące informacje: nazwa pliku (lub jego URL), do którego będzie prowadziło połączenie, tekst, który będzie wyróżniony przez przeglądarkę i po wybraniu którego nastąpi realizacja połączenia. Do tworzenia hiperłączy stosowany jest znacznik: <A> z dodatkowymi atrybutami. </A>

20 Przykład 1: <A href= plik_docelowy.html > Tekst wyświetlony </A> Lokalizacja pliku plik_docelowy.html może być względna (jak w powyższym przykładzie) lub bezwzględna - z określeniem ścieżki lokalizacji na dysku lokalnym lub serwerze.

21 Przykład 2: <A href= > Wirtualna Polska </A> Hiperłącze do innej strony internetowej.

22 Odnośniki to hiperłącza do miejsc na bieżącej stronie internetowej. Do ich tworzenia używa się znacznika <a>... </a> podobnie jak w hiperłączach. Przykład: skierowanie na odnośnik: <h1> <a href="odnosniki.html#odnosnik"> Sukces! Jak go osiągnąć? </a></h1> odnośnik: <h2><a name="odnosnik">cele nie mogą być konfliktowe.</a></h2>

23 <B> <I> <TT> pogrubienie, kursywa, czcionka maszynowa (znaki o jednakowej szerokości). <U> podkreślenie, <S> przekreślenie, <BIG> czcionka większa od reszty tekstu, <SMALL> czcionka mniejsza od reszty tekstu, <SUB> indeks dolny, <SUP> indeks górny.

24 Do tworzenia linii wykorzystywany jest znacznik <hr> przykłady: <hr size="2" /> <hr width="100%" /> <hr align="center" size="4" width="200" />

25 Aby ułożyć w dowolny sposób nagłówek lub akapit, można skorzystać z atrybutu ALIGN. Posiada on trzy wartości: LEFT, RIGHT i CENTERED. Przykłady: <p align=right> Gdzie są największe możliwości? </p> <p align=center>gdzie szanse na awans? </p> <p align=left> Gdzie najmniej konkurencji?</p>

26 Bardziej elastyczną metodą kontroli położenia elementów tekstu jest znacznik <DIV>. Znacznik ten posiada kilka atrybutów, jednym z nich jest atrybut ALIGN umożliwiający wyrównanie grupy elementów do lewej (LEFT), prawej (RIGHT) lub wyśrodkowanie ich (CENTER), tak samo jak w przypadku nagłówków i akapitów. Przykład: <div align=right>... </div?

27 rozmiar <FONT SIZE="+2"> rozmiar </FONT> rodzaj <FONT FACE="Futura, Helvetica"> rodzaj czcionki </FONT> kolor <FONT COLOR="#FF0000">nowy kolor </FONT>.

28 Do wstawiania grafiki na stronę służy znacznik <img>. Posiada wiele różnych atrybutów, które pozwalają na kontrolę sposobu wyświetlania obrazu na stronie. Najważniejszym atrybutem jest src. Służy on do określenia ujętej w cudzysłów nazwy pliku lub URL obrazu, który ma zostać w danym miejscu wstawiony. Przykład: <img src= obraz.jpg />

29 Barwy można określać za pomocą rozszerzeń kolorów HTML na dwa różne sposoby: za pomocą liczby szesnastkowej, za pomocą predefiniowanej nazwy. Przykłady kolorowania tła strony: <BODY bgcolor="blue"> <BODY bgcolor="#934ce8"> Przykład kolorowania tekstu strony <BODY text="red">

30 Do tego celu służy kolejny atrybut znacznika <BODY> o nazwie BACKGROUND. Jego wartością jest nazwa pliku lub URL wskazujący obraz, który zamierzamy wykorzystać jako tło. Przykłady: <BODY BACKGROUND= gora.jpg"> <BODY BACKGROUND= tlo/roza.gif">

31 Formatowanie dla całego pliku HTML polega na zastosowaniu znacznika <style>... </style> z odpowiednimi atrybutami wewnątrz części HEAD Przykład zastosowania stylu formatowania nagłówków h2: <style type="text/css">  h2 {color: red; font-family: Arial; } </style> </head>

32 Formatowanie dla kilku plików HTML polega na utworzeniu oddzielnego pliku (*.css) z odpowiednimi deklaracjami. Przykład zawartości pliku css: h2 {color: red; font-family: Arial; } W pliku HTML który korzysta z tego pliku należy zamieścić znacznik LINK w obrębie części HEAD Przykład: <link href="styl_1.css" rel="stylesheet" type="text/css">

Podobne dokumenty

używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów

opracowanie I. K. używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów ISO-8859-2 - norma międzynarodowa określająca sposób kodowania