• Что такое HTML? Структура документа HTML. Какие теги определяют структуру html страницы

    Здравствуйте! В этом уроке вы НЕ найдете для себя ничего полезного, если УЖЕ знакомы с формированием структуры 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>Вы можете видеть, что если все <a href="/kak-uluchshit-funkcii-vizualnogo-redaktora-wordpress-plagin-ultimate-tinymce-tinymce-advanced.html">функции WordPress</a> размещены в классической <a href="/yazyk-gipertekstovoi-razmetki-html-yazyki-gipertekstovoi-razmetki-sgml-xml.html">HTML разметке</a>. Есть тип документа: <!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>В заключении хотелось сделать вывод, но на ум приходит только мысль, что статья получилось, совсем для начинающих. Между примером кода статьи и примерами из реальных сайтов, на первый, взгляд <a href="/evm-i-personalnye-kompyutery-zabluzhdenie-o-tom-chto-evm-i-kompyuter-eto-dve.html">большая разница</a>. Однако у всех файлов одинаковая структура HTML документа и крайне важно эту структуру не нарушать при работе с сайтом.</p> <p>Здравствуйте, уважаемые читатели блога! Сегодня мы поговорим о структурировании текста на web-страницах, об особенностях его отображения и рассмотрим как разбить текст на отдельные логические фрагменты: <b>заголовки, абзацы, списки </b>.</p> <p>Для работы с текстом в html есть множество тегов, но для начала необходимо поговорить о некоторых особенностях отображения текста в браузере. Во-первых, любое количество пробелов, знаков табуляции и переносов строк, идущих подряд, отображается как один пробел. Т.е. позиционировать текст с помощью пробелов и знаков табуляций не получится.</p> <p>Для примера эти строки на web-странице будут отображаться одинаково не смотря на их разное написание:</p> <p><p>Добро пожаловать на наш сайт!</p><br> <p>Добро<br> пожаловать на наш сайт!</p><br> <p>Добро пожаловать<br> на наш<br> сайт!</p></p> <p>Исключение составляет<b> тег <pre> </b>, внутри которого все пробелы и переносы отображаются как есть.</p> <p>Во-вторых, текст занимает ширину окна браузера. Если длинная строка текста шире окна браузера, то в местах пробелов или дефиса автоматически будут вставлены переносы строк. Если в строке нет ни пробелов, ни дефисов, а строка не умещается по ширине окна, то в браузере появится горизонтальная полоса прокрутки.</p> <p>Теперь перейдем к рассмотрению структурных элементов текста в разметке html.</p> <h2>Абзацы в языке HTML</h2> <p>Обычно, блоки текста разделяют между собой абзацами(параграфами). Это облегчает чтение больших кусков текста. Язык HTML для создания абзаца содержит парный<b> тег <p> </b>. Синтаксис создания абзацев следующий:</p> <p><p>Это первый абзац.</p><br> <p>А это уже второй абзац</p></p> <p>Абзацы на html-странице отделяются небольшими отступом от предыдущего и последующего элементов. Тег <p>Также является блочным элементом. Что такое <a href="/pozicionirovanie-elementov-html-css---pozicionirovanie-blochnyh.html">блочные элементы</a> я писал в статье « ». Напомню, что <b>блочные элементы </b> характеризуются тем, что занимают всю доступную ширину html-страницы, высота элемента определяется его содержимым, и он всегда начинается с новой строки.</p> <p>Рассмотрим пример применения абзацев на web-странице. Откроем <a href="/kak-otkryt-tekstovyi-redaktor-v-vindovs-7-tekstovyi-redaktor.html">текстовый редактор</a>, наберем HTML-код и сохраним с <a href="/kak-otkryt-fail-htm-vybiraem-optimalnuyu-programmu-dlya-sozdaniya-i.html">расширением html</a>:</p> <p><!doctype html><br> <html><br> <head><br> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br> <title>Сайт об автомобилях.


    Сайт об автомобилях.



    Классификация автомобилей


    Легковой;


    Грузовой;


    Внедорожник;


    Багги;


    Пикап;


    Спортивный;


    Гоночный.



    При открытии данного файла будет примерно такая картина:

    Пока, что наша страница содержит одни абзацы.

    Для выравнивания текста в абзаце тег

    Поддерживает атрибут align. Он может принимать одно из четырех значений:

      • left — выравнивание текста по левому краю;
      • center — выравнивание текста по центру;
      • right — выравнивание текста по правому краю;
      • justify — выравнивание по ширине, т.е. выравнивание текста одновременно по правому и левому краю. Для этого браузер помещает пробелы между словами.

    По умолчанию атрибут align имеет значение left. Пример использования атрибута align:

    Этот текст в абзаце на html странице будет выровнен по левому краю!


    Этот текст в браузере отобразится по центру страницы!


    Этот текст будет выровнен по правому краю!


    А этот большой кусок текста браузер выровняет по ширине, т.е. одновременно по правому и левому краю! Для этого web-обозреватель вставит между словами дополнительные пробелы и абзац примет аккуратный вид, удобный для чтения!

    И так это отобразится в браузере:

    Заголовки в языке HTML

    Для выделения разделов текста на web-странице применяются заголовки. В html существует шесть уровней заголовков. Самым верхним уровнем является уровень 1 — тег

    , а самым нижним - уровень 6, тег

    . Теги

    —

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

    Синтаксис создания заголовков:





    Заголовки html


    Заголовок первого уровня


    Заголовок второго уровня


    Заголовок третьего уровня


    Заголовок четвертого уровня


    Заголовок пятого уровня

    Заголовок шестого уровня


    Результат:

    Также заголовки играют важную роль при раскрутке сайта, так как поисковики добавляют рейтинг тексту, если он находится внутри тега заголовка.

    Добавим заголовки в нашу страницу:

    Сайт об автомобилях.


    Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.


    Научным языком автомобиль это:


    Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.


    Классификация автомобилей


    Автомобили бывают следующих типов:


    Легковой;


    Грузовой;


    Внедорожник;


    Багги;


    Пикап;


    Спортивный;


    Гоночный.

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

    Теги

    -

    , как и тег

    Используют атрибут align для выравнивания текста. При использовании этого атрибута все аналогично как с тегом

    Нумерованные и маркированные списки в HTML

    Список применяется для того, чтобы сформировать пронумерованный или непронумерованный перечень каких-либо фраз или значений. Список с пронумерованными пунктами называется нумерованным , а с непронумерованными пунктами — маркированным .

    В маркированных списках пункты помечаются маркерами, которые ставятся левее пунктов списка. Web-браузер отображает список с отступом слева и самостоятельно расставляет необходимые маркеры или нумерацию. Списки и их пункты относятся к блочным элементам Web-страницы.

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

  • . Затем все элементы помещаются внутрь тега
      , если нужен маркированный список, или внутрь тега
        , если нужен нумерованный список.




        Заголовки html


        Маркированный список:


        • первый пункт.

        • второй пункт.

        • третий пункт.

        Нумерованный список:

        1. первый пункт нумерованного списка.

        2. второй пункт нумерованного списка.

        3. третий пункт нумерованного списка.



        И выглядят они примерно так:

        В маркированных списках могут применяться различные типы маркеров. Для определения типа маркера в тег

          добавляется атрибут type, если мы хотим задать вид маркера для всех элементов списка или добавить это же атрибут в тег
        • если необходимо задать вид маркера для конкретного элемента. Атрибут type может принимать следующие значения:

          • disc — закрашенная окружность;
          • circle — окружность;
          • square — квадрат.

          По умолчанию атрибут type равен disc. Пример использования:


          • Пункт 1

          • Пункт 2

          • Пункт 3



          • Пункт 1

          • Пункт 2

          • Пункт 3



          • Пункт 1

          • Пункт 2

          • Пункт 3

          Отображение в браузере:

          Нумерованный список также поддерживает атрибут type, с помощью которого можно задавать следующие типы маркера:

          • A — заглавные латинские буквы;
          • a — строчные латинские буквы;
          • I — заглавные римские цифры;
          • i — строчные римские цифры;
          • 1 — арабские цифры.

          По умолчанию в нумерованном списке атрибут type устанавливает в качестве маркеров арабские цифры. Кроме атрибута type нумерованный список поддерживает атрибут start , который задает число с которого будет начинаться список. В спецификации HTML5 для нумерованного списка появился еще атрибут reversed, который меняет нумерацию на обратный порядок. Т.е. вместо 1, 2, 3 список будет нумероваться 3, 2, 1. Но атрибут reversed поддерживается еще очень малым количеством браузеров.

          Списки можно помещать друг в друга, создавая вложенные списки. Вложенный список помещается внутрь элементов

        • внешнего списка:


          • первый пункт.

          • второй пункт.

            • первый пункт вложенного списка.

            • второй пункт вложенного списка.

            • третий пункт вложенного списка.



          • третий пункт.

          И в браузере:

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

          . Внутри него помещают пары «термин - определение». Термины заключают в парный тег
          , а определения - в парный тег
          :


          Термин 1

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

          Термин 2

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

          Отображение в браузере:

          На нашей Web-странице есть абзац классификации автомобилей. Сделаем эту классификацию при помощи маркированного списка:


          • Легковой;

          • Грузовой;

          • Внедорожник;

          • Багги;

          • Пикап;

          • Спортивный;

          • Гоночный.

          И посмотрим результат:

          Горизонтальные линии

          Для разделения или дополнительного выделения блоков текста в HTML есть одинарный тег HR — горизонтальная линя . Так это выглядит в коде html:

          Первый абзац



          Второй абзац

          И вот как это отображается:

          Горизонтальная линия HTML растягивается по горизонтали на всю ширину Web-страницы и имеет один-два пиксела в толщину, в зависимости от используемого браузера.

          С помощью атрибутов можно задавать внешний вид горизонтальной линии. Тег

          поддерживает следующие атрибуты:

          • align — определяет выравнивание линии;
          • color — задает цвет линии;
          • size — устанавливает толщину линии в пикселях;
          • width — устанавливает ширину линии в пикселях.

          Вставим горизонтальную линию на нашу WEB-страницу. Сделаем ее зеленым цветом, толщиной в 1 пиксель и шириной 320 пикселей:

          Сайт об автомобилях.


          Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.


          Научным языком автомобиль это:


          Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.



          Классификация автомобилей


          Автомобили бывают следующих типов:



          • Легковой;

          • Грузовой;

          • Внедорожник;

          • Багги;

          • Пикап;

          • Спортивный;

          • Гоночный.

          Результат будет примерно таким:

          Структура HTML-документа. Начинаем работу.

          С чего начинается HTML

          Для того, чтобы текстовый файл превратился в HTML-файл, поменять его расширение с ".txt" на ".html" недостаточно. Надо соблюсти "правило первой строки":

          Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML !DOCTYPE , которая обычно выглядит так:

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

          Пример самого короткого HTML-документа:

          С чего начинается работа

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

          Затем, между тегами и следует разместить заголовок и тело документа. Вот и все! Начало положено – вы получили прекрасную заготовку. Вот как должен выглядеть ваш базовый HTML-файл перед началом работы:

          Разжевать?

          Если приведенный выше пример пояснить схематически, получится следующее:

          Из схемы видно, что документ состоит из двух основных блоков – "заголовка" и "тела документа". Заголовок определяется с помощью элемента HEAD , а тело – элементом BODY .

          Заголовок содержит "техническую" информацию о документе, хотя чаще всего используется только для обозначения его названия (см. элемент TITLE ).

          Тело документа – святая святых. Именно в нем находится все то, что отображается на странице: текст, картинки, таблицы. Соответственно, делаем вывод: большинство ваших HTML-экспериментов будет проводиться в пространстве между тегами и

          (HTML 1.0) – Comment ()

          Используется для создания комментариев в любой части документа. Все, что находится внутри , будь то элемент или текст – будет проигнорировано браузером (не будет обрабатываться и выводиться на экран).

          Примечания:

          Комментарии, расположенные внутри элемента TITLE (как, впрочем, и любые другие теги) трактуются как текст и будут видны в заголовке документа. Иначе говоря, тег внутри TITLE не действует.

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

          Заголовок html-документа

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

          Элементы, относящиеся к заголовку документа:

          Определяет начало и конец заголовка документа

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

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

          Используется для вставки в документ таблицы стилей CSS

          Описывает взаимосвязь документа с другими объектами

          Используется для вставки метаданных

          (HTML 1.0) – Head

          Определяет начало и конец заголовка документа. Является контейнером для элементов, содержащих техническую информацию о документе. (TITLE ,BASE ,STYLE ,LINK ,META ).

          (HTML 2.0) – Title

          Определяет имя всего документа. Имя, как правило, отображается в заголовке окна браузера. Данный элемент обязателен для любого HTML-документа и может быть указан не более одного раза.

          (HTML 3.2) – Base URL

          Указывает базовый адрес текущего документа (URL), который станет отправной точкой для расчета относительных адресов внутри документа. Элемент не имеет конечного тега. Обязательно присутствие хотя бы одного из атрибутов.

          Атрибуты:

          HREF – определяет базовый адрес (URL) текущего документа.

          TARGET – определяет имя фрейма, которое будет использоваться в гиперссылках по умолчанию. Это может вам пригодиться, если вы хотите открывать все ссылки документа в другом фрейме.

          (HTML 3.2) – Style

          Используется для вставки в документ таблицы стилей (CSS – Cascade Style Sheet).

          Атрибуты:

          TYPE – обязательный атрибут. Определяет MIME-тип вставляемого блока стилей. Как правило, значением этого атрибута является "text/css".

          TITLE – определяет имя создаваемой таблицы стилей. Необходим, если вы собираетесь использовать несколько элементов STYLE в одном документе. В этом случае браузер должен спросить пользователя, какой из предложенных стилей будет применен к документу.

          (HTML 2.0) – Link

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

          Атрибуты:

          HREF – определяет URL объекта.

          REL – определяет тип взаимосвязи текущего документа с объектом, определенным атрибутом HREF. Возможные значения:

          stylesheet – указывает на файл, содержащий таблицу стилей (CSS) для текущего документа. Браузер загрузит css-файл с указанного в атрибуте HREF адреса и применит его к текущему документу (см. также элемент STYLE ) home – указывает на заглавную страницу вашего сайта toc, contents – указывают на файл, содержащий оглавление данного документа. index – указывает на файл, содержащий информацию для индексного поиска по текущему документу. glossary – указывает на файл, содержащий перечень терминов, относящихся к текущему документу. copyright – указывает на страницу сайта, в которой говорится о его создателях, авторских правах и т.п. up, parent – указывает на "родительскую" страницу (документ, стоящий на ступеньку выше в иерархической структуре вашего сайта). child – указывает на "дочернюю" страницу (документ, стоящий на ступеньку ниже в иерархической структуре вашего сайта). next – указывает на следующую страницу в последовательности документов (напр. следующую страницу электронного каталога, документации или словаря). previous – указывает на предыдущую страницу в последовательности документов. last, end – указывает на последнюю страницу в последовательности документов. first – указывает на первую страницу в последовательности документов. help – указывает на страницу с подсказкой (напр. по навигации по вашему сайту).

          TYPE – определяет MIME-тип для объекта, указанного в атрибуте HREF.

          Примечания:

          (HTML 2.0) – Meta

          Элемент МЕТА используется для техописания документа, которое представляет собой метаданные в виде пары "имя-значение". С помощью этого элемента в заголовок документа внедряется дополнительная полезная информация, невидимая для пользователя, но порой просто незаменимая для правильной индексации вашей страницы роботами поисковых серверов. Элемент не имеет конечного тега.

          Атрибуты:

          NAME – определяет имя мета-записи. Существует множество предопределенных имен, некоторые из которых вы можете увидеть в указанном ниже примере.

          HTTP-EQUIV – определяет имя мета-записи. Практически аналогичен атрибуту NAME, но используется лишь в случае необходимости передачи дополнительной информации в HTTP-заголовке.

          CONTENT – присваивает значение мета-записи, определенной в атрибуте NAME (или HTTP-EQUIV).

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

          Элементы для создания фреймов и работы с ними:

          Примечания:

          FRAMESET

          (HTML 4.0) – Frame Set

          Определяет фреймовую (оконную) структуру документа: размеры и расположение фреймов на странице. Создаётся вместо тела документа (то есть элемент BODY в документе не используется). Открывает и закрывает список фреймов, определяемых с помощью элемента FRAME . Между начальным и конечным тегами кроме элементов FRAME и NOFRAMES могут находиться другие элементы FRAMESET . То есть элемент FRAMESET поддерживает вложенные конструкции фреймов.

          Атрибуты:

          ROWS – определяет количество и размеры горизонтальных фреймов (фреймов-строк) в окне браузера. В качестве значения задается список размеров фреймов через запятую. Способы задания размеров:

          В процентах от высоты рабочей области окна браузера. Например: "30%,30%,40%"; в виде знака "*" (звездочка), говорящего о том, что фрейм занимает все свободное пространство окна браузера, незанятое другими фреймами с явно указанными размерами. Например, звездочка в записи "25%,25%,*" равносильна 50%; в пикселах. Например: "75,*";

          Все три способа можно совмещать. Например, "25%,40,*" разобъет экран на три горизонтальных фрейма, первый из которых будет высотой в четверть окна браузера, второй – в 40 пикселов, а третий займет всю оставшуюся площадь.

          COLS – определяет количество и размеры вертикальных фреймов (фреймов-столбцов) в окне браузера. В качестве значения задается список размеров фреймов через запятую. Размеры задаются так же, как и в предыдущем атрибуте ROWS.

          BORDER – определяет ширину рамок фреймов в пикселах. Данный атрибут действует только в браузерах Netscape;

          FRAMEBORDER – определяет наличие рамок у содержащихся внутри FRAMESET фреймов. Возможные значения:

          Yes – отображать рамки; No или 0 – не отображать рамки;

          Браузеры Netscape не поддерживают данный атрибут в полной мере и для глобального определения ширины рамок используют атрибут BORDER.

          FRAMESPACING – определяет расстояние (так называемую "серую область") между фреймами в пикселах. Данный атрибут необходим для создания фреймов без рамок.

          Примечание:

          (HTML 4.0) – Frame Определяет фрейм и его свойства внутри FRAMESET -структуры. (см. элемент FRAMESET ) Атрибуты:

          SRC – обязательный атрибут. Указывает адрес (URL) HTML-файла, отображаемого в данном фрейме.

          NAME – определяет имя данного фрейма, которое будет в дальнейшем использоваться для ссылки на него из других документов с помощью атрибута TARGET (см. элемент A ). В качестве значения нужно указать любое имя без пробелов с использованием латинских символов и цифр. Имя не должно начинаться с цифр и специальных символов.

          MARGINWIDTH – определяет ширину (в пикселах) левого и правого полей фрейма. Если атрибут не указан, браузер самостоятельно определит оптимальный размер отступа.

          MARGINHEIGHT – определяет ширину (в пикселах) верхнего и нижнего полей фрейма. Если атрибут не указан, браузер самостоятельно определит оптимальный размер отступа.

          SCROLLING – определяет наличие линеек прокрутки содержимого фрейма. Возможные значения:

          yes – отображать линейки прокрутки. no – не отображать линейки прокрутки. auto – отображать линейки прокрутки при необходимости (если документ, указанный в атрибуте SRC, не умещается во фрейме).

          NORESIZE – не позволяет изменять размеры фрейма. Данный атрибут является флагом и не требует указания значения.

          FRAMEBORDER – определяет наличие рамок у фрейма. Возможные значения:

          yes – отображать рамки; no или 0 – не отображать рамки;

          Браузеры Netscape не поддерживают данный атрибут в полной мере и для глобального определения ширины рамок используют атрибут BORDER элемента FRAMESET .

          Пример (файл index.html):

          ... Ваш браузер не поддерживает фреймы ...

          В результате окно браузера разделится на три фрейма, как показано ниже. Причем frame1.html будет иметь ширину 265 пикселов, а frame2.html – высоту 165.

          NOFRAMES

          (HTML 4.0) – No Frames

          Все, что находится между начальным и конечным тегами данного элемента, будет отображено браузером, если он не поддерживает фреймы. Элемент NOFRAMES не имеет атрибутов и должен находиться внутри элемента FRAMESET .

          Пример:

          Ваш браузер не поддерживает фреймы. Обыдно, да?

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

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

          Давайте разберем структуру html документа чтобы понимать, как все работает. Вы узнаете, какой каркас должен присутствовать на странице чтобы она считалась валидной (правильной ).

          Чтобы создать любую веб-страницу, в ней должен присутствовать минимальный набор тегов. Они расположены в примере ниже.

          Как создать сайт в интернете

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


          Визуальный пример html страницы

          Тег DOCTYPE

          Тег DOCTYPE всегда идет в самом начале веб-страницы. Он необходим для указания типа текущего документа. А также помимо этого браузер понимает какая версия html используется.

          В последней версии 5 он имеет такой вид:

          Тег HTML

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

          Как правило, открывающий тег html идет вторым после определения документа при помощи doctype . Закрывающий всегда идет на странице последним.

          Этот тег сообщает браузеру, где наш html документ начинается и где заканчивается. Поэтому все остальные элементы (кроме doctype ) должны быть вложены внутри этого контейнера.

          Тег head

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

          Содержимое head не отображается напрямую на веб-странице, кроме тега title . Он отвечает за заголовок страницы.

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

          Тег title

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

          Отнеситесь к этому серьезно!

          В данном элементе рекомендую использовать название не более 60 символов с пробелами. Это нужно чтобы оно не обрезалось в поисковой выдаче. И обязательно вписываем сюда осмысленные слова. То есть конкретно пишем, о чем будет страница.

          Профессиональное создание сайта в интернете с примерами

          Конечно же, при этом нужно вставлять ключевые слова и делать свое название более привлекательным. Иначе вы просто рискуете потерять трафик с поиска.

          Тег meta

          Еще один элемент, это тег meta. Он не парный и особой ценности не представляет. Однако наиболее важными элементами являются его атрибуты.

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

          Давайте к элементу я пропишу параметр charset и в нем укажу предпочтительную кодировку документа.

          Профессиональное создание сайта в интернете с примерами

          Обратите внимание, как указывается параметр. Его вставляем внутри тега и перед правой закрывающей скобкой. Далее ставим знак равно и в кавычках указываем кодировку документа.

          Обязательно ее указывайте в своих документах. Иначе на вашем сайте вместо текста появятся некрасивые иероглифы (кракозябры ).

          Тег body

          Чуть ниже идет тег body. Это основное тело документа. Внутри него находится тот контент, который виден пользователю. Это может быть текст, картинки, ссылки, видео и так далее.

          Обратите внимание, что body всегда идет ниже тега head . То есть сначала идет техническая информация о странице и только потом основной контент для пользователя. Но никак не наоборот!

          Внутри body обязательно должен присутствовать тег h1. Это заголовок материала. То есть, как будет называться ваша статья. Рекомендую название делать не более 55 символов с пробелами.

          Синтаксис html

          Немного стоит упомянуть и про синтаксис html. Сразу старайтесь располагать теги в таком удобном виде, как на примере выше. Конечно же, можно расположить их и в хаотичном порядке.

          Профессиональное создание сайта в интернете с примерами

          Здесь размещается содержание документа, которое видно всем пользователям.

          Браузеру будет все равно.

          Он по-любому отобразит страницу правильно. Но вам самим будет очень неудобно редактировать html код страницы. Поэтому рекомендую не лепить и делать аккуратно.

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

          Название документа

          Название материала

          Основной текст

          То есть тег head должен идти отступом в одну табуляцию относительно тега html . Body идет на уровне с head поскольку он тоже вложен в контейнер html .

          В общем, для быстрой и удобной работы с исходным кодом обязательно соблюдайте отступы по уровню вложенности элементов.

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

          Название документа

          Основной текст

          При большой вложенности этот метод поможет сэкономить место и не потеряться в структуре html.

          Как вы знаете, теги можно вкладывать друг в друга. Например, текст и картинка находятся в разных тегах. Однако при этом они имеют общий родительский элемент.

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

          Важно четко соблюдать порядок!

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

          Правильный пример:

          Здесь размещается содержание документа, которое видно всем пользователям.

          Неправильный пример:

          Здесь размещается содержание документа, которое видно всем пользователям.

          Кроме того, в один тег могут быть вложены несколько элементов. Но принцип тут тот же самый. Сначала мы открываем его. Затем вкладываем туда несколько тегов и потом закрываем.

          Для наибольшей удобности дополнительно можно использовать html комментарии в коде. Например, прописать за что отвечает данный кусок кода. Это очень полезно при разработке.

          Сам комментарий может быть, как однострочным, так и многострочным.

          Название документа

          Основной текст

          Прописывается он между конструкциями .

          Как создать файл html

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

          • Brackets
          • Блокнот
          • Notepad++
          • Sublime Text
          • Atom и другие

          Если у вас Windows, то Блокнот будет уже доступен по умолчанию. Но им не удобно пользоваться. Рекомендую для начала использовать бесплатный редактор html страниц Notepad++. В нем есть много возможностей для удобной работы с кодом.

          Когда запустите редактор, то перед вами уже будет новый пустой файл. Пропишите в нем тот скелет html страницы (каркас ), который мы выше разбирали. Он должен всегда присутствовать.

          Профессиональное создание сайта в интернете с примерами

          Как создать сайт в интернете

          Здесь размещается содержание документа, которое видно всем пользователям.

          Текст можете изменить под себя. В общем, это будет самая простая html страница.

          HTML кодировка

          При создании страниц всегда прописывайте кодировку в meta теге. Это служебный тег, который вставляют в head .

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

          Сейчас у нас он играет роль указателя кодировки. Здесь есть специальная запись. Она говорит браузеру о том, что данный документ создан в кодировке utf-8 .

          Для чего вообще нужна кодировка?

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

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

          Когда мы заходим на страницу, браузер уже понимает, на каком языке написан сайт. Также он понимает какой язык для текста используется. Соответственно, он пытается отобразить этот текстовый контент в зависимости от заданной кодировки.

          К сожалению, это не всегда получалось.

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


          Неправильно задана html кодировка

          Как решение этой проблемы была создана универсальная кодировка utf-8.

          Когда она стала уже стандартом, отпала необходимость указывать конкретную кодировку для определенного языка. Достаточно было указать универсальную utf-8 и у вас сайт отображался бы нормально во всех браузерах.

          При этом упрощается еще работа и с базой данных. Поэтому здесь имейте в виду, что кодировку мы всегда будем указывать в utf-8. Но тут нужно обратить свое внимание еще на одну вещь.

          Сохраняем html utf-8

          Чтобы все работало и браузер отображал страницу, желательно сохранить сам html документ в utf-8. В этом программа Notepad ++ нам очень хорошо помогает.

          Здесь есть пункт «Кодировки». Если у вас сейчас кодировка не стоит (как у меня на нижнем рисунке ), то щелкните по пункту «Преобразовать в UTF-8 без BOM».

          В этом случае ваш html файл будет преобразован в кодировку utf-8. Сохраните изменения.

          В правом нижнем углу вы найдете надпись «Dos\Windows ANSI as UTF-8». Это значит, что документ создан в режиме utf-8 и отображение будет нормальным.

          И сразу такой совет!

          Зайдите в «Опции» —> «Настройки». Здесь есть вкладка «Новый документ». Сразу поставьте галочку на «UTF-8 без метки BOM». Так у вас все новые документы будут сразу создаваться в этой кодировке.

          Как сохранить html страницу

          Имя файла может быть любое. Но по умолчанию и особенно если это главная страница сайта, то сохраняйте ее как index.html .

          Когда набираем адрес сайта без указания конкретной страницы, это значит, что мы запрашиваем страницу index.html. То есть, когда мы обращаемся к серверу, он развернет именно индексную страницу.

          Если же мы указываем какую-то конкретную страницу, то в итоге она и будет выводиться. Но если адрес не указан, то будет возвращена индексная страница. Поэтому по умолчанию мы называем страницу index.html.

          И как вы уже должны заметить, расширение файла должно быть html . То есть в типе файла выбираем «Hyper Text Markup Language» и нажимаем «Сохранить».

          Как открыть html файл

          Как открыть html файл чтобы посмотреть наглядное отображение страницы. Для этого используем любой браузер: Google Chrome, Opera, Edge, Mozilla Firefox, Safari и другие.

          Не зря мы сохраняем файлы с расширением html. Ведь только этот тип документа воспроизводят браузеры. А сам язык HTML — это стандарт разметки страницы для последующего воспроизведения браузерами.

          В общем, кликаем по файлу правой кнопкой мыши.

          В меню наводим на «Открыть с помощью» и выбираем нужный вариант браузера. Если они не отобразятся, то кликаем на «Выбрать другое приложение». Там уже среди списка выбираем нужную программу для чтения html страниц.

          Если же вам нужно отредактировать код, то выбираем подходящие редактор. Рекомендую использовать Notepad++.

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

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

          Посмотреть код очень просто. Достаточно нажать сочетание клавиш Ctrl + U . В новой вкладке вам откроется исходный код страницы сайта.


          Исходный код сайта

          Еще можно в адресной строке прямо перед адресом страницы прописать:

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


          Инструмент разработчика в браузере

          Во вкладке «Elements» слева будет html код, а справа . Удобен такой инструмент тем, что в нем можно править код и сразу посмотреть результат. Также при редактировании могут высвечиваться подсказки. Это тоже полезно.

          На этом все!

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

          • 1. HTML-документы – это структурные документы.
          • 2. Названия элементов можно писать в любом регистре.
          • 3. Названия атрибутов можно писать в любом регистре.
          • 4. Значения атрибутов зависят от регистра, особенно адреса (особенность Unix-операционных систем состоит в различной трактовке символов в разных регистрах, поэтому файлы

          picture .gif и picture.GIF различны!).

          • 5. Названия элементов не могут содержать пробелов.
          • 6. Если значения атрибутов содержат пробелы, они должны стоять в кавычках.
          • 7. Дополнительные пробелы, символы табуляции и возврата каретки игнорируются и сжимаются в один пробел.
          • 8. Элементы могут быть вложены друг в друга. При этом должно соблюдаться правило вложенности. Внутри вложенного элемента помимо открывающего тега должен быть и закрывающий. Пересечения некорректны:

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

          9. Незнакомые элементы и атрибуты игнорируются браузерами ("снисхождение к ошибкам").

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

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

          Комментарии в HTML. Как любой язык, HTML позволяет вставлять в тело документа комментарии, которые сохраняются при передаче документа по сети, но не отображаются браузером. Часто в комментарии "прячут" некоторые теги или целые синтаксические конструкции от старых версий браузеров, которые не способны их обработать. Комментарии могут встречаться в документе где угодно и в любом количестве. Необходимо помнить, что комментарии увеличивают объем документа, а следовательно, и время загрузки.

          Общая заголовочная часть документа. Тег заголовочной части документа должен быть использован сразу после тега и более нигде в теле документа. Данный тег представляет собой общее описание документа. Стартовый тег помещается непосредственно перед тегом и другими тегами, описывающими документ, а завершающий тег </head> размещается сразу после окончания описания документа.</p> <p><b>Заголовок документа. </b>Большинство веб-браузеров отображают содержимое тега <TITLE> в заголовке окна, содержащего документ, и в файле закладок, если он поддерживается веб-бра- узером. Заголовок, ограниченный тегами <TITLE> и , размещается внутри тегов . Заголовок документа не появляется при отображении самого документа в окне.

          Теги тела документа. Теги тела документа идентифицируют отображаемые в окне компоненты HTML-документа. Тело документа может содержать ссылки на другие документы, текст и другую форматированную информацию.

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

          Уровни заголовков <Нх>. Первый уровень заголовков (самый большой) обозначается цифрой 1, следующий – 2, и так до цифры 6. Большинство браузеров поддерживает интерпретацию шести уровней заголовков, определяя каждому из них собственный стиль. Для большинства случаев текст такого заголовка станет жирным, и после текста будет отбита пустая строка. Важным является то, что эти теги определяют логическую структуру документа, участвуют в индексации поисковыми системами Интернет. Заголовки выше шестого уровня не являются стандартом и могут не поддерживаться браузером.

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

          Тег предформатированного текста 

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

          Теги списков.
Существует три основных вида списков в HTML-документе: нумерованный, маркированный, список описаний.
          

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

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

           
             и завершается тегом 
           
        • .
          

          Маркированные списки. Для
маркированных списков браузер обычно использует маркеры для элемента списка. Вид маркера, как правило, настраивает пользователь браузера.
          

          Пронумерованный список начинается стартовым тегом 
             и завершается тегом 
          . Каждый элемент списка начинается с тега <ы>.
          

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

          Графика внутри HTML-документа.
Одна из наиболее привлекательных черт WEB – возможность включения графических и иных типов данных в HTML-документ.
          

          Существует два способа использования графики в HTML-документах. Первый – внедрение графических образов в документ, что позволяет пользователю видеть изображения непосредственно в контексте других элементов документа. Делается это при помощи тега . Этот тег точечный, т.е. он не закрывается. Синтаксис тега:
          

          

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

          рисунок. Рисунок должен храниться в графическом формате, поддерживаемом браузером. На сегодняшний день это форматы GIF, JPG, PNG. Они поддерживаются большинством браузеров.
          

          АLТ="текст"
          

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

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

          Гипертекстовые ссылки являются ключевым компонентом, обусловливающим привлекательность WEB для пользователей. Добавляя гипертекстовые ссылки (далее – ссылки), пользователь делает набор документов связанным и структурированным, что позволяет получать необходимую ему информацию максимально быстро и удобно.
          

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

          Структура ссылок в HTML-документе.
Для того чтобы браузер отобразил ссылку на URL, необходимо поместить текст или картинку внутрь тега гиперссылки. Синтаксис HTML следующий:
          

          <А HREF="URL">текст-или-картинка-которые-будут-п одсвечены-как-ссылка 
          


          Тег <А HREF="URL"> открывает описание ссылки, а тег  – закрывает его. Любой текст, находящийся между данными двумя тегами, подсвечивается специальным образом веб-браузером. Обычно этот текст отображается подчеркнутым и выделенным цветом. Изображение обрамляется прямоугольной рамкой. Текст, обозначающий URL, не отображается браузером, а используется только для выполнения предписанных им действий при активизации ссылки (обычно при щелчке мыши на подсвеченном или подчеркнутом тексте).
          

          Ссылки на метки внутри документа.
Можно делать ссылки на различные участки или разделы одного и того же документа, используя специальные скрытые метки для этих разделов. Это позволяет быстро переходить от раздела к разделу внутри документа, не используя прокрутку экрана. Как только пользователь щелкнет на ссылке, браузер переместит его на указанный раздел документа, а строка, в которой стоит метка данного раздела, будет размещена на первой строке окна браузера (если хватит "длины" документа в окне браузера).
    • Читать еще: