Hipertekst i hipermedia dr inż. Wioleta Szwoch Katedra Inteligentnych Systemów Interaktywnych Plan wykładu " HTML ogólna struktura znaczniki HTML 5 HTML HyperText Markup Language " Język opisujący strukturę dokumentów stron WWW treść + układ graficzny tekst, multimedia, hyperlinki rozkazy formatujące zapisane w postaci znaczników sztywny zbiór znaczników HTML w przeglądarkach " Przeglądarka czyta dokument HTML interpretuje zawartość wyświetla dokument jako stronę internetową " XII 1999 HTML 4.01 " V 2000 powstanie XHTML 1.0 " I 2008 HTML 5 Working Draft " V 2011 HTML 5 Working Draft " XHTML, HTML te same znaczniki, nieco inny sposób zapisu, pewne ograniczenia Typy HTML " Strict prawidłowa wersja standardu nie używa przestarzałych tagów " Transitional (przejściowy) wprowadzone w celu przejścia ze starszych wersji HTML Znaczniki HTML " Znacznik, tag, element, etykieta " Słowa kluczowe " Większość znaczników występuje w parach: znacznik otwierający i znacznik zamykający Wartość " Puste znaczniki Atrybuty " Znaczniki mogą posiadać atrybuty sterujące " Dostarczają dodatkowej informacji o elementach " Występują w znaczniku początkowym Walidacja XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xht ml1-strict.dtd">
znakowania opisujące zawartość dokumentu
znakowania tworzące zawartość dokumentu
Znakowanie nagłówka tytuł dokumentu, nazwa sugerująca treść <br> <script> funkcje do obsługi zdarzeń <br> <style> wybór stylu prezentacji <br> <meta> informacja dla wyszukiwarek <br> <link> definiuje związek pomiędzy dokumentem a <br> plikami zewnętrznymi <br><meta name="author" content="Kowalski Jan"/> <br>< meta name="keywords" content="HTML, CSS, XML" /> <br>< link rel="stylesheet" type="text/css" href="mystyle.css" /> <br><style type="text/css"> <br> h1 {color:red;} <br> p {color:blue;} <br></style> <br> Znaczniki HTML obróbka tekstu <br>" Nagłówki <br> <h1>, <h2>, & <br>" Akapit <br> <p>Zawartość akapitu</p> <br>" Nowa linia <br> <br/> <br> Znaczniki HTML obróbka tekstu <br>" Nagłówki <br><h1>Tytuł strony</h1> <br><p>To jest bardzo długi akapit. To jest bardzo długi <br> <h1>, <h2>, & <br>akapit. <br/>To jest bardzo długi akapit. To jest <br>" Akapit <br>bardzo długi akapit. To jest bardzo długi akapit.</p> <br> <p>Zawartość akapitu</p> <br><p>To jest drugi akapit.</p> <br>" Nowa linia <br> <br/> <br> Proste formatowania znaków <br>" Znakowanie logiczne " Znakowanie fizyczne <br>(content-based tags, (physical style tags) <br>logical tags) <br> bezpośredni wybór <br>czcionek, rozmiarów i <br> zaznaczanie obszaru o <br>kolorów <br>specyficznym kontekście <br>lub znaczeniu, pośredni <br>wpływ na wygląd <br><em>wyróżnienie</em> <b>Zawartość wytłuszczona</b> <br><strong>wzmocnienie</strong> <i>Zawartość kursywą</i> <br><dfn>definicja</dfn> <u>Zawartość podkreślona</u> <br> Aączniki hipertekstowe <br>" jeden z fundamentalnych mechanizmów HTML <br>" służy do nawigacji <br> wewnątrz dokumentu HTML <br> pomiędzy różnymi dokumentami HTML <br><a href= dokument docelowy, #nazwakotwicy > </a> <br><a name= adres docelowy(kotwica) > </a> <br> Aączniki hipertekstowe <br>" Absolutne <br> zawsze dotyczy tego samego miejsca (domena i <br>katalog) <br>" Względne <br> pobieranie pliku z miejsca względem pliku HTML <br> Grafika w dokumencie HTML <br>" znacznik <img> <br>" Adresacja oparta na URL (src) <br>" Znakowanie alternatywne (alt) <br>" Modyfikacja rozmiaru (width, height) <br> Mapy obrazów <br>" Podział obrazu na regiony połączone z innymi <br>dokumentami <br>" Atrybuty obrazu (img) <br> skalowanie (width, height) <br> mapa podziału (usemap) <br>" Atrybuty mapy (map) <br> nazwa (name) <br>" Atrybuty obszarów <br>składowych (area) mapy <br> współrzędne (coords) <br> kształt (shape) <br>" rect, poly, circle <br> Tabele <br>" <table>.. . </table> dla całej tabeli <br>" <tr> & </tr> dla każdego wiersza <br>" <td> & </td> dla każdej komórki w wierszu <br>" <th> & </th> dla komórki z wiersza nagłówka <br>" Umożliwiającą prezentację danych liczbowych <br>" Tworzenie zestawień danych tabelarycznych <br>" Zawartość komórki <br> dowolny element <br>" tekst, obraz, formularz, hiperłącze, itd. <br> Listy <br>" Uporządkowanie informacji w formie wyliczenia <br>" Wypunktowanie: prosta lista <ul> <li> <br> Listy <br>" Uporządkowanie informacji w formie wyliczenia <br>" Wypunktowanie: prosta lista <ul> <li> <br>" Lista numerowana <ol> <li> <br> Listy <br>" Uporządkowanie informacji w formie wyliczenia <br>" Wypunktowanie: prosta lista <ul> <li> <br>" Lista numerowana <ol> <li> <br>" dobór cyfr type <br>" zakres numeracji start <br> Listy <br>" Uporządkowanie informacji w formie wyliczenia <br>" Wypunktowanie: prosta lista <ul> <li> <br>" Lista numerowana <ol> <li> <br>" dobór cyfr type <br>" zakres numeracji start <br>" Lista zagnieżdżona <br>" Lista definicyjna <br> Komentarze <br>" <!-- To jest komentarz --> <br>" <!-- <br> Ten akapit <br> również <br> jest komentarzem... <br> --> <br> Formularze <br>" Fragment dokumentu HTML zawierający <br>kontrolki umożliwiające wprowadzanie danych <br> mechanizm umożliwiający użytkownikowi przekazanie <br>danych do aplikacji internetowej <br> pola tekstowe, pola haseł, pola wyboru, pola radiowe, <br>pola typu memo, listy rozwijane, przyciski <br>" Podstawowa metoda interakcji między <br>użytkownikiem i aplikacją internetową <br>" Umożliwia wprowadzanie danych za pomocą <br>interfejsu użytkownika (podobnie jak w <br>aplikacjach desktopowych) <br> Formularze <br>" <form> zawartość formularza </form> <br>" <input type= > <br>pole tekstowe type="text" <br>przyciski radiowe type="radio" <br>pole z hasłem type="password" <br>lista rozwijana <select><option></select> <br>pole typu memo <br><textarea rows="n" cols="m"> <br>pole wyboru type="checkbox" <br>przyciski <br>do wysłania type="submit" <br>czyszczenia type="reset" <br> Atrybuty znaczników formularza <br>" Pozwalają dowolnie modyfikować elementy formularz<br>" name <br> nazwa elementu formularza <br>" value <br> domyślna wartość pola (pola tekstowe i pola z hasłami) <br> etykieta przycisku (przyciski), <br> wartość elementu przesyłana do aplikacji (pola wyboru i przyciski radiowe<br>" readonly (yes|no) <br> flaga oznaczająca, czy dany element może być modyfikowany <br>" checked (yes|no): <br> flaga oznaczająca, czy dany element jest zaznaczony <br> Podział strony <br>" <div> <br> definiuje sekcje w dokumencie HTML <br> używany do grupowania elementów, aby sformatować <br>je w jednym stylu <br><div id= header > <br> <h1>My interesting life</h1> <br></div> <br><div id= sidebar > <br> <h2>Menu</h2> <br> <ul> <br> <li><a href= last-week.html >Last week</a></li> <br> <li><a href= archive.html >Archives</a></li> <br> </ul> <br></div> <br> HTML - wady i zalety <br>" Zalety <br> prostota składni <br>" łatwość tworzenia dokumentów <br> dostępność przeglądarek <br>" możliwość pobierania i oglądania dokumentów <br>" Wady <br> brak separacji formy i treści <br>" trudności z automatycznym przetwarzaniem i <br>przeszukiwaniem dokumentów <br> nie obejmuje logicznej struktury dokumentu, jest <br>bardziej nastawiony na prezentacje <br> nie jest rozszerzalny <br> HTML 5 - nowości <br>" semantyka <br>" canvas <br>" video i audio <br>" geolokacja <br> Wizualizacja i multimedia <br>" canvas <br>" dzwięk i video <br>" przejęcie funkcjonalności dotychczas oferowanej <br>tylko przez pluginy <br> pluginy nie zawsze są lub mogą być obecne (np. w <br>iPadach nie ma Flasha) <br> są kłopotliwe w integracji z resztą dokumentu HTML <br> Canvas <br>" Możliwość rysowania <br> tylko kontener na grafikę <br> tworzy na ekranie prostokątny obszar grafiki rastrowej <br> można na nim rysować z poziomu JavaScriptu <br><canvas id="my-first-canvas" width="360" height="240"> <br>Tutaj tekst wyświetlany gdy przeglądarka nie obsługuje <br>canvas. <br></canvas> <br><script> <br>var c = document.getElementById( 'my-first-canvas' ); <br>var cxt = c.getContext('2d'); <br>var grd=cxt.createLinearGradient(0,0,175,50); <br>grd.addColorStop(0,"#FF0000");grd.addColorStop(1,"#0000FF");<br>cxt.fillStyle=grd; cxt.fillRect(0,0,175,50); <br></script> <br> Canvas <br>" Funkcjonalność <br> rysowanie prostokątów i ścieżek (linie, łuki, krzywe Beziera, ...), <br> wypełnianie figur kolorem, wzorem lub gradientem, <br> rysowanie napisów, <br> obsługa przezroczystości, <br> przekształcenia (przesuwanie, skalowanie, przekrzywianie itp.), <br> osadzanie obrazów rastrowych (PNG, JPEG, GIF), <br> cieniowanie, <br> ... <br>" Zastosowania <br> grafy i wykresy, <br> gry, <br> ... <br>" SVG <br> możliwość umieszczania kodu w HTML <br> <video> <br>" kodeki brak porozumienia producentów <br>" atrybut controls dodaje kontrolę odtwarzania np. <br>play, pause, głośność <br>" <source> <br> przeglądarka użyje pierwszego rozpoznanego formatu <br><video controls width="360" height="240" poster="placeholder.jpg"> <br> <source src="movie.mp4" type="video/mp4"> <br> <source src="movie.webm" type="video/webm"> <br> <source src="movie.ogv" type="video/ogg"> <br> <object type="application/x-shockwave-flash" width="360" <br>height="240" data="player.swf?file=movie.mp4"> <br><param name="movie" value="player.swf?file=movie.mp4"> <br><a href="movie.mp4">Download the movie</a> <br> </object> <br>Przeglądarka nie obsługuje znacznika video <br></video> <br> <audio> <br>" analogicznie jak dla znacznika <video> <br><audio controls> <br> <source src="pliczek.ogg" type="audio/ogg"> <br> <source src="pliczek.mp3" type="audio/mpeg"> <br> <object type="application/x-shockwave-flash" <br>data="player.swf?soundFile=pliczek.mp3"> <br><param name="movie" value="player.swf?soundFile=pliczek.mp3"> <br><a href="pliczek.mp3">Download the song</a> <br> </object> <br></audio> <br> Znaczniki semantyczne <br>" <section>: grupuje tematycznie powiązaną zawartość, <br>zwykle wraz z jakimś nagłówkiem, <br>" <article>: samodzielna, główna treść, (post bloga, post na <br>forum, artykuł gazety, itp.) <br>" <header>: kontener dla informacji wprowadzających (np. <br>tytuł, spis treści, pole wyszukiwania, logo) i wskazówek <br>nawigacyjnych, <br>" <footer>: informacje o kontenerze nadrzędnym: kontakt z <br>autorem, prawa autorskie, polityka prywatności, łącza do <br>powiązanych treści, łącze do pomocy itp. <br>" ... <br>" Nowe znaczniki semantyczne nie wprowadzają żadnego <br>formatowania od tego są arkusze stylów. <br> Walidacja <br>" nowe kontrolki natywne <br><input name= url type= url > <br><input name= number type= number min= 1 max= 5 > <br><input name= number type= range min= 1 max= 5 > <br><input name= date type= date > <br> Geolocation API <br>" Pozwala ustalić gdzie znajduje się internauta i <br>udostępnić tę informację <br>" Konieczna zgoda użytkownika <br> określa jakiej domenie chce udostępnić informacje <br>" Lokalizacja <br> na podstawie adresu IP klienta <br> na podstawie pomiaru siły sygnału BTSów w pobliżu <br> na podstawie wbudowanego w urządzenie GPSa <br>" Dostęp do <br> współrzędnych geograficznych, prędkości poruszania użytkownika, kierunku <br>ruchu, & <br><br>
<br>Wyszukiwarka<br>
<form method="get" action="https://zanotowane.pl/szukaj3.php">
<input value="" id="q" name="q" />
<input type="submit" value="Szukaj" />
</form>
<br>Podobne podstrony:<br><a href="../../144/6942">html 02 1</a><br><a href="../../168/6404">02 Materialy budowlane wydruk</a><br><a href="../../112/4307">Avar March [Bound 02 5] Deliberately Unbound (html)</a><br><a href="../../184/2276">Al Past [Distant Cousin 02] Repatriation (html)</a><br><a href="../../123/6151">html 02</a><br><a href="../../96/2951">Kirvin, Jeff [Unification Chronicles 02] First Contact II (v1 0) [html]</a><br><a href="../../153/2569">Magazine Ellery Queen Mystery Magazine 2007 02 February (v1 0) [html]</a><br><a href="../../195/4314">Magazine Asimov s Science Fiction 2006 Issue 02 February [html]</a><br><a href="../../131/5997">Magazine Asimov s Science Fiction 2007 Issue 02 February (v1 0) [html]</a><br><a href="../../143/257">Margit Sandemo Cykl Saga o czarnoksiężniku (02) Blask twoich oczu</a><br><a href="../../143/295">t informatyk12[01] 02 101</a><br><a href="../../143/525">introligators4[02] z2 01 n</a><br><a href="../../143/535">02 martenzytyczne1</a><br><a href="../../143/763">OBRECZE MS OK 02</a><br><a href="../../143/1158">02 Gametogeneza</a><br><a href="../../143/1481">02 07</a><br><br><a href="https://zanotowane.pl/szukaj3.php?q=02+HTML+wydruk" rel="nofollow">więcej podobnych podstron</a><br><br><form method="get" action="https://zanotowane.pl/szukaj3.php"><input value="" id="q" name="q" /><input type="submit" value="Szukaj" /></form>
</div>
<!-- /.container -->
<footer>
<div class="footer-blurb">
<div class="container">
<div class="row">
<div class="col-sm-4 footer-blurb-item">
</div>
</div>
<!-- /.row -->
</div>
</div>
<div class="small-print">
<div class="container">
<p><a href="mailto:edibk@onet.pl">Kontakt</a> | <a href="../../polityka.php">Polityka prywatności</a></p>
</div>
</div>
</footer>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-L8W7STRP18"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-L8W7STRP18');
</script>
</body>
</html>