2020
Веб-приложение — распределённая система, использующая ресурсы двух приложений: веб-браузер и веб-сервер
Современные браузеры поддерживают следующие документы:
Выделим следующие ключевые задачи, которые необходимо решить при разработке веб-приложения
В рамках курса мы не будем:
HTML — Hyper Text Markup Language, язык разметки гипертекстовых документов
Данный язык является стандартом для представления структурированной текстовой и мультимедийной информации
Для описания элементов используется специальная нотация
< и ><div></, </div>HTML-документ представляет собою иерархию элементов, рассмотрим пример
div, всё остальное является его содержимымdiv выступают элементы ul и pp содержит только текстul содержит 2 тега li, причём порядок их появления в тексте важенli содержат только текстПри описании HTML-узлов необходимо следить за корректностью вложенности
Корректное вложение:
Некорректное вложение:
Закрывающий тег </strong> идёт после тега </p>
Большинство веб-браузеров смогут обработать некорректный код, но при этом могут делать это по-разному
Все элементы, которые мы помещаем в HTML-документ, предназначены для отображения информации пользователю
Для добавления информации для других разработчиков можно использовать комментарии
Комментарии начинаются с последовательности <!--
Комментарии заканчивается последовательностью --->
Пример комментария:
Формируют видимый блоковый элемент на странице
Формируют описание для внутренней части блока
У каждого элемента помимо его содержимого можно указать также и атрибуты, которые поясняют его поведение
<table>
<tr> <!-- Первая строка --->
<td colspan="2">Ячейка на 2 стоблца</td>
</tr>
<tr> <!-- Вторая строка --->
<td>Первый</td> <td>Второй</td>
</tr>
</table>имя="значение", атрибуты разделяются пробеламиПо умолчанию следует использовать двойные кавычки для описания значения атрибута
Следите, чтобы внутри значения не встречались кавычки
Данные атрибуты могут быть установлены для любого элемента документа
class — имя класса из таблицы стилей для элементаcontenteditable — определяет можно ли редактировать содержимого данного элементаhidden — должен ли данный элемент быть скрыт или нетid — определяет идентификатор элемента на странице, должен быть уникальным для страницыlang — определяет код содержимого в элементеstyle — содержит определение CSS-стилей для данного элементаtitle — определяет дополнительную подсказку об элементе для всплывающей подсказкеНекоторые элементы HTML-документов не имеют текстового содержимого. Для их описания достаточно указать только лишь открывающий тег и необходимые атрибуты
img — элемент для отображения изображения на страницеsrc — атрибут содержит ссылку на источник изображения, которое надо отобразитьalt — атрибут содержит текст, описывающий изображение, который используется если изображение не загрузилось и для обеспечения доступностиПо умолчанию при обработке документов все подряд непечатные символы заменяются на 1 пробела
Следующие выражения являются идентичными:
Таким образом мы можем свободно форматировать документ, чтобы его структуру было удобно воспринимать
<!DOCTYPE html> <!-- Версия HTML-спецификации --->
<html>
<head>
<!-- Метаинформация о документе --->
</head>
<body>
<!-- Содержимое документа --->
</body>
</html>html является обязательным корневым элементом документаhead содержит информацию о содержимом: какой язык использован, какая кодировка у документа, откуда подгружать стилевые файлыbody включает собственно содержимое документа, которое отображается пользователюЗаголовок содержит описание содержимого документа
Кодировка символов в документе:
Заголовок для отображения в браузере:
Автор документа:
Краткое описание документа:
Иконка для отображения во вкладке браузера:
Заголовок приходит в браузер первым, поэтому важно размещать ссылки на другие важные документы в заголовке, чтобы браузер мог их начать скачивать
CSS-документы описывают стили, которые можно применять к различным элементам
JavaScript-документы содержат динамический код для выполнения на стороне браузера
Первые надо размещать в заголовке, а JS-код в конце
rel описывает тип ссылки, обязательно stylesheethref содержит ссылку на внешний документТегу html следует указать язык документа, так как это облегчает работу поисковых систем и систем помощи людям с ограниченными возможностями
Язык указывается в качестве значения тега lang:
Если у вас в документе несколько языков, то соответствующие блоки можно разметить с помощью элемента span:
Содержимое документа находится внутри элемента body
Язык HTML предлагает набор из различных элементов, которые позволяют структурировать информацию на странице
ph1, h2, h3, h4, h5, h6<h1>Документ о котиках</h1>
<p>Котики очень важны!</p>
<h2>Котики: начало</h2>
<p>Котики пушистые</p>
<h2>Котики: продолжение</h2>
<h3>Котолапки</h3>
<p>У котолапок есть когти</p>h3 должно следовать за h2, а не наоборотНенумерованный список
ulliНумерованный список
olliВнутри содержимого элемента списка может находится другой список, эффективно делая его вложенным
При написании очень длинного текста, зачастую необходимо выделять различные части текста, чтобы читающий мог понять что в тексте важно, а что нет
Для выделения текста можно использовать строчный элемент em, сокращение от emphasis:
Для выделения текста жирным используется строчный элемент strong:
В WYSWYG текстовых редакторах есть возможность указывать атрибуты текста: наклон, жирность, подчёркивание
В старых HTML-стандартах определены элементы i, b, u, которые по названию позволяют форматировать текст
В настоящий момент для оформления текста надо использовать CSS-стили
Если же хотите использовать данные элементы, то следует придерживаться следующих правил:
i следует использовать для оформления иностранных слов, терминов, цитату и т.д.b следует использовать для оформления ключевых слов, названий продуктов, вводных предложенийu зачастую использовать вообще не стоит, даже в печатных изданияхПри описании HTML-документа необходимо ссылаться на другие документы по их единому указателю ресурса, URL
aДля создания гиперссылки для пользователя используется элемент a: <a href="https://ya.ru">Поиск</a>
href содержит в себе ссылку на другой ресурсatitle предоставляет дополнительную информацию, которая будет показана пользователю при наведении на ссылку
<p>Создаём ссылку
<a href="https://developer.mozilla.org"
title="Информация для веб-разработчиков"
>Mozilla developer network</a>
</p>a может включать в себя блоковые элементы, в том числе и изображенияКак и при работе с файловой системой можно формировать либо полные пути, либо относительные пути
https:/, file:/, либо с /Рассмотрим следующую структуру файлов
.
├── css
│ └── style.css
├── data.html
├── img
│ ├── cat.png
│ └── dog.gif
└── index.htmlОтносительные ссылки в файле index.html
Текст ссылки должен хорошо описывать ссылку
Используйте уникальный текст для каждой ссылки
Если по нажатию на ссылку пользователю необходимо скачать большой объём данных или требуется специальная технология, то пользователю необходимо сообщить об этом
<p><a href="http://www.example.com/report.pdf">
Скачать большой отчёт (PDF, 10MB)
</a></p>
<p><a href="http://www.example.com/video-stream/"
target="_blank">
Посмотреть видео (поток, отдельная вкладка)
</a></p>
<p><a href="http://www.example.com/car-game">
Играть в гонки (требует WASM)
</a></p>Ранее рассмотренные элементы структуры могут оказаться в различных частях страницы и нести разную смысловую нагрузку
<body>
<header>Заголовок страницы</header>
<nav>Навигация внутри страницы</nav>
<main>Основное содержимое
<article>Статья №1
<header>Заголовок статьи</header>
<section>Секция 1 статьи 1
<header>Заголовок секции</header>
<p>Содержимое</p>
</section>
</article>
<aside>Боковая панель</aside>
</main>
<footer>Содержимое нижнего колонтитула</footer>
</body>