Artykuł jest dużym rozszerzeniem poprzedich wpisów w tym dziale
- Elementy języka HTML5 (Artykuł dotyczący podstawowych elementów języka HTML (akapity, nagłówki, formatowanie tekstu, komentarze w HTML-u, atrybuty znaczników, wczytywanie arkuszy styli CSS) )
- Wprowadzenie do HTML5 (Artykuł na temat: różnic HTML4 i HTML5, budowa dokumenty HTML (znaczniki <html>,<body>,<head>), nowe znaczniki w HTML5 - omówienie sensu wstawiania poszczególnych znaczników (<section>, <article>, <aside>, <header>, <nav>), tabelarczne zestawienie nowych znaczników w HTML5
A teraz przejdźmy do części głównej artykułu. Na początku zaczniemy od kodu źródłowego zwykłego pliku html - jest kod zbliżony do tego ze strony Wprowadzenie do HTML5 choć brakuje mu znacznika <section>
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="utf-8" /> <title>Kultura w Kożuchowie</title> <link rel="stylesheet" type="text/css" href="style/filmy.css" /> <meta name="description" content="jakiś opis strony np.: Strona związana z wydarzeniami kulturalnymi w mieście i gminie Kożuchów"> <meta name="keywords" content="słowa kluczowe oddzielone przecinkami np.: kultura Kożuchów, imprezy Kożuchów, wydarzenia kulturalne w Kożuchowie, kultura w Nowej Soli, kultura Nowa Sól, zespoły muzyczne Kożuchów, grupy taneczne Kożuchów, wystawy Kożuchów"> <link rel="Shortcut Icon" href="obrazki/ikona.ico" /> </head> <body> <header> <h1>Nietuzinkowi artyści </h1> </header> <article id="muzyka"> <h2>Zespoły muzyczne</h2> <ul> <li><a href="#">Projekt: Chopin w Zakazanym Mieście</a></li> <li><a href="#">Zespół Disco Polo HardCore</a></li> <li><a href="#">Zespół: Widzimy się jutro!</a></li> </ul> </article> <article id="grafika"> <h2>Sztuki wizualne</h2> <ul> <li><a href="#">Projekt: Kożuchów Nocą</a></li> <li><a href="#">Skarby z kraju Chopina. Sztuka polska od XV do XX wieku</a></li> <li><a href="#">Konrad Witwicki, "Portret prowincjonalnej aktorki"</a></li> </ul> </article> <header> <aside><h2>Promocja książki Corpus inscriptionum Poloniae</h2> <p>Książka ta jest cyklem opisującym i dokumentującym pomniki nagrobne pozostawione przez społeczeństwo ewangelickie w gminie Kożuchów</p> <del>30zł</del><ins>21zł</ins> <a href="kupksiazke.php?title="Corpus inscriptionum Poloniae">Kup książkę</a> </aside> <h1>Demo SVG</h1> </header> <article> <h2>Moja grafika w SVG</h2> <p>To jest kwadrat</p> <svg width="400" height="110"> <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"> Przepraszamy ale Twoja przeglądarka nie wspiera SVG. </svg> <p>To jest linia</p> <svg height="210" width="500"> <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" /> Przepraszamy ale Twoja przeglądarka nie wspiera SVG. </svg> <p>Wykorzystanie flitrów w SVG</p> <svg height="110" width="110"> <defs> <filter id="f1" x="0" y="0"> <feGaussianBlur in="SourceGraphic" stdDeviation="15" /> </filter> </defs> <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" /> Przepraszamy ale Twoja przeglądarka nie wspiera SVG. </svg> </article> <footer> <p>Witryna dotycząca podstaw HTML-a</p> <div id="walidacja"> <!-- walidatory --> <a href="http://validator.w3.org/check?uri=referer"> <img src=”http://www.xsweb.fr/lib/img/xhtml.png" alt="XHTML5 walidacja" /></a> <a href="http://jigsaw.w3.org/css-validator/check?uri=referer"> <img src=”http://www.xsweb.fr/lib/img/css.png" alt="CSS3 walidacja" /></a> </div> </footer> </body>
Przykładowy plik CSS
body { font-family: Tahoma, Verdana, Geneva, sans-serif; background-color: #333; color: #808080; width: 80%; margin: 100px; border: 1px solid #0094F5; border-radius: 20px; padding: 50px; } header { padding: 10px; border-bottom: 2px solid #FF2620; margin: 0; } header h1 { font-size: xx-large; font-weight: normal; padding: 20px; margin: 0; color: #FF9900; } #muzyka, #grafika { margin: 20px 0; } #grafika ul, #muzyka ul { list-style: none; } #muzyka li a, #grafika li a { font-size: large; color: #FF9900; display: block; padding: 5px; } #muzyka li a:hover, #grafika li a:hover { border-left: 10px solid #94c9d4; padding-left: 10px; background-color: #e7f5f8; text-decoration: none; color: #0000FF; } footer { font-size: smaller; color: #cccccc; text-align: center; padding: 20px 10px 10px 10px; border-top: 2px solid #e5e5e5; } #walidacja { margin: auto; }
Elementy budujące stronę internetową
Elementy dokumentu i metadanych
DOCTYPE |
Wskazuje początek dokumentu HTML |
html |
Wskazuje początek kodu HTML w dokumencie |
body |
Wskazuje treść dokumentu HTML |
head |
Zawiera metadane dokumentu |
title |
Określa tytuł dokumentu |
style |
Wskazuje styl CSS |
meta |
Podaje informacje o dokumencie |
script |
Wskazuje blok skryptu lub plik ze skryptem |
noscript |
Zawiera treść wyświetlaną, gdy przeglądarka nie obsługuje skryptów lub obsługa jest wyłączona |
link |
Określa realację z zewnętrzymi zasobami |
base |
Określa podstawę względnych adresów URL Mbase |
template |
Zawiera szablon, którego zawartość jest obojętna, aż do czasu aktywacji |
Elementy tekstowe
Elementy cytowane |
|
q |
Wskazuje treści cytowane z innego źródła |
<p>WOŚP: <q>Dzięki środkom zebranym w ramach 1% podatku dochodowego za lata 2005 i 2006, kupiliśmy 220 półautomatycznych defibrylatorów. Rozdaliśmy je do miejsc publicznych w całej Polsce! Co roku skrupulatnie rozliczamy pieniądze zebrane w czasie Finału..</q></p> |
|
blockquote |
Wskazuje blok treści cytowanej z innego źródła |
<p>Poniżej informacje nt. Fundacji <abbr title="Wielka Orkiestra Świątecznej Pomocy">WOŚP</abbr> </p> <blockquote cite="http://www.wosp.org.pl/fundacja/o_nas"> Celem Fundacji jest działalność w zakresie ochrony zdrowia, polegająca na ratowaniu życia chorych osób, w szczególności dzieci, i działanie na rzecz poprawy stanu ich zdrowia, jak również na działaniu na rzecz promocji zdrowia i profilaktyki zdrowotnej. |
|
cite |
Wskazuje tytuł innego tekstu – będzie to zazwyczaj tytuł pracy uwidoczniony z kursywą |
<p><cite>Autobiografia Salomona Maimona</cite> autorstwa Salomona Majmon-a; żydowskiego filozofa, który to ostatnie dni swojego życia spędził w posiadłości hr. Hansa W.A. von Kalckreutha w Podbrzeziu Dolnym</p> |
|
abbr |
Wskazuje skrót |
<p>The <abbr title="Towarzystwo Przyjaciół Ziemi Kożuchowskiej">TPZK</abbr> ma na celu promocje Miasta i Gminy Kożuchów’ w kraju i zagranicą.</p> |
|
dfn |
Wskazuje definicję terminu |
<p><dfn title="Towarzystwo Przyjaciół Ziemi Kożuchowskiej">TPZK</dfn>, jest dobrowolnym, samorządnym trwałym zrzeszeniem mającym na celu rozwijanie oraz propagowanie inicjatyw, działań sprzyjających rozwojowi Miasta i Gminy Kożuchów.</p> |
|
<p>The <dfn><abbr title="Wielka Orkiestra Świątecznej Pomocy">WOŚP</abbr></dfn> fundacja o charakterze filantropijnym, której podstawowym celem zgodnie ze statutem jest: „działalność w zakresie ochrony zdrowia polegająca na ratowaniu życia chorych osób, w szczególności dzieci, i działanie na rzecz poprawy stanu ich zdrowia, jak również na działaniu na rzecz promocji zdrowia i profilaktyki zdrowotnej”</p> |
Elementy znaczeniowe |
|
strong |
Wizualnie Pogrubia tekst. Semantycznie wskazuje, że tekst jest istotny . Wizualnie Pogrubia tekst |
b |
Wizualnie Pogrubia tekst. Wydziela ciąg tekstu bez przydawania mu większej wartości |
i |
Wizualnie Pochyla tekst Wskazuje ciąg tekstu o innym charakterze niż otaczająca go treść, np. wyraz obcy |
em |
Wizualnie Pochyla tekst . Semantycznie wskazuje ciąg tekstu, na który kładziona jest emfaza (podkreślenie, wzmocnienie myśli) np.: wyrażenia związane z emocjami |
u |
Wizualnie Podkreśla tekst. Wydziela ciąg tekstu bez przydawania mu większej wartości |
del |
Wskazuje tekst, który usunięto z dokumentu |
<p>Promocja na jabłka Ligol <del>3.80</del> <ins>2.50</ins>zł</p> |
ins |
Wskazuje tekst, który wstawiono do dokumentu . Patrz przykład wyżej. |
|
mark |
Wskazuje treści wyróżnione ze względu na ich istotność w innym kontekście |
|
Coraz więcej faktów wskazuje na to, że <mark>Adam Mickiewicz</mark> czczony przez Polaków jako pierwszy wieszcz narodowy <mark>był jednak Litwinem<mark/>? |
a |
Tworzy odnośnik |
p |
Wskazuje paragraf |
div |
Standardowy element, który nie ma własnego znaczenia semantycznego. Podobne znaczenie jak w edytorze tekstu ma akapit (blok tekstu oddzielony eneterem) |
span |
Wskazuje element, który nie ma własnego znaczenia semantycznego . Odpowiednik w edytorze tekstu formatowania znaków. |
pre |
Wskazuje treść, której formatowanie powinno być zachowane . Zachowuje m.in. Enetery przez co nadaje się na wklejanie kodu źródłowego |
br |
Określa łamanie wiersza |
wbr |
Wskazuje miejsce, w którym można bezpiecznie złamać wiersz (np.: W miejscu kropki oznaczającej koniec zdania) |
small |
Wskazuje drobne pismo |
sub |
Wskazuje indeks dolny H2O H<sub>2</sub>O |
sup |
Wskazuje indeks górny 22 2<sup>2</sup> |
Listy |
||
ul |
Wskazuje nieuporządkowaną (unordered list ul) listę elementów Możliwość modyfikacji rodzajów elementów listy np.: type= circle, square, disc, none lub przez CSS: list-style-type: circle, square, disc, none |
|
<ul type="square"> <li>SRU Linux</li> |
|
|
li |
Wskazuje element w obrębie elementu ul, ol lub menu |
|
ol |
Wskazuje uporządkowaną (ordered list ol) listę Możliwość modyfikacji rodzajów elementów listy np.: type= 1,A,a,I,i lub przez CSS: list-style-type: 1,A,a,I,i |
|
<ol type="1"> <li>SRU Linux</li> |
|
|
dl |
Wskazuje listę zawierającą serię terminów i definicji |
|
<dl> |
Ubuntu - kompletna dystrybucja systemu operacyjnego GNU/Linux, przeznaczona przede wszystkim do zastosowań biurowych i domowych Arch Linux - dystrybucja Linuksa stworzona przez Judda Vineta. Stawia ona sobie za cel łatwość konfiguracji i użytkowania systemu operacyjnego, a także dostępność znacznej ilości aktualnego oprogramowania, którym można w prosty i wygodny sposób zarządzać. |
|
dd |
Wskazuje definicję w obrębie elementu dl |
|
dt |
Wskazuje termin w obrębie elementu dl |
figcaption |
Wskazuje podpis elementu figure - |
<figure> |
figure |
Wskazuje ilustrację, diagram, zdjęcie etc. |
|
hr |
Wskazuje zmianę tematyczną na poziomie akapitu |
code |
Wskazuje fragment kodu |
samp |
Wskazuje kod podany przez program |
var |
Wskazuje zmienną programu lub systemu komput. |
rp |
Wskazuje tekst dodatkowy do wyświetlenia w przeglądarce, która nie wspiera adnotacji ruby |
rt |
Wskazuje tekst objaśnienia/wymowy w elemencie ruby |
ruby |
Wskazuje adnotację ruby |
Elementy służące do dzielenia treści na sekcje |
|
article |
Wskazuje samodzielny blok treści |
section |
Wskazuje istotne koncepcje lub tematy |
aside |
Wskazuje treści luźno powiązane z otaczającym je materiałem |
header |
Wskazuje obszar nagłówków |
footer |
Wskazuje obszar stopki |
nav |
Wskazuje obszar z elementami nawigacyjnymi |
h1-h6 |
Wskazuje nagłówek |
hgroup |
Ukrywa w strukturze dokumentu wszystkie podane nagłówki, z wyjątkiem nagłówków najwyższego poziomu |
details |
Tworzy sekcję, którą użytkownik może powiększać, aby zapoznać się ze szczegółami |
address |
Wskazuje dane kontaktowe w odniesieniu do dokumentu lub artykułu (article) |
summary |
Wkazuje tytuł lub opis treści w okalającym elemencie details |
Elementy tabel |
|
caption |
Umieszcza w tabeli podpis |
col |
Wskazuje kolumnę |
colgroup |
Wskazuje grupę kolumn |
table |
Wskazuje tabelę |
tbody |
Wskazuje część główną tabeli |
td |
Wskazuje pojedynczą komórkę tabeli |
tfoot |
Wskazuje stopkę tabeli |
th |
Wskazuje pojedynczą komórkę nagłówka |
thead |
Wskazuje nagłówek tabeli |
tr |
Wskazuje rząd komórek |
rowspan |
Scala wiersze |
colspan |
Scala kolumny |
<table> <caption>Nagłówek tabeli</caption> <colgroup> <col style="width: 20%"/> <col style="width: 80%"/> </colgroup> <thead> <tr> <th rowspan="2"></th> <th colspan="2">Th – nagłówek obu kolumn</th> </tr> <tr style="vertical-align: bottom"> <th>Nagłówek pierwszej tabeli</th> <th>Nagłówek drugiej tabeli</th> </tr> </thead> <tfoot> <tr><td colspan="2">To jest przykład stopki tabeli</td></tr> </tfoot> <tbody> <tr> <td>Wiersz 1 Kolumna 1</td> <td>Wiersz 1 Kolumna 2</td> </tr> <tr> <td>Wiersz 2 Kolumna 1</td> <td>Wiersz 2 Kolumna 2</td> </tr> </tbody> </table> </body>
Elementy formularzy |
|
form |
Wskazuje formularz |
input |
Wskazuje kontrolkę do pobierania danych od użytkownika |
select |
Przedstawia użytkownikowi określony zbiór opcji |
optgroup |
Wskazuje grupę powiązanych elementów option |
option |
Wskazuje opcję, która ma być przedstawiona użytkownikowi |
textarea |
Umożliwia użytkownikowi wprowadzenie wielowierszowego tekstu |
button |
Wskazuje przycisk służący do wysłania danych lub wyczyszczenia formularza (lub do innego celu) |
datalist |
Określa zbiór sugerowanych wartości |
fieldset |
Wskazuje grupę elementów formularza |
label |
Wskazuje oznaczenie elementu formularza |
legend |
Wskazuje oznaczenie elementu fieldset |
output |
Wskazuje wynik obliczenia |
keygen |
Elementy formularza - przykłady
<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8" enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate> </form>
Wymaganie wpisania: required
Imię i nazwisko: <input type="text" name="name" required>
Różne typy pól
<input type="tel"> <input type="search"> <input type="url"> <input type="email"> <input type="datetime"> <input type="date"> <input type="month"> <input type="week"> <input type="time"> <input type="datetime-local"> <input type="number"> <input type="range"> <input type="color"> <input type="search" placeholder="Szukaj..."> <input type="text" required> <input type="number" min="0" max="100" step="10">
Wzorzec pola (wyrażenia regularne)
www: <input type="url" name="stronawww" required pattern="https?://.+"><br> kod pocztowy: <input type="text" pattern="^[0-9]{2}-[0-9]{3}$">
DATALIST
Type your code in the box.
PROGRESS
<progress>Proszę czekać...</progress> <progress value="0.5">Ukończono: 50%</progress> <progress value="50" max="100">Ukończono: 50%</progress>
METER
<meter value="0.5">0.5</meter> <meter value="50" min="0" max="100">50 (0...100)</meter> <meter value="0.5" low="0.2" high="0.8">0.5</meter> <meter value="50" min="0" max="100" low="20" high="80" optimum="60">50 (0...100)</meter> <meter value="10" min="0" max="100" low="20" high="80">10 (0...100)</meter> <meter value="90" min="0" max="100" low="20" high="80">90 (0...100)</meter>
Przykład użycia list
<input multiple list="list4"> <datalist id="list4"> <option value="wartość1"> <option value="wartość2"> </datalist> <fieldset disabled> <input type="text"> </fieldset>
Przykład wspomagania walidacji przez własny styl używający obrazków
<style type="text/css"> input:required:invalid, input:focus:invalid { background-image: url(/images/invalid.png); background-position: right top; background-repeat: no-repeat; } input:required:valid { background-image: url(/images/valid.png); background-position: right top; background-repeat: no-repeat; } </style>
lub z użyciem Spritebaker (portal zamienijący obrazy na wartość binarną dostępną bezposrednio w kodzie HTML)
<style type="text/css"> input:required:invalid, input:focus:invalid { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAeVJREFUeNqkU01oE1EQ/mazSTdRmqSxLVSJVKU9RYoHD8WfHr16kh5EFA8eSy6hXrwUPBSKZ6E9V1CU4tGf0DZWDEQrGkhprRDbCvlpavan3ezu+LLSUnADLZnHwHvzmJlvvpkhZkY7IqFNaTuAfPhhP/8Uo87SGSaDsP27hgYM/lUpy6lHdqsAtM+BPfvqKp3ufYKwcgmWCug6oKmrrG3PoaqngWjdd/922hOBs5C/jJA6x7AiUt8VYVUAVQXXShfIqCYRMZO8/N1N+B8H1sOUwivpSUSVCJ2MAjtVwBAIdv+AQkHQqbOgc+fBvorjyQENDcch16/BtkQdAlC4E6jrYHGgGU18Io3gmhzJuwub6/fQJYNi/YBpCifhbDaAPXFvCBVxXbvfbNGFeN8DkjogWAd8DljV3KRutcEAeHMN/HXZ4p9bhncJHCyhNx52R0Kv/XNuQvYBnM+CP7xddXL5KaJw0TMAF8qjnMvegeK/SLHubhpKDKIrJDlvXoMX3y9xcSMZyBQ+tpyk5hzsa2Ns7LGdfWdbL6fZvHn92d7dgROH/730YBLtiZmEdGPkFnhX4kxmjVe2xgPfCtrRd6GHRtEh9zsL8xVe+pwSzj+OtwvletZZ/wLeKD71L+ZeHHWZ/gowABkp7AwwnEjFAAAAAElFTkSuQmCC); background-position: right top; background-repeat: no-repeat; -moz-box-shadow: none; } input:required:valid { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAepJREFUeNrEk79PFEEUx9/uDDd7v/AAQQnEQokmJCRGwc7/QeM/YGVxsZJQYI/EhCChICYmUJigNBSGzobQaI5SaYRw6imne0d2D/bYmZ3dGd+YQKEHYiyc5GUyb3Y+77vfeWNpreFfhvXfAWAAJtbKi7dff1rWK9vPHx3mThP2Iaipk5EzTg8Qmru38H7izmkFHAF4WH1R52654PR0Oamzj2dKxYt/Bbg1OPZuY3d9aU82VGem/5LtnJscLxWzfzRxaWNqWJP0XUadIbSzu5DuvUJpzq7sfYBKsP1GJeLB+PWpt8cCXm4+2+zLXx4guKiLXWA2Nc5ChOuacMEPv20FkT+dIawyenVi5VcAbcigWzXLeNiDRCdwId0LFm5IUMBIBgrp8wOEsFlfeCGm23/zoBZWn9a4C314A1nCoM1OAVccuGyCkPs/P+pIdVIOkG9pIh6YlyqCrwhRKD3GygK9PUBImIQQxRi4b2O+JcCLg8+e8NZiLVEygwCrWpYF0jQJziYU/ho2TUuCPTn8hHcQNuZy1/94sAMOzQHDeqaij7Cd8Dt8CatGhX3iWxgtFW/m29pnUjR7TSQcRCIAVW1FSr6KAVYdi+5Pj8yunviYHq7f72po3Y9dbi7CxzDO1+duzCXH9cEPAQYAhJELY/AqBtwAAAAASUVORK5CYII=); background-position: right top; background-repeat: no-repeat; } </style>