Podstawowe elementy HTML-a
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>
