HTML-редактор. Инструменты создания информационных объектов для интернета

Вы уже знаете о суперспособностях современного учителя?

Тратить минимум сил на подготовку и проведение уроков.

Быстро и объективно проверять знания учащихся.

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

Избавить себя от подбора заданий и их проверки после уроков.

Наладить дисциплину на своих уроках.

Получить возможность работать творчески.

=> ПОЛУЧИТЬ СУПЕРСПОСОБНОСТИ УЧИТЕЛЯ <=

Просмотр содержимого документа
«HTML-редактор. Инструменты создания информационных объектов для интернета»

Итак, сайт – это группа взаимосвязанных Web-страниц, объединённых или единой тематикой, или единым авторством, или единым владельцем. Сайт состоит из Web- страниц. Каждая Web-страница представляет собой HTML-документ, т.е. документ, написанный в специальном формате HTML (HyperText Markup Language) (слайд 3).

И тема нашего сегодняшнего урока – «Способы создания сайтов. Понятие о языке HTML. Структура HTML-документа». Запишите себе в тетради сегодняшнее число и тему (обучающиеся делают запись в тетради) (слайд 4).

Что же такое HTML? Согласно определению: HTML - язык разметки гипертекста (слайд 5) (обучающиеся записывают)

- Давайте вспомним, а что такое гипертекст? (это текст, содержащий гиперссылки, т.е. некоторое слово или объект для перехода на другой фрагмент документа или на другую Web-страницу) (слайд 6)

Т.е. язык разметки гипертекста HTML позволяет создавать Web-страницы, которые можно разместить в сети Интернет.

- А при помощи чего можно просматривать Web-страницы? (Web-браузеры) (слайд 7-8)

Основным понятием языка HTML является тег. ТЕГ- инструкция браузеру, указывающая способ отображения информации (слайд 9). Атрибут-компонент тега, содержащий указания о том, как браузер должен воспринять и обработать тег (слайд 10).

Теги могут быть парные и одиночные. Парные делятся на открывающие и закрывающие(слайд 11). Контейнеры- это парные теги, содержащие открывающий и закрывающий тег (слайд 12).

Задание. Даны теги, определить парные и одиночные теги: H1,
, , Head (слайд 13).

Теги пишутся с использованием, какого алфавита? (Латинского)
При написании тегов используются только буквы? (Нет, еще и цифры)

(слайд 14) Но даже если мы выучим все теги языка HTML, этого будет недостаточно, если мы не будем знать структуру построения HTML-документа. Это всё равно, что иметь все нужные для строительства дома материалы, но не знать, как строить и с чего вообще начать. Поэтому важно знать структуру HTML-документа. Рассмотрим структурные теги.

(слайд 15-16) Тег ( … html) Этот тег помещают в начало и конец документа, сообщая браузеру, что весь документ составлен на HTML. Обратите внимание: этот тег – парный или одиночный? (парный).

Тег (... head ) Тег определяет заголовок, то есть часть документа, которая содержит информацию о документе. Тег не имеет собственных атрибутов, он используется в качестве контейнера для других тегов заголовка, таких как , и , которые заключаются между тегами и head.

Тег определяет название документа, которое появится в верхней строке окна браузера.

Тег (body…body) Тег определяет начало и конец основной части (тела) HTML-документа. В теле документа находится его содержимое (часть документа, которая выводится в окно браузера). Атрибуты этого тега оказывают влияние на весь документ.

Это основные структурные теги. Помимо них существует множество других – для форматирования текста, добавления изображения, создание гиперссылки и т.д., благодаря которым можно полностью настроить содержание и внешний вид WEB-страницы. Таким образом, «ручное» написание кода на языке разметки гипертекста HTML, является одним из способов создания сайтов (слайд 18). Другой способ – создание сайта с помощью конструкторов сайтов (движков), размещенных в Интернете и доступных в режиме on-line. Конструктор сайтов – это система услуг, позволяющая пользователям создавать сайт из набора графических элементов и различных шаблонов отдельных модулей (панели навигации, ленты новостей, форм регистрации и т.д.)(слайд 19).

И еще один из существующих способов – использование специальных программных продуктов для создания и управления сайтом (например, визуальные HTML-редакторыMicrosoft Front Page, Macromedia Dreamweaver или профессиональные системы для разработки сайтов 1C-Битрикс, MODx и др.)(слайд 20).

(слайд 21) Язык HTML является основой любого гипертекстового документа, даже если документ был создан в одном из конструкторов сайтов или визуальном редакторе. Просто в этом случае код на языке HTML генерируется автоматически либо движком, либо программой. Поэтому можно создать основу сайта (макет) с использованием визуального редактора, а затем доработать его, внеся непосредственно изменения с HTML-код. (слайд 22) В любом случае, знание языка HTML позволит лучше разобраться в структуре сайта и в случае необходимости внести в него коррективы вручную.

Проведение теста. Индивидуальное выполнение теста по индивидуальным карточкам. Карточки раздаются учащимся, обучающиеся выполняют задания и затем карточки сдаются учителю на проверку (слайд 23)

Web- страница (документ HTML) представляет собой:

А. Текстовый файл с расширением txt или doc

В. Текстовый файл с расширением htm или html

С. Двоичный файл с расширением com или exe

D. Графический файл с расширением gif или jpg

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

А. Microsoft Word или Word Pad В. Microsoft Access или Microsoft Works

С. Internet Explorer или Google Chrome D. HTML Pad или Front Page

Как называется пара тегов, содержащая открывающий и закрывающий тег?

Файл Ящик Корзина Контейнер

Тег используется для:

задания заголовка документа; отображения размера документа;

задания имени файла; отображения колонтитула документа.

Укажите тег, который указывает на начало основного содержания (тела, видимой части) web-страницы:

; ; ; .

Закрывающий тег начинается со знака:

\\; /; "; #.

Тег, с которого начинается web-страница – это:

; ; ; .

Закрепление нового материала путём выполнения практического задания.

(слайд 24-25) В каталоге «Мои документы» создайте папку SITE. Откройте текстовый редактор Блокнот (Пуск - Все программы - Стандартные) и наберите текст, представленный ниже.

Первое знакомство с тэгами HTMLTITLE

HEAD

Это моя первая WEB- страница

BODY

HTML

(слайд 26) Выполните команду [Файл - Сохранить]. В разделе Тип файла укажите «Все файлы». В разделе Имя файла укажите index.html. В качестве места сохранения выберите папку SITE. Нажать кнопку «Сохранить». Затем запустите созданный и сохраненный файл (он должен запустится в браузере) или запустите браузер и откройте созданный файл командой [Файл - Открыть]. В заголовке окна браузера высветится название Web-страницыПервое знакомство с тэгами HTML. Просмотр HTML-кода.Для переключения между режимом просмотра WEB-страницы в браузере и текстом HTML-файла используйте меню Вид

(слайд 27) Для внесения изменений можно выделить (однократным нажатием левой кнопки мыши) созданный файл, и в контекстном меню (запускается однократным нажатием правой кнопки мыши) выбрать команду Открыть с помощью-Блокнот. После изменения или дополнения файл сохранить и заново запустить или просто обновить (если WEB-страница не была закрыта) в окне браузера.