Html документ начинается с тега. Правила языка HTML. Как открыть html файл

Добрый день! Сегодня я расскажу вам о такой важной вещи как структура HTML документа.

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

Чтобы создать наш каркас html документа нам понадобиться его где то писать. Лично я для начала рекомендовал бы какой нибудь простой редактор по типу Notepad++ в Windows и его аналоги в других системах. Почему именно он а не более мощные редакторы я расскажу в отдельной статье.

Чтобы начать строить структуру html документа вам необходимо создать текстовый файл с именем index.html (ну или как хотите, но желательно это делать как указано выше).

Теперь нам нужно определиться с чего начинается структура нашего html документа. А начинается она с определения версии html которую мы используем. Эта версия нужна чтобы наш браузер смог определить нашу версию документа и правильно построить нашу веб страницу.

Версия html документа.

Чтобы указать версию нашего html документа необходимо написать в самом начале страницы данную конструкцию:

Она покажет нашему браузеру что мы пользуемся именно последней версией HTML — HTML5.

Основные теги структуры.

Для этого будет достаточно 3-х самых основных тегов: html, head, body.

Тег — это обертка в которой будет находиться всё содержимое нашего документа.

Тег — этот тег используется для указания браузеру с какими данными ему нужно будет работать: скрипты стили мета теги и т.д. Так же содержимое этого тега не будет отображено на вашей странице.

Тег — этот тег предназначен для хранения всего отображаемого контента на веб-странице.

Теперь составим из всех вышеописанных элементов правильную структуру html документа.

Простейшая структура готова.

Дополнительные теги.

Теперь для полноценной работы с ней осталось добавить в тег head два важных тега:

  • — тег указывающий браузеру какая кодировка используется в данном документе (как правило это либо UTF-8 либо windows-1251).
  • </b>— тег который позволяет задавать заголовок странице. Заголовок находиться в верхнем левом углу вкладки в которой вы находитесь. Он нужен для указания поисковым системам и пользователям вашего веб сайта конкретного названия конкретной страницы.</li> </ul><p>Таким образом у нас уже есть все необходимые нам элементы для построения простой структуры.</p><p> <!doctype html> <!-- версия документа HTML5. Указание ранних версий HTML были очень громоздкими --> <html> <head> <meta charset="UTF-8"> <!-- указываем что кодировка нашего документа UTF-8 (международная) --> <title/>Заголовок документа ; ; Любой текст напечатанный вами будет отображен на данной странице и корректно показан браузером ;

    Вот и все, структура нашего простого html документа готова! Теперь можете сохранять файл index.html
    и продолжать изучение уроков по

    HTML (от англ. HyperText Markup Language -- "язык разметки гипертекста") -- стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.

    HTML является приложением ("частным случаем") SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO 8879. XHTML же является приложением XML.

    Текстовые документы, содержащие разметку на языке HTML (такие документы традиционно имеют расширение.html или.htm), обрабатываются специальными приложениями, которые отображают документ в его форматированном виде. Такие приложения, называемые "браузерами" или "интернет-обозревателями", обычно предоставляют пользователю удобный интерфейс для запроса веб-страниц, их просмотра (и вывода на иные внешние устройства) и, при необходимости, отправки введённых пользователем данных на сервер. Наиболее популярными на сегодняшний день браузерами являются Google Chrome, Mozilla Firefox, Opera, Internet Explorer и Safari.

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

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

    Документ HTML содержит текст (содержимое страницы) и встроенные теги - инструкциями о структуре, внешнем виде и функции содержимого. Документ HTML разделяется на две основные части: заголовок - head и тело - body. Заголовок содержит такие сведения о документе, как его название и методическая информация, описывающая содержимое. В теле находится само содержимое документа (то, что выводится в окне браузера).

    Пример структуры документа:

    HTML struct

    header

    Основные элементы HTML

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

    Пример пустого элемента:

    - разрыв текста без сохранения отступов, но вы можете использовать специальную форму записи тега, используя меньшее число символов:

    Каждый тег состоит из имени, за которым может следовать список необязательных атрибутов, все они находятся внутри угловых скобок < >. Содержимое скобок никогда не выводится в окне браузера. Имя тега, как правило, представляет собой аббревиатуру его функции, что облегчает его запоминание. Атрибуты являются свойствами, которые расширяют или уточняют функцию тега. Как правило, имя и атрибуты внутри тега не чувствительны к регистру. Однако значения определенных атрибутов могут быть чувствительны к регистру. Это относится, в частности, к именам файлов и URL.

    Большинство тегов являются контейнерами. Это означает, что у них имеется начальный (открывающий или стартовый) и конечный (закрывающий) теги. Текст, находящийся между тегами, будет выполнять содержащиеся в них инструкции.

    Конечный тег имеет то же имя, что и начальный, но перед ним стоит слеш (/). Его можно рассматривать как "выключатель" тега. Конечный тег никогда не содержит атрибутов.

    В некоторых случаях конечный тег не обязателен, и браузер определяет конец тега из контекста. Чаще всего опускают конечный тег <р> (абзац). Браузеры раньше поддерживали этот тег без соответствующего завершения, поэтому многие авторы Web привыкли использовать краткую форму. Поэтому, если есть сомнения, стоит включить в текст закрывающий тег. Это особенно важно, когда в документе используются каскадные таблицы стилей.

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

    ) и теги, содержащие информацию о документе и не влияющие на содержимое, выводимое на экран, такие как и .

    Атрибуты добавляются в тег для расширения или модификации его действий. К одному тегу можно добавить несколько атрибутов. Если атрибуты тега следуют после имени тега, они разделяются одним или несколькими пробелами. Порядок следования не важен. Большинство атрибутов имеют значения, которые следуют за знаком равенства (=), находящимся после имени атрибута. Длина значений ограничена 1024 символами. Значения могут быть чувствительны к регистру. Иногда значения должны находиться в кавычках (двойных или одинарных). Правила записи значения следующие:

    · если значение представляет собой одно слово или число и состоит только из букв (a-z), цифр (0-9) и специальных символов (точка <.> или дефис <->), то можно поместить его после знака равенства без кавычек;

    · если значение содержит несколько слов, разделенных запятыми или пробелами, или содержит специальные символы, отличные от точки или дефиса, тогда его необходимо поместить в кавычки. Например, URL требуют кавычек, потому что они содержат символы "://". Также кавычки необходимы при задании значений цветов с использованием формата "#rrggbb".

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

    Часто встречающейся ошибкой является перекрытие тегов. Хотя часть браузеров отображают содержимое, отмеченное таким образом, многие не разрешают нарушать правило, поэтому важно размешать теги правильно. Информация, которая будет игнорироваться при просмотре браузерами:

    · разрывы строк. Символы конца строк в документе HTML игнорируются. Текст и элементы будут переноситься до тех пор, пока в потоке текста документа не встретится тег <р> или
    . Разрывы строк выводятся, если текст обозначен как текст с заданным форматом (<рrе>);

    · символы табуляции и множественные пробелы. Когда браузер встречает в документе HTML символ табуляции и несколько последовательных символов пробела, он выводит только один пробел. Таким образом, если документ содержит: "far, far away", браузер выведет "far, far away". Дополнительные пробелы можно добавить в текстовый поток, используя символ неразрывного пробела (). Кроме того, все пробелы выводятся, если текст является форматированным (находится в тегах <рrе>);

    · множественные <р>-теги. Последовательность тегов <р>, не прерываемых текстом, всеми браузерами интерпретируется как избыточная. Содержимое будет выводиться так, как если бы был только один тег <р>. Большинство браузеров выведет несколько тегов
    в виде нескольких переходов на новую строку;

    · нераспознаваемые теги. Если браузер не понимает тег или тот был неверно задан, то браузер его просто игнорирует. В зависимости от тега и браузера это может привести к различным результатам. Либо браузер ничего не выведет, или он может отобразить содержимое тега как обычный текст.

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

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

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

    /*Указывает тип текущего документа DTD*/ /*Показывает начало документа*/ /*Показывает начало заголовка (шапки)*/ Test/*Показывает заголовок*/ /*Показывает начало заголовка*/ /*Показывает начало основной части документа (тело)*/ /*Содержательная часть документа*/ /*Показывает конец основной части документа*/ /*Показывает конец документа*/

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

    Test

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

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

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

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

    XHTML похож на HTML, но отличается синтаксисом. Чтобы браузер не путался языки и нужно показать ему в первой строке кода, тип текущего документа DOCTYPE .

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

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

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

    • Тег означает заголовок html документа. В тегах head хранится информация для браузеров и поисковых систем. В том числе в виде мета-тегов;
    • Тег означает основное содержание html документа. Именно текст, изображения, скрипты Java Script и т.д.;
    • Тег [p] это блочный элемент, всегда начинается с новой строки. Он означает абзац основного содержания html документа.

    Важно! Все теги html разметки должны быть парными. То есть, открывающий тег <тег> , должен быть закрыт закрывающим тегом, с косой чертой .

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

    Для улучшения структурирования текста документа, а также улучшения SEO веб-страниц, существуют дополнительные теги основного содержания. Они называются теги заголовков и подзаголовков от h1 до h6, всего 6 штук.

    Они так же как теги [p] -обзаца, который, позволяет выделить смысловые участки текста, позволяют поделить текст на смысловые участи, дав каждому участку свой заголовок.

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

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

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

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

    Test

    Основной заголовок

    Основной заголовок

    Первый подзаголовок

    Основной заголовок

    Второй подзаголовок

    Первый второстепенный подзаголовок

    Структура HTML 5

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

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

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

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

    Этот элемент определяет заголовок для документа;</p> <p><body> Этот элемент содержит видимое содержимое страницы;</p> <p><h1> Элемент определяет большой заголовок</p> <p><p>Элемент определяет абзац.</p> <p>Работают в html5 теги h2 — h6</p> <p><i>Все теги двойные. Начальный тег называется открывающим тегом, а конечный тег — закрывающим тегом. </i></p> <h2>HTML разметка на сайте WordPress</h2> <p>Несмотря на то, что скрипт WordPress написан на php, все файлы сайта, а вернее все файлы рабочего шаблона сайта, имеют html разметку. Смотрим пример, на файле header.php шаблона <b>Twenty Seventeen </b>:</p><p> <?php ?><!DOCTYPE html> <html <?php language_attributes(); ?> class="no-js no-svg"> <head> <meta charset="<?php bloginfo("charset"); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="http://gmpg.org/xfn/11"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="page" class="site"> <?php _e("Skip to content", "twentyseventeen"); ?> <header id="masthead" class="site-header" role="banner"> <?php get_template_part("template-parts/header/header", "image"); ?> <?php if (has_nav_menu("top")) : ?> <div class="navigation-top"> <div class="wrap"> <?php get_template_part("template-parts/navigation/navigation", "top"); ?> </div><!-- .wrap --> </div><!-- .navigation-top --> <?php endif; ?> </header><!-- #masthead --> <?php if ((is_single() || (is_page() && ! twentyseventeen_is_frontpage())) && has_post_thumbnail(get_queried_object_id())) : echo "<div class="single-featured-image-header">"; echo get_the_post_thumbnail(get_queried_object_id(), "twentyseventeen-featured-image"); echo "</div><!-- .single-featured-image-header -->"; endif; ?> <div class="site-content-contain"> <div id="content" class="site-content"> </p><p>Вы можете видеть, что если все функции WordPress размещены в классической HTML разметке. Есть тип документа: <!DOCTYPE html></p> <p>Парные теги , </p> <p>Открывающий тег .</p> <p>Закрывающий тег можно найти в файле footer.php .</p> <h2>Как посмотреть HTML код страницы сайта WordPress</h2> <p>То, что вы пишите в редакторе сайта, создавая статьи или страницы, это лишь часть HTML страницы сайта. Это даже не всё тело (body) страницы.</p> <p>Чтобы посмотреть HTML код страницы сайта WordPress, а это нужно очень часто, нужно:</p> <p>Открыть страницу в браузере;</p> <p>Перейти в английский шрифт клавиатуры;</p> <p>Нажать следующие кнопки:</p> <ul><li>Chrome: Ctrl+U</li> <li>Opera: Ctrl+U</li> <li>Mozilla: Ctrl+U</li> </ul><p>Может быть, вы пока не знаете, зачем это нужно. Поверьте, это будет нужно не раз, для анализа своего сайта и возможно сайтов конкурентов.</p> <h2>Вывод</h2> <p>В заключении хотелось сделать вывод, но на ум приходит только мысль, что статья получилось, совсем для начинающих. Между примером кода статьи и примерами из реальных сайтов, на первый, взгляд большая разница. Однако у всех файлов одинаковая структура HTML документа и крайне важно эту структуру не нарушать при работе с сайтом.</p> <p>Сегодня мы поговорим о семантике в HTML5. Я уже писал небольшой обзорный пост про . Рекомендую с ней предварительно ознакомиться, перед прочтением этой статьи. Сейчас мы разберемся с этим вопросом более подробно, о том как правильно и грамотно составлять семантическую структуру HTML5 документа.</p><p>В этой статье мы будем постепенно создавать html страницу, и оформлять ее семантическими HTML5 тегами.</p><p><img src='https://i1.wp.com/rightblog.ru/wp-content/uploads/2015/09/HTML5-semantin-infografic_rightblog.ru_.png' width="100%" loading=lazy></p><p>Рисунок - Семантическая структура для HTML5 страницы.</p><h3>DOCTYPE и meta теги в заголовке страницы</h3><p>Начнем со стандартного шаблона HTML5 документа, и добавим теги meta в head:</p><p> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Заголовок страницы

    Я добавил тег который отвечает за ключевые слова. И тег который отвечает за описание страницы. Для SEO оптимизации эти теги обязательны. Также обязательно корректное заполнение тега . Title страницы должен быть уникальным для всего сайта, и содержать в названии всю суть страницы для которой он указан.</p><p>Пойдем дальше. В HTML5 появились новые теги, которые используются для того чтобы делать семантическую разметку документа. Это теги header, nav, main, article, aside, footer и т.д. По отображению они работают также как и обычные <div> теги, то есть это блочные элементы. Но если <div> не имеет семантической нагрузки, то header, nav, main и другие — уже нужно использовать только осмысленно.</p><h3>Заголовок страницы</h3><p>Шапка страницы оформляется в тег header. Заметьте что заголовок страницы пишем тегом h1.</p><p> <!-- Header страницы --> <header> <h1>Site title</h1> </header> </p><p>Если у нас есть еще и слоган рядом с заголовком, то помещаем его в p, div или span.</p><p> <!-- Header страницы --> <header> <h1>Site title</h1> <p>site slogan</p> </header> </p><p><b>Замечание по поводу тега H1 </b></p><p>Следует заметить что в HTML5 тег H1 используется для указания заголовка контейнера в котором он находится (это может быть header, section, article и т.д.)</p><p>До появления HTML5 тегов семантика была несколько другой и отличалась. Так в HTML4 на странице мог быть только один заголовок H1! Как правило это был заголовок статьи или заголовок страницы (например если это страница рубрики на которой отображаются несколько статей.) H2 использовался для подзаголовков, или для разделов главной статьи. H3 для под разделов и так далее.</p><h3>Навигация на странице</h3><p>Оформление главной навигации по сайту должно заключаться в тег nav. Также следует помнить что хорошей практикой считается оформлять навигацию элементами списка.</p><p> <!-- Главная Навигация по сайту --> <nav> <ul> <li>Home</li> <li>Portfolio</li> <li>Gallery</li> <li>Contacts</li> </ul> </nav> </p><h3>Контент на странице</h3><p>Основное содержимое страницы оформляется в тег main. Это может быть одна статья, или несколько превью статей если речь идет о странице блога с несколькими записями. Нельзя помещать сайдбар, хедер страницы, футер или главную навигацию в тег main!</p><p> <!-- Основное содержимое страниц --> <main> ...основной контент страницы... </main> </p><h3>Оформление статьи</h3><p>Тег article — служит для обертки статей. В общем этот тег содержит в себе блок контента, который может быть вынут из контекста страницы, и использован отдельно в другом месте. Это может быть статья (полный тескт статьи или превью), пост на форуме, и т.п.</p><p>На примере ниже я показал оформление статьи в контексте, внутри тега main. У статьи задан блок header с заголовком статьи. Дата публикации статьи задана специальным тегом time, который отображается как обычный inline элемент. У тега time есть специальный аттрибут в котором время публикации должно быть задано в машинном формате. Это может быть только дата datetime="2015-09-30" или с указанием часов минут и секунд datetime="2015-09-30T15:25:55" . Параметр pubdate указывает что статья была и опубликована в то же время что и написана. Если это новость, то может быть такое что время новости одно, а время публикации другое, для этого необходимо указать два раза тег time, и поставить pubdate только в том теге где указано время публикации.</p><p> <main> ... <!-- Статья --> <article> <!-- Шапка статьи если в шапке у нас больше чем заголовок --> <header> <!-- Заголовок статьи --> <h1>Article title</h1> <!-- Дата публикации статьи --> <time datetime="2015-09-30T15:25:55" pubdate>30 Сентября</time> </header> <!-- Подзаголовок страницы --> <h2>Article sub-title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde?</p><p>Из примера выше видна что внутри статьи были использованы теги header и footer чтобы выделить заголовок и нижний колонтитул статьи.</p><h3>Сайдбар или колонка с виджетами</h3><p>Для каждого отдельного элемента сайдбара используем блок aside. Внутри него заголовок оформляем тегом h1. Так колонка с сайдбаром может выглядеть следующим образом:</p><p> <!-- Сайдбар --> <div class="sidebar"> <!-- Виджет в сайдбаре --> <aside> <h1>Widget title</h1> ... </aside> <!-- Виджет в сайдбаре --> <aside> <h1>Последние записи</h1> ... </aside> <!-- Виджет в сайдбаре --> <aside> <h1>Популярные комментарии</h1> ... </aside> </div> </p><h3>Тег section</h3><p>Тег section — используется для представления группы или секции тематически связанного контента.Его использование похоже на article с главным отличием в том что допускается отсутствие смысла содержимого внутри элемента <section> вне контекста самой страницы. Рекомендуется использовать теги (<h1> – <h6>) для обозначения темы секции.</p><p>В качестве примера можно привести статью, которую вы сейчас читаете, можно было бы каждый параграф обернуть в тег <section> . Например тегом section можно выделять блоки контента на лендинге. Звучит похоже на определение div элемента, который часто используется как контейнер для контента. Разница в том что div не имеет семантического значения, и он не говорит не о чем про контент находящийся внутри него. Тег section , наоборот используется чтобы четко показать что контент внутри него связан по смыслу. Вы можете заменить некоторые свои div теги на section , но всегда отвечайте себе на вопрос: «Этот контент связан между собой или нет?»</p><p>Пример использования тега section в списке с перечислением городов:</p><p> <h1>An Event Apart</h1> <section> <header> <h2>Cities</h2> </header> <p>Join us in these cities in 2010.</p> <section> <header> <h3>Seattle</h3> </header> <p>Follow the yellow brick road.</p> <section> <header> <h3>Boston</h3> </header> <p>That"s Beantown to its friends.</p> <section> <header> <h3>Minneapolis</h3> </header> <p>It"s so <em>nice</em>.</p> <small>Accommodation not provided.</small> </p><h3>Подвал сайта — Footer</h3><p>Подвал сайта оформляется тегом <footer></p><p> <!-- Подвал сайта --> <footer> <p class="copyright">© 2015 сайт Copyright</p> </footer> </p><h3>Заключение</h3><p>Для проверки структуры страницы можно использовать инструмент HTML5 outliner . Он показывает структуру страницы блокам и заголовкам.</p><p>Семантика в HTML5 не ограничивается приведенными выше в статье тегами. Но используя приведенные примеры вы можете освежить свою разметку, и сделать сайт более дружелюбным к поисковым системам, что скажется на более высоком рейтинге сайта в поисковой выдаче.</p><p>В продолжение темы можно изучить другие новые HTML5 теги. А также микро форматы для оформления и структуризации данных, например такие как schema.org</p><p><b>Важное замечание по использованию HTML5 тегов. </b> В спецификации не указаны жесткие правила по использованию семантических тегов, указаны лишь рекомендации п их использованию. Если вы не понимаете или не знаете где и какой HTML5 тег использовать, лучше используйте div — чтобы не навредить и не нарушить структуру документа.</p><p><b>Статьи и материалы</b></p> <p>Каждый HTML-документ должен начинаться тегом <b>< </b><b>HTML </b><b>> </b> и заканчиваться тегом <b></ </b><b>HTML </b><b>> </b>. Эти теги обозначают, что находящиеся между ними строки представляют единый HTML-документ. Кроме того, можно заметить, что файл HTML в целом является элементом языка HTML.</p><p>Также в HTML-документе должны присутствовать элементы HEAD (информация о документе) и BODY (тело документа).</p><p><b>Раздел документа </b><b>HEAD </b></p><p>Раздел документа HEAD определяет его заголовок, а также содержит дополнительную информацию о документе для броузера. Этот раздел не является обязательным, однако рекомендуется всегда использовать его в своих HTML-документах, так как правильно составленный заголовок может быть весьма полезен.</p><p>Раздел заголовка начинается тегом <b>< </b><b>HEAD </b><b>> </b> и следует сразу за тегом <HTML>. Между открывающим и закрывающим тегами элемента HEAD располагаются другие элементы заголовка.</p><h2>Название документа title</h2><p>Для того чтобы дать название HTML-документу, предназначен тег <b>< </b><b>TITLE </b><b>> </b>. Это название будет выведено в заголовок окна броузера. Название записывается между тегами <TITLE> и и представляет собой строку текста. Длина этой строки может быть любой, но рекомендуется делать ее не больше 60 символов. Элемент TITLE должен находиться только в разделе HEAD.

    Раздел документа BODY

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

    Спецификация элемента BODY

    Тег имеет ряд атрибутов, определяющих внешний вид документа. Ниже приводится спецификация тега .

    TEXT="цвет текста"

    BGCOLOR="цвет фона"

    BACKGROUND="адрес фонового рисунка"

    Атрибут TEXT задает цвет шрифта для всего документа в формате RGB или в символьной нотации. По умолчанию (если не указан этот атрибут) используются настройки броузера.

    Атрибут BGCOLOR задает цвет фона окна броузера документа в формате RGB или в символьной нотации. По умолчанию используются настройки броузера.

    Атрибут BACKGROUND позволяет указать адрес и имя рисунка, используемого в качестве фона. Этот рисунок будет размножен и распределен на заднем плане документа.

    Атрибуты LINK, VLINK и ALINK задают цвета гиперссылок в формате RGB или в символьной нотации. По умолчанию используются настройки броузера. Непосещенная гиперссылка – гиперссылка, которая еще не использовалась для перехода к другому документу. Посещенная гиперссылка – гиперссылка, которая уже использовалась для перехода к другому документу. Активная гиперссылка – гиперссылка на документ, к которому в данный момент происходит переход.

    Советы по использованию атрибутов тега BODY

     Если вы указываете хотя бы один цвет в теге BODY, то укажите и остальные. Это связано с тем, что пользователь может установить настройки цветов своего броузера как ему удобней. Указание только одного цвета может привести к ситуации, что у некоторых пользователей текст сольется с цветом фона. В результате просмотр документа будет затруднен.

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

     В элементе BODY можно задать как BGCOLOR, так и BACKGROUND. В этом случае броузер отдает предпочтение BACKGROUND, но если изображение фона невозможно загрузить, будет использовано BGCOLOR. Поэтому старайтесь задавать цвет фона похожим на цвет фонового рисунка, чтобы не нарушился цветовой баланс документа.

  • Сергей Савенков

    какой то “куцый” обзор… как будто спешили куда то