для чего нужен тег body

Атрибуты тега BODY

Е сли в каком-либо месте html-документа нужно отобразить текст, фон или другой элемент иначе, то это нужно прописывать в значениях атрибутов соответствующего тега. Т.е. значения тега BODY являются общими для всех элементов документа. И для изменения оформления какого-то одного достаточно указать это в его атрибутах.

Я пока не рассматриваю каскадные таблицы стилей (CSS), с помощью которых также можно задать отображение html-страницы. Кроме того, в этом разделе я не буду рассказывать об абсолютно всех атрибутах тега BODY. Я расскажу только об основных.

И так, наиболее часто используемые атрибуты тега BODY:

bgcolor — цвет фона html-страницы. По-умолчанию, браузер заполняет фон сплошным цветом (в настройках по дефолту — белым) или в зависимости от настроек пользователя этого браузера. Допустим, если вам нужен html-документ с чёрным фоном, то нужно написать так:

Добрый! Классный сайт у вас.правда я только про тег body прочитала. Надо будет попробовать замутить страничку)
Целый день читала про енто дело, а тут еду с работы и натыкаюсь на этот сайт. Очень доступно написано
Это я как истинный чайник говорю.
Спасибо что создали такое

З десь нужно коротко сказать о способах представления цвета в HTML. Цвета в HTML можно задать либо именем цвета из предопределенного списка, либо шестнадцатеричным (hex) значением выбранного цвета. В предопределенном списке содержится 140 цветов и все они соответствуют так называемой Web-палитре. Использование цветов из этой палитры гарантирует их одинаковое воспроизведение всеми браузерами.

С писок цветов из Web-палитры ты найдёшь на странице Приложения. Там же ты найдёшь и шестнадцетиричные (hex) значения этих цветов (при использовании шестнадцетиричных (hex) значений перед числом нужно ставить символ #). В hex-значении цвета используется модель RGB: первые две цифры задают яркость красной (Red), вторые две цифры — зелёной (Green), а последние две цифры — синей (Blue) составляющей цвета.

Д ля того, чтобы использовать цвета, не входящие в Web-палитру, нужно знать их hex-значение. Я для этого использую программу, которую можно взять с моего сайта: ColorT Final.

С представлением цвета в HTML разобрались, теперь продолжим разговор об атрибутах тега BODY.

Е сли html-страница и картинка logo.jpg находятся в одном каталоге (папке), то можно записать так:

Е сли logo.jpg находится в подкаталоге images каталога с html-страницей (т.е. в папке images, которая находится в каталоге с html-страницей), то можно записать так:

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

text — устанавливает цвет текста html-документа. Например, сделаем текст зелёным:

С ледующие атрибуты относятся к представлению вида ссылок на странице:

link — цвет ещё неиспользованной (непросмотренной) ссылки (по умолчанию синий).

vlink — цвет уже использованной (просмотренной) ссылки.

alink — цвет гиперссылок при наведении на них курсора мыши.

Д опустим, нам нужно, чтобы цвет ещё неиспользованных ссылок был красным (#FF0000), а уже нажатых — синим (#0000FF). Сделать это можно так:

Д а, я думаю, ты уже заметил, что атрибут в теге (не только BODY, но и в любом другом) может быть как один, так и несколько сразу. А может и ни одного, в этом случае браузер будет использовать настройки по-умолчанию. В следующем примере мы создадим html-страницу с чёрным фоном, зелёным текстом, неиспользованные ссылки — красные, а посещённые — синие. Весь этот ужас можно создать так:

Н абери этот html-код в любом текстовом редакторе или визуальном. Набирай весь код вручную. Между тегами и вставь текст, какой захочёшь, сохрани этот файл под любым именем (латинскими буквами или цифрами), но обязательно с расширением html (т. е., например, primer.html). А затем открой его в браузере и наслаждайся открывшейся тебе авангардистской картиной.

Примечание. Не забывай — я ставлю после скобки НЕ НАДО.

П омимо собственных атрибутов (атрибуты, которые используются только в этом теге) в теге BODY можно применять атрибуты и других тегов (их можно употреблять в разных тегах, они общие для них всех). О них ты узнаешь в следующих частях этого раздела. Пока же настоятельно рекомендую поэкспериментировать с полученными знаниями. Только на практике ты увидишь результаты этих знаний и поймёшь, как это работает. И только поняв и запомнив, как атрибуты тега BODY используются при создании html-страницы, переходи к следующей главе, в которой мы поговорим о форматировании текста в HTML.

Поделиться ссылкой на эту страницу в:

Источник

Тег body в HTML

Редко какая веб-страница создаётся не для распространения контента. Именно внутри тега должен располагаться весь тот контент, что мы хотим показать на странице. Это и текст, и изображения, и скрипты, и многое другое. Сегодня разберём этот очень важный для HTML-документа тег.

Хотя тег считается своего рода стандартом, его наличие в HTML-документе не является обязательным. С другой стороны, выделение основной части HTML-документа является «хорошим тоном».

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

alink — устанавливает цвет активной ссылки. Текущий цвет меняется, когда на ссылку нажимают курсором мыши или выделяют её при помощи клавиатуры. Цвет можно задать с помощью шестнадцатеричного кода или по названию цвета, если речь идёт о самых распространённых цветах.

background — задаёт фоновый рисунок для веб-страницы. Для фонового рисунка не устанавливаются ширина и высота, он всегда отображается в масштабе 100%. Если рисунок по размеру меньше окна браузера, то картинка повторяется как мозаика. В качестве фона допускается использовать анимированные изображения в формате GIF, но это считается «плохим тоном» из-за того, что они отвлекают внимание посетителей сайта.

bottommargin — определяет размер отступа от нижнего края браузера до контента веб-страницы. Значением может быть целое положительное число, которое задаёт отступ в пикселях.

leftmargin — определяет размер отступа от левого края браузера до контента веб-страницы. Значением может быть целое положительное число, которое задаёт отступ в пикселях.

link — устанавливает цвет непосещённых ссылок. Цвет можно задать с помощью шестнадцатеричного кода или по названию цвета, если речь идёт о самых распространённых цветах.

rightmargin — определяет размер отступа от правого края браузера до контента веб-страницы. Значением может быть целое положительное число, которое задаёт отступ в пикселях.

text — устанавливает цвет текста, используемый на веб-странице по умолчанию. Цвет можно задать с помощью шестнадцатеричного кода или по названию цвета, если речь идёт о самых распространённых цветах. Цвета отдельных элементов можно изменять с помощью стилей.

topmargin — определяет размер отступа от верхнего края браузера до контента веб-страницы. Значением может быть целое положительное число, которое задаёт отступ в пикселях.

vlink — задаёт цвет посещённых ссылок. Цвет можно задать с помощью шестнадцатеричного кода или по названию цвета, если речь идёт о самых распространённых цветах.

Источник

Структура HTML документа: html, head, body, title

От автора

Здравствуйте! В этом уроке вы НЕ найдете для себя ничего полезного, если УЖЕ знакомы с формированием структуры HTML документа. Для тех, кто НЕ знаком, я покажу правильную (валидную) структуру HTML веб-документа, в том числе для сайта WordPress.

Общая правильная структура HTML документа

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

Структура HTML документа

Если убрать пояснения, которые я показывал после каждого тега, то простая структура HTML документа выглядит так

Тип текущего документа DTD

Тип текущего документа (Document Type Definition, DTD) необходим, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь язык HTML существует в нескольких версиях.

Кроме этого есть другие языки разметки отличные от HTML, например XHTML.

Примечание: XHTML это EXtensible HyperText Markup Language, что переводим, как расширенный язык разметки гипертекста.

Понятие тега в HTML

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

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

Теги заголовков и подзаголовков h1-h6

Теги h1–h6 имеют подчиненную зависимость, нижний уровень этой подчинённости абзац.

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

Пример развитой структуры HTML документа

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

Структура HTML 5

В версии HTML 5 должна быть такая структура документа:

Это декларация показывает, что этот документ в HTML5 ;

это корневой элемент HTML страницы;

Элемент, с мета-тегами о документе;

Этот элемент определяет заголовок для документа;

Этот элемент содержит видимое содержимое страницы;

Элемент определяет большой заголовок

Элемент определяет абзац.

Работают в html5 теги h2 – h6

Все теги двойные. Начальный тег называется открывающим тегом, а конечный тег – закрывающим тегом.

HTML разметка на сайте WordPress

Несмотря на то, что скрипт WordPress написан на php, все файлы сайта, а вернее все файлы рабочего шаблона сайта, имеют html разметку. Смотрим пример, на файле header.php шаблона Twenty Seventeen:

Вы можете видеть, что если все функции WordPress размещены в классической HTML разметке. Есть тип документа:

Как посмотреть HTML код страницы сайта WordPress

То, что вы пишите в редакторе сайта, создавая статьи или страницы, это лишь часть HTML страницы сайта. Это даже не всё тело body страницы.

Чтобы посмотреть HTML код страницы сайта WordPress, а это нужно очень часто, нужно:

Открыть страницу в браузере;

Перейти в английский шрифт клавиатуры;

Нажать следующие кнопки:

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

Вывод

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

В статье использованы инструменты обучения HTML : Tryit Editor v3.5

Источник

История HTML

Теги и атрибуты

Практика

Терминология

Браузеры

Программы

Полезные ссылки

Полезные советы

Библиотека

Ваш cправочник по HTML.

:.Главная страница :.Контакты
Таблица безопасных цветов Спецсимволы
	. Пример: Возможные атрибуты тега: Тег: [контейнерный] Создаёт строку в таблице. Допустимые атрибуты: «left» — выравнивание по левому краю. «center» — выравнивание по центру. «right» — выравнивание по правому краю. «justify» — выравнивание теста на всю строчку. «top» — выравнивание по верхнему краю. «middle» — выравнивание по центру. «bottom» — выравнивание по нижнему краю. Тег: [контейнерный] Тег: [контейнерный] Определяет заголовок таблицы. Нормальная ячейка с отцентрованным жирным текстом. Тег: [одиночный] Переносит текст на новую строку. Запрещает перевод строки. Тег: [контейнерный] Тег: [контейнерный] Тег: [контейнерный] Тег: [контейнерный] Тег: [контейнерный] Наклонный текст (воспринимается посковыми роботами как выделение). Тег: [контейнерный] Жирный текст (воспринимается посковыми роботами, как особо сильное выделение). Добавляет в HTML документ горизонтальную линию. Возможные атрибуты: Создает линию без тени. Устанавливает высоту (толщину) линии. Устанавливает ширину линии. Задаёт горизонтальное выравнивание в таблице. Задает линии определенный цвет. Тег: [контейнерный] Задаёт в тексте нижний индекс. Пример: Н 2 O [H2O]. Используется для форматирования текста. Не действует без атрибутов. Возможные атрибуты: Указывает шрифт. Устанавливает размер текста. От 1 до 7. Задает тексту определенный цвет. Тег: [контейнерный] Создает гиперссылку на другие сайты. Возможные атрибуты: Тег: [контейнерный] «disk» — маркер в виде закрашенного кружка. «circle» — маркер в виде кружка. «square» — маркер в виде закрашенного крадрата. Тег: [контейнерный] Отображает примеры кода. Текст, заключённый в скобки. Обрамляет предварительно отформатированный текст. Тег: [контейнерный] Отображается курсивом в виде отдельного абзаца. Запрещает перевод строки. Создает отступы с обеих сторон текста. Бегущая строка. Возможные атрибуты: Источник HTML против Body в CSS Дата публикации: 2015-06-02 От автора: разницу между тегами html и body очень легко не заметить. Кажется, что этот момент относится к тривиальным вещам. Должен признаться, что у меня была очень плохая привычка применять все глобальные стили к тегу body, а когда этого было недостаточно, то я, не задумываясь, переключался на тег html. Однако, различия между этими тегами все-таки есть. И хорошая идея заключается в том, что неплохо было бы о них знать, независимо от того, как долго вы пишите CSS. В этой статье мы рассмотрим данные различия и практические примеры, в которых применение стилей к одному элементу вместо другого может оказаться более правильным решением. Как элементы HTML и body связаны друг с другом Давайте рассмотрим стандартную структуру базового HTML документа: Практический курс по верстке адаптивного сайта с нуля! Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3 В спецификации html определяется как корневой элемент документа, и мы можем это четко видеть из вышеприведенного примера: элемент html находится на самом верхнем уровне по сравнению с другими элементами. Выше подниматься уже некуда, т.е. это самый первый элемент, от которого могут наследоваться стили. Далее, прямо после тега html, идут только два элемента: head и body. Фактически, в спецификации body прямо противопоставлен элементу head, поскольку имеются всего лишь два элемента, которые требуется различать на данном уровне. Итак, получается, что html – это корневой элемент документа, в котором содержится элемент body, являющийся его потомком. В CSS даже есть селектор :root. Следующие два селектора являются равнозначными: За исключением того, что селектор :root обладает более высокой специфичностью: (0, 0, 1, 0) против (0, 0, 0, 1). Поэтому нам следует всегда задавать глобальные стили для html, правильно? Очень заманчиво предполагать, что любые стили, которые должны быть унаследованы на протяжении всего документа, следует задавать прямо для html, потому что это корневой элемент документа. Элемент html превосходит элемент body по иерархии, поэтому было бы логично, чтобы именно для него задавались все глобальные стили. Но на деле выходит не совсем так. На самом деле, следующие инлайн атрибуты были изначально присвоены в спецификации элементу body: В настоящее время данные атрибуты считаются устаревшими, и рекомендуется использовать аналогичные им CSS свойства (слева — Инлайн Атрибут, справа — его аналог CSS Свойство): Практический курс по верстке адаптивного сайта с нуля! Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3 bgcolor — background, background-color Учитывая то, что данные CSS свойства произошли из инлайн атрибутов, которые были созданы для элемента body, было бы логично применять их в CSS прямо для body, а не для html. Поэтому нам следует всегда задавать глобальные стили для body, правильно? Что ж, не совсем так. Есть ситуации, в которых было бы правильнее применять данные стилевые свойства к элементу html. Давайте рассмотрим пару таких ситуаций. Работа с единицами измерения rem Единица измерения rem является относительной по отношению к корню документа. Например, когда мы пишем что-то наподобие этого: У Джонатана Снука (Jonathan Snook) есть классическая статья, которая замечательно демонстрируется, как установка значения свойства font-size для html в процентах может быть использована в качестве сброса стилей при работе с единицей измерения rem. Причудливое свойство background-color Есть одна странная вещь в CSS, когда заданный фоновый цвет (с помощью свойства background-color) для элемента body заполняет всю область просмотра, даже если размеры самого элемента при этом меньше. Так происходит до тех пор, пока свойство background-color не будет задано для элемента html. Если нужно, чтобы фоновый цвет заливал всю область просмотра, то лучше всего сразу задать его для элемента html. Заключение Я надеюсь, что это пролило немного света на ключевые различия между тегами html и body в CSS. Существуют также различия и в JavaScript. Например, вам не нужен селектор для данных элементов, чтобы найти их, т.к. в JavaScript html – это document.rootElement, а body – document.body. Мы, конечно, можем описать более технические различия между этими двумя элементами, но цель этой статьи была в том, чтобы повысить наш уровень понимания сути этих элементов для принятия более осознанных решений при написании CSS. Есть ли у вас примеры того, где стоит вместо одного элемента использовать другой? Или, возможно, у вас есть другие критерии выбора элемента для стилизации. Напишите об этом в комментариях! Автор: Geoff Graham Редакция: Команда webformyself. Практический курс по верстке адаптивного сайта с нуля! Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3 Источник ← для чего нужен театральный кружок для чего нужен тег form → Вам также понравится Щекочет в горле и вызывает кашель что это такое 12.06.202313.06.2023 admin 0 если нашли птенца что с ним делать 20.05.202322.05.2023 admin 0 для чего нужен confluence 19.05.202320.05.2023 admin 0 Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Атрибуты Теги bgcolor text link vlink alink align valign color border Одиночные теги менее распространены и состоят лишь из открывающего тега. Пример: . Теги и атрибуты Тег: [контейнерный] Создаёт таблицу. Обязательные теги: ,