HTML5, CSS3, ES6 WB@HCJ

Szablony

Czyli kilka szablonów, oraz link do walidatora HTML5.

Szablon HTML5

Kompletny i poprawny szablon dokumentu HTML5:

<!doctype html public "♥♥♥">
<html lang=pl>
<head>
  <meta charset=utf-8>
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Szablon strony HTML5</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css">
  <link rel="stylesheet" href="css/local.css">
  <style>
    body { background: #E2DF9A; }
  </style>
</head>
<body>
  <p>ąćęłńóśźż ĄĆĘŁŃÓŚŹŻ</p>
  <!-- Compiled and minified JavaScript -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
  <script src="js/local.js"></script>
</body>
</html>
[Jeff Keedy]

Styl z gatunku „to się mi podoba” znaczy „jestem idiotą”.

— Jeff Keedy

Więcej przykładów – HTML5 Doctor.

Bibliotekę jQuery pobieramy z jQuery CDN, czyli z jQuery Content Delivery Network.

Pytanie: boilerplate – jak to przetłumaczyć?

Minimalny poprawny dokument HTML5

Jeszcze jedna ciekawostka:

<!doctype html>
<html lang=pl>
<meta charset=utf-8>
<title>Minimalny dokument HTML5</title>
<p>ąćęłńóśźż ĄĆĘŁŃÓŚŹŻ</p>

Szablon tabeli

Tabelę budujemy z następujących elementów:

Korzystamy z atrybutów:

Po wpisaniu verbatim:

      A test table with merged cells
/-----------------------------------------\
|          |      Average      |   Red    |
|          |-------------------|  eyes    |
|          |  height |  weight |          |
|-----------------------------------------|
|  Males   | 1.9     | 0.003   |   40%    |
|-----------------------------------------|
| Females  | 1.7     | 0.002   |   43%    |
\-----------------------------------------/

Złożona z wykorzystaniem CSS użytego na tej stronie:

A test table with merged cells
Average Red
eyes
height weight
males 1.9 0.003 40%
females 1.7 0.002 43%

(źródło)

Powyższa tabela korzysta z następujących elementów: table, caption, tr, thatrybutów, rowspan, colspan.

Kod dla tej tabeli: simple.html. A tak jest ona renderowna przy domyślnych ustawieniach przeglądarki: simple.html.

Zadanie: Dodać ciemniejsze tło:

Wskazówka: Mastering Tables. Warto tutaj HTML and CSS tutorials, references, and articles od czasu do czasu zajrzeć.

Przykład tabeli z zagnieżdżonym znacznikiem style: Today's Sudoku. A tak jest ona renderowna przy domyślnych ustawieniach przeglądarki: scoped.html (źródło przykładu).

Tworzymy szablon bloga

Jakich użyjemy znaczników z listy HTML5 Elements?

Cytat ułatwiajacy nieco przygotowanie szablonu: „Sections are really logical separations, whereas articles describe real content.”

[Blog: HTML4 i HTML5]

Przykładowe implementacje:

Czy użyliśmy właściwych znaczników? Sprawdzić to, korzystając z tego schematu blokowego Sectioning content elements and firends.

Należy jeszcze dorobić w implementacji „dociągnięcie” elementów sidebarnav do elementu footer (tak jak jest to narysowane na obrazkach powyżej). Jak to zrobić jest opisane w artykule Dana Cederholma, Faux Columns; Peter-Paul Koch przedstawił inne rozwiązanie w tym artykule Clearing floats. Ale tak naprawdę, to rozwiązanie korzystające z flex boxes nie korzysta z żadnych trików.

Skąd się bierze problem zostało wyjaśnione:

Pewien programista przeczytał na blogu lokalnego zoo, że codziennie można oglądać jagnię pasące się w klatce z lwem. Tak to go zafacynowało, że natychmiast wszedł na stronę zoo, aby to zobaczyć. I rzeczywiście, jagnię i lew spały obok siebie.

Podejrzewając jakąś sztuczkę napisał emaila do dyrektora zoo z prośbą o wyjaśnienie. Oto odpowiedź dyrektora: „To nie jest żadna sztuczka. Dzieje się to już od kilku miesięcy. Ale mogę powiedzieć panu w zaufaniu, że jagnię musimy bardzo często zastępować nowym.”

[stara anegdotka]

Anatomia posta

Post wpisujemy w elemencie article:

[Anatomy of a blog post]

Źródło

Jeszcze jeden przykład pokazujacy jak wpisywać posty:

[Anatomy of a blog post 2]

Źródło