Секция «Основы сайтостроения» Кротова Т.В. Овчарова О.П. - презентация

1 Секция «Основы сайтостроения» Кротова Т.В. Овчарова О.П.

2 Цели секции Знакомство слушателей с технологией создания Web-страниц с использованием языка HTML и каскадных таблиц стилей Демонстрация результатов работы учащихся профиля «Интернет- технологии»

3 План работы секции «Создание Web-страниц средствами HTML» (40 мин.) «Изменение внешнего вида страницы с использованием технологии CSS» (30 мин.) Презентация работ учащихся профиля «Интернет-технологии» (20 мин.)

4 «Создание Web- страниц средствами HTML» Кротова Т.В.

5 Web-конструирование. HTML Введение в HTML. Программирование вывода текста. Абзац, заголовок, пользовательское форматирование. Выделение участков текста. Цветовое решение Web-документа. Дизайн Web-документа. Стиль страниц Web-документа. Стиль программирования. Списки и иерархия. Нумерованный, маркированный список. Вложенный список. Список – определение. Гипертекст. Ссылка внутри Web-документа. Ссылки на другой Web-документа. Таблицы. Использование таблиц для формирования структуры страницы Web-документа. Вставка графических изображений на страницу Web- документа. Взаимное расположение графического изображения и текста. Зачетный творческий проект. Защита творческого проекта.

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

7 Теги и атрибуты тегов Текущий абзац будет выровнен по правому краю

8 Особые требования Создание HTML-кода только в Блокноте Имена тегов писать заглавными буквами, имена атрибутов – строчными Демонстрировать структурность программы (отступы для вложенных конструкций) Длина каждой строки HTML-кода – не более 80 символов

9 Структура HTML-программы Заголовок окна браузера Теги для разметки содержимого Web- странички

10 Программирование абзацев и заголовков текст абзаца Абзац Принудительный разрыв строки в абзаце Заголовок Заголовок n-го уровня Горизонтальная линия Текст Вывод текста на экран браузера в неизменном виде Индекс Нижний индекс Индекс Верхний индекс Текст Полужирный текст Текст Курсив

11 Списки Маркированный Нумерованный Список определений

12 Программирование маркированного списка 1 элемент 2 элемент ………………… n элемент

13 Программирование нумерованного списка 1 элемент 2 элемент ………………… n элемент

14 Программирование списка определений Термин1 определение термина 1 …………….. Термин n определение термина n

15 Программирование картинок Необязательные атрибуты тега IMG: alt width и height border hspace и vspace align

16 Программирование таблиц 1 строка таблицы … 1 ячейка строки 1 ……………… … n ячейка строки 1 2 строка таблицы … 1 ячейка строки 2 ……………… … n ячейка строки 2 ……………………. m строка таблицы … 1 ячейка строки n ……………… … n ячейка строки n

17 Гиперссылки Переход внутри одного документа Переход к другому документу Переход к метке другого документа

18 Организация перехода к метке текущего документа Текст гиперссылки …………… ……….

19 Организация перехода к другому документу К началу документа Текст гиперссылки К метке другого документа Первый файл Текст гиперссылки Второй файл