Теги для разметки текста и атрибуты

Вячеслав Крысин Нетология

План занятия

1. Что такое браузер
2. Семантика
3. Разметка
4. HTML
5. Тег
6. Вложенность тегов
7. Теги для расстановки акцентов по тексту
8. Атрибуты тегов
9. Гиперссылка
10. URL
11. Использование ссылок
12. Картинки

Где можно встретить браузер

• Приложение на вашем ноутбуке (Chrome, Firefox, Safari, Opera).
• Приложение на вашем смартфоне (ChromeApp, SafariApp).
• Браузер может быть встроен в другое приложение (например, в почтовый клиент).
• Браузер также может быть встроен в часы, телевизор, платежный терминал, банкомат, автомобиль, холодильник.

Поэтому веб-технологии так популярны. Они везде.

Что такое URL

Вы сообщаете браузеру, что отобразить, указав адрес документа в формате URL.

URL (Uniform Resource Locator) — единый указатель ресурса, в общем виде выглядит так: <протокол>://<хост>/<путь>

• Протокол — «язык», на котором общаются браузер и сервер.
• Хост — адрес или имя сервера, у которого мы запрашиваем документ.
• Путь — адрес расположения документа на сервере.

Пример ссылки: http://netology.ru/programs/html-css-base

Что делает браузер

1. Формирует и отправляет запрос на сервер — HTTP.
2. Получает ответ сервера — HTTP.
3. Разбирает полученный документ — HTML.
4. Рисует и отображает полученный документ в окне — HTML и CSS.
5. Реагирует на действия пользователя — CSS и JavaScript.

На каком этапе участвует верстальщик

1. Как сервер отвечает на запросы, определяет backend-программист.
2. На этапе разбора и отрисовки документа верстальщик сообщает браузеру, что, где и как отобразить на странице.
3. На этапе обработки действий пользователя участвует frontend-программист.

Какую информацию содержит документ

HTML документ, полученный с сервера, содержит:

• Текстовую информацию;
• Структуру документа (заголовки, абзацы и так далее);
• Ссылки на другие ресурсы (изображения, видео, аудио, стили).

Веб-страница — это информация

Веб-страницы, в первую очередь, должны представлять информацию в удобном виде.

Давайте подумаем, из чего она состоит?

Что мы видим в книгах, журналах, газетах

• текст, разбитый на абзацы;
• заголовки разных уровней;
• иллюстрации;
• цитаты;
• акценты по тексту.

Все это — хорошо известные вам элементы. И они существовали задолго до появления интернета.

И это не про оформление

Их внешний вид может отличаться в различных источниках. Но суть от этого не меняется. Вы с первого взгляда определите заголовок в новой книге.

Задача браузера

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

Изобретаем браузер

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

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

Без сложного программного обеспечения

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

Стоит отметить что текстовый редактор — блокнот. Текстовый процессор — MS Word.

Обычный текст

        
          Рагу из морского черта

          Морской черт — чертовски коварная рыбина, за что
          европейский удильщик и получил свое второе название.
          Ее также называют «лобстером для бедных» — за плотное
          мясо, по структуре действительно напоминающее лобстера.
          Зато в нем нет костей, кроме огромного хребта, поэтому
          при разделке нужно только снять кожу и разрезать рыбу
          вдоль на два филе.

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

Обозначать элементы

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

Текст с метками

        
          # Рагу из морского черта #

          * Морской черт * — чертовски коварная рыбина, за что
          европейский удильщик и получил свое второе название.
          Ее также называют «лобстером для бедных» — за плотное
          мясо, по структуре действительно напоминающее лобстера.
          Зато в нем нет костей, кроме огромного хребта, поэтому
          при разделке нужно только снять кожу и разрезать рыбу
          вдоль на два филе.

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

Простота создания

Ограничим количество возможных меток, оставив только самое необходимое.

Оставим только метки для:

• заголовка;
• абзаца;
• цитаты;
• важного текста;
• выделенного текста;
• иллюстрации.

Легкость изучения

А это мы проверим по итогам курса.

Требования к меткам

• Метка должна быть уникальной и не должна использоваться в обычной письменной речи. Поэтому Заголовок – плохой вариант метки, как и символ *.
• Они должны состоять из небольшого числа символов, иначе их набор будет утомителен. Поэтому ТутНачинаетсяЗаголовокОтнынеИВоВекиВеков — плохой вариант метки, хоть и вряд ли встретится в самом тексте.
• По ним должна быть понятна их суть. Поэтому ТНЗ29 — тоже плохой вариант метки, хоть короткий и уникальный.

Цели создания HTML

• Cоздавался как язык для обмена научной и технической документацией.
• Пригодный для использования людьми, не являющимися специалистами в области вёрстки.
• HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения.

Особенности HTML

• Просто текст в HTML-документе браузер никак не форматирует.
• Переносы строк заменяет на пробел.
• Несколько подряд идущих пробелов показывает как один.
• Для разметки используются специальные метки, которые обозначают начало и конец абзаца, заголовка и все остальные элементы.
• Чаще всего их называют тегами.
• Набор тегов ограничен, и у каждого из них своя роль.

Разметка нашего рецепта рагу

        
          Рагу из морского черта

          Морской черт – чертовски коварная рыбина, за что
          европейский удильщик и получил свое второе название.
          Ее также называют «лобстером для бедных» – за плотное
          мясо, по структуре действительно напоминающее лобстера.
          Зато в нем нет костей, кроме огромного хребта, поэтому
          при разделке нужно только снять кожу и разрезать рыбу
          вдоль на два филе.

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

Так рецепт выглядит в браузере

Видно, что переносы строк были проигнорированы.

Стандартизация

• Стандарт поддерживается Консорциумом Всемирной паутины W3C.
• В стандарт как раз входит допустимый набор тегов, их роль, и прочие особенности их использования.
• Текущая версия стандарта HTML — 5.1
• Все браузеры стараются обеспечить максимальную поддержку актуальному стандарту.

HTML-теги

• Теги в HTML заключены в угловые скобки < и >.
• Нам привычнее их называть символами «меньше» и «больше».
• Между угловыми скобками записывается название тега.

Открывающий и закрывающий тег

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

Абзац

Тег <p> — позволяет выделить абзац текста (paragraph по-английски).

          
            Рагу из морского черта
            <p>
              Морской черт — чертовски коварная рыбина, за что
              европейский удильщик и получил свое второе название.
              Ее также называют «лобстером для бедных» — за плотное
              мясо, по структуре действительно напоминающее лобстера.
              Зато в нем нет костей, кроме огромного хребта, поэтому
              при разделке нужно только снять кожу и разрезать рыбу
              вдоль на два филе.
            </p>
            <p>
              Подавать это рагу, как и все остальные, нужно в
              глубоких тарелках, в каких обычно подают пасту.
            </p>
          
        

Наш рецепт с разметкой абзацев в браузере

Заголовок

Тег <h1> обозначает заголовок первого уровня (heading level 1 по-английски).

Для разметки заголовков предусмотрено 6 тегов <h1>—<h6>, что позволяет нам размечать заголовки разных уровней.

Заголовок рецепта

        
          <h1>Рагу из морского черта</h1>
          <p>
            Морской черт – чертовски коварная рыбина, за что
            европейский удильщик и получил свое второе название.
            Ее также называют «лобстером для бедных» – за плотное
            мясо, по структуре действительно напоминающее лобстера.
            Зато в нем нет костей, кроме огромного хребта, поэтому
            при разделке нужно только снять кожу и разрезать рыбу
            вдоль на два филе.
          </p>
          <p>
            Подавать это рагу, как и все остальные, нужно в
            глубоких тарелках, в каких обычно подают пасту.
          </p>
        
      

Наш рецепт с размеченным заголовком в браузере

Цитата

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

Цитата в тексте

Весь код

Наш рецепт с цитатой из Википедии в браузере

Цитата из нескольких абзацев

В HTML можно помещать одни теги внутрь других. Поэтому мы можем текст внутри цитаты также разметить тегами абзацев.

Весь код

        
          <blockquote>
            <p>
              Европейский удильщик, или европейский морской чёрт –
              хищная рыба отряда удильщикообразных.
            </p>
            <p>
              Рыба съедобна. Мясо белое, плотное, без костей.
              Особенно популярен «морской чёрт» во Франции.
            </p>
          </blockquote>
        
      

Цитата в браузере

Особенности вложенности тегов

• Тег должен быть вложен целиком в другой тег. Пересечения недопустимы.
• Не все теги можно вкладывать в другие теги.
• Вложенные теги — дочерние для того, в который они вложены.
• Сам тег для вложенных является непосредственным родителем.

Важный текст

Тег <strong> — сделать акцент на слове или фразе, обозначить их важность.

Выделенный текст

Тег <em> — позволяет выделить слово.

Акценты в браузере

Дополнительная информация

Чтобы сообщить браузеру дополнительную информацию о содержимом тегов или задать специальные свойства, используются атрибуты.

• Атрибуты задаются в открывающем теге.
• Значение атрибута задается в двойных кавычках ".
• Значение записывается после символа =
• Атрибутов может быть несколько, тогда они перечисляются через пробел.

Источник цитаты

Универсальные атрибуты

Можно указать в любом теге:

• id — позволяет задать тегу универсальный идентификатор, чтобы в дальнейшем ссылаться на него.
• class — позволяет задать через пробел один или несколько определенных пользователем классов для дальнейшего управления внешним видом элемента через стили.

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

Тег a

В HTML для этого предусмотрены ссылки в тексте, которые позволяют по клику перейти на другую страницу или к другой части текущей страницы.

Для того, чтобы слово или фразу сделать гиперссылкой, её нужно разметить тегом a:

        
          <p>
            Накануне международной выставки дизайна интерьеров
            <a>i Saloni WorldWide Moscow</a>,
            которая состоится 12–15 октября в Москве, вспомним
            одиннадцать главных изобретений итальянских дизайнеров
            XX века. Теперь рассказываем о предметах, которые
            итальянцы не придумали, но довели до совершенства, –
            от штопора до дивана.
          </p>
        
      

Атрибут href

Чтобы сообщить браузеру, куда перенаправить пользователя при клике по ссылке, укажем адрес в формате URL в специальном атрибуте href (hypertext reference — ссылка на гипертекст).

Ссылки с адресами

        
          <p>Накануне международной выставки дизайна интерьеров
          <a href="#about">i Saloni WorldWide Moscow</a>,
          которая состоится 12–15 октября в Москве, вспомним
          одиннадцать главных изобретений итальянских дизайнеров
          XX века. Теперь рассказываем о предметах, которые
          итальянцы не придумали, но довели до совершенства, –
          от штопора до дивана.</p>
    
          <h2 id="about">О выставке</h2>
    
          <p>Выставке Salone Internazionale del Mobile была
          впервые проведена в 1961 году для продвижения и
          экспорта итальянской мебели и вскоре стала самым
          ожидаемым событием в мире мебельной промышленности.</p>
        
      

Полный адрес документа

В URL элементов немного больше:
<протокол>://<хост>/<путь>#<якорь>

• Протокол — «язык», на котором общаются браузер и сервер.
• Хост — адрес или имя сервера, у которого мы запрашиваем документ.
• Путь — адрес расположения документа на сервере.
• Якорь — идентификатор тега внутри документа, к которому нужно перейти.

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

Пример ссылки:

        
           https://en.wikipedia.org/wiki/Uniform_Resource_Locator#Syntax
        
      

Относительные адреса

При определенных условиях для указания ресурсов в документе допускается опускать отдельные фрагменты адреса:

• Протокол: для указания, что ресурс должен быть получен по тому же протоколу, что и этот документ //en.wikipedia.org/wiki/Uniform_Resource_Locator#Syntax
• Хост: указывая, что документ расположен на том же сервере /wiki/Uniform_Resource_Locator#Syntax
• Использовать относительный адрес: указывая, где документ расположен на сервере относительно текущего документа Uniform_Resource_Locator#Syntax
• Путь: указывая, что перейти нужно к фрагменту этого же документа. #Syntax

Ограничения на вложенность в теге a

В тег a нельзя вкладывать другие теги a.

Всплывающие подсказки

Для ссылки можно задать подсказку в атрибуте title, которая покажется при наведении указателя мыши на ссылку:

Тег img

• Для вставки картинки в документ используется тег img.
• Этот тег не имеет содержимого и закрывающего тега.
• Это так называемый одиночный тег.
• URL файла с изображением указывается в специальном атрибуте src.
• Также для картинки обязательно требуется указывать атрибут alt.

Размер изображения

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

Картинка в тексте

Если картинку вставить в тексте, то она будет вести себя как символ, но в полный размер. И в 99% случаев вы получите не то, что ожидали.

 
        
          <p>
            <img src="./i/cat.jpg" alt="Кот"/>
            Кот по кличке Самсон официально признан самым большим
            котом в Нью-Йорке – возможно, не за горами и мировое
            признание.
          </p>
        
      

Картинки в тексте в браузере

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