Язык разметки гипертекста HTML

Содержание:
Введение в язык Введение в язык HTML.
История создания История создания HTML.
Основные понятия языка Основные понятия языка HTML
Структура Структура Web – Структура Web – документа.
Вставка комментария
Пример Пример HTMLПример HTML документа.
Теги форматирования текста.
Теги управления внешним видом Теги управления внешним видом Web-Теги управления внешним видом Web-страницы
Тэг Тэг
Цвет фона и текста
Списки
WebWeb-страница с графическими объектами.

Введение в язык HTML
HTML – это язык разметки документов в среде WEB. То, что вы видите при просмотре страницы в Internet, это интерпретация вашим браузером HTML-текста. Чтобы браузер правильно отображал форматирование к примеру текста т.е. разделял его на абзацы, выделял цитаты, заголовки, списки и.т.д. ему надо как-то сообщить , что мол это заголовок, а это – параграф и.т.д. Этим как раз и занимается язык html.
Чтобы увидеть HTML-коды страницы в Internet, кликните правой кнопкой мыши по странице, в выпавшем меню выберите пункт - view source (или "просмотр HTML кода").
Содержание

HTML-документ –
это обычный текстовый
документ, содержащий
специальные разметочные указатели (тэги).
HTML-файл имеет расширение
.htm или .html
Содержание

История создания HTML
(Hyper Text Markup Language – язык разметки гипертекста)
Некоторые даты:
1945 год: американский ученый, научный консультант президента Ванневар Буш (Vannevar Bush) высказывает идею гипертекста.
1968 год: Дуглас Энджельбарт демонстрирует работу гипертекстовых связей в созданном им текстовом процессоре.
Содержание

1960-е годы: сотрудники компании IBM создали язык GML (General Markup Language - общий язык разметки), который предназначался для использования на ЭВМ семейства IBM. Язык GML в дальнейшем был расширен, а в 80-х годах прошёл стандартизацию ISO (Международная организация стандартизации). Этот мощный и универсальный режим разметки, названный SGML (Standart General Markup Langugage), использовался военным ведомством США для оформления технической документации.
1980-е годы: учёный-физик Тим Бернерс-Ли, сотрудник CERN (Европейский Центр Ядерных Исследований) ,в основу разрабатываемого языка положил язык SGML и приёмы работы с гипертекстом, с чем и связано название созданного им языка - HTML. Новый язык использовал основные конструкции SGML для описания документов и гипертекстовых ссылок.
Некоторые даты:
Содержание

Термин "гипертекст" впервые был введён Тедом Нельсоном в 1969 году.
Гипертекст – электронный документ, содержащий в себе ссылки на другие документы.
Содержание

ТЭГИ
Тэг – инструкция браузеру, указывающая способ отображения текста.
Содержание

Тэг всегда начинается со знака «меньше» (<) и оканчивается знаком «больше» (>)
Например:
ПРАВИЛА ЗАПИСИ ТЭГОВ
Содержание

ТЭГИ
ТЕГ
одиночный
парный
(контейнер)
открывающий < >
закрывающий
Содержание

Структура Web – документа.
Всё содержимое файла Интернет-страницы заключается в контейнер …, указывающий браузеру, что данный текст представляет собой HTML-документ и, возможно содержит в себе тэги, которые браузер должен выявить, распознать, интерпретировать.
Типичная Интернет-страница состоит из двух частей: заголовка (HEAD) и тела (BODY).
Содержание

Структура Web – документа.
Эту базовую структуру в простейшем виде можно наглядно показать следующим образом:
Содержание

Структура Web – документа.
Указанная вами строка-название будет выводиться в заголовке окна браузера, когда данная страничка будет в нём просматриваться, а также (уже после размещения страницы в Интернете) в списках, выдаваемых поисковыми серверами.
Содержание

КОММЕНТАРИИ
- такой полутэг используется для добавления комментариев на страничке,
т. е. для полезных пояснений, которые не показываются в браузере.
Пример:
Заголовок
Подзаголовок
Содержание

ПРИМЕР HTML-ДОКУМЕНТА
Это моя первая страничка!
я напишу свою первую строчку текста!-->
Ура!!!! Я создал свою первую страницу на html!!!
Содержание я напишу свою первую строчку текста!-->
Ура!!!! Я создал свою первую страницу на html!!!
Содержание

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

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

сдвигает текст ниже уровня строки и выводит его шрифтом меньшего размера. Рекомендуется для печати математических индексов:
сдвигает текст выше уровня строки и выводит его шрифтом меньшего размера. Этот тэг можно использовать для задания степеней чисел:
Содержание
Тэги форматирования текста.

Теги управления внешним видом Web-страницы
- отделяет абзацы друг от друга, ставится в конце абзаца.
- начало новой строки.
- горизонтальная линия во весь экран.
/
- заголовок документа. После буквы Н указывается вид заголовка от 1 до 6.
Содержание

Тэг
Тэг
позволяет изменить шрифт, который использует браузер для просмотра Web-страницы. Тэг может иметь следующие параметры:
FACE – задает название шрифта, которым будет выводится текст.
SIZE – задает размеры шрифта в условных единицах от 1 (самого маленького) до 7 (самого большого). Принято считать, что шрифт “нормального” размера соответствует значению 3.
COLOR – устанавливает цвет шрифта, который может задаваться с помощью стандартных имен или набором шестнадцатеричных цифр.
Содержание

Пример:
Содержание

Результат в браузере:
Содержание

Цвет фона и текста
Мы уже знаем как менять цвет текста, но для этого нам нужно было заключать его в теги font , а это не всегда удобно. Иногда, лучше задать цвет текста для всего документа. Также, можно задать и фоновое изображение.
Вот необходимые атрибуты:
BACKGROUND – определяет изображение для "заливки" фона. Значение задается в виде полного URL или имени файла с картинкой в формате GIF или JPG (подробнее об этом будет рассмотрено позже).
BGCOLOR – определяет цвет фона документа.
TEXT – определяет цвет текста в документе.
Все они прописываются для элемента BODY. Значения цветов задаются либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
Содержание

Цвет фона и
текста
Содержание

Цвет фона и текста
Пример: text="red">
Этот текст будет красный, потому что мы изменили цвет текста в теге БОДИ и теперь весь текст на странице по умолчанию будет красный
В этом абзаце текст будет зеленый, потому что мы заключили его в теги font и придали соответсвующий цвет
Теперь текст снова будет красный
Содержание

Цвет фона и текста
Результат в браузере:
Содержание

Списки
Каждый элемент списка начинается тэгом
В языке HTML предусмотрен специальный набор тэгов для представления информации в виде списков следующих типов:
Маркированный (
);
Нумерованный (
/
);
список определений (
/
).
Термин.
Его определение
. . . . . .
Содержание

Web-страница с графическими объектами.
Изображения - это неотъемлемая часть любого сайта в сети интернет. Они используются везде, поэтому давайте разберемся что к чему. Есть три типа файлов изображений, которые можно вставить на ваши страницы:
GIF (Graphics Interchange Format)
JPG / JPEG (Joint Photographic Experts Group)
PNG (Portable Network Graphics)
Содержание

Web-страница с графическими объектами.
Пара слов о форматах:
GIF - использует всего 256 цветов и соответственно лучше подходит для рисунков с малым кол-вом оттенков. Этот формат поддерживает прозрачность изображений.
JPEG - формат изображений, который использует до миллиона цветов. Обычно используется для фотографий и качественной графики(с огромным количеством оттенков).
PNG - сравнительно новый формат . По многим параметрам превосходит JPEG и GIF: миллионы цветов и эффективное сжатие. Также поддерживает прозрачность.
В каком формате брать изображения - дело Ваше, однако старайтесь добиться максимального качества при минимальном размере .
Содержание

Web-страница с графическими объектами.
Для размещения изображений в HTML-документах используется тэг
, у которого параметр SRC задает местонахождение файла с изображением. Например:
- в HTML-документ будет помещено изображение, находящееся в файле picture.gif;
- в HTML-документ будет помещено изображение, находящееся в файле Плитка.bmp, который расположен в папке Images, находящейся в этой же самой папке, что и HTML-документ.
Содержание

Web-страница с графическими объектами.
При включении графического изображения в документ можно указывать его расположение относительно текста или других элементов страницы. Способ выравнивания изображения задается значением параметра ALIGN тэга
. Ниже приведены некоторые возможные значения этого параметра:
LEFT Изображение “прижимается” к левому полю окна. Текст обтекает изображение с правой стороны.
RIGHT Изображение “прижимается” к правому полю окна. Текст обтекает изображение с левой стороны.
Содержание

Web-страница с графическими объектами.
Параметры RIGHT и LEFT.
Изображение “прижимается” к правому полю окна. Текст обтекает изображение с левой стороны.
Изображение “прижимается” к левому полю окна. Текст обтекает изображение с правой стороны.
Содержание