Как на сайте найти body - Исправление недочетов и поиск решений вместе с Examum.ru

Очень странно что

document.getElementsByTagName('body')

не работает

на крайняк можно тегу body прописать id

<body id='body'></body>
document.getElementsById('body')

Если

document.body.onload = function() {...}

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

<body id='body' onload="onload()"></body>

P.S.
Все это костыли. Может быть вам вовсе и не нужно это событие, может вы пытаетесь выполнить код на доме пока еще дом не загружен? На онлоад можно определить какие ни будь переменные, пошаманить над окном браузера но не жеательно обращаться к элементам документа до того как они уже закончат загружаться.

Вот тут привели не мало решений:
stackoverflow — How to detect if document has loaded (IE 7/Firefox 3)

Источник

Нужно вставить код <script type=»text/javascript» src=»http://userclick.su/getJS»></script> желательно ближе или перед /body Не могу найти место, где это. Вопрос задаю не праздно, определенную работу по поиску провела. Смотрела и в корневой папке и в редакторе админки (там есть body-class, но закрывающего /body не вижу. Заранее благодарна за помощь.

3 ответа

популярные
новые

1

WordPress???? Вы часом не ошиблись форумом?

Для Webasyst Shop-Script смотрите — Витрина -> Шаблоны -> Ваша тема дизайна -> index.html

Для других приложений — соответственно тоже в разделах дизайна в файле index.html

</body> — предпоследняя строчка в файле перед терминатором </html>
- 0
  
  Уважаемый Михаил Морозов! Где находится </body> в структуре html я знаю. О чем тут спрашивать? А спрашиваю конкретно: как мне найти место, отмеченное тегами <body></body> в системе php, в каком файле? ведь движок Вордпресс написан на php. Насчет того, что «часом не ошиблись форумом». Не ошиблась, хотя, возможно, и не совсем по теме. В старом интерфейсе Webasyst задавался вопрос, почти как у меня и был получен ответ, что надо смотреть в редакторе файл top.php Но у меня такого файла нет! Потому и спрашиваю, куда вставить код. Пусть повисит, может, кто еще знает.
  - +2
    
    в вордпрес body как правило открывается в файле header.php, найти который можно по такому пути wp-contentthemesимя-вашей-темыheader.php
    
    Закрывается он в файле footer.php который лежит в том же месте, где и header
    
    А форум действительно не wordpress, а webasyst и подобную информацию по wordpress лучше черпать с специализированых ресурсов.

Добавить ответ

Источник

Кажется, что программирование — это сложно, особенно если никогда не приходилось с ним сталкиваться. На самом деле всё зависит от задачи. Чтобы вносить небольшие изменения на сайт, хватит и азов, а их может освоить даже человек без технического образования. Об этих азах и пойдет речь в статье. Расскажем об устройстве исходного кода, о том, как начать в нём немного разбираться, и ответим на вопрос, зачем всё это вам нужно.

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

Зачем понимать исходный код

Сначала поговорим о том, зачем вам нужно что-то знать о коде, если вы не программист. Да, здорово расширять свои границы. Но главное, что вы можете получить из этого знания — пользу для бизнеса.

Зная, как устроен исходный код, вы сможете:

Больше понимать в SEO-продвижении.

Если просто смотреть на страницу сайта, вы не сможете проанализировать, правильно ли настроено SEO-продвижение, а инструменты для анализа не всегда могут быть под рукой. Только в коде проверяют, на месте ли метаданные и обязательные элементы — основная информация для успешного SEO. Поэтому заглядывать в исходный код становится обычной практикой маркетологов или владельцев бизнеса, которые сами занимаются продвижением.

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

Анализировать сайты конкурентов на более глубоком уровне.

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

Составлять грамотные ТЗ для разработчика самостоятельно.

Вам будет легче представить и объяснить разработчику, как вы видите свою задумку. А значит, на финальной стадии работ не окажется, что всё сделано не так, а деньги и время уже потрачены.

Лучше понимать программистов.

Когда программист будет объяснять вам, в каких правках нуждается сайт компании, вы всё поймёте и сможете на равных обсудить это с сотрудником. Вам будет проще нанимать человека на IT-должность и разбираться в сметах на обслуживание сайта.

Экономить, самостоятельно внося изменения в сайт.

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

Что такое исходный код сайта

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

Именно код скрывается за внешней стороной любой интернет-страницы. Он выглядит как список пронумерованных строк с информацией о том или ином элементе страницы.

Как посмотреть код любого сайта

Расскажем, как посмотреть исходный код страницы в браузере Google Chrome*. В остальных браузерах этот процесс примерно такой же.

Код вызывается одной из комбинаций:

комбинация клавиш Ctrl + U или правая кнопка мыши → «Просмотр кода страницы» — вызывает «полотно» кода в отдельном окне браузера. Вы сможете увидеть структуру всей страницы. Вот как это выглядит:

Чтобы не утонуть в огромном количестве новых символов, нужно разобраться, что такое HTML, CSS и JavaScript.

Что такое HTML

HTML — язык гипертекстовой разметки. На нём написано большинство сайтов в интернете.

Что можно узнать о сайте из исходного кода

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

Все элементы кода нужны для правильного расположения разделов и деталей страницы. Всё это вы сможете найти и проанализировать, внимательно изучив исходный код сайта:

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

Чтобы лучше понять теорию, разберёмся в коде страниц блога RU-CENTER: найдём теги, картинки и другую информацию.

Для начала открываем страницу и вызываем интерактивный код (Ctrl + Shift + I). Откроется интерактивная панель с кодом, поделённая на две области. Слева — HTML-код (вкладка Elements), справа — CSS (вкладка Styles). Нам пока нужна левая часть с HTML.

Основные теги

HTML-страница состоит из набора тегов, которые вместе с содержимым называются элементами — это строительный материал веб-страницы. Другими словами, теги — команды для браузера, чтобы он понял, как нужно показывать сайт пользователю. Указывая в коде определенные теги, вы говорите браузеру: «Это текст, а это картинка, это ссылка, а это кнопка или форма». И браузер показывает все элементы интерфейса так, как вы их разместили.

Теги обычно открываются и закрываются так: <tag> — открытие тега, </tag> — закрытие.

Теги делятся на два вида: блочные и строчные.

Блочные теги всегда занимают отдельную строку в коде и обозначают целый элемент страницы сайта. Пример: заголовки или параграфы.

Немного разобрались с основными HTML-элементами, теперь поговорим о том, что такое CSS.

Что такое CSS

CSS (Cascading Style Sheets) — каскадные таблицы стилей. Это язык, который отвечает за внешний вид HTML-документа, — CSS и HTML действуют в одной связке.

Если HTML отвечает за структуру, то CSS определяет стиль документа: дизайн, вёрстку, адаптацию для разных устройств.

Страница сайта, написанная только на HTML, выглядит просто как текст, поделённый на абзацы, с разными начертаниями шрифтов, гиперссылками, списками и таблицами:

А так выглядит та же страница, но со стилями CSS:

Раньше, примерно до 1996 года, стили были встроены в HTML, код становился громоздким и в нём было сложно разобраться. Тогда появился CSS со своим языком, правилами и возможностью вынести все стили в отдельный файл. Процесс создания сайтов стал более гибким, управлять стилями оказалось проще — теперь стиль абзаца не нужно править в HTML-файле вручную для каждого абзаца— достаточно в CSS-файле отредактировать одно правило. Плюс стало проще читать и обслуживать HTML-код.

Главный тег для элементов CSS — <style>. Стили, которые нужно подключить к HTML-документу, как правило, выносят в отдельный CSS-файл, а после прописывают ссылку на него в коде HTML.

Что такое JavaScript

JavaScript — логический язык программирования. Он сложнее, чем HTML или CSS, поддерживается всеми современными браузерами, его используют практически все сайты.

В отличие от HTML и CSS, JavaScript позволяет использовать на сайтах более мощные и сложные функции, создавать интерактивные страницы с динамичными элементами. Например:

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

На сайте скрипты на этом языке найти просто. Открываем интерактивный код, нажимаем Ctrl + F и вводим в поле поиска JavaScript:

Здесь мы видим, что тег с пометкой javascript отвечает за отслеживание взаимодействий пользователя с сайтом: это тег Google Аналитики*. Но мы не будем подробно останавливаться на нём в этой статье.

Как познакомиться с кодом поближе

Поговорили о теории, теперь — практика. Глубоко копать не будем, чтобы не запутаться. Покажем, как отредактировать код в браузере, а после — провести мини-SEO-аудит, используя только выдачу поисковика и страницу вашего сайта. Начнём с редактирования кода.

Как редактировать HTML-код прямо в браузере

Вы можете отредактировать код любой интернет-страницы с одним «но»: эти изменения будут видны только вам и после перезагрузки страницы всё вернётся к прежнему виду. Поэтому смелее — вы точно ничего не сломаете.

Обычно это делается, чтобы:

Визуально менять тексты и данные на сайте, проверять новые форматы.
Тестировать блоки и элементы: заголовки, сноски, абзацы, врезки и т. п.
Править информацию на странице, чтобы показать скриншоты дизайнерам, редакторам или разработчикам.

Давайте немного поменяем текст на странице блога RU-CENTER. Открываем страницу в браузере Google Chrome*. Находим заголовок, нажимаем на него правой кнопкой мыши и выбираем в меню «Просмотр кода».

Мы хотим исправить этот заголовок. Нажимаем дважды левой кнопкой мыши на текст в строке кода, пишем новый заголовок и нажимаем Enter:

Или, например, хотим мы поменять текст на кнопке. Кликаем на неё правой кнопкой мыши, выбираем в меню пункт «Просмотреть код»:

И меняем его — в области кода левой кнопкой мыши дважды нажимаем на текст, печатаем новую фразу и нажимаем Enter:

А ещё поменяем иллюстрацию. Кликаем на изображение правой кнопкой мыши и выбираем пункт «Просмотреть код»:

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

Как редактировать CSS-код прямо в браузере

CSS-код можно редактировать так же, как и HTML: открываем код страницы в браузере и заменяем или удаляем элементы. Если обновить страницу, всё вернётся на свои места.

Изменим размер картинки на странице RU-CENTER. Открываем код изображения, находим внизу окна кода нужное поле:

Уменьшим иллюстрацию, изменив значения в блоке:

Проверьте основные теги для SEO на вашем сайте

Мы разобрались в HTML-тегах, узнали, как отредактировать код сайта в браузере и ничего не сломать. Теперь давайте проведём мини-SEO-аудит сайта, используя только его страницу и выдачу поисковика.

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

Title

<title>Заголовок страницы</title>. Это самый важный тег для SEO, его нужно заполнять для каждой страницы сайта. Информация из title не показывается напрямую на странице, но отображается в названии страницы в верхней области браузера:

Найдём title на странице RU-CENTER. Открываем код сайта с помощью инструментов разработчика. Нажимаем Ctrl + F и вводим в поле поиска title. Вот и наш заголовок:

Подробнее о тегах и основных ошибках SEO-продвижения сайта вы можете прочитать в нашей статье.

Где бесплатно научат понимать код и программировать

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

Html Academy. Бесплатные задания после регистрации.
«Нетология». Курсы: «Основы HTML и CSS», «Python-разработка для начинающих» и др.
Geekbrains. Интенсивы: «Основы программирования», «Python для начинающих» и др.
Яндекс Практикум. Все курсы можно попробовать бесплатно, например: «Как стать веб-разработчиком», «Как стать Python-разработчиком» и др.
«Смотри.Учись». Курс «PHP. Базовый курс» и др.
Гарвард, Основы программирования. Видео-лекции на YouTube.

Источник

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
1.0+	1.0+	1.0+	1.0+	1.0+	1.0+	1.0+

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Элемент <body> предназначен для хранения содержания
веб-страницы (контента), отображаемого в окне браузера. Информацию, которую
следует выводить в документе, следует располагать именно внутри контейнера <body>.
К такой информации относится текст, изображения, теги, скрипты JavaScript и
т.д.

Тег <body> также применяется для определения
цветов ссылок и текста на веб-странице. Подобная практика в HTML 4 осуждается
и взамен для указания цветовой схемы рекомендуется использовать стили, применяя
их к селектору BODY. Тем не менее, большинство атрибутов
до сих пор поддерживается разными браузерами.

Часто тег <body> используется для размещения
обработчика событий, например, onload, которое
выполняется после того, как документ завершил загрузку в текущее окно или фрейм.

Открывающий и закрывающий теги <body> на веб-странице
не являются обязательными, однако хорошим стилем считается их использование,
чтобы определить начало и конец HTML-документа.

Синтаксис

<body>
  ...
</body>

Атрибуты

alink: Устанавливает цвет активной ссылки.
background: Задает фоновый рисунок на веб-странице.
bgcolor: Цвет фона веб-страницы.
bgproperties: Определяет, прокручивать фон совместно с текстом или нет.
bottommargin: Отступ от нижнего края окна браузера до контента.
leftmargin: Отступ по горизонтали от левого края окна браузера до контента.
link: Цвет ссылок на веб-странице.
rightmargin: Отступ от правого края окна браузера до контента.
scroll: Устанавливает, отображать полосы прокрутки или нет.
text: Цвет текста в документе.
topmargin: Отступ от верхнего края окна браузера до контента.
vlink: Цвет посещенных ссылок.

Также для этого тега доступны универсальные атрибуты и события.

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

Открывающий и закрывающий теги не обязательны.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <title>Тег BODY</title>
  <meta charset="utf-8">
 </head>
 <body onload="alert('Документ загружен')">

  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper 
  suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

 </body>
</html>

Результат текущего примера показан на рис. 1. При использовании события onload тега <body> выполняется скрипт, написанный на языке JavaScript, в данном случае он выводит сообщение, что документ загружен.

Рис. 1. Всплывающее окно в документе

Источник

JavaScript Document

Определение и применение

JavaScript свойство body объекта Document представляет ссылку на узел <body> или <frameset> текущего документа, или null, если такой элемент не существует. Элемент <frameset> не поддерживается в HTML 5.

Обращаю Ваше внимание на то, что содержимое свойства body может быть заменено, но это удалит все его дочерние элементы.

Поддержка браузерами

JavaScript синтаксис:

// получение содержимого элемента
const objRef = document.body;

// установка содержимого элемента
document.body = objRef;

Спецификация

Document Object Model (DOM) Level 1

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование JavaScript свойства body объекта document</title>
	</head>
	<body>
		<button onclick = "myFunc()">Нажми меня</button> <!-- добавляем атрибут событий onclick -->
		<script>
	function myFunc() {
	  const comment = document.createComment( "Hello! I'm a hidden secret comment." ); // создаем узел комментария
	  document.body.appendChild( comment ); // добавляем узел комментария в качестве последнего дочернего узла элемента <body>
	}
		</script>
	</body>
</html>

В этом примере с использованием атрибута событий onclick при нажатии на кнопку (HTML элемент <button>) вызываем функцию myFunc(), которая с использованием JavaScript метода createComment() создает и возвращает новый узел комментария. Далее с помощью метода appendChild() добавляем узел комментария в качестве последнего дочернего узла элемента <body>.

Результат нашего примера:

Пример использования JavaScriptсвойства body объекта document

JavaScript Document

Источник