Конспект урока по Информатике "Разработка Web-сайтов" 11 класс

Разработка 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-страницы помещается внутрь контейнера

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

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

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

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

Например,

Моё имя – Марина

FONT>

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

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

</FONT> </P> <P STYLE="line-height: 100%"> <FONT SIZE=2 STYLE="font-size: 11pt">Название<SPAN > Web-</SPAN>страницы<SPAN > </SPAN></FONT> </P> <P STYLE="line-height: 100%"><FONT SIZE=2 STYLE="font-size: 11pt">

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

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

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

Создать личную папку.
Создать в блокноте шаблон HTML-документа, набрав HTML-код страницы.
Сохранить файл под именем Шаблон.txt в личной папке.
Открыть файл Шаблон.txt и внести необходимую информацию, используя теги и их атрибуты.
Сохранить файл под именем 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-странице.