Tablice informatyczne HTML 5 Wydanie II.pdf

(77 KB) Pobierz
HTML 5.
BAZOWY KOD PUSTEJ STRONY WWW
<!DOCTYPE html>
<html>
<head>
<title>TYTUŁ
STRONY</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
KOD OPISUJĄCY WYGLĄD STRONY
</body>
</html>
Wydanie II
TABLICE INFORMATYCZNE •
Radosław Sokół
Element
<base>
Przykład
Opis
Atrybuty opcjonalne:
href="uri"
— definiuje pełny adres URI dla połączeń
korzystających z adresowania względnego.
target="_blank
|
_parent
|
_self
|
_top"
—
określa miejsce otwarcia dokumentu: w nowym oknie
| w oknie nadrzędnym | w bieżącej ramce lub oknie |
w pełnym oknie na wierzchu stosu.
<body>
<p>Oto treść dokumentu.</p>
</body>
<!-- Komentarz -->
Stanowi pojemnik na treść dokumentu. Jedynie elementy
języka HTML umieszczane wewnątrz elementu
<body>
będą poprawnie wyświetlane przez przeglądarkę.
Znacznik stosowany do wstawienia w kodzie HTML
komentarza (komentarz jest ignorowany przez przeglą-
darkę). Komentarz pomaga przy opisywaniu znaczenia
poszczególnych sekcji kodu.
Z powodu nieużyteczności komentarzy dla użytkowników
stron WWW oraz zwiększania rozmiaru zbiorów
pobieranych przez sieć komentarzy powinno się używać
tymczasowo i usuwać je z finalnych, udostępnianych
użytkownikom wersji kodu stron WWW.
<body>
<!-->
ELEMENTY ORGANIZACYJNE
Element
<!DOCTYPE>
Przykład
XHTML DTD
<!DOCTYPE html PUBLIC "-//
W3C//DTD XHTML 1.0 Strict//
EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-strict.
dtd">
HTML5 pseudo-DTD
<!DOCTYPE html>
Opis
Definiuje typ dokumentu. Deklaracja ta powinna
pojawić się jako pierwszy element kodu HTML.
Informuje ona przeglądarkę o wersji języka HTML,
w której zapisany jest kod strony.
Zapewnia też zgodność z interpreterami języka XML,
umożliwiając im pobranie odpowiedniego słownika
elementów występujących w dokumencie.
W języku HTML5 zrezygnowano z zapewnianej przez
wycofywany obecnie standard XHTML zgodności
z językiem XML. Pseudoelement
DOCTYPE
zachowano
wyłącznie po to, by uniknąć problemów z interpretacją
dokumentów przez starsze wersje przeglądarek WWW.
Informuje przeglądarkę, że plik zawiera kod HTML.
PODZIAŁ ORGANIZACYJNY TREŚCI STRONY
Element
<header>
Przykład
<header>
<h1>Najważniejsze elementy
organizacyjne</h1>
</header>
<footer>
<p>Ostatnia zmiana: 1 wrześ-
nia 2011 roku. Wszystkie
prawa zastrzeżone.</p>
</footer>
<nav>
<h1>Nawigacja:</h1>
<ul>
<li><a href="...">...</
a></li>
</ul>
</nav>
<section>
<article>
<h1>...</h1>
<p>...</p>
</article>
<article>
<h1>...</h1>
<p>...</p>
</article>
</section>
<article>
<h1>...</h1>
<p>...</p>
</article>
<aside>
<p>.....</p>
</aside>
Opis
Wyznacza w dokumencie HTML obszar pełniący rolę
nagłówka strony WWW. Obszar nagłówka powinien
zawierać tytuł strony oraz wszystkie elementy graficzne
powiązane z tytułem.
Wyznacza w dokumencie HTML obszar pełniący rolę
stopki strony WWW. Obszar stopki najczęściej zawiera
informacje o dokumencie, jego autorze, informacje praw-
ne dotyczące ochrony praw autorskich oraz wszystkie
powiązane z nimi elementy graficzne.
Grupuje elementy umożliwiające nawigację w ramach
dokumentu lub serwisu internetowego. Element może
zawierać nagłówek obszaru nawigacji. Poszczególne
elementy nawigacyjne powinny być zapisane jako
elementy listy wypunktowanej (orientację elementów oraz
styl wypunktowania można zmodyfikować za pomocą
kaskadowych arkuszy stylu).
Grupuje elementy treści strony WWW w całość odpowia-
dającą rozdziałowi książki.
<html>
<html>
<head>
</head>
<body>
<p>Zawartość dokumentu...</
p>
</body>
</html>
<html>
<head>
<title>Tytuł</title>
<meta http-equiv="Content-
-Type" content="text/html;
charset=utf-8" />
<link rel="stylesheet"
type="text/css" src="plik.
css" />
</head>
...
<head>
<title>Tytuł strony</title>
</head>
<footer>
<nav>
<head>
Element
<head>
zawiera informacje o dokumencie.
Nie są one przez przeglądarkę wyświetlane
(poza tytułem, który się pojawia na pasku tytułu okna
przeglądarki). Umieszczane są w nim następujące
elementy:
<base>,
<link>,
<meta>, <script>, <style>
i
<title>.
<section>
<title>
Określa tytuł dokumentu. Tytuł będzie wyświetlany
na pasku tytułu okna przeglądarki. By użytkownikom
strony ułatwić nawigację między wieloma stronami
składowymi serwisu WWW, jako pierwszą powinno się
zamieścić część tytułu strony jednoznacznie
identyfikującą konkretną stronę, nie zaś cały serwis.
W elemencie
meta
umieszczane są opisy i słowa
kluczowe wykorzystywane przez serwisy wyszukujące.
Atrybut wymagany:
content="tekst"
— dostarcza informacje, które są
stowarzyszone z atrybutami
name
i
http-equiv.
Atrybuty opcjonalne:
name="author
|
description
|
keywords
|
generator
|
revised
|
inne"
— definiuje nazwę
obiektu
<meta>.
http-equiv="content-type
|
expires
|
re-
fresh
|
set-cookie"
— definiuje dodatkową akcję,
która ma być wykonana (w przykładzie obok będzie to
załadowanie innej strony po sześciu sekundach).
<article>
Wydziela spójny, niezależny fragment treści, na przykład
jeden z wielu artykułów na stronie, podrozdział tekstu
książki, notkę prasową.
Tworzy oddzielny fragment treści niezależny od treści
elementu nadrzędnego. Odpowiada ramce z uwagami
umieszczanej na marginesie głównego tekstu (i może
przybierać taką formę graficzną dzięki odpowiednim
definicjom CSS).
Wydziela interaktywny element strony, na przykład
pole dialogowe (modalne lub niemodalne) pozwalające
użytkownikowi na wprowadzanie danych i uruchamianie
funkcji aplikacji.
Tworzy nagłówek (tytuł) dla elementów następujących
poniżej. Nagłówek nie może zawierać elementów pod-
rzędnych (zob. przykład obok). W ramach każdej sekcji
treści wydzielonej powyższymi (nowymi dla HTML5)
elementami można rozpoczynać tworzenie nagłówków
od elementu
<h1>,
jednak zawsze należy trzymać się
konsekwentnie ich hierarchii, nie przeskakując poziomów
(po
<h2>
zawsze musi występować
<h3>
i tak dalej).
Tworzy blok informacji widocznych dopiero w momencie
rozwinięcia go przez użytkownika lub skrypt.
Atrybut opcjonalny:
open="open"
— powoduje rozwinięcie elementu
i wyświetlenie jego treści.
<meta>
Ten element
meta
zawiera słowa
kluczowe dla wyszukiwarek:
<meta name="keywords"
content="HTML, DHTML, CSS,
XML, XHTML" />
Ten element
meta
zawiera opis strony:
<meta name="description"
content="Strona o HTML, XML
i XHTML" />
Tu umieszczono informacje o ostatniej
aktualizacji strony:
<meta name="revised"
content="dane_autora,
6/10/99" />
Tu wykorzystano znacznik
meta
do
załadowania innej strony:
<meta http-equiv="refresh"
content="6";url=http://nowy-
adres.com/strona.html" />
Aby zdefiniować odwołanie domyślne
do zasobów zewnętrznych, w sekcji
head
umieść element
base
i podaj
w nim pełny adres URI zasobu:
<base href=”http://adres_
uri_zasobu.com/” />
W dokumencie wystarczy już podać
tylko adres względny:
<img src=”images/mary.
gif” />
<aside>
<dialog>
<dialog>
<button>....</button>
</dialog>
<h1>1. ....</h1>
<h2>1.1. ....</h2>
<p>......</p>
<h2>1.2. ....</h2>
<p>......</p>
<h1>2. ....</h1>
<p>......</p>
<details>
<summary>Nazwa projektu</
summary>
<p>Ten akapit zawiera
szczegółowe informacje
o projekcie.</p>
</details>
Zob. przykład dla
<details>.
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<base>
Definiuje domyślne odwołanie do zasobów zewnętrznych.
Jeśli strona stanowi układ ramek, można zastosować
element
base
z atrybutem
target,
aby wskazać
wszystkim połączeniom na stronie konkretną ramkę,
w której dokumenty będą otwierane.
Jeśli strona nie jest układem ramek, element
base
z atrybutem
href
pozwoli zdefiniować odwołanie do
zewnętrznych zasobów, takich jak: dokumenty, obrazy
i arkusze stylów.
<details>
<summary>
Definiuje zawsze widoczne podsumowanie wiadomości
ukrytej domyślnie za pomocą elementu
<details>.

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin