Download
1 / 35
430 likes | 687 Views
Specjalizacja "Dziennikarstwo On-line„ HTML – XHTML część 2 Prowadzący: Dariusz Jaruga djaruga@klub.chip.pl. Technologia stron w HTML5. HTML5 + CSS3 + JS. Znaczniki w HTML5. <. znacznik. />. <. znacznik. >. </. znacznik. >. …. <. znacznik. parametr=„wartość”. parametr=„wartość”.
E N D
Specjalizacja "Dziennikarstwo On-line„HTML – XHTMLczęść 2Prowadzący: Dariusz Jarugadjaruga@klub.chip.pl
Technologia stron w HTML5 HTML5 + CSS3 + JS
Znaczniki w HTML5 < znacznik /> < znacznik > </ znacznik > … < znacznik parametr=„wartość” parametr=„wartość” … /> spacja Przykłady: <br/> <p>lorem ipsum dolor</p> <a href=„http://www.jakastrona.pl/”> link do strony </a>
Nowe znaczniki w HTML5 <article> <aside> <audio> <bdi> <canvas> <command> <datalist> <details> <dialog> <embed> <figcaption> <figure> <footer> <header> <keygen> <mark> <meter> <nav> <output> <progress> <rp> <rt> <ruby> <section> <source> <summary> <time> <track> <video> <wbr>
Znaczniki wycofane z HTML5 <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <noframes> <strike> <tt> Nie należy ich używać !!!
Znaczniki w HTML5 – dziedzictwo wcześniejszej wersji HTML <!--...--> <!DOCTYPE> <a> <abbr> <address> <area> <b> <base> <bdo> <blockquote> <body> <br> <button> <caption> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <head> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <meta> <noscript> <object> <ol> <optgroup> <option> <p> <param> <pre> <q> <s> <samp> <script> <select> <small> <span> <strong> <style> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <title> <tr> <u> <ul> <var>
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=„DariuszJaruga"><meta charset="UTF-8"> • <meta http-equiv="refresh" content="120"> • <title> - tytuł strony – znacznik obowiązkowy • Przykłady: • <title>Loremipsumdolor</title> • <link> - powiązaniedo dokumentu zewnętrznego np. CSS • Przykłady: • <link rel="stylesheet" type="text/css" href="style.css">
Znaczniki podstawowe • <!--...--> - komentarz • Przykłady: • <!– Komentarz w źródle strony WWW--> • <!– • Loremipsumdolor sit amet, consecteturadipiscing elit. • Nam eutortorutorciporttitortinciduntacgravida ligula. • --> • <h1>,<h2>,<h3>,<h4>,<h5>,<h6> - nagłówek tekstu • Przykłady: • <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: • Loremipsumdolor sit amet,<br>consecteturadipiscingelit.<br> • Nam eutortorutorciporttitortincidunt • acgravidaligula.<br> • <p> - paragraf • Przykład: • <p>Loremipsumdolor sit amet,consecteturadipiscing elit. • Nam eutortorutorciporttitortinciduntacgravida ligula.</p> <hr> - linia pozioma rozdzielająca treść strony na sekcje • Przykłady: • <p>Loremipsumdolor sit amet </p>, • <hr> • <p>consecteturadipiscing elit.</p>
Formatowanie tekstu • <b> - pogrubienie • Przykład: • <p>Loremipsumdolor sit amet,<b>consecteturadipiscing elit.</b></p> • <i> - italics • Przykład: • <p>Loremipsumdolor sit amet,<i>consecteturadipiscing elit.</i></p> • <u> - podkreślenie • Przykład: • <p>Loremipsumdolor sit amet,<u>consecteturadipiscing 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 • Przykład: • Adam Mickiewicz: <q> Wołasz Boga, On często schodzi po kryjomuI puka do drzwi twoich, aleś rzadko w domu.</q> • <blockquote> - cytat blokowy – cytowanie wraz z podaniem źródła • Przykład: • <blockquotecite="http://www.lipsum.com/feed/html"> • Loremipsumdolor sit amet, consecteturadipiscing elit. • Nam eutortorutorciporttitortinciduntacgravida ligula. • </blockquote>
Formatowanie tekstu • <ins> - wstawienie tekstu • <del> - skasowanie tekstu • Przykład: • <p>Loremipsum<del>dolor</del><ins>sit</ins>amet, • consecteturadipiscing elit.</p> • <mark> - wyróżnienie ciągu znaków – tzw. marker • Przykład: • <p>Loremipsumdolor sit amet, <mark>consecteturadipiscingelit </mark>. Nam eutortorutorciporttitortinciduntacgravida 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 preformatowanyzachowanie formatowania z dokumentu w tym znaków spacji i końca linii. • Przykład: • <pre>Loremipsumdolor sit amet, • consecteturadipiscing elit. • Nam eutortorutorciporttitor • tinciduntacgravida ligula. • +----+-----+-----+| 1 | 2 | 3 | • +----+-----+-----+| A | B | C | • +----+-----+-----+| XY | ZZZ | 888 | • +----+-----+-----+</pre>
Formatowanie tekstu • <cite> - cytat • Przykład: • <cite>Loremipsumdolor</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> <ul> <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> <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-tywewnętrzny element</li> </ol> </li> <li>trzeci element listy <li>czwarty element listy</li> </ol> <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
URL protokół:[//] username:[passwd]@ adres :port katalog plik jan@haslo@jan@ :80:234 http://ftp://news://javascript: mailto: www.serwer.plftp.serwer.pl /img/wakacje/ /multimedia/ /~user/ foto.jpg index.html skrypt.cgi?a=1 http://www.serwer.pl/http://www.serwer.pl/foto/pic123.jpgftp://ftp.sunsite.icm.edu.pl/ http://user:pass@www.serwer.pl:80/katalog/..../katalog_n/plik.roz
Znaki specjalne Przykłady: <p> Porównanie liczb: 2 < 4 a 8 > 5 </p> <p> Lorem " ipsumdolor " 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: <imgsrc=„foto.jpg" width=„200" height=„400" alt=„fotka" /> <imgsrc=„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"> <imgsrc=„moja_mapa.png" alt=„moja mapa" width=„200" height=„200" ismap> </a>
<img> - przykład mapy po stronie klienta <imgsrc=„obrazek.png" width=„200" height=„200" alt=„moja mapa" usemap="#mojamapa"><map name=„mojamapa"><areashape="rect" coords="0,0,100,100" href=„1.html„ alt=„1"><areashape=„rect" coords=„0,100,0,200" href=„2.html" alt=„2"><areashape="circle" coords=„100,100,25" href=„3.html" alt=„3"><areashape="circle" coords=„150,150,25" href=„4.html" alt=„4"><areashape=„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> <imgsrc=„obrazek.png" alt=„Obrazek" width="320" height=„240"> <figcaption>Rys 1. – Loremipsumdolor.</figcaption></figure>
<canvas> - kontener do renderowania grafiki rastrowej Parametry: height - wysokość width - szerokość Przykład: <canvasid="moj_obraz" height="200" width="500"></canvas> <scripttype="text/javascript"> varcanvas=document.getElementById('moj_obraz'); varctx=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: <embedid=„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> <sourcesrc=„muzyka.ogg" type="audio/ogg"> <source src=„muzyka.mp3" type="audio/mpeg"> <sourcesrc=„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 videoposter – 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"> <sourcesrc=„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> <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> <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>
