Obrazek użytkownika cytrynek

Podstawowe elementy HTML-a

Treść: 

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.
</blockquote>

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></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>Ubuntu</li>
  <li>Arch Linux</li>
  <li>Debian</li>

 <li>SRU Linux</li>
</ul>

  • Ubuntu

  • Arch Linux

  • Debian

  • SRU Linux

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>Ubuntu</li>
  <li>Arch Linux</li>
  <li>Debian</li>

 <li>SRU Linux</li>
</ol>

 

  1. Ubuntu

  2. Arch Linux

  3. Debian

  4. SRU Linux

dl

Wskazuje listę zawierającą serię terminów i definicji

<dl>
  <dt>Ubuntu</dt>
  <dd>- kompletna dystrybucja systemu operacyjnego GNU/Linux, przeznaczona przede wszystkim do zastosowań biurowych i domowych </dd>
  <dt>Arch Linux</dt>
  <dd>- 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>
</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>
  <img src="img_pulpit.jpg" alt="Pulpit z Arch Linuksem" width="1024" height="768">
  <figcaption>Obrazek 1. -Zrzut ekranu Arch Linux ze środowiskiem GNOME</figcaption>
</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>