HTML - язык гипертекстовой разметки_9

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

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

Достоинства HTML - документов
Малый информационный объём
Возможность просмотра
на персональных компьютерах, оснащённых различными операционными системами

Создание HTML - страницы
Что бы создать страничку на HTML вручную, понадобится текстовый редактор.
Больше всего подойдет простой Блокнот. Для сохранения документа надо просто войти в меню «Файл», там найти «Сохранить как…» и в имени файла указать название
с расширением html или htm,
например 01.html или 01.htm.
Можно использовать MS Word,
при сохранении документа, надо пройти
по тому же пути: «Файл –> Сохранить как…» и там в типе файла указать
«Веб-страница (*.htm; *.html)».

Создаем первую страничку
Структура HTML:
...
...
В эту структуру входят парные теги (контейнеры).
Например, - это, открывающий пару, тег, а - закрывающий.
Разница в написании – это слеш «/»
в закрывающемся теге, который обязательно надо писать

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

В редакторе Блокнот набрать:
Моя страничка
Ура, получилось!
Далее необходимо сохранить документ,
как
веб-страничку

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

Абзац
Он описывается парой тегов
...
Все, что заключено между
и
, воспринимается как один абзац.
можно выравнивать текст внутри абзаца
...
атрибут ALIGN (читается "элайн", от английского "выравнивать") может быть равен значениям
CENTER (расположение по центру),
RIGHT (по правому краю) и
LEFT (по левому краю).

Заголовок
...
—
...
Метки вида
(где i — цифра от 1 до 6) описывают заголовки шести различных уровней.
Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий.
Метки вида
, так же как и
, могут содержать атрибут ALIGN и он может быть так же равен значениям
CENTER, RIGHT и LEFT.

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

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

Стили оформления

COLOR – атрибут для определения цвета, название которого задается числом в шестнадцатеричной системе счисления или название на английском языке
color=“#FF0000” color=”red”
Пример.
это шрифт синего цвета
R-red 00-FF 0-255
G-green 00-FF 0-255
B - blue 00-FF 0-255
RGB

Названия цветов и значения RGB

Теперь давай присвоим тексту какой-нибудь определенный шрифт, например Arial Black. Для этого нам надо написать такой код:
...
...
- текст, расположенный между этими метками, выводится браузером на экран с увеличенным левым полем.

Списки
Ненумерованные списки:
...
Текст, расположенный между метками
и
, воспринимается как ненумерованный список. Каждый новый элемент списка следует начинать с метки
. Чтобы создать ненумерованый список, необходим вот такой код:
Я
Ты
Мы

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

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

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

И теперь посмотрим, что у нас получилось: файл/сохранить как / стих.htm / открыть HTML – страницу. Закрыть HTML – страницу
ЩП по HTML – файлу / открыть с помощью БЛОКНОТ.
Теперь можно вносить изменения в документ.

Изображение линий
- непарный тэг, позволяющий задать горизонтальную линию:
Метка
может включать атрибуты:
SIZE - определяет толщину линии в пикселах,
WIDTH - определяет размах линии в процентах от ширины экрана,
COLOR - цвет линии. В следующем примере приведена небольшая коллекция горизонтальных линий.

Горизонтальные линии
Коллекция линий
Коллекция горизонтальных линий

Табличный дизайн
- контейнер для задания таблицы
- контейнер для задания строк
- заголовки столбцов
- формат ячеек и их содержание
ALIGN - расположение таблицы по отношению к полям документа. ALIGN=LEFT - выравнивание влево
ALIGN=CENTER - выравнивание по центру
ALIGN=RIGHT - выравнивание вправо.
WIDTH - ширина таблицы. Её можно задать в пикселах (WIDTH=400) или в процентах от ширины страницы (WIDTH=80%).
BORDER - ширина внешней рамки таблицы и ячеек в пикселах (BORDER=4). Если атрибута нет, таблица показывается без рамки.
CELLSPACING - расстояние между рамками ячеек таблицы в пикселах (например, CELLSPACING=2).
CELLPADDING - расстояние между рамкой ячейки и текстом в пикселах (например, CELLPADDING=10).
... - заголовок (не является обязательным). Метка может включать атрибут ALIGN. - заголовок помещается над таблицей - заголовок помещается под таблицей

Строки таблицы
Каждая строка таблицы начинается с метки и заканчивается меткой .
Метка может включать следующие атрибуты:
ALIGN - горизонтальное выравнивание текста в ячейках строки.
ALIGN=LEFT - выравнивание влево
ALIGN=CENTER - выравнивание по центру
ALIGN=RIGHT - выравнивание вправо.
VALIGN - вертикальное выравнивание текста в ячейках строки.
VALIGN=TOP - выравнивание по верхнему краю
VALIGN=MIDDLE - выравнивание по центру
VALIGN=BOTTOM - выравнивание по нижнему краю.

Ячейки таблицы
- организация ячейки таблицы
Метка может включать следующие атрибуты:
NOWRAP - содержимое ячейки должно быть показано в одну строку.
COLSPAN - "размах" ячейки по горизонтали, например, COLSPAN=3 означает, что ячейка простирается на три колонки.
ROWSPAN - "размах" ячейки по вертикали, например, ROWSPAN=2 означает, что ячейка занимает две строки.
ALIGN - выравнивание текста в ячейке.
ALIGN=LEFT - выравнивание влево
ALIGN=CENTER - выравнивание по центру
ALIGN=RIGHT - выравнивание вправо.
WIDTH - ширина ячейки в пикселах (например, WIDTH=200).
HEIGHT - высота ячейки в пикселах (например,HEIGHT=40).

Некоторые особенности
Если ячейка таблицы пуста, вокруг нее не рисуется рамка.
Если ячейка пуста, а рамка нужна, в ячейку можно ввести символьный объект (non-breaking space — неразрывающий пробел). Ячейка по-прежнему будет пустой, а рамка вокруг нее будет.
Любая ячейка таблицы может содержать в себе другую таблицу.
Пояснительный текст: можно оформить так:

Простейшая таблица
Пример таблицы
Простейшая таблица
У таблицы может быть заголовок
Первая строка, первая колонка
Первая строка, вторая колонка
Вторая строка, первая колонка
Вторая строка, вторая колонка

Задание фона страницы
Для задания цвета фона на странице надо внутри начального элемента указать атрибут bgcolor =“цвет”. Цвет задается также как и для шрифта названием или цифровым кодом.
Пример
…
…

Вставка рисунков
IMG – тег для создания ссылки на графический файл. С его помощью также можно использовать изображение в гиперссылках, вставлять картинки в таблицы, использовать изображения для фона страницы. Не содержит конечного тега.
Необходимым атрибутом является src- указатель пути к графическому файлу, alt – выводит текст, поясняющий загружаемый рисунок. Высоту и ширину рисунка задают с помощью атрибутов height и width. Рамка вокруг объекта задается атрибутом border.
Пример.

рисунок в центре, текст сверху и снизу align=justify>
рисунок слева
рисунок справа
Примеры обтекания иллюстраций в документе

Гиперссылки

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

Гиперссылки
текст для щелчка мыши
“адрес ссылки”>
Внутри тега используется атрибут, задающий цвет гиперссылок
link – задает цвет исходных ссылок
vlink – задает цвет посещенных ссылок
alink – задает цвет активных ссылок (цвет при нажатии мыши)
Для указания электронной почты и запуска электронной программы используется ссылка:
Иванов Иван

Примеры гиперссылок
Новые поступления
- переход к строке той же страницы, помеченной тегом
примечания
- переход на страницу сайта pag2 к строке, помеченной тегом
подробности читайте
вторая страница
- ссылка на другую страницу того же сайта

IMG src=log.gif alt=“о нашей фирме”
- ссылка на другую страницу того же сайта, но ссылкой является рисунок
Скачать программу
-ссылка с подсказкой title
тест
- внешняя ссылка
Примеры гиперссылок