HTML5 | Простой документ
134
Веб-программирование — HTML5 — Простой документ HTML5
Рассмотрим один из простейших документов HTML5. Он начинается с указания типа документа с помощью специального кода описания типа документа (значение этого кода объясняется в следующем разделе), после чего задается кодировка и название документа, а потом идет его содержимое. В данном случае содержимое состоит из одного абзаца текста:
<!DOCTYPE HTML> <meta charset="utf-8"> <title>Крошечный документ HTML5</title> <p>Дадим встряску браузеру в стиле HTML5!</p>
Этот простой документ можно упростить еще больше. Например, конечный тег </р> вообще-то не является обязательным в стандарте HTML5, т. к. браузеры знают, как закрывать все открытые элементы в конце документа (а стандарт HTML5 узаконивает это поведение). Но подобное срезание углов вместо упрощения делает разметку более сложной для понимания и может вызвать неожиданные ошибки.
Большинство веб-разработчиков придерживается мнения, что использование традиционных разделов <head> и <body> полезно для облегчения восприятия документа, т.к. они четко разделяют информацию о странице (заголовок страницы) и само содержимое (основная часть страницы). Такая структура особенно полезна, когда к странице добавляются сценарии, таблицы стилей и метаэлементы:
<!DOCTYPE HTML> <head> <meta charset="utf-8"> <title>Крошечный документ HTML5</title> </head> <body> <p>Дадим встряску браузеру в стиле HTML5!</p> </body>
Наконец, весь документ (за исключением строки doctype) можно облачить в традиционный элемент <html>, как показано в следующем листинге:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Крошечный документ HTML5</title> </head> <body> <p>Дадим встряску браузеру в стиле HTML5!</p> </body> </html>
Вплоть до HTML5 в каждой версии официальной спецификации HTML требовалось использование элемента <html>, несмотря на то, что наличие этого элемента никаким образом не влияет на обработку браузером остального кода страницы.
В HTML5 использование этого элемента оставлено полностью на личное усмотрение разработчика.
Использование элементов <html>, <head> и <body> является просто вопросом стиля. Страница без этих элементов будет работать отличнейшим образом даже на старых браузерах, которые и слыхом не слыхивали ни о каком HTML5. Фактически, браузер автоматически предполагает наличие этих элементов. Поэтому, если посмотреть на модель DOM (набор программных объектов, представляющих страницу) страницы с помощью сценария JavaScript, она будет содержать объекты для элементов <html>, <head> и <body>, даже если разработчик и не использовал их.
На данном этапе этот пример страницы является чем-то средним между самым простым HTML5-документом и расширенной отправной точкой практической веб-страницы HTML5. В последующих разделах мы добавим к нему остальные необходимые элементы и копнем глубже в разметку.
Описание типа документа HTML5
В первой строке каждого HTML5-документа всегда дается описание типа документа.
Это описание ясно указывает, что далее следует HTML5-содержимое, и выглядит следующим образом:
<!DOCTYPE HTML>
Первое, что бросается в глаза в описании типа документа HTML5 — это его поразительная простота. Сравните его, например, с неуклюжим описанием типа документа, который требуется использовать веб-разработчикам при работе со строгим XHTML 1.0:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Даже профессиональные веб-разработчики были вынуждены вставлять описание типа документа XHTML методом копирования и вставки из другого документа. А описание типа документа HTML5 короткое, четкое и легко вводится вручную.
Описание типа документа HTML5 также примечательно тем, что оно не содержит номера официальной версии HTML (5 для HTML5). В нем просто указывается, что страница является HTML-страницей. Это соответствует новой концепции HTML5 как живого языка. Добавленные в HTML новые возможности автоматически доступны для размещения на странице, не требуя для этого изменений в описании типа документа.
Все это порождает непростой вопрос: если HTML5 — живой язык, то зачем тогда для страницы вообще нужно описание типа документа?
Ответ на этот вопрос таков: описание типа документа продолжает использоваться по историческим причинам. При обработке страницы с отсутствующим описанием типа документа большинство браузеров (включая Internet Explorer и Firefox) переходят в режим совместимости (quirks mode). В этом режиме они пытаются отобразить страницу с учетом ошибок в правилах, которые использовались в более ранних версиях. Проблема с этим состоит в том, что режим совместимости одного браузера может отличаться от режима совместимости другого браузера, вследствие чего страницы, разработанные для одного браузера, на другом браузере будут, скорее всего, отображаться с ошибками, такими как неправильный размер шрифта, нарушенная структура оформления и т.п.
А обнаружив на странице описание типа документа, браузер знает, что обработку этой страницы требуется выполнять, следуя более строгим правилам режима стандартов (standards mode), который обеспечивает единообразное форматирование и структуру страницы при ее отображении любым современным браузером.
Кодировка символов
Кодировка — это стандарт, указывающий компьютеру, каким образом преобразовывать текст в последовательность байтов при записи текста в файл (а также, как выполнять обратное преобразование при открытии файла). По историческим причинам в мире существует множество разных кодировок. В настоящее время практически на всех веб-сайтах используется компактная и быстрая кодировка UTF-8, поддерживающая все символы других алфавитов, которые вам когда-либо могут потребоваться.
Веб-серверы часто настраивают, чтобы сообщать посещающим их браузерам, что предлагаемые сервером страницы имеют определенную кодировку. Но нельзя быть уверенным, что веб-сервер, на котором вы планируете разместить свой веб-сайт, будет настроен таким образом (если только это не ваш собственный сервер).
Кроме этого, попытка браузера в таком случае предположить наиболее вероятную используемую кодировку может претерпеть неудачу по причине какого-либо малоизвестного вопроса безопасности. По этим причинам всегда следует вставлять информацию об используемой кодировке в разметку страницы.
HTML5 делает эту задачу легкой. Для этого нужно лишь вставить элемент <meta> в самом начале блока <head> (или, если элемент <head> не используется, сразу же после кода описания типа документа):
<!DOCTYPE HTML> <head> <meta charset="utf-8"> <title>Крошечный документ HTML5</title> </head>
Инструменты для веб-разработки, такие как Dreamweaver или Expression Web, вставляют этот элемент автоматически при создании страницы. Эти инструменты также обеспечивают сохранение файлов в кодировке UTF. Но при создании веб-страницы с помощью обычного текстового редактора, чтобы обеспечить сохранение файлов в правильной кодировке, может потребоваться выполнить дополнительные шаги.
Язык
Считается хорошим тоном указывать естественный язык веб-страницы. Эта информация может быть иногда полезной для других, например, поисковые движки могут использовать ее для фильтрации результатов поиска, чтобы возвратить только страницы на указанном языке.
Чтобы указать язык для какого-либо содержимого, используется атрибут lang в любом элементе разметки с заданием кода требуемого языка. Код для русского языка — ru, а для английского — en. Коды для других языков можно узнать на странице people.w3.org/rishida/utils/subtags.
Вставить в веб-страницу информацию о языке легче всего через элемент <html>:
<html lang="ru">
Информация о языке также может быть полезной, если страница содержит текст на разных языках, который нужно прочитать с помощью программы чтения экранного текста. В таком случае атрибут lang с кодом соответствующего языка вставляется в нужном месте документа, например, в элементы <div>, охватывающие текст на разных языках.
Таким образом, программа чтения экранного текста способна определить, какой текст она может читать.
Добавление таблицы стилей
Практически в каждой странице должным образом разработанного профессионального веб-сайта используются таблицы стилей. Для указания требуемой таблицы стилей используется элемент <link> в блоке <head> документа HTML5:
<head> <meta charset="utf-8"> <title>Крошечный документ HTML5</title> <link href="style.css" rel="stylesheet"> </head>
Этот способ похож на указание таблиц стилей в традиционных HTML-документах, но немного проще. Так как существует единственный язык каскадных таблиц стилей — CSS, то в добавлении атрибута type=»text/css», который требовался ранее, больше нет надобности.
Добавление JavaScript-кода
Язык сценариев JavaScript изначально создавался как средство для трудоемкого способа придания блеска и обаяния скучным веб-страницам.
В настоящее время основная область применения JavaScript сместилась с разработки прибамбасов интерфейса на разработку нестандартных веб-приложений, включая сверхэффективных клиентов электронной почты, текстовых редакторов и картографических движков, которые исполняются непосредственно в браузере.
Код JavaScript вставляется в документ HTML5 по большому счету таким же способом, как и в традиционную HTML-страницу. В следующем листинге приводится пример вставки в веб-документ кода JavaScript по ссылке на внешний файл:
<head> <meta charset="utf-8"> <title>Крошечный документ HTML5</title> <script src="script.js"></script> </head>
Атрибут language=»JavaScript» не является обязательным, т. к. если не указан какой-либо другой язык сценариев (а поскольку JavaScript — единственный широко-поддерживаемый язык сценариев для HTML, то вероятность такого развития ничтожно мала), браузеры автоматически предполагают, что используется JavaScript.
Но даже ссылаясь на внешний файл с кодом JavaScript, все равно нужно помнить о закрывающем теге </script>. Если упустить этот тег по недосмотру или при попытке укоротить код, используя синтаксис пустых элементов, то страница не будет работать должным образом.
Если вы уделяете много времени тестированию своих страниц с JavaScript в Internet Explorer, может быть полезным добавление метки MOTW (Mark of the Web — метка особенности сети) в блок <head> сразу же после строки кодировки. Делается это таким образом:
<head> <meta charset="utf-8"> <!-- saved from url=(0014)about:internet --> <title>Крошечный документ HTML5</title> <script src="script.js"></script> </head>
Эта строка кода указывает Internet Explorer обрабатывать страницу таким образом, как будто бы она была загружена с удаленного веб-сайта. В противном случае IE переключается в особый режим блокировки, выводит предупреждение безопасности в строке сообщений и отказывается исполнять любой код JavaScript до тех пор, пока вы не нажмете кнопку «Разрешить заблокированное содержимое».
Все другие браузеры не обращают внимания на метку MOTW и используют одни и те же настройки безопасности как для страниц, загружаемых с удаленных веб-сайтов, так и для локальных файлов HTML.
Head HTML уроки для начинающих академия
❮ Назад Дальше ❯
Элемент HTML <head>
Элемент <head> является контейнером для метаданных (данные о данных) и помещается между тегом <html> и тегом <body>.
Метаданные HTML — это данные о HTML-документе. Метаданные не отображаются.
Метаданные обычно определяют название документа, набор символов, стили, ссылки, сценарии и другую мета-информацию.
Следующие теги описывают метаданные: <title>, <style>, <meta>, <link>, <script> и <base>.
Элемент HTML <Title>
Элемент <title> определяет название документа и является обязательным для всех документов HTML/XHTML.
Элемент <title>:
- Определяет заголовок на вкладке «Обозреватель»
- предоставляет заголовок страницы при добавлении в избранное
- Отображает заголовок страницы в результатах поисковой системы
Простой HTML-документ:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Page
Title</title>
</head>
<body>
The content of the document……
</body>
</html>
Элемент HTML <Style>
Элемент <style> используется для определения сведений о стиле для одной страницы HTML:
Пример
<style>
body {background-color: powderblue;}
h2 {color: red;}
p {color: blue;}
</style>
Элемент HTML <Link>
Элемент <link> используется для связывания с внешними таблицами стилей:
Пример
<link rel=»stylesheet» href=»mystyle.
css»>
Совет: Чтобы узнать все о CSS, посетите наш Учебник CSS.
Элемент HTML <meta>
Элемент <meta> используется для указания, какой набор символов используется, описание страницы, ключевые слова, автор и другие метаданные.
Метаданные используются браузерами (как отображать содержимое), поисковыми системами (ключевыми словами) и другими веб-службами.
Определите используемый набор символов:
<meta charset=»UTF-8″>
Определите описание веб-страницы:
<meta name=»description» content=»Free Web tutorials»>
Определите ключевые слова для поисковых систем:
<meta name=»keywords» content=»HTML, CSS, XML, JavaScript»>
Определите автора страницы:
<meta name=»author» content=»html5css.ru»>
Обновлять документ каждые 30 секунд:
<meta http-equiv=»refresh» content=»30″>
Пример <meta> тегов:
Пример
<meta charset=»UTF-8″>
<meta name=»description» content=»Free Web tutorials»>
<meta name=»keywords» content=»HTML,CSS,XML,JavaScript»>
<meta name=»author» content=»John
Doe»>
Настройка видового экрана
HTML5 ввел метод, позволяющий веб-дизайнерам управлять окном просмотра через тег <meta>.
Видовой экран — это видимая область пользователя веб-страницы. Она варьируется в зависимости от устройства, и будет меньше на мобильном телефоне, чем на экране компьютера.
На всех веб-страницах следует включить следующий элемент <meta> видового экрана:
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
Элемент видового экрана <meta> предоставляет обозревателю инструкции по управлению размерами страницы и масштабированию.
Ширина = устройство-ширина часть задает ширину страницы, чтобы следовать ширине экрана устройства (который будет варьироваться в зависимости от устройства).
Элемент начального масштаба = 1.0 задает начальный уровень масштабирования при первой загрузке страницы обозревателем.
Ниже приведен пример веб-страницы без мета-тега видового экрана и той же веб-страницы с тегом видового экрана <meta>:
Совет: Если вы просматриваете эту страницу с телефоном или планшетом, вы можете нажать на две ссылки ниже, чтобы увидеть разницу.
Без мета-тега видового экрана
С помощью мета-тега видового экрана
Элемент HTML <script>
Элемент <script> используется для определения JavaScript-кода на стороне клиента.
Этот JavaScript пишет «Hello JavaScript!» в HTML-элемент с ID = «Demo»:
Пример
<script>
function myFunction {
document.getElementById(«demo»).innerHTML = «Hello JavaScript!»;
}
</script>
Совет: Чтобы узнать все о JavaScript, посетите наш Справочник по JavaScript.
Элемент HTML <base>
Элемент <base> указывает базовый URL-адрес и базовый целевой объект для всех относительных URL-адресов на странице:
Пример
<base href=»https://html5css.ru/images/» target=»_blank»>
Пропуск <HTML>, <head> и <BODY>?
Согласно стандарту HTML5; <html>, <body> и тег <head> могут быть опущены.
Следующий код будет проверяться как HTML5:
Примере
<!DOCTYPE html>
<title>Page Title</title>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
Примечание:
хтмл5ксс не рекомендует опускать теги <html> и <body> . Пропуск этих тегов может привести к сбою программного обеспечения DOM или XML и подавать ошибки в старых браузерах (IE9).
Однако Пропуск тега <head> был распространенной практикой уже довольно давно.
Элементы HTML-головки
| Тег | Description |
|---|---|
| <head> | Определяет сведения о документе |
| <title> | Определяет заголовок документа |
| <base> | Определяет адрес по умолчанию или целевой объект по умолчанию для всех ссылок на странице |
| <link> | Определяет связь между документом и внешним ресурсом |
| <meta> | Определяет метаданные HTML-документа |
| <script> | Определяет сценарий на стороне клиента |
| <style> | Определяет сведения о стиле для документа |
❮ Назад Дальше ❯
Примеры HTML
❮ Предыдущий Далее ❯
HTML Basic
HTML-документ HTML-заголовки HTML-абзацы HTML-ссылки HTML-изображения HTML-кнопки Списки HTML
Объяснение примеров
Атрибуты HTML
Атрибут title Атрибут href Атрибуты ширины и высоты Атрибут alt Атрибут без кавычек Атрибут без кавычек не работает
Объяснение примеров
Заголовки HTML
Заголовки HTML Горизонтальные правила HTML HTML-заголовок
Объяснение примеров
Абзацы HTML
Абзацы HTML Дополнительные абзацы HTML Использование разрывов строк в HTML Проблемы со стихотворением (некоторые проблемы с форматированием HTML) Как управлять разрывами строк и пробелами с помощью тега
Объяснение примеров
Стили HTML
Стили HTML Цвет фона HTML Цвет HTML-текста HTML-текстовый шрифт Размер HTML-текста Выравнивание текста HTML
Объяснение примеров
Форматирование текста HTML
Выделение жирным шрифтом с использованием элемента Сильное форматирование с использованием элемента Курсивное форматирование с использованием элемента Подчеркнутое форматирование с использованием элемента Небольшое форматирование с использованием элемента Отмеченное форматирование с использованием элемента Отмечено как удаленное с помощью элемента
Помечен как вставленный с помощью элемента Отмечено как удаленное и вставленное с помощьюи Форматирование нижнего индекса с использованием элемента Форматирование верхнего индекса с использованием элементаОбъяснение примеров
HTML цитаты и цитаты
Форматирование коротких цитат с помощью элемента
.Форматирование цитируемых разделов с помощью элемента
. Форматирование информации об авторе/владельце документа с помощью элемента Форматирование сокращений и акронимов элементом Форматирование названия работы с помощью элемента Форматирование направления текста с помощью элементаОбъяснение примеров
Комментарии HTML
Скрытые комментарии Условные комментарии Комментарии для отладки
Объяснение примеров
HTML CSS
HTML со встроенным CSS HTML с внутренним CSS HTML с внешним CSS HTML со шрифтами CSS HTML с CSS с использованием атрибута id HTML с CSS с использованием атрибута class HTML и CSS границы HTML и CSS заполнение HTML и CSS поля Полная демонстрация HTML и CSS
Объяснение примеров
HTML-ссылки
Связывание с использованием абсолютного URL-адреса Связывание с использованием относительного URL Изменение цвета ссылок Удаление подчеркивания со ссылок Изменение цели ссылки Изображение как ссылка Создание ссылки на закладку Ссылка, которая вырывается из фрейма Ссылка на почту Почтовая ссылка с темой
Объяснение примеров
HTML-изображения
Изображение Высота и ширина изображения с использованием атрибутов Высота и ширина изображения с использованием CSS Высота и ширина изображения с использованием обоих Изображение в другой папке Изображение с битой ссылкой Изображение на другом сервере Использование изображения в качестве ссылки Движущееся изображение Карта изображений с интерактивными областями Плавающее изображение
Объяснение примеров
Таблицы HTML
Базовые таблицы HTML Стол с границами Таблица со свернутыми границами Таблица с заполнением ячеек Таблица с заголовками Таблица с заголовками, выровненными по левому краю Горизонтальные/вертикальные заголовки таблиц Таблица с заголовком Ячейки таблицы, охватывающие более одного столбца Ячейки таблицы, охватывающие более одной строки Таблица с интервалом между ячейками Таблица с HTML-тегами внутри Таблицы с другим стилем с использованием идентификатора I Таблицы с другим стилем с использованием id II Столы с другим стилем с использованием класса I Столы в другом стиле с использованием класса II
Объяснение примеров
Списки HTML
Ненумерованный список (по умолчанию) Неупорядоченный список с дисковыми маркерами Ненумерованный список с круглыми маркерами Ненумерованный список с квадратными маркерами Ненумерованный список без маркеров Упорядоченный список (по умолчанию) Упорядоченный список с номерами Упорядоченный список с буквами Упорядоченный список со строчными буквами Упорядоченный список с римскими цифрами Упорядоченный список со строчными римскими цифрами Список описаний Вложенный список I Вложенный список II Горизонтальный список Меню горизонтального списка
Объяснение примеров
Блочные и встроенные элементы HTML
Элемент
Элемент Стилизация элементаСтилизация элементаОбъяснение примеров
Классы HTML
Придание стиля всем элементам с указанным именем класса Доступ к элементам с указанным именем класса с помощью JavaScript Несколько классов Тот же класс, другой тег
Объяснение примеров
Идентификатор HTML
Стиль элемента с определенным идентификатором Разница между классом и идентификатором Доступ к элементу с определенным идентификатором с помощью JavaScript
Объяснение примеров
Макет HTML
Макет с использованием float Вёрстка с использованием flexbox Макет с использованием flexbox 2 Макет с использованием flexbox 3
Объяснение примеров
HTML IFrame
Встроенный фрейм (фрейм внутри страницы HTML)
Объяснение примеров
Элементы заголовка HTML
Действительный документ HTML без
и <голова> Действительный HTML-документ без элемента Элементопределяет заголовок документа.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/image1.slideserve.com/3556115/slide7-l.jpg' /><noscript><img loading='lazy' src='/800/600/http/image1.slideserve.com/3556115/slide7-l.jpg' /></noscript> Элемент <style> содержит информацию о стиле. Элемент<link> определяет отношение к внешнему ресурсу. Элемент<meta> определяет специальную метаинформацию. Элемент <script>определяет сценарии JavaScript на стороне клиента.Элемент<base>определяет базовый URL-адрес для всех URL-адресов</p><p>Объяснение примеров</p><hr/><h4><span class="ez-toc-section"id="HTML-4">HTML-скрипты</span></h4><p>Вставить скрипт Использование тега<noscript></p><p>Объяснение примеров</p><hr/><h4><span class="ez-toc-section"id="_HTML-23">Элементы компьютерного кода HTML</span></h4><p>Форматирование ввода с клавиатуры с использованием элемента<kbd>Форматирование вывода компьютера с использованием элемента<samp>Форматирование кода программирования с использованием элемента<code>Форматирование программного кода с сохранением пробелов и разрывов строк Форматирование переменных с помощью элемента<var></p><p>Объяснение примеров</p><hr/><h4><span class="ez-toc-section"id="HTML-5">HTML-формы</span></h4><p>Форма с вводом текста Форма с переключателем ввода Форма с текстовыми полями и кнопкой отправки Форма с текстовыми полями без атрибута name Группировка данных формы</p><p>Объяснение примеров</p><hr/><h4><span class="ez-toc-section"id="_HTML-24">Элементы формы HTML</span></h4><p>Простой раскрывающийся список Выпадающий список с предварительно выбранным значением Текстовое поле(многострочное поле ввода текста) Кнопка ввода Использование элемента<datalist>Использование элемента<output></p><p>Объяснение примеров</p><hr/><h4><span class="ez-toc-section"id="_HTML-25">Типы ввода HTML</span></h4><p>Тип ввода текст Тип ввода пароль Тип входа радио Флажок типа ввода Кнопка типа ввода Номер типа ввода-с ограничениями Номер типа ввода-с шагом Тип ввода даты-с выбором даты Дата типа ввода-с ограничениями Цвет типа ввода-с палитрой цветов Диапазон типов ввода Тип ввода месяц Неделя типа ввода Тип ввода время Тип ввода дата/время Тип ввода datetime-local Электронная почта типа ввода Поиск типа ввода Тип ввода тел URL типа ввода</p><p>Объяснение примеров</p><hr/><h4><span class="ez-toc-section"id="_HTML-26">Атрибуты ввода HTML</span></h4><p>Атрибут автозаполнения Атрибут novalidate Атрибут autofocus_attribute Атрибут формы Атрибут формы Атрибут formenctype Атрибут formmethod Атрибут formnovalidate Атрибут formtarget Атрибуты высоты и ширины Атрибут списка Минимальные и максимальные атрибуты Множественный атрибут Атрибут шаблона Атрибут заполнителя Обязательный атрибут Атрибут шага</p><p>Объяснение примеров</p><hr/><h4><span class="ez-toc-section"id="_HTML_Canvas">Графика HTML Canvas</span></h4><p>Рисование на холсте с помощью JavaScript Нарисуйте линию с помощью lineTo() Нарисуйте круг с дугой() Нарисуйте текст с помощью fillText() Нарисуйте текст с помощью strokeText() Нарисуйте линейный градиент Нарисуйте круговой градиент Нарисуйте изображение с помощью drawImage()</p><p>Объяснение примеров</p><hr/><h4><span class="ez-toc-section"id="_HTML_SVG">Графика HTML SVG</span></h4><p>Круг SVG SVG-прямоугольник Прямоугольник со скругленными углами SVG Звезда SVG Логотип SVG</p><p>Объяснение примеров</p><hr/><h4><span class="ez-toc-section"id="HTML-6">HTML Медиа</span></h4><p>Play Bunny Воспроизвести видео с медведем с элементами управления Воспроизвести видео с медведем с автозапуском Воспроизведение звука лошади с элементами управления</p><p>Объяснение примеров</p><hr/><h4><span class="ez-toc-section"id="_HTML-27">Геолокация HTML</span></h4><p>Получить координаты геолокации Обработка ошибок геолокации Получить геолокацию и посмотреть положение</p><p>Объяснение примеров</p><hr/><h4><span class="ez-toc-section"id="_HTML-28">Локальное хранилище HTML</span></h4><p>Постоянное сохранение имени Постоянно хранить счетчик Сохранить счетчик для одного сеанса</p><p>Объяснение примеров</p><hr/><h4><span class="ez-toc-section"id="HTML_Media">HTML Media</span></h4><p>Воспроизведение видеофайла Воспроизведение аудиофайла в формате HTML Воспроизведение видео YouTube в формате HTML</p><p>Объяснение примеров</p><hr/><h4><span class="ez-toc-section"id="_HTML-29">Другие примеры HTML</span></h4><p>Перетаскивание HTML Веб-воркеры HTML Сервер HTML отправил события</p><p>❮ Назад Следующий ❯</p><br/><h5><span class="ez-toc-section"id="i-13">ВЫБОР ЦВЕТА</span></h5><h2><span class="ez-toc-section"id="14_HTML">14 потрясающих HTML-сайтов[+Как они работают]</span></h2><p>Даже если вы никогда раньше не создавали веб-сайт,вы,вероятно,слышали об HTML.<img class="lazy lazy-hidden"loading='lazy'src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif"data-lazy-type="image"data-src='/800/600/http/navikur.ru/wp-content/uploads/5/a/3/5a39c641b72cf1ea1ad8374a039faa4f.jpeg'/><noscript><img loading='lazy'src='/800/600/http/navikur.ru/wp-content/uploads/5/a/3/5a39c641b72cf1ea1ad8374a039faa4f.jpeg'/></noscript>Это основа Интернета и первый язык программирования,который должен выучить любой начинающий веб-разработчик или дизайнер.</p><p>Одна из замечательных особенностей изучения HTML заключается в том,что вы можете черпать вдохновение из миллионов общедоступных веб-сайтов,работающих прямо сейчас.И не только это — вы также можете заглянуть в базовый HTML-код этих веб-сайтов,чтобы узнать,как они построены,а затем использовать те же методы для создания своих собственных проектов.</p><p></p><p>В этом посте мы рассмотрим несколько потрясающих примеров веб-сайтов,которые максимально используют потенциал HTML.Мы также обсудим некоторые идеи для создания вашего первого HTML-сайта.Но сначала,что такое «HTML-сайт»?</p><h3><span class="ez-toc-section"id="-_HTML">Веб-сайты HTML</span></h3><p>HTML,что означает язык разметки гипертекста,является основным языком Всемирной паутины.Документ HTML устанавливает содержание и структуру веб-страницы.Когда вы просматриваете страницу в своем браузере,вы видите интерпретацию вашим браузером HTML-файла,полученного с веб-сервера.<img class="lazy lazy-hidden"loading='lazy'src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif"data-lazy-type="image"data-src='/800/600/http/fuzeservers.ru/wp-content/uploads/c/f/b/cfba53ce0f7186250d4e63db746dc1c0.jpeg'/><noscript><img loading='lazy'src='/800/600/http/fuzeservers.ru/wp-content/uploads/c/f/b/cfba53ce0f7186250d4e63db746dc1c0.jpeg'/></noscript></p><p>HTML почти всегда используется в сочетании с двумя другими интерфейсными языками,CSS и JavaScript.CSS(каскадные таблицы стилей)— это язык правил,который управляет стилем веб-страницы,включая цвета,шрифты и макеты.JavaScript — это язык программирования,который позволяет использовать более сложные функции,такие как интерактивные элементы и анимация.</p><p>Последняя версия HTML — HTML5.Выпущенный в 2008 году HTML5,в частности,содержал несколько улучшений для обработки мультимедийного контента,такого как аудио и видео,а также семантически богатые элементы для описания структуры страницы.</p><p>Если вы хотите узнать больше об HTML и о том,как его писать,начните с нашего Полного руководства по HTML.Вы узнаете все,что вам нужно знать,чтобы полностью понять этот пост.</p><p>Каждый веб-сайт написан на HTML,независимо от сложности сайта или количества задействованных технологий.Вы можете взять любую страницу и открыть крышку,чтобы увидеть код HTML,а также код CSS и JavaScript,которые оживляют ее.<img class="lazy lazy-hidden"loading='lazy'src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif"data-lazy-type="image"data-src='/800/600/http/luxe-host.ru/wp-content/uploads/5/8/3/583eddbd909e3ed0e7bcabd062c66a9b.jpeg'/><noscript><img loading='lazy'src='/800/600/http/luxe-host.ru/wp-content/uploads/5/8/3/583eddbd909e3ed0e7bcabd062c66a9b.jpeg'/></noscript>В следующем разделе мы рассмотрим некоторые способы использования HTML в своей творческой работе дизайнерами и разработчиками.</p><h3><span class="ez-toc-section"id="_-_HTML">Идеи для веб-сайтов HTML</span></h3><p>Чтобы освоиться с HTML(наряду с CSS и JavaScript),рекомендуется создать один или два веб-сайта с нуля.Даже относительно простой веб-сайт HTML может научить вас многим его тонкостям и возможностям и предоставить вам прочную основу,прежде чем вы перейдете к более сложным проектам.</p><p>Вот несколько идей для веб-сайтов HTML для начинающих,которые вы можете попробовать создать:</p><ul><li><strong>Персональный веб-сайт:</strong>Создайте персональный сайт,на котором будут представлены ваше резюме,опыт работы,интересы,навыки и личность.Это проект,к которому вы можете возвращаться и пересматривать его со временем по мере развития ваших навыков.</li><li><strong>Информационный сайт:</strong>Выберите интересующую вас тему,а затем создайте простой веб-сайт,который расскажет о ней посетителям.</li><li><strong>Веб-сайт малого бизнеса:</strong>Вы можете добровольно создать веб-сайт для малого местного бизнеса в вашем районе.<img class="lazy lazy-hidden"loading='lazy'src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif"data-lazy-type="image"data-src='/800/600/http/fuzeservers.ru/wp-content/uploads/3/b/3/3b3b3420ea9eb3ab81d91324255b8afa.jpeg'/><noscript><img loading='lazy'src='/800/600/http/fuzeservers.ru/wp-content/uploads/3/b/3/3b3b3420ea9eb3ab81d91324255b8afa.jpeg'/></noscript></li><li><strong>Блог:</strong>Хотя существует множество отличных платформ для ведения блогов,рассмотрите возможность создания своей собственной.</li><li><strong>Портфолио:</strong>Хотите показать другие свои творческие работы?Попробуйте создать портфолио,будь то фотогалерея,видеопрезентация или сборник ваших работ.</li></ul><p>Чтобы приступить к созданию своего первого HTML-сайта,мы рекомендуем следовать этому превосходному учебному пособию от freeCodeCamp:</p><iframe title="YouTube video player"allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"xml="lang"src="https://www.youtube.com/embed/PlxWf493en4"frameborder="0"allowfullscreen=""data-service="youtube"></iframe><p>По мере того,как вы осваиваете основы HTML,вы можете переходить к более смелым и уникальным вариантам дизайна.Но,тем не менее,даже сложные веб-сайты часто можно свести к нескольким функциям HTML,которые работают вместе,чтобы создать целостный опыт.<img class="lazy lazy-hidden"loading='lazy'src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif"data-lazy-type="image"data-src='/800/600/http/cf3.ppt-online.org/files3/slide/b/BA89mTZuj3xOpFydvnLhKtUP5rl0qHgcDziCbR/slide-16.jpg'/><noscript><img loading='lazy'src='/800/600/http/cf3.ppt-online.org/files3/slide/b/BA89mTZuj3xOpFydvnLhKtUP5rl0qHgcDziCbR/slide-16.jpg'/></noscript></p><p>Далее давайте рассмотрим несколько примеров веб-сайтов HTML,которые творчески используют элементы HTML,и раскроем то,что заставляет их работать.</p><h3><span class="ez-toc-section"id="_HTML-30">Примеры HTML-сайтов</span></h3><ol><li>Глутир</li><li>Холст Этюд</li><li>Фестиваль дизайна в Мельбе</li><li>Понимание нейроразнообразия</li><li>Интеллектуальные видеорешения</li><li>Кофеин Пост</li><li>Доставка пельменей</li><li>Сделай свой ход(Adidas)</li><li>Прокатись со мной</li><li>Аяко Танигучи</li><li>Затмение Земли</li><li>Пенсильвания</li><li>Мас Ояма</li><li>Ла Гия де Сируджа Кардиака</li></ol><h4><span class="ez-toc-section"id="1_Gloutir">1.Gloutir</span></h4><p></p><p><strong>Что нам нравится:</strong>Gloutir — это студия дизайна и разработки,базирующаяся в Хьюстоне,штат Техас,которая предлагает яркий,безупречно созданный веб-сайт.<img class="lazy lazy-hidden"loading='lazy'src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif"data-lazy-type="image"data-src='/800/600/http/luxe-host.ru/wp-content/uploads/c/4/5/c45d3653e0461fabb83b3243f740183c.jpeg'/><noscript><img loading='lazy'src='/800/600/http/luxe-host.ru/wp-content/uploads/c/4/5/c45d3653e0461fabb83b3243f740183c.jpeg'/></noscript>Дизайнеры явно демонстрируют здесь впечатляющее внимание к деталям и почти идеальный баланс стиля и содержания.</p><p>На первый взгляд этот сайт может показаться технически сложным.Однако большинство эффектов можно реализовать с помощью простого HTML и CSS.Несмотря на то,что время от времени появляются эффекты на основе JavaScript(например,анимированный текст и слайдер карт),большая часть привлекательности этого сайта сводится к разумному выбору цветов,шрифтов и изображений.</p><p>Стоит покопаться в исходном коде страницы,если вам интересно.Ознакомьтесь с нашим руководством по проверке элемента,чтобы узнать,как это сделать.</p><h4><span class="ez-toc-section"id="2">2.Холщовый кабинет</span></h4><p></p><p><strong>Что нам нравится:</strong>Canvas — это элемент HTML5,который позволяет рисовать графику с помощью JavaScript,открывая огромные возможности для статической и анимированной графики.Это также важная причина,по которой Flash-анимация устарела.</p><p>Этот веб-сайт с примерами является отличным введением в некоторые интересные интерактивные эффекты,которые вы можете получить с помощью холста HTML,такие как перетаскивание элементов,которые возвращаются на место,или управление движением элемента с помощью рисования с помощью мыши.<img class="lazy lazy-hidden"loading='lazy'src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif"data-lazy-type="image"data-src='/800/600/http/cf2.ppt-online.org/files2/slide/1/1OnJ6CqtY3vMXeyBIGSogi90aw7zRUfDWbljFT/slide-13.jpg'/><noscript><img loading='lazy'src='/800/600/http/cf2.ppt-online.org/files2/slide/1/1OnJ6CqtY3vMXeyBIGSogi90aw7zRUfDWbljFT/slide-13.jpg'/></noscript></p><p>Это только начало возможностей холста.Как мы увидим в следующих примерах,этот элемент предлагает практически безграничные возможности для анимированной и интерактивной графики.Вы можете использовать холст для создания любого эффекта,который вам нужен для вашего сайта,если вы готовы немного изучить JavaScript.</p><h4><span class="ez-toc-section"id="3">3.Фестиваль дизайна в Мельбе</span></h4><p></p><p><strong>Что нам нравится:</strong>Наш следующий пример сам по себе является демонстрацией дизайна,веб-сайт для фестиваля дизайна в Мельбе 2021 года.Посетителям предлагается изучить сайт,щелкнув его интерактивные банки,темой которых является то,что лучшие дизайны 2021 года «сохранены»,чтобы вы могли их увидеть.</p><p>Каждая «баночка» — это элемент холста,содержащий SVG,представляющие различные продукты.Попробуйте навести указатель мыши на каждую банку и обратите внимание,как они реагируют на движение,словно плавая в жидкости.</p><p>Это использование элемента холста,по сути,представляет собой версию того,что мы видели в Canvas Study,но примененное с умом.<img class="lazy lazy-hidden"loading='lazy'src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif"data-lazy-type="image"data-src='/800/600/http/images.myshared.ru/5/489564/slide_5.jpg'/><noscript><img loading='lazy'src='/800/600/http/images.myshared.ru/5/489564/slide_5.jpg'/></noscript>Это просто,но уникально и достижимо с помощью встроенных технологий HTML.</p><h4><span class="ez-toc-section"id="4">4.Понимание нейроразнообразия</span></h4><p></p><p><strong>Что нам нравится:</strong>Project Lima — инклюзивная проектная инициатива,которая запустила свой проект «Понимание нейроразнообразия» для информирования общественности о нейроотличных людях,о том,как они действуют в обществе,и о некоторых распространенных мифах,связанных с ними.лица.</p><p>Если у вас есть время,я рекомендую посмотреть этот опыт полностью.Это трогательное сочетание иллюстраций,визуальной текстуры,музыки,звуковых эффектов и осмысленного повествования,чтобы лучше понять нейроразнообразных людей.</p><p>В частности,использование масштабируемой векторной графики(SVG)на веб-сайте впечатляет и добавляет визуальную основу для передачи информации сайта.Каждый экран плавно переходит в следующий с анимированной графикой.Что касается онлайн-рассказывания историй,это настолько хорошо,насколько это возможно.</p><h4><span class="ez-toc-section"id="5">5.</span></h4><img class="lazy lazy-hidden"loading='lazy'src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif"data-lazy-type="image"data-src='/800/600/http/fuzeservers.ru/wp-content/uploads/8/b/8/8b800c61a93f2d54720134e0a68c3693.jpeg'/><noscript><img loading='lazy'src='/800/600/http/fuzeservers.ru/wp-content/uploads/8/b/8/8b800c61a93f2d54720134e0a68c3693.jpeg'/></noscript>Интеллектуальные решения для видео</h4><p></p><p><strong>Что нам нравится:</strong>Элемент видео HTML5 стал еще одним важным шагом в повышении надежности HTML с целью стать стандартом для воспроизведения видео на веб-страницах.</p><p>Сегодня многие веб-сайты используют этот элемент для автоматического воспроизведения видео,полноэкранного видео и фонового видео.Возьмем отличный пример от Intelligent Video Solutions — его домашняя страница встречает вас видеофоном во всю ширину и накладывает текст,графику и градиент для плавного перехода вниз по странице.</p><p>Если вы хотите добиться аналогичного эффекта на своем сайте,лучше всего использовать элемент видео HTML5.Это гораздо более чистая альтернатива,скажем,встроенному iframe с YouTube на вашей странице.Из соображений доступности рекомендуется разрешить пользователям приостанавливать видео,а также позволять им выбирать,воспроизводить ли видео звук или нет.</p><h4><span class="ez-toc-section"id="6_Caffeine_Post">6.Caffeine Post</span></h4><p></p><p><strong>Что нам нравится:</strong>Caffeine Post — это видеостудия постпродакшна,которая,как вы могли догадаться,также отлично использует элемент видео HTML.<img class="lazy lazy-hidden"loading='lazy'src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif"data-lazy-type="image"data-src='/800/600/http/fuzeservers.ru/wp-content/uploads/b/1/2/b1240ae076df96cddce0590aff0e2585.jpeg'/><noscript><img loading='lazy'src='/800/600/http/fuzeservers.ru/wp-content/uploads/b/1/2/b1240ae076df96cddce0590aff0e2585.jpeg'/></noscript>Домашняя страница сразу же предлагает вам хаотичный,но захватывающий видеомонтаж о работе компании и побуждает вас смотреть дальше.</p><p>Страница выбранных работ представляет собой серию миниатюр,каждая из которых является видеоэлементом.Наведите курсор на миниатюру,чтобы посмотреть,как она воспроизводится в цикле,и нажмите,чтобы просмотреть более длинный предварительный просмотр видео со звуком.Кроме того,вы можете фильтровать работы по категориям(реклама,фильмы и т.д.).</p><p>Для такого впечатляющего веб-сайта может показаться удивительным,что все его ключевые функции могут быть созданы с помощью чистого HTML.Это просто показывает,как далеко продвинулись даже простые веб-технологии за последнее десятилетие.</p><h4><span class="ez-toc-section"id="7">7.Доставка пельменей</span></h4><p></p><p><strong>Что нам нравится:</strong>Микросайты позволяют брендам экспериментировать с новыми методами веб-дизайна при продвижении продукта.Ярким примером этого является веб-сайт доставки пельменей Mailchimp:посетители могут сыграть в виртуальный мини-гольф на девяти лунках,пытаясь доставить пельмени голодным клиентам.<img class="lazy lazy-hidden"loading='lazy'src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif"data-lazy-type="image"data-src='/800/600/http/cf.ppt-online.org/files/slide/l/Luv98mZe0KD5tTHxsqzMVrAQjcEYSGFphaONlJ/slide-10.jpg'/><noscript><img loading='lazy'src='/800/600/http/cf.ppt-online.org/files/slide/l/Luv98mZe0KD5tTHxsqzMVrAQjcEYSGFphaONlJ/slide-10.jpg'/></noscript></p><p>Почти весь опыт построен на холсте HTML,а в фоновом режиме происходит некоторое волшебство JavaScript,чтобы сделать это возможным.Dumpling Delivery демонстрирует пределы того,что вы можете сделать с помощью HTML и JavaScript с помощью эксперта.</p><p>Чтобы получить больше вдохновения,посетите некоторые из наших любимых интерактивных веб-сайтов.</p><h4><span class="ez-toc-section"id="8_Adidas">8.Сделай свой ход(Adidas)</span></h4><p></p><p><strong>Что нам нравится:</strong>Этот микросайт Adidas был создан для продвижения глобальной штаб-квартиры компании World of Sports в Герцогенаурахе,Германия.Он использует видео и четкие изображения,чтобы помочь вам увидеть пространство со всех сторон.</p><p>Веб-сайт хорошо помогает посетителям пройти довольно определенный путь для всего опыта,начиная с видео(отображаемого с элементом видео HTML5)и заканчивая слайд-шоу изображений,чтобы выделить лучшие стороны работы в компании..</p><h4><span class="ez-toc-section"id="9">9.Прокатись со мной</span></h4><p></p><p><strong>Что нам нравится:</strong>Некоторые веб-сайты используют видео для показа,в то время как другие используют его для погружения.<img class="lazy lazy-hidden"loading='lazy'src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif"data-lazy-type="image"data-src='/800/600/http/cf.ppt-online.org/files1/slide/g/GEp3Ldo8BOrMZ7ulIzSTUgHmjWQxK9JVDseqtyYRF/slide-8.jpg'/><noscript><img loading='lazy'src='/800/600/http/cf.ppt-online.org/files1/slide/g/GEp3Ldo8BOrMZ7ulIzSTUgHmjWQxK9JVDseqtyYRF/slide-8.jpg'/></noscript>Этот веб-сайт,созданный датским видеографом Николаем Юльсеном,сажает вас на сиденье горного велосипеда,пока вы едете по коварным тропам по всей Европе.</p><p>Этот сайт настолько близок,насколько вы можете получить реальный опыт катания на горном велосипеде через свой рабочий стол,и это достигается только с помощью HTML-видео.Если качество вашего контента достаточно высокое,вам не нужны сумасшедшие эффекты,чтобы создать отличный сайт.</p><p>Тем не менее,главная страница этого сайта содержит некоторые интересные эффекты курсора и эффекты прокрутки для придания изюминки.</p><h4><span class="ez-toc-section"id="10">10.Аяко Танигути</span></h4><p></p><p><strong>Что нам нравится:</strong>Как мы видели на веб-сайте Understanding Neurodiversity,музыка может добавить эмоциональную глубину любому опыту просмотра.Давайте теперь обратимся к другому примеру,в котором музыка находится в центре внимания,— к веб-сайту композитора Аяко Танигути.</p><p>Аудиоэлемент HTML5 позволяет веб-сайтам встраивать музыку и другие звуки в веб-страницы.<img class="lazy lazy-hidden"loading='lazy'src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif"data-lazy-type="image"data-src='/800/600/http/fsd.kopilkaurokov.ru/uploads/user_file_547abc2950ce1/img_user_file_547abc2950ce1_0_17.jpg'/><noscript><img loading='lazy'src='/800/600/http/fsd.kopilkaurokov.ru/uploads/user_file_547abc2950ce1/img_user_file_547abc2950ce1_0_17.jpg'/></noscript>Вы также можете настроить воспроизведение звука в цикле и предоставить пользователям элементы управления для управления воспроизведением звуков,как в случае с этим сайтом.</p><p>Каждый музыкальный образец визуализируется с интерактивным фоном холста.Холст был настроен так,чтобы реагировать как на музыку,так и на движения курсора,придавая музыке большее эмоциональное воздействие,чем простая кнопка паузы или воспроизведения.</p><h4><span class="ez-toc-section"id="11_Earth_Eclipsed">11.Earth Eclipsed</span></h4><p></p><p><strong>Что нам нравится:</strong>Вот еще один яркий пример аудиоэлемента в действии:Earth Eclipsed — отмеченный наградами научно-фантастический подкаст с отмеченным наградами веб-сайтом.тебя в другое место.</p><p>Отличительной чертой этого сайта является уникальный интерфейс плеера.Индикатор выполнения расположен в виде круга,а время отображается в виде обратного отсчета на зацикленном видеофоне колеблющегося земного шара.Это создает внеземную атмосферу,сопровождающую звук.</p><h4><span class="ez-toc-section"id="12_Pencilvania">12.Pencilvania</span></h4><p></p><p><strong>Что нам нравится:</strong>Pencilvania — это цифровой проект,который показывает вам последних собак,выставленных на усыновление в США и Канаде.<img class="lazy lazy-hidden"loading='lazy'src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif"data-lazy-type="image"data-src='/800/600/http/fsd.multiurok.ru/html/2020/11/23/s_5fbbba8fcaa4e/img24.jpg'/><noscript><img loading='lazy'src='/800/600/http/fsd.multiurok.ru/html/2020/11/23/s_5fbbba8fcaa4e/img24.jpg'/></noscript>Весь сайт представляет собой перетаскиваемый холст,который ежедневно обновляется новыми данными и,мы надеемся,побудит одного или двух посетителей принять его.</p><p>Эту простую концепцию можно перенести на другие виды веб-сайтов — вы можете предлагать посетителям исследовать ваш собственный виртуальный город,искать сокровища или размещать на холсте различные «ориентиры»,которые ссылаются на другие страницы вашего сайта или на другие ваши страницы.проекты.</p><h4><span class="ez-toc-section"id="13">13.Мас Ояма</span></h4><p></p><p><strong>Что нам нравится:</strong>Этот веб-сайт этого додзё боевых искусств демонстрирует мастерство управления каждым элементом дизайна для создания атмосферы.Используя веб-текстуры,цветовые градиенты,эффекты прокрутки параллакса и увлекательную полноэкранную фоновую анимацию на главной странице,дизайнеры добились гармонии между каждым элементом.</p><p>Этот сайт также примечателен своим подробным повествованием,подробно описывающим историю полноконтактного боевого искусства Киокушинкай каратэ и его основателя Мас Ояма.<img class="lazy lazy-hidden"loading='lazy'src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif"data-lazy-type="image"data-src='/800/600/http/cf2.ppt-online.org/files2/slide/e/e7HP4hYpRV5jLfwvalMkZNodyB6nGs1Q9xIU2Wc0Ar/slide-3.jpg'/><noscript><img loading='lazy'src='/800/600/http/cf2.ppt-online.org/files2/slide/e/e7HP4hYpRV5jLfwvalMkZNodyB6nGs1Q9xIU2Wc0Ar/slide-3.jpg'/></noscript>Конечно,вам не нужен опыт программирования,чтобы рассказать интересную историю.Но в сочетании они создают мощный веб-сайт.</p><h4><span class="ez-toc-section"id="14_La_Guia_de_Cirugia_Cardiaca">14.La Guía de Cirugía Cardíaca</span></h4><p></p><p><strong>Что нам нравится:</strong>Давайте закончим поистине уникальным:La Guía de Cirugía Cardíaca — это веб-сайт на испанском языке,который рассказывает пациентам и их близким об операциях на сердце.Цель состоит в том,чтобы провести посетителя через процесс и облегчить любые проблемы,которые у него могут возникнуть.</p><p>Информация представлена на анимированных карточках,созданных с помощью SVG,управляемых с помощью JavaScript.Сайт отлично справляется с логическим представлением этих карточек,начиная с момента,когда пациент впервые получает диагноз,и заканчивая возвращением домой после лечения.</p><h3><span class="ez-toc-section"id="_-_HTML-2">Создайте свой идеальный веб-сайт с помощью HTML.</span></h3><p>Мы проводим так много времени на веб-сайтах,что можем не осознавать,что происходит за кулисами.Но если вы понимаете основы для своих любимых веб-сайтов,это дает вам бесценное представление о том,как создаются лучшие онлайн-опыты.<img class="lazy lazy-hidden"loading='lazy'src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif"data-lazy-type="image"data-src='/800/600/http/cf.ppt-online.org/files/slide/k/KT786iLkqgIVxFhYAJDbBsUpwSr5cdG02j1C4t/slide-17.jpg'/><noscript><img loading='lazy'src='/800/600/http/cf.ppt-online.org/files/slide/k/KT786iLkqgIVxFhYAJDbBsUpwSr5cdG02j1C4t/slide-17.jpg'/></noscript></div><!--.entry-content--><footer class="entry-footer"><span class="cat-links">Категории:<a href="https://schtirlitz.ru/category/raznoe-2"rel="category tag">Разное</a></span></footer><!--.entry-footer--></article>[an error occurred while processing the directive]<nav class="navigation post-navigation"aria-label="Записи"><h2 class="screen-reader-text">Навигация по записям</h2><div class="nav-links"><div class="nav-previous"><a href="https://schtirlitz.ru/raznoe-2/strokovye-metody-python-vse-osnovnye-strokovye-funkcii-v-python-vidy-primery-i-tablica-2.html"rel="prev"><span class="be-post-nav-label btn btn-sm cont-btn no-underl"><small class="fas fa-chevron-left mr-2"></small>Назад</span></a></div><div class="nav-next"><a href="https://schtirlitz.ru/raznoe-2/programmy-dlya-fotoshopa-na-android-20-luchshix-prilozhenij-dlya-obrabotki-foto-na-ajfon-i-android.html"rel="next"><span class="be-post-nav-label btn btn-sm cont-btn no-underl">Вперед<small class="fas fa-chevron-right ml-2"></small></span></a></div></div></nav><div id="comments"class="comments-area"><a href="#"class="btn btn-primary btn-sm be-open-comment-form">Оставить комментарий</a><div id="respond"class="comment-respond"><h3 id="reply-title"class="comment-reply-title">Добавить комментарий<small><a rel="nofollow"id="cancel-comment-reply-link"href="/raznoe-2/html-primer-stranicy-html5-prostoj-dokument.html#respond"style="display:none;">Отменить ответ</a></small></h3><form action="https://schtirlitz.ru/wp-comments-post.php"method="post"id="commentform"class="comment-form"novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span><span class="required-field-message">Обязательные поля помечены<span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий<span class="required">*</span></label><textarea id="comment"name="comment"cols="45"rows="8"maxlength="65525"required></textarea></p><p class="comment-form-author"><label for="author">Имя<span class="required">*</span></label><input id="author"name="author"type="text"value=""size="30"maxlength="245"autocomplete="name"required/></p><p class="comment-form-email"><label for="email">Email<span class="required">*</span></label><input id="email"name="email"type="email"value=""size="30"maxlength="100"aria-describedby="email-notes"autocomplete="email"required/></p><p class="comment-form-url"><label for="url">Сайт</label><input id="url"name="url"type="url"value=""size="30"maxlength="200"autocomplete="url"/></p><p class="form-submit"><input name="submit"type="submit"id="submit"class="submit"value="Отправить комментарий"/><input type='hidden'name='comment_post_ID'value='60246'id='comment_post_ID'/><input type='hidden'name='comment_parent'id='comment_parent'value='0'/></p></form></div>[an error occurred while processing the directive]</div>[an error occurred while processing the directive]</main>[an error occurred while processing the directive]</div>[an error occurred while processing the directive]</div></div>[an error occurred while processing the directive]<footer id="colophon"class="site-footer row"><div class="site-info col-md-8"><p>©2019 Штирлиц Сеть печатных салонов в Перми</p><p>Цифровая печать,цветное и черно-белое копирование документов,сканирование документов,ризография в Перми.</p></div><div class="col-md-4"><a href="/sitemap.xml">Карта сайта</a></div><!--.site-info--></footer>[an error occurred while processing the directive]</div>[an error occurred while processing the directive]</div>[an error occurred while processing the directive]<style type="text/css">.pgntn-page-pagination{text-align:left!important;}.pgntn-page-pagination-block{width:60%!important;padding:0 0 0 0;}.pgntn-page-pagination a{color:#1e14ca!important;background-color:#ffffff!important;text-decoration:none!important;border:1px solid#cccccc!important;}.pgntn-page-pagination a:hover{color:#000!important;}.pgntn-page-pagination-intro,.pgntn-page-pagination.current{background-color:#efefef!important;color:#000!important;border:1px solid#cccccc!important;}.archive#nav-above,.archive#nav-below,.search#nav-above,.search#nav-below,.blog#nav-below,.blog#nav-above,.navigation.paging-navigation,.navigation.pagination,.pagination.paging-pagination,.pagination.pagination,.pagination.loop-pagination,.bicubic-nav-link,#page-nav,.camp-paging,#reposter_nav-pages,.unity-post-pagination,.wordpost_content.nav_post_link,.page-link,.page-links,#comments.navigation,#comment-nav-above,#comment-nav-below,#nav-single,.navigation.comment-navigation,comment-pagination{display:none!important;}.single-gallery.pagination.gllrpr_pagination{display:block!important;}</style><noscript><style>.lazyload{display:none;}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://schtirlitz.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!-- noptimize --> <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> <!-- /noptimize --> <script defer src="https://schtirlitz.ru/wp-content/cache/autoptimize/js/autoptimize_65fc3aabbe3134b862f6f8c3f2077df8.js"></script></body></html><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="eee3e8b0e28c1416e19a2620-|49" defer></script>
Форматирование цитируемых разделов с помощью элемента