Описание страницы сайта

1 2

СОДЕРЖАНИЕ

Введение. 2

Структура web-документа. 4

Работа с текстом…... 9

Лабораторная работа №1. Структура веб-документа. 17

Форматирование текста. 24

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

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

Лабораторная работа №2. Физическое и логическое форматирование текста. 29

Введение

Цель занятий — изучение основных концепций HTML, необходимых для понимания принципов разработки документов для Интернета.

Сегодня Интернет является одним из самых современных и революционных средств передачи информации. Интернет состоит из многочисленных компьютерных сетей, объединенных в одну глобальную сеть и обменивающихся между собой информацией. В настоящее время особенно быстро развивается часть Интернета, называемая World Wide Web (WWW или просто Web). В WWW содержится информация, представленная в текстовом, графическом, видео- и аудиоформатах.

HTML-формат

Основным форматом Web-документов, составляющих содержимое узлов Web, является Hypertext Markup Language (HTML — язык разметки гипертекста). HTML представляет собой совокупность достаточно простых команд, которые вставляются в исходный текст документа (ASCII-файл) и позволяют управлять представлением этого документа на экране дисплея. Таким образом, текст, подготовленный в любом текстовом редакторе и сохраненный в обычном ASCII-формате, становится
Web-страницей (HTML-док.) после добавления в него ряда команд языка HTML.

Как работают браузеры

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

Файлы HTML — это обычные текстовые файлы, имеющие расширение *.HTM или *.HTML. Будем использовать для создания и редактирования файлов HTML стандартную программу Блокнот (Notepad), входящую в комплект Windows, а для просмотра результата создания Web-страниц — браузер Microsoft Internet Explorer.

Работа с тэгами

Команды HTML задаются с помощью специальных элементов, называемых тэгами (tag – ярлык, бирка, признак). Тэги позволяют управлять представлением информации на экране при отображении HTML-документов специальными программами – браузерами, или обозревателями (от англ. browse – просматривать), такими, как MS Internet Explorer или Netscape Navigator, Mozilla Firefox, Opera, Chrome. Тэг имеет вид строки символов, заключенной между символами “<” и “>”.

Существуют два типа тэгов:

• одноэлементный тэг, который достаточно просто вставить в текст для того, чтобы совершить какое-либо действие; Например, < BR > — это тэг переноса строки.

• парный тэг, который влияет на текст, заключенный между точкой, где употреблен тэг, и точкой, в которой указан признак завершения команды. Признак завершения команды – это тот же самый тэг, только начинающийся с символа косой черты “/”. Например, <BODY> и </BODY> — признаки начала и окончания текста документа.

Не имеет значения: записан тег заглавными или малыми буквами.

Правило записи комбинированных тэгов

Атрибуты предоставляют дополнительную информацию о содержимом HTML-элементов. Они располагаются в открывающем теге элемента и состоят из двух частей: имени и значения, разделенных знаком «равно». Отделяются друг от друга пробелами (если их несколько).

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

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

Пример для большей наглядности. Есть выдуманный тег «человек», он имеет атрибуты (свойства) «рост», «вес», «цветволос» (да, без пробела). А вот значениями этих свойств будут «178 см», «56 кг» и «русый». Таким образом, в виде html запись будет выглядеть так: <человек рост=”178” вес=”56” цветволос=”русый”>

Структура web-документа

Начало и конец документа обозначается тегами <html> и </html> соответственно. Этот тэг указывает на то, что данный документ действительно содержит в себе HTML-текст. Внутри этих тегов должны находиться теги головы <head> </head> и тела документа <body> </body>. Обычно основой головы документа является элемент <title> </title> - заголовок документа. Также там содержится вся техническая информация, различные таблицы стилей и т.п. А основное содержимое: текст, таблицы, картинки, - находится в теле документа.

Что касается тега <title> </title> - когда браузер встречает этот тэг, он отображает все, что находится внутри него, как заглавие.

Начало и конец документа <HTML> </HTML>. Это Корневой элемент html-документа. Сообщает браузеру, что это именно html-документ. Является контейнером для всех остальных html -элементов.

Теги головы <HEAD> </HEAD>.

Теги тела документа <BODY> </BODY>.

Элемент <TITLE> </TITLE> – заголовок документа.

Комментарии записаны в виде 

Как это видит разработчик:

Как это видит посетитель страницы:

Тег <!DOCTYPE> указывается в самой первой строке html-документа и объявляет тип документа, и предоставляет основную информацию для браузера — его язык и версия. Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.

Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии языка, на которого ориентированы. При создании простых веб-страничек это, по сути, не требуется, но правила хорошего тона предписывают указать тип документ. Сейчас распространённым видом является HTML 5, для которого запись данного тега очень простая и имеет вид:

<!DOCTYPE html>

Комментарии

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

Синтаксис (без пробелов!):

Голова документа <HEAD></HEAD>

Уже было сказано, что голова документа открывается тегом <HEAD> и закрывается тегом </HEAD>. Основные элементы головы документа:

Кодировка текста.

<META CHARSET ="UTF-8" >

Одноэлементный тег <META> определяет так называемые мета-теги, содержащие дополнительную информацию, которые браузеры используют для обработки страницы, а поисковые системы – для ее индексации. В блоке <HEAD> может быть несколько тегов <META>, так как в зависимости от используемых атрибутов они несут разную информацию.

Мета-теги записываются «по одному», т.е. в угловых скобках разрешается использовать более чем один мета-тег. Все они размещаются в контейнере <HEAD>. Как правило, атрибуты любого мета-тега сводятся к парам «имя=значение».

Атрибут CHARSET указывает кодировку документа (напр., выше это UTF-8).

2) Заголовок страницы сайта <TITLE></TITLE>.

<TITLE> Как создать сайт самому. Написать сайт самому. Как сделать сайт. Инструкция начинающим </TITLE>

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

Тем более, что первые несколько (около 70) символов из TITLE показываются при поиске поисковых системах. Обычно там используются ключевые слова, по которым хотят «раскручивать» сайт.

Описание страницы сайта.

<META NAME="Description" CONTENT= "Хотите создать и раскрутить сайт в сети интернет..... и т.д." >

Атрибут NAME определяет имя мета-тега, Description – описание страницы.

Атрибут CONTENT определяет содержимое мета-записи.

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

Набор ключевых слов.

<META NAME="Keywords" CONTENT= "Сайт, интернет, html, css" >

У атрибута NAME в данном случае другое имя мета-тега NAME="Keywords".

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

Упрощенная пример с заполненной структурой головы:

<!doctype html >

<html>

<head>

<meta charset ="utf-8" >

<title> Как создать свой сайт </title>

<meta name="Description" content=" Если хотите научиться

делать свои сайты, тогда вы попали по адресу! ">

<meta name="Keywords" content=" Сайт, интернет, html, css ">

</head>

<body>

Тело документа и разнообразный текст, картинки, ссылки, прочее =)

</body>

</html>

Работа с текстом…

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

Если вы возьмете и скопируете ниже приведенный текст от начала и до конца, и вставите его между тегами тела документа <BODY></BODY> своей первой страничку, то вы увидите примерно следующее…

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

Пробелы

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

Основными элементами форматирования текста в HTML являются…

Тег <P></P>

P – используется для разметки-разбиения текста на абзацы (параграфы).

Атрибут ALIGN определяет способ горизонтального выравнивания параграфа.

Возможные значения: <p align="left | center | right | justify">…</p>

Примеч.: следите, чтобы содержимое в кавычках было написано без пробелов, т.е. <p align="right">, а не <p align=" right ">, иначе не будет работать, т.к. запись считается некорректной.

<!doctype html>

<html>

<head>

<meta charset ="utf-8" > <title> Это моя первая страница! </title>

</head>

<body>

<p align="center"> Этот параграф по центру </p>

<p align="left"> Этот по левому краю </p>

<p> Этот тоже по левому (т.к. по умолчанию) </p>

<p align="right"> Этот по правому краю </p>

<p align="justify"> В этом параграфе текст будет выравниваться по ширине (одновременно по левому и правому краям документа). Не понимающие justify браузеры будут выравнивать текст по левому краю </p>

</body>

</html>

Тег <BR>

BR – перенос строки. Закрывающий тег не требуется.

Фрагмент кода:

Начинается первая строка <br>

теперь идет вторая <br>

а вот уже и третья

<p> А это параграф и внутри него тоже можно использовать тег <br> переноса строки. Его надо использовать всегда, когда надо перенести строку:) </p>

Теги <H1,H2,...H6></H1,H2,…H6>

Применяются для разбивания текста на смысловые уровни - разделы и подразделы. Существует шесть уровней заголовков, различающихся по величине шрифта. В языке HTML существует шесть уровней заголовков(«heading» — заголовок):

H1,H2,...H6 – применяются разбивания текста на смысловые уровни - разделы и подразделы. Всего существует шесть уровней заголовков, различающихся по величине шрифта.

<H1> используется для основных заголовков;

с <H2> по <H6> — для подзаголовков.

Атрибут ALIGN определяет способ горизонтального выравнивания заголовков.

Пример с возможными значениями (синтаксис):

<H1 align="left | center | right | justify">...</H1>

<h1> Большой заголовок </h1>

<h2> Заголовок поменьше </h2>

<h3> Еще меньше </h3>

<h4> Совсем маленький </h4>

<h5> Малюсенький заголовочек </h5>

<h6> Ну просто лилипутский заголовочек </h6>

Тег <HR>

<HR> вставляет в текст горизонтальную разделительную линию.

Атрибуты:

WIDTH –длина линии в пикселах или процентах от ширины окна браузера.

SIZE – толщина линии в пикселах.

ALIGN –выравнивание горизонтальной линии (по умолчанию по центру).

<hr align="center | left | right">

NOSHADE – отменяет трехмерные эффекты (флаг).

COLOR – задает цвет линии. Можно использовать либо RGB-значение в шестнадцатиричной системе, либо один из 16 базовых цветов. Атрибут работает только в Internet Explorer.

Пример:

Текст до линии <hr noshade width="50%" align="left"> После линии <br>
А вот пример линии толщиной 2px и без флага noshade
<hr width="50%" align="left" size ="2">

ESCAPE-последовательности

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

Символ	Команда	Значение
<	<	Символ «меньше, чем»; левая угловая скобка
>	>	Символ «больше, чем»; правая угловая скобка
"	"	Прямые кавычки
&	&	Амперсанд
		Неразрывный пробел
©	&сору;	Символ копирайта
®	®	Символ зарегистрированной торговой марки
°	&deg	Знак градуса
[	[	Левая квадратная скобка
]	]	Правая квадратная скобка

Например, строка html-кода

На этой страничке изложены мои "мудрые мысли" по данному вопросу

отобразится в окне браузера следующим образом:

Большее количество escape-последовательностей html не составляет труда найти, введя соответствующий запрос в поисковой системе. Например, немало последовательностей можно найти здесь http://www.i2r.ru/static/479/out_16155.shtml и здесь https://www.lexium.ru/2009/05/343/

Escape-последовательности очень чувствительны к регистру, например, нельзя использовать - &QUOT; вместо ".

Ещё немного тегов

Тег <DIV></DIV>

DIV используется как контейнер для блоков html кода страницы.

Атрибут ALIGN определяет способ горизонтального выравнивания контейнера (left, center, right, justify).

Атрибут TITLE добавляет всплывающую подсказку к содержимому.

<div align="right"> Начинается первая строка <br>

теперь идет вторая <br> </div>

а вот уже и третья

Примечание: Находящиеся между div-тегами текст или HTML-элементы выделяются как бы в отдельный параграф (но отступы гораздо меньше).

Сейчас вы читаете текст на первой строке <div> Но теперь уже на второй </div> А теперь уже на третьей

Тег <SPAN></SPAN>

SPAN используется для выделения части информации и придания ей различных стилей.

Атрибут тега <SPAN></SPAN> - это задание стиля текста.

Хотите пользоваться <span style="color:red;"> Adobe Dreamweaver </span> - тогда изучите хотя бы основы html и <br>

тогда Вы без проблем разберетесь с этой замечательной программой!

Теги <NOBR></NOBR> и <WBR>

<NOBR></NOBR> - теги, в которые заключается неразрывная строка.

<WBR> используется для разбиения данной строки в строго запланированном месте.

<P><NOBR> Данная строка является самой длинной строкой документа, которая не допускает какого-либо разбиения где бы то ни было </NOBR>метоксихлор<WBR>диэтиламино<WBR>метил<WBR>бутил<WBR>амино<WBR>акридин</P>

Ни один браузер при переносе текста не добавляет символ дефиса. При необходимости дефис можно имитировать, заменив тег <wbr> на символ мягкого переноса .

Лабораторная работа №1.
Структура веб-документа

Задание 1. «Моя первая веб-страница»

Пример: D:\Ivanov\website

Внутри папки website создать текстовый документ

на диске D:\ на нём папка с вашей фамилией внутри нее папка website

Пример создания для WinXP и Win7:

Открыть в программе «Блокнот» двойным кликом или «Открыть с помощью – Блокнот».

Набрать нижеследующий код.

<!DOCTYPE html>

<html>

<head>

<title> Это моя первая страничка! </title>

</head>

<body>

Ура!!!! Я создал свою первую страницу на html!!!

</body>

</html>

Вот как это будет выглядеть…

Теперь сохраните внесённые изменения командой Файл – Сохранить как…. «index.html» (не закрывайте сам текстовый документ). Если такая опция доступна, выберите кодировку UTF-8.

Вот что получилось (см. ниже)…

Откройте index.html в браузере Firefox двойным кликом. Результат:

Можете удалить файл «Новый текстовый документ.txt», он Вам больше не пригодится =)

Задание 2. Создание простейших файлов HTML

1. Итак, на диске D:\ расположена папка с Вашей фамилией, а в ней находится папка website (если их нет, то создайте), в которой мы будем сохранять сконструированные веб-страницы.

2. Запустите программу Блокнот (анг. Notepad).

3. Наберите в окне редактора простейший текст файла HTML:

4. Сохраните файл под именем rasp1.html в папке websites в Вашем каталоге на диске D:\. Не закрывайте окно с текстом (кодом).

5. Для просмотра созданной web-страницы запустите браузер Firefox.

6. Выполните команду Файл (File), Открыть файл… (Open…), укажите путь к файлу rasp1.html и нажмите Открыть (Open).

7. Убедитесь, что название web-страницы («Учебный файл HTML») отразилось в верхней строке браузера.

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

Задание 3. Управление расположением текста на экране

1. Скопируйте созданный вами при выполнении первого задания файл rasp1.html

2. Переименуйте копию файла «Копия rasp1.html» в rasp2.html

3. Откройте rasp2.html в программе Блокнот, выполнив команду «Открыть с помощью… Блокнот». Откроется окно программы Блокнот, в котором ваша веб-страница будет представлена в командах HTML.

4. Внесите изменения в текст файла HTML, расположив слова “Расписание”, “занятий”, “на вторник” на разных строках:

5.Сохраните текст со внесенными изменениями с помощью команды Файл (File), Сохранить(Save).

6. Просмотрите с помощью браузера Firefox полученную веб-страницу, используя клавишу F5 или команду Вид (View), Обновить (Refresh). Что у Вас получилось? Почему не изменилось изображение текста на экране (оно такое же, как в задании №2)?

Примечание. В дальнейшем все изменения в веб-страницу вносите в программе Блокнот, не закрывая текстовый файл (если закрыли, то использовать команду Открыть с помощью… Блокнот) и не закрывая браузер.
После внесения изменений в веб-страницу достаточно сохранить изменения (Файл – Сохранить) и обновить страницу браузера (F5).

Задание 4. Некоторые специальные команды форматирования

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

Тэг перевода строки <BR> отделяет строку от последующего текста или графики. Тэг абзаца <Р> тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзац. Оба тэга являются одноэлементными.

Использование тэгов перевода строки и абзаца.

1. Скопируйте файл rasp2.html, переименуйте копию в rasp3.html и внесите изменения в текст файла rasp3.html с помощью программы Блокнот:

2. Сохраните текст с внесенными изменениями в файле.

3. Просмотрите с помощью браузера Firefox полученную веб-страницу.

Как изменилось изображение текста на экране?

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

Задание 5. Вставка комментария

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

Сочетания знаков для обозначения комментариев
пишутся слитно, без пробелов.

1. Скопируйте файл rasp3.html, переименуйте копию в rasp4.html и внесите изменения в текст файла rasp4.html с помощью программы Блокнот:

2. Сохраните текст с внесенными изменениями в файле.

3. Просмотрите с помощью браузера Firefox полученную веб-страницу.

Как теперь отображается текст на экране? Изменилось ли что-то?

Форматирование текста

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

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

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

<B></B> – выделяет текст жирным.

<I></I> – выделяет текст курсивом.

<U></U> – выделяет текст подчеркиванием.

<S></S> – перечеркивание текста.

<TT></TT> - имитация пишущей машинки.

<BIG></BIG> - увеличить кегль (на одну ступень).

<SMALL></SMALL> - уменьшить кегль (на одну ступень).

<SUP></SUP> – верхний индекс.

<SUB></SUB> – нижний индекс.

<FONT></FONT> – изменение цвета, типа, размера шрифта.

Атрибуты тега <FONT ></FONT>

SIZE -определяет размер шрифта. Возможные значение – от 1 до 7.

COLOR - определяет цвет текста. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.

FACE -определяет используемый шрифт. Используйте Times New Roman, Arial, Tahoma, Courier, Courier New. Они установлены почти у всех. Иначе гарантий нет!

Это обычный текст <br>

<FONT SIZE="+2" COLOR="red"> Увеличенный красный шрифт </FONT> <br> <FONT SIZE="3" FACE="Courier New" COLOR="Violet"> Моноширинный фиолетовый текст 3 размера </FONT>

Если написано SIZE="+2" то это означает увеличить на 2 единицы шрифт по сравнению со стандартным. Обычно стандартный размер шрифта равен 3.

Названия некоторых цветов (поддерживаемых всеми браузерами)
Имя цвета	Цвет	Описание	Шестнадцатеричное значение
aqua		Голубой	#00ffff
black		Черный	#000000
blue		Синий	#0000ff
fuchsia		Фуксия	#ff00ff
gray		Серый	#808080
green		Зеленый	#008000
lime		Светло-зеленый	#00ff00
maroon		Темно-красный	#800000
navy		Темно-синий	#000080
olive		Оливковый	#808000
purple		Фиолетовый	#800080
red		Красный	#ff0000
silver		Светло-серый	#c0c0c0
teal		Сине-зеленый	#008080
white		Белый	#ffffff
yellow		Желтый	#ffff00

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

<MARQUEE></MARQUEE> – бегущая строка.

Атрибуты тега <MARQUEE></MARQUEE>:

BEHAVIOR –способ движения

<marquee behavior="alternate | scroll | slide">...</marquee>

BGCOLOR – цвет фона

DIRECTION – направление движения

<marquee direction="down | left | right | up">...</marquee>

WIDTH – ширина области прокрутки (пиксели или %)

HEIGHT – высота области прокрутки (пиксели или %)

HSPACE – горизонтальные поля

VSPACE – вертикальные поля

LOOP – число повторов (loop=”-1” - бесконечно)

SCROLLAMOUNT – скорость движения (в пикселях)

SCROLLDELAY – задержка перед повторением (в мс.)

TRUESPEED – отмена встроенного ограничителя скорости

Тег <PRE></PRE>

<PRE></PRE> - тег преформатирования, который позволяет представлять текст со специфическим форматированием на экране. Внутри такого текста разрешается использовать: перевод строки; символы табуляции; непропорциональный шрифт, устанавливаемый браузером.

Использование тегов, определяющих формат абзаца, будет игнорироваться браузером при помещении их между тегами <PRE> и </PRE>.

Пример:

<HTML> <TITLE>Пример преформатированного текста</TITLE> <BODY> <H1>Супер-технологии</H1> <H2>Продажа по округам</H2> <PRE> <I>Продукт Запад Юг Восток Север</I> ------------------------------------------------- Униформа 10.012 13.100 26.831 9.738 Генераторы 32.844 8.393 12.294 13.851 Симуляторы 45.841 20.558 33.285 29.100 Итого 88.697 42.051 72.410 52.689 </PRE> </BODY> </HTML>

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

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

Грамотное применение логического форматирования влияет на успешное «восприятие» поисковыми системами именно Вашего сайта, «понимание» его логики и предназначения, а, следовательно, и на то, увидит ли конечный пользователь сайт на свой запрос, и как близко к началу результатов. Физическое же форматирование (просто внешний вид) поисковыми системами и др. программами игнорируется.

Рассмотрим некоторые из тегов…

<STRONG></STRONG> – выделяет особенно важный фрагмент текста (обычно полужирный).

<EM></EM> – выделяет важный фрагмент текста (обычно курсив).

<CODE></CODE> – отмечает текст как некий программный код.

<SAMP></SAMP> – обозначает текст, который выводится на экран в результате работы какой-либо программы.

<KBD></KBD> – обозначает текст, вводимый с клавиатуры, или для названия клавиш.

<VAR></VAR> – выделяет текст, как переменную в работе какой либо программы.

<CITE></CITE> – выделяет в тексте цитату или сноску на другой документ.

<Q></Q> – выделяет в тексте цитату. В отличие от тега <cite> цитата автоматически берётся браузерами в кавычки.

<ABBR></ABBR> – выделяет в тексте аббревиатуру.

<ACRONYM></ACRONYM> – выделяет в тексте акроним.

<DFN></DFN> – выделяет текст как определение, новый термин.

<ADDRESS></ADDRESS> – указывает автора документа и его адрес.

<DEL></DEL> – выделяет удалённый (перечеркнутый) текст в новой версии документа.

<INS></INS> – выделяет новый (подчеркнутый) текст в новой версии документа.

Практически ко всем тегам применим атрибут TITLE - всплывающая подсказка.

Общие советы по оформлению текста.

Для начала, разбейте весь Ваш текст на параграфы с помощью тега <p> - это облегчит чтение как для людей, так и для программ, кроме того, позволит Вам в дальнейшем легко управлять текстом. Старайтесь не оставлять "голые" слова и предложения, не взятые в какой-либо тег форматирования текста, хотя бы абзац.

Соблюдайте значимость заголовков <h1>-<h6> т.е. заголовок страницы берите в тег <h1>, подзаголовки в тег <h2>, еще менее значимые подзаголовочки в тег <h3> и т.д. В идеале на странице должен быть всего один заголовок <h1>, потом текст разбивается несколькими <h2> и далее по значимости заголовков.

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

Используйте <em> и <strong> в тех случаях, когда Вы хотите акцентировать внимание на тексте не только людей, но поисковых систем, в иных ситуациях используйте <b> и <i>.

Лабораторная работа №2.
Физическое и логическое форматирование текста

Задание 1. Выделение фрагментов текста.
Использование стилей заголовка

Задание размера символов

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

· использование стилей заголовка,

· задание размера шрифта основного документа или размера текущего шрифта.

Используется шесть тэгов заголовков (от <Н1> до <Н6>). Каждому тэгу соответствует конкретный стиль, заданный параметрами настройки браузера.

1. В папке со своей фамилией создайте простой Текстовый документ, откройте его с помощью программы Блокнот, наберите нижеследующий код, сохраните файл под названием zad1.html , при сохранении выберите кодировку UTF-8.