Секция «Основы сайтостроения»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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