Obrazek użytkownika cytrynek

Wprowadzenie do HTML5

Treść: 

Podstawy HTML 5

 

HTML5 jest zupełnie nowym tworem, zupełnie innym niż HTML 4 umożliwiającym pisanie pełnoprawnych aplikacji webowych i mobilnych.

 

Różnice w stosunku do HTML4:

  • Nowe tagi: section, article, header, footer, nav, video, audio, mark, progress, …

    (są to głównie tagi semantyczne – czyli nazwa tagu mówi o tym co jest w jego wnętrzu, zamiast wszystko przyjmującego div-a)

  • Nowe typy pól "input": tel, search, url, email, datetime, date, month, week, time, datetime-local, number, range, color.

  • Nowe atrybuty elementów formularzy: autofocus, required, autocomplete, min, max, multiple, pattern, step, ...

  • Możliwość osadzenia MathML i SVG bezpośrednio w dokumencie, zupełnie jak w XHTML

  • HTML 5 nie zawiera żadnych elementów prezentacyjnych

  • HTML 5 nie jest podzielone na żadne tryby - nie ma elementów przestarzałych.

  • Rysowanie 2D z nowym elementem canvas,

  • WebGL (port OpenGL dla przeglądarek),

  • API dla odtwarzania audio i video,

  • API dla aplikacji offline,

  • API przeciągnij i upuść, z atrybutem draggable,

  • API pamięci (storage) pozwalające na przechowywanie danych pomiędzy przeładowaniami strony

  • Microdata – przechowywanie danych w atrybutach (prefix: data-),

  • Geolokalizacja,

  • Web Sockets (dwukierunkowa komunikacja z serwerem),

  • Komunikacja między stronami (np. można wysyłać informację do strony znajdującej się w ramce).

  • Nowa wersja XMLHttpRequest umożliwiająca upload plików oraz monitorowanie postępu

  • Baza danych SQL

 

 

Zaczynamy.

Podstawowy kod HTML5 wygląda następująco:

 <!DOCTYPE html>

<html lang="pl">
<html>
<head>
<meta charset="UTF-8">
<title>Tytuł dokumentu</title>
</head>

<body>
Treść dokumentu
</body>

</html>

 

Gdzie:

<!DOCTYPE html> deklaracja typu dokumentu

<html lang="pl"> język dokumentu, atrybut określający język dokumentu. Atrybut

<html> tag rozpoczynający dokument HTML

<head> tag rozpoczynający sekcję nagłówkową strony, określająca właściwości strony, które normalnie nie są

widziane bezpośrednio tj.: tytuł strony (<title>), stronę kodową – czyli z jakiego zestawu znaków ma korzystać <meta charset="UTF-8"> itd.

<body> tutaj umieszczamy treść dokumentu

 

Prawie wszystkie znaczniki, które obejmują pewien zasięg np.: <html>, <body>, <style> , <span>, <div>, <i> mają swoje zakończenie w postaci </html>, </body>, </style>, </div>, </span> ...

Część znaczników nie posiada cechy „zasięgu” i nie posiada zakończenia w postaci np.:

 

<meta name="keywords" content="Szkoła, Zespół Szkół, Szkoły techniczne lubuskie, Szkoła Kożuchów">

 

Znacznik HTML to element języka HTML zaczynający się od „<” np.: <head>

Atrybut znacznika to właściwość, cecha dodatkowa np.: <div>Jakiś tekst</div> to znacznik HTML określający blok z tekstem. Może on posiadać także taką cechę, że tekst będzie koloru czerwonego, dodatkowo podkreślony. Do tego użyjemy atrybutu style.:

 

<div style=”color:red; font-weight:bold”>Jakiś tekst</div> Co da nam efekt w postaci:

 

Jakiś tekst

 

Różnica pomiędzy HTML4 a HTML5

Układ znaczników w HTML4

Tak wygląda układ strony napisany w HTML4

Układ znaczników w HTML4

A tak w HTML5. Z zastosowaniem znaczników semantycznych (mających znaczenie)

 

Układ znaczników w HTML5

 

W HTML5 znaczniki zawierają się w semantycznej strukturze widocznej poniżej.

<!DOCTYPE html>
<html lang="pl">
<head>
<title>Historia procesorów</title>
<meta charset="utf-8">

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->

<style>
body {font-family: Verdana, sans-serif; font-size:0.8em;}
header,nav, section,article,footer{
border:1px solid grey; margin:5px; padding:8px;
}
nav ul {
margin:0; padding:0;
}
nav ul li {
display:inline; margin:5px;
}
</style>
</head>

<body>

<header>
  <h1>Historia procesorów w pigułce</h1>
</header>

<nav>
<ul>
  <li><a href="/artykuly/procesory4bitowe.html">Procesory 4 bitowe</a></li>
  <li><a href="/artykuly/procesory8bitowe.html">Procesory 8 bitowe</a></li>
  <li><a href="/artykuly/procesory16bitowe.html">Procesory 16 bitowe</a></li>
 <li><a href="/artykuly/procesory32bitowe.html">Procesory 32 bitowe</a></li>
 
 <li><a href="/artykuly/procesory64bitowe.html">Procesory 64 bitowe</a></li>
</ul>
</nav>

<section>
<h1>Charakterystyka procesorów</h1>

<article>
<h2>Budowa procesora</h2>
<p>W funkcjonalnej strukturze procesora można wyróżnić takie elementy, jak:</p>
<ul>
  <li>zespół rejestrów do przechowywania danych i wyników, rejestry 
mogą być ogólnego przeznaczenia lub mają specjalne przeznaczenie</li> <li>jednostkę arytmetyczną (arytmometr) do wykonywania operacji obliczeniowych na danych,</li> <li>układ sterujący przebiegiem wykonywania programu,</li> </ul> </article> <article> <h2>Wielordzeniowość i procesory pomocnicze</h2> <p>Współcześnie większość procesorów ma wielordzeniową budowę. Pierwszym procesorem wielordzeniowym ogólnego przeznaczenia był procesor Power 4 firmy IBM wprowadzony na rynek
w roku 2001. Pierwszymi procesorami wielordzeniowymi architektury x86 były wersje procesorów
Opteron firmy AMD i Pentium Extreme Edition firmy Intel wprowadzone w kwietniu 2005 roku.</p> <aside> <h1>Wielozadaniowość </h1> <p>Wielozadaniowość – cecha systemu operacyjnego umożliwiająca mu równoczesne
wykonywanie więcej niż jednego procesu. Zwykle za poprawną realizację wielozadaniowości
odpowiedzialne jest jądro systemu operacyjnego.</p> </aside> </article> <article> <h2>Jednostka centralna</h2> <p>Procesor bywa też nazywany jednostką centralną (poprzez tłumaczenie ang.
CPU, Central Processing Unit w sposób niemal dosłowny). </p> </article> </section> <footer> <p>&copy; 2014 Zespół Szkół Ponadgimnazjalnych nr 5 im. Leszka Kołakowskiego.</p> </footer> </body> </html>

 

Nowe znaczniki HTML5

Więcej nt. znaczniów poniżej w Tabelarycznym zestawieniu znaczników HTML5 oraz szerzej - ogólnie o znacznikach w artykule Podstawowe elementy HTML-a

 

Powyżej widzieliście zastosowanie nowych znaczników. Lista semantycznych znaczników:

 

  • <section>

  • <article>

  • <aside>

  • <header>

  • <nav>

  • <figure>

  • <figcaption>

  • <footer>

  • <details>

  • <summary>

  • <mark>

  • <time>

 

 

Wyjaśnienie znaczenia nowych znaczników w HTML5

 

Sekcja dokumentu lub aplikacji <section> to tematyczna grupa treści, zwykle zawierająca nagłówek.

 <section>
<h1>Komputer stacjonarny</h1>
<p>Najlepszy wybór dla osób, które korzystają z komputera w jednym miejscu. Wymaga stabilnego biurka i wolnej przestrzeni.
W zamian oferuje bardzo dobre osiągi sprzętowe i ergonomiczną pracę.</p>
</section>
<section>
<h1>Laptop</h1>
<p>Zwany również notebookiem. Przydatny dla osób, które komputera używają głównie do pisania, a przy tym czasami
pracują w różnych miejscach albo nie mają zbyt dużo wolnego miejsca w pomieszczeniu. Zapewnia przyzwoite osiągi sprzętowe.</p>
</section>

 

 

Artykuł <article> reprezentuje samodzielną część dokumentu lub aplikacji, która potencjalnie mogłaby być opublikowana niezależnie od pozostałej treści na stronie

<article>
<h1>Wprowadzenie do systemu GNU/Linux</h1>
<p>Większość osób, które spotkało się na swojej drodze z systemem z rodziny Linux boi się go jak diabeł święconej wody.
Brak komercyjnego wsparcia wcale nie musi oznaczać, że jest to system dl wybrańców. W tym kursie udowodnię, że Pingwin nadaje się także na biurko!</p>
<section>
<h2>Wstęp</h2>
<article>
<h3>Jak wybrać swojego pingwinka?</h3>
Zaczynając swoją przygodę z Linuksem warto wybrać dystrybuję popularną i łatwą w użytkowaniu.
Z pewnością większość z Was pomyśli o Ubuntu ...
</article>
<article>
<h3>Jak zainstalować Linuksa?</h3>
<p>Instalacja Linkusa nie musi być wcale trudna.</p>
</article>
</section>
</article>

 

Wstawka <aside> reprezentuje sekcję na stronie, która jest tylko nieznacznie powiązana tematycznie z treścią elementu, w którym się znajduje.

 <article>
<h1>Wielozadaniowość</h1>
<p>Wielozadaniowość zapewniona jest między innymi przez planistę, czyli część systemu
operacyjnego realizującą algorytm szeregowania zadań w kolejce do przyznania czasu procesora.
Systemy operacyjne, które należą do grupy wielozadaniowych to:
 
<ul>
<li>AmigaOS </li>
  <li>Mac OS X</li>
  <li>GNU/Linux</li>
</ul>
</p>
<aside>
AmigaOS – system operacyjny opracowany przez firmę Commodore International dla produkowanych przez nią komputerów Amiga.
Wersja 1.0 została wydana w 1985 roku, wraz z premierą komputera Amiga 1000.
</aside>
<p>Systemy wielozadaniowe można podzielić na oferujące i nie oferujące wywłaszczania. W systemach z wywłaszczaniem
może nastąpić przerwanie wykonywania procesu, odebranie mu procesora i przekazanie sterowania do planisty. </p>
</article>

 

Nagłówek <header> - Reprezentuje grupę wprowadzającą albo ułatwienia nawigacyjne. Zwykle zawiera nagłówek sekcji

(H1, H2, H3, H4, H5, H6) ale nie jest to absolutnie konieczne. Może zawierać również: spis treści, formularz wyszukiwania, logo.

<article>
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-15"></time></p>
</header>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT.</p>
</article>

 

Element nawigacji <nav> Reprezentuje sekcję strony, która zawiera odnośniki nawigacyjne do innych stron albo do określonych fragmentów na tej samej stronie.

<nav>
   <a href="/html/">HTML</a> |
   <a href="/css/">CSS</a> |
   <a href="/js/">JavaScript</a> |
   <a href="/jquery/">jQuery</a>
</nav>

 

Bardziej skomplikowany układ hierarchiczny.

<nav>
<ul>
<li><a href="/html/">HTML</a>
   <ul>
      <li><a href="/html/podstawy.html">Podstawy</a></li>
      <li><a href="/html/naglowki.html">Nagłówki</a></li>
 
      <li><a href="/html/paragrafy.html">Akapity</a></li>
   </ul>
 
</li>
<li><a href="/css/">CSS</a></li>
<li><a href="/js/">JavaScript</a></li>
<li><a href="/jquery/">jQuery</a></li>
</nav>

 

Tabelaryczne zestawienie znaczenia nowych znaczników w HTML5

 

Tag pocz.

Tag końc.

Opis

<article>

</article>

Określa artykuł.

<aside>

</aside>

Określa zawartość nie będącą treścią strony. 

<audio>

</audio>

Umieszcza na stronie odtwarzacz audio.

<bdi>

</bdi>

Izoluje część tekstu, który może być pisany w innym kierunku, niż domyślny.

<canvas>

</canvas>

Kontener na grafikę tworzoną za pomocą skryptów.

<command>

</command>

Definiuje polecenie, które użytkownik może wywołać.

<datalist>

</datalist>

Określa listę predefiniowanych opcji elementu input.

<details>

</details>

Określa dodatkowe informacje, które można wyświetlać lub ukrywać.

<dialog>

</dialog>

Definiuje okno dialogowe.

<embed> 

Tworzy kontener dla aplikacji zewnętrznej lub interaktywnej treści.

<figcaption>

</figcaption>

Tworzy podpis dla elementu figure.

<figure>

</figure>

Określa samodzielne treści, jak zdjęcia, wykresy, ilustracje, itp.

<footer>

</footer>

Określa stopkę dla dokumentu lub sekcji.

<header>

</header>

Określa nagłówek dla dokumentu lub sekcji.

<keygen> 

Generuje parę kluczy dla pola formularza.

<mark>

</mark>

Wyróżnia tekst.

<meter>

</meter>

Wyświetla zasięg znanego zakresu lub ułamkową wartość.

<nav>

</nav>

Określa sekcję linków nawigacyjnych.

<output>

</output>

Wyświetla wynik obliczeń.

<progress>

</progress>

Wyświetla pasek postępu zadania.

<rp>

</rp>

Określa co pokazać, jeśli przeglądarka nie obsługuje adnotacji.

<rt>

</rt>

Określa wyjaśnienie lub wymowę znaków dla adnotacji.

<ruby>

</ruby>

Dodaje adnotację.

<section>

</section>

Określa sekcję w dokumencie.

<source> 

Określa zasób dla elementu multimedialnego.

<summary>

</summary>

Określa widoczną część elementu details.

<track> 

Dołącza plik tekstowy dla elementów multimedialnych.

<wbr> 

Określa gdzie byłoby możliwe przełamanie tekstu.

<video>

</video>

Umieszcza na stronie odtwarzacz wideo.