Структура HTML-документа. Форматирование текста презентация

ТЭГИ
Тэг – это управляющие символы, которые определяют вид Web-страницы при её просмотре в браузере
Тэг всегда начинается со знака «меньше» (<) и оканчивается знаком «больше» (>)
Например:
!Теги не чувствительны к регистру!
Контейнеры – это парные тэги, содержащие открывающий и закрывающий тэг.

Структура Web-страницы
HTML-тэги могут быть одиночными или парными.
Парные теги (контейнер) содержат открывающий и закрывающий теги.
Закрывающий тег содержит прямой слеш (/) перед обозначением.
Одиночный тэг (Команда) < … >
Парный тэг (Контейнер) < … > форматируемый
текстовый фрагмент
открывающий тэг закрывающий тэг

АТРИБУТ
– это компонент тэга, содержащий указания о том, как браузер должен воспринять и обработать тэг.
Тэг может иметь некоторое количество атрибутов.
Синтаксис тэга с атрибутом:
<тэг атрибут="значение">

Web-страница разделяется на 2 логические части:
Заголовок;
Содержание.
Структура Web-страницы

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

Содержание страницы
Отображаемое содержание страницы помещается в контейнер
Тэг может иметь атрибуты.

Простейшая Web-страница
Моя первая <br> Web-страница
Привет!
first.html
Моя первая <br> Web-страница
шапка («голова»)
Привет!
основная часть («тело»)

Мой первый шаг
Здравствуйте, это моя первая страница.
Добро пожаловать!
Структура HTML-документа

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

Атрибуты тэга
Bgcolor – изменяет цвет фона. Цвет задается словом или кодом RGB:
Text – задает цвет текста.
Background – помещает в качестве фона изображение из файла с картинкой:
Bgproperties = “fixed” – фоновый рисунок не прокручивается вместе со страницей.
Link – задает цвет гиперссылок, по которым пользователь еще «не ходил».
Vlink – задает цвет посещенных гиперссылок.
Alink – цвет активной гиперссылки (под курсором мышки во время нажатия)

Тэг BODY – общие свойства страницы
цвет фона и текста
Привет!
цвет текста
цвет фона
атрибуты тэга

Заголовки: H1 … H6
Заголовок документа
Заголовок раздела
Заголовок подраздела
Заголовок параграфа
Комментарий
Авторские пометки
выравнивание:
История
left,
center,
right

Шрифт. Параметры форматирования шрифта задаются с помощью тэга
и его атрибутов:
SIZE – определяет размер шрифта;
FACE – определяет гарнитуру шрифта;
COLOR – определяет цвет шрифта.
Пример:
Пример текста
Форматирование текста на Web-странице

Атрибуты:
size – размер шрифта 1-7,
По-умолчанию size=3
Размер изменяется на 20%: 4 размер больше 3 на 20%,
5 размер больше 4 на 20%
size =4 – абсолютный размер,
size = +1 – относительный (на 1 больше, чем базовый размер шрифта)
color – цвет шрифта,
face – гарнитура шрифта или список допустимых шрифтов (название шрифта)
Тэг FONT – свойства блока текста

Тэг FONT – свойства блока текста
цвет текста
размер шрифта
Привет!
Как дела?
Привет!
SIZE=6>
Как дела?
от 1 до 7
(3 – нормальный)

Абзацы
Тэг
- указывает на начало нового абзаца и вставляет пустую строку перед абзацем.
Атрибут Align - атрибут выравнивания
- выравнивание текста в абзаце по левому краю.
- выравнивание текста в абзаце по правому краю.
- выравнивание текста в абзаце по центру.
- полное выравнивание по обоим краям экрана.
Тэг
- разрыв строки. Используется для записи текстов стихов и песен.

Абзацы
переход на новую строку
абзац (с отступами)
И вечный бой! Покой
нам только снится
Сквозь кровь и пыль...
Летит, летит степная
кобылица
И мнет ковыль...
Одно физическое тело захотело
поменять три своих старых варежки
на что-нибудь хорошее.
До самого вечера тело с варежками ...

Выравнивание
Этот текст выровнен по центру.
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
left по левой границе
right по правой границе
center по центру
justify по ширине
атрибут тэга

Маркированные списки
Вася
Петя
Коля
unordered list
(неупорядоченный список)
list item
(элемент списка)
изменение маркера:
...
disk ∙
circle ○
square ■

Нумерованные списки
Вася
Петя
Коля
ordered list
(упорядоченный список)
изменение нумерации:
...
1, i, I, a, A

По умолчанию пункты списка нумеруются последовательно цифрами 1, 2, 3 и т.д.
Чтобы изменить способ нумерации пунктов списка, воспользуйтесь атрибутами TYPE, START и VALUE.
Тип нумерованного списка устанавливается с помощью атрибута type дескриптора
.
Значения атрибута TYPE
Нумерованные списки

Некоторые номера списка могут быть пропущены, и текущему пункту, заданному тэгом
, присваивается номер с помощью атрибута VALUE.
Все следующие пункты списка будут нумероваться последова-тельно, начиная с номера, заданного в атрибуте VALUE.
<Н2>Управление нумерацией пунктов списка
Haчнем список с пункта 3
Cлeдующий пункт cпискa
Продолжим список с пункта 7
Следующий пункт cпискa
Установка номера пунктов списка с помощью атрибута START в тэге

Списки определений
компьютер
устройство для
обработки информации
дискета
гибкий магнитный диск
винчестер
жесткий магнитный
диск
definition list (список определений)
definition term (термин)
definition description (описание)

Многоуровневые списки
Города России
Города Украины
Москва
Санкт-Петерург
Киев
Одесса

Тэг
…
Тэг
…
выделяет часть исходного текста, который должен отображаться «как есть» - с теми же отступами и разбиением на строки.
Используется для записи текстов программ. Внутри этого тега могут располагаться гиперссылки, картинки и пр.

Форматированный текст (тексты программ)
program qq;
var a, b: integer;
begin
writeln("Введите два числа"); read(a,b);
writeln(a,'+',b,'=',a+b);
end.
program qq;
var a, b: integer;
begin
writeln("Введите два числа");
read(a,b);
writeln(a,'+',b,'=',a+b);
end.
отформатированный текст
(preformatted)

Физическая разметка

Кодирование цвета
имена
red, green, blue, magenta, black,
шестнадцатеричные коды
white
R
G
B
# F F 0 0 0 0
# F F F F F F
# 0 0 F F F F
# 0 0 0 0 0 0
# A A A A A A

Кодирование цвета

Различные части большого документа можно визуально отделить одну от другой с помощью горизонтальных линий.
Горизонтальные линии рисуются с помощью непарного тэга
.
Атрибуты:
Size – толщина линии в пикселях,
Width - длина линии в процентах или пикселях,
Noshade - делает линии “плоскими”,
Color – задает цвет линии.
Линия-разделитель

Тэг
- выпуклая (объёмная) горизонтальная линия.
Тэг не требует закрывающего тэга. noshade> -линия без тени,
Заголовок1
Заголовок2
Заголовок3
Линия-разделитель

Линия-разделитель
horizontal rule
ширина в пикселях или процентах
толщина
выравнивание

Авторское форматирование
Агния Барто
Идет бычок,
Качается,
Вздыхает на ходу:
- Ой, доска кончается!
Сейчас я упаду!
Линия-разделитель
Сохранение авторского форматирования

Бегущая строка
Можно заставить текст двигаться по экрану влево или вправо с помощью парного тега:
текст
.
Тэг имеет атрибуты:
Width – ширина поля бегущей строки (в пикселах или процентах от ширины окна);
Height - высота поля бегущей строки (в пикселах);
Direction – определяет направление движения строки. Может принимать следующие значения: left, right;
Behavior – определяет способ движения строки. Может принимать значения: scroll – текст появляется от одного края и скрывается за другим;
Slide – текст вытягивается с одного края и останавливается у другого;
Alternate – попеременное движение от одного края к другому и обратно.
Bgcolor – цвет поля бегущей строки.

СТРУКТУРНЫЕ ТЭГИ
Эту базовую структуру в простейшем виде можно наглядно показать следующим образом:

Способы создания Web-страниц
Использование текстового редактора Блокнот (NotePad), встроенного в Windows, и просмотр результатов с помощью браузера. Этот самый простой способ рекомендуется начинающим.
Использование специальных редакторов документов HTML, например Hot Metal Light, Hot Dog Professional, MS Front Page, HTMLPad и др.
Использование редактора Word, где создается текст документа, который затем конвертируется в HTML-формат.

Технология создания Web-страницы с использование текстового редактора Блокнот
В редакторе Блокнот создать файл Web-страницы, сохранить с расширением *.htm.
Созданный файл загружается и просматривается программой Internet Explorer.
Для редактирования файла Web-страницы в Internet Explorer используется пункт меню
Вид – Просмотр HTML- кода.
После сохранения файла и выхода из Блокнота для просмотра отредактированной страницы нажать клавишу F5 или кнопку "Обновить" в панели инструментов Internet Explorer.

Создание web-страницы
1
2
3
Выполнить действия 1,2,3,4
4

WEB-страничка готова!
Удалить

Структура и управление
Обновление web-страницы
меню Вид ⇨ Просмотр HTML-кода