HTML. Первые шаги. - презентация

1

2 Цель урока: 1. Познакомиться со структурой WEB-документа. 2. Изучить основные команды форматирования WEB-документа. 3.Узнать, как создавать простейшие WEB-документы. 4. Получить практические навыки их создания.

3

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

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

6 Команды языка HTML называются теги. Большинство тегов – парные … Документ HTML имеет три структурных типа содержимого: 1. Теги – команды в 2. Комментарии –пояснения к документу. Они помогают разобраться в его содержании 3. Текст – то, что пользователь видит на экране браузера. Команды языка HTML

7 Теги и Атрибуты Каждый тег состоит из имени тега, за которым может следовать список атрибутов (параметров) Атрибуты отделяются от имени тега и друг от друга пробелами. Значение атрибута пишется после знака равенства. Тег со всеми атрибутами желательно располагать на одной строке. Для большинства тегов нужен закрывающий тег:

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

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

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

11 Создание WEB-страниц в блокноте. В своей папке создать отдельную папку для файлов сайта. Открыть программу БЛОКНОТ. Написать в нем текст WEB-страницы. Сохранить этот текст в этой папке под любым именем с расширением.html. Документ должен иметь значок Открыть этот документ. (Откроется программа-браузер). Если нужно внести изменения в документ, то выполнить команду ВИД Просмотр HTML-кода (Исходный текст). Текст WEB-страницы откроется в блокноте. Внести в текст изменения. Сохранить его (Ctrl+S), перейти в программу-браузер и нажать кнопку ОБНОВИТЬ.

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

13 Оформление текста Заголовки Существует 6 уровней заголовков:..., …,... Атрибут – align – выравнивание Значения: Left (по умолчанию) Right Centr Title 1 Title 2 Title 3 Title 4 Title 5 Title 6

14 Абзацы Тег указывает на начало нового абзаца и вставляет пустую строку перед абзацем. Атрибут align. Тег - разрыв строки. Используется для записи текстов стихов и песен. Атрибут clear позволяет продолжить поток текста после (ниже) рисунка или таблицы. Значения left, right, all - продолжают вывод текста там, где указанный в атрибуте край или оба края свободны от таблиц и рисунков. Этот атрибут имеет смысл только с выровненными влево или вправо рисунками или таблицами.

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

16 Физическое и логическое форматирование текста 1. Физическая разметка документа – это явное указание браузеру, как должен выглядеть тот или иной фрагмент текста – размер шрифта, курсив и т.п. 2. Логическая разметка учитывает смысл выделенного фрагмента – цитата, сведения об авторе и т.п. Современные стандарты языка HTML советуют использовать по-возможности логическую разметку, хотя физическое форматирование еще никто не отменял.

17 теги физических стилей … Полужирный шрифт … Увеличенный шрифт … Курсив … Уменьшенный шрифт … Подчеркивание … Верхний индекс … Зачеркнутый шрифт … Нижний индекс … Стиль печатной машинки … Мерцающий текст (в Internet Explorer) Можно комбинировать теги стилей: Полужирный курсив

18 Изменение шрифта тег … - изменяет размер, цвет и стиль текста. Атрибуты: size - размер шрифта 1-7. По-умолчанию size=3 Размер изменяется на 20%: 4 размер больше 3 на 20%, 5 размер больше 4 на 20% size=4 – абсолютный размер, size= +1 – относительный (на 1 больше, чем базовый размер шрифта) color - цвет текста, face - название шрифта face="Comic Sans MS, Courier New

19 Мой второй шаг Это обычный шрифт Это измененный шрифт Это снова обычный шрифт