Наброски и зарисовки растений, плодов, цветов: Освоить конструктивное построение структуры дерева через зарисовки отдельных деревьев, группы деревьев...
Семя – орган полового размножения и расселения растений: наружи у семян имеется плотный покров – кожура...
Топ:
Техника безопасности при работе на пароконвектомате: К обслуживанию пароконвектомата допускаются лица, прошедшие технический минимум по эксплуатации оборудования...
Марксистская теория происхождения государства: По мнению Маркса и Энгельса, в основе развития общества, происходящих в нем изменений лежит...
Интересное:
Подходы к решению темы фильма: Существует три основных типа исторического фильма, имеющих между собой много общего...
Средства для ингаляционного наркоза: Наркоз наступает в результате вдыхания (ингаляции) средств, которое осуществляют или с помощью маски...
Влияние предпринимательской среды на эффективное функционирование предприятия: Предпринимательская среда – это совокупность внешних и внутренних факторов, оказывающих влияние на функционирование фирмы...
Дисциплины:
 2021-04-19 |
 128 |
из
5.00
|
Заказать работу |
А сейчас давайте подумаем, а можно ли писать один тег внутри другого, и не будет ли это ошибкой?
Элементы можно вкладывать друг в друга. Такие элементы называются «вложенные» (дочерние) по отношению к родителю.
Дочерним называется элемент (тег), который непосредственно располагается внутри родительского элемента. Чтобы лучше понять отношения между элементами документа, разберём небольшой код:
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div> <p><em>Далеко-далеко</em> за горами в стране.</p> <p>Безопасную <strong><em>осталось текста</em> они вопрос</strong> строчка маленький</p> </div> </body> </html> |
В данном примере применяется несколько контейнеров, которые в коде располагаются один в другом.
Нагляднее это видно на дереве элементов, так называется структура отношений тегов документа между собой.
На этом рисунке в удобном виде представлена вложенность элементов и их иерархия. Здесь дочерним элементом по отношению к тегу <div> выступает тег <p>. Вместе с тем тег <strong> не является дочерним для тега <div>, поскольку он расположен в контейнере <p>, в данном случае тег <strong> является потомком по отношению к тегу <div>.
Теги контейнеры и семантические элементы
Строчный контейнер <s pan >
Перед тем как переходить к блочным контейнерам, давайте познакомимся со строчным контейнером <span>.
Тег <span> предназначен для определения строчных элементов документа, с его помощью можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри абзаца (тега <p>) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег <span> и определить для него стиль текста.
По умолчанию тег <span> не имеет какого либо оформления.
Блочные контейнеры
Давайте знакомится с элементами HTML которые позволяют рисовать сетку любого формата и придавать различным областям семантический смысл (логическую структуру сайта для браузера и поисковиков).
Семантические элементы HTML5 доступно описывают свой смысл или назначение как для браузеров, так и для веб-разработчиков.
До появления стандарта HTML5 вся разметка страниц осуществлялась преимущественно с помощью элементов <div>. С их помощью в HTML-документе размещали верхние и нижние колонтитулы, боковые панели, навигацию и многое другое.
Стандарт HTML5 предоставил новые элементы для структурирования, группировки контента и разметки текстового содержимого. Новые семантические элементы позволили улучшить структуру веб-страницы, добавив смысловое значение заключенному в них содержимому (было <div id="header">, стало <header>).
Для отображения внешнего вида элементов не задано никаких правил, поэтому элементы можно стилизовать по своему усмотрению. Для всех элементов доступны глобальные атрибуты.
< div > </ div >
d iv — является базовым контейнером для элементов.
Тег <div> не имеет свойств по умолчанию для внешнего отображения, он представляет собой так называемый контейнер, поэтому к нему можно применять всевозможные CSS-стили, чтобы элементы внутри этих тегов приняли желаемый вид.
Этот тег изначально был предназначен для деления веб-страницы на логические фрагменты, такие как нижний колонтитул (подвал), боковое меню и т.п. Но с появлением новой семантической разметки веб-страниц с помощью HTML5, необходимость в таком повсеместном использовании тега отпала.
В настоящее время тег <div> используется для группирования блочных элементов. Тег также позволяет объединять любой набор таких элементов, как заголовок, насколько абзацев, список в единственном блоке, который потом можно позиционировать на веб-странице, создавая сложную схему разметки.
Тег<div> следует применять только в случае, если для выделения области не подходит никакой другой элемент страницы.
| <div> <h2>Далеко-далеко.</h2> <img src="img/picture.png" alt="Изображение"> <p>Далеко-далеко за словесными горами в стране гласных и согласных.</p> </div> |
<header> </header>
Группирует вводные и навигационные элементы.
Может содержать заголовки, оборачивать содержание раздела страницы, форму поиска или логотип.
В HTML-документе может содержаться одновременно несколько элементов <header> и они могут располагаться в любой части страницы.
Элемент <header> нельзя помещать внутрь элементов <footer>, <address> или другого элемента <header>.
| <header> <h1>Site description</h1> <nav> <ul> <li><a href="">About</a> <li><a href="">Forum</a> <li><a href="">Download</a> </ul> </nav> </header> |
< nav > </ nav >
Предназначен для создания блока навигации веб-страницы или всего веб-сайта, при этом не обязательно должен находиться внутри тега <header>.
На странице может быть несколько элементов <nav>.
Не заменяет теги <ul> или <оl>, он просто их обрамляет.
Не все группы ссылок на странице должны быть обёрнутыми в <nav>, этот элемент предназначен в первую очередь для разделов, которые состоят из главных навигационных блоков.
| <nav> <ul> <li><a>Link 1</a></li> <li><a>Link 2</a></li> <li><a>Link 3</a></li> </ul> </nav> |
< article > </ article >
Используется для группировки записей — публикаций, статей, записей блога, комментариев.
Представляет собой независимый обособленный блок, предназначенный для многократного использования, как правило, начинается с заголовка. Может дублироваться на других страницах сайта и содержать внутри другие элементы <article>, которые по содержанию имеют близкое отношение к содержанию внешней статьи. Если на странице только одна статья с заголовком и текстовым содержимым, она не нуждается в обёртке элементом <article>.
Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.
| <article> <header> <h2>...</h2> <span>...</span> </header> <p>...</p> <footer> <a href="">…</a> </footer> </article> |
< section > </ section >
Элемент представляет собой универсальный раздел документа, который группирует тематическое содержимое и обычно содержит заголовок.
Не является блоком-оберткой, для этих целей уместнее использовать элемент <div>.
В качестве содержимого может выступать оглавление, разделы научных публикаций, программа мероприятия. Домашняя страница сайта также может быть поделена на секции — блок вводной информации, новости и контакты.
| <article> <h2>...</h2> <section> <h3>...</h3> <p>...</p> </section> <section> <h3>...</h3> <p>...</p> </section> <p>...</p> </article> |
<aside> < / aside>
Группирует содержимое, связанное с окружающим его контентом напрямую, но которое можно счесть отдельным (т.е., удаление этого блока не повлияет на понимание основного содержимого).
Чаще всего элемент позиционируется как боковая колонка (как в книгах) и включает в себя группу элементов: <nav>, цифровые данные, цитаты, рекламные блоки, архивные записи.
Не подходит для блоков, просто позиционированных в стороне.
| <aside> <h2>...</h2> <p>...</p> </aside> |
<footer> </footer>
Представляет собой нижний колонтитул содержащей его секции или корневого элемента.
Обычно содержит информацию об авторе, данные о копирайте, если используется как колонтитул всей страницы, содержимое дополняется сведениями об авторских правах, ссылками на условия использования, контактную информацию, ссылками на связанное содержимое и т.п.
В одном веб-документе может быть несколько элементов <footer>. Как каждая страница, так и каждая статья может иметь свой элемент <footer>.
| <footer> <address>...</address> <small>@2021...</small> </footer> |
< main > </ main >
Элемент <main> представляет основное содержимое документа (содержимое элемента <body>).
Контент, находящийся внутри элемента, должен быть уникальным и не повторяться во всех документах сайта, таких как навигационные ссылки, информация о копирайте, логотипы, формы поиска (в случае, если форма поиска является основной функцией документа).
Элемент <main> не может быть потомком таких элементов как <article>, <aside>, <footer>, <header> или <nav>
| <body> <header> … </header> <main> <h1>Следы невиданных зверей</h1> <p>История о том, как возле столовой появились загадочные розовые слоны… </p> </main> <footer> … </footer> </body> |
Атрибуты HTML тегов
Теги могут иметь атрибуты. Атрибут — это дополнительное свойство тега. Некоторые теги есть смысл использовать только с атрибутами. Наиболее яркий пример — тег <img>, обозначающий изображение. Для него обязательно нужно указывать атрибут src, который задаёт адрес картинки, без этого атрибута браузер просто не сможет загрузить её.
Названия и значения атрибутов не чувствительны к регистру, но, тем не менее, рекомендуется набирать их в нижнем регистре. Значение атрибута заключается в кавычки "". Порядок расположения атрибутов в любом теге не имеет значения и на результат отображения элемента не влияет.
Когда для тега не добавлен какой-либо допустимый атрибут, браузер будет подставлять значение, заданное по умолчанию.
Картинки в HTML
<img src=””>
Использование графики делает веб-страницы визуально привлекательнее. Изображения помогают лучше передать суть и содержание веб-документа.
Картинки добавляются на веб-страницы с помощью тега <img>.
Элемент <img> представляет изображение и его резервный контент, который добавляется с помощью атрибута alt. Так как элемент <img> является строчно-блочным (это единственный элемент, которому доступны свойства и строчных элементов и блочных), то рекомендуется располагать его внутри блочного элемента, например, <div>.
Тег <img> имеет обязательный атрибут src, значением которого является абсолютный или относительный путь к изображению.
Размеры изображения
Без задания размеров изображения рисунок отображается на странице в реальном размере. Отредактировать размеры изображения можно с помощью атрибутов width и heigh или стилей CSS. Если будет задан только один из атрибутов, то второй будет вычисляться автоматически для сохранения пропорций рисунка.
Форматы графических файлов
Ниже приведены самые часто используемые форматы изображений с кратким описанием.
Формат JPEG (Joint Photographic Experts Group). Изображения JPEG идеальны для фотографий, они могут содержать миллионы различных цветов. Сжимают изображения лучше GIF, но текст и большие площади со сплошным цветом могут покрыться пятнами.
Формат GIF (Graphics Interchange Format). Идеален для сжатия изображений, в которых есть области со сплошным цветом, например, логотипов. GIF-файлы позволяют установить один из цветов прозрачным, благодаря чему фон веб-страницы может проявляться через часть изображения. Также GIF-файлы могут включать в себя простую анимацию. GIF-изображения содержат всего лишь 256 оттенков, из-за чего изображения выглядят пятнистыми и нереалистичного цвета, как плакаты.
Формат PNG (Portable Network Graphics). Включает в себя лучшие черты GIF- и JPEG-форматов. Содержит 256 цветов и дает возможность сделать один из цветов прозрачным, при этом сжимает изображения в меньший размер, чем GIF-файл.
Формат SVG (Scalable Vector Graphics). SVG-рисунок состоит из набора геометрических фигур, описанных в формате XML: линия, эллипс, многоугольник и т.п. Поддерживается как статичная, так и анимированная графика. Набор функций включает в себя различные преобразования, альфа-маски, эффекты фильтров, возможность использования шаблонов. Изображения в формате SVG могут изменяться в размере без снижения качества.
Формат WebP — достаточно новый формат, созданный и развиваемый с 2010 года компанией Google. Главная цель этого формата — ещё больше уменьшить вес при сохранении такого же качества.
Особенности WebP:
·сжимает изображения без потерь лучше, чем PNG;
·сжимает изображения с потерями лучше, чем JPEG;
·поддерживает прозрачность (альфа-канал).
Ссылки Якоря
Якорем называется закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке.
Якоря удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу.
Для создания якоря следует вначале сделать закладку в соответствующем месте, присвоив элементу уникальный идентификатор id.
В качестве значения href="" для перехода к этому якорю используется указанный id с символом решетки (#) впереди.
| <ul> <li><a href="#one">Lorem.</a></li> <li><a href="#two">Rem?</a></li> </ul> <div> <p id='one'> Далеко-далеко за словесными горами в стране гласных и согласных.</p> <p id='two'> Буквенных родного вершину, дал которой текста инициал агентство, решила!</p> </div> |
HTML Атрибуты
Для изменения размеров изображения средствами HTML. Допускается использовать значения в пикселах или процентах. Если установлены проценты, то размеры изображения вычисляются относительно родительского элемента — контейнера. Добавление только одного атрибута width или height сохраняет пропорции и отношение сторон изображения
Таблицы
HTML-таблицы упорядочивают информацию и выводят её на экран с помощью строк и столбцов.
Ячейки таблиц могут содержать любые HTML-элементы, такие как заголовки, списки, текст, изображения, элементы форм, а также другие таблицы.
Важно!
Таблицы больше не используются для вёрстки веб-страниц и компоновки отдельных элементов, потому что такой приём не обеспечивает гибкость структуры и адаптивность сайта, существенно увеличивая HTML-разметку.
Создаем таблицу
Таблица создаётся при помощи парного тега <table> </table>. Данный тег является контейнером для элементов таблицы и все элементы должны находиться внутри него. Например, с помощью данной разметки можно создать таблицу, состоящую из двух столбцов и двух строк:
<table>
<tr><td>ячейка 1</td><td> ячейка 2</td></tr>
<tr><td>ячейка 3</td><td> ячейка 4</td></tr>
</table>
Так! Стоп! Стоп! Стоп!!! Я немного разогнался и не объяснил, что к чему, поэтому сейчас пойдем подробнее))) Если с созданием общего контейнера таблицы при помощи тега <table> … </table> все просто, то теперь давайте разберем строки.
Автоматическое растормаживание колес: Тормозные устройства колес предназначены для уменьшения длины пробега и улучшения маневрирования ВС при...
Типы оградительных сооружений в морском порту: По расположению оградительных сооружений в плане различают волноломы, обе оконечности...
Общие условия выбора системы дренажа: Система дренажа выбирается в зависимости от характера защищаемого...
Эмиссия газов от очистных сооружений канализации: В последние годы внимание мирового сообщества сосредоточено на экологических проблемах...
© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!