Technologie Informacyjne Wykªad 6

(1)

Paweª Witkowski

MIMUW

HTML Przegl¡d znaczników Parametry strony Wygl¡d strony

Technologie Informacyjne Wykªad 6

Paweª Witkowski MIMUW Wiosna 2010

Paweª Witkowski MIMUW Technologie Informacyjne Wykªad 6

(2)

Paweª Witkowski

MIMUW

HTML

HyperText Markup Language

J¦zyk oparty na znacznikach Opisuje struktur¦ stron www

Pozwala na umieszczanie odno±ników do zasobów zewn¦trznych

Umo»liwia tworzenie formularzy do zbierania danych Umo»liwia zanurzanie obrazów, animacji, d¹wi¦ków, lmów i innych typów danych

(3)

Paweª Witkowski

MIMUW

HTML

HyperText Markup Language J¦zyk oparty na znacznikach

Opisuje struktur¦ stron www

(4)

Paweª Witkowski

MIMUW

HTML

HyperText Markup Language J¦zyk oparty na znacznikach Opisuje struktur¦ stron www

(5)

Paweª Witkowski

MIMUW

HTML

(6)

Paweª Witkowski

MIMUW

HTML

Umo»liwia tworzenie formularzy do zbierania danych

Umo»liwia zanurzanie obrazów, animacji, d¹wi¦ków, lmów i innych typów danych

(7)

Paweª Witkowski

MIMUW

HTML

(8)

Paweª Witkowski

MIMUW

dokumenty HTML

Pliki tekstowe,bez formatowania

Tre±¢ razem ze znacznikami

Przygotowywanie w dowolnym edytorze tekstowym Notatnik, Notepad++,...

Edytory wspomagaj¡ce

PSPad, Paj¡czek, Dreamweaver,...

(9)

Paweª Witkowski

MIMUW

dokumenty HTML

Pliki tekstowe,bez formatowania Tre±¢ razem ze znacznikami

(10)

Paweª Witkowski

MIMUW

dokumenty HTML

Przygotowywanie w dowolnym edytorze tekstowym

Notatnik, Notepad++,... Edytory wspomagaj¡ce

(11)

Paweª Witkowski

MIMUW

dokumenty HTML

(12)

Paweª Witkowski

MIMUW

dokumenty HTML

(13)

Paweª Witkowski

MIMUW

dokumenty HTML

(14)

Paweª Witkowski

MIMUW

HTML

Znaczniki HTML sªu»¡ to deniowania w tre±ci strony

Akapitów Nagªówków ListTabel Obrazków Odno±ników Pól formularzy Innych obiektów

(15)

Paweª Witkowski

MIMUW

HTML

Znaczniki HTML sªu»¡ to deniowania w tre±ci strony Akapitów

Nagªówków ListTabel Obrazków Odno±ników Pól formularzy Innych obiektów

(16)

Paweª Witkowski

MIMUW

HTML

Nagªówków

ListTabel Obrazków Odno±ników Pól formularzy Innych obiektów

(17)

Paweª Witkowski

MIMUW

HTML

Nagªówków List

Tabel Obrazków Odno±ników Pól formularzy Innych obiektów

(18)

Paweª Witkowski

MIMUW

HTML

Nagªówków ListTabel

Obrazków Odno±ników Pól formularzy Innych obiektów

(19)

Paweª Witkowski

MIMUW

HTML

Nagªówków ListTabel Obrazków

Odno±ników Pól formularzy Innych obiektów

(20)

Paweª Witkowski

MIMUW

HTML

Nagªówków ListTabel Obrazków Odno±ników

Pól formularzy Innych obiektów

(21)

Paweª Witkowski

MIMUW

HTML

Nagªówków ListTabel Obrazków Odno±ników Pól formularzy

Innych obiektów

(22)

Paweª Witkowski

MIMUW

HTML

Nagªówków ListTabel Obrazków Odno±ników Pól formularzy Innych obiektów

(23)

Paweª Witkowski

MIMUW

U»ywanie znaczników

Znacznik otwieraj¡cy - np. <p>

Tekst w znaczniku - np. tre±¢ akapitu Znacznik zamykaj¡cy - np. </p>

Znaczniki samozamykaj¡ce - np. koniec linii <br /> Atrybuty znaczników - np. cel odno±nika

(24)

Paweª Witkowski

MIMUW

U»ywanie znaczników

Tekst w znaczniku - np. tre±¢ akapitu

Znacznik zamykaj¡cy - np. </p>

(25)

Paweª Witkowski

MIMUW

U»ywanie znaczników

(26)

Paweª Witkowski

MIMUW

U»ywanie znaczników

Znaczniki samozamykaj¡ce - np. koniec linii <br />

Atrybuty znaczników - np. cel odno±nika

(27)

Paweª Witkowski

MIMUW

U»ywanie znaczników

(28)

Paweª Witkowski

MIMUW

U»ywanie znaczników

(29)

Paweª Witkowski

MIMUW

Nagªówek i tre±¢

Nagªówek strony (head)

Tre±¢ strony (body)

Podstawowa struktura strony

<html>

<head>

...

</head>

<body>

...</body>

</html>

(30)

Paweª Witkowski

MIMUW

Nagªówek i tre±¢

Nagªówek strony (head) Tre±¢ strony (body) Podstawowa struktura strony

<html>

<head>

...

</head>

<body>

...

(31)

Paweª Witkowski

MIMUW

Akapity i ko«ce linii

Przegl¡darki ignoruj¡ ko«ce linii i wielokrotne spacje

Struktur¦ tekstu deniujemy wyª¡cznie za pomoc¡ znaczników

Akapity - znacznik <p>

Koniec wiersza - znacznik <br />

Akapity i nagªówki

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, <br />

sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

(32)

Paweª Witkowski

MIMUW

Akapity i ko«ce linii

Przegl¡darki ignoruj¡ ko«ce linii i wielokrotne spacje Struktur¦ tekstu deniujemy wyª¡cznie za pomoc¡

znaczników

sed do eiusmod tempor incididunt

(33)

Paweª Witkowski

MIMUW

Akapity i ko«ce linii

znaczników

sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

(34)

Paweª Witkowski

MIMUW

Akapity i ko«ce linii

znaczników

sed do eiusmod tempor incididunt

(35)

Paweª Witkowski

MIMUW

Nagªówki

Nagªówki dziel¡ si¦ na poziomy

Znaczniki h1,h2,h3,h4,h5,h6

Zgodnie z konwencj¡, nagªówek h1 powinien oznacza¢ tytuª strony

Nagªówki

<h1>Nagªówek 1</h1>

(36)

Paweª Witkowski

MIMUW

Nagªówki

Nagªówki dziel¡ si¦ na poziomy Znaczniki h1,h2,h3,h4,h5,h6

Zgodnie z konwencj¡, nagªówek h1 powinien oznacza¢ tytuª strony

Nagªówki

(37)

Paweª Witkowski

MIMUW

Nagªówki

Nagªówki dziel¡ si¦ na poziomy Znaczniki h1,h2,h3,h4,h5,h6

Zgodnie z konwencj¡, nagªówek h1 powinien oznacza¢

tytuª strony Nagªówki

(38)

Paweª Witkowski

MIMUW

Listy

Wypunktowanie ul

Numerowanie ol Elementy listy li

Listy

<ol>

<li>Element 1</li>

<li>Element 2</li>

<li>Element 3</li>

<li>Element 4</li>

(39)

Paweª Witkowski

MIMUW

Listy

Wypunktowanie ul Numerowanie ol

Elementy listy li

Listy

<ol>

<li>Element 1</li>

<li>Element 2</li>

<li>Element 3</li>

<li>Element 4</li>

</ol>

(40)

Paweª Witkowski

MIMUW

Listy

Wypunktowanie ul Numerowanie ol Elementy listy li Listy

<ol>

<li>Element 1</li>

<li>Element 2</li>

<li>Element 3</li>

<li>Element 4</li>

(41)

Paweª Witkowski

MIMUW

Tabele

Tabela table

Wiersz tr Komórka th, td

Tabele

<table>

</table>

(42)

Paweª Witkowski

MIMUW

Tabele

Tabela table Wiersz tr

Komórka th, td

Tabele

<table>

(43)

Paweª Witkowski

MIMUW

Tabele

Tabela table Wiersz tr Komórka th, td Tabele

<table>

</table>

(44)

Paweª Witkowski

MIMUW

Odno±niki

Aktywna zawarto±¢ strony www

Dost¦p do zasobów po klikni¦ciu

Tekst odno±nika - napis (lub obrazek) w który nale»y klikn¡¢ na stronie

Cel odno±nika - atrybut href - adres zasobu (strony www, pliku, ...)

Odno±niki

<a href=http://www.uw.edu.pl>Uniwersytet Warszawski</a>

(45)

Paweª Witkowski

MIMUW

Odno±niki

Aktywna zawarto±¢ strony www Dost¦p do zasobów po klikni¦ciu

Odno±niki

<a href=pobieranie/plik.pdf>Plik do pobrania</a>

(46)

Paweª Witkowski

MIMUW

Odno±niki

(47)

Paweª Witkowski

MIMUW

Odno±niki

<a href=pobieranie/plik.pdf>Plik do pobrania</a>

(48)

Paweª Witkowski

MIMUW

Obrazy

Formaty JPG, GIF, PNG, SVG

Adres lokalny - ±cie»ka do pliku i nazwa

Adres w Internecie - peªny adres strony i ±cie»ka z nazw¡ Tekst alternatywny - atrybut alt

Opis obrazka zrozumiaªy dla wyszukiwarek Wy±wietlany gdy nie mo»na wy±wietli¢ obrazka

(49)

Paweª Witkowski

MIMUW

Obrazy

Formaty JPG, GIF, PNG, SVG Adres lokalny - ±cie»ka do pliku i nazwa

Adres w Internecie - peªny adres strony i ±cie»ka z nazw¡ Tekst alternatywny - atrybut alt

(50)

Paweª Witkowski

MIMUW

Obrazy

Adres w Internecie - peªny adres strony i ±cie»ka z nazw¡

Tekst alternatywny - atrybut alt

(51)

Paweª Witkowski

MIMUW

Obrazy

(52)

Paweª Witkowski

MIMUW

Obrazy

Opis obrazka zrozumiaªy dla wyszukiwarek

Wy±wietlany gdy nie mo»na wy±wietli¢ obrazka

(53)

Paweª Witkowski

MIMUW

Obrazy

(54)

Paweª Witkowski

MIMUW

Obrazy

<img src=images/obrazek1.jpg

alt=Pierwszy obrazek/>

<img src=http://www.uw.edu.pl/images/obrazek2.jpg

alt=Drugi obrazek/>

(55)

Paweª Witkowski

MIMUW

Inne elementy tekstu

<em>Wzmocnienie (emfaza)</em>

<strong>Mocne wyró»nienie</strong>

<sup>Indeks górny</sup>

<sub>Indeks dolny</sub>

<q>Krótki cytat</q>

<blockquote>Dªugi cytat blokowy</blockqote>

<cite>Podanie ¹ródªa</cite>

<abbr>Skrót</abbr>

<code>Fragment kodu programu</code>

(56)

Paweª Witkowski

MIMUW

Inne elementy tekstu

<abbr>Skrót</abbr>

(57)

Paweª Witkowski

MIMUW

Inne elementy tekstu

<abbr>Skrót</abbr>

(58)

Paweª Witkowski

MIMUW

Inne elementy tekstu

<abbr>Skrót</abbr>

(59)

Paweª Witkowski

MIMUW

Inne elementy tekstu

<abbr>Skrót</abbr>

(60)

Paweª Witkowski

MIMUW

Inne elementy tekstu

<abbr>Skrót</abbr>

(61)

Paweª Witkowski

MIMUW

Inne elementy tekstu

<abbr>Skrót</abbr>

(62)

Paweª Witkowski

MIMUW

Inne elementy tekstu

<abbr>Skrót</abbr>

(63)

Paweª Witkowski

MIMUW

Inne elementy tekstu

<abbr>Skrót</abbr>

(64)

Paweª Witkowski

MIMUW

Parametry strony

Deklaracja DOCTYPE

Znaczniki w sekcji head

Parametry strony

<!DOCTYPE html PUBLIC

-//W3C//DTD XHTML 1.0 Transitional//EN

http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd>

<head>

(65)

Paweª Witkowski

MIMUW

Parametry strony

Deklaracja DOCTYPE Znaczniki w sekcji head Parametry strony

<!DOCTYPE html PUBLIC

-//W3C//DTD XHTML 1.0 Transitional//EN

http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd>

<head>

content=text/html; charset=utf-8 />

<title>Tytuª strony</title>

</head>

(66)

Paweª Witkowski

MIMUW

Sekcja head

Typ zawarto±ci i kodowanie znaków

(67)

Paweª Witkowski

MIMUW

Sekcja head

Opis strony (m. in. dla wyszukiwarek)

(68)

Paweª Witkowski

MIMUW

Sekcja head

(69)

Paweª Witkowski

MIMUW

Sekcja head

Tytuª strony (wy±wietlany m. in. w nagªówku okna i wynikach wyszukiwania)

(70)

Paweª Witkowski

MIMUW

Sekcja head

(71)

Paweª Witkowski

MIMUW

Sekcja head

(72)

Paweª Witkowski

MIMUW

Modykacje wygl¡du

Kaskadowe arkusze stylów

CSS - Cascading Style Sheets

Okre±laj¡ dla elementów HTML m. in.

Rodzaj, krój i wielko±¢ czcionki Tªo jako kolor lub obraz Marginesy, dopeªnienia Ukªad

(73)

Paweª Witkowski

MIMUW

Modykacje wygl¡du

Kaskadowe arkusze stylów CSS - Cascading Style Sheets

(74)

Paweª Witkowski

MIMUW

Modykacje wygl¡du

(75)

Paweª Witkowski

MIMUW

Modykacje wygl¡du

Rodzaj, krój i wielko±¢ czcionki

Tªo jako kolor lub obraz Marginesy, dopeªnienia Ukªad

(76)

Paweª Witkowski

MIMUW

Modykacje wygl¡du

Rodzaj, krój i wielko±¢ czcionki Tªo jako kolor lub obraz

Marginesy, dopeªnienia Ukªad

(77)

Paweª Witkowski

MIMUW

Modykacje wygl¡du

Rodzaj, krój i wielko±¢ czcionki Tªo jako kolor lub obraz Marginesy, dopeªnienia

Ukªad

(78)

Paweª Witkowski

MIMUW

Technologie Informacyjne Wykªad 6

Technologie Informacyjne Wykªad 6

HTML

HTML

HTML

HTML

HTML

HTML

dokumenty HTML

dokumenty HTML

dokumenty HTML

dokumenty HTML

dokumenty HTML

dokumenty HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

U»ywanie znaczników

U»ywanie znaczników

U»ywanie znaczników

U»ywanie znaczników

U»ywanie znaczników

U»ywanie znaczników

Nagªówek i tre±¢

Nagªówek i tre±¢

Akapity i ko«ce linii

Akapity i ko«ce linii

Akapity i ko«ce linii

Akapity i ko«ce linii

Nagªówki

Nagªówki

Nagªówki

Listy

Listy

Listy

Tabele

Tabele

Tabele

Odno±niki

Odno±niki

Odno±niki

Odno±niki

Obrazy

Obrazy

Obrazy

Obrazy

Obrazy

Obrazy

Obrazy

Inne elementy tekstu

Inne elementy tekstu

Inne elementy tekstu

Inne elementy tekstu

Inne elementy tekstu

Inne elementy tekstu

Inne elementy tekstu

Inne elementy tekstu

Inne elementy tekstu

Parametry strony

Parametry strony

Sekcja head

Sekcja head

Sekcja head

Sekcja head

Sekcja head

Sekcja head

Modykacje wygl¡du

Modykacje wygl¡du

Modykacje wygl¡du

Modykacje wygl¡du

Modykacje wygl¡du

Modykacje wygl¡du

Modykacje wygl¡du

Modykacje wygl¡du

Modykacje wygl¡du

Modykacje wygl¡du

Modykacje wygl¡du

Modykacje wygl¡du

Modykacje wygl¡du

Modykacje wygl¡du