Подготовка почвы: поговорим об HTML. Структура HTML-документа: основные теги, пример Основное назначение языка разметки html

Что такое HTML и для чего он предназначен - 3.7 out of 5 based on 3 votes

Прежде чем приступить к изучению , предлагаю рассмотреть, что такое html и для чего он предназначен.

HTML расшифровывается как, Hyper Text Markup Language, что можно перевести как язык гипертекстовой разметки. При помощи данного языка создаются интернет страницы.

HTML не является языком программирования. Он предназначен для разметки текстовых документов. Т. е. по большому счету с помощью его мы осуществляем форматирование текста.

И так каким же образом при помощи языка HTML мы можем редактировать текст? Дело в том, что язык ХТМЛ состоит из тэгов (tags). Каждый тэг определяет, каким образом будет выглядеть текст на вашей страничке.

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

Поэтому сам код вы не видите, браузер на экран вашего монитора выводит уже готовый отформатированный текст и графику. Если же вы хотите увидеть сам html код и теги, с помощью которых происходит форматирование текста, который Вы сейчас читаете, то пройдите в вашем браузере Internet Explorer в пункт меню > вид и из раскрывающегося списка выберите пункт > источник. Смотрите на рисунок.

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

Но на самом деле ХТМЛ теги могут не только форматировать текст, с помощью них вы можете вставлять изображение на страницу, создавать таблицы, создавать ссылки и многое другое.

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

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

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

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

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

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

Для создания ХТМЛ страниц можно использовать специальные программы, такие как , а можно создавать страницы при помощи простого текстового редактора, который имеется в любой версии Windows.

Курс «Создание Web-страниц средствами языка HTM L »

Тема 1. Начальные сведения о языке HTML

Назначение языка HTML

Web -страницы – это специальные файлы, написанные на языке HTML (Hyper Text Markup Language – язык разметки гипертекста) . Под разметкой понимается вставка в текст специальных кодов (тегов), определяющих то, как итоговый гипертекстовый документ должен отображаться специальной программой - броузером.

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

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

Язык HTML появился одновременно со службой Worl d Wide Web и развивался вместе с ней. Он является основой Worl d Wide Web и одновременно причиной ее широчайшей популярности.

HTML - файл

HTML - файл – текстовый файл, имеющий расширение .htm или . html Web -страница хранится в виде HTML - файла. Для создания HTML - файла могут использоваться как простые текстовые редакторы, такие как Блокнот или Word Pad , так и редакторы Web.

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

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

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

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

    Сам текст документа располагается в теле документа . Тело документа располагается между тегами и BODY >. На практике определить место положения этих основных тегов можно и при их отсутствии. Поэтому, если теги, и , а также соответствующие им закрывающие теги опущены, то программа - броузер может сама определить то место, где они должны были находиться. Но всё-таки при создании Web-страниц опускать эти теги не рекомендуется.

Простейший правильный документ HTML.

< HEAD >

< TITLE >Заголовок документа TITLE >

HEAD >

< BODY >

BODY >

Теги HTML

Язык HTML состоит из специальных разметочных указателей – тегов. Их также можно назвать командами, инструкциями или кодами языка HTML.

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

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

Существует два типа тегов – парные и непарные.

Парные теги – открывающие и закрывающие, аналогичные круглым скобкам алгебраического выражения. Они влияют на текст с того места, где употреблены, до того места, где указан признак окончания их действия (закрывающие теги начинаются с символа косой черты (/).

Например, < HTML > HTML >, < P > P >, H 3>

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

Например,
, ,

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

Пример.

Пример создания таблицы

Из примера видно, что страничка использует кодировку W indows-1251 - наиболее распространенную на сегодняшний день, достаточно лишь каждый раз вставлять этот тэг в таком виде на свою страничку; автор страницы – Иванов Иван; страница посвящена животным.

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

Атрибуты тегов

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

Атрибуты – это дополнительные ключевые слова, отделенные от ключевого слова тега и друг от друга пробелами.

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

    символов английского алфавита;

  • промежутков времени;

    дефисов (-).

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

    символов английского алфавита (A - Z , a - z )

    цифр (0 - 9 )

    промежутков времени

    дефисов (- )

Таким образом, WIDTH=80 и ALIGN=CENTER - разрешенное сокращение для WIDTH="80" и ALIGN="CENTER" .
Закрывающие теги не содержат атрибутов.

Примеры. FONT >

Комментарии

Подобно тому, как во всех языках программирования есть возможность внесения в программу комментариев (текстовых строк, не являющихся частью программы), есть она и в языке HTML. Начинается комментарий со специального тега. Комментарий может включать в себя любые символы, кроме символа “больше” (>), и, таким образом, не может включать в себя теги.

Принцип наследования тегов

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

<начало 2-го тега>

текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

<начало 3-го тега>
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

<Конец 3-го тега>

<Конец 2-го тега>

<Конец 1-го тега>

Отступы от левого края не случайны - они автоматически выставляются программами, формирующими код HTML для упрощения его восприятия. Достаточно понимать, что чем дальше от левого края отстоит тег, тем "глубже" он лежит, тем большее количество "старших" тегов может на него действовать.

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

Практическая работа № 1

«Создание простейшей Web -страницы»

Цель: научиться создавать Web -страницы в текстовом редакторе Блокнот.

Указания к выполнению

    Наберите в нём структуру HTML -документа, которая приведена ниже:

О братьях наших меньших.

Здесь будет размещено содержание Web-страницы

    Сохраните файл, присвоив ему имя index .htm .

    Откройте созданный файл. Вы увидите, как выглядит созданный вами файл в окне браузера.

    Закройте браузер.

    Вернитесь к сохранённому в Блокноте файлу.

Внесите в него следующие изменения: вместо слов «Здесь будет размещено содержание Web -страницы», наберите следующие:Это моя первая страничка .

В строке < TITLE > укажите: «Домашняя страничка (ваше имя и фамилия)».

    Сохраните файл как page 2.htm .

    Просмотрите результат в браузере, при необходимости отредактируйте файл при помощи Блокнота.

Тема 2. Теги HTML

Теги физического и логического форматирования текста

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

Рассмотрим более подробно стандартные элементы языка HTML, позволяющие форматировать текст.

Шрифт - это таблицы замены кода видимым изображением.
Каждая клавиша вашей клавиатуры дает определенный код, распознаваемый ОС (операционной системой, в большинстве случаев это Windows или Linux/Unix).
Таким образом, выбрав определенный шрифт, система заменяет полученный с клавиатуры код на сопоставленное в таблице символов шрифта изображение буквы или значка. Каждый шрифт - это файл. Файл, содержащий изображения букв, цифр и символов, назначаемых на каждую кнопку. Установить шрифт - означает включить в систему файл с дополнительными таблицами сопоставления. В системах MS Windows обычно используется несколько шрифтов, поставляемых вместе с системой - это:

Arial

Ариал

Courier New

Курьер Нью

Comic Sans

Комик Санс

Times New Roman

Таймс Нью Роман

Verdana

Вердана

Каждый из этих шрифтов уместен в своем дизайне и стиле. Наиболее распространен - Ариал. Все эти шрифты есть у 90% всех посетителей вашей будущей странички. Каждый шрифт - это самостоятельный файл в папке Windows/fonts/ *.ttf. Как в HTML придать шрифту тот или иной вид?
< FONT >… FONT > определение типа, размера и цвета шрифта . Все эти характеристики определяются при помощи соответствующих атрибутов.

Абсолютный размер шрифта задается атрибутом si ze (размер) . Этот атрибут может принимать значения от 1 до 7, при этом шрифт 1-го размера - самый маленький, а 7-го – самый большой.
Примеры.

текст размера 1
текст размера 2
текст размера 3
текст размера 4
текст размера 5

текст размера 6
текст размера 7

Тише едешь – дальше будешьONT >.
В дизайне обычно используются первые четыре размера. Все, что выше, дурной тон и признак дилетантства, ибо занимает слишком много места и трудно читается. Правда, и большим размерам находится применение. Например, седьмым размером можно писать буквицу (первую букву начала главы): Т екст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст.
Кроме прочего, мы можем выбрать и сам шрифт, используемый для отображения текста. Делается это атрибутом face (вид).

Примеры. Это шрифт arial размером 3 ONT >
текст FONT >
Как видим, э ти два атрибута - размер и вид шрифта, - можно расположить в любой последовательности в теге :
Можно также использовать атрибут color (цвет). Название цвета задается либо числом, написанным в шестнадцатеричной системе, например, co lor=”#ff 0000”, либо просто его названием, написанным на английском языке, например, color =”red ”.Примеры. Это шрифт синего цвета FONT >
Это шрифт arial размером 3, цвет синий FONT >
Шрифт так же может быть: наклонный (курсив), жирный, подчеркнутый, перечеркнутый, надстрочный, подстрочный, а также сочетающий в себе несколько указанных видов. Достигается это, соответственно, тегами:
< I > текст I >
< B >текст B >
< U > текст U >
< S > текст S >
< SUP > текст SUP >
< SUB > текст SUB >,
а также их сочетанием, например, <U > текст U >B >
Форматирование абзаца. В большинстве обычных документов основными функциональными разделами являются заголовки и абзацы. Web -документы не являются исключением. Для обозначения обычных абзацев в языке HTML используют тег

…P > (Paragraph ). Причем, можно использовать только начальный тег, так как следующий элемент

обозначает не только начало следующего абзаца, но и конец предыдущего. В тех случаях, когда по смыслу необходимо обозначить завершение абзаца, можно использовать и конечный тег.
Вместе с тегом абзаца можно использовать и атрибут align (выравнивание) :
align =”left ” – выравнивание по левому краю;
align =”right ” - выравнивание по правому краю;
align =”center ” - выравнивание по центру.
Пример.

Глава 1P >

АнимацияP >

стр. 3P >

В языке HTML нет средств для создания абзацного отступа (”красной строки”), поэтому для удобочитаемости текста между абзацами броузер обычно вводит пустую строку. Если нужно осуществить переход на новую строку без создания абзаца, используется одиночный тег
. В месте его размещения строка заканчивается, а оставшийся текст печатается с новой строки. Этот тег удобно использовать, чтобы, например, писать стихи в столбик:
Уронили мишку на пол,
Оторвали мишке лапу,
Все равно его не брошу,
Потому, что он хороший.
На экране браузера мы увидим стандартным образом написанное четверостишие.

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

Выравнивание

align = “left”

align = “ center”

align = “ right ”

align = “ justify ”

Толщина и длина линии в пикселях.

Size = 3(ширина в пикселях)

width= 300 (длина в пикселях)

width= 100% (длина в процентах)

Цвет линии

color =”red ”

Язык HTML поддерживает шесть уровней внутренних заголовков документа. Они помечаются тегами от

…

до
…
.
Заголовок первого уровня самый крупный, а шестого уровня – самый мелкий. Для заголовков можно использовать атрибуты выравнивания влево, по центру, вправо.
Пример. Самый большой заголовок
Самый маленький заголовок

Домашние животные

Логическое форматирование текста . В данном пункте мы рассмотрим теги, по своему эффекту очень напоминающие теги, задающие размер, цвет и начертание шрифта. Однако принципиальное различие заключается в том, что эти теги действительно описывают реальные свойства текста. Это означает, что текст может по разному отображаться в разных браузерах, но какой-то эффект гарантирован даже в том случае, когда по какой-то причине нет возможности применить шрифтовые эффекты. Все эти теги парные и воздействуют на текст, заключенный между открывающим и закрывающим тегами. Закрывающий тег обязателен.
Тег … используется для цитат, названий книг. Обычно изображается курсивом.
Так как язык HTML был создан людьми, связанными с компьютерами, целая группа тегов предназначена для представления текстов компьютерных программ и результатов взаимодействия пользователя с ними.
Тег < CODE >… CODE > указывает на исходный текст компьютерной программы, обычно отображается моноширинным шрифтом (чаще всего шрифт Courier), то есть шрифтом с фиксированным размером.
Тег < KBD >… KBD > оформляет текст, который должен быть (или был) введен с помощью клавиатуры, обычно отображается моноширинным полужирным шрифтом. От английского keyboard - клавиатура
Пример.

Для запуска Windows наберите: win .
Код :
Для запуска Windows наберите: win
Тег … отмечает текст как образец (sample). Используется для отметки текста, выдаваемого программами. Отображается моноширинным шрифтом.
Пример.
Это обычный текст
Тег … используется для выделения переменных в листинге программы. Обычно такой текст отображается курсивом. От английского var iable – переменная.
Пример .
A , B , C
Код:
 A , B , C var >

Тег < EM >… EM > используется для выделения элементов текста (обычно курсивом).
Тег < STRONG >… STRONG > используется для более сильного выделения элементов текста (полужирным шрифтом).
Пример.
Это обычный текст
А это уже текст с использованием тега .
Так как здесь используется смысловое выделение вместо оформительского, рекомендуется использовать эти теги вместо тегов и < B >.

Практическая работа № 2

“Форматирование текста на Web-странице”

Цель: научиться форматировать шрифт и текст на Web -странице.

Указания к выполнению

    В элементе < TITLE > укажите название странички “П/р № 2”.

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

Домашние животные

(заголовок H 1)

(выравнивание по центру)

Собаки

(заголовок H 2)

(выравнивание по центру)

Сторожевые

(выравнивание слева, полужирный шрифт)

Охотничьи

(выравнивание справа, полужирный шрифт)

Дрессировка

(выравнивание по центру, полужирный курсив)

Клубы Выставки Площадки

(выравнивание по центру, размер шрифта 10, цвет шрифта красный, шрифт Arial )

Стихотворение

(цвет шрифта синий, размер шрифта 6, выравнивание по центру)

По жизни я скромен,

Оваций не надо,

Но как же я классно

Смотрюсь у снаряда!

(выравнивание по левому краю, размер шрифта 6)

Создание списков

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

Теги создания ненумерованного списка:

< LI > UL >
Тег
  • является своеобразным обрамлением списка. Он позволяет отделять один список от другого. Тег
  • обозначает каждый из пунктов.

    Пример.


      Пункт 1 списка
      Пункт 2 списка
      Пункт 3 списка

    Вид на экране:

      Пункт 1 списка

      Пункт 2 списка

      Пункт 3 списка

    Теги создания нумерованного списка: < O L> < LI > OL >


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

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

    Пример.


      Пункт 1 списка
      Пункт 2 списка
      Пункт 3 списка
      O L>

      Вид на экране:

        Пункт 1 списка

        Пункт 2 списка

        Пункт 3 списка

      Способ нумерации задается при помощи атрибута type . В таблице приведены все способы нумерации:

      Вид нумерации

      Практическая работа № 3

      «Создание нумерованных и ненумерованных списков»

      Цель : научиться создавать списки на Web –страницах.

      Указания к выполнению :

      1 . Создайте новую Web –страницу в редакторе Блокнот.

      2 . В элементе укажите названия странички «П/р № 3».</p> <p><b>3 </b>. Отформатируйте следующий текст согласно указаниям (даны в скобках курсивом), как показано на рисунке:</p> <p>Солнце должно быть: </p> <p><i>(Шрифт размером 8, красного цвета, </i></p> <p><i>выравнивание по центру) </i></p> <p>1. Теплым.</p> <p>2. Круглым.</p> <p>3. Желтым.</p> <p>Снег должен быть: </p> <p><i>(Шрифт размером 6, синего цвета, </i></p> <p><i>выравнивание по центру) </i></p> <p>В. Холодным.</p> <p>С. Пушистым.</p> <p><i>(Шрифт обоих списков черный, размер 3). </i></p> <p><i><b>Гиперссылки<br></b> </i><i><u>Виды гиперссылок. </u> </i><i> </i><b>< </b><b>A </b> <b>>… </b><b>A </b> <b>> </b> создание гипертекстовой ссылки.<br>В этом теге обязателен атрибут <b>href </b> <b>. </b>Его значением является адрес URL, на который указывает ссылка. Текст ссылки размещают между тегами <b>< </b><b>A </b> <b>>… </b><b>A </b> <b>>. </b>При отображении документа в браузере текст ссылки обычно подчеркивается и изображается синим цветом. Щелчок на ссылке приводит к переходу по заданному адресу URL.</p> <p>Можно выделить несколько видов гиперссылок.</p> <ul><p>Внешние (связывают Web-страницу с документами, не принадлежащими данному Web-узлу).</p><p>Внутренние (связывают документы внутри одного и того же Web-узла).</p> </ul><p><i><u>Абсолютный путь. </u> </i><i> </i>Если гиперссылка внешняя, то указывается полный URL документа, называемый еще <i>абсолютным путем. <br>Пример. </i> <A href =”<u><span>http </u> </span><u>:// </u> <u><span>www </u> </span><u>. </u> <u><span>microsoft </u> </span><u>. </u> <u><span>com </u> </span> ”>Microsoft A ><br>Основное неудобство абсолютного пути заключается в том, что при переносе файлов на другой сервер в Интернете требуется менять все гиперссылки.</p> <p><i><u>Относительный путь. </u> </i><i> </i>Если гиперссылка внутренняя, то <b>указывается только та часть </b><b>URL </b> <b>, которая отличается у двух связываемых документов (</b>так называемый<i>относительный путь </i><b>), </b> например, если два документа находятся в одной папке, то достаточно указать имя файла, на который указывает гиперссылка. <br>Если документы находятся в разных папках, то сначала указывается имя папки, затем имя файла, на который указывает гиперссылка.</p> <p><i>Примеры. </i> <A href =”my .htm ”>Моя личная страницаA ><br> <A href =”sport /run .html ”>Бег на длинные дистанцииA ><br>Использовать внутренние ссылки удобнее, так как в этом случае при переносе Web -узла на другой сервер не требуется вносить изменения в отдельные документы.</p> <p><i><u>Якоря. </u> </i><i> </i>Гипертекстовые ссылки могут указывать на определенное место внутри страницы, если в нужное место предварительно вставить <i>якорь </i>. Якорь также использует теги <A > и A >, но вместо атрибута href для него обязательным является атрибут <b>name </b> . Значением этого атрибута является <i>имя якоря. </i>Оно может состоять только из латинских букв, цифр и не должно содержать пробелов. <br>Для ссылки на установленный якорь надо указать имя якоря в конце адреса URL после имени документа, отделив его символом «#».</p> <p><i><u>Указание почтового адреса в гиперссылке </u> </i>. Когда гиперссылка используется для указания адреса электронной почты, ее выбор обеспечивает не переход к новому документу, а запуск почтовой программы на компьютере для отправки сообщения указанному адресату. Обычно такую ссылку размещают в конце страницы для обеспечения связи с Web-мастером или автором страницы, например, <A href =”mailto :vebmaster @mail .ru >Иванов АлексейA ></p> <p><i>Пример.<br></i><HTML ><br> <HEAD ><br> <TITLE >Ссылки и якоряTITLE ><br>HEAD ><br><BODY ><br> Новые версии стандартных программ операционной системы свежие драйверы можно найти на Web -узле компании<br> <A href =”<u><span>http </u> </span><u>:// </u> <u><span>www </u> </span><u>. </u> <u><span>microsoft </u> </span><u>. </u> <u><span>com </u> </span> ”>Microsoft A ><br> <P >А теперь можно перейти к <A href =”my .htm ”>моей личной страницеA ><br></p><p>О том, как связаться с автором, рассказано в <br> <A href =”#address ”>конце этой страницы<br><i> </i>Здесь располагается основное содержание страницы<br><i> </i><a>address”>Адрес электронной почтыA ><br>BODY ><br>HTML ></a></p> <p><b>Практическая работа № 4 </b> </p> <p><b>«Создание гиперссылок» </b> </p> <p><b>Задание 1. </b> Создание простейшей гиперссылки.</p> <p><b>Цель: </b> научиться связывать два HTML –документа с помощью гиперссылок.</p> <p><b>Указания к выполнению: </b> </p> <ul><p>Создайте две Web –страницы в редакторе Блокнот. Одну назовите page 1.htm , вторую page 2.htm . Обе странички сохраните в одной папке под названием site . Обратите внимание, что названия папки и страничек должны быть на английском языке и начинаться со строчной буквы.</p><p>В элементе <title > укажите названия странички «П/р № 4. Задание 1».</p> </ul><p>На страницу 2 </p> <p>На страницу 1 </p> <ul><p>Откройте в браузере первую страничку и убедитесь, что обе гиперссылки работают правильно.</p> </ul><p><b>Задание 2. </b> Создание гиперссылок.</p> <p><b>Цель: </b> научиться связывать три HTML –документа с помощью гиперссылок.</p> <p>Выполнить второе задание вы можете, если успешно справились с Заданием 1.</p> <ul><p>Создайте третью страничку page 3.htm .</p><p>На страничке page 3.htm создайте гиперссылки для перехода на странички page 1.htm и page 2.htm .</p><p>На страничках page 1.htm и page 2.htm добавьте гиперссылку для перехода на страничку page 3.htm .</p><p>Откройте в браузере первую страничку и убедитесь, что теперь можно перейти с любой странички на любую другую из трех созданных.</p> </ul><p><b>Задание 3. </b> Цвет гиперссылок<b>. </b> </p> <p><b>Цель: </b> научиться определять цвет гиперссылок.</p> <p>Выполнить задание вы можете, если успешно справились с Заданием 2.</p> <ul><p>На страничках page 1.htm , page 2.htm и page 3.htm в тэге <body > определите цвет гиперссылок:</p> </ul><ul><p>Откройте в браузере первую страничку и, переходя по ссылкам со странички на страничку, убедитесь, что цвет гиперссылок задан верно.</p> </ul><p><i><b>Рисунки на </b> </i><i><b>Web </b> </i> <i><b>-странице. </b> </i></p> <p>Иллюстрации (рисунки, фотографии) играют важнейшую роль в оформлении Web -страниц. Сами рисунки хранятся в отдельных файлах вне документа HTML , но отображаются браузером внутри. Для этого служит одиночный тег <b>< </b><b>IMG </b> <b>>. </b>Обязательным атрибутом этого тега является атрибут <b>src </b> , значением которого является путь к файлу с рисунком или фотографией,</p> <p>Если картинка лежит в той же папке, что и Web -страница, то путь представляет собой просто имя файла, например: <img src='/windows/podgotovka-pochvy-pogovorim-ob-html-struktura-html-dokumenta-osnovnye-tegi.html' loading=lazy>. Если картинка лежит в другой папке, то эту папку надо указать, например: <img src='/windows/podgotovka-pochvy-pogovorim-ob-html-struktura-html-dokumenta-osnovnye-tegi.html' loading=lazy>. Если картинка лежит на другом сайте, то путь прописывается полностью: <br><img src='https://i0.wp.com/homepage.ru/my/my.jpg' loading=lazy>.</p> <p>В теге <img src='/windows/podgotovka-pochvy-pogovorim-ob-html-struktura-html-dokumenta-osnovnye-tegi.html' loading=lazy> можно также использовать такие атрибуты, как:<br><b>height </b> <b>, </b><b>width </b> – задают высоту и ширину области, в которой демонстрируется рисунок. Если задан только один из этих атрибутов, то второй размер устанавливается в соответствующей пропорции. Но нужно помнить, что масштабирование ухудшает качество изображения. Размер рисунка измеряется в пикселях или в процентах, например: <img src='/windows/podgotovka-pochvy-pogovorim-ob-html-struktura-html-dokumenta-osnovnye-tegi.html' loading=lazy>, <b>border </b> <b> – </b>задаёт толщину рамки вокруг картинки (в пикселях). Этот атрибут можно не задавать, так как, по умолчанию, рамка вокруг картинки есть всегда. Но, если вы хотите её убрать, то <u>выставляйте значение атрибута border равным нулю, <br></u><b>bordercolor </b> – задаёт цвет рамки вокруг картинки, например:<br>< IMG src="picture.gif" border="3" bordercolor="#CC0000"> <br>В нашем примере цвет рамки задан красным, ну, и, естественно, что атрибут border (толщина рамки) не должен равняться нулю, если вы хотите видеть рамку вокруг картинки,<br><b>align – </b>выравнивание картинки относительно других объектов:<br> картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа,<br> картинка - справа, текст - слева.</p> <p>Текст может располагаться также внизу картинки (это по умолчанию) - (1), посередине - (2), и вверху - (3):<br>(1) - <br>(2) - <br>(3) - </p> <p><b>vspace </b><span> - задает расстояние между текстом и рисунком (по вертикали):<br>,<br></span><b>hspace </b> <span>- задает расстояние между текстом и рисунком (по горизонтали): </p> <p>< imgsrc=" pr1. png" hspace<span>="30"><br>Расстояние задается в пикселях. </p> <p>С помощью тега <img src='/windows/podgotovka-pochvy-pogovorim-ob-html-struktura-html-dokumenta-osnovnye-tegi.html' loading=lazy> можно использовать изображения в гиперссылках, вставлять картинки в таблицы, решать задачи дизайна…</p> <p><b>Практическая работа № 5 </b> </p> <p><b>«Использование рисунка в качестве гиперссылки» </b> </p> <p><b>Цель </b>: научиться использовать рисунок в качестве гиперссылки.</p> <ul><p>На страничках page 1.htm , page 2.htm и page 3.htm вместо текстовых гиперссылок используйте рисунки. Для этого:</p> </ul><ul><p>откройте папку, указанную учителем (в папке находятся файлы с изображением цветных кнопок), вставьте на первую страничку изображение голубой кнопки и создайте гиперссылку для перехода на вторую страницу:</p> </ul> <ul><p>Самостоятельно вставьте изображение оранжевой кнопки для перехода с первой страницы на третью;</p><p>Задайте бордюр обоих изображений равным 2;</p> </ul><ul><p>Откройте в браузере первую страничку и, переходя по ссылкам со странички на страничку, убедитесь, что кнопки работают верно.</p><p>Самостоятельно вставьте изображения кнопок на страницы page 2.htm и page 3.htm и задайте соответствующие гиперссылки.</p><p>Откройте в браузере первую страничку и, переходя по ссылкам со странички на страничку, убедитесь, что кнопки на всех страничках работают верно.</p> </ul><p><i><u>Альтернативный текст. </u> </i> </span><i> </i> Web<span>-страница может отображаться браузером, не имеющим средств для показа изображений. Пользователи часто отключают показ рисунков, чтобы ускорить прием документа. И в том и в другом случае желательно дать возможность узнать, что же изображено на картинке, если ее нельзя увидеть. Для этой цели используют альтернативный текст, который задается в теге < </span>IMG> атрибутом <b>alt </b><b> (или </b> <b>title </b><b>), </b> <span>этот атрибут выводит текст в месте расположения картинки во время её загрузки. Например: </p> <p><img src='/windows/podgotovka-pochvy-pogovorim-ob-html-struktura-html-dokumenta-osnovnye-tegi.html' loading=lazy></p> <p><i><u>Использование рисунка в качестве фона </u> </i>. Если вы хотите использовать рисунок в качестве фона странички (“обоев”), то в теге <BODY > используем этот атрибут с указанием адреса картинки. Например:</p> <p><BODY background =”boss3.gif” >.</p> <p><i><b>Фреймы </b> </i></p> <p><i><u>Размещение нескольких документов на одной Web-странице. </u> </i>Язык HTML позволяет разбить окно программы броузера на несколько частей и в каждой из них отобразить отдельный документ. Такие области называются <i>фреймами. </i><b> <br></b>Чем отличается структура документа HTML , содержащего фреймы, от обычного документа HTML ? Такой документ не содержит раздела «тела» документа и не содержит какого-либо текста вообще. Вместо этого он содержит описание фреймов и названия документов, загружаемых в отдельные области. <b><br>< </b><b>FRAMESET </b> <b>>… </b><b>FRAMESET </b> <b>> </b>тегописания фреймов.<b><br></b>Между тегами <b>< </b>FRAMESET >…FRAMESET > содержится описание размеров и порядка размещения областей в окне броузера, а также задаются документы, которые должны загружаться в каждую из этих областей.<br>Тег <FRAMESET > должен содержать обязательный атрибут <b>cols </b> или <b>rows, </b>определяющий способ разбиения окна. Значения этих атрибутов определяют высоту (или ширину) областей окна. Их задают через запятую в пикселах или в процентах. В качестве последнего параметра можно использовать символ «звездочка» (*). Под такой фрейм выделяется все свободное пространство.<br>При использовании атрибута cols окно делится на области вертикальными линиями, а при использовании атрибута rows – горизонтальными, например, <br><FRAMESET rows =”45%,30%,25%”>, <FRAMESET cols =”40%,30%,30%”><br>Если заданы оба этих атрибута, в окне создается сетка из подобластей, например,<br><i> </i><frameset rows =30%,30%,30%><br> <frame src =name .htm ><br> <frame src =sun .htm ><br><frameset cols =50%,*><br> <frame src =cat 1.htm ><br> <frame src =cat 2.htm ><br>frameset ><br>В результате экран делится на четыре подобласти: две горизонтальных и две вертикальных. Причем, именно третье значение атрибута <i>rows </i>позволяет отвести на экране место под вертикальную подобласть.</p> <p><b>< </b><b>FRAM </b> <b>E> - </b>одиночныйтег, вложенный в тег <FRAMESET >, должен содержать обязательный атрибут <b>src </b> <b>, </b>определяющий документ, который будет загружен в отдельную область, например, <FRAME src =”doc 3.htm ”><br><i>Пример.<br></i> <html ><br> <head ><br> <meta http -eguiv ="Content -Type " content ="text /html ;charset =windows -1251"> <meta name ="Author " content ="Ivanov Ivan "><br> <meta name ="Keywords " content ="Животные, собаки, клубы"><br>head ><br><title >Страница с навигационной панельюtitle ><br> <frameset cols =25%,*><br> <frame src =19_1.htm ><br> <frame src =19_2.htm ><br>frameset ><br>html ><br>А </p> <p><img src='https://i2.wp.com/ds03.infourok.ru/uploads/ex/08a8/00002fb7-1e40425c/hello_html_m27ce16d6.jpg' align="bottom" width="100%" loading=lazy></p> <p><i><u>Качество документов HTML. </u> </i></p> <p>Творческий характер создания документов HTML сродни програм­мированию, так что при этом возможны ошибки, которые могут привести к трудностям или даже полной невозможности прочитать созданный документ в Интернете. Кроме того, огромное разно­образие компьютеров, подключенных к Интернету, приводит к тому, что заранее невозможно предсказать, как именно будет выглядеть документ на экране конкретного пользователя.</p> <p>Web-страницы предназначаются для широкой аудитории, так что при подготовке документов HTML следует иметь в виду эти осо­бенности. Чтобы создать хороший документ HTML, следует при­держиваться ряда достаточно простых правил.</p> <p>3. Для того чтобы документ HTML был доступен самой широкой аудитории, следует «отставать на один шаг» от последних дости­жений в развитии языка HTML. Последние нововведения не всегда сразу реализуются в браузерах, а новым версиям требу­ется время на то, чтобы достичь большинства пользователей. Документы с использованием самых свежих новшеств доступны лишь ограниченной аудитории.</p> <p>4. Ошибка, которую часто делают новички, состоит в злоупотреб­лении элементами оформления, особенно разнообразными цветами и шрифтами. Такая страница в лучшем случае будет выглядеть кричащей. В худшем случае, текст вообще нельзя будет прочесть на компьютерах с нестандартной цветовой схе­мой или при отсутствии необходимых шрифтов.</p> <p>5. Не следует злоупотреблять графическими изображениями и мультимедийными файлами. При изобилии таких объектов загрузка страницы может затянуться и читатель может утратить к ней интерес еще до того, как получит возможность что-то прочесть.</p> <p>6. Так как создание документов HTML сродни программированию, процесс поиска и исправления ошибок, известный в программирование как отладка, необходим и при создании Web-страницы. Большинство, если не все сделанные ошибки можно обнару­жить еще до того, как страница станет доступна посторонним читателям. В число ошибок, которые надо исправлять, входят также грамматические ошибки и опечатки.</p> <p>7. Фреймы - очень мощное, но и очень опасное средство оформления Web-страниц. С помощью фреймов создано гораз­до больше неудачных Web-страниц, чем удачных. Единственный критерий грамотности применения фреймов - удобство поль­зователя. Если благодаря фреймам страница становится во много раз красивее, но чуть-чуть менее удобной, от фреймов надо отказываться не задумываясь. Ничего, кроме раздражения, у читателей она не вызовет.</p> <p>8. Люди ценят заботу и внимание. Размещение самой важной информации в верхней части страницы позволяет им с пользой проводить время, в течение которого происходит загрузка доку­мента Сопровождение иллюстраций альтернативным текстом не стоит больших трудов, но высоко ценится. Наличие большо­го количества полезных гиперссылок на странице не только помогает людям плодотворно путешествовать по просторам Интернета, но и побуждает их раз за разом возвращаться на страницу, предоставившую им такую возможность.</p> <p><b>Практическая работа № 6<br>«Размещение нескольких документов на одной Web-странице» </b> </p> <p><b>Цель: </b> научиться создавать фреймы в текстовом редакторе Блокнот.<br><b>Указания к выполнению: </b></p> <ul><p>Откройте текстовый редактор Блокнот.</p><p>Создайте новую Web-страницу, которая в браузере должна выглядеть следующим образом:</p> </ul><p><img src='https://i1.wp.com/ds03.infourok.ru/uploads/ex/08a8/00002fb7-1e40425c/hello_html_25dae440.png' align="bottom" width="100%" loading=lazy></p> <ul><p>В элементе укажите название странички «П/р №6».</p><p>Просмотрите созданную Web-страницу в окне браузера.</p><p><br>Внесите в него следующие изменения: в атрибуте <i>rows </i>измените два первых значения, <i> </i>уберите третье значение.</p><p>Сохраните изменения.</p><p>Просмотрите результат в браузере. Что изменилось?</p><p>Отмените изменения, вернитесь к исходному состоянию Web-страницы.</p><p>Просмотрите Web-страницу в окне браузера.</p> </ul><h6>Тема 3. Графика на Web -странице</h6> <p><i><b>Элементы теории компьютерной графики </b> </i></p> <p><i><u>Цветовая модель. </u> </i></p> <p>Изображение может быть чёрно-белым, полутоновым (оттенки одного цвета) и цветным. Однако, цветное изображение в зависимости от его назначения может быть в разной цветовой палитре. Палитра RGB используется в мониторах компьютеров, т.е. для изображений которые будут просматриваться на мониторе. Палитра CMYK используется при создании изображений, предназначенных для вывода на печать.</p> <p>Наиболее распространённая цветовая модель называется RGB Red – красный, Green – зелёный, Blue – синий) по названиям трёх базовых цветов, используемых в ней для образования всех прочих. Цветовую модель RGB обычно иллюстрируют картинкой в виде трёх пересекающихся кружков. В центре пересечения эти три цвета в сумме дают белый цвет. Попарное пересечение смежных кружков даёт дополнительные цвета: жёлтый, голубой, пурпурный.</p> <p>В модели RGB присутствует три канала – красный, зелёный и синий, то есть RGB – трёхканальная цветовая модель.</p> <p>Каждый из трёх цветовых компонентов RGB может принимать одно из 256 значений – от максимальной интенсивности(255,2555,255 - белый) до нулевой интенсивности (0,0,0 – чёрный), т.е. абсолютно любой цвет и оттенок цвета можно получить сочетанием красного, зелёного и синего цветов в различных пропорциях</p> <p>Для того чтобы создать гармоничную цветовую композицию, необходимо знать характеристики цвета. Таких характеристик естественно много, мы рассмотрим лишь основные.</p> <p><i><u>Характеристики цвета </u> </i></p> <p>Одна из цветовых схем характеризует естественные свойства любого оттенка, - это схема HSV (тон, насыщенность, яркость)</p> <p>Hue тон – одна из точек цветового круга, максимально яркая и насыщенная.</p> <p>Saturation насыщенность – соотношение основного цвета и такого же по яркости серого.</p> <p>Value яркость – общая яркость цвета (крайние позиции – чёрный и максимально яркий тоновый)</p> <p><b>Практическая работа № 6 </b> </p> <p><b>«Работа с цветовой моделью RGB» </b> </p> <p><i><b>Задание 1. Определение цвета в формате </b> </i><i><b>RGB </b> </i> </p> <p><b>Цель </b>: научиться определять цвет в формате RGB .</p> <p><b>Указания к выполнению: </b></p> <ul><p>Запустите графический редактор Paint (Пуск – Программы – Стандартные)</p><p>Определите, какой цвет записан в модели RGB и заполните таблицу:</p> </ul><p>Для этого выполните команду Палитра – Изменить палитру. В диалоговом окне Изменение палитры щёлкните на кнопке Определить цвет, введите числовые значения для цветов в текстовые поля внизу от цветового поля. Допустимый диапазон для каждого блока от 0 до 255, при этом 0 соответствует самому тёмному, а 255- самому светлому.</p> <p><i><b>Задание 2. Смешение цветов разной интенсивности в графическом редакторе </b> </i> Paint </p> <p><b>Цель </b>: научиться работать с цветом разной интенсивности в простейшем графическом редакторе.</p> <p><b>Указания к выполнению: </b></p> <ul><p>Определите, какой цвет будет получен в результате смешения двух цветов максимальной интенсивности (255):</p> </ul><ul><p>красного и зеленого;</p><p>зеленого и синего;</p><p>красного и синего.</p> </ul><ul><p>Определите, какой цвет будет получен в результате смешения двух цветов половинной интенсивности (127):</p> </ul><ul><p>красного и зеленого;</p><p>зеленого и синего;</p><p>красного и синего.</p> </ul><p>зеленый и синий</p> <p>красный и синий</p> <p>максимальная интенсивность</p> <p>половинная интенсивность</p> <p><i><b>Задание 3. Рисование заданным цветом в графическом редакторе </b> </i><i><b>Paint </b> </i> <i><b>. </b> </i></p> <p><b>Цель </b>: научиться определять цвет.</p> <p><b>Указания к применению: </b></p> <ul><p>В новом файле нарисуйте следующие геометрические фигуры, заданного цвета:</p> </ul><ul><p>Квадрат (205, 44, 100);</p><p>Прямоугольник (0, 230, 69);</p><p>Круг (30, 30, 30);</p><p>Овал (200, 100, 20);</p><p>Треугольник (10, 10, 10);</p><p>Трапеция (50, 50, 250).</p> </ul><p><i><u>Цветовые схемы </u> </i></p> <p>Зная особенности восприятия каждого цвета и цветовых сочетаний, можно построить целый ряд готовых схем. Каждая из этих схем, будучи воплощённой в жизнь, звучит по своему, вносит определённое настроение в композицию.</p> <p>Если мы хотим добиться гармоничного сочетания цветов, то можно взять несколько близлежащих, расположенных один за другим на цветовом круге. Например жёлтый и желто-зеленый.</p> <p>Для создания контраста выбирают цвета противоположные, расположенные напротив друг друга. Такие цвета называются дополняющими. Применённые рядом, они делают друг друга ярче и живее. Пары жёлтый – фиолетовый, пурпурный – зелёный – примеры дополняющих цветов.</p> <p>Кроме использования цветов, расположенных рядом друг с другом, можно попробовать использовать одни и те же цвета, но разной степени насыщенности.</p> <p>Однако самый надёжный и неисчерпаемый источник цветовых схем – природа. Человек является её частью, и ничто так не радует его глаз, как гармония естественной нежности и красоты.</p> <p>Престижные цвета: золото, серебро, тёмно-серый, чёрный. Их задача – передать солидность, уверенность, стабильность, и высокую стоимость.</p> <p>Пастельные цвета: нежные, бежевые, розовые, голубоватые – женственные, мягкие, расслабляющие.</p> <p>«Здоровые» цвета: из американской психологии – чистота, здоровье, уверенность, семья (жёлто-зелёная гамма с добавлением чёрного цвета).</p> <p>Природные цвета: близкие к естественным органическим, природным компонентам.</p> <p>«Растяжки» как вариант использования цвета – это обычно тональные оттенки одного цвета и как акцент – более активный цвет</p> <p>Лучше придерживаться проверенного временем рецепта: пользоваться минимумом цветов, но сами цвета при этом подбирать по возможности контрастные. Основное требование к паре цветов для фона и текста – достаточный контраст между ними, необходимыми для комфортного чтения.</p> <p><i><u>Безопасная палитра. </u> </i></p> <p>Нельзя забывать, что создатель Web -страницы не имеет ни малейшего понятия о том, на какой модели компьютера, и под управлением каких программ будет просматриваться его произведение. Он не уверен, не превратится ли его «зелёная ёлка» в красную или оранжевую на экранах пользователей.</p> <p>Поэтому все популярные программы для просмотра Web -страниц (броузеры) заранее настроены на некоторую одну фиксированную палитру. В этой палитре не 256 цветов, а лишь 216. Это связано с тем, что не все компьютеры могут воспроизводить 256 цветов.</p> <p>Такая фиксированная палитра, жёстко определяющая индексы для кодирования 216 цветов, называется безопасной палитрой.</p> <p><i><u>Растровая графика </u> </i></p> <p>Основой растрового представления графики является пиксел (точка) с указанием её цвета. При описании, например, красного эллипса на белом фоне приходится указывать цвет каждой точки, как эллипса, так и фона. Изображение представляется в виде большого количества точек – чем их больше, тем визуально качественнее изображение и больше размер файла.</p> <p>Растровое представление обычно используют для изображения фотографического типа с большим количеством деталей или оттенков. Масштабирование таких картинок в любую сторону обычно ухудшает качество.</p> <p><i><u>Векторная графика </u> </i></p> <p>Векторное представление заключается в описании элементов изображения математическими кривыми с указанием их цветов и заполненности. Красный эллипс на белом фоне будет описан всего двумя математическими формулами – прямоугольника и эллипса соответствующих цветов, размеров и местоположения. Очевидно, что такое описание займёт значительно меньше места, чем в случае с растровой графикой. Ещё одно преимущество – качественное масштабирование в любую сторону.</p> <p>Выбор растрового или векторного формата зависит от целей и задач работы с изображением. Если нужна фотографическая точность цветопередачи, то предпочтительнее растр. Логотипы, схемы, элементы оформления удобнее представить в векторном формате.</p> <p><i><u>Форматы графических файлов для Интернета </u> </i></p> <p>GIF и JPEG – это два наиболее популярных графических формата, которые фактически стали стандартами для использования на WWW .</p> <p>Фотографии лучше всего сохранять в формате JPEG , а иллюстрации в формате GIF </p> <p><i><u>Оптимизация графики. </u> </i></p> <p>Для Web -страниц очень важным является вопрос размера фотографии.</p> <p>Самый первый этап оптимизации – выделение в фотографии главного с отбрасыванием всего остального и акцентирование на иллюстрируемом элементе. Это достигается при помощи операции кадрирования и нахождения наиболее выразительной части, передающей смысл фотографии. После этой операции уже можно оптимизировать изображение для достижения наименьшего размера. Но с размерами фотографий нужно придерживаться определенного компромисса – не делать их слишком мелкими. И не делать их слишком огромными. Обычно фотография имеет размер 250 х 300 пикселов и занимает порядка 6-10 Кбайт. Это не значит, что все фотографии должны иметь такие же размеры, но площадь фотографии должна быть ей эквивалентна. Так, например, файл размером 45,93 Кбайта при скорости загрузки 28,8 Кбита в секунду будет загружаться в браузер 17 секунд.</p> <h4>Практическая работа № 8</h4> <p><b>«Размещение графики на Web-странице» </b> </p> <p><i><b>Задание 1. Оформление цветом </b> </i><i><b>Web </b> </i> <i><b>-страницы. </b> </i></p> <p><b>Цель: </b> научиться создавать цветной фон Web -страницы, использовать шрифт различного цвета и размещать горизонтальные линии на страницы.</p> <p><b>Указания к выполнению: </b></p> <ul><p>Создайте новую Web -страницу в редакторе Блокнот.</p><p>В элементе <title > укажите название странички «П/р № 8. Задание 1».</p><p>В начальном элементе <body > используйте соответствующий атрибут, чтобы сделать цвет фона странички черным.</p><p>Сделайте надпись белым цветом «Спокойной ночи». Выровняйте ее по середине страницы. Размер шрифта 12.</p><p>Вставьте горизонтальную линию красного цвета.</p><p>Сделайте надпись желтого цвета «Приятных сновидений». Выровняйте ее по середине страницы. Размер шрифта 8.</p><p>Вставьте горизонтальную линию синего цвета толщиной 10 пикселов, длиной 50% от ширины экрана, и выровняйте ее по центру.</p> </ul><p><i><b>Задание 2. Размещение графики на Web-странице. </b> </i></p> <p><b>Цель </b>: научиться размещать графические изображения на Web -странице.</p> <p><b>Указания к выполнению: </b></p> <ul><p>Создайте новую Web -страницу в редакторе Блокнот.</p><p>В элементе <title > укажите название странички «П/р № 8. Задание 2».</p><p>Если в тэге <body > не указывать цвет странички, то по умолчанию фон будет белым.</p><p>Разместите на страничке рисунок футбольного меча. Файл с именем soccer .gif находится в папке, указанной учителем. Для размещения изображения вам потребуется указать путь к файлу в элементе <img src='/windows/podgotovka-pochvy-pogovorim-ob-html-struktura-html-dokumenta-osnovnye-tegi.html' loading=lazy>. Чтобы упростить описание пути к этому графическому файлу, скопируйте этот файл в ту же папку, в которой будет сохранена Web -страничка. Тогда элемент будет выглядеть следующим образом:</p> </ul><p>Если файл не находится в одной папке с Web -страничкой, то необходимо указать относительный путь к этому файлу.</p> <ul><p>Сделайте подпись к рисунку «Футбольный мяч» с помощью атрибута alt (title ).</p><p>Создайте рамку вокруг рисунка шириной 2 пиксела.</p><p>Над рисунком поместите заголовок «Мир футбола» самого большого размера и выровняйте его по центру страницы.</p> </ul><p><b>Тема 4. Теги HTML. Таблицы </b></p> <p><i><b>C </b> </i> <i><b>оздание и форматирование таблиц<br></b> </i><i><u>Задание строки и ячейки таблицы. </u> </i>Таблица – это один из наиболее удобных способов представления больших объемов данных. Язык HTML имеет богатейшие возможности по созданию разных видов таблиц.<br>При создании таблиц используется принцип вложения: внутри основного элемента таблицы</p>TR > - тег, задающий строку таблицы. Конечный тег можно не использовать, так как строка заканчивается там, где начинается следующая строка. <br>…TD > - тег, задающий ячейку таблицы. Конечный тег также можно не использовать.<br>Внутри ячеек могут содержаться любые данные и любые теги HTML, допустимые в теле документа. Например, ячейка таблицы может содержать вложенную таблицу или рисунок. Броузеры автоматически вычисляют размеры ячеек и всей таблицы, хотя эти свойства частично можно задать и при помощи атрибутов.<br><i>Пример (таблица, состоящая из двух строк и столбцов).<br></i><TABLE ><br>ГосударствоСтолица<br>РоссияМосква<br>ФранцияПариж<br>TABLE ><br>Вот как это выглядит на экране: <p>Номер телефона</p> <p>Петрова А.И.</p> <p>Смирнов В.П.</p> <p><i><u>Задание ширины рамки таблицы. </u> </i> С помощью атрибута <b>border </b>можно задаватьширину рамки таблицы в пикселях, например: <br><TABLE bor der=”2”><br>Можно сделать грани таблицы невидимыми, для этого ширину рамки таблицы нужно задать равной 0, например, <TABLE width =”300” bgcolor =”#00cc 99” bor der=”0”></p> <p><i><u>Задание ширины и высоты таблицы </u> </i><i>. </i>Ширину и высоту таблицы можно задавать точно в пикселях или в процентном отношении к ширине страницы в окне броузера. Существуют стандартные атрибуты:<br><b>width </b> – ширина;<br><b>height </b> – высота.<br>Например, если нам нужно задать таблицу определенного размера, например, шириной в 500 пикселей, то мы укажем:<br><TABLE width =”500” bor der=”1”><br>Если мы хотим получить таблицу на всю ширину экрана, не заботясь при этом, какое разрешение монитора у того, кто будет просматривать нашу Web-страницу, то мы зададим ширину страницы, как 100%.<br><TABLE width =”100%”bor der=”1 ”><br>Вот как это выглядит на экране:</p> <p>Номер телефона</p> <p>Петрова А.И.</p> <p>Смирнов В.П.</p> <p>Если нам при этом необходима большая высота строк, например, 300 пикселей, то мы укажем еще один атрибут:<br><TABLE width=”100%” height=”300” bor der=”1”><br><i><u>Задание цвета фона и цвета ячеек таблицы </u> </i><i>. </i>Для всей таблицы может быть задан цвет фона, для этого существует атрибут <b>bgcolor </b>. Значением этого атрибута может быть либо английское слово, например, red, либо шестнадцатеричный код, например, #FF0000.<br>Например, если в созданной нами самой первой таблице нужно задать серебристый фон, то мы укажем: <TABLE bgcolor=#c0c0c0></p> <p>Вот как это выглядит на экране:</p> <p>Номер телефона</p> <p>Петрова А.И.</p> <p>Смирнов В.П.</p> <p>Можно задавать отдельно цвет ячеек таблицы. В этом случае атрибут bgcolor помещается внутри элемента</p><p>Например, <br><TABLE width=500 border =1><br>ГосударствоСтолица<br>Gold>РоссияYellow>Москва<br>Maroon>ФранцияOrange>Париж<br>TABLE > </p><p>Вот как это выглядит на экране:</p> <p><i><u>Выравнивание данных в ячейках таблицы.<br></u> </i>C уществует набор атрибутов, предназначенных для выравнивания данных в ячейках таблицы. Атрибут <b>align </b> позволяет выравнивать данные в ячейках по горизонтали. Он принимает следующие значения:<br>Left – выравнивание влево;<i><u><br></u> </i>Right – выравнивание вправо;<br>Center - выравнивание по центру.<br>Атрибут <b>valign </b> позволяет выравнивать текст по вертикали. Значения могут быть следующие:<br>Top – выравнивание по верхнему краю ячейки;<br>Middle – выравнивание по центру;<br>Baseline – выравнивание по первой строке<br><i>Пример.<br></i><TABLE width =100% border =1 align =center ><br> <TR ><br> <TD ><B >Выравнивание по горизонталиB >TD ><br></p><p>По центру <br>left> По левому краю <br> По правому краю <br> <TR ><br> <TD ><B >Выравнивание по вертикалиB >TD ><br>valign=top > По верхнему краю TD ><br> <TD valign =middle > По центру TD ><br> <TD valign =baseline > По нижнему краю TD ><br>TR ><br>TABLE ><br>В результате мы получим следующую таблицу: <b>Выравнивание по горизонтали </b> </p><p>По центру</p> <p>По левому краю</p> <p>По правому краю</p> <p><b>Выравнивание по <br>вертикали </b></p> <p>По верхнему краю</p> <p>По центру</p> <p>По нижнему краю</p> <p><b><br>< </b><b>table </b> <b>width </b> <b>=500 </b><b>border </b> <b>=3> </b></p> <p> <b>Успеваемость </b> </p> <b>N <b>п </b><b>/ </b> <b>п </b> </b><b><b>Фамилия </b> </b><b><b>Школа </b> </b><b><b>Класс </b> </b><p><b> <span><b>Практическая работа № 9<br>«Создание и форматирование таблицы» </b> </span> </b></p><p><b><b>Цель: </b> научиться создавать и форматировать простые таблицы в текстовом редакторе Блокнот.<br><b>Указания к выполнению: </b> </b></p><p><b>Создайте новую Web-страницу, которая в броузере должна выглядеть следующим образом: </b></p><b>Фамилия </b><p><b>Номер телефона </b></p><p><b>Петрова А.И. </b></p><p><b>31-74-16 </b></p><p><b>Смирнов В.П. </b></p><p><b>46-29-89 </b></p><p><b> Цвет фона таблицы - серебристый, ширина рамки таблицы – 1. </b></p><p><b>В элементе укажите название странички «П/р №14». </b></p><p><b>Просмотрите созданную Web-страницу в окне броузера. </b></p><p><b>Вернитесь к сохраненному в Блокноте файлу.<br>Внесите в него изменения так, чтобы Web-страница в броузере выглядела следующим образом: </b></p><p><b> Телефонный справочник </b></p> <b> Фамилия </b><p><b> Номер телефона </b></p><p><b>Петрова А.И. </b></p><p><b>31-74-16 </b></p><p><b>Смирнов В.П. </b></p><p><b>46-29-89 </b></p> <p>Цвет фона ячеек первой строки – светло-зеленый, цвет фона ячеек остальных строк – серебристый, ширина рамки таблицы – 5. </p><p><b>Просмотрите Web-страницу в окне броузера. </b></p><p><b>Сохраните изменения. </b></p><p><b><i><u><b>Объединение строк или столбцов в ячейке </b> </u> </i><i>. </i> </b></p><p><b>При построении сложных таблиц бывает необходимо объединить (слить) в одной ячейке несколько строк или столбцов. Для этого существуют атрибуты: <b>colspan - у </b>казывает количество столбцов, объединенных в одной ячейке (по умолчанию=1), <b>rowspan - у </b>казывает количество строк, объединенных в одной ячейке (по умолчанию=1). <i>Примеры: </i> </b></p><b>1 </b><p> <b>1 </b></p><p>Все отличие такого построения таблиц заключается в появлении параметра <b>rowspan="2", </b>цифра в которой, соответствует количеству "подстрок", т.е. буквально то, сколько строк слилось в ячейке. Если в симметричной таблице мы читаем слева-направо, то тут происходит то же самое, только почему же в коде впереди ячейки с двойкой стоит ячейка с цифрой три? Все очень просто - <i>буквально </i> код для первой строки расшифровывается как "ячейка, содержащая данное 1", "ячейка, содержащая данное 3, состоящая из ДВУХ подстрок", код для второй строки расшифровывается как "ячейка, содержащая данное 2". <u>Как видим, физически ячейка 3 принадлежит к ПЕРВОЙ строке! </u></p> <p>Если же у нас существуют ячейки, совмещенные по горизонтали, то вместо тега <b>rowspan </b> используется тег <b>colspan </b>, естетсвенно, в той ячейке, которая занимает площадь нескольких столбцов). <i>Например: </i><i> </i> </p> <table width="684" border="0"><tr valign="top"><td width="80"> </td> <td width="79"> </td> </tr></table><table width="200" border="1"><tr align="center"><td colspan="2">1 </td> </tr><tr align="center"><td>2 </td><td>3 </td> </tr></table><p><b>Практическая работа № 10<br>«Объединение строк или столбцов в ячейках таблицы» </b> </p> <p><b>Цель: </b> <span> научиться создавать сложные таблицы в текстовом редакторе Блокнот.<br></span><span><b>Указания к выполнению: </b> </p> <ul><p>Откройте текстовый редактор Блокнот. </p><p>Создайте новую Web-страницу, которая в браузере должна выглядеть следующим образом: </p> </ul><p>Успеваемость </p> п/п <p>Фамилия </p> <p>Школа </p> <p>Класс </p> <p>Оценки по химии </p> <p>1 п/г </p> <p>2 п/г </p> <p><b>Иванов </b> </p> <p><b>Петров </b> </p> <p><b>Сидоров </b> </p> <p>Цвет фона первой строки таблицы - аквамарин, ширина таблицы – 500, ширина рамки таблицы – 3. </p> <ul><p>В элементе укажите название странички «П/р №10». </p><p>Просмотрите созданную Web-страницу в окне браузера. </p><p>Вернитесь к сохраненному в Блокноте файлу.<br></span><br></p> </ul><p><i><u>Разметка Web-страницы при помощи таблицы. </u> </i> Разметку Web-страницы удобно производить с использованием таблицы. Возможны различные варианты разметки. Рассмотрим некоторые из них. <br><b>Первый вариант. </b> Разметка страницы производится с использованием страницы шириной на весь экран, независимо от того, каково разрешение экрана (width =”1000%”). В данном случае удобно создать таблицу, состоящую из двух строк и двух столбцов. Верхняя строка будет отведена под заголовок странички, левый столбец будет отведен под меню Web-сайта. При такой разметке страничка всегда будет занимать весь экран, не зависимо от того, какое разрешение экрана стоит у посетителя (рис. 4.12).</p> <p><img src='https://i2.wp.com/ds03.infourok.ru/uploads/ex/08a8/00002fb7-1e40425c/hello_html_m775cb074.png' align="bottom" width="100%" loading=lazy></p> <p><b>Рис. 4.12. </b> </span><span>Пример разметки </span><span>Web </span><span>-страницы. Первый вариант </p> <p>К недостаткам такой разметки можно отнести "плавучесть" содержимого страницы, т. е. при уменьшении разрешения экрана содержимое должно поместиться в более узкие рамки, следовательно текст "сползает" вниз. Чтобы этого не происходило, нужно выбрать фиксированный размер таб­лицы, тогда при любом разрешении экрана таблица будет выглядеть неиз­менной.</p> <p><b>Второй вариант. </b> Разметка страницы производится с использованием таблицы шириной 760 пикселов, выровненной по центру экрана. При этом посетитель, у которого разрешение экрана равно 800x600 пикселов, будет видеть страничку шириной практически во весь экран, а посети­тель, у которого разрешение монитора равно 1024x768 и выше, будет ви­деть таблицу шириной 760 пикселов по центру экрана и белые поля по бокам от нее.</p> <p>В данном случае удобно создать таблицу, состоящую из трех строк и одного столбца. Верхняя строка будет отведена под заголовок странички, вторая строка будет отведена под меню Web-сайта, а третья строка непосредственно под содержание сайта (рис. 4.13).</p> <p><img src='https://i1.wp.com/ds03.infourok.ru/uploads/ex/08a8/00002fb7-1e40425c/hello_html_20004b1a.png' align="bottom" width="100%" loading=lazy></p> <p><b>Рис. 4.13. </b> </span><span>Пример разметки </span><span>Web </span><span>-страницы. Второй вариант </p> <p>Если необходимо разместить внутри текста странички какие-либо иллюстра­ции, фотографии и пр., то в этом случае также используются таблицы. В приведенном ниже примере во вторую ячейку второй строки вставлена таб­лица, состоящая из двух строк и трех столбцов. В первую и в третью ячейки первой строки вставлены рисунки, а во вторую ячейку первой строки -название страницы. Во все ячейки второй строки введен текст (рис. 4.14).</p> <p><b>Рис. 4.14. </b> </span><span>Пример разметки </span><span>Web </span><span>-страницы. Третий вариант </p> <br clear="left"><br><img src='https://i1.wp.com/ds03.infourok.ru/uploads/ex/08a8/00002fb7-1e40425c/hello_html_m32b43cfb.png' align="bottom" width="100%" loading=lazy><h6>Тема 5 . Итоговая работа «Создание Web-сайта на заданную тему в ТР «Блокнот»</h6> <p>Учащиеся дома разрабатывают и оформляют на бумаге в виде творческой работы проект Web-сайта, а затем на уроке реализовывают его средствами языка HTML .</p> <p>_____________________________________________________________________________</p> <p>Курс разработан на основе книги И. Смирновой "Начала Web-дизайна".</p> <p>Интернет - это огромное объединение компьютерных сетей в планетарном масштабе. А если учесть, что обитатели Международной Космической Станции пользуются услугами электронной почты, то становится ясно, что Интернет уже шагнул за пределы планеты. Очень часто Интернет ошибочно отождествляют с самой популярной и масштабной его частью - всемирной путиной, которая в английском языке получила наименование WWW (World Wide Web). По сути дела, паутина - просто огромное количество взаимосвязанных документов. Ключевое слово -<i> взаимосвязанных </i>, т. е. текст Web-страницы органично вставляются гиперссылки, которые служат механизмом соединения с другими Web-страницами. Честно говоря, рассказывать на словах о механизме гиперссылок достаточно трудно, но тот, кто хоть раз посетил какой-либо Web-сайт, тот сразу поймет все их значение.</p> <p>Именно гиперссылки, позволяющие связывать друг с другом самые различные документы из Сети, создали ту удивительную общность, которая и является теперь визитной карточкой всемирной паутины. Гиперссылки используют для отыскания документа его уникальный адрес во всемирной паутине, который также называется URL (Universal Resource Locator).</p><p>Как мы знаем, основное предназначение Web-страниц - <i>отображать </i> информацию, доносить ее до пользователя. При этом существует ряд функциональных «ограничений. Ведь заранее неизвестно, какой именно компьютер используется пользователем, просматривающим Web-страницу. Нельзя заранее предсказать, какое разрешение у его монитора, или какие размеры окна просмотра он установил. Да что там, мы не можем заранее знать, какая Используется операционная система или даже платформа. Web-страницы должны практически одинаково отображаться и на Intel-машинах, и на Макинтошах и на телевизионных Web-приставках. Неизвестно, какие шрифты установлены и используются в операционной системе пользователя, неизвестно, какая глубина цвета поддерживается его видеокартой. Все эти неизвестности должны были бы послужить большим барьером для создания общего языка. Но этого не случилось.</p><p>Дело в том, что еще на заре компьютерной эры, в 1986 году, международной организацией по стандартизации ISO (International Organization for Standardization) был разработан язык разметки документов SGML (Standard Generalized Markup Language), который предусматривал практически все возможные случаи отображения информации. Как на бумаге, так и на мониторах. Естественно, чтобы учесть все возможные случаи, была разработана действительно мощная система. Казалось, для Web-страниц это идеальный вариант. Однако только описание правил этого языка занимало сотни страниц. Следовательно, на разработку программ, которые могли бы отображать страницы, созданные на основе такого языка, ушло бы очень много времени. Поэтому для нужд Интернета было выбрано некоторое подмножество этого языка, которое получило самостоятельное наименование - HTML (HyperText Markup Language), т. е. язык разметки гипертекстовых документов.</p><p>Это язык разметки, как следует из названия, т. е. в файле Web-страницы информация находится вперемешку с инструкциями по ее отображению. По сути, это обычный текстовый файл. Но читать его самостоятельно трудно, так как инструкции по отображению информации мешают читать сам текст. А графику тем более нельзя увидеть.</p><p>Web-страницы, которые все написаны на HTML, просматриваются при помощи специализированных программ, которые обычно называют <i>браузерами. </i> Это калька с англоязычного термина. Прямой перевод на русский язык, т. е. Программы-обозреватели, почему-то не прижился. Что ж, будем называть их устоявшимся термином. Основная задача браузера - по запросу пользователя отыскивать требуемый документ в Интернете и адекватно отображать его, т. е. браузер анализирует инструкции, написанные на языке HTML, а затем отображает информацию, находящуюся на Web-странице, пользуясь этими инструкциями. Отсюда вывод - если мы хотим создавать собственные Web-страницы, то жизненно необходимо знать язык HTML.</p><p>Конечно, можно писать код Web-страницы вручную, пользуясь каким-нибудь простеньким текстовым редактором, таким, например, как тривиальный Блокнот. Однако, это не самое приятное времяпровождение. Сейчас существует огромное множество визуальных редакторов Web-страниц, которые позволяют простым и естественным образом размещать информацию, не заботясь о ее переводе в HTML. Казалось бы, если все так замечательно, то зачем изучать HTML самостоятельно? Оказывается, при создании HTML-кода эти редакторы в некоторых случаях пишут неверный, частично неверный или избыточный код. Иногда просто не получается добиться именно того результата, который необходим, и надо знать язык HTML, чтобы быть в состоянии преодолеть встречающиеся препятствия.</p><p>Также следует упомянуть о последствиях так называемой "браузерной войны". Дело в том, что в самом начале развития WWW лидерство на рынке занял браузер Netscape Navigator от Netscape. Фирма Microsoft изначально не смогла правильно оценить будущего потенциала WWW, и браузер Netscape Navigator благополучно занял почти весь рынок. Но когда менеджмент Microsoft донял, что они упустили, в ход пошла вся тяжелая артиллерия. Срочно был создан браузер Internejt Explorer, и началась браузерная война. В целях продвижения собственного браузера каждая из конкурирующих фирм немного "улучшала" стандарт HTML, т. е. добавляла в него конструкции, которые мог правильно обрабатывать только собственный браузер. Конечно, WWW Consortium, организация, курирующая развитие интернет-технологий, некоторые из этих новшеств включала в последующие версии стандартов, но конкуренты не останавливались на достигнутом. Более того, в рамках все той же браузерной войны, Microsoft вживила свой браузер в операционную систему Windows 9x. Закончилось вся эта эпопея, как мы помним, судебным разбирательством, в котором ставший в одночасье известным всему миру судья Джонсон обязал Microsoft вывести браузер Internet Explorer из состава операционных систем.</p> <p>Но к тому времени задача-минимум была выполнена. Браузер Internet Explorer занял около половины объема рынка браузеров. Так закончилась "браузерная война". Или, если быть точным, перешла из "горячей" фазы в "холодную". Но отголоски этого противостояния до сих пор аукаются разработчикам Web-страниц, так как необходимо проверять, как выглядит разрабатываемая страница в каждом браузере. Более того, некоторые визуальные HTML-редакторы прямо ориентированы на тот или иной браузер, и, следовательно, при их использовании разработчик тоже будет ориентироваться только на один браузер или ограничивать функциональность и наполнение Web-страниц, упрощая их структуру практически до предела.</p><p>Но выход есть. Код, генерируемый визуальным редактором, практически всегда необходимо править вручную. А для этого, повторюсь, стоит знать язык HTML. Без знания HTML просто нельзя создавать Web-страницы хорошего качества. В любой технологии есть свои подводные камни, и если мы не знаем основы этой технологии, мы обязательно на них наткнемся. Для того, чтобы добиться максимально адекватного соответствия создаваемой Web-страницы первоначальному замыслу, действительно просто необходимо изучать язык HTML. Чему, собственно, и посвящена эта книга. Если кто еще не догадался</p> <table width="635" border="0"><tr><td width="200"> </td><td> </td><td width="200"> </td> </tr></table> <p>Несмотря на то, что Web-страницы появляются на экране компьютера в отформатированном виде, язык HTML не предназначен для форматирования документов, поскольку жесткое задание оформления и точное позиционирование элементов текста на странице приводит к ограничениям, недопустимым в Интернете.</p> <p>Так, например, когда мы форматируем текст с помощью текстового процессора Word, мы <i>однозначно </i> определяем, как должен выглядеть этот текст при печати на <i>совершенно определенном принтере и </i> на бумаге <i>заданного формата. </i> Когда документ размещен в Интернете, невозможно предсказать, какой компьютер будет использован для его просмотра, да и будет ли вообще у этого компьютера монитор.</p> <p>Может быть, текст появится на экране компьютера, работающего в системе Windows в окне одного из современных броузеров. Может быть, это будет текстовый броузер (неспособный отображать графику), работающий в системе MS-DOS. Возможно, текст документа вообще не будет отображаться на экране, а будет воспроизводиться вслух с помощью синтезатора речи. Для слепого пользователя документ может выводиться на специальное устройство шрифтом Брайля.</p> <p>В связи с необходимостью подготавливать документы для столь разнообразных устройств, язык HTML не предназначен для описания формата документа. Он служит для <i>функциональной разметки документа, </i> то есть позволяет определить <i>назначение </i> фрагментов текста.</p> <p>Например, если в тексте встречается заголовок, то код HTML просто указывает, что соответствующий фрагмент является заголовком. Получив такой код, программа просмотра (броузер) сама «решает», что ей делать с заголовком. Возможно, она отобразит его более крупным шрифтом, а может быть выровняет по центру экрана. Возможно, что синтезатор речи, воспроизводящий текст Документа, использует код заголовка для того, чтобы повысить громкость и сделать необходимую интонационную паузу.</p> <p>Язык HTML все-таки имеет некоторые команды форматирования, но общий курс на разделение <i>содержания </i> и оформления документа выдерживается четко. В последней версии HTML (4.0) использовать команды форматирования, как правило, не рекомендуется.</p> <p>Коды языка HTML, с помощью которых выполняется разметка исходного текста, называются <i>тегами. </i> Тег - это набор символов. Все теги начинаются с символа «меньше» (<b>< </b>) и заканчиваются символом «больше» (<b>> </b>). Пару этих символов иногда называют <i>угловыми скобками. </i> После открывающей угловой скобки идет <i>ключевое слово, </i> определяющее тег.</p> <p>Каждый тег в языке HTML имеет специальное назначение. Регистр букв в названиях тегов не имеет значения - можно использовать как строчные, так и прописные буквы, хотя общепринято использовать прописные буквы, чтобы теги отличались от обычного текста документа.</p><br><p>Как правило, один тег HTML воздействует только на часть документа, например на абзац. В таких случаях используют парные теги: <i>открывающий </i> и <i>закрывающий. </i> Открывающий тег создает эффект, а закрывающий - прекращает его действие. Закрывающие теги начинаются с символа косой черты (<b>/ </b>).</p> <p>Некоторые теги дают разовый эффект в месте своего появления. В этом случае необходимости в закрывающем теге нет, и он не употребляется.</p> <p>Если по ошибке в теге указано ключевое слово, отсутствующее в языке HTML, то тег игнорируется целиком.</p> <p>При отображении документа в браузере сами теги не отображаются, но влияют на способ отображения документа.</p> <p>Атрибуты тегов</p> <p>Открывающие теги часто могут содержать <i>атрибуты, </i> влияющие на эффект, создаваемый тегом. Атрибуты - это дополнительные ключевые слова, отделенные от ключевого слова тега и друг от друга пробелами.</p> <p>Некоторые атрибуты требуют указания <i>значения атрибута. </i> Это значение отделяется от ключевого слова знаком равенства (<b>= </b>). Значение атрибута должно заключаться в кавычки, но во многих случаях эти кавычки могут опускаться без какого-либо вреда.</p> <p>Закрывающие теги никогда не содержат атрибутов.</p> <p>Комментарии</p> <p>В языках программирования общепринята возможность использования комментариев - текстовых строк, не являющихся частью программы, а служащих для пояснения. Язык HTML тоже имеет такую возможность.</p> <p>Комментарии в языке HTML начинаются со специального тега <b><!-- </b>. Следует обратить внимание на отсутствие закрывающей угловой скобки. Любой текст, идущий за этим тегом, рассматривается как комментарий и не отображается при отображении документа. Заканчивают комментарий символами <b>--!> </b>. Комментарий может содержать любые символы, кроме символа «больше» (<b>> </b>), и, таким образом, не может включать в себя теги.</p> <p>Примеры тегов HTML:</p> <p><b><title> <Body> <TABLE> </A> <img> </Center> </b></p> <p>Примеры парных тегов HTML:</p> <p><b><HTML> </HTML>, </b></p> <p><b>, </b></p> <p><b><HEAD> </HEAD>, </b></p> <p><b><H3> </H3>, </b></p> <p><b><ADDRESS> </ADDRESS> , </b></p> <p><b>, </b></p> <p>Примеры одиночных тегов HTML:</p> <p><b><BR>, <HR>, <META>, <BASEFONT>, <FRAME>, <INPUT>. </b></p> <p>Примеры тегов HTML с атрибутами:</p> <p><b><BODY BGCOLOR="#000000” TEXT=”FFFFFF" BACKGROUND="RAIN.GIF"> </b></p> <p><b><OPTION SELECTED> </b></p> <p><b><FRAME SRC="file.html" NORESIZE> </b></p> <p>Структура документа HTML</p> <p>Документ HTML состоит из основного текста документа и тегов разметки, которые, как мы уже знаем, являются наборами обычных символов. Таким образом, документ HTML - это, по существу, обычный текстовый файл. Для его создания можно использовать любой текстовый редактор, хотя бы и тот простейший редактор Блокнот, который входит в состав Windows 9x.</p> <p>1. Все документы HTML имеют строго заданную структуру. Документ должен начинаться с тега <b><HTML> </b> и заканчиваться соответствующим закрывающим тегом <b></HTML> </b>. Эта пара тегов сообщает броузеру, что перед ним действительно документ HTML.</p> <p>2. Документ HTML состоит <i>из раздела заголовков </i> и <i>тела документа, </i>идущих именно в таком порядке. Раздел заголовков заключен между тегами <b><HEAD> </b> и <b></HEAD> </b> и содержит информацию о документе в целом. В частности, этот раздел должен содержать внутри себя теги <b><TITLE> </b> и <b> , между которыми размещают «официальный» заголовок документа. Большинство броузеров, работающих в системе Windows, используют этот заголовок, чтобы заполнить строку заголовка окна броузера.

      3. Сам текст документа располагается в теле документа. Тело документа располагается между тегами и .

      Четыре перечисленных парных тега определяют основную структуру документа HTML. Они встречаются (или их наличие подразумевается) во всех документах HTML.

      На практике определить местоположение этих структурных основных тегов можно и при их отсутствии. Поэтому, если теги , и , а также соответствующие им закрывающие теги опущены, то программа - броузер может сама определить то место, где они должны были находиться. Тег </b>, определяющий заголовок документа, считается обязательным, но и его пропуск не вызовет катастрофических последствий в современных броузерах. Но все-таки при создании Web-страниц опускать все эти теги не рекомендуется, ведь заранее неизвестно, как поведет себя конкретный броузер, установленный на компьютере читателя.</p> <p>Простейший правильно подготовленный документ HTML</p> <p><b><HTML> </b></p> <p><b><HEAD> </b></p> <p><b><ТIТLЕ> </b>Функциональные разделы документа<b></ТIТLЕ> </b></p> <p><b></HEAD> </b></p> <p><b><BODY> </b></p> <p><b></BODY> </b></p> <p>Интернет представляет собой всемирную сеть, объединяющую компьютерные сети по всему миру на базе единых стандартных соглашений (протоколов) о способах обмена информациейи единой системой адресации. </p> <p>К настоящему времени сеть Интернет получила беспрецедентное распространение. По оценкам экспертов Интернет объединяет более 100 миллионов компьютеров. Услугами Интернет пользуется свыше300 миллионов человек в 170 странах мира. </p> <p>С функциональной точки зрения Интернет представляет собой: </p> <p>ü </span><span>недорогое быстродействующее средство общения между абонентами по всему миру; </p> <p>ü </span><span>не имеющее аналогов хранилище информации по любым областям знаний; </p> <p>ü </span><span>новую перспективную среду длядеятельности. </p> <p>Влияние Интернет распространяется не только на технологическую область компьютерных коммуникаций, оно имеет также социальную направленность и пронизывает все общество по мере того, как все более широкое распространение получают оперативные средства получения знаний, электронной коммерции. </p> <p>Самым распространенным и востребованным сегодня является такой сервис Интернет, как </span>WWW (World Wide Web <span> − всемирная паутина). Информацияв WWW представлена в виде так называемых гипертекстовых (или, более широко, гипермедийных) документов,которые могут содержать отформатированный текст, графику, аудио- и видеофрагменты.Основной особенностью гипертекстовых документов является наличие активных зон, чувствительных к щелчку мыши.Активными могут быть фрагменты текста, целые изображения и их части;щелчок по активной зоне вызывает загрузку связанного с этой зоной (целевого) документа. </p> <p>Чтобы научиться размещать материалы в Интернет, прежде всего необходимо познакомиться с языком разметки гипертекста </span>HTML <span> (<b>H </b>yper<b>T </b>ext <b>M </b>arkup <b>L </b>anguage) </p> <h2> <span>Основы языка HTML </span></h2> <p>Язык разметки гипертекстовых документов HTML представляет собой совокупностькоманд, называемых тегами(от английского <i>tag </i>).Встречающиеся в тексте документа HTML-теги интерпретируются браузером при отображении документа. </p> <p>Просмотр HTML-документов осуществляется с помощью программ-<i>браузеров </i>(от английского <i>browser </i>), которые отображают документ в соответствии с HTML-разметкой и обеспечивают навигацию по гиперссылкам. Наиболее распространенными являются браузеры </span><b>Microsoft </b><b>Internet </b><b>Explorer </b>фирмы Microsoft Corporation и <b>Netscape </b><b>Navigator </b>фирмы Netscape Communications Corporation . </p> <p>Поскольку HTML-документ представляет собой текстовый файл, его можно подготовить в простейшем текстовом редакторе, например, в блокноте (<i>Notepad </i>), но это очень трудоемко. Чаще используют специализированные редакторы, предназначенные именно для подготовки HTML-документов, которые позволяют вставлять теги с помощью кнопок панелей инструментов либо команд меню, и задавать атрибуты тегов в диалоговых окнах, например, <b>Macromedia </b> <b>Dreamweaver, </b> </span><b>Microsoft </b><b>FrontPage , </b><b>HomeSite </b>и др. </p> <p>HTML-документ может быть получен преобразованием в HTML-формат, например, из формата документов пакета Microsoft Office. Надо отметить, что при таком преобразовании исходный текст HTML-документа получается крайне избыточным и нуждается в коррекции.Значительно эффективнее пользоваться специальными HTML - редакторами. </p> <h3> <span>Синтаксис HTML-тегов </span></h3> <p>HTML-тег записывается в угловых скобках (символы)и состоит из имени, за которым может следовать список атрибутов (для большинства тегов необязательный). Имена и атрибуты представляют собой английские слова и аббревиатуры. </p> <p>Теги условно можно разделить на две группы: </p> <p><b>Парные </b><span> теги (называемые также <i>контейнерами </i>) имеют два компонента: открывающий (начальный) и закрывающий (конечный); закрывающий компонент имеет то же название, но при записи перед названием ставится косая черта(символ <b>/ </b>). Между открывающим и закрывающим компонентами может располагаться текст документа и другие теги. Фрагмент документа, расположенный между открывающим и закрывающим элементом тега-контейнера форматируется браузером согласно смыслу тега.Например, текст, расположенный между тегами<b>и </b> , будет выведен полужирным начертанием (название тега - от английского <i>bold </i>). Парные теги могут быть вложены друг в друга, но не должны пересекаться. </p> <p><b>Непарные </b><span> теги (называемые также <i>автономными </i>) не имеют конечного компонента.При их интерпретации в отображаемый документ вставляется тот или иной объект. Например, тег <img src='/windows/podgotovka-pochvy-pogovorim-ob-html-struktura-html-dokumenta-osnovnye-tegi.html' loading=lazy> , встречающийся в тексте HTML-документа, вызывает вставку графического изображения из файла pict.gif . </p> <p>Атрибуты в списке отделяются друг от друга одним или несколькими пробелами, либо символами табуляции, либо символами перевода строки;последовательность записи атрибутов несущественна. Подавляющее большинство атрибутов употребляются в виде пары<i>название атрибута = значение атрибута </i>. В случае, когда значение атрибута представляет собой более чем одно слово либо одно число, его следует заключить в одинарные или двойные кавычки. В закрывающих компонентах тегов атрибуты не указываются. </p> <p><br style="page-break-before: always;" clear="all"></p> <p>Вот пример тега с атрибутами: </p> <table width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td> <p>Название тега <span> Название атрибута </p> </td> </tr></tbody></table><table width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td> </td> </tr></tbody></table><table width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td> <p>Значение атрибута </p> </td> </tr></tbody></table><table width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td> <p>Название атрибута </p> </td> </tr></tbody></table><table width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td> <p>Значение атрибута </p> </td> </tr></tbody></table><table cellspacing="0" cellpadding="0" align="left"><tbody><tr><td width="101" height="1"> </td> </tr><tr><td> </td> <td> </td> </tr></tbody></table><p><FONTSIZE=+2COLOR=RED> Привет ! </p> <p>Встретив такой тег в HTML-документе, браузер интерпретирует его, выводя следующий за тегом текст символами, увеличенными относительно базового размера(SIZE=+2) и красного цвета (COLOR=RED); это форматирование текста применяется до тех пор, пока не встретится закрывающий тег. </p> <p>Регистр символов в записи тегов и атрибутов значения не имеет. </p> <h3> <span>Структура HTML-документа </span></h3> <p>HTML-документ заключается в теги и.Между этими тегами располагаются две секции:секция заголовка (между тегами и) и секция тела документа (между тегами и).Секция заголовка содержит описание параметров, используемых при отображении документа, но не отражающихся непосредственно в окне браузера.Секция тела документа содержит основной текст, предназначенный для отображения браузером, теги форматирования, размещения рисунков, таблиц, гиперссылок и т.д. </p> <p>HTML <span>-код простейшего документа, пригодного для размещений в Интернет, выглядит так: </p> <p><b>< </b>TITLE <b>> </b><span>Наша первая страничкаTITLE > </p> <p>Самый простой HTML- документ </p> <p>Данный кодможет быть набран в текстовом редакторе Блокнот и сохранен как файл с расширением. </span>htm или. html <span>− в этом случай документ откроется в браузере, установленном на вашем компьютере по умолчанию. Браузер отобразит этот документ, выведя в своем окне строку "Самый простой HTML-документ", расположенную в секции тела документа. Фраза "Наша первая страничка" будет отображаться в строке заголовка браузера. </p> <h5>Раздел HEAD </h5> <p>Секция заголовка обычно содержит теги, незаметные для пользователя, но тем не менее способные активно влиять не внешний вид документа. </p> <table class="MsoNormalTable" style="border-collapse: collapse; border: none; mso-border-alt: solid windowtext .5pt; mso-yfti-tbllook: 480; mso-padding-alt: 0cm 5.4pt 0cm 5.4pt; mso-border-insideh: .5pt solid windowtext; mso-border-insidev: .5pt solid windowtext;" border="1" cellspacing="0" cellpadding="0"><tbody><tr style="mso-yfti-irow: 0; mso-yfti-firstrow: yes;"><td style="width: 140.1pt; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="187"> <p>Тег </p> </td> <td style="width: 366.85pt; border: solid windowtext 1.0pt; border-left: none; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="489"> <p>Назначение </p> </td> </tr><tr style="mso-yfti-irow: 1;"><td style="width: 140.1pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="187"> </td> <td style="width: 366.85pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="489"> <p>Определяет имя всего документа. Имя, как правило, отображается в заголовке окна браузера. Данный элемент обязателен для любого HTML-документа и может быть указан не более одного раза. </p> </td> </tr><tr style="mso-yfti-irow: 2;"><td style="width: 140.1pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="187"> </td> <td style="width: 366.85pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="489"> <p>Указывает базовый адрес текущего документа (URL), который станет отправной точкой для расчета относительных адресов внутри документа. Элемент не имеет конечного тэга. Обязательно присутствие хотя бы одного из аргументов: </p> <p><b>HREF </b><span> - определяет базовый адрес (URL) текущего документа. </p> <p><b>TARGET </b><span> - определяет имя фрейма, которое будет использоваться в гиперссылках по умолчанию. Это может вам пригодиться, если вы хотите открывать все ссылки документа в другом фрейме. </p> </td> </tr><tr style="mso-yfti-irow: 3;"><td style="width: 140.1pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="187"> <p>< STYLE TYPE= "<span>text /css " </span>> </p> </td> <td style="width: 366.85pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="489"> <p>Используется для вставки в документ каскадных таблиц стилей (CSS − Cascade Style Sheet). TYPE − обязательный атрибут, значением которого, как правило, является "<b>text </b>/<b>css </b>". </p> </td> </tr><tr style="mso-yfti-irow: 4; mso-yfti-lastrow: yes;"><td style="width: 140.1pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="187"> <p>< МЕТА …> </p> </td> <td style="width: 366.85pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="489"> <p>Элемент МЕТА используется для технического описания документа. С помощью этого элемента в заголовок документа внедряется дополнительная полезная информация, невидимая для пользователя, но порой просто незаменимая для правильной индексации вашей страницы роботами поисковых серверов. Элемент не имеет конечного тега. </p> <p>NAME - определяет имя мета-записи. Существует множество предопределенных имен, некоторые из которых вы можете увидеть в указанном ниже примере. </p> <p>CONTENT - присваивает значение мета-записи, определенной в параметре NAME. </p> </td> </tr></tbody></table><h5>Раздел BODY </h5> <p>Этот раздел включает в себя основное содержание веб-страницы − текст документа, изображения, таблицы и т.п. Элемент BODY должен встречаться в документе не более одного раза и может включать следующие атрибуты: </p> <table class="MsoNormalTable" style="border-collapse: collapse; mso-table-layout-alt: fixed; border: none; mso-border-alt: solid windowtext .5pt; mso-padding-alt: 0cm 5.4pt 0cm 5.4pt; mso-border-insideh: .5pt solid windowtext; mso-border-insidev: .5pt solid windowtext;" width="100%" border="1" cellspacing="0" cellpadding="0"><tbody><tr style="mso-yfti-irow: 0; mso-yfti-firstrow: yes;"><td style="width: 133.8pt; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="178"> <p>Синтаксис атрибута </p> </td> <td style="width: 373.15pt; border: solid windowtext 1.0pt; border-left: none; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="498"> <p>Назначение </p> </td> </tr><tr style="mso-yfti-irow: 1; height: 30.8pt;"><td style="width: 133.8pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 30.8pt;" valign="top" width="178"> <p>MARGINHEIGHT=<i>число </i> </p> </td> <td style="width: 373.15pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 30.8pt;" valign="top" width="498"> <p>Определяет ширину (в пикселях) верхнего и нижнего полей документа. Работает только в браузерах Netscape </p> </td> </tr><tr style="mso-yfti-irow: 2; height: 33.35pt;"><td style="width: 133.8pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 33.35pt;" valign="top" width="178"> <p>TOPMARGIN= <i>число </i> </p> </td> <td style="width: 373.15pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 33.35pt;" valign="top" width="498"> <p>Определяет ширину (в пикселях) верхнего и нижнего полей документа. Работает только в браузерах Internet Explorer </p> </td> </tr><tr style="mso-yfti-irow: 3; height: 35.25pt;"><td style="width: 133.8pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 35.25pt;" valign="top" width="178"> <p>MARGINWIDTH= <i>число </i> </p> </td> <td style="width: 373.15pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 35.25pt;" valign="top" width="498"> <p>Определяет ширину (в пикселях) левого и правого полей документа. Работает только в браузерах Netscape </p> </td> </tr><tr style="mso-yfti-irow: 4; height: 33.65pt;"><td style="width: 133.8pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 33.65pt;" valign="top" width="178"> <p>LEFTMARGIN= <i>число </i> </p> </td> <td style="width: 373.15pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 33.65pt;" valign="top" width="498"> <p>Определяет ширину (в пикселях) левого и правого полей документа. Работает только в браузерах Internet Explorer </p> </td> </tr><tr style="mso-yfti-irow: 5; height: 42.85pt;"><td style="width: 133.8pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 42.85pt;" valign="top" width="178"> <p>BACKGROUND= <i>URL </i> </p> </td> <td style="width: 373.15pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 42.85pt;" valign="top" width="498"> <p>Определяет изображение для "заливки" фона (фонового рисунка). Значение задается в абсолютного или относительного адреса изображения (см. раздел <b>Размещение рисунков) </b> </p> </td> </tr><tr style="mso-yfti-irow: 6; height: 13.7pt;"><td style="width: 133.8pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 13.7pt;" valign="top" width="178"> <p>BGCOLOR=<i>цвет </i> </p> </td> <td style="width: 373.15pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 13.7pt;" valign="top" width="498"> <p>Определяет цвет фона документа. </p> <p><i>Microsoft </i><i>Internet </i><i>Explorer </i><span>поддерживает 16 стандартных имен цветов (</span>aqua , black , blue , fuchsia , gray , green , lime , maroon , navy , olive , purple , red , silver , teal , yellow , white ) </p> <p>Другим способом является использование кода цвета в виде шестиразрядного шестнадцатеричного числа, задающее интенсивность красной (первые две цифры), зеленой (следующие две цифры) и синей (последние две цифры) составляющей. Интенсивность каждой составляющей в шестнадцатеричной форме изменяется от 00 до FF. При задании цвета в качестве значения атрибута некоторого тега перед шестнадцатеричным числом ставится символ#. </p> <p>Например, запись </span>COLOR ="#0000 FF <span>" означает синий цвет </p> <p>Несмотря на принципиальную возможность задать миллионы цветов, надо учитывать, что браузеры отображают лишь 256 цветов, причем у каждого браузера своя цветовая палитра.В этой палитре браузер подберет цвет, наиболее близкий к заданному </p> </td> </tr><tr style="mso-yfti-irow: 7; height: 13.65pt;"><td style="width: 133.8pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 13.65pt;" valign="top" width="178"> <p>TEXT=<i>цвет </i> </p> </td> <td style="width: 373.15pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 13.65pt;" valign="top" width="498"> <p>Определяет цвет текста в документе </p> </td> </tr><tr style="mso-yfti-irow: 8; height: 16.45pt;"><td style="width: 133.8pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 16.45pt;" valign="top" width="178"> <p>LINK=<i>цвет </i> </p> </td> <td style="width: 373.15pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 16.45pt;" valign="top" width="498"> <p>Определяет цвет гиперссылок в документе </p> </td> </tr><tr style="mso-yfti-irow: 9; height: 18.5pt;"><td style="width: 133.8pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 18.5pt;" valign="top" width="178"> <p>ALINK=<i>цвет </i> </p> </td> <td style="width: 373.15pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 18.5pt;" valign="top" width="498"> <p>Определяет цвет подсветки гиперссылок вмомент нажатия </p> </td> </tr><tr style="mso-yfti-irow: 10; mso-yfti-lastrow: yes; height: 34.7pt;"><td style="width: 133.8pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 34.7pt;" valign="top" width="178"> <p>VLINK </p> </td> <td style="width: 373.15pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 34.7pt;" valign="top" width="498"> <p>Определяет цвет гиперссылок на уже просмотренные документы </p> </td> </tr></tbody></table><h3> <span>Форматирование текста </span></h3> <h5> <span>Форматирование символов </span></h5> <p>Все теги форматирования символов имеют как открывающий, так и закрывающий компонент и действуют на заключенные между ними текст. </p> <p>Основным является тег <b> ... </b>FONT>, обязательно использующийся с одним или несколькими атрибутами, изменяющими размер, цвет и гарнитуру шрифта: </p> <table class="MsoNormalTable" style="border-collapse: collapse; mso-table-layout-alt: fixed; border: none; mso-border-alt: solid windowtext .5pt; mso-padding-alt: 0cm 5.4pt 0cm 5.4pt; mso-border-insideh: .5pt solid windowtext; mso-border-insidev: .5pt solid windowtext;" width="100%" border="1" cellspacing="0" cellpadding="0"><tbody><tr style="mso-yfti-irow: 0; mso-yfti-firstrow: yes;"><td style="width: 118.8pt; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="158"> <p>Синтаксис атрибута </p> </td> <td style="width: 331.4pt; border: solid windowtext 1.0pt; border-left: none; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="442"> <p>Назначение </p> </td> </tr><tr style="mso-yfti-irow: 1;"><td style="width: 118.8pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="158"> <p>SIZE = <i>значение </i> </p> </td> <td style="width: 331.4pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="442"> <p>Размер задается либо в форме абсолютного значения (число от 1 до 7),либо относительно размера основного шрифта (в форме +nили -n). </p> </td> </tr><tr style="mso-yfti-irow: 2;"><td style="width: 118.8pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="158"> <p>COLOR = <i>цвет </i> </p> </td> <td style="width: 331.4pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="442"> <p>Цвет </p> </td> </tr><tr style="mso-yfti-irow: 3; mso-yfti-lastrow: yes;"><td style="width: 118.8pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="158"> <p>FACE = <i>список шрифтов </i> </p> </td> <td style="width: 331.4pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="442"> <p>Гарнитуры для отображения текста; названия перечисляются в порядке предпочтения через запятую, например, </span><span>FACE =" </span><span>Verdana , </span><span>Helvetica , </span><span>Arial , </span><span>Sans - </span><span>Serif " </p> <p>Можно указывать и одну из гарнитур, но следует учитывать, что данный шрифт может быть не установлен на компьютере пользователя, и "экзотические" шрифты отображаться браузером не будут </p> </td> </tr></tbody></table><p>Кроме того, используются теги, позволяющие изменить начертание символов: </p> <p><b><span><b> . </b> </b><span>.. (от английского bold) − полужирный шрифт; </p> <p><b><span><i> .. </i> </b><span>. (от английского italic) − курсив; </p> <p> ... (от английского TeleType) − моноширинный шрифт; </p> <p>... (от английского <b>u </b>nderline) − подчеркнутый; </p> <p>... </span><span>S <span>> (от английского </span><span><b><span>s </b> </span><span><i><span>trikethrough </i><span>) − перечеркнутый; </p> <p>... (от английского <b>s </b>ub<i>script </i>) − нижний индекс; </p> <p>... (от английского sup<i>erscript </i>) − верхний индекс. </p> <p>Текст, заключенный между тегами </p> <p>и(от английского pre<i>formatted </i>), отображается так, как он был отформатирован предварительно, со всеми пробелами и переносами строк. </p> <h5><span>Форматирование абзацев </span></h5> <p>Текст выводится в окно браузера слово за словом, при достижении правой границы окна очередное слово автоматически переносится на новую строку. Даже если в коде страницы было введено несколько пробелов или текст записывался с новой строки, при просмотре в браузере эти действия отображены не будут. Поэтому чтобы вывести в тексте ряд последовательных пробелов или несколько пустых строк, приходится применять различные теги. </p> <p>Тег <b><br></b>(от английского b<i>reak </i>)разрывает текстовый поток и вставляет новую строку без образования нового абзаца.Несколько последовательных тегов <br> интерпретируются как несколько пустых строк.Межстрочный интервал одинарный.Закрывающего компонента тег не имеет, как и атрибутов. </p> <p>Тег(от английского p<i>aragraph </i>)начинает абзац;новый абзац отделяется от предыдущего двойным межстрочным интервалом.Абзац пустым быть не может, то есть несколько последовательных тегов </p> <p>интерпретируются как один (в отличие от тега <br>).Закрывающий компонент</p> <p>не обязателен, так как предыдущий абзац заканчивается там, где начинается новый.Тег имеет необязательный атрибут ALIGN, указывающий на вид выравнивания абзаца, который может принимать значенияLEFT, CENTER, RIGHT и </span>JUSTIFY <span>, задающие выравнивание соответственно по левому краю, центру, правому краю и по ширине. По центру будет выровнен и текст, заключенный в теги </p> ... <p>Если закрывающий компонент </p> <p>опустить, то заданный тип выравнивания сохраняется до следующего тега, задающего выравнивание, или до конца документа.</p> <p>HTML позволяет создавать форматировать абзацы как нумерованные или маркированные списки. Фрагмент текста, представляющий собой список, заключается в теги: </p> <p>упорядоченный (нумерованный) список (от английского o<i>rdered </i>l<i>ist </i>) </p> <p>неупорядоченный (маркированный) список (от английского u<i>nordered </i>l<i>ist </i>) </p> <p>Каждый элемент упорядоченного или неупорядоченного списка заключается в теги ... (от английского l<i>ist </i>i<i>tem </i>). При выводе текста каждый элемент списка будет располагаться с новой строки, обозначенной номером или маркером. Кроме того, у списка может быть заголовок, который задается тегом (от английского </span>l <i>ist </i>h <i>eader </i><span>). Закрывающие теги и не обязательны. </p> <table class="MsoNormalTable" style="border-collapse: collapse; border: none; mso-border-alt: solid windowtext .5pt; mso-yfti-tbllook: 480; mso-padding-alt: 0cm 5.4pt 0cm 5.4pt; mso-border-insideh: .5pt solid windowtext; mso-border-insidev: .5pt solid windowtext;" border="1" cellspacing="0" cellpadding="0"><tbody><tr style="mso-yfti-irow: 0; mso-yfti-firstrow: yes;"><td style="width: 111.75pt; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="149"> </td> <td style="width: 197.6pt; border: solid windowtext 1.0pt; border-left: none; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="263"> <p>Нумерованный список </p> </td> <td style="width: 197.6pt; border: solid windowtext 1.0pt; border-left: none; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="263"> <p>Маркированный список </p> </td> </tr><tr style="mso-yfti-irow: 1;"><td style="width: 111.75pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="149"> <p>Элемент кода </p> </td> <td style="width: 197.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="263"> <p>< O L> </p> <p><L H > Заголовок </p> <p>Первый элемент </p> <p>Второй элемент </p> <p>Третий элемент </p> </td> <td style="width: 197.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="263"> <p>< U L> </p> <p><L H > Заголовок </p> <p>Первый элемент </p> <p>Второй элемент </p> <p>Третий элемент </p> <p>U L> </p> </td> </tr><tr style="mso-yfti-irow: 2; mso-yfti-lastrow: yes;"><td style="width: 111.75pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="149"> <p>Отображение в браузере </p> </td> <td style="width: 197.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="263"> <p>Заголовок </p> <p>1. Первый элемент </p> <p>2. Второй элемент </p> <p>3. Третий элемент </p> </td> <td style="width: 197.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="263"> <p>Заголовок </p> <p>· </span> Первый элемент </p> <p>· </span> Второй элемент </p> <p>· </span> Третий элемент </p> </td> </tr></tbody></table><p>Многоуровневый список может быть организован посредством комбинации нумерованных и маркированных списков. </p> <p>Тегимеет необязательные атрибуты: </p> <table class="MsoNormalTable" style="border-collapse: collapse; mso-table-layout-alt: fixed; border: none; mso-border-alt: solid windowtext .5pt; mso-padding-alt: 0cm 5.4pt 0cm 5.4pt; mso-border-insideh: .5pt solid windowtext; mso-border-insidev: .5pt solid windowtext;" width="100%" border="1" cellspacing="0" cellpadding="0"><tbody><tr style="mso-yfti-irow: 0; mso-yfti-firstrow: yes; height: 13.45pt;"><td style="width: 125.9pt; border-top: solid windowtext 1.0pt; border-left: solid windowtext 1.0pt; border-bottom: none black 1.0pt; border-right: none; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-bottom-alt: none black 0cm; padding: 0cm 5.4pt 0cm 5.4pt; height: 13.45pt;" valign="top" width="168"> <p>Синтаксис атрибута </p> </td> <td style="width: 324.3pt; border: solid windowtext 1.0pt; border-bottom: none; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-right-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 13.45pt;" colspan="2" valign="top" width="432"> <p>Назначение </p> </td> </tr><tr style="mso-yfti-irow: 1; height: 13.45pt;"><td style="width: 125.9pt; border-top: none; border-left: solid windowtext 1.0pt; border-bottom: solid windowtext 1.0pt; border-right: none; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-bottom-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 13.45pt;" rowspan="6" valign="top" width="168"> <p>TYPE = <i>формат </i> </p> </td> <td style="width: 324.3pt; border: solid windowtext 1.0pt; border-bottom: none; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-right-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 13.45pt;" colspan="2" valign="top" width="432"> <p>формат нумерации может иметь значения: </p> </td> </tr><tr style="mso-yfti-irow: 2; height: 12.75pt;"><td style="width: 35.45pt; border: none; border-left: solid windowtext 1.0pt; mso-border-left-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 12.75pt;" valign="top" width="47"> </td> <td style="width: 288.85pt; border: none; border-right: solid windowtext 1.0pt; mso-border-right-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 12.75pt;" valign="top" width="385"> <p>арабские цифры (по умолчанию) </p> </td> </tr><tr style="mso-yfti-irow: 3; height: 7.5pt;"><td style="width: 35.45pt; border: none; border-left: solid windowtext 1.0pt; mso-border-left-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 7.5pt;" valign="top" width="47"> </td> <td style="width: 288.85pt; border: none; border-right: solid windowtext 1.0pt; mso-border-right-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 7.5pt;" valign="top" width="385"> <p>прописные буквы </p> </td> </tr><tr style="mso-yfti-irow: 4; height: 15.0pt;"><td style="width: 35.45pt; border: none; border-left: solid windowtext 1.0pt; mso-border-left-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 15.0pt;" valign="top" width="47"> </td> <td style="width: 288.85pt; border: none; border-right: solid windowtext 1.0pt; mso-border-right-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 15.0pt;" valign="top" width="385"> <p>строчные буквы </p> </td> </tr><tr style="mso-yfti-irow: 5; height: 11.25pt;"><td style="width: 35.45pt; border: none; border-left: solid windowtext 1.0pt; mso-border-left-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 11.25pt;" valign="top" width="47"> </td> <td style="width: 288.85pt; border: none; border-right: solid windowtext 1.0pt; mso-border-right-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 11.25pt;" valign="top" width="385"> <p>большие римские цифры </p> </td> </tr><tr style="mso-yfti-irow: 6; height: 15.0pt;"><td style="width: 35.45pt; border-top: none; border-left: solid windowtext 1.0pt; border-bottom: solid windowtext 1.0pt; border-right: none; mso-border-left-alt: solid windowtext .5pt; mso-border-bottom-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 15.0pt;" valign="top" width="47"> </td> <td style="width: 288.85pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-bottom-alt: solid windowtext .5pt; mso-border-right-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 15.0pt;" valign="top" width="385"> <p>маленькие римские цифры </p> </td> </tr><tr style="mso-yfti-irow: 7; mso-yfti-lastrow: yes;"><td style="width: 125.9pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="168"> <p>START = значение </p> </td> <td style="width: 324.3pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-left-alt: solid windowtext .5pt; mso-border-bottom-alt: solid windowtext .5pt; mso-border-right-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="432"> <p>первый номер в списке (по умолчанию 1) </p> </td> </tr></tbody></table><p>Тегимеет необязательный атрибут </p> <table class="MsoNormalTable" style="border-collapse: collapse; mso-table-layout-alt: fixed; border: none; mso-border-alt: solid windowtext .5pt; mso-padding-alt: 0cm 5.4pt 0cm 5.4pt; mso-border-insideh: .5pt solid windowtext; mso-border-insidev: .5pt solid windowtext;" width="100%" border="1" cellspacing="0" cellpadding="0"><tbody><tr style="mso-yfti-irow: 0; mso-yfti-firstrow: yes; page-break-inside: avoid; height: 13.45pt;"><td style="width: 5.0cm; border-top: solid windowtext 1.0pt; border-left: solid windowtext 1.0pt; border-bottom: none black 1.0pt; border-right: none; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-bottom-alt: none black 0cm; padding: 0cm 5.4pt 0cm 5.4pt; height: 13.45pt;" valign="top" width="189"> <p>Синтаксис атрибута </p> </td> <td style="width: 365.2pt; border: solid windowtext 1.0pt; border-bottom: none; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-right-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 13.45pt;" colspan="2" valign="top" width="487"> <p>Назначение </p> </td> </tr><tr style="mso-yfti-irow: 1; page-break-inside: avoid; height: 13.45pt;"><td style="width: 5.0cm; border-top: none; border-left: solid windowtext 1.0pt; border-bottom: solid windowtext 1.0pt; border-right: none; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-bottom-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 13.45pt;" rowspan="4" valign="top" width="189"> <p>TYPE = <i>формат </i> </p> </td> <td style="width: 365.2pt; border: solid windowtext 1.0pt; border-bottom: none; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-right-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 13.45pt;" colspan="2" valign="top" width="487"> <p>формат маркера может иметь значения: </p> </td> </tr><tr style="mso-yfti-irow: 2; page-break-inside: avoid; height: 12.75pt;"><td style="width: 63.85pt; border: none; border-left: solid windowtext 1.0pt; mso-border-left-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 12.75pt;" valign="top" width="85"> <p>Disc </p> </td> <td style="width: 301.35pt; border: none; border-right: solid windowtext 1.0pt; mso-border-right-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 12.75pt;" valign="top" width="402"> <p>диск (по умолчанию) </p> </td> </tr><tr style="mso-yfti-irow: 3; page-break-inside: avoid; height: 7.5pt;"><td style="width: 63.85pt; border: none; border-left: solid windowtext 1.0pt; mso-border-left-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 7.5pt;" valign="top" width="85"> <p>Circle </p> </td> <td style="width: 301.35pt; border: none; border-right: solid windowtext 1.0pt; mso-border-right-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 7.5pt;" valign="top" width="402"> <p>окружность </p> </td> </tr><tr style="mso-yfti-irow: 4; mso-yfti-lastrow: yes; page-break-inside: avoid; height: 15.0pt;"><td style="width: 63.85pt; border-top: none; border-left: solid windowtext 1.0pt; border-bottom: solid windowtext 1.0pt; border-right: none; mso-border-left-alt: solid windowtext .5pt; mso-border-bottom-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 15.0pt;" valign="top" width="85"> <p>Square </p> </td> <td style="width: 301.35pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-bottom-alt: solid windowtext .5pt; mso-border-right-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; height: 15.0pt;" valign="top" width="402"> <p>Квадрат </p> </td> </tr></tbody></table><p>Абзацы можно оформить и в видезаголовков уровня (от </span>n =1 до n <span>=6), для этого используют теги вида<b><H </b>n<b>> ... n<b>>. </b>Заголовок первого уровня выводится наиболее крупным шрифтом. </b> </p> <p>Теги </p> <h1></h1> <h2></h2> <p>, ... , </p> <h6></h6> <p>могут иметь атрибут выравниванияALIGNсо значениямиLEFT,RIGHT и CENTER. </p> <h3><span>Размещение рисунков </span></h3> <p>Изображения, которые демонстрируются браузером при просмотре веб-страницы, хранятся в отдельных файлах формата </span>gif , jpg (jpeg ) или png <span>, а в коде страницы делается ссылка на нужный файл. Для этого используется непарный тег , имеющий один обязательный и ряд необязательных атрибутов.. </p> <table class="MsoNormalTable" style="border-collapse: collapse; mso-table-layout-alt: fixed; border: none; mso-border-alt: solid windowtext .5pt; mso-padding-alt: 0cm 5.4pt 0cm 5.4pt; mso-border-insideh: .5pt solid windowtext; mso-border-insidev: .5pt solid windowtext;" width="100%" border="1" cellspacing="0" cellpadding="0"><tbody><tr style="mso-yfti-irow: 0; mso-yfti-firstrow: yes;"><td style="width: 506.95pt; border: none; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="676"> <p>Обязательный атрибут: </p> </td> </tr><tr style="mso-yfti-irow: 1;"><td style="width: 154.25pt; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="206"> <p>SRC = <i>url </i> </p> </td> <td style="width: 352.7pt; border: solid windowtext 1.0pt; border-left: none; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="470"> <p>Адрес графического файла (относительный или абсолютный) </p> </td> </tr><tr style="mso-yfti-irow: 2; height: 21.45pt;"><td style="width: 506.95pt; border: none; padding: 0cm 5.4pt 0cm 5.4pt; height: 21.45pt;" colspan="2" valign="top" width="676"> </td> </tr><tr style="mso-yfti-irow: 3;"><td style="width: 154.25pt; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="206"> <p>ALT = <i>текст </i> </p> </td> <td style="width: 352.7pt; border: solid windowtext 1.0pt; border-left: none; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="470"> <p>Альтернативный текст, выводимый в режиме браузера без загрузки изображений (обязательно заключается в кавычки) </p> </td> </tr><tr style="mso-yfti-irow: 4;"><td style="width: 154.25pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="206"> <p>BORDER = <i>значение </i> </p> </td> <td style="width: 352.7pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="470"> <p>Толщина обрамляющей рамки в пикселях, 0 означает отсутствие рамки (по умолчанию) </p> </td> </tr><tr style="mso-yfti-irow: 5;"><td style="width: 154.25pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="206"> <p>BORDERCOLOR = <i>цвет </i> </p> </td> <td style="width: 352.7pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="470"> <p>Задает цвет обрамляющей рамки </p> </td> </tr><tr style="mso-yfti-irow: 6;"><td style="width: 154.25pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="206"> <p>HEIGHT = <i>значение </i> </p> </td> <td style="width: 352.7pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="470"> <p>Высота изображения в пикселях(по умолчанию оригинальная) либо в процентах от высоты окна браузера </p> </td> </tr><tr style="mso-yfti-irow: 7;"><td style="width: 154.25pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="206"> <p>WIDTH = <i>значение </i> </p> </td> <td style="width: 352.7pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="470"> <p>Ширина изображения в пикселях(по умолчанию оригинальная) либо в процентах от ширины окна браузера </p> </td> </tr><tr style="mso-yfti-irow: 8;"><td style="width: 154.25pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="206"> <p>HSPACE = <i>значение </i> </p> </td> <td style="width: 352.7pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="470"> <p>Свободное пространство слева и справа от изображения в пикселях </p> </td> </tr><tr style="mso-yfti-irow: 9;"><td style="width: 154.25pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="206"> <p>VSPACE = <i>значение </i> </p> </td> <td style="width: 352.7pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="470"> <p>Свободное пространство сверху и снизу от изображения в пикселях </p> </td> </tr><tr style="mso-yfti-irow: 10; mso-yfti-lastrow: yes;"><td style="width: 154.25pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="206"> <p>ALIGN = <i>значение </i> </p> </td> <td style="width: 352.7pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="470"> <p>Выравнивание изображения по горизонтали. </p> <p>Если заданы значения </span>LEFT либо RIGHT <span>, изображение соответствующим образом будет выровнено по горизонтали,задание этих значений обеспечивает обтекание изображения текстом </p> </td> </tr></tbody></table><p>Рассмотрим подробнее абсолютный и относительный способы адресации файла. </p> <p><i><span>Адресация в абсолютной форме </span> </i><span> используется при ссылках на ресурсы, находящиеся на других серверах. Универсальный адрес, определяющий местонахождение информационного ресурса, носит название <b>URL </b>(Uniform Resource Locator - унифицированный адрес ресурса). URL состоит из двух частей, разделенных двоеточием. Первая часть указывает на тип сетевого протокола, который зависит от типа ресурса. Например, если ресурс располагается на WWW-сервере,это протокол <i>http </i>.Вторая часть включает в себя имя компьютера (сервера) в доменной системе имен и (если требуется) путевое имя файла. При записи путевого имени названия каталогов разделяются прямой косой чертой (символ <b>/ </b>), в именах файлов и каталогов <i>различаются прописные и строчные буквы </i>, пробелы не допускаются. Вот примеры URL: </p> <p>http://www. vshu . kirov .ru/ site / images / picture 1. jpg </p> <p>http://195.21.123.13:8110 </p> <p>ftp://everything.com/soft/prog.zip </p> <p>mailto:<span>This email address is being protected from spambots. You need JavaScript enabled to view it. </p> <p>Последний URL, указывающий на протокол <i>mailto </i>и адрес электронной почты, не ссылается ни на какой информационный ресурс; это единственный тип URL, при записи которого не ставятся после двоеточия две косые черты. </p> <p>Адресация рисунков в абсолютной форме при создании веб-сайта практически не используется. </p> <p><i><span>Адресация в относительной форме </span> </i><span> используется при ссылках на ресурсы, находящиеся на том же сервере. При записи пути к файлу названия каталогов разделяются прямой косой чертой (символ <b>/ </b>), переход по каталогам файловой системы на один уровень вверх обозначается двумя точками (символы <b>.. </b>). Чтобы было понятнее, представим себе компьютер, например, с такой структурой каталогов, содержащих HTML-файлы: </p> <p>SHAPE\* MERGEFORMAT </p> <table width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td> <p>MySite </p> </td> </tr></tbody></table><table width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td> <p>Pa </span>ges </p> </td> </tr></tbody></table><table width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td> <p>Ima ges </p> </td> </tr></tbody></table><table width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td> <p>Page1.htm </p> <p>Page2.htm </p> <p>Pict1.jpg </p> <p>Pict2.jpg </p> </td> </tr></tbody></table><table width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td> <p>Index.htm </p> <p>Picture.jpg </p> </td> </tr></tbody></table><p>В этом случае возможны, например, такие варианты записи тега </span>IMG : </p> <p>ü </span>< IMG SRC = Picture . jpg > (изображение Picture . jpg <span> располагается на страничке </span>Index . htm ) </p> <p>ü </span>< IMG SRC = Images / Pict 1. jpg > (изображение Pict 1. jpg <span> располагается на страничке </span>Index . htm ) </p> <p>ü </span>< IMG SRC =../ Picture . jpg > (изображение Picture . jpg <span> располагается на страничке </span>Page 1. htm ) </p> <p>ü </span>< IMG SRC =../ Images / Pict 1. jpg > (изображение Pict 1. jpg <span> располагается на страничке </span>Page 1. htm ) </p> <p>Несмотря на то, что формально обязательным является только атрибут SRC,на практике необходимо указывать и альтернативный текст (атрибут ALT), так как многие работают с браузером в режиме без загрузки изображений. </p> <p>Высоту и ширину области, в которой демонстрируется рисунок, задают при помощи атрибутов width и height в пикселях или в процентах к размеру экрана. В том случае, когда задается один из этих атрибутов, рисунок масштабируется таким образом, чтобы его высота или ширина соответствовали заданной. Второй размер устанавливается автоматически, в соответствующей пропорции. Применение только одного из атрибутов изменяет оба размера рисунка.<br> Если задать явно оба атрибута, то рисунок будет масштабироваться по двум осям в соответствии с заданными размерами. Атрибуты height и width меняют не время загрузки изображения, а только его вид (размер) на экране. </p> <h3>Гиперссылки </h3> <p>Гиперссылкой называют объект (текст, изображение, фрагмент изображения), при щелчке мышью по которому происходит переход к новому документу или фрагменту документа. Именно гиперссылки позволяют организовать переходы между любыми размещенными в сети Интернет документами. </p> <h5><span>Текстовые гиперссылки </span></h5> <p>Связь между HTML-документами и фрагментами документов организуется с помощью тега<b><a> ...</a> </b>(от английского <b>a </b><i>nchor - якорь </i>). </p> <p>Тегупотребляется как для создания ссылки на другой документ, так и для ссылки на фрагмент документа. </p> <table class="MsoNormalTable" style="border-collapse: collapse; mso-table-layout-alt: fixed; border: none; mso-border-alt: solid windowtext .5pt; mso-padding-alt: 0cm 5.4pt 0cm 5.4pt; mso-border-insideh: .5pt solid windowtext; mso-border-insidev: .5pt solid windowtext;" width="100%" border="1" cellspacing="0" cellpadding="0"><tbody><tr style="mso-yfti-irow: 0; mso-yfti-firstrow: yes;"><td style="width: 506.95pt; border: none; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="676"> <p>Обязательный атрибут: </p> </td> </tr><tr style="mso-yfti-irow: 1;"><td style="width: 154.25pt; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="206"> <p>HREF = <i>url </i> </p> </td> <td style="width: 352.7pt; border: solid windowtext 1.0pt; border-left: none; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="470"> <p>Адрес целевого документа (может быть представлен в абсолютной и относительной форме) </p> </td> </tr><tr style="mso-yfti-irow: 2; height: 21.45pt;"><td style="width: 506.95pt; border: none; padding: 0cm 5.4pt 0cm 5.4pt; height: 21.45pt;" colspan="2" valign="top" width="676"> <p>Основные необязательные атрибуты: </p> </td> </tr><tr style="mso-yfti-irow: 3;"><td style="width: 154.25pt; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="206"> <p>NAME="<i>имя </i>" </p> </td> <td style="width: 352.7pt; border: solid windowtext 1.0pt; border-left: none; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="470"> <p>Помечает находящийся между < </span>A > и <span>A <span>> фрагмент документа как возможный объект для ссылки. В качестве значения нужно <b>латиницей </b> написать любое слово-указатель, уникальное для данного документа. Например, тег <b> Раздел1 </b> создает так называемую метку (закладку) для перехода к разделу 1<b>. </b> В этом случае можно ссылаться на помеченную область простым указанием ее имени после имени документа (перед именем метки ставится #). </p> <p>Так, <b>< </b> <b>A </b><b>HREF =" </b><b>Index . </b><b>html # </b><b>part 1">К разделу 1 </b><b>A > </b><span> отправит вас в раздел " </span>part 1" файла Index . html , а <br><b>< </b> <b>A </b><b>HREF ="# </b><b>part 2"> К разделу 2 </b><b>A > − </b> в раздел " part <span>2" текущего документа при условии, что в документе имеется соответствующая метка </p> </td> </tr><tr style="mso-yfti-irow: 4;"><td style="width: 154.25pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="206"> <p>TARGET = "<i>имя" </i> </p> </td> <td style="width: 352.7pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="470"> <p>Имя кадра (фрейма) или окна для вывода целевого документа. </p> <p>Этот атрибут используется только совместно с параметром HREF. В качестве значения необходимо задать либо имя одного из существующих фреймов, либо одно из следующих зарезервированных имен: </p> <p><b>_self </b><span> - указывает, что определенный в параметре HREF документ должен отображаться в текущем фрейме;<br><b>_parent </b> - указывает, что документ должен отображаться во фрейме-родителе текущего фрейма (целиком занять окно браузера); </p> <p><b>_blank </b><span> - указывает, что документ должен отображаться в новом окне </p> </td> </tr><tr style="mso-yfti-irow: 5; mso-yfti-lastrow: yes;"><td style="width: 154.25pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="206"> <p>TITLE= "<i>текст </i>" </p> </td> <td style="width: 352.7pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="470"> <p>Выводит всплывающую подсказку при наведении указателя мыши на гиперссылку </p> </td> </tr></tbody></table><p>Текст и изображения, размещенные между тегамистановятся активной зоной документа, чувствительной к щелчку мыши, который вызывает загрузку целевого документа. Текст гиперссылки выделяется подчеркиванием и цветами, указанными как значение атрибутов LINK, </span>A LINK, V <span>LINK тега (либо цветом по умолчанию). </p> <h5><span>Гиперссылки-картинки </span></h5> <p>Чтобы сделать гиперссылкой целое изображение, также применяется тег <b><a> ...</a> </b>., только вместо текста (или вместе с текстом) между <b>< </b> </span><b>A > </b> и <b>A > </b><span> располагается тег < </span>IMG <span>…> со всеми соответствующими атрибутами. </p> <p>Например , . </p> <h5><span>Карта гиперссылок </span></h5> <p>Тег позволяет сделать активной зоной текстовый фрагмент или изображение <b>целиком </b>; для того же, чтобы <b>разные фрагменты </b> одного изображения ссылались на разные целевые документы, придется использовать тег, реализующий изображение-карту. </p> <p>У тега-контейнера единственным обязательным атрибутом является <b>NAME </b>, значением которого будет имя (например, <b>NAME=" </b> </span><b>mymap " </b><span>, которое должно быть использовано при описании атрибута <b>USEMAP </b> тега IMG, описывающего изображение, призванного служить картой (при этом к имени карты приписывается слева # − <b>USEMAP ="# </b> </span><b>mymap ") </b></p> <p>Внутри контейнера каждой чувствительной к перемещению мыши зоне изображения должен соответствовать тег с атрибутами: </p> <table class="MsoNormalTable" style="border-collapse: collapse; mso-table-layout-alt: fixed; border: none; mso-border-alt: solid windowtext .5pt; mso-padding-alt: 0cm 5.4pt 0cm 5.4pt; mso-border-insideh: .5pt solid windowtext; mso-border-insidev: .5pt solid windowtext;" border="1" cellspacing="0" cellpadding="0"><tbody><tr style="mso-yfti-irow: 0; mso-yfti-firstrow: yes;"><td style="width: 145.2pt; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="194"> <p>Синтаксис атрибута </p> </td> <td style="width: 329.45pt; border: solid windowtext 1.0pt; border-left: none; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="439"> <p>Назначение </p> </td> </tr><tr style="mso-yfti-irow: 1;"><td style="width: 145.2pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="194"> <p>COORDS = <i>список </i> </p> </td> <td style="width: 329.45pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="439"> <p>Список через запятую координат активной зоны (зависит от типа заданной формы зоны) </p> </td> </tr><tr style="mso-yfti-irow: 2;"><td style="width: 145.2pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="194"> <p>HREF = <i>url </i> </p> </td> <td style="width: 329.45pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="439"> </td> </tr><tr style="mso-yfti-irow: 3;"><td style="width: 145.2pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="194"> <p>SHAPE = <i>форма </i> </p> </td> <td style="width: 329.45pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="439"> <p>Определяет форму активной зоны. Возможные значения этого атрибута: </p> <p><i>circle </i><span> (окружность – задается координатами центра и радиусом в пикселях); </p> <p><i>rect </i><span> (прямоугольник - задается координатами левого верхнего и правого нижнего угла); </p> <p><i>poly </i><span> (многоугольник - задается координатами своих вершин) </p> <p>Координаты во всех случаях отсчитываются от верхнего левого угла изображения в пикселях, ось Х направлена вправо, ось </span>Y − вниз. </p> </td> </tr><tr style="mso-yfti-irow: 4; mso-yfti-lastrow: yes;"><td style="width: 145.2pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="194"> <p>NOREF </p> </td> <td style="width: 329.45pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="439"> <p>иногда бывает нужно указать, что данная зона (заданная атрибутом SHAPE и координатами COORDS) не является активной, реакции на щелчок мыши нет </p> </td> </tr></tbody></table><h3>Таблицы </h3> <p>Таблицы в HTML-документах используются не столько для того, чтобы располагать данные в обрамленных ячейках, сколько с целью расположения фрагментов текста и изображений друг относительно друга. </p> <p>Таблицы в HTML <span> строятся построчно. Все табличные данные заключаются в теги </p> <p>; описание каждого ряда ячеек (строк) заключается в теги <b>... </b>; содержимое каждой ячейки заключается в теги <b>... </b>(обычные ячейки) или <b><T </b> </span><b>H > ... </b><b>H > </b><span> (заголовки)<b>. </b> </p> <p>Таким образом, для описания, например, таблицы из двух строк, каждая из которых содержит по две ячейки, придется создать следующую конструкцию: </p> <table class="MsoTableWeb1" style="mso-cellspacing: 2.0pt; mso-yfti-tbllook: 480; mso-table-lspace: 9.0pt; margin-left: 6.75pt; mso-table-rspace: 9.0pt; margin-right: 6.75pt; mso-table-anchor-vertical: paragraph; mso-table-anchor-horizontal: page; mso-table-left: 390.3pt; mso-table-top: -4.75pt; mso-padding-alt: 0cm 5.4pt 0cm 5.4pt;" border="1" cellspacing="3" cellpadding="0" align="left"><tbody><tr style="mso-yfti-irow: -1; mso-yfti-firstrow: yes;"><td style="width: 53.65pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="72"> </td> <td style="width: 60.8pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="81"> </td> </tr><tr style="mso-yfti-irow: 0; mso-yfti-lastrow: yes;"><td style="width: 53.65pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="72"> </td> <td style="width: 60.8pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="81"> </td> </tr></tbody></table> <p>Ячейки таблицы могут содержать текст, изображения, вложенные таблицы и т.д. Не следует оставлять ячейки таблицы незаполненными; если какая-то ячейка должна выглядеть пустой, поместите в нее неразрывный пробел. </p> <p>Помещаемый в ячейки таблицы текст по умолчанию автоматически размещается браузером; текст выводится слово за словом; при достижении правой границы ячейки очередное слово переносится на новую строку. </p> <p>Ячейки таблицы могут охватывать несколько строк или столбцов;при описании таких ячеек используется атрибуты ROWSPAN (ячейка, тег которой содержит данный атрибут, "растягивается" на указанное количество строк) и COLSPAN (ячейка "растягивается" на несколько столбцов). Приведем пример организации таблицы с объединенными ячейками: </p> <p>< TR > </p> <p>< TD ROWSPAN=2> 1-1 <span>TD > </p> <table class="MsoTableWeb1" style="mso-cellspacing: 2.0pt; mso-yfti-tbllook: 480; mso-table-lspace: 9.0pt; margin-left: 6.75pt; mso-table-rspace: 9.0pt; margin-right: 6.75pt; mso-table-anchor-vertical: paragraph; mso-table-anchor-horizontal: margin; mso-table-left: right; mso-table-top: 8.65pt; mso-padding-alt: 0cm 5.4pt 0cm 5.4pt;" border="1" cellspacing="3" cellpadding="0" align="right"><tbody><tr style="mso-yfti-irow: -1; mso-yfti-firstrow: yes;"><td style="width: 33.5pt; padding: 0cm 5.4pt 0cm 5.4pt;" rowspan="2" valign="top" width="45"> </td> <td style="width: 115.3pt; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="154"> </td> </tr><tr style="mso-yfti-irow: 0; mso-yfti-lastrow: yes;"><td style="width: 52.5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="70"> </td> <td style="width: 60.8pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="81"> </td> </tr></tbody></table> <p>Теги, описывающие таблицы, имеют целый ряд необязательных атрибутов. </p> <p>Атрибуты тегазадают параметры таблицы в целом: </p> <table class="MsoNormalTable" style="margin-left: -7.95pt; border-collapse: collapse; mso-table-layout-alt: fixed; border: none; mso-border-alt: solid windowtext .5pt; mso-padding-alt: 0cm 5.4pt 0cm 5.4pt; mso-border-insideh: .5pt solid windowtext; mso-border-insidev: .5pt solid windowtext;" border="1" cellspacing="0" cellpadding="0"><tbody><tr style="mso-yfti-irow: 0; mso-yfti-firstrow: yes; mso-row-margin-left: 7.95pt;"><td style="mso-cell-special: placeholder; border: none; border-bottom: solid windowtext 1.0pt;" width="11"> </td> <td style="width: 161.35pt; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="215"> <p>Синтаксис атрибута </p> </td> <td style="width: 345.6pt; border: solid windowtext 1.0pt; border-left: none; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="461"> <p>Назначение </p> </td> </tr><tr style="mso-yfti-irow: 1; mso-row-margin-right: 7.95pt;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="215"> <p>ALIGN = значение </p> </td> <td style="width: 345.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="461"> <p>Выравнивание относительно текстового потока;возможны значенияleft, right и center </p> </td> <td style="mso-cell-special: placeholder; border: none; padding: 0cm 0cm 0cm 0cm;" width="11"> </td> </tr><tr style="mso-yfti-irow: 2; mso-row-margin-right: 7.95pt;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="215"> <p>BACKGROUND = <i>url </i> </p> </td> <td style="width: 345.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="461"> <p>Фоновое изображение для всей таблицы </p> </td> <td style="mso-cell-special: placeholder; border: none; padding: 0cm 0cm 0cm 0cm;" width="11"> </td> </tr><tr style="mso-yfti-irow: 3; mso-row-margin-right: 7.95pt;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="215"> <p>BGCOLOR =<i> цвет </i> </p> </td> <td style="width: 345.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="461"> <p>Фоновый цвет </p> </td> <td style="mso-cell-special: placeholder; border: none; padding: 0cm 0cm 0cm 0cm;" width="11"> </td> </tr><tr style="mso-yfti-irow: 4; mso-row-margin-right: 7.95pt;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="215"> <p>BORDERCOLOR = <i>цвет </i></p> </td> <td style="width: 345.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="461"> <p>Цвет границы </p> </td> <td style="mso-cell-special: placeholder; border: none; padding: 0cm 0cm 0cm 0cm;" width="11"> </td> </tr><tr style="mso-yfti-irow: 5; mso-row-margin-right: 7.95pt;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="215"> <p>BORDERCOLORDARK = <i>цвет </i></p> </td> <td style="width: 345.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="461"> <p>Окрашивает в заданный цвет правый и нижний край основной рамки и левый и верхний край каждой ячейки </p> </td> <td style="mso-cell-special: placeholder; border: none; padding: 0cm 0cm 0cm 0cm;" width="11"> </td> </tr><tr style="mso-yfti-irow: 6; mso-row-margin-right: 7.95pt;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="215"> <p>BORDERCOLORLIGHT = <i>цвет </i></p> </td> <td style="width: 345.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="461"> <p>Окрашивает в заданный цвет левый и верхний край основной рамки и соответственно правый и нижний край каждой ячейки </p> </td> <td style="mso-cell-special: placeholder; border: none; padding: 0cm 0cm 0cm 0cm;" width="11"> </td> </tr><tr style="mso-yfti-irow: 7; mso-row-margin-right: 7.95pt;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="215"> <p>CELLPADDING <i>= значение </i> </p> </td> <td style="width: 345.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="461"> <p>Расстояние от границ ячейки до ее содержимого в пикселях </p> </td> <td style="mso-cell-special: placeholder; border: none; padding: 0cm 0cm 0cm 0cm;" width="11"> </td> </tr><tr style="mso-yfti-irow: 8; mso-row-margin-right: 7.95pt;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="215"> <p>CELLSPACING = значение </p> </td> <td style="width: 345.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="461"> <p>Расстояние между ячейками в пикселях </p> </td> <td style="mso-cell-special: placeholder; border: none; padding: 0cm 0cm 0cm 0cm;" width="11"> </td> </tr><tr style="mso-yfti-irow: 9; mso-row-margin-right: 7.95pt;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="215"> <p>HSPACE = <i>значение </i> </p> </td> <td style="width: 345.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="461"> <p>Свободное пространство слева и справа от таблицы в пикселях </p> </td> <td style="mso-cell-special: placeholder; border: none; padding: 0cm 0cm 0cm 0cm;" width="11"> </td> </tr><tr style="mso-yfti-irow: 10; mso-row-margin-right: 7.95pt;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="215"> <p>VSPACE = <i>значение </i> </p> </td> <td style="width: 345.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="461"> <p>Свободное пространство сверху и снизу от таблицы в пикселях </p> </td> <td style="mso-cell-special: placeholder; border: none; padding: 0cm 0cm 0cm 0cm;" width="11"> </td> </tr><tr style="mso-yfti-irow: 11; mso-yfti-lastrow: yes; mso-row-margin-right: 7.95pt;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="215"> <p>WIDTH = <i>значение </i> </p> </td> <td style="width: 345.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="461"> <p>Ширина таблицы (задается в пикселях или в процентах от текущей ширины окна браузера) </p> </td> <td style="mso-cell-special: placeholder; border: none; padding: 0cm 0cm 0cm 0cm;" width="11"> </td> </tr><tr><td style="border: none;" width="11"> </td> <td style="border: none;" width="205"> </td> <td style="border: none;" width="11"> </td> <td style="border: none;" width="450"> </td> <td style="border: none;" width="11"> </td> </tr></tbody></table><p>Атрибуты тегазадают параметры данного ряда (при возникновении противоречий атрибуты, заданные в теге, отменяются). </span><span>Выравнивание содержимого ячеек;возможны значенияleft, right и center </p> <td style="mso-cell-special: placeholder; border: none; padding: 0cm 0cm 0cm 0cm;" width="6"> </td> <tr style="mso-yfti-irow: 2; mso-row-margin-right: 4.4pt;"><td style="width: 158.3pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="211"> <p>BACKGROUND = <i>url </i> </p> </td> <td style="width: 348.65pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="465"> <p>Фоновое изображение для ячеек данного ряда таблицы </p> </td> <td style="mso-cell-special: placeholder; border: none; padding: 0cm 0cm 0cm 0cm;" width="6"> </td> </tr><tr style="mso-yfti-irow: 3; mso-row-margin-right: 4.4pt;"><td style="width: 158.3pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="211"> <p>BGCOLOR =<i> цвет </i> </p> </td> <td style="width: 348.65pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="465"> <p>Фоновый цвет для ячеек данного ряда </p> </td> <td style="mso-cell-special: placeholder; border: none; padding: 0cm 0cm 0cm 0cm;" width="6"> </td> </tr><tr style="mso-yfti-irow: 4; mso-row-margin-right: 4.4pt;"><td style="width: 158.3pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="211"> <p>BORDER = <i>значение </i> </p> </td> <td style="width: 348.65pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="465"> <p>Толщина рамки, обрамляющей ячейки данного ряда;BORDER=0 обозначает невидимую рамку </p> </td> <td style="mso-cell-special: placeholder; border: none; padding: 0cm 0cm 0cm 0cm;" width="6"> </td> </tr><tr style="mso-yfti-irow: 5; mso-yfti-lastrow: yes; mso-row-margin-right: 4.4pt;"><td style="width: 158.3pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="211"> <p>VALIGN = <i>значение </i> </p> </td> <td style="width: 348.65pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" colspan="2" valign="top" width="465"> <p>Вертикальное выравнивание содержимого ячеек;возможны значения top, center и bottom </p> </td> <td style="mso-cell-special: placeholder; border: none; padding: 0cm 0cm 0cm 0cm;" width="6"> </td> </tr><tr><td style="border: none;" width="6"> </td> <td style="border: none;" width="205"> </td> <td style="border: none;" width="6"> </td> <td style="border: none;" width="459"> </td> <td style="border: none;" width="6"> </td> </tr><p>Атрибуты тега задают параметры данной ячейки(при возникновении противоречий атрибуты, заданные в тегах и, отменяются). </p> <table class="MsoNormalTable" style="border-collapse: collapse; mso-table-layout-alt: fixed; border: none; mso-border-alt: solid windowtext .5pt; mso-padding-alt: 0cm 5.4pt 0cm 5.4pt; mso-border-insideh: .5pt solid windowtext; mso-border-insidev: .5pt solid windowtext;" border="1" cellspacing="0" cellpadding="0"><tbody><tr style="mso-yfti-irow: 0; mso-yfti-firstrow: yes;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="215"> <p>Синтаксис атрибута </p> </td> <td style="width: 345.6pt; border: solid windowtext 1.0pt; border-left: none; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="461"> <p>Назначение </p> </td> </tr><tr style="mso-yfti-irow: 1;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="215"> <p>ALIGN = <i>значение </i> </p> </td> <td style="width: 345.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="461"> <p>Выравнивание содержимого ячейки; возможны значенияleft, right и center </p> </td> </tr><tr style="mso-yfti-irow: 2;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="215"> <p>BACKGROUND = <i>ur </i> <i>l </i></p> </td> <td style="width: 345.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="461"> <p>Фоновое изображение для ячейки таблицы </p> </td> </tr><tr style="mso-yfti-irow: 3;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="215"> <p>BGCOLOR =<i> цвет </i> </p> </td> <td style="width: 345.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="461"> <p>Фоновый цвет для ячейки </p> </td> </tr><tr style="mso-yfti-irow: 4;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="215"> <p>BORDER = <i>значение </i> </p> </td> <td style="width: 345.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="461"> <p>Толщина рамки, обрамляющей ячейку </p> </td> </tr><tr style="mso-yfti-irow: 5;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="215"> <p>VALIGN = <i>значение </i> </p> </td> <td style="width: 345.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="461"> <p>Вертикальное выравнивание содержимого ячейки;возможны значения top, center и bottom </p> </td> </tr><tr style="mso-yfti-irow: 6;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="215"> <p>WIDTH = <i>значение </i> </p> </td> <td style="width: 345.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="461"> <p><span lang="RU">Ширина ячейки в пикселях или в процентах от ширины таблицы </p> </td> </tr><tr style="mso-yfti-irow: 7;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="215"> <p><span lang="RU">ROWSPAN= <i>значение </i> </p> </td> <td style="width: 345.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="461"> <p><span lang="RU">Указывает количество строк, охватываемых ячейкой </p> </td> </tr><tr style="mso-yfti-irow: 8; mso-yfti-lastrow: yes;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="215"> <p><span lang="RU">COLSPAN = <i>значение </i> </p> </td> <td style="width: 345.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="461"> <p><span lang="RU">Указывает количество столбцов, охватываемых ячейкой </p> </td> </tr></tbody></table><p><span lang="RU">При работе с таблицами учтите, что указанное значение атрибута WIDTHво многих случаях лишь "принимается к сведению" браузером. Заданные пропорции в точности выдерживаются редко, браузер старается отобразить таблицу как можно лучше (в его понимании). </p> <h3><span lang="RU">Бегущая строка </span></h3> <p><span lang="RU">Использование бегущей строки на веб-странице делает ее более динамичной, позволяет создать эффект движения объекта. Создается бегущая строка с помощью тега < </span><span style="mso-ansi-language: EN-US;" lang="EN-US">MARQUEE </span><span lang="RU">> … <span style="mso-ansi-language: EN-US;" lang="EN-US">MARQUEE </span><span lang="RU">>. </p> <p><span lang="RU">Между < </span><span style="mso-ansi-language: EN-US;" lang="EN-US">MARQUEE </span><span lang="RU">> и <span style="mso-ansi-language: EN-US;" lang="EN-US">MARQUEE </span><span lang="RU">> могут располагаться текстовые фрагменты и рисунки. Текст может быть отформатирован с помощью соответствующих тегов, а рисунок вставляется с использованием . </p> <table class="MsoNormalTable" style="border-collapse: collapse; mso-table-layout-alt: fixed; border: none; mso-border-alt: solid windowtext .5pt; mso-padding-alt: 0cm 5.4pt 0cm 5.4pt; mso-border-insideh: .5pt solid windowtext; mso-border-insidev: .5pt solid windowtext;" border="1" cellspacing="0" cellpadding="0"><tbody><tr style="mso-yfti-irow: 0; mso-yfti-firstrow: yes;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="215"> <p><span lang="RU">Синтаксис атрибута </p> </td> <td style="width: 345.6pt; border: solid windowtext 1.0pt; border-left: none; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="461"> <p><span lang="RU">Назначение </p> </td> </tr><tr style="mso-yfti-irow: 1;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="215"> <p><span style="mso-ansi-language: EN-US;" lang="EN-US">BGCOLOR </span><span lang="RU">=<i>цвет </i> </p> </td> <td style="width: 345.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="461"> <p><span lang="RU">Фоновый цвет. Если фон задан, то браузер рисует на экране цветную полосу, вдоль которой движется текст или картинка. </p> </td> </tr><tr style="mso-yfti-irow: 2;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="215"> <p><span style="mso-ansi-language: EN-US;" lang="EN-US">HEIGHT </span><span lang="RU">=<i> значение </i> </p> </td> <td style="width: 345.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="461"> <p><span lang="RU">Высота фоновой полосы. Значение указывается в пикселях или в процентах от высоты окна браузера. </p> <p><span lang="RU">Например, если указать атрибут HEIGHT=25%, то полоса бегущей строки будет занимать четверть высоты окна </p> </td> </tr><tr style="mso-yfti-irow: 3;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="215"> <p><span style="mso-ansi-language: EN-US;" lang="EN-US">WIDTH = </span><i><span lang="RU">значение </span> </i></p> </td> <td style="width: 345.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="461"> <p><span lang="RU">Ширина полосы бегущей строки, указывается в пикселях или в процентах от ширины окна браузера </p> </td> </tr><tr style="mso-yfti-irow: 4;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="215"> <p><span style="mso-ansi-language: EN-US;" lang="EN-US">DIRECTION= </span><i><span lang="RU"> значение </span> </i></p> </td> <td style="width: 345.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="461"> <p><span lang="RU">Направление движения строки: </span><b><span style="mso-ansi-language: EN-US;" lang="EN-US">left </span> </b><span lang="RU">− налево (по умолчанию), </span><b><span style="mso-ansi-language: EN-US;" lang="EN-US">right </span> </b><span lang="RU">− направо, </span><b><span style="mso-ansi-language: EN-US;" lang="EN-US">up </span> </b><span lang="RU">− вверх, </span><b><span style="mso-ansi-language: EN-US;" lang="EN-US">down </span> </b><span lang="RU"> − вниз </p> </td> </tr><tr style="mso-yfti-irow: 5;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="215"> <p><span style="mso-ansi-language: EN-US;" lang="EN-US">BEHAVIOR </span><span lang="RU">=<i> значение </i> </p> </td> <td style="width: 345.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="461"> <p><span lang="RU">Атрибут управляет поведением бегущей строки: </p> <p><b><span style="mso-ansi-language: EN-US;" lang="EN-US">scroll </span> </b><span lang="RU"> (по умолчанию) − дойдя до края окна, строка уходит из поля зрения, а затем появляется с противоположной стороны; </p> <p><b><span style="mso-ansi-language: EN-US;" lang="EN-US">slide </span> </b><span lang="RU">− строка появляется из-за края окна, достигает противоположного и останавливается; </p> <p><b><span style="mso-ansi-language: EN-US;" lang="EN-US">alternate </span> </b><span lang="RU">− строка движется вправо или влево, «отражаясь» от краев окна и меняя направление движения </p> </td> </tr><tr style="mso-yfti-irow: 6;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="215"> <p><span style="mso-ansi-language: EN-US;" lang="EN-US">HSPACE </span><span lang="RU"> = <i>смещение в пикселях </i> </p> </td> <td style="width: 345.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="461"> <p><span lang="RU">Сдвиг полосы бегущей строки по горизонтали вправо </p> </td> </tr><tr style="mso-yfti-irow: 7;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="215"> <p><span style="mso-ansi-language: EN-US;" lang="EN-US">VSPACE </span><span lang="RU"> = <i>вы </i> </span><i><span style="mso-ansi-language: EN-US;" lang="EN-US">co </span><span lang="RU">т </span> </i><i><span style="mso-ansi-language: EN-US;" lang="EN-US">a </span><span lang="RU"> в пикселях </span> </i></p> </td> <td style="width: 345.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="461"> <p><span lang="RU">Создание пустого пространства выше и ниже полосы </p> </td> </tr><tr style="mso-yfti-irow: 8;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="215"> <p><span style="mso-ansi-language: EN-US;" lang="EN-US">LOOP </span><span lang="RU">=<i> значение </i> </p> </td> <td style="width: 345.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="461"> <p><span lang="RU">Количество переходов строки по экрану </p> </td> </tr><tr style="mso-yfti-irow: 9;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="215"> <p><span style="mso-ansi-language: EN-US;" lang="EN-US">SCROOLAMOUNT </span><span style="mso-ansi-language: EN-US;" lang="EN-US">= </span><i><span lang="RU">значение </span> </i></p> </td> <td style="width: 345.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="461"> <p><span lang="RU">Число пикселей, которые проходит строка за каждый шаг. Режим по умолчанию соответствует примерно 10 пкс/шаг. Данный атрибут позволяет регулировать скорость движения строки </p> </td> </tr><tr style="mso-yfti-irow: 10;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="215"> <p><span style="mso-ansi-language: EN-US;" lang="EN-US">SCROLLDELAY = </span><i><span lang="RU"> значение </span> </i></p> </td> <td style="width: 345.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="461"> <p><span lang="RU">Определяет временной интервал (в миллисекундах) между шагами, с помощью этого атрибута можно заставить строку двигаться рывками </p> </td> </tr><tr style="mso-yfti-irow: 11; mso-yfti-lastrow: yes;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="215"> <p><span lang="RU">TRUESPEED </p> </td> <td style="width: 345.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="461"> <p><span lang="RU">При установке этого флага (атрибута без значения) будет использовано заданное значение SCROLLDELAY. Если флаг не установлен значение SCROLLDELAY <= 59 будет округлено до 60 </p> </td> </tr></tbody></table><h3><span lang="RU">Горизонтальная линия </span></h3> <p><span lang="RU">Горизонтальная линия задается тэгом <H </span><span style="mso-ansi-language: EN-US;" lang="EN-US">R </span><span lang="RU">> и не требует закрывающего тэга. По умолчанию линия проводится по всей ширине страницы и выглядит примерно так: </p> <p><span lang="RU"> </span><span lang="RU">Определяет длину линии в пикселях или процентах от ширины окна браузера </p> <tr style="mso-yfti-irow: 2;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="215"> <p><span lang="RU">SIZE </span><span style="mso-ansi-language: EN-US;" lang="EN-US">= </span><i><span lang="RU"> значение </span> </i></p> </td> <td style="width: 345.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="461"> <p><span lang="RU">Определяет толщину линии в пикселях </p> </td> </tr><tr style="mso-yfti-irow: 3;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="215"> <p><span lang="RU">ALIGN </span><span style="mso-ansi-language: EN-US;" lang="EN-US">= </span><i><span lang="RU"> значение </span> </i></p> </td> <td style="width: 345.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="461"> <p><span lang="RU">Определяет выравнивание горизонтальной линии. Параметр может принимать следующие значения: </p> <p><b><span lang="RU">left </span> </b><span lang="RU"> - по левому краю, </p> <p><b><span lang="RU">right </span> </b><span lang="RU"> - по правому краю, </p> <p><b><span lang="RU">center </span> </b><span lang="RU"> - по центру (используется по умолчанию) </p> </td> </tr><tr style="mso-yfti-irow: 4;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="215"> <p><span lang="RU">NOSHADE </p> </td> <td style="width: 345.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="461"> <p><span lang="RU">Определяет способ закраски линии как сплошной. Параметр является флагом и не требует указания значения. Без данного параметра линия отображается объемной </p> </td> </tr><tr style="mso-yfti-irow: 5; mso-yfti-lastrow: yes;"><td style="width: 161.35pt; border: solid windowtext 1.0pt; border-top: none; mso-border-top-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="215"> <p><span lang="RU">COLOR = <i>цвет </i> </p> </td> <td style="width: 345.6pt; border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; mso-border-top-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt;" valign="top" width="461"> <p><span lang="RU">Определяет цвет линии (действует только в </span><span style="mso-ansi-language: EN-US;" lang="EN-US">Internet </span><span style="mso-ansi-language: EN-US;" lang="EN-US">Explorer </span><span lang="RU">) </p> </td> </tr> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> <div style="clear:both;"></div> </div> <script type="text/javascript" src="https://yuniknails.ru/wp-content/themes/cehla_mgomz/js/orphus.js"></script> </article> </div> <aside id="sidebar"> <div id="primary" class="widget-area" role="complementary"> <ul class="xoxo"> <li id="categoryposts-2" class="block widget-container widget_categoryposts"><h3 class="widget-title"><a href="/">Последние записи</a></h3><ul> <li class="cat-post-item"> <a class="post-title" href="/computer-hardware/kak-zarabotat-bitkoiny-bez-vlozhenii-na-kompyutere-i-iphone.html" rel="bookmark">Как заработать биткоины без вложений на компьютере и IPhone: проверенные способы</a> </li> <li class="cat-post-item"> <a class="post-title" href="/internet/kto-nahodil-poteryannyi-android-otzyvy-kak-naiti-poteryannyi.html" rel="bookmark">Как найти потерянный телефон андроид: все способы</a> </li> <li class="cat-post-item"> <a class="post-title" href="/windows/avtomaticheskaya-ustanovka-kesha-kak-ustanavlivat-prilozheniya.html" rel="bookmark">Как устанавливать приложения с КЕШем?</a> </li> <li class="cat-post-item"> <a class="post-title" href="/computer-hardware/winamp-skachat-besplatno-russkaya-versiya-winamp-skachat-besplatno-russkaya-versiya.html" rel="bookmark">Winamp скачать бесплатно русская версия Скачать winamp последнюю версию на русском</a> </li> <li class="cat-post-item"> <a class="post-title" href="/windows/nastroika-baz-dannyh-v-denvere-denwer-phpmyadmin-mysql-kak-sozdat-bazu.html" rel="bookmark">Как создать базу данных в денвере Denwer подключение к mysql</a> </li> <li class="cat-post-item"> <a class="post-title" href="/mobile/servera-cs-go-bez-vak-zashchity-servery-bez-vac-zashchity-zachem-nuzhny-i-kak.html" rel="bookmark">Серверы без VAC-защиты: зачем нужны и как найти</a> </li> <li class="cat-post-item"> <a class="post-title" href="/social-networks/tv-player-classic---besplatnoe-prilozhenie-dlya-prosmotra-televizionnyh-kanalov-v.html" rel="bookmark">TV Player Classic — простой плеер для просмотра спутникового и кабельного телевидения Инструкция по использованию tv player classic</a> </li> <li class="cat-post-item"> <a class="post-title" href="/social-networks/total-commander-dlya-windows-7-bez-registracii-total-commander-skachat-besplatno.html" rel="bookmark">Total Commander скачать бесплатно русская версия</a> </li> <li class="cat-post-item"> <a class="post-title" href="/computer-hardware/podoidet-li-ot-nikon-vspyshka-na-nikon-kak-pravilno-vybrat-vspyshku-dlya.html" rel="bookmark">Как правильно выбрать вспышку для зеркальных фотоаппаратов Nikon</a> </li> <li class="cat-post-item"> <a class="post-title" href="/computer-hardware/nevzrachnyi-submit-html-obrabotchik-ili-istochnik-sobytiya-submit-primer-prostaya.html" rel="bookmark">Обработчик или источник события submit</a> </li> </ul> </li> </ul> </div> <div id="secondary" class="widget-area" role="complementary"> </div> </aside> </div> <div style="clear:both;"></div> </div> <br> <footer id="footer" role="contentinfo" class="clearfix"> <div id="footer-in"> <div id="colophon"> <div id="footer-widget-area" role="complementary"> <div id="first" class="widget-area"> </div> <div id="second" class="widget-area"> <ul class="xoxo"> <li id="linkcat-58" class="block widget-container widget_links"> <h3 class="widget-title">Мы в соцсетях</h3> <ul class='xoxo blogroll'> <li><a href="https://www.facebook.com/sharer/sharer.php?u=https://yuniknails.ru/windows/podgotovka-pochvy-pogovorim-ob-html-struktura-html-dokumenta-osnovnye-tegi.html" title="" target="_blank">Facebook</a></li> <li><a href="" title="Instagram">Instagram</a></li> <li><a href="https://www.twitter.com/share?url=https://yuniknails.ru/windows/podgotovka-pochvy-pogovorim-ob-html-struktura-html-dokumenta-osnovnye-tegi.html" title="Twitter" target="_blank">Twitter</a></li> <li><a href="https://vk.com/share.php?url=https://yuniknails.ru/windows/podgotovka-pochvy-pogovorim-ob-html-struktura-html-dokumenta-osnovnye-tegi.html" target="_blank">Вконтакте</a></li> </ul> </li> </ul> </div> <div id="third" class="widget-area"> <ul class="xoxo"> <li id="linkcat-2" class="block widget-container widget_links"> <h3 class="widget-title">Категории</h3> <ul class='xoxo blogroll'> <li><a href="/category/computer-hardware/">Компьютерное железо</a></li> <li><a href="/category/social-networks/">Социальные сети</a></li> <li><a href="/category/internet/">Интернет</a></li> <li><a href="/category/accessories/">Аксессуары</a></li> <li><a href="/category/soft/">Софт</a></li> </ul> </li> </ul> </div> </div> </div> <div id="site-info"> Авторское право © yuniknails.ru</div> </div> </footer> <script type='text/javascript' src='https://yuniknails.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.8'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.4'></script> </body> </html>