1 Specjalizacja "Dziennikarstwo On-line„ HTML – XHTML część 2 Prowadzący: Dariusz Jaruga
2 Technologia stron w HTML5HTML5 + CSS3 + JS
3 < znacznik /> < znacznik > … znacznik > <Znaczniki w HTML5 < znacznik /> < znacznik > … znacznik > < znacznik parametr=„wartość” /> … spacja Przykłady: lorem ipsum dolor
4
5 Znaczniki wycofane z HTML5 Nie należy ich używać !!!
6 Znaczniki w HTML5 – dziedzictwo wcześniejszej wersji HTML 8 Znaczniki podstawowe – budowa szkieletu strony WWW - definicja typu dokumentu - definicja dokumentu w języku html - nagłówek strony w html - własności dokumentu 9 Znaczniki podstawowe – nagłówek strony. - własności dokumentu Przykłady: 11 Znaczniki podstawowe - paragraf Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet consectetur adipiscing elit. 12 Formatowanie tekstu - pogrubienie Przykład: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 13 Formatowanie tekstu - skrót - rozwiniecie skrótu w „dymku” Przykład: Pierwsze miejsce w rankingu zajmuje UW i tym samym … 14 Formatowanie tekstu - wstawienie tekstu Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit . Nam eu tortor ut orci porttitor tincidunt ac gravida ligula. 15 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 Formatowanie tekstu 17 Formatowanie tekstu - cytat Przykład: Lorem ipsum dolor 18 Listy nieuporządkowane (punktowane)Przykład: 19 Listy uporządkowane (numerowane)Przykład: 20 Listy definicji 21 - tag definiujący linkAtrybuty: 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 ) Przykład: link Autor UW Problematyka adresowania względnego /bezwzględnego 22 http:// ftp:// news:// javascript:URL protokół:[//] adres :port katalog plik ftp:// news:// javascript: mailto: :80 :234 ftp.serwer.pl /img/wakacje/ /multimedia/ /~user/ foto.jpg index.html skrypt.cgi?a=1 ftp://ftp.sunsite.icm.edu.pl/ 23 Porównanie liczb: 2 < 4 a 8 > 5 Porównanie liczb: 2 < 4 a 8 > 5 Lorem " ipsum dolor " est. Lorem ipsum dolor est. 24 25 26 27 28 29 Grafika wektorowa w HTML5 – SVG.Opis języka SVG: Program do rysowania plików w formacie SVG: Biblioteka clipartów: Przykład: 30 31 32 33 34 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 - grupowanie dla elementów liniowych np. tekstówPrzykł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. Lorem ipsum dolor
{ "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/1216842/3/images/6/Znaczniki+w+HTML5+%E2%80%93+dziedzictwo+wcze%C5%9Bniejszej+wersji+HTML.jpg", "name": "Znaczniki w HTML5 – dziedzictwo wcześniejszej wersji HTML", "description": " ", "width": "800" }
- znacznik łamania linii Przykład: Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Nam eu tortor ut orci porttitor tincidunt ac gravida ligula.
- linia pozioma rozdzielająca treść strony na sekcje Przykłady:
- cytat w wierszu tekstu oznaczony w cudzysłowach
Adam Mickiewicz: Wołasz Boga, On często schodzi po kryjomu I puka do drzwi twoich, aleś rzadko w domu.
- cytat blokowy – cytowanie wraz z podaniem źródła
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu tortor ut orci porttitor tincidunt ac gravida ligula. - skasowanie tekstu Przykład: dolorsit amet, - 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 | - 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
- 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. - lista definicji
- 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:
- przykład mapy po stronie serwera
- przykład mapy po stronie klienta