Specjalizacja "Dziennikarstwo On-line„ HTML – XHTML część 2 Prowadzący: Dariusz Jaruga djaruga@klub.chip.pl
Technologia stron w HTML5 HTML5 + CSS3 + JS
< znacznik /> < znacznik > … </ znacznik > < Znaczniki w HTML5 < znacznik /> < znacznik > … </ znacznik > < znacznik parametr=„wartość” /> … spacja Przykłady: <br/> <p>lorem ipsum dolor</p> <a href=„http://www.jakastrona.pl/”> link do strony </a>
<article> <figcaption> <rp> <aside> Nowe znaczniki w HTML5 <article> <figcaption> <rp> <aside> <figure> <rt> <audio> <footer> <ruby> <bdi> <header> <section> <canvas> <keygen> <source> <command> <mark> <summary> <datalist> <meter> <time> <details> <nav> <track> <dialog> <output> <video> <embed> <progress> <wbr>
Znaczniki wycofane z HTML5 <acronym> <center> <frameset> <applet> <dir> <noframes> <basefont> <font> <strike> <big> <frame> <tt> Nie należy ich używać !!!
Znaczniki w HTML5 – dziedzictwo wcześniejszej wersji HTML <!--...--> <col> <head> <object> <sup> <!DOCTYPE> <colgroup> <hr> <ol> <table> <dd> <html> <optgroup> <tbody> <a> <del> <i> <option> <td> <abbr> <dfn> <iframe> <p> <textarea> <address> <div> <img> <param> <tfoot> <area> <dl> <input> <pre> <th> <b> <dt> <ins> <q> <thead> <base> <em> <kbd> <s> <title> <bdo> <fieldset> <label> <samp> <tr> <blockquote> <form> <legend> <script> <u> <body> <h1> <li> <select> <ul> <br> <h2> <link> <small> <var> <button> <h3> <map> <span> <caption> <h4> <menu> <strong> <cite> <h5> <meta> <style> <code> <h6> <noscript> <sub>
Pierwsza strona WWW w HTML5 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title>Pierwsza strona w HTML5</title> </head> <body> <h1>Witam !</h1> <p>To jest moja pierwsza strona w HTML5</p> </body> </html>
Znaczniki podstawowe – budowa szkieletu strony WWW <!DOCTYPE> - definicja typu dokumentu <html> - definicja dokumentu w języku html <head> - nagłówek strony w html <meta> - własności dokumentu <title> - tytuł strony/dokumentu WWW <body> - ciało dokumentu w HTML Przykład: <!DOCTYPE HTML> <html> <head> <title>Tytuł dokumentu</title> Informacje nagłówkowe dotyczące strony WWW </head> <body> Zawartość strony WWW widoczna w oknie przeglądarki ...... </body> </html>
Znaczniki podstawowe – nagłówek strony. <meta> - własności dokumentu Przykłady: <meta name="description" content=„Kurs języka HTML5"> <meta name="keywords" content="HTML5,Kurs,CSS,JavaScript"> <meta name="author" content=„Dariusz Jaruga"> <meta charset="UTF-8"> <meta http-equiv="refresh" content="120"> <title> - tytuł strony – znacznik obowiązkowy <title>Lorem ipsum dolor</title> <link> - powiązanie do dokumentu zewnętrznego np. CSS <link rel="stylesheet" type="text/css" href="style.css">
Znaczniki podstawowe <!--...--> - komentarz Przykłady: <!– Komentarz w źródle strony WWW --> <!– Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu tortor ut orci porttitor tincidunt ac gravida ligula. --> <h1>,<h2>,<h3>,<h4>,<h5>,<h6> - nagłówek tekstu <h1>Nagłówek poziom 1</h1> <h2>Nagłówek poziom 2</h2> <h3>Nagłówek poziom 3</h3> <h4>Nagłówek poziom 4</h4> <h5>Nagłówek poziom 5</h5> <h6>Nagłówek poziom 6</h6>
Znaczniki podstawowe <br> - znacznik łamania linii Przykład: Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit.<br> Nam eu tortor ut orci porttitor tincidunt ac gravida ligula.<br> <p> - paragraf <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu tortor ut orci porttitor tinciduntac gravida ligula.</p> <hr> - linia pozioma rozdzielająca treść strony na sekcje Przykłady: <p>Lorem ipsum dolor sit amet </p>, <hr> <p>consectetur adipiscing elit.</p>
Formatowanie tekstu <b> - pogrubienie Przykład: <p>Lorem ipsum dolor sit amet, <b>consectetur adipiscing elit.</b></p> <i> - italics <p>Lorem ipsum dolor sit amet, <i>consectetur adipiscing elit.</i></p> <u> - podkreślenie <p>Lorem ipsum dolor sit amet, <u>consectetur adipiscing elit.</u></p>
Formatowanie tekstu <abbr> - skrót - rozwiniecie skrótu w „dymku” Przykład: Pierwsze miejsce w rankingu zajmuje <abbr title=„Uniwersytet Warszawski">UW</abbr> i tym samym … <q> - cytat w wierszu tekstu oznaczony w cudzysłowach Adam Mickiewicz: <q> Wołasz Boga, On często schodzi po kryjomu I puka do drzwi twoich, aleś rzadko w domu.</q> <blockquote> - cytat blokowy – cytowanie wraz z podaniem źródła <blockquote cite="http://www.lipsum.com/feed/html"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu tortor ut orci porttitor tincidunt ac gravida ligula. </blockquote>
Formatowanie tekstu <ins> - wstawienie tekstu <del> - skasowanie tekstu Przykład: <p>Lorem ipsum <del>dolor</del><ins>sit</ins> amet, consectetur adipiscing elit.</p> <mark> - wyróżnienie ciągu znaków – tzw. marker <p>Lorem ipsum dolor sit amet, <mark> consectetur adipiscing elit </mark>. Nam eu tortor ut orci porttitor tincidunt ac gravida ligula.</p>
Formatowanie tekstu <sub> - indeks dolny czcionki <sup> - indeks górny czcionki Przykład: <p>Przykład indeksu <sub>dolnego</sub> w tekście.</p> <p>Przykład indeksu <sup>górnego</sup> w tekście.</p>
Formatowanie tekstu <pre> - blok preformatowany zachowanie formatowania z dokumentu w tym znaków spacji i końca linii. Przykład: <pre>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 | +----+-----+-----+ </pre>
Formatowanie tekstu <cite> - cytat Przykład: <cite>Lorem ipsum dolor</cite> <code> - kod programu np. komputerowego. <dfn> - definicja np. określonego pojęcia. <em> - emfaza zaznaczenie np. przesadnej emocjonalności wypowiedzi <kbd> - czcionka dla danych wprowadzonych z klawiatury. <s> - czcionka przekreślona. <samp> - przykład realizacji np. programu komputerowego. <small> - czcionka pomniejszona. <strong> - bardzo silne wyróżnienie czcionki - pogrubienie <var> - czcionka dla zmiennej np. statystycznej
Listy nieuporządkowane (punktowane) Przykład: <ul> <li>pierwszy element listy</li> <li>drugi element listy</li> <li>wewnętrzny element listy</li> <li>drugi wewnętrzny element</li> <li>trzeci wewnętrzny element</li> </ul> </li> <li>trzeci element listy <li>czwarty element listy</li> <ul style="list-style-type: square;"> <ul style="list-style-type: none;"> <ul style="list-style-type: circle;"> <ul style="list-style-type: disc;"> <ul style="list-style-image: url(adres pliku z grafika);">
Listy uporządkowane (numerowane) Przykład: <ol style="list-style-type: upper-alpha;"> <li>pierwszy element listy</li> <li>drugi element listy</li> <ol> <li>wewnętrzny element listy</li> <li>…….</li> <li>n-ty wewnętrzny element</li> </ol> </li> <li>trzeci element listy <li>czwarty element listy</li> <ol start=„21”> - 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.
Listy definicji <dl> - lista definicji <dt> - hasło definicji <dd> - treść definicji Przykład: <dl> <dt>Prostokąt</dt> <dd>czworokąt, który ma wszystkie wewnętrzne kąty proste </dd> <dt>Trójkąt</dt> <dd>Wielokąt o trzech bokach</dd> <dt>Trapez</dt> <dd>czworokąt posiadający tylko jedną parę boków równoległych</dd> </dl>
<a> - 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 ) Przykład: <a href=„link_do_jakiejś_strony_www" target="_blank">link</a> <a rel=„author" href=„o_autorze.html">Autor</a> <a href="http://www.uw.edu.pl" type="text/html">UW</a> Problematyka adresowania względnego /bezwzględnego
http:// ftp:// news:// javascript: URL protokół:[//] username:[passwd]@ adres :port katalog plik http:// ftp:// news:// javascript: mailto: jan@haslo@ jan@ :80 :234 www.serwer.pl ftp.serwer.pl /img/wakacje/ /multimedia/ /~user/ foto.jpg index.html skrypt.cgi?a=1 http://www.serwer.pl/ http://www.serwer.pl/foto/pic123.jpg ftp://ftp.sunsite.icm.edu.pl/ http://user:pass@www.serwer.pl:80/katalog/..../katalog_n/plik.roz
<p> Porównanie liczb: 2 < 4 a 8 > 5 </p> Znaki specjalne Znak encja numerycznie nazwa encji Opis " " " Cudzysłów ' ' ' Apostrof & & & ampersand < < Mniejszy niż > > Większy niż Spacja Przykłady: <p> Porównanie liczb: 2 < 4 a 8 > 5 </p> <p> Lorem " ipsum dolor " est.</p> <p> Lorem ipsum dolor est. </p>
<img> - 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: <img src=„foto.jpg" width=„200" height=„400" alt=„fotka" /> <img src=„http://www.jakiserwer.pl/img/foto.jpg" width=„200" height=„400" alt=„fotka" />
<img> - przykład mapy po stronie serwera <a href=„skrypt_cgi.php"> <img src=„moja_mapa.png" alt=„moja mapa" width=„200" height=„200" ismap> </a>
<img> - przykład mapy po stronie klienta <img src=„obrazek.png" width=„200" height=„200" alt=„moja mapa" usemap="#mojamapa"> <map name=„mojamapa"> <area shape="rect" coords="0,0,100,100" href=„1.html„ alt=„1"> <area shape=„rect" coords=„0,100,0,200" href=„2.html" alt=„2"> <area shape="circle" coords=„100,100,25" href=„3.html" alt=„3"> <area shape="circle" coords=„150,150,25" href=„4.html" alt=„4"> <area shape=„poly" coords=„10,10,25,35,80,67,180,200" href=„5.html" alt=„5"> </map>
<figure>, <figcaption> - grupowanie treści multimedialnych z podpisem Przykład: <figure> <img src=„obrazek.png" alt=„Obrazek" width="320" height=„240"> <figcaption>Rys 1. – Lorem ipsum dolor.</figcaption> </figure>
<canvas> - kontener do renderowania grafiki rastrowej Parametry: height - wysokość width - szerokość Przykład: <canvas id="moj_obraz" height="200" width="500"></canvas> <script type="text/javascript"> 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(); </script>.
Grafika wektorowa w HTML5 – SVG. Opis języka SVG: http://www.w3.org/TR/SVG/ Program do rysowania plików w formacie SVG: http://inkscape.org/ Biblioteka clipartów: http://openclipart.org/ Przykład: <embed id=„obrazek_svg" src=„obrazek.svg" type="image/svg+xml"> <svg heigth=400 width=100> <rect fill="red" stroke="black" width="100" height="50" x="100" y="25"/> <ellipse fill=„yellow” stroke="blue" cx="40" cy="30" rx="50" ry="25"/> <line x1="10" y1="10" x2="300" y2="20" stroke="orange"/> </svg>
<audio> , <source> - 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: <audio controls> <source src=„muzyka.ogg" type="audio/ogg"> <source src=„muzyka.mp3" type="audio/mpeg"> <source src=„muzyka.wav" type="audio/mpeg"> Twoja przeglądarka nie obsługuje tagu audio. </audio>
<video> , <source> - 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: <video controls poster=„obrazek.png"> <source src=„video.mp4" type="video/mp4"> <source src=„video.ogg" type="video/ogg"> Twoja przeglądarka nie obsługuje tagu wideo. </video>
<progress> - wskaźnik postępu zadania / procesu Przykłady: <progress value=„43" max="100"></progress>
<div> - 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 <a href="#nazwa">
<div> - grupowanie elementów blokowych Przykład: <div style="color:blue;"> <p>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. </p> </div> <div style="color:blue; border: solid 3px;">
<span> - grupowanie dla elementów liniowych np. tekstów Przykład: <p>Lorem ipsum dolor sit <span style="color: red; font-weigth: bold;"> amet, consectetuer </span> adipiscing elit. Morbi felis elit, porttitor nec, suscipit sed, blandit sed, augue. Morbi lectus odio, feugiat non, mattis sed, consectetuer congue, neque. Cum sociis. </p> <p><span style="font-size: 50pt;">L</span>orem ipsum dolor</p> Znaczniki span można zagnieżdżać. <p> <span style="color: red;"> <span style="font-size: 50pt;">L</span> orem ipsum </span> Dolor </p>