Repozytorium Web Developera

Znaczniki HTML

Wykaz wszystkich znaczników: strona 1-2 i strona 3-4 (elementy liniowe, blokowe, zastępowalne, tabeli itd.).

Przydatne linki

Elementy strukturalne i blokowe

Elementy strukturalne

main header nav article section aside footer + stare html head body div

<!DOCTYPE html>
<html lang="pl" dir="ltr" itemscope itemtype="http://schema.org/WebPage">

<head>

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1"> 

<!-- *** -->
<!-- opis, słowa kluczowe -->
<meta name="description" content="Super hiper wpis na temat czegokolwiek">
<meta name="dcterms.description" lang="pl" content="Super hiper wpis na temat czegokolwiek">
<meta name="keywords" content="Bardzo ważne słowa kluczowe">
<meta name="dcterms.subject" lang="pl" content="Bardzo ważne słowa kluczowe; rozdzielone średnikiem">

<!-- *** -->
<!-- opis strony, Facebook -->
<meta property="og:site_name" content="Example.net - fajowy blog, na którym bloguję">
<meta property="og:url" content="http://example.net">
<meta property="og:title" content="Super hiper ważny wpis | Example.net - fajowy blog, na którym bloguję">
<meta name="og:description" content="Super hiper wpis na temat czegokolwiek">
<meta property="og:image" content="http://example.net/images/favicon.png">

<!-- *** -->
<!-- aplikacja ms -->
<meta name="application-name" content="Super hiper blog">
<meta name="msapplication-tooltip" content="Niesamowity blog o niesamowitych sprawach">
<meta name="msapplication-starturl" content="http://example.net">
<meta name="msapplication-window" content="width=1024;height=768">

<!-- *** -->
<!-- relacje -->
<link rel="author" href="https://plus.google.com/108791847143656151689/">
<link rel="alternate" type="application/rss+xml" title="Wpisy na RSS" href="http://example.net/feed">
<link rel="alternate" type="application/atom+xml" title="Wpisy na ATOM" href="http://example.net/atom">
<link rel="index" title="Strona główna" href="http://example.net">
<link rel="prev" title="Jakiś hiper poprzedni wpis" href="//example.net/Jakis-hiper-poprzedni-wpis">
<link rel="next" title="Jakiś super następny wpis" href="//example.net/Jakis-super-nastepny-wpis">
<link rel="canonical" itemprop="url" href="//example.net/Super-hiper-wazny-wpis">
<link rel="pingback" href="//example.net/xmlrpc.php">

<!-- *** -->
<!-- style i ikony -->
<link rel="stylesheet" href="//example.net/css/style.css">
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#006991">
<!-- Windows, Windows Phone -->
<meta name="msapplication-navbutton-color" content="#006991">
<meta name="msapplication-TileColor" content="#006991">
<meta name="msapplication-TileImage" content="ms-icon-144x144.png">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-status-bar-style" content="#006991">
<!-- icons -->
<link rel="apple-touch-startup-image" href="/startup.png">
<!-- apple-touch-startup-image: the image must be 320 x 480 pixels and in portrait orientation -->
<link rel="apple-touch-icon" sizes="57x57" href="apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-icon-180x180.png">
<!-- apple-touch-icon: if no sizes attribute is set, the element’s size defaults to 60 x 60 -->
<link rel="icon" type="image/png" sizes="192x192"  href="android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="manifest.json">

<title itemprop="name">Super hiper ważny wpis | Example.net - fajowy blog, na którym bloguję</title>
<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>

Plik manifest.json:

    {
     "name": "App",
     "icons": [
      {
       "src": "\/android-icon-36x36.png",
       "sizes": "36x36",
       "type": "image\/png",
       "density": "0.75"
      },
      {
       "src": "\/android-icon-48x48.png",
       "sizes": "48x48",
       "type": "image\/png",
       "density": "1.0"
      },
      {
       "src": "\/android-icon-72x72.png",
       "sizes": "72x72",
       "type": "image\/png",
       "density": "1.5"
      },
      {
       "src": "\/android-icon-96x96.png",
       "sizes": "96x96",
       "type": "image\/png",
       "density": "2.0"
      },
      {
       "src": "\/android-icon-144x144.png",
       "sizes": "144x144",
       "type": "image\/png",
       "density": "3.0"
      },
      {
       "src": "\/android-icon-192x192.png",
       "sizes": "192x192",
       "type": "image\/png",
       "density": "4.0"
      }
     ]
    }

Obrazy

picture

Biblioteka picturefill.js jest dostępna pod adresem: https://github.com/scottjehl/picturefill.

Biblioteka do automatycznego tworzenia obrazów w odpowiednich rozmiarach dla poszczególnych urządzeń: http://adaptive-images.com/.

<script>
document.createElement("picture");
</script>
<script src="picturefill.js" async></script>
// The async attribute makes the script non-blocking, allowing the rest of the page to load while it works.
<picture>
    <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source srcset="runner-wide.jpg" media="(min-width: 1000px)">
    <source srcset="runner-narrow.jpg" media="(min-width: 500px)">
    <!--[if IE 9]></video><![endif]-->
    <img src="runner-square.jpg" srcset="runner-square.jpg" alt="Photograph of a man running along a pier at night, with a harbour in the background">
</picture>

figure i figcaption

Służą do umieszczania na stronie obrazków z podpisami.

<figure>
	<img src="zrodlo" alt="podpis" />
	<figcaption>podpis</figcaption>
</figure>

img

Zalecane atrybuty to: src, alt, title, width, height.

alt

Wszelkie obrazy muszą mieć zdefiniwany atrybut alt, np. alt="Zdjęcie mamy". Warto też dodać atrybuty title, width, height.

base64

Obrazy warto zamieszczać w kodowaniu base64, ponieważ są wczytywane one wraz z całym dokumentem, np. <img src="data: image/jpeg;base64, A....pAAAB" alt="" />

float - CSS

Do opływania tekstu wokół obrazu służy atrybut CSS float, np. float: left;

Inne elementy blokowe

Audio

<audio controls="controls">
<source src=" " type="audio/wav" />
<source src=" " type="audio/mpeg" />
Brak obsługi
</audio>

Wideo

Atrybuty: src, controls, height, width, loop, autoplay

<object type="application/x-shockwave-flash" data="film.swf" width="200" height="150">
<param name="movie" value="film.swf">
</object>

Listy nieuporządkowane

<ul><li></li></ul>

Listy uporządkowane

<ol><li></li></ol>

Listy definicji

<dl><dt></dt><dd></dd></dl>

Cytowany długi fragment

<blockquote></blockquote>

Tekst preformatowany

<pre></pre>

Elementy liniowe

Cytowany krótki fragment

<q></q>

Źródło cytatu

<cite></cite>

Skrót

<p><abbr title="magister">mgr</abbr> Jan Kowalski</p>

Definicja

<dfn>

Kombinacja klawiszy

<kbd>

Pogrubienie/wyróżnienie

<strong>

Pochylenie tekstu

<em>