Technologie Informacyjne

HTML
DOWNLOAD

Wielkość: px

Rozpocząć pokaz od strony:

Download "Technologie Informacyjne"

Kazimiera Kucharska
9 lat temu
Przeglądów:

1 Technologie Informacyjne Wykªad 6 Paweª Witkowski MIM UW Wiosna 2013 P. Witkowski (MIM UW) Technologie Informacyjne Wiosna / 18

2 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 P. Witkowski (MIM UW) Technologie Informacyjne Wiosna / 18

formularzy do zbierania danych Umo»liwia zanurzanie obrazów, animacji, d¹wi ków,

3 dokumenty HTML Pliki tekstowe,bez formatowania Tre± razem ze znacznikami Przygotowywanie w dowolnym edytorze tekstowym Notatnik, Notepad++,... Edytory wspomagaj ce PSPad, Paj czek, Dreamweaver,... P. Witkowski (MIM UW) Technologie Informacyjne Wiosna / 18

4 HTML Znaczniki HTML sªu» to deniowania w tre±ci strony Akapitów Nagªówków List Tabel Obrazków Odno±ników Pól formularzy Innych obiektów P. Witkowski (MIM UW) Technologie Informacyjne Wiosna / 18

5 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 <a href= P. Witkowski (MIM UW) Technologie Informacyjne Wiosna / 18

koniec linii <br /> Atrybuty znaczników - np.

6 Nagªówek i tre± Nagªówek strony (head) Tre± strony (body) Podstawowa struktura strony <html> <head>... </head> <body>... </body> </html> P. Witkowski (MIM UW) Technologie Informacyjne Wiosna / 18

7 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> P. Witkowski (MIM UW) Technologie Informacyjne Wiosna / 18

nagªówki <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, <br /> sed do eiusmod tempor

8 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> <h2>nagªówek 2</h2> <h3>nagªówek 3</h3> <h4>nagªówek 4</h4> <h5>nagªówek 5</h5> <h6>nagªówek 6</h6> P. Witkowski (MIM UW) Technologie Informacyjne Wiosna / 18

<h2>nagªówek 2</h2> <h3>nagªówek 3</h3> <h4>nagªówek 4</h4> <h5>nagªówek 5</h5>

9 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> P. Witkowski (MIM UW) Technologie Informacyjne Wiosna / 18

10 Tabele Tabela table Wiersz tr Komórka th, td Tabele <table> <tr><th> A </th><th> B </th></tr> <tr><td> A1 </td><td> B1 </td></tr> <tr><td> A2 </td><td> B2 </td></tr> <tr><td> A3 </td><td> B3 </td></tr> </table> P. Witkowski (MIM UW) Technologie Informacyjne Wiosna / 18

11 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= Warszawski</a> <a href=pobieranie/plik.pdf>plik do pobrania</a> P. Witkowski (MIM UW) Technologie Informacyjne Wiosna / 18

www, pliku,...) Odno±niki <a href=http://www.uw.edu.

12 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 P. Witkowski (MIM UW) Technologie Informacyjne Wiosna / 18

atrybut alt Opis obrazka zrozumiaªy dla wyszukiwarek Wy±wietlany gdy nie mo»na

13 Obrazy Obrazy <img src=images/obrazek1.jpg alt=pierwszy obrazek/> <img src= alt=drugi obrazek/> P. Witkowski (MIM UW) Technologie Informacyjne Wiosna / 18

edu.pl/images/obrazek2.jpg alt=drugi obrazek/> P.

14 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> P. Witkowski (MIM UW) Technologie Informacyjne Wiosna / 18

cytat blokowy</blockqote> <cite>podanie ¹ródªa</cite> <abbr>skrót</abbr>

15 Parametry strony Deklaracja DOCTYPE Znaczniki w sekcji head Parametry strony <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN <html xmlns= <head> <meta http-equiv=content-type content=text/html; charset=utf-8 /> <title>tytuª strony</title> </head> P. Witkowski (MIM UW) Technologie Informacyjne Wiosna / 18

org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <html xmlns=http://www.w3.

16 Sekcja head Typ zawarto±ci i kodowanie znaków <meta http-equiv=content-type content=text/html; charset=utf-8 /> Opis strony (m. in. dla wyszukiwarek) <meta name=description content=opis /> Tytuª strony (wy±wietlany m. in. w nagªówku okna i wynikach wyszukiwania) <title>tytuª strony</title> P. Witkowski (MIM UW) Technologie Informacyjne Wiosna / 18

dla wyszukiwarek) <meta name=description content=opis /> Tytuª strony (wy±wietlany m. in.

17 Parametry strony w HTML5 Uproszczona deklaracja DOCTYPE Uproszczona deklaracja kodowania znaków head Brak odno±nika do przestrzeni nazw XML Parametry strony <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>tytuª strony</title> </head> P. Witkowski (MIM UW) Technologie Informacyjne Wiosna / 18

18 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 P. Witkowski (MIM UW) Technologie Informacyjne Wiosna / 18

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

Podobne dokumenty

Wst p do j zyka HTML. Krzysztof Szafran (IInf UW) Warszawa, 18 pa¹dziernika Warszawa, 18 pa¹dziernika / 20

Wst p do j zyka HTML. Krzysztof Szafran (IInf UW) Warszawa, 18 pa¹dziernika Warszawa, 18 pa¹dziernika / 20 Wst p do j zyka Krzysztof Szafran IInf UW Warszawa, 18 pa¹dziernika 2017 Warszawa, 18 pa¹dziernika 2017 1 / 20 Spis tre±ci 1 Czym jest? Znaczniki Strona Strkuktura i parametry strony Sekcja head Tworzenie