Даты для людей и машин. Тег time [13/19]

В HTML5 добавили специальный тег для обозначения даты и времени — <time>. У этого тега есть атрибут datetime — для указания даты в машиночитаемом формате ISO 8601.

С помощью <time> можно описывать даты одновременно и для человека, и для машины, например:

<time datetime="2014-04-20">Вчера</time> мы готовили курс к публикации.

Браузер отображает только содержимое тега, а содержимое datetime не отображается. Человек увидит только слово «вчера», а машина прочитает атрибут и получит дату в нужном ей формате. И все довольны.

Кстати, в этом задании вы не только добавите дату, но и наполните пост настоящим содержанием.Раньше в спецификации указывалось, что у тега <time> может быть ещё один атрибут — pubdate. Сейчас этот атрибут из спецификации убран, и использовать его больше не нужно.

<!DOCTYPE html>

<html lang="ru">

<head>

<title>Даты для людей и машин. Тег time</title>

<meta charset="utf-8">

<style>

@font-face {

font-weight: 400;

font-family: "Roboto";

font-style: normal;

src:

local("Roboto Regular"),

local("Roboto-Regular"),

url("/assets/course73/roboto.woff") format("woff");

}

html,

body {

margin: 0;

padding: 0;

font-size: 100%;

font-family: "Roboto", sans-serif;

color: white;

background-color: #2c3e50;

}

a:link,

a:visited,

a:hover,

a:active {

color: #c0392b;

}

code {

padding: 0.2em 0.4em;

font-weight: bold;

color: #c0392b;

background: white;

box-shadow: 0 0 2px #cccccc;

}

/ * Header */

header.page-header {

position: relative;

z-index: 5;

min-height: 20px;

padding: 20px;

color: white;

background-image:

linear-gradient(45deg, #34495e 25%, transparent 25%),

linear-gradient(-45deg, #34495e 25%, transparent 25%),

linear-gradient(135deg, #34495e 25%, transparent 25%),

linear-gradient(-135deg, #34495e 25%, transparent 25%);

background-position: 10px 0, 10px 0, 0 0, 0 0;

background-size: 20px 20px;

box-shadow: 0 0 5px 0 #333333;

}

.logo {

position: absolute;

top: 10px;

left: 20px;

margin: 0;

}

.main-menu ul {

margin: 0;

margin-left: 130px;

padding: 0;

list-style: none;

}

.main-menu li {

display: inline-block;

margin-right: 1em;

}

.main-menu a {

color: white;

}

/* Main */

main {

display: block; /* для страховки, очень новый элемент */

min-height: 200px;

padding-top: 50px;

color: black;

background-color: white;

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAMAAAApB0NrAAAABlBMVEX///+pqalTpKl9AAAAAnRSTlMAGovxNEIAAAAdSURBVDjLY2AAAUaG4UYxDDsfjfp91O+jfqfE7wCzpQCw/dq+qQAAAABJRU5ErkJggg==");

}

main::after {

content: "";

display: table;

clear: both;

}

.post {

margin: 0 20px;

}

.post header {

margin-bottom: 1em;

}

.post header h1 {

margin: 0;

}

.post header time {

font-size: 11px;

color: #999999;

}

.post .intro {

margin: 1em 0;

padding: 10px;

background-color: rgba(241, 196, 15, 0.1);

border-radius: 5px;

}

.post .intro p {

margin: 0;

}

.post .content {

min-height: 200px;

margin-bottom: 20px;

font-size: 14px;

}

.post .content h2 {

margin-top: 1em;

margin-bottom: 0.5em;

font-size: 18px;

}

.post .example {

height: 150px;

background-color: silver;

background-image:

radial-gradient(circle at 100% 150%, silver 40%, transparent 40%, transparent),

radial-gradient(circle at 0 150%, silver 40%, transparent 40%, transparent),

radial-gradient(circle at 50% 100%, white 71%, transparent 71%, transparent),

radial-gradient(circle at 100% 50%, silver 49%, transparent 50%, transparent),

radial-gradient(circle at 0 50%, silver 49%, transparent 50%, transparent);

background-repeat: repeat;

background-size: 50px 25px;

}

/* Footer */

footer.page-footer {

min-height: 50px;

padding: 20px;

font-size: 14px;

color: black;

background-color: #f1c40f;

background-image:

linear-gradient(45deg, transparent 50%, white 50%),

linear-gradient(-45deg, transparent 50%, white 50%),

linear-gradient(135deg, transparent 50%, #2c3e50 50%),

linear-gradient(-135deg, transparent 50%, #2c3e50 50%);

background-repeat: repeat-x;

background-position: 0 0, 0 0, 0 100%, 0 100%;

background-size: 10px 12px;

}

.page-footer::after {

content: "";

display: table;

clear: both;

}

.page-footer .info {

float: left;

}

.page-footer .info img {

margin-right: 0.5em;

vertical-align: middle;

border: 2px solid white;

box-shadow: 0 0 4px #c0392b;

transform: rotate(-5deg);

}

.page-footer .copyright {

float: right;

padding-top: 20px;

font-size: 12px;

}

</style>

</head>

<body>

<header class="page-header">

<div class="logo">

<img src="/assets/course73/logo.svg" width="90" height="90">

</div>

<nav class="main-menu">

<ul>

<li><a href="#home">Главная</a></li>

<li><a href="#blog">Посты</a></li>

<li><a href="#me">Обо мне</a></li>

</ul>

</nav>

</header>

<main>

<article class="post">

<header>

<h1>Чешуя на градиентах</h1>

<time datetime="2014-04-21T11:00:00">21 апреля 2014</time>

</header>

<section class="intro">

<p>В этом посте я расскажу как делать повторяющийся чешуйчатый фон на CSS-градиентах. Будем использовать градиенты в сочетании со свойством <code>background-size</code>.</p>

</section>

<section class="content">

<h2>Подготовим контейнер</h2>

<p>Чтобы было нагляднее, зададим контейнеру исходные размеры и сплошной цвет фона. В этом контейнере в фоне будет располагаться наш чешуйчатый орнамент. Временно запретим повторение фона, чтобы видеть только наш фрагмент.</p>

<h2>Создадим фрагмент фона</h2>

<p>Фрагмент орнамента, или одну чешуйку, создадим с помощью множественных радиальных градиентов. Первый градиент создаст чешуйки одного цвета:</p>

<p><code>radial-gradient(circle at 50% 100%, white 71%, transparent 71%, transparent)</code></p>

<p>Но это еще не полноценная чешуя, нужно добавить два чешуйки другого цвета. Для этого добавим два градиента выше первого:</p>

<p><code>radial-gradient(circle at 100% 150%, silver 40%, transparent 40%, transparent)</code></p>

<p><code>radial-gradient(circle at 0 150%, silver 40%, transparent 40%, transparent)</code></p>

<p>И ниже первого:</p>

<p><code>radial-gradient(circle at 100% 50%, silver 49%, transparent 50%, transparent)</code></p>

<p><code>radial-gradient(circle at 0 50%, silver 49%, transparent 50%, transparent)</code></p>

<h2>Размножим фон</h2>

<p>После этого зададим размер <code>50px 25px</code> фрагменту чешуи и размножим его на весь контейнер. Вот, что получилось:</p>

<div class="example"></div>

<p>Готовый код можете посмотреть в CSS-редакторе у класса <code>.example</code>.</p>

</section>

</article>

</main>

<footer class="page-footer">

<section class="info">

<img src="/assets/course73/keks.jpg" width="50">

Кекс, keks@htmlacademy.ru

</section>

<section class="copyright">

© 2008—2014 Cat Energy

</section>

</footer>

</body>

</html>

Курс «Знакомство с HTML5»