Атрибуты
Атрибуты добавляются в тег для расширения или модификации его действий. К одному тегу можно добавить несколько атрибутов. Если атрибуты тега следуют после имени тега, они разделяются одним или несколькими пробелами. Порядок следования не важен.
Большинство атрибутов имеют значения, которые следуют за знаком равенства (=), находящимся после имени атрибута. Длина значений ограничена 1024 символами. Значения могут быть чувствительны к регистру. Иногда значения должны находиться в кавычках (двойных или одинарных).
Вложенные теги
В теги HTML могут помещаться другие HTML-теги для осуществления воздействия нескольких тегов на один элемент. Это называется вложением, и, чтобы правильно его осуществить, начальный и конечный теги вложенного тега должны обязательно находиться между начальным и конечным тегами внешнего тега.
Результат: Пример вложенного тега.
Часто встречающейся ошибкой является перекрытие тегов.
Структурные теги html.
Тег <html> (<html> … </html>)
Этот тег помещают в начало и конец документа, сообщая браузеру, что весь документ составлен на HTML.
Тег <head> (<head>. </ head >)
Тег <head> определяет заголовок, то есть часть документа, которая содержит информацию о документе. Тег не имеет собственных атрибутов, он используется в качестве контейнера для других тегов заголовка, таких как <base>, <meta> и <title>, т.е. заключаются между тегами <head> и </head>.
Тег <title> определяет название документа, которое появится в верхней строке окна браузера.
Тег <meta> содержит дополнительные сведения о документе. Обычно он используется для добавления ключевых слов, по которым осуществляется поиск в документе, а также для реализации функции автоматического запроса пользователем обновления страниц.
<title>ВолГУ, кафедра «Экономической информатики и управления»: новости</title>
<meta http-equiv=»keywords» content=»системы, проектирование, автоматизированный, system, университет, вуз, кафедра»>
<meta name=»author» content=»julia kritskaya, 2001, kritskaya@alt.ru»>
Тег <body> определяет начало и конец основной части (тела) HTML-документа. В теле документа находится его содержимое (часть документа, которая выводится в окно броузера). Атрибуты этого тега оказывают влияние на весь документ.
У тега <body> есть свои атрибуты:
alink = «#rrggbb» или имя цвета
Задает цвет активной ссылки (то есть цвет ссылки, выбираемой щелчком на ней кнопки мыши).
background = ur1
Задает путь к графическому файлу, который будет использован в качестве фоновой заставки документа.
bgcolor = «#rrggbb» или имя цвета
Задает фоновый цвет документа.
link = «#rrggbb» или имя цвета
Устанавливает цвет по умолчанию для всех ссылок, имеющихся в документе.
text = «#rrggbb” или имя цвета
Устанавливает цвет по умолчанию для всего текста документа.
vlink или имя цвета
Устанавливает цвет посещенных ссылок.
Только Navigator 4.0:
marginwidth = число
Задает расстояние (в пикселах) между левой границей браузера и началом текста и графики, выводимых в окне.
marginheight = число
Задает расстояние (в пикселах) между верхней границей браузера и текстом или графикой, выводимыми в окне.
Только Internet Explorer:
bgproperties = «fixed»
Если задано значение «fixed», то фоновое изображение не прокручивается вместе с содержимым документа.
leftmargin = число
Задает расстояние (в пикселах) между левой границей браузера и началом текста и графики, выводимых в окне.
topmargin = число
Задает расстояние (в пикселах) между верхней границей браузера и верхней границей текста или графики, выводимых в окне.
Для максимальной идентичности отображения в различных браузерах (Navigator 4.0 , Internet Explorer и т.д.) желательно прописывать атрибуты для каждого из них.
Цвет задается именем цвета или шестнадцатеричным RGB-значением (RED – GREEN – BLUER). На каждый цвет отводится 256 значений, обозначающих присутствие того или иного компонента в результирующем цвете.
Что означает термин вложенные теги
Вложенность тегов — это расположение html -тегов внутри родительных, расположение html -тега внутри родительного происходит таким образом, что вложенный (дочерний) тег будет является содержимым внешнего. При этом вложенный тег накладывает свое действие на внешний тег. Например, любые теги, находящиеся внутри тега <body> , определяют содержимое «тела» Web -документа, а тег <strong> , находящийся внутри тега <p> указывает на то, что фрагмент абзаца будет выделен жирным.
HTML – Теги могут вкладываться друг в друга .
При вложение тегов необходимо соблюдать последовательность их открытия и закрытия .
Такой код использовать нельзя:
В HTML название тегов и атрибутов можно писать в любом регистре , а в языке XHTML только нижнем регистре , но лучше писать в нижнем регистре , чтобы был порядок .
Вложенные теги HTML
Если вы посмотрите на разметку HTML для любой веб-страницы сегодня, вы увидите элементы HTML, содержащиеся в других элементах HTML. Эти элементы, которые находятся «внутри» других элементов, известны как вложенные элементы , и они необходимы для создания любой веб-страницы сегодня.
Что значит вкладывать теги HTML?
Самый простой способ понять вложение — это думать о HTML-тегах как о полях, в которых содержится ваш контент. Ваш контент может включать в себя текст, изображения и связанные медиа. HTML-теги — это блоки вокруг содержимого. Иногда вам нужно разместить коробки внутри других коробок. Эти «внутренние» коробки вложены в другие.
Если у вас есть блок текста, который вы хотите выделить внутри абзаца, у вас будет два HTML-элемента, а также сам текст.
Этот текст — то, что мы будем использовать в качестве нашего примера. Вот как это будет написано в HTML:
Чтобы сделать предложение слова жирным, добавьте открывающие и закрывающие теги до и после этого слова.
Как видите, у нас есть один блок (абзац), который содержит содержание предложения, плюс второй блок ( пара сильных тегов), который отображает это слово как жирный.
Когда вы вкладываете теги, закрывайте теги в том порядке, в котором вы их открыли. Сначала вы открываете <p>, а затем <strong>, что означает, что вы изменили его и закрыли </ strong>, а затем </ p>.
Еще один способ думать об этом — снова использовать аналогию с блоками. Если вы поместите коробку в другую коробку, вы должны закрыть внутреннюю, прежде чем сможете закрыть внешнюю или содержащую коробку.
Добавление дополнительных вложенных тегов
Что если вы хотите, чтобы одно или два слова были выделены жирным шрифтом, а другое — курсивом ? Вот как это сделать.
Вы можете видеть, что наш внешний блок <p> теперь содержит два вложенных тега — <strong> и <em>. Они оба должны быть закрыты, прежде чем та коробка, в которой они находятся, может быть закрыта.
В этом случае у нас есть коробки внутри коробок! Самым внешним полем является <div> или деление . Внутри этого поля есть пара вложенных тегов абзаца , а внутри первого абзаца у нас есть следующая пара тегов <strong> и <em>.
Почему вы должны заботиться о вложенности
Главная причина, по которой вы должны заботиться о вложенности, — это если вы собираетесь использовать CSS. Каскадные таблицы стилей полагаются на то, что теги должны быть последовательно вложены в документ, чтобы он мог определить, где начинаются и заканчиваются стили. Неправильное вложение мешает браузеру знать, где применять эти стили. Давайте посмотрим на некоторые HTML:
Используя приведенный выше пример, если мы хотим написать стиль CSS, который будет влиять на ссылку внутри этого раздела, и только на эту ссылку (в отличие от любых других ссылок в других разделах страницы), нам потребуется использовать вложение для записи этот стиль как таковой:
Другие соображения
Доступность и совместимость с браузерами тоже важны. Если ваш HTML-код неправильно вложен, он не будет таким же доступным для программ чтения с экрана и более старых браузеров — и он может даже полностью нарушить визуальный вид страницы, если браузеры не смогут понять, как правильно отобразить страницу, поскольку элементы и теги HTML не на своем месте.
Наконец, если вы хотите написать полностью правильный и правильный HTML, вам нужно использовать правильное вложение. В противном случае каждый валидатор пометит ваш HTML как неправильный.
Name already in use
html-foxford-materials / lessons / html-base.md
- Go to file T
- Go to line L
- Copy path
- Copy permalink
- Open with Desktop
- View raw
- Copy raw contents Copy raw contents
Copy raw contents
Copy raw contents
1.1 Теги и атрибуты
Что такое браузер
Браузер — прикладное программное обеспечение для просмотра веб-страниц. В глобальной сети браузеры используют для запроса, обработки, манипулирования и отображения содержания веб-сайтов.
Браузер может быть:
- Клиентским приложение на вашем компьютере
- Приложением на смартфоне
- Другим приложением, в которое встроен браузер
- Браузер может быть доступен и на других устройствах (Smart TV, часы, компьютер автомобиля, холодильник) Вы сообщаете браузеру что отобразить, для этого указываете ему адрес документа, или URL (Uniform Resource Locator) — единый указатель ресурса
протокол — схема обращения к ресурсу, для веб-страниц, это http или https.
хост — полностью прописанное доменное имя сервера.
путь — уточняющая информация о месте нахождения ресурса, очень похожа на путь в файловой системе.
якорь — идентификатор «якоря», ссылающегося на некоторую часть (раздел) открываемого документа.
Например, адрес страницы программы на которой вы все регистрировались на этот курс http://netology.ru/programs/html-css-base
К URL мы еще вернемся когда будем разбираться со ссылками и изображениями.
Что делает браузер:
- Формирует и отправляет запрос на сервер (HTTP)
- Получает ответ сервера (HTTP)
- Разбирает ответ сервера, документ (HTML)
- Рисует и отображает полученную страницу в окне (HTML и CSS)
- Реагирует на действия пользователя (CSS и JavaScript)
HTML документ, полученный с сервера содержит:
- Текстовая информация;
- Структура документа (заголовки, абзацы и т.д.);
- Ссылки на другие ресурсы (изображения, видео, аудио, стили).
Веб-страницы в первую очередь должны представлять информацию в удобном виде. Давайте подумаем, из чего она состоит. Что мы видим в книгах, журналах, газетах:
- текст разбитый на абзацы
- заголовки разных уровней
- иллюстрации
- цитаты
- акценты по тексту
Их внешний вид может отличаться в различных источниках. Но суть от этого не меняется. Вы с первого взгляда определите заголовок в новой книге. Именно такую информацию браузер должен уметь правильно представлять на экране. И значит нам необходимо сообщить ему что является заголовком, абзацем, где сделать акцента, и когда должны следовать иллюстрация.
Представим что нам нужно изобрести универсальный способ описания документов, по которому браузер сможет их правильно отобразить на экране. Перед нами стоит задача:
- Для создания не должно требоваться сложное программное обеспечение.
- Дать возможность указать браузеру что является заголовком, абзацем, иллюстрацией.
- Процесс создания документа должен быть простым.
- Сам подход должен быть легок в изучении.
Для создания не должно требоваться сложное программное обеспечение — пусть документ будет обычным текстом, тогда для создания потребуется обычный текстовый редактор. Текстовый редактор — блокнот. Текстовый процессор — MS Word.
Дать возможность указать браузеру что является заголовком, абзацем, иллюстрацией — добавим в текст документа простые текстовые метки, по которым браузер поймет где начинается и заканчивается заголовок, абзац, где должны быть иллюстрация, на какой текст сделать акцент.
Процесс создания документа должен быть простым — просто ограничим количество возможных меток, оставив только самое необходимое.
Сам подход должен быть легок в изучении — а это мы проверим по итогам курса К меткам есть дополнительные требования:
- Метка должна быть уникальной и не используются в обычной письменной речи. Поэтому Заголовок — плохой вариант метки, как и символ *.
- Они должны состоять из небольшого числа символов, иначе их набор будет утомителен. Поэтому ТутНачинаетсяЗаголовокОтнынеИВоВекиВеков — плохой вариант метки, хоть и вряд ли встретится в самом тексте.
- По ним должна быть понятна их суть. Поэтому ТНЗ29 — тоже плохой вариант метки, хоть короткий и уникальный
Язык разметки — набор символов или последовательностей, вставляемых в текст для передачи информации о его выводе или строении.
HTML — HyperText Markup Language — «язык гипертекстовой разметки» Cтандартизированный язык разметки документов во Всемирной паутине. HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения.
Просто текст в HTML документа браузер никак не форматирует. Переносы строк заменяет на пробел, а несколько подряд идущих пробелов показывает как один. Для разметки используются специальные метки, которые обозначают начало и конец абзаца, заголовка и все остальные элементы. Чаще всего их называют тегами. Набор тегов ограничен, и у каждого из них своя роль.
Стандарт поддерживается Консорциумом Всемирной паутины W3C. В стандарт как раз входит допустимый набор тегов, их роль, и прочие особенности их использования. Текущая версия стандарта HTML 5.1
Вёрстка веб-страниц — создание структуры html-кода, и описание стилей, размещающие элементы веб-страницы (изображения, текст и т. д.) в окне браузера, согласно разработанному макету, таким образом, чтобы элементы дизайна выглядели аналогично макету.
Теги в HTML заключены в угловые скобки < > Нам привычнее их называть символами меньше и больше. Так как нам нужно обозначать начало и конец элемента, например абзаца, то существует понятие открывающего и закрывающего тега. Тег p — позволяет выделить абзац текста (Paragraph по английски).
Для разметки заголовков предусмотрено 6 тегов, что позволяет нам различать заголовки разного уровня h1-h6 (Heading)
Для разметки блоков цитат, врезок и просто выделенных блоков текста предусмотрен тег blockquote .
Если не закрыть один из тегов, это может привести к ошибке отображения
Цитата может состоять из нескольких абзацев текста. Нам потребуется обозначить их внутри тега цитаты. В HTML можно помещать одни теги внутрь других. Поэтому мы можем текст внутри цитаты так же разметить тегами абзацев:
При этом теги p внутри цитаты будут дочерними для blockquote . А тег blockquote будет родительским для вложенных тегов p Вспомним ошибку которую мы разбирали ранее
Теперь думаю понятно что браузер посчитал что первый тег p и blockquote вложены в h1 . А второй тег p в свою очередь вложен в blockquote Не все теги можно вкладывать в другие теги. Например логика подсказывает что нет смысла вкладывать абзацы или цитаты в заголовок. Но например то что тег blockquote нельзя вкладывать в абзац, уже не так очевидно. Какие теги в какие можно вкладывать, тоже регулируется стандартом. И там все подчинено очень простой логике. Например, блок цитаты может состоять из нескольких абзацев. А абзац не может состоять из нескольких блоков цитат. Для вставки цитаты по тексту есть тег q .
Теги должны быть вложены только целиком. Т.е. нельзя вложить один тег в два других:
Ошибки с нарушением вложенности тегов тоже могут привести к неправильном отображению. Хоть браузеры сейчас достаточно умны, и исправят код, не стоит на это полагаться.
Мы уже знаем что вложенные теги считаются дочерними для того тега в который они вложены. А этот тег будет для них непосредственным родителем.
Если теги вложены в один и тот же тег и идут друг за другом, то такие теги называются соседями.
При этом соседи которые следую раньше — предшественники. А позже — последователи. Ближайший предшественник — предыдущий тег. Ближайший последователь — следующий.
Все теги вложенные в тег, и вложенные во вложенные теги — потомки.
Теги для расстановки акцентов по тексту:
- q — цитата по тексту.
- strong — сделать акцент на слове или фразе, обозначить их важность.
- em — выделить слово.
В эти теги нельзя вкладывать никакие другие
Стандарт не регламентирует как форматировать код. Переносы строк преобразуются в пробелы, несколько пробелов подряд преобразуются в один. Но опыт разработчиков привел к тому, что форматирование кода стало не регламентированным стандартом индустрии. И все это для увеличения скорости работы верстальщика:
- Каждый уровень вложенности обозначается отступом
- Отступ составляет два пробела
- Если у тега нет вложенных, его весь можно записать в одну строку
- Но если строка слишком длинная, то теги нужно разместить отдельно от содержимого
Чтобы сообщить браузеру дополнительную информацию о содержимом тегов или задать специальные свойства используются атрибуты. Атрибуты задаются в открывающем теги
Значение атрибута задается в двойных кавычках “ » после символа = .
Атрибутов может быть несколько, тогда они перечисляются через пробел.
Есть универсальные атрибуты, которые можно указать в любом теге. Например:
- id — позволяет задать тегу универсальный идентификатор, чтобы в дальнейшем ссылаться на него
- class — позволяет задать один или несколько через пробел определенных пользователем классов для дальнейшего управления внешним видом элемента через стили. Так же, у некоторых тегов есть специальные атрибуты, доступные только им. Например у тега blockquote и q есть атрибут cite , который позволяет указать автора или источник цитаты:
С остальными мы познакомимся при изучении тегов.
Гипертекст — текст, «который разветвляется как бы сам по себе или выполняет действия по запросу».
Именно благодаря гипертексту интернет стал таким популярным и таким каким мы его сейчас видим. Так как же нам сделать текст, который разветвляется сам по себе? В HTML для этого предусмотрены ссылки в тексте, которые позволяют по клику перейти на другую страницу, или к другой части текущей страницы. Для того чтобы слово или фразу сделать гиперссылкой, её нужно разметить тегом a:
Чтобы сообщить браузеру куда перенаправить пользователя, укажем информацию об этом в специальном атрибуте href (hyper reference – гиперссылка):
Самый простой способ задать ссылку, использовать так называемый якорь внутри страницы. Мы можем задать уникальный идентификатор любому тегу с помощью атрибута id , и потом сослаться на него из этого же документа добавив к идентификатору символ решетки # в начале. Браузер прокрутит страницу так, чтобы содержимого этого тега оказалась видно в окне. Это удобно для больших документов или для создания оглавлений. Для того чтобы ссылаться на другие документы, нам нужно изучить что такое URL.
Адрес, который содержат протокол и хост и может содержать дополнительно путь и якорь, называется абсолютным.
http://netology.ru/programs/html-css-base Адрес без указания протокала и хоста, является абсолютным относительно сервера. При переходе по такой ссылке будет использован протокол и хост открытой страницы: /programs/html-css-base Если эта ссылка на странице http://netology.ru/development/programs то при переходе мы попадем на страницу http://netology.ru/programs/html-css-base А если на странице http://www.ruscircus.ru/study/pc.shtml то при переходе мы попадем на страницу http://www.ruscircus.ru/programs/html-css-base Адрес без протокола, хоста и ведущего слеша / называется относительным. И при его расчете учитывается не только протокол и хост страницы но и ее адрес. Принцип тот же что и при перемещении по файлам и папка на компьютере: programs/html-css-base Если открыть на странице http://netology.ru/ то перейдем на страницу http://netology.ru/programs/html-css-base Если на странице http://netology.ru/development/programs то перейдем на страницу http://netology.ru/development/programs/html-css-base А если на странице http://netology.ru/development/programs/ то перейдем на страницу http://netology.ru/development/programs/programs/html-css-base Особый случай пути . и .. . — текущая папка .. — родительская папка
Добавим ссылку на курс в тексте
В тег a так же как и в теги q , strong и em нельзя вкладывать другие теги. Если вы хотите сделать заголовок ссылкой, вложите в него тег а
Для ссылки можно задать подсказку в атрибуте title , которая покажется при наведении указателя мыши на ссылку:
Для вставки картинки в документ используется тег img . Этот тег не имеет содержимого и закрывающего тега. Это так называемый одиночный тег. URL файла с изображением указывается в специальном атрибуте src :
После загрузки картинки браузер определит её размер в пикселях и отобразит в полный размер в указанном месте.
Хотя размером изображения можно управлять с помощью стилей, рекомендую готовить изображения нужного размера, так как размер напрямую влияет на вес файла, а значит и на скорость передачи по сети.
Если картинка не загрузится по каким-либо причинам, можно указать альтернативный текст, который браузер отобразит вместо картинки в этом случае. Там можно написать о том что изображено на картинке. Для этого есть специальный атрибут alt :
Если картинку вставить в тексте, то она будет вести себя как символ, но в полный размер. И в 99% случаев вы получите не то что ожидали. Такой вариант удобен для вставки символьных изображений, таких как emodji. В остальных случаях помещайте картинку за пределами параграфа.