Переносы и разделители. Теги br и hr

Цитаты

В HTML существует несколько тегов для обозначения цитат:

· <blockquote> предназначен для выделения длинных цитат, которые могут состоять из нескольких абзацев. Тег выделяет цитату как отдельный блок текста с отступами.

· <q> предназначен для выделения коротких цитат в предложениях. Текст внутри этого тега автоматически обрамляется кавычками.

· <cite> используется для того, чтобы выделить источник цитаты, название произведения или автора цитаты.

 

Верхние и нижние индексы [12/17]

Следующие два тега обычно используются не для выделения слов, а для выделения отдельных символов. Их используют для указания единиц измерения или для написания простых формул.

Например: 20м², H₂O, X³+X²=1

Тег <sup> отображает текст в виде верхнего индекса.

Тег <sub> отображает текст в виде нижнего индекса.

Стоит отметить, что эти теги являются чисто презентационными и не имеют собственной семантики.

Эти теги можно использовать внутри друг друга для создания более сложных формул.

Если вам нужно вставить очень сложную формулу в HTML-документ, лучше воспользоваться специальным языком разметки MathML.

 

 

Помечаем изменения. Теги del и ins [13/17]

Любой документ на протяжении своей «жизни» может изменяться. С распространением динамических веб-приложений вносить изменения в HTML-документы стало проще простого.

Иногда возникает вопрос: а что же именно было изменено в документе, что было добавлено, а что удалено?

Как раз для описания изменений предназначены теги <del> и <ins>.

<del> выделяет текст, который был удалён в новой версии документа.

<ins> выделяет текст, который был добавлен в новой версии документа.

Оба тега имеют атрибут datetime, в котором можно указать дату и время, когда была внесена та или иная правка.

Простейшим примером применения этих тегов может служить список ошибок. Когда ошибка исправлена, её помечают тегом <del>, если найдена новая ошибка, то её добавляют в список и помечают тегом <ins>.

Атрибут datetime предназначен не для людей, а для компьютеров, поэтому дату и время там пишут в стандартизованном формате. При такой разметке программам легче разбирать документы и анализировать, когда произошли те или иные изменения.

 

 

Преформатированный текст [14/17]

Наверное, вы уже заметили, как отличается отображение кода в HTML-редакторе и в мини-браузере.

Вы можете ставить сколько угодно пробелов в HTML-коде, но браузер отобразит их как один. Вы также можете ставить сколько угодно переносов строки в HTML-коде, а в браузере переноса не будет, если только не использовать специальные теги, например <p> или <br>.

Изменить это поведение браузера можно с помощью тега <pre>, который обозначает «предварительно отформатированный текст». Браузер сохраняет и отображает все пробелы и переносы, которые есть внутри тега <pre>.

Наиболее часто этот тег используется при отображении примеров кода.

 

Просто выделенный текст [15/17]

В HTML5 появился новый тег <mark>, который обозначает выделенный текст.

Иногда при работе с объёмными текстами мы используем маркер, чтобы выделять ключевые слова, идеи или что-то другое на что стоит обратить внимание. Такое же назначение и у тега <mark>.

В современных браузерах текст внутри <mark> подсвечивается жёлтым фоном.

 

ССЫЛКИ и ИЗОБРАЖЕНИЯ

Ссылки создаются с помощью очень простого и короткого тега <a>.

Адрес ссылки задаётся с помощью атрибута href

 

<a href="https://htmlacademy.ru">HTML Academy</a>

 

 

Абсолютные адреса [3/13]

Поговорим поподробнее об адресах. Они могут быть абсолютными и относительными.

Абсолютные адреса содержат в себе протокол, имя сервера и путь. Например, в адресе https://htmlacademy.ru/courses:

https:// — это протокол htmlacademy.ru — имя сервера, также называется домен или хост /courses — путь

Абсолютный адрес хорош тем, что однозначно указывает расположение документа. Браузер просто запрашивает по указанному протоколу с указанного сервера документ с указанным путём.

Иногда абсолютные адреса записываются в укороченном виде, например вот так: /courses.

В этом случае, браузер подставляет протокол и сервер текущей страницы. Например, если на сайте https://htmlacademy.ru есть ссылка с адресом /courses, то браузер для запроса преобразует её в такую: https://htmlacademy.ru/courses.

Используйте укороченные абсолютные адреса при задании ссылок внутри своего сайта, так как в случае изменения домена сайта вам не придётся ничего менять.

 

Относительные адреса [4/13]

В относительных адресах нет ни протокола, ни имени сервера, а путь не начинается со слэша /. Вот примеры относительных адресов:

courses/1./courses../../run/1

В относительных адресах могут использоваться специальные символы, аналогичные символам в путях файловых систем:. и...

Если браузер видит, что у ссылки задан относительный адрес, то он должен преобразовать этот адрес в абсолютный, чтобы знать, куда ведёт ссылка. Для этого браузер использует текущий адрес страницы. Например, так преобразуются адреса разных ссылок на одной и той же странице:

Текущий адрес	Адрес в ссылке	Преобразуется в
https://site.ru/news/1		https://site.ru/news/2
https://site.ru/news/1	..	https://site.ru/
https://site.ru/users/profile/1	../../contacts	https://site.ru/contacts

Использовать относительные адреса для навигации по сайту не рекомендуется. Однако относительные адреса бывают полезны, например, во внешних CSS-файлах.

 

 

Ссылка с якорем [7/13]

Ссылки с якорем обычно используются для создания навигации внутри страницы. Например, оглавления в начале страницы с большой статьёй.

Ссылка с якорем содержит символ #, после которого идёт идентификатор. Идентификатор создаётся с помощью атрибута id, который может быть задан у любого тега.

Можно задать адрес, состоящий из одного якоря, например:

<a href="#glava1">Глава 1</a>

При щелчке на такую ссылку браузер найдёт на странице элемент с атрибутом idсо значением glava1 и прокрутит окно страницы к нему. То есть перезагрузки страницы не произойдёт.

Якорь можно использовать и в абсолютных адресах, тогда после перехода на нужную страницу произойдёт прокрутка к заданной части этой страницы.

 

 

Всплывающая подсказка [8/13]

Для того, чтобы добавить ссылке всплывающую подсказку, надо использовать атрибут title. Например:

<a title="Подсказка" href="#">

Подсказка появится, когда курсор задержится над ссылкой некоторое время.

Подсказки помогают разъяснить назначение непонятных ссылок, а также ссылок-изображений.

Добавим изображение [9/13]

Чтобы добавить на страницу изображение, нужно использовать одиночный тег <img>с атрибутом src, в котором указан адрес картинки. Например:

<img src="logo.png">

Кстати, самыми распространёнными форматами изображений в сети являются JPEGи PNG.

 

Размеры изображения [10/13]

Чтобы управлять шириной или высотой изображения, нужно использовать атрибуты width и height. Пример:

<img width="100" src="...">

В примере изображению задана ширина 100px. Обратите внимание, что в атрибуте widthпосле цифры нет px. Если вы задаёте размер картинки в пикселях, то используйте просто цифры. Добавлять px не нужно, таков стандарт.

Во втором примере изображению задана относительная ширина, 50 процентов:

<img width="50%" src="...">

Высоту в процентах обычно не задают.

Если задать только один из размеров, ширину или высоту, то вторую размерность браузер вычислит самостоятельно исходя из пропорций изображения.

Если же задать и ширину, и высоту для картинки:

<img width="100" height="100" src="...">

То браузер может нарушить пропорции исходного изображения.

Альтернативный текст [11/13]

Если у пользователя отключены изображения или их невозможно загрузить, то в браузере отображается альтернативный текст. Например, если меню сделано с помощью изображений, то альтернативный текст поможет понять, куда ведёт каждый пункт. В общем, задавать альтернативный текст хорошо.

Альтернативный текст изображения задаётся с помощью атрибута alt. Пример:

<img src="cat.png" alt="Кот в полном расцвете сил">

Добавляем строки [2/23]

Простейшая таблица описывается с помощью трёх тегов:

1. <table> обозначает таблицу.

2. <tr> расшифровывается как «table row», обозначает строку таблицы.

3. <td> расшифровывается как «table data», обозначает ячейку внутри строки таблицы.

Теги <td> располагаются внутри тегов <tr>, а те, в свою очередь, внутри <table>. Почти всё текстовое содержимое таблицы размещается внутри тегов <td>.

В простейшей таблице в каждой строке должно быть одинаковое количество ячеек, то есть внутри всех <tr> должно быть одинаковое количество <td>.

Отступы внутри ячеек [7/23]

Вы освоили простейшие приёмы для работы с рамками таблиц. Наша таблица уже смотрится аккуратно, но содержимое ячеек прилипает к рамкам. Если добавить отступы внутри ячеек, то информация будет восприниматься намного лучше.

Отступы внутри ячеек можно добавлять с помощью атрибута cellpadding тега <table>. Но лучше его не использовать, а задавать отступы с помощью CSS.

CSS-свойство padding задаёт «внутренние отступы элемента» со всех сторон. Можно задавать отступы для каждой из сторон отдельно, используя свойства:

· padding-top,

· padding-right,

· padding-bottom,

· padding-left.

Например, чтобы задать у ячеек все отступы в 10 пикселей, а отступ слева в 20 пикселей, нужно написать такой CSS-код:

td { padding: 10px; padding-left: 20px;}

 

Ячейки-заголовки [10/23]

Обычно в таблицах выделяют названия столбцов или строк. В HTML для этого предусмотрен специальный тег <th>, который расшифровывается как «table header» и обозначает ячейку-заголовок. Тег <th> аналогичен <td>, он так же должен располагаться внутри <tr>, для него стилями можно задавать все те же свойства.

По умолчанию текст внутри <th> выделяется жирным и выравнивается по центру ячейки.

Заголовок таблицы [11/23]

Сейчас подпись Распределение браузеров сделана с помощью заголовка первого уровня. В принципе, можно догадаться, что это название таблицы, но семантически правильнее будет сделать это название с помощью тега <caption>.

Тег <caption> должен размещаться внутри тега <table>, причём непосредственно внутри него и первым, до остальных вложенных тегов. Вот так:

<table> <caption>Текст</caption>... </table>

Тег заголовка идёт первым внутри таблицы, но с помощью CSS можно переместить заголовок таблицы в любое место: сверху или снизу таблицы, по центру, справа или слева.

По вертикали заголовок таблицы перемещается CSS-свойством caption-side со значениями top и bottom, которые обозначают до и после таблицы соответственно.

По горизонтали заголовок таблицы выравнивается CSS-свойством text-align со значениями left, right и center.

 

Объединяем ячейки в строках [12/23]

Мы подобрались к одному из самых сложных вопросов по работе с таблицами. Это объединение ячеек.

Когда вы объединяете ячейки в текстовом редакторе, например, Word, то программа многое делает за вас. В чистом HTML задача объединения сложнее, однако, не стоит пугаться, сам принцип объединения ячеек не так уж сложен, просто нужно больше внимательности.

Исходная таблица в примере не очень красива, но с помощью объединения ячеек мы сделаем сложный заголовок таблицы, вот такой:

Начнём с объединения ячеек по горизонтали. Чтобы объединить ячейки по горизонтали, необходимо использовать атрибут colspan у тегов <th> или <td>.

Когда вы задаёте ячейке атрибут colspan со значением 2, то ячейка как бы «растягивается» на ячейку справа, но та ячейка не исчезает, а отодвигается и в таблице появляется новый столбец. Чтобы удалить его, нужно удалить ячейку, которая находится справа от «растянутой».

 

Первая форма [1/18]

Формы нужны для того, чтобы отправлять данные с веб-страницы на веб-сервер, который сможет эти данные обработать: зарегистрировать пользователя, создать сообщение на форуме, отправить письмо и так далее. В общем, формы в вебе просто необходимы.

Чтобы создать форму, нужно использовать парный тег <form>, внутри которого размещаются поля формы. У тега <form> есть два важных атрибута:

· action задаёт адрес, URL, отправки формы;

· method задаёт метод отправки формы.

Пример:

<form action="https://echo.htmlacademy.ru" method="get"> поля формы </form>

Для отправки формы обычно используют методы get или post. Если не указать атрибут method, то будет использован get.

Метод get посылает данные формы в строке запроса, то есть они видны в адресной строке браузера и следуют после знака вопроса. Например:

https://www.google.com/search? q=htmlacademy

Метод get лучше использовать в поисковых формах, потому что он позволяет получить ссылку на результаты поиска и передать её кому-то.

Метод post посылает данные в теле HTTP-запроса и используется, когда нужно отправить много данных и ссылка на результат обработки этих данных не нужна. Например, при редактировании личного профиля.

 

Текстовое поле ввода [2/18]

Большинство полей форм создаётся с помощью одиночного тега <input>. У этого тега два обязательных атрибута:

· type задаёт тип поля;

· name задаёт имя поля.

Тип поля влияет на то, как оно будет отображаться и вести себя. Самый распространённый тип — это text, который обозначает текстовое поле. Он же используется по умолчанию. Пример:

<form action="https://echo.htmlacademy.ru" method="get"> <input type="text" name="search"></form>

Имя поля нужно, чтобы правильно обработать данные на сервере. Обычно, имя поля должно быть уникальным в пределах формы, хотя есть исключения. Для задания имени поля используют латинские буквы и цифры.

Идентификатор и значение по умолчанию [3/18]

Атрибут id поля ввода обозначает идентификатор. Он должен быть уникальным не только в пределах формы, но и на всей странице.

Обычно идентификаторы используют для повышения удобства работы с формой, например, создают подписи, связанные с мелкими полями. При щелчке по таким подписям активируется связанное поле. И это удобно, так как по большой подписи попасть легче, чем по маленькому полю. Также идентификаторы используют в JavaScript для работы с полями.

Идентификатор в отличие от имени поля не передаётся на сервер. Лучше использовать идентификаторы, отличающиеся от имени поля, особенно актуально это для полей множественного выбора, которые мы разберём далее в курсе.

Атрибут value задаёт значение поля ввода по умолчанию. Это тоже повышает удобство.

Согласитесь, приятно зайти в огромную анкету на каких-нибудь госуслугах, а там ваши паспортные данные уже подставлены в нужные поля и заполнять их не надо. И всё благодаря тому, что программист добавил к полям атрибут value с нужными данными.

 

Подпись для поля ввода [4/18]

Можно подумать, что сделать подпись к полю очень просто. Пишем текст рядом с полем и всё готово:

Подпись <input type="text" name="username">

На самом деле этого недостаточно — мы получили просто кусок текста и поле, которые расположены рядом друг с другом, но логически никак не связаны.

Есть специальный тег, который позволяет смело сказать: «Этот кусок текста действительно подпись к этому полю!». Это парный тег <label>.

Он связывает текст и поле ввода логически. А ещё если щёлкнуть по тексту в такой подписи, то курсор переместится в соответствующее поле.

Создавать подписи к полям с помощью <label> — хороший приём. Используйте его.

Первый способ создать подпись — просто обернуть текст подписи и тег поля в тег <label>, вот так:

<label> Подпись <input type="text" name="username"></label>

Надо отметить, что при оборачивании текста в тег <label> он визуально никак не меняется, ведь главная задача подписи — создать логическую связь.

 

Связываем подпись и поле по id [5/18]

Иногда обернуть поле и текст подписи в тег <label> нельзя. Например, когда они размещены в разных ячейках таблицы.

В этом случае можно связать подпись с полем с помощью атрибута id. Алгоритм такой:

1. Добавляем к полю ввода идентификатор с помощью атрибута id.

2. Оборачиваем текст подписи в тег <label>.

3. Добавляем тегу <label> атрибут for.

4. В атрибут for записываем такое же значение, что и в атрибуте id у поля.

Например:

<label for=" user-field-id ">Имя пользователя</label>... много-много других тегов...<input id=" user-field-id " type="text" name="username">

Для пароля type="password”

 

Кнопка отправки формы [8/18]

Форма практически готова. Осталось добавить кнопку для отправки формы. Такая кнопка создаётся с помощью тега <input> c типом submit.

Надпись на кнопке можно задать с помощью атрибута value. Для кнопки отправки формы задавать имя необязательно. Но если имя задано, то на сервер будут отправляться имя и значение кнопки.

Обычно имя для кнопки отправки задают, когда в форме несколько кнопок, отвечающих за разные действия. Браузер отправляет на сервер имя и значение только той из них, на которую нажал пользователь. Таким образом, сервер может понять, какую кнопку нажали и что нужно сделать.

 

Многострочное поле ввода [9/18]

Мы научились создавать простейшие формы с текстовыми полями и кнопками. А теперь познакомимся с более сложными элементами формы.

Многострочное текстовое поле создаётся с помощью парного тега <textarea>. У него есть атрибуты name и id, которые аналогичны атрибутам текстового поля.

Атрибут rows принимает целочисленное значение и задаёт высоту многострочного поля в строках. Атрибут cols задаёт ширину поля в символах. В качестве ширины символа берётся некоторая «усреднённая ширина».

Атрибут value у многострочного поля отсутствует, а значение по умолчанию задаётся по-другому. Текст, расположенный между открывающим и закрывающим тегом <textarea>и является значением по умолчанию. Вот так:

<textarea>Значение по умолчанию</textarea>

 

Чекбокс или «галочка» [10/18]

Поле-галочка — это тег <input> с типом checkbox.

Галочка работает по принципу «либо да, либо нет». Если галочка стоит, то браузер посылает переменную с именем поля на сервер, если галочки нет, то не посылается ничего. Таким образом, атрибут value не является обязательным.

Чтобы галочка стояла по умолчанию, нужно добавить к тегу атрибут checked. Вот так:

<input type="checkbox" checked>

Чекбокс не подразумевает выбор одного элемента из нескольких. Поэтому если в одной форме есть несколько чекбоксов, то имена у них должны быть разными.

 

Переключатель или «радиобаттон» [12/18]

Поле-переключатель — это тег <input> с типом radio.

Обычно переключатели размещают группами по несколько штук. Причём у переключателей из одной группы должно быть одинаковое имя и разные значения, которые задаются c помощью value.

 

Группа переключателей [13/18]

Теперь добавим ещё один вариант ответа в наш переключатель. Для этого нужно добавить ещё один <input> с таким же именем, но другим значением value.

Подобным образом можно создавать группы переключателей с любым количеством вариантов.

Чтобы сделать какой-либо вариант в переключателе выбранным по умолчанию, нужно добавить к соответствующему тегу <input> атрибут checked, как у поля-галочки.

Кстати, имя поля у переключателей одной группы должно быть одинаковым, но идентификаторы всегда должны быть уникальными.

 

Раскрывающийся список или «селект» [14/18]

Раскрывающийся список так же, как и переключатель, позволяет выбрать один вариант ответа из нескольких.

Раскрывающийся список создаётся с помощью парного тега <select>, у которого есть знакомые атрибуты name и id.

Варианты ответов задаются с помощью парных тегов <option>, которые должны располагаться внутри тега <select>. Например:

<select name="theme"> <option value="light">Светлая тема</option> <option value="dark">Тёмная тема</option>...</select>

В атрибуте value тега <option> задаётся значение варианта ответа, а внутри этого тега располагается подпись варианта ответа.

Если при отправке формы у выбранного варианта задан value, то на сервер отправится значение этого атрибута. В противном случае будет отправлен текст подписи.

«Мультиселект» [15/18]

Раскрывающийся список можно превратить в так называемый «мультиселект», то есть список, в котором можно выбрать не один, а несколько вариантов.

Чтобы сделать это, нужно добавить к тегу <select> атрибут multiple.

Выбрать несколько вариантов можно, щёлкая по ним с зажатой клавишей Ctrl на Windows или Command на OS X.

Высоту мультиселекта можно изменять с помощью атрибута size тега <select>.

Чтобы отметить как выбранные по умолчанию одно или несколько значений, нужно к соответствующим тегам <option> добавить атрибут selected.

При отправке данных мультиселекта на сервер с PHP после имени в значении атрибута nameставятся символы квадратных скобок []. Например, <select name="days[]">. Это необязательное требование для имени мультиселекта, а нужно только для корректной обработки данных в PHP.

 

Поле для загрузки файлов [16/18]

Поле для загрузки файлов — это тег <input> с типом file. Для этого поля обязательным атрибутом является имя.

Чтобы поле заработало и браузер смог передать выбранный файл на сервер, необходимо добавить форме атрибут enctype со значением multipart/form-data. Не полю, а форме.

Кстати, внешний вид таких полей очень сильно отличается в зависимости от операционной системы и очень плохо изменяется с помощью стилей.

Скрытое поле [17/18]

И ещё одно невидимое и очень полезное поле. Это скрытое поле. Его используют, когда в форме нужно отправить какие-то дополнительные служебные данные, которые не вводятся пользователем.

Например, это могут быть реквизиты заказа или номер пользователя в форме оплаты.

Скрытое поле — это тег <input> с типом hidden.