Разработка Web-сайтов

Цель: изучение основ языка разметки гипертекста HTML и использование его при Web-конструировании.

Ход занятия

1.Организационный момент

2.Актуализация знаний.

Учитель: Предлагаю вспомнить некоторые понятия (беседа с обучающимися).

Web-страница (англ. Web page) — документ или информационный ресурс Всемирной паутины, доступ к которому осуществляется с помощью веб-браузера (Википедия).

Всеми́рная паути́на (англ. World Wide Web) — распределенная система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютерах, подключенных к Интернету (Википедия).

Веб-обозрева́тель, обозрева́тель, бра́узер— программное обеспечение для просмотра веб-сайтов, то есть для запроса веб-страниц (Википедия).

3. Изучение нового материала.

Учитель: Что такое HTML? (рассказ учителя с элементами беседы)

Hyper Text Markup Language (HTML) – язык гипертекстовой разметки документов.

Web-страницы можно создать с помощью языка HTML.

3.1. Понятие тега.

В обычный документ вставляются управляющие символы - HTML-теги, которые определяют вид Web-страницы при её просмотре в браузере.

Теги заключаются в угловые скобки и могут быть одиночными или парными.

Парные теги содержат открывающий и закрывающий теги (контейнер).

Например, код Web-страницы помещается внутрь контейнера

HTML>… HTML>

Теги могут записываться как прописными, так и строчными буквами.

(Демонстрация презентации, 2-3 слайды).

3.2. Понятие атрибута.

Некоторые теги имеют атрибуты, которые являются именами свойств и могут принимать определённые значения и влияют на внешний вид Web-страницы.

Например,

FONT>

(Демонстрация презентации, 4 слайд).

3.3. Структура Web-страницы.

Название Web-страницы

На этой странице можно разместить любую интересную информацию в Интернете.

(Демонстрация презентации, 5 слайд).

3.4. Создание Web-страницы.

1. Создать личную папку.

2. Создать в блокноте шаблон HTML-документа, набрав HTML-код страницы.

3. Сохранить файл под именем Шаблон.txt в личной папке.

4. Открыть файл Шаблон.txt и внести необходимую информацию, используя теги и их атрибуты.

5. Сохранить файл под именем index.htm в личной папке.

Для редактирования файла index.htm необходимо открыть его в Блокноте.

(Демонстрация презентации, 6-7 слайды).

3.5. Атрибуты фона Web-страницы.

• Атрибут цвета Web-страницы

bgcolor=#FFF8DC>

• Атрибут вставки фонового рисунка Web-страницы

background="Nature_02.jpg”>

Оформление конспекта обучающимися.

(Демонстрация презентации, 8 слайд).

3.6. Теги и атрибуты форматирования текста на Web-странице.

H1>…H1> до H6>…Y6> тег размера шрифта заголовков

FONT>…FONT> тег форматирования шрифта

FACE=“Arial” атрибут задания гарнитуры шрифта

SIZE=4 атрибут задания размера шрифта

COLOR=“Red” атрибут задания цвета шрифта

ALIGN=“left” атрибут задания выравнивания текста

HR> тег для создания горизонтальной линии

P>…P> контейнер для разделения текста на абзацы

Оформление конспекта обучающимися.

(Демонстрация презентации, 9 слайд).

3.7. Тег и атрибут вставки изображений на Web-странице.

Оформление конспекта обучающимися.

(Демонстрация презентации, 10 слайд).

3.8. Теги и атрибуты гиперссылки на Web-странице.

A HREF=“Адрес”>УказательA> тег с атрибутом для создания гиперссылки

ADDRESS>…ADDRESS> контейнер для создания гиперссылки на адрес электронной почты

Пояснение:

• Для связывания Web- страниц используют гиперссылки.

• Термин «гипертекст» был введён в обращение Тедом Нельсоном в 1965 году для описания документов, которые выражают нелинейную структуру идей.

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

Оформление конспекта обучающимися.

(Демонстрация презентации, 11-12 слайды).

3.9. Теги и атрибуты для создания списков на Web-странице.

OL>…OL> контейнер для создания нумерованных списков

LI> тег элемента списка

UL>…UL> контейнер для создания маркированного списка

LI> тег элемента списка

DL>…Dl> контейнер для создания списка терминов

DT> тег для создания термина

DD> тег для создания определения

(Демонстрация презентации, 13 слайд).

3.10. Теги и атрибуты для создания интерактивных форм на Web-странице.

FORM>…FORM> контейнер для создания формы

Тег INPUT> со значением атрибута TYPE=“text” создают текстовое поле

Тег INPUT> со значением атрибута TYPE=“radio” создают группу переключателей

Тег INPUT> со значением атрибута TYPE=“checkbox” создают флажки

SELECT> …SELECT> контейнер для реализации раскрывающего списка

тег элемента списка

Просмотр интерактивных форм на Web-странице.

(Демонстрация презентации, 14 слайд).

4.Закрепление

Практическая работа 6. 3

Разработка сайта с использованием языка разметки гипертекста HTML.

5. Итоги урока.

6. Домашнее задание п. 6.4