Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

HTML i XHTML Specjalizacja "Dziennikarstwo On-line HTML – XHTML część 2 Prowadzący: Dariusz Jaruga

Podobne prezentacje


Prezentacja na temat: "HTML i XHTML Specjalizacja "Dziennikarstwo On-line HTML – XHTML część 2 Prowadzący: Dariusz Jaruga"— Zapis prezentacji:

1 HTML i XHTML Specjalizacja "Dziennikarstwo On-line HTML – XHTML część 2 Prowadzący: Dariusz Jaruga

2 HTML i XHTML Technologia stron w HTML5 HTML5 + CSS3 + JS

3 HTML i XHTML Znaczniki w HTML5 spacja parametr=wartość … … Przykłady: lorem ipsum dolor link do strony

4 HTML i XHTML Nowe znaczniki w HTML5

5 HTML i XHTML Znaczniki wycofane z HTML5 Nie należy ich używać !!!

6 HTML i XHTML Znaczniki w HTML5 – dziedzictwo wcześniejszej wersji HTML

7 HTML i XHTML Pierwsza strona WWW w HTML5 Pierwsza strona w HTML5 Witam ! To jest moja pierwsza strona w HTML5

8 HTML i XHTML Znaczniki podstawowe – budowa szkieletu strony WWW - definicja typu dokumentu - definicja dokumentu w języku html - nagłówek strony w html - własności dokumentu - tytuł strony/dokumentu WWW - ciało dokumentu w HTML Przykład: Tytuł dokumentu Informacje nagłówkowe dotyczące strony WWW Zawartość strony WWW widoczna w oknie przeglądarki......

9 HTML i XHTML Znaczniki podstawowe – nagłówek strony. - własności dokumentu Przykłady: - tytuł strony – znacznik obowiązkowy Przykłady: Lorem ipsum dolor - powiązanie do dokumentu zewnętrznego np. CSS Przykłady:

10 HTML i XHTML Znaczniki podstawowe - komentarz Przykłady: ,,,,, - nagłówek tekstu Przykłady: Nagłówek poziom 1 Nagłówek poziom 2 Nagłówek poziom 3 Nagłówek poziom 4 Nagłówek poziom 5 Nagłówek poziom 6

11 HTML i XHTML Znaczniki podstawowe - znacznik łamania linii Przykład: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu tortor ut orci porttitor tincidunt ac gravida ligula. - paragraf Przykład: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu tortor ut orci porttitor tinciduntac gravida ligula. - linia pozioma rozdzielająca treść strony na sekcje Przykłady: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

12 HTML i XHTML Formatowanie tekstu - pogrubienie Przykład: Lorem ipsum dolor sit amet, consectetur adipiscing elit. - italics Przykład: Lorem ipsum dolor sit amet, consectetur adipiscing elit. - podkreślenie Przykład: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

13 HTML i XHTML Formatowanie tekstu - skrót - rozwiniecie skrótu w dymku Przykład: Pierwsze miejsce w rankingu zajmuje UW i tym samym … - cytat w wierszu tekstu oznaczony w cudzysłowach Przykład: Adam Mickiewicz: Wołasz Bo­ga, On często schodzi po kryjomu I pu­ka do drzwi twoich, aleś rzad­ko w domu. - cytat blokowy – cytowanie wraz z podaniem źródła Przykład: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu tortor ut orci porttitor tincidunt ac gravida ligula.

14 HTML i XHTML Formatowanie tekstu - wstawienie tekstu - skasowanie tekstu Przykład: Lorem ipsum dolor sit amet, consectetur adipiscing elit. - wyróżnienie ciągu znaków – tzw. marker Przykład: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu tortor ut orci porttitor tincidunt ac gravida ligula.

15 HTML i XHTML Formatowanie tekstu - indeks dolny czcionki - indeks górny czcionki Przykład: Przykład indeksu dolnego w tekście. Przykład indeksu górnego w tekście.

16 HTML i XHTML Formatowanie tekstu - blok preformatowany zachowanie formatowania z dokumentu w tym znaków spacji i końca linii. Przykład: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu tortor ut orci porttitor tincidunt ac gravida ligula | 1 | 2 | 3 | | A | B | C | | XY | ZZZ | 888 |

17 HTML i XHTML Formatowanie tekstu - cytat Przykład: Lorem ipsum dolor - kod programu np. komputerowego. - definicja np. określonego pojęcia. - emfaza zaznaczenie np. przesadnej emocjonalności wypowiedzi - czcionka dla danych wprowadzonych z klawiatury. - czcionka przekreślona. - przykład realizacji np. programu komputerowego. - czcionka pomniejszona. - bardzo silne wyróżnienie czcionki - pogrubienie - czcionka dla zmiennej np. statystycznej

18 HTML i XHTML Listy nieuporządkowane (punktowane) Przykład: pierwszy element listy drugi element listy wewnętrzny element listy drugi wewnętrzny element trzeci wewnętrzny element trzeci element listy czwarty element listy

19 HTML i XHTML Listy uporządkowane (numerowane) Przykład: pierwszy element listy drugi element listy wewnętrzny element listy ……. n-ty wewnętrzny element trzeci element listy czwarty element listy - rozpoczęcie numerowania od wskazanej liczby disc, square, circle,decimal, decimal-leading-zero, lower-greek, lower-latin, upper-latin, armenian, georgian, hebrew, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha, lower-alpha, upper-alpha, lower-roman, upper-roman.

20 HTML i XHTML Listy definicji - lista definicji - hasło definicji - treść definicji Przykład: Prostokąt czworokąt, który ma wszystkie wewnętrzne kąty proste Trójkąt Wielokąt o trzech bokach Trapez czworokąt posiadający tylko jedną parę boków równoległych

21 HTML i XHTML - tag definiujący link Atrybuty: media - all, aural, braille, handheld, projection, print, screen, tty, tv np. media="screen and (min-width:800px)" rel - alternate, author, bookmark, help,license, nofollow, noreferrer, search target - _blank, _parent, _self, _top, framename (nazwa własna okienka) type – atrybut MIME (http://www.iana.org/assignments/media-types )http://www.iana.org/assignments/media-types Przykład: link Autor UW Problematyka adresowania względnego /bezwzględnego

22 HTML i XHTML URL ftp://ftp.sunsite.icm.edu.pl/ ftp:// news:// javascript: mailto: ftp.serwer.pl :80 :234 /img/wakacje/ /multimedia/ /~user/ foto.jpg index.html skrypt.cgi?a=1

23 HTML i XHTML Znaki specjalne Przykłady: Porównanie liczb: 2 < 4 a 8 > 5 Lorem " ipsum dolor " est. Lorem ipsum dolor est. Znakencja numerycznienazwa encjiOpis """Cudzysłów '''Apostrof &&&ampersand <<<Mniejszy niż >>>Większy niż Spacja

24 HTML i XHTML - tag definiujący obrazek / fotografię Atrybuty: alt – alternatywny tekst dla przeglądarki nie wyświetlającej obrazów. height – wysokość obrazu width – szerokość obrazu src – adres URL do źródła – lokalizacja obrazu ismap – mapa po stronie serwera usemap – mapa po stronie klienta (przeglądarki) Przykłady:

25 HTML i XHTML - przykład mapy po stronie serwera

26 HTML i XHTML - przykład mapy po stronie klienta

27 HTML i XHTML, - grupowanie treści multimedialnych z podpisem Przykład: Rys 1. – Lorem ipsum dolor.

28 HTML i XHTML - kontener do renderowania grafiki rastrowej Parametry: height - wysokość width - szerokość Przykład: var canvas=document.getElementById('moj_obraz'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#A0F000'; ctx.fillRect(10,10,400,120); ctx.beginPath(); ctx.arc(250,100,60,0,2*Math.PI); ctx.stroke(); ctx.fillStyle="red"; ctx.fill();.

29 HTML i XHTML Grafika wektorowa w HTML5 – SVG. Opis języka SVG: Program do rysowania plików w formacie SVG: Biblioteka clipartów: Przykład:

30 HTML i XHTML, - odtwarzanie dźwięku Atrybuty: autoplay – auto odtwarzanie controls – kontrolki do sterowania loop – odtwarzanie w pętli muted – domyślnie wyciszona preload – ładowanie dźwięku w czasie ładowania strony src – źródło pliku dżwiękowego Przykład: Twoja przeglądarka nie obsługuje tagu audio.

31 HTML i XHTML, - odtwarzanie video Atrybuty: autoplay – auto odtwarzanie controls – kontrolki do sterowania loop – odtwarzanie w pętli muted – domyślnie wyciszona preload – ładowanie dźwięku w czasie ładowania strony src – źródło pliku video poster – obraz wyświetlany w czasie pobierania i do uruchomienia video. height – wysokość okna video width – szerokość okna video Przykład: Twoja przeglądarka nie obsługuje tagu wideo.

32 HTML i XHTML - wskaźnik postępu zadania / procesu Przykłady:

33 HTML i XHTML - grupowanie elementów Atrybuty: align = left | center | right | justify wyrównanie akapitu class = nazwa klasy definicja CSS np. class = bigred style = definicja CSS określenie wyglądu elementu – CSS np. style="color: white; font-size: 24px;" title =tytuł tytuł lang = język język danego elemetu np. lang=pl id = nazwa unikalna nazwa / identyfikator elementu, do którego można odwoływać się z poziomu skryptu JS lub linku

34 HTML i XHTML - grupowanie elementów blokowych Przykład: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi felis elit, porttitor nec, suscipit sed, blandit sed, augue. Morbi lectus odio, feugiat non, mattis sed, consectetuer congue, neque. Cum sociis.

35 HTML i XHTML - grupowanie dla elementów liniowych np. tekstów Przykład: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi felis elit, porttitor nec, suscipit sed, blandit sed, augue. Morbi lectus odio, feugiat non, mattis sed, consectetuer congue, neque. Cum sociis. L orem ipsum dolor Znaczniki span można zagnieżdżać. L orem ipsum Dolor


Pobierz ppt "HTML i XHTML Specjalizacja "Dziennikarstwo On-line HTML – XHTML część 2 Prowadzący: Dariusz Jaruga"

Podobne prezentacje


Reklamy Google