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
<tag>
Wartość
</tag>
• Puste znaczniki
<tag/>
Atrybuty
• Znaczniki mogą posiadać atrybuty sterujące
• Dostarczają dodatkowej informacji o elementach
• Występują w znaczniku początkowym
<tag attrName= ”value” >
Walidacja
<html>
</html>
<head>
</head>
<body>
</body>
<!DOCTYPE html PUBLIC -//W3C//DTD
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
<title>
tytuł dokumentu, nazwa sugerująca treść
<script> funkcje do obsługi zdarzeń
<style>
wybór stylu prezentacji
<meta>
informacja dla wyszukiwarek
<link>
definiuje związek pomiędzy dokumentem a
plikami zewnętrznymi
<meta name="author" content="Kowalski Jan"/>
< link rel="stylesheet" type="text/css" href="mystyle.css" />
< meta name="keywords" content="HTML, CSS, XML" />
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
Znaczniki HTML – obróbka tekstu
• Nagłówki
<h1>
,
<h2>
, …
• Akapit
<p>
Zawartość akapitu
</p>
• Nowa linia
<br/>
Znaczniki HTML – obróbka tekstu
• Nagłówki
<h1>
,
<h2>
, …
• Akapit
<p>
Zawartość akapitu
</p>
• Nowa linia
<br/>
<h1>Tytuł strony</h1>
<p>To jest bardzo długi akapit. To jest bardzo długi
akapit. <br/>To jest bardzo długi akapit. To jest
bardzo długi akapit. To jest bardzo długi akapit.</p>
<p>To jest drugi akapit.</p>
Proste formatowania znaków
<
em
>wyróżnienie</
em
>
<
strong
>wzmocnienie</
strong
>
<
dfn
>definicja</
dfn
>
<
b
>Zawartość wytłuszczona</
b
>
<
i
>Zawartość kursywą</
i
>
<
u
>Zawartość podkreślona</
u
>
• Znakowanie logiczne
(content-based tags,
logical tags)
– zaznaczanie obszaru o
specyficznym kontekście
lub znaczeniu, pośredni
wpływ na wygląd
• Znakowanie fizyczne
(physical style tags)
– bezpośredni wybór
czcionek, rozmiarów i
kolorów
Łączniki hipertekstowe
• jeden z fundamentalnych mechanizmów HTML
• służy do nawigacji
– wewnątrz dokumentu HTML
– pomiędzy różnymi dokumentami HTML
<a href=”dokument docelowy, #nazwakotwicy”> </a>
<a name=”adres docelowy(kotwica)”> </a>
Łączniki hipertekstowe
• Absolutne
– zawsze dotyczy tego samego miejsca (domena i
katalog)
• Względne
– pobieranie pliku z miejsca względem pliku HTML
Grafika w dokumencie HTML
• znacznik
<img>
• Adresacja oparta na URL (src)
• Znakowanie alternatywne (alt)
• Modyfikacja rozmiaru (width, height)
Mapy obrazów
• Podział obrazu na regiony połączone z innymi
dokumentami
• Atrybuty obrazu (img)
– skalowanie (width, height)
– mapa podziału (usemap)
• Atrybuty mapy (map)
– nazwa (name)
• Atrybuty obszarów
składowych (area) mapy
– współrzędne (coords)
– kształt (shape)
• rect, poly, circle
Tabele
•
<table>.. . </table>
dla całej tabeli
•
<tr> … </tr>
dla każdego wiersza
•
<td> … </td>
dla każdej komórki w wierszu
•
<th> … </th>
dla komórki z wiersza nagłówka
• Umożliwiającą prezentację danych liczbowych
• Tworzenie zestawień danych tabelarycznych
• Zawartość komórki
– dowolny element
• tekst, obraz, formularz, hiperłącze, itd.
Listy
• Uporządkowanie informacji w formie wyliczenia
• Wypunktowanie: prosta lista
<ul> <li>
Listy
• Uporządkowanie informacji w formie wyliczenia
• Wypunktowanie: prosta lista
<ul> <li>
• Lista numerowana
<ol> <li>
Listy
• Uporządkowanie informacji w formie wyliczenia
• Wypunktowanie: prosta lista
<ul> <li>
• Lista numerowana
<ol> <li>
• dobór cyfr
type
• zakres numeracji
start
Listy
• Uporządkowanie informacji w formie wyliczenia
• Wypunktowanie: prosta lista
<ul> <li>
• Lista numerowana
<ol> <li>
• dobór cyfr
type
• zakres numeracji
start
• Lista zagnieżdżona
• Lista definicyjna
Komentarze
• <!-- To jest komentarz -->
• <!--
Ten akapit
również
jest komentarzem...
-->
Formularze
• Fragment dokumentu HTML zawierający
kontrolki umożliwiające wprowadzanie danych
– mechanizm umożliwiający użytkownikowi przekazanie
danych do aplikacji internetowej
– pola tekstowe, pola haseł, pola wyboru, pola radiowe,
pola typu memo, listy rozwijane, przyciski
• Podstawowa metoda interakcji między
użytkownikiem i aplikacją internetową
• Umożliwia wprowadzanie danych za pomocą
interfejsu użytkownika (podobnie jak w
aplikacjach desktopowych)
Formularze
•
<form>
zawartość formularza
</form>
• <
input
type= >
pole tekstowe
type="text"
przyciski radiowe
type="radio"
pole z hasłem
type="password"
lista rozwijana
<select>
<option>
</select>
pole typu memo
<textarea rows="n" cols="m">
pole wyboru
type="checkbox"
przyciski
do wysłania
type="submit"
czyszczenia
type="reset"
Atrybuty znaczników formularza
• Pozwalają dowolnie modyfikować elementy formularza
• name
– nazwa elementu formularza
• value
– domyślna wartość pola (
pola tekstowe i pola z hasłami)
– etykieta przycisku (
przyciski
),
– wartość elementu przesyłana do aplikacji (
pola wyboru i przyciski radiowe
)
• readonly (yes|no)
– flaga oznaczająca, czy dany element może być modyfikowany
• checked (yes|no):
– flaga oznaczająca, czy dany element jest zaznaczony
Podział strony
• <div>
– definiuje sekcje w dokumencie HTML
– używany do grupowania elementów, aby sformatować
je w jednym stylu
<div id=”header”>
<h1>My interesting life</h1>
</div>
<div id=”sidebar”>
<h2>Menu</h2>
<ul>
<li><a href=”last-week.html”>Last week</a></li>
<li><a href=”archive.html”>Archives</a></li>
</ul>
</div>
HTML - wady i zalety
• Zalety
– prostota składni
• łatwość tworzenia dokumentów
– dostępność przeglądarek
• możliwość pobierania i oglądania dokumentów
• Wady
– brak separacji formy i treści
• trudności z automatycznym przetwarzaniem i
przeszukiwaniem dokumentów
– nie obejmuje logicznej struktury dokumentu, jest
bardziej nastawiony na prezentacje
– nie jest rozszerzalny
HTML 5 - nowości
• semantyka
• canvas
• video i audio
• geolokacja
Wizualizacja i multimedia
• canvas
• dźwięk i video
• przejęcie funkcjonalności dotychczas oferowanej
tylko przez pluginy
– pluginy nie zawsze są lub mogą być obecne (np. w
iPadach nie ma Flasha)
– są kłopotliwe w integracji z resztą dokumentu HTML
• Możliwość rysowania
– tylko kontener na grafikę
– tworzy na ekranie prostokątny obszar grafiki rastrowej
– można na nim rysować z poziomu JavaScriptu
Canvas
<
canvas
id="
my-first-canvas
" width="360" height="240">
Tutaj tekst wyświetlany gdy przeglądarka nie obsługuje
canvas.
</
canvas
>
<script>
var c = document.getElementById( '
my-first-canvas
' );
var cxt = c.getContext('2d');
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");grd.addColorStop(1,"#0000FF");
cxt.fillStyle=grd; cxt.fillRect(0,0,175,50);
</script>
• Funkcjonalność
– rysowanie prostokątów i ścieżek (linie, łuki, krzywe Beziera, ...),
– wypełnianie figur kolorem, wzorem lub gradientem,
– rysowanie napisów,
– obsługa przezroczystości,
– przekształcenia (przesuwanie, skalowanie, przekrzywianie itp.),
– osadzanie obrazów rastrowych (PNG, JPEG, GIF),
– cieniowanie,
– ...
• Zastosowania
– grafy i wykresy,
– gry,
– ...
• SVG
– możliwość umieszczania kodu w HTML
Canvas
<
video
controls width="360" height="240" poster="placeholder.jpg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<source src="movie.ogv" type="video/ogg">
<object type="application/x-shockwave-flash" width="360"
height="240" data="player.swf?file=movie.mp4">
<param name="movie" value="player.swf?file=movie.mp4">
<a href="movie.mp4">Download the movie</a>
</object>
Przeglądarka nie obsługuje znacznika video
</
video
>
<video>
• kodeki – brak porozumienia producentów
• atrybut controls dodaje kontrolę odtwarzania np.
play, pause, głośność
• <source>
– przeglądarka użyje pierwszego rozpoznanego formatu
<
audio
controls>
<source src="pliczek.ogg" type="audio/ogg">
<source src="pliczek.mp3" type="audio/mpeg">
<object type="application/x-shockwave-flash"
data="player.swf?soundFile=pliczek.mp3">
<param name="movie" value="player.swf?soundFile=pliczek.mp3">
<a href="pliczek.mp3">Download the song</a>
</object>
</
audio
>
<audio>
• analogicznie jak dla znacznika <video>
Znaczniki semantyczne
• <section>: grupuje tematycznie powiązaną zawartość,
zwykle wraz z jakimś nagłówkiem,
• <article>: samodzielna, główna treść, (post bloga, post na
forum, artykuł gazety, itp.)
• <header>: kontener dla informacji wprowadzających (np.
tytuł, spis treści, pole wyszukiwania, logo) i wskazówek
nawigacyjnych,
• <footer>: informacje o kontenerze nadrzędnym: kontakt z
autorem, prawa autorskie, polityka prywatności, łącza do
powiązanych treści, łącze do pomocy itp.
• ...
• Nowe znaczniki semantyczne nie wprowadzają żadnego
formatowania – od tego są arkusze stylów.
Walidacja
• nowe kontrolki natywne
<input name=”url” type=”url”>
<input name=”number” type=”number” min=”1” max=”5”>
<input name=”number” type=”range” min=”1” max=”5”>
<input name=”date” type=”date”>
Geolocation API
• Pozwala ustalić gdzie znajduje się internauta i
udostępnić tę informację
• Konieczna zgoda użytkownika
– określa jakiej domenie chce udostępnić informacje
• Lokalizacja
– na podstawie adresu IP klienta
– na podstawie pomiaru siły sygnału BTSów w pobliżu
– na podstawie wbudowanego w urządzenie GPSa
• Dostęp do
– współrzędnych geograficznych, prędkości poruszania użytkownika, kierunku
ruchu, …
Wyszukiwarka
Podobne podstrony:
02 html tabele
02 html formularze
02 html tabele
02 html formularze
spr HTML 02
R-02-07, Programowanie, ! HTML, HTML 4 - Vademecum
technologie internetowe cw 02 Formularze Html
Wyk 02 Pneumatyczne elementy
02 OperowanieDanymiid 3913 ppt
02 Boża radość Ne MSZA ŚWIĘTAid 3583 ppt
OC 02
PD W1 Wprowadzenie do PD(2010 10 02) 1 1
02 Pojęcie i podziały prawaid 3482 ppt
WYKŁAD 02 SterowCyfrowe
więcej podobnych podstron