Элемент
(от англ. body - тело) предназначен для хранения содержимого веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера . К такой информации относится текст, изображения, теги, скрипты JavaScript и т. д. также применяется для определения цветов ссылок и текста на веб-странице. Подобная практика в HTML осуждается и взамен для указания цветовой схемы рекомендуется использовать стили, применяя их к селектору body .Часто
используется для размещения обработчика событий, например, onload , которое выполняется после того, как документ завершил загрузку в текущее окно или фрейм.Открывающий и закрывающий теги
на веб-странице не являются обязательными, однако хорошим стилем считается их использование, чтобы определить начало и конец HTML-документа.Синтаксис
...Закрывающий тег
Не обязателен.
Атрибуты
Пример
Еще Аристотель в своей «Политике» говорил, что музыка, воздействуя на человека, доставляет «своего рода очищение, то есть облегчение, связанное с наслаждением».
Результат текущего примера показан на рис. 1. При использовании события onload элемента
выполняется скрипт, написанный на языке JavaScript, в данном случае он выводит сообщение, что документ загружен.Рис. 1. Всплывающее окно в документе
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации ) - первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living ) - он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
Тег (парный ) предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера BODY. К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.
Тег также применяется для определения цветов ссылок и текста на веб-странице. Подобная практика в HTML 4 осуждается и взамен для указания цветовой схемы рекомендуется использовать стили, применяя их к селектору . Тем не менее, большинство параметров до сих пор поддерживается разными браузерами.
Часто тег используется для размещения обработчика событий, например, onLoad, которое выполняется после того, как документ завершил загрузку в текущее окно или фрейм.
Открывающий и закрывающий теги BODY на веб-странице не являются обязательными, однако хорошим стилем считается их использование, чтобы определить начало и конец HTML-документа.
Синтаксис
...
Закрывающий тег
Обязателен.
Параметры
alink
- устанавливает цвет активной ссылки.
background
- задает фоновый рисунок на веб-странице.
bgcolor
- цвет фона веб-страницы.
bgproperties
- определяет, прокручивать фон совместно с текстом или нет.
bottommargin
- отступ от нижнего края окна браузера до контента.
leftmargin
- отступ по горизонтали от края окна браузера до контента.
link
- цвет ссылок.
scroll
- устанавливает, отображать полосы прокрутки или нет.
text
- цвет текста в документе.
topmargin
- отступ от верхнего края окна браузера до контента.
vlink
- цвет посещенных ссылок.
Пример 1. Использование тега BODY
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Описание параметров тега BODY
Параметр ALINK
Описание
Устанавливает цвет активной ссылки. Текущий цвет ссылки меняется на активный, когда на ссылку нажимают курсором мыши или выделяют ее с помощью клавиатуры.
Синтаксис
Аргументы
Значение цвета можно задавать двумя способами.
1. По его названию
Браузеры поддерживают некоторые цвета по их названию.
2. По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов - красный, зеленый и синий - может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних - зеленую, а два последних - синюю.
Значение по умолчанию
Совпадает с цветом ссылки.
...
Параметр BACKGROUND
Описание
Определяет изображение, которое будет использоваться в качестве фонового рисунка. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше окна браузера, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный контраст между ним и текстом веб-страницы. В качестве фона допускается использовать анимированные изображения в формате GIF, но они отвлекают внимание читателей.
Синтаксис
Аргументы
Любой допустимый адрес изображения - можно использовать относительный или абсолютный путь.
Значение по умолчанию
Нет.
Пример 3. Установка фонового рисунка на веб-странице
...
Параметр BGCOLOR
Описание
Устанавливает цвет фона веб-страницы. Можно использовать этот параметр совместно с background, подобрав цвет фона близкий к фоновому рисунку
Синтаксис
Аргументы
См. параметр ALINK.
Значение по умолчанию
Зависит от браузера и его версии, но обычно используется белый цвет фона.
Пример 4. Установка цвета фона веб-страницы
...
Параметр BGPROPERTIES
Описание
По умолчанию фоновый рисунок прокручивается совместно с содержанием веб-страницы. Используя параметр bgproperties можно зафиксировать фон на одном месте и, таким образом, заставить прокручиваться только контент. Подобное качество веб-страницы редко применяется для сайтов, поэтому для пользователей может показаться странным и непривычным.
Синтаксис
Аргументы
Существует только один параметр fixed, который фиксирует фон. Если требуется убрать эту возможность, удалите параметр bgproperties у тега BODY или установите у него пустое значение - "".
Значение по умолчанию
Нет.
Пример 5. Фиксирование фона
...
Примечание
- Не все браузеры поддерживают этот параметр, например, Netscape его игнорирует.
- Замечено, что при установке фонового рисунка на веб-странице через стили, параметр bgproperies перестает работать.
Параметр LEFTMARGIN
Описание
Определяет отступ от левого и правого края окна браузера до контента веб-страницы.
Синтаксис
Аргументы
Целое положительное число, которое устанавливает отступ в пикселях.
Значение по умолчанию
10 пикселов для Windows и 8 пикселов для Macintosh.
Пример 6. Изменение отступа слева
...
Примечание
- Браузер Netscape не понимает параметр leftmargin, для установки отступов в нем используются параметры marginwidth - отступы по горизонтали и marginheight - отступы по вертикали.
- Для задания отступов от правого, нижнего и верхнего края применяются, соответственно, параметры rightmargin, bottommargin и topmargin.
Параметр LINK
Описание
Устанавливает цвет не посещенных ссылок.
Синтаксис
Аргументы
См. параметр ALINK.
Значение по умолчанию
#0000FF
Пример 7. Установка цвета ссылок
...
Параметр SCROLL
Описание
Параметр scroll управляет присутствием полос прокрутки в окне браузера, когда содержание веб-страницы превышает размер текущего окна. Этот параметр работает только в браузере Internet Explorer.
Синтаксис
Аргументы
yes - отображает полосы прокрутки.
no - запрещает показ полос прокрутки в окне.
Значение по умолчанию
yes
Пример 8. Сокрытие полосы прокрутки
...
Параметр TEXT
Описание
Устанавливает цвет текста, используемого на веб-странице по умолчанию. Цвета отдельных элементов можно легко изменять с помощью стилей.
Синтаксис
Аргументы
См. параметр ALINK.
Значение по умолчанию
#000000
Пример 9. Изменение цвета текста
...
Параметр VLINK
Описание
Определяет цвет посещенных ссылок, т.е., таких ссылок, на которые пользователь уже «нажимал».
Синтаксис
Аргументы
См. параметр ALINK.
Значение по умолчанию
#551a8b (Navigator 4); #800080 (Internet Explorer Windows); #006010 (Internet Explorer Macintosh).
Пример 10. Установка цвета посещенных ссылок
...
Цвет текста
Цвет фона
Фоновое изображение
Цвет ссылок
Отступы вокруг контента
Упражнение
Как Вам уже известно, между открывающим тегом и закрывающим тегом помещается тело страницы или само содержимое страницы. Его еще называют словом контент (от англ. content - содержимое). Параметры тега определяют свойства контента в целом. В этом уроке мы и рассмотрим некоторые из них.
Цвет текста
Цвет текста всего документа определяется параметром text . Ему присваивается либо название цвета, либо шестнадцатеричное значение цвета, как и параметру color тега (см. Урок 2. Форматирование теста):
илиВ результате использования этого примера весь текст на странице будет красным.
Параметр text не является обязательным. Если его опустить, то текст на странице по умолчанию будет черным. Вы, наверное, уже успели в этом убедиться, выполняя предыдущие упражнения. :)
Цвет фона
Цвет фона страницы определяется параметром bgcolor . Он принимает значениями либо название цвета, либо шестнадцатеричное значение цвета, как и параметр text .
илиВ результате использования этого примера фон страницы будет красным.
Параметр bgcolor не является обязательным. Если его опустить, то фон страницы по умолчанию будет белым. В чем Вы тоже уже убедились, выполняя предыдущие упражнения. :)
Фоновое изображение
С помощью параметра background можно сделать, чтобы у странички был не однотонный фон, а фоном было бы изображение. Для этого параметру background надо присвоить путь к изображению, которое Вы хотите сделать фоновым, так же как параметру src тега (См. Урок 5. Изображения):
Таким способом можно, например, замостить фон странички каким-нибудь узором. Но не стоит злоупотреблять этой возможностью и делать фоном большие изображения, чтобы слишком не утяжелять страницу.
Например, ну нас есть вот такой фрагмент узора:
Если мы сделаем его фоновым изображением, получится страничка с таким фоном:
Параметр background также не является обязательным. Если его опустить, то фон страницы по умолчанию будет белым.
Цвет ссылок
Для задания цвета ссылок существуют 3 параметра тега body :
Этим параметрам присваивается название цвета или его шестнадцатеричное значение аналогично другим параметрам, отвечающим за цвет чего-либо.
Вот как это будет выглядеть на странице (чтобы увидеть все состояния ссылки, запомните, какой она была изначально, нажмите и, не отпуская, посмотрите, какой она стала, и, наконец, отпустите, вернитесь на эту страницу, и посмотрите, какого она цвета):
Эти параметры не обязательные. Если их опустить, то цвета ссылок примут значения по умолчанию (синий, красный, фиолетовый соответственно).
Отступы вокруг контента
Если Вы хотите, чтобы содержимое страницы отступало от краев окна браузера на некоторую величину, на этот случай у тега body есть 4 параметра:
leftmargin - отступ от левого края;
rightmargin - отступ от правого края;
topmargin - отступ от верхнего края;
bottommargin - отступ от нижнего края.
Эти параметры принимают значение в пикселах. Они не обязательные, и можно использавать как все сразу так и поотдельности. Например, можно сделать отступы только слева и справа, или только сверху и снизу и т.д.:
илиЗдравствуйте, ребята!
Сегодня решил затронуть тему, которая никогда не перестанет быть актуальной среди молодых создателей сайтов.
Всегда существует необходимость настраивать сайты после их создания. Часть настроек выполняется через редактирование файлов установленного шаблона темы оформления. Например, нужно вставить код, выводящий похоже записи. Но куда его вставить?
Очень часто новички задают такие вопросы. Также их волнуют и другие подобные моменты, решение которых по сути, является точно таким же. К тому же, в своих будущих статьях я часто буду прибегать к вставке кодов в различные места шаблона. Поэтому, данный материал кстати, как никогда.
В данной статье я покажу, как вам очень просто определить место в вашем шаблоне WordPress, куда вам необходимо вставить любой код. Также рассмотрю другие важные моменты, которые могут волновать вас на начальном этапе.
Давайте начнем с самого верха и рассмотрим файлы, которые вам может придется редактировать, если вы захотите вставлять коды ручками, а не с помощью плагинов, ведь существует и такой вариант. Его я не приветствую, но все же для самых лентяев я опишу такие плагины в следующих статьях.
В самом начале даю видео-урок, так как без него будет сложно понять материал, изложенный в текстовом формате ниже.
Теперь объясню все подробно в текстовом формате.
Файлы, отвечающие за вывод каждого типа страниц
Если вы читали много статей на других блогах о реализации каких-то функций с помощью кодов (скриптов), то уверен на все 100%, что видели фразы наподобие:
- Вставляете этот код в файл, отвечающий за вывод главной страницы;
- Вставляете этот код в файл, отвечающий за вывод записей и другие.
Файлов, в которые может потребоваться вставлять коды, много. Но, что это за файлы? Все очень просто.
- Вывод главной страницы - index.php;
- Вывод записей - файл single.php;
- Вывод страниц - файл page.php;
- Вывод архивов и рубрик - archive.php;
- Вывод подвала - footer.php;
- Вывод страницы поиска - search.php;
- Вывод сайдбара - sidebar.php;
- Файл стилей - style.css;
- Файл вывода страницы 404 - 404.php.
Теперь, когда вам будут говорить, что нужно вставить код в такой-то файл, вы будете знать, куда необходимо смотреть.
Осталось лишь ответить на вопрос, как же определить нужное место в каждом из файлов?
Определяем место вставки кода
Сначала пройдемся по тем местам, которые определять не нужно. Они у всех будут одинаковы вне зависимости от шаблона.
Первое место, идентичное для всех шаблонов - область в файле Header.php. Это открывающий и закрывающий теги
.Между данными тегами всегда размещают какие-то скрипты, которые должны работать для всех страниц сайта. То есть разместили между данными тегами скрипт, например, социальных кнопок и они работают на всех страницах сайта, где мы сделаем их вывод.
Данные теги размещены в самом верху файла Header.php.
Содержимое, находящееся между ними, у всех будет отличаться, так как все зависит от шаблона.
Если вам говорят, что нужно вставить данный код между открывающим и закрывающим тегами head, то копируете код, ищите подобную область в своем файле шаблона и просто вставляете его между этими тегами.
Второе место, которое также идентично для всех шаблонов, находится в файле, отвечающем за вывод подвала - footer.php.
Скрипты можно подключать не только, вставив их между тегами
в файле Header.php. Можно также их подгрузить через файл footer.php, тем самым ускорив загрузку страницы сайта.Дело в том, что когда страница начинается загружаться, то она грузится сверху вниз. Если все скрипты будут находиться вверху страницы, то отображение ее содержимого замедлится, так как потребуется время на загрузку скриптов.
Наша задача - показать содержимое страницы, как можно быстрее, как посетителям, так и поисковым системам. В этом случае целесообразно сделать загрузку скриптов в самом конце страницы, чтобы сначала показать содержимое, а затем уже загрузить и все остальное.
Чтобы реализовать такой вариант, необходимо открыть файл footer.php и вставить скрипт перед закрывающимся тегом body. Находится он в конце содержимого файла, так как отвечает за окончание области страницы.
Как видим, все скрипты я вывел именно в данной области, перед закрывающим тегом (выделил синей рамкой). Кстати, вывел их я через загрузку из файлов, а не размещением самих скриптов в данной области. После этого я значительно ускорил работу блога. Как это сделать, будет отдельная статья. Ждите!
Надеюсь, что когда вам будут говорить вставить код в эти области, вы без проблем все сделаете.
Перейдем к более сложному вопросу и постараемся научиться определять места в других файлах шаблона, в котороые вставляются различные другие коды. Как правило, к таким кодам относятся:
- Вывод похожих записей;
- Вывод формы подписки;
- Вывод социальных кнопок и так далее.
Все эти вещи вставляются после основной части контента, то есть после окончания статьи. У каждого разный код шаблона и, поэтому, универсального ответа на вопрос "Где у меня заканчивается код вывода статьи?" просто нет.
Но можно запросто определить конец кода, после которого необходимо реализовать нужную вам функцию. Частично данный метод я уже показывал в статье про выбор WordPress шаблона (). Использовал я тогда стандартный функционал интернет браузера.
Чтобы лучше понять всю суть данного метода, настоятельно рекомендую посмотреть видео в начале этого поста. В нем я показал, как все происходит в реальном времени. Ну а сейчас постараюсь описать, как можно понятней.
Покажу на примере браузера Google Chrome. В других браузерах данная функция также имеется, то может немного по другому называться.
- Google Chrome - просмотр кода элемента;
- Firefox - исследовать элемент;
- Opera - проинспектировать элемент.
Принцип в 3х браузерах аналогичен. Теперь покажу, как определяется место вывода любой области в любом шаблоне.
Переходим в просмотр кода элемента (Google Chrome). Жмем правой кнопкой мыши по пустой области страницы.
После этого внизу страницы появляется панель, в которой показывается весь исходный код страницы, который мы можем редактировать и смотреть, как будет меняться структура и внешний вид шаблона в реальном времени. Но изменения данные не сохраняются. Для этого нужно редактировать сами файлы шаблона.
Вот, как выглядит эта панель.
Стрелкой я показал на лупу (увеличительное стекло), нажав на которое мы можем инспектировать структуру шаблона и определить из каких блоков состоит наш шаблон. Данную функцию я называю инспектором.
После нажатия на инспектор, мы можем водить мышкой по нашей странице и будем видеть, что все элементы, на которые мы наводим, начинают подсвечиваться цветным фоном. В пример покажу скриншот из статьи про выбор шаблона. Там я навел на заголовок записи.
Если нам необходимо вставить код после вывода нашей статьи, то не составит труда догадаться, что нужно проинспектировать область нашего шаблона и найти блок, в котором содержится все содержимое статьи. Можно искать, как конец блока, так и начало. То есть можно инспектировать шаблон и снизу и сверху.
Но тут одно замечание . Нам необходимо находить не просто строчки статьи, а именно блоки, в которых находится сам контент, так как в файлах шаблона статей нет. Там имеется только код, выводящий контент, и заключен он в блоки. Именно после закрывающего блочного тега