Wstęp

Co to jest HTML?

HTML jest skrótem od HyperText Markup Language. Jest to język tagów i znaczników, odpowiadających za szkielet i treść strony www. HTML nie odpowiada bezpośrednio za stylizacje stron www nie jest również językiem programowania, jednak języki programowania często korzystają ze znaczników HTML.

HTML5 – ogólna specyfikacja, nowe tagi

1.Nagłówek i sposób kodowania dokumentu

<!DOCTYPE html>- deklaracja nagłówka

<meta charset="UTF-8"> – sposób kodowania dokumentu

2.Niektóre nowe znaczniki.

<header>- nagłówek
<footer> – stopka
<aside> – panel, kolumna boczna
<article> – artykuł
<section>- sekcja
<main>- definiuje główny kontent strony
<nav> – dla linków nawigacyjnych

Cała tabela nowych znaczników pod linkiem :http://www.w3schools.com/html/html5_new_elements.asp

3.Problem z IE8 skrypt naprawiający
IE w wersji 8 i poprzednich źle interpretuje kod HTML5 aby naprawić ten rpoblem należy umieścić ten kod w sekcji head dokumentu. Tłumaczenie kodu :jeśli przeglądarka IE ma wcześniejsze wersje niż 9 to załącz następujący skrypt.

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

4.Tagi do osadzania mediów

<audio> Definicja treści audio
<embed> Definicja do osadzania wtyczek zewnętrznych np. Google Maps
<source> Definicja źródła video i audio
<video> Definicja zawartości filmów video

5. Przykład dokumentu w HTML5 -semantyka

<!doctype html>- nagłówek – deklaracja że dokument jest w wersji HTML5
<html lang=”pl”>- język dokumentu -polski

<head> – sekcja nagłówka dokumentu
<title>tytuł strony</title>

<meta charset="UTF-8"> – sposób kodowania strony

<meta name="description" content="Opis"> – opis specyfiakcji strony
<meta name="keywords" content="słowa kluczowe oddzielone przecinkiem">

<!–[if lt IE 9]> -naprawa problemu z obsługą przez przeglądarki IE
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>

<link rel="stylesheet" href="style.css" /> – sposób załaczenia styli

</head>
<body>

<header role=”banner”> – nagłówek treści dokumentu, atrybut role- przeznaczenie nagłówka jako banner

<hgroup>- grupowanie nagłówków h1- h6
– rel="home"- relacja pomiędzy odnośnikiem a zasobem dokumentu ma wartość strona główna , domowa – home
<h1><a href="https://websitecreator.pl" rel="home">Mojastrona.pl – nasza najlepsza strona HTML5 </a></h1>
<h2>Nasze hasło reklamowe</h2>
</hgroup>

<nav id="menu" role="navigation">- nawigacja- menu, przeznaczenie nawigacja
<ul>
<li><a href="index.html">Główna</a></li>
<li><a href="link.html">O Mnie</a></li>
<li><a href="link.html">Kontakt</a></li>
</ul>
</nav>
</header>

<main role=”main”> – tag treści głównej , przeznaczenie treść główna
<hgroup role=”heading”> – grupa nagłówków , przeznaczenie nagłówek treści głównej dokumentu
<h1>Aktualności</h1>
<h3>Aktualności ze świata IT w jednym miejscu</h3>
</hgroup>

<article role=”article”>- artykuł , przeznaczenie artykuł

<header>- nagłówek artykułu
<h2>Tytuł newsa pierwszego</h2>
<p class=”news-info”>

<time datetime="2013-02-20">20 lutego</time> – znacznik daty i czasu
</p>
</header>

<section> – sekcja
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. .</p>
</section>
</article>

</main> – koniec treści głównej

<aside role=”complementary”> – panel boczny,(sider) , przeznaczenie treść uzupełaniająca

<section>
<h2>Polecam</h2>
<figure> – znacznik dla obiektów obrazkowych wraz z ich opisem
<picture>- znacznik dla obrazka
<img src="polecamy.jpg" alt="Polecana fotka">
<p>Polecana fotka</p>
</picture>
<figcaption>Bardzo mocno polecana fotka</figcaption> – opis obrazka
</figure>
</section>
</aside>

<footer role=”contentinfo”>- stopka dokumentu , rola- treści informacyjne
<p>Wszelkie prawa zastrzeżone. Kopiowanie bez zgody autora zabronione.</p>
</footer>

<script src=”javascript.js”> </script>- załączenie skryptu

</body>

</html>

Formularz

link z przykładem :https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form

<form action="form.php" method="get">- definicja fromularza , początek, silnikiem formularza jest plik form.php gdzie dane będa przetwarzane, metoda przesyłania danych obok post get- informacje są jawne , przeważnie do użycia w wyszukiwarkach na stronie, post – informacje niejawne poufne, niewidoczne w pasku adresu url

<fieldset>-obramowanie dla formualrza
<legend>Fruit juice size</legend>- opis dla formularza
<p>
<input type="radio" name="size" id="size_1" value="small" /> -pole wejściowe formularza typu radio ( kropka), przyjmuje dwie wartości true i false( niezaznaczone)

<label for="size_1">Small</label> – etykieta dla input ,zgodnośc wartości atrybutów for i name
</p>
<p>
<input type="text" name="size" id="size_2" value="medium" /> – pole wejściowe dla tekstu
<label for="size_2">Medium</label>
</p>
<p>
<input type="password" name="size" id="size_3" value="large" /> – pole wejściowe dla haseł
<label for="size_3">Large</label>
</p>
<p>
<input type="checkbox" name="size" id="size_3" value="large" /> – pole wejściowe (kwadrat- zaznaczenie) , wartości true, false ( niezaznaczony)

<label for="size_3">Large</label>
</p>
<p>
<input type="number" name="size" id="size_3" value="large" /> – pole wejściowe dla selekcji liczb
<label for="size_3">Large</label>
</p>
<input type="submit" value="Submit"> – przycisk button- wyślij zawartość formularza
</fieldset>
</form>

Tabel

<!DOCTYPE html>
<html>
<head>
<style> – style dla tabeli, tablicy
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}

table, th, td {
border: 1px solid black;
}
</style>
</head>

<body>

<table> – definicja tabeli , rozpoczęcie
<thead> – nagłówek tabeli jego definicja
<tr>- wiersz tablicy
<th>Month</th> -pojedyncza komórka nagłówka -th
<th>Savings</th>
</tr>
</thead>
<tfoot>- stopka , (dół ) tabelki
<tr>
<td>Sum</td> – pojedyncza komórka wiersz stopki tablicy
<td>$180</td>
</tr>
</tfoot>
<tbody> – główne ciało tablicy – definicja
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>

</body>
</html>

Przykład z link: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_tbody

HTML 5

Wstęp

HTML5 – ogólna specyfikacja, nowe tagi

Formularz

Tabel