Specjalizacja "Dziennikarstwo On-line„ HTML – XHTML część 2 Prowadzący: Dariusz Jaruga djaruga@klub.chip.pl.

Slides:



Advertisements
Podobne prezentacje
Dokument HTML jest zwykłym
Advertisements

Technologie prezentacji medialnych, © 2006 Igor Garnik
Podstawowe wiadomości
Style CSS.
Podstawowa struktura dokumentu HTML
Aplikacje ASP.NET Arkadiusz Twardoń ZTiPSK
Tworzenie stron internetowych www World Wide Web
Czym są HTML i XHTML? Skrót HTML pochodzi od słów Hypertext Markup Language (język znakowania hipertekstu). Język HTML jest podstawą każdej strony WWW.
Projektowanie Stron WWW
OPRACOWAŁ : KONRAD MIGAŁA iz krótki tekst Krótki tekst Do formatowania tekstu użyjemy znacznika jest to znacznik który umożliwia utworzenie akapitu.
* HTML5 i CSS3 w nowoczesnych serwisach internetowych
języka hipertekstowego
Dr inż. Jan Kapała HTML (Hyper Text Markup Language) jest językiem programowania, który umożliwia równoczesne: redagowanie tekstu umieszczanie obrazów.
Wprowadzenie do HTML, CSS, JavaScript, PHP
Damian Zawada
Tworzenie stron internetowych
Tworzenie strony internetowej krok po kroku.
Kurs języka HTML Mariusz Tomczyk.
Tworzenie stron internetowych www World Wide Web
Specjalizacja "Dziennikarstwo On-line„ asynchroniczny JavaScript i XML – AJAX Część 6 Prowadzący: Dariusz Jaruga
Specjalizacja "Dziennikarstwo On-line„ HTML – XHTML Część 4 Prowadzący: Dariusz Jaruga
Specjalizacja "Dziennikarstwo On-line„ Arkusze stylów – CSS Część 5 Prowadzący: Dariusz Jaruga
Specjalizacja "Dziennikarstwo On-line„ HTML – XHTML część 3 Prowadzący: Dariusz Jaruga
HTML Hyper Text Markup Language komputerowe Esperanto cz. II Obiekty podstawowe na stronach.
Wprowadzenie do HTML Informatyka Cele lekcji: Wiadomości:
Temat 5: Pozycjonowanie elementów
Jak prawidłowo wykonać prezentację pracy dyplomowej w IIT PWSTE w Jarosławiu Jan Kowalski geodezja i kartografia prof. dr hab. inż. Marian Nowak.
HTML Hyper Text Markup Language
Specjalizacja "Dziennikarstwo On-line„ HTML – XHTML część 1 Prowadzący: Dariusz Jaruga
HTML.
Podstawy HTML RAMKi. Ramki Za ich pomocą możesz swobodnie podzielić okno przeglądarki na kilka części i w nich niezależnie przeglądać dokumenty. Ramki.
HTML Czyli Publikowanie w Internecie. Publikowanie w sieci - problemy Różne platformy sprzętowe użytkowników Różne systemy operacyjne Różne programy służące.
Elementy multimedialne na stronie
Projektowanie Aplikacji Internetowych
HTML Czyli Publikowanie w Internecie. Przeglądarka internetowa –Mosaic - pierwsza –Netscape –Internet Explorer –Opera –Mozilla Dokument HTML –Dokument.
LISTY HTML. Listy s ą definiowane za pomoc ą znacznika podstawowego innego dla ka ż dego rodzaju list Specyfikacja XHTML, zawiera specjalne znaczniki.
Aplikacje internetowe CSS - Formatowanie list. Ogólne informacje o listach W standardowym HTML-u istnieją dwa typy list: numerowane i wypunktowane. Na.
HTML.
Dla ułatwienia przygotowania przez Państwa standardowej prezentacji urzędowej zostały wstawione na stałe podstawowe, obowiązujące elementy graficzne po.
HTML (ang. HyperText Markup Language ) – język do tworzenia stron internetowych opierający się na znacznikach, czy inaczej je nazywając – tagach. Język.
HTML Hyper Text Markup Language komputerowe Esperanto cz. III polecenia konstrukcyjne strony.
Treści multimedialne - kodowanie, przetwarzanie, prezentacja Odtwarzanie treści multimedialnych Andrzej Majkowski 1 informatyka +
Treści multimedialne - kodowanie, przetwarzanie, prezentacjaOdtwarzanie treści multimedialnych Andrzej Majkowski informatyka +
Temat 9: Obrazy i multimedia
Temat 4: Klasy i identyfikatory
Gabriela Przęczek. Formatowanie tekstu ZnacznikDziałanie Pogrubienie tekstu Kursywa Podkreślenie Przekreślenie czcionki Zwiększa rozmiar domyślnej czcionki.
Dla ułatwienia przygotowania przez Państwa standardowej prezentacji urzędowej zostały wstawione na stałe podstawowe, obowiązujące elementy graficzne po.
HTML HTML (ang. HyperText Markup Language, pol. hipertekstowy język znaczników) – język wykorzystywany do tworzenia stron internetowych HTML zdefiniowanie.
Temat 5: Instrukcje: print(), echo()
Społecznikom. TYTUŁ ZWYKŁEGO SLAJDU NAWET DŁUGI Ut eget dapibus libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus.
Temat Prezentacji : ZNACZNIKI META TAGS wyk.H. Kozłowski.
I TY ZOSTAŃ WEBMASTEREM! CZĘŚĆ 2 – „STRUKTURA STRONY” STWORZYŁ GABRIEL ŚLAWSKI.
Kaskadowe arkusze stylów CSS. Reguła CSS – definiuje sposób formatowania elementów na stronie WWW Części składowe reguły CSS selektor{ właściwość: wartość;
HTML 5.0. Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego 2 Program Literatura Historia HTML Koncepcja HTML.
Dla ułatwienia przygotowania zostały wstawione na stałe elementy graficzne po to, aby nie uległy przypadkowemu przesunięciu. Są to: znak promocyjny (logo)
Multimedia w HTML5 Statyczne witryny internetowe 2TIa Marek Kwiatkowski.
Wykład 4 Informatyka MPDI sem.3 HTML cd. Arkusze stylów - CSS.
HTML.  Wprowadzenie  Protokół HTTP  Język HTML  Definicja typu dokumentu  Nagłówek strony  Formatowanie treści dokumentu  Definiowanie struktury.
HTML + CSS = strony internetowe Krzysztof Geras. FAKTY I MITY Czym nie jest HTML: ● programem do tworzenia stron internetowych, ● interpreterem skryptów.
Prezentujemy Państwu przykładowe slajdy w dwóch nowych wzorach prezentacji. Obydwa layouty są elastyczne, dając wiele możliwości układu tekstu, zdjęć.
Arkusz stylów CSS Cascading Style Sheet.
Podstawowa struktura dokumentu HTML
Tytuł prezentacji: Verdana Bold 30/38 pt
Tytuł główny prezentacji
Tytuł prezentacji tytuł prezentacji druga czesc
TYTUŁ PREZENTACJI Dewiza prezentacji.
Tytuł artykułu w języku prezentowania
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[Tytuł plakatu] Lorem ipsum dolor sit amet, consectetuer adipiscing elit maecenas porttitor congue massa fusce [Zastąp następujące nazwiska i tytuły odpowiednimi.
Tytuł głównego artykułu magazynu
Zapis prezentacji:

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 Bo­ga, On często schodzi po kryjomu I pu­ka do drzwi twoich, aleś rzad­ko 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 ' ' &apos; 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>