html код секции 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.
Поделиться ссылкой на эту страницу в:
Структура 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
Правильное использование тега body
| Комментарий администратора | ||
| ||
Правильное использование тега br
Подскажите, а в каким случаях стоит использовать
? Когда не надо (плохой тон) и какая ему есть.
Динамическкое изменение css свойств тега body
Здравствуйте. У меня html страничка отображается на пол экрана. Можно ли на javascript сделать.
А это что по Вашему?
Никто не собирается прятаться.
Во-первых это бессмысленный набор свойств, потому что тег и так растянут на всю ширину браузера и margin:0 auto; вообще тут лишний, т.к. он не сработает.
Во-вторых, судя по вашей логике, если мне потребуется один или несколько контейнеров прижать к правому краю браузера, я должен использовать position: absolute и вы считаете это нормальным?
Не обольщайтесь. Троллей нужно только троллить и никак иначе. 
Добавлено через 2 минуты
И кстати тема вообще про div, каким боком вы body затронули?
Fedor92, Mr Coder, тема разделена
Добавлено через 28 секунд
Но это не значит, что тут можно заниматься перепалками.
Мериться градусниками никто не собирается. Аргументы и вопросы я привел в этом посте, а ваш пост выше одна вода.
width:100%; margin:0 auto;
Какого поведения контейнера вы ждете, когда пишите такой код? Это ведь бред полный.
Вы сами хотели дискуссии, а теперь уклоняетесь.
Помощь в написании контрольных, курсовых и дипломных работ здесь.
CSS селекторы атрибутов для тега BODY
Здравствуйте! Возник такой вопрос: как описать стили тэгу BODY так, чтоб он отображался в IE и в.
Использование тега label
подскажите зачем нужен тег label и как его использовать? Добавлено через 7 минут все, разобрался
Правильное использование высоты
Всем привет! Свертал макет страницы. Всё ОК, кроме расположения футера. Дело в том, что у него.
классы для html и body в одном CSS-файле, но для разных страниц
Спросил brainless,
18 декабря 2007
Вопрос
brainless
object в IE6 осуществляется с рамкой и скроллбаром. для того, чтобы убрать это, нужно прописать в стилях следующее (так это или не так, прошу вас меня поправить!):
допустим, с этой проблемой я справился.
однако, сами понимаете, вся страница теперь обделена сроллбаром, который может понадобиться.
поскольку в object я помещаю html-страницу, я прописываю этот стиль ей, а не той, где object находится. в таком случае вс? работает как надо (ну или почти. в IE6 при проверке общего скроллбара, когда уменьшаю окошко до обусловленного предела, он появляется, а когда расширяю вновь, он должен исчезнуть, но этого не происходит. исчезает он снова только если обновить страницу. это просто тупость IE6 или я могу с этим тоже совладать?).
так вот, суть вопроса в ч?м:
может быть, это моя прихоть, но я хочу использовать один css-файл на весь сайт.
скажите пожалуйста, как можно соединить два нижеуказанных кода в один? вы видите, что почти все части кодов одинаковые.
я так понимаю, нужно прописать класс(ы) для html и body, но я не знаю, как это оформить в html-код и в самих стилях, чтобы вс? работало.
подскажите, что мне сделать, чтобы ларчик просто открывался.
Избегаем распространенных ошибок в HTML5 разметке
Уважаемые хабровчане, представляю вам вольный перевод статьи Avoiding common HTML5 mistakes. Здесь мы рассмотрим частые ошибки в HTML5 разметке с точки зрения семантики, и как их избежать.
Наблюдая за сайтами в галерее HTML5 сайтов и отвечая на вопросы пользователей, я видел множество сайтов с HTML5 разметкой. В этой статье я покажу некоторые ошибки и плохие практики разметки, которые я часто встречал, и объясню, как избежать их.
Не используйте тег в качестве обёртки для оформления
‘ы не умерли, и именно они отлично подходят в этом случае.
Принимая во внимание все вышесказанное, было бы хорошо разметить пример выше с использованием HTML5 так:
Если Вы не уверены, какой элемент использовать, то я советую Вам воспользоваться нашей блок-схемой выбора элемента (прим. переводчика: см. в самом низу записи).
Используйте и только при необходимости
, представляя заголовок секции в случае, если он состоит из нескольких уровней (подзаголовки, альтернативные заголовки и т.д.)
Избыток элементов
Я уверен, Вы прекрасно знаете, что элемент можно использовать несколько раз в документе. Поэтому часто встречается такое:
Неправильное использование
В этом случае просто уберите hgroup.
Второй случай — это еще один пример использования элемента без необходимости.
Подробнее об элементе можно почитать тут.
Не обрамляйте все ссылки в
Элемент nav представляет секцию страницы, связывающую её с другими страницами или частями текущей (секцию с навигационными ссылками).
Примечание: Не все группы ссылок следует помещать в элемент nav. Его следует использовать для основной навигации. Часто в футерах размещают небольшой список ссылок на различные страницы сайта (Главная, Помощь, соглашение об использовании, etc). В этом случае одного footer’а должно быть достаточно. Хотя ничто не мешает использовать nav, в этом нет необходимости.
Общие ошибки в использовании элемента
Не каждое изображение
Спецификация описывает как «автономный контент, возможно, с заголовком и обычно являющийся самостоятельным элементом потока». Вот она, вся красота — элемент можно спокойно переместить из основного содержимого, например, в сайдбар.
Ваш логотип — не
Тоже самое касается и логотипа. Часто я вижу такое применение:
Тут нечего добавить. Это просто неверно. Можно долго спорить о том, должен ли логотип быть в
может быть не только изображением
Другой частый случай недопонимания элемента заключается в предположении, что его можно применять только для картинок. Но это не так. В может быть заключено видео, аудио, графики (в SVG, например), цитата, таблица, блок кода, стихотворение или любая комбинация перечисленного. Не ограничивайте себя в использовании одними картинками. Наша задача как приверженцев веб-стандартов — описать контент нашей разметки.
Не так давно я писал об элементе подробнее. Советую почитать, если Вы хотите разобраться получше или освежить воспоминания.
Не используйте ненужный атрибут type
Это, возможно, наиболее общая проблема, встречаемая в HTML5 галерее. Хотя это и не ошибка, я считаю, что лучше избегать этого.
В HTML5 нет необходимости указывать атрибут type для элементов
Вместо этого Вы можете просто написать:
Помимо прочего, Вы также можете сократить количество кода, расходующегося на указание кодировки. Глава Марка Пилгрима о семантике в книге Dive into HTML5 описывает все такие практики.
Некорректное использование атрибутов форм
Вы, должно быть, уже в курсе, что в HTML5 введено множество новых атрибутов форм. Мы рассмотрим их в ближайшее время, сейчас же я коротко расскажу, как делать не стоит.
Логические атрибуты
Существуют логические атрибуты также и для мультимедиа элементов и некоторых других. Описываемые мною правила применимы и для них.
Я редко встречаю их, но в случае с required я видел такое:
В конечном счете, это ничем плохим не грозит. Клиентский HTML парсер встретит атрибут required в разметке и применит соответствующие правила. Но что если сделать по-другому и написать required=«false»?
Парсер по-прежнему увидит атрибут required и применит соответствующее поведение, несмотря на то, что Вы указали ему не делать этого. Очевидно, это не то, чего Вы хотели.
Применительно к нашему примеру выше, мы могли бы написать так (в HTML):