Основы HTML. HTML (Hyper Text Markup Language) язык разметки гипертекста Web-страницы. - презентация

1 Основы HTML

2 HTML (Hyper Text Markup Language) язык разметки гипертекста Web-страницы

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

4 Создание Web-сайтов реализуется с использованием языка разметки гипертекстовых документов HTML. Технология HTML состоит в том, что в обычный текстовый документ вставляются управляющие символы (тэги) и в результате мы получаем Web-страницу.

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

6 Программы для создания HTML – файлов: Редакторы (HTML Wirtel, HTML Assistant, WebEdit, HomeSite, Блокнот и т.д.) Редакторы (HTML Wirtel, HTML Assistant, WebEdit, HomeSite, Блокнот и т.д.) Шаблоны Шаблоны Программы-преобразователи Программы-преобразователи

7 Программы для просмотра Web - страниц Microsoft Internet Explorer Microsoft Internet Explorer Netscape Communicator Netscape Communicator The Bat! The Bat! Opera и т.д. Opera и т.д.

8 Блокнот Блокнот (для создания страницы) (для создания страницы) Internet Explorer Internet Explorer (для интерпретации файлов) (для интерпретации файлов) Программы для создания HTML – файлов:

9 Гипертекст – это текст, содержащий специальные разметочные теги. Гипертекст – это текст, содержащий специальные разметочные теги. Теги (tag – ярлык, признак) – инструкции браузера, указывающие способ отображения текста. Теги (tag – ярлык, признак) – инструкции браузера, указывающие способ отображения текста.

10 Пример тега Пример тега Типы тегов Парные (влияет на текст с того места, где употреблён тег, до того места, где указан признак окончания его действия); Парные (влияет на текст с того места, где употреблён тег, до того места, где указан признак окончания его действия); Непарные; Непарные;

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

12 начинает описание HTML - файла HTML - документ состоит из двух частей: 1. Раздел заголовка 2. Содержательная часть

13 Раздел заголовка Начинается тегом Начинается тегом Заканчивается тегом Заканчивается тегом Mежду данными тегами располагается тег (этот тег используется для задания названия документа) Mежду данными тегами располагается тег (этот тег используется для задания названия документа)

14 Раздел содержательной части Начинается тегом Начинается тегом Заканчивается тегом Заканчивается тегом (между которыми располагается содержимое HTML - документа)

15 Создать файл в Блокноте (сохраните в файле Пример, указав расширение *. html) Заголовок HTML – документа Заголовок HTML – документа Это тело HTML – документа. Здесь можно разместить всё, что угодно. Это тело HTML – документа. Здесь можно разместить всё, что угодно.

16 Создать файл в Блокноте (сохраните в файле Пример, указав расширение *. html)

17 тег «параграф», отделяет абзац друг от друга Тег Тег

18 Примеры использования тега : Выравнивание по левой границе окна Выравнивание по левой границе окна Выравнивание по центру окна Выравнивание по центру окна Выравнивание по правой границе окна Выравнивание по правой границе окна Выравнивание по ширине окна Выравнивание по ширине окна

19 Тег Тег для разметки заголовков (,,,,, )

20 Тег Тег отображение горизонтальной линии

21 Пример использования тега :

22 Тег Тег позволяет изменить шрифт

23 Параметры тега Параметры тега FACE (задаёт название шрифта, которым FACE (задаёт название шрифта, которым будет выводится текст) будет выводится текст) SIZE (задаёт размеры шрифта в условных SIZE (задаёт размеры шрифта в условных единицах от 1 до 7) единицах от 1 до 7) COLOR (устанавливает цвет шрифта, COLOR (устанавливает цвет шрифта, который может задаваться с который может задаваться с помощью стандартных имён или помощью стандартных имён или набором шестнадцатеричных цифр) набором шестнадцатеричных цифр)

24 Примеры использования параметров тега : Название шрифта Название шрифта Шрифт размера 5 Шрифт размера 5 Шрифт размера 6, цвет зелёный Шрифт размера 6, цвет зелёный

25 Задание цвета на языке HTML Шестнадцатеричные значения (цветовая система базируется на трёх основных цветах – красном, зеленом и синем – обозначается RGB) (цветовая система базируется на трёх основных цветах – красном, зеленом и синем – обозначается RGB) Например: #000000, #0000FF, #FF0000, #FFFFFF #FFFFFF Мнемонические обозначения (название цвета) (название цвета) Например: Red, White, Blue, Green

26 Пример использования параметра Color: Шрифт размера 6, цвет зелёный Шрифт размера 6, цвет зелёный или

27 Тег Тег используется для указания размера, типа и цвета шрифта по умолчанию

28 Примеры использования тега : Шрифт по умолчанию размера 3 Шрифт по умолчанию размера 3 Шрифт размера 2 Шрифт размера 2 Шрифт размера 4, цвет оливковый Шрифт размера 4, цвет оливковый

29 Пример использования параметра Color c тегом : Задание Задание цвета фона цвета фона