Создание WEB – страниц в формате HTML
план-конспект урока по теме

Юдина Людмила Ильинична

 

Конспект урока Создание WEB – страниц в формате HTML. ЦЕЛИ  УРОКА: познакомить студентов с основами HTML программирования, развивать знания студентов в области информационных технологий, оказать важность знаний и умений в сфере информационных компьютерных технологий.

Скачать:

ВложениеРазмер
Файл sozdanie_veb_-stranic_nsportal.docx63.9 КБ

Предварительный просмотр:

Государственное автономное образовательное

учреждение  среднего профессионального образования

 Калининградской области
«Колледж сервиса и туризма»

КОНСПЕКТ  УРОКА

Преподавателя информатики и ИКТ

Юдиной Людмилы Ильиничны

Тема: Создание WEB – страниц в формате HTML

Калининград 2013г.

ЦЕЛИ  УРОКА:

1.  Дидактическая: познакомить студентов с основами HTML программирования.
2.  Развивающая: Развивать знания студентов в области информационных технологий.
3.  Воспитательная: Показать важность знаний и умений в сфере информационных компьютерных технологий.
Вид занятий (тип урока): изучение нового материала.
Организационные формы обучения: лекция.
Вид и формы контроля знаний: фронтальный опрос.
Домашнее задание
Ход занятия
1.   Организационный момент.
2.       Сообщение темы и цели занятия.
3.       Изучение нового материала.

4.       Практическая работа
5.       Подведение итогов занятия.
6.       Домашнее задание.

ТРЕБОВАНИЯ К ЗНАНИЯМ И УМЕНИЯМ:

        Студенты  должны знать:
- что такое Web-страница;
- как менять фон Web-страницы;
- принципы построения Web-страницы;
- способы форматирования информации в Web-странице.

Студенты должны уметь:
- создавать простейшие Web-страницы; 
- просматривать Web-страницы; 
- вставлять информацию через буфер обмена; 
- вставлять рисунки из файла; 
- работать с таблицами; 
- делать границы таблицы невидимыми; 

ХОД УРОКА

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

  1. Приветствие;
  2. проверка готовности студентов к уроку;

 

ОСНОВНЫЕ ПОНЯТИЯ

HTML
Термин HTML (HyperText Markup Language) означает язык маркировки гипертекстов. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.

Прежде чем преступить к созданию своих Web – страниц необходимо познакомиться с основными понятиями и терминами данного раздела.
Сайт - это набор страниц в формате  HTML которые лежат на Web – сервере.
Web – сервер –  это постоянно подключенный к Интернету компьютер, который передает эти странички по запросу пользователей.
Web – узел – это намного больше чем совокупность Web – страниц. Это и система гиперссылок, связывающая узел в единое целое, и единое стилистическое оформление узла, и своевременное обновление находящейся информации на узле, и скорость загрузки отдельных страниц, и многое другое.
Домашняя страница – это Web – страница, которая передается сервером по запросу пользователя, указавшего в запросе имя Web, но не задавшего имени конкретной страницы.
Язык HTML расшифровывается как  «язык гипертекстовой разметки».
Файл HTML – это обычный текстовый файл с расширение htm или html, содержащий текст страницы, который мы видим в нашем браузере, и некоторые управляющие записи – теги.

Интернет страницы можно создавать несколькими способами.

Мы рассмотрим первый  способ создания при помощи программ Блокнот  

и                                                            Internet Explorer.
Запустите программу блокнот и используя специальные коды – теги, запишите программный код для создания своей страницы (в ходе работы студенты пользуются инструкционной картой с тегами).

Обязательные тэги  HTML
...
Метка должна открывать HTML-документ. Аналогично, метка должна завершать HTML-документ.
...
Эта пара меток указывает на начало и конец заголовка документа. Помимо наименования документа (см. описание метки ниже), в этот раздел может включаться множество служебной информации, о которой мы обязательно поговорим чуть позже.<br><title> ...
Все, что находится между метками и , толкуется браузером как название документа.Internet Exploerer, например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер.

...
Эта пара меток указывает на начало и конец тела HTML-документа, каковое тело, собственно, и определяет содержание документа.

...

...

Метки вида (где i — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий.

...


Такая пара меток описывает абзац. Все, что заключено между

и

, воспринимается как один абзац. Метки и

могут содержать дополнительный атрибут ALIGN, например:

Выравнивание заголовка по центру


или

Образец абзаца с выравниванием по правому краю


Пример программы записанной в блокноте:





КОЛЛЕДЖ СЕРВИСА И ТУРИЗМА

 




Внешний вид готового документа в Internet Explorer:
После того как программа была написана в Блокноте сохраняем файл с расширение html, закрываем. Открываем программу Internet Explorer – Файл – Открыть – ищем наш сохраненный текстовый документ – открываем.

ИНСТРУКЦИОННАЯ КАРТА

Теги

Назначение

Открытие и закрытие документа

Начало и конец заголовка

Начало и конец документа



Перевод строки


Горизонтальный разделитель

Выравнивание по центру

Адрес автора

Жирный шрифт

Курсив

Верхний индекс

Нижний индекс

Размер шрифта от 1 до 7

Цвет шрифта

Гарнитур шрифта


  • Элемент 1
  • Элемент 2
  • Элемент 3

Создание маркированного списка


  1. Элемент  1
  2. Элемент  2
  3. Элемент  3

Создание нумерованного списка

Вставка изображения

Фоновое изображение

Цвет фона

Цвет текста

Цвет присмотра ссылки

Цвет ссылки

Цвет активной ссылки

ПРАКТИЧЕСКАЯ РАБОТА

Для закрепления темы студенты пробуют создать Web – страницы.

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

ИТОГИ УРОКА

Закрепление материала:

  1. Сколько способов создания HTML – страниц Вы знаете, и какие?
  2. Какая функциональная кнопка изменяет вводимый текст в Internet Explorer?
  3. Какие правила дизайна необходимо соблюдать при создании HTML-документа?
  4. Какова последовательность действий при создании HTML-документа во FrontPage?
  5. Как осуществляется подготовка текста HTML-документа средствами FrontPage?

ДОМАШНЕЕ ЗАДАНИЕ


По теме: методические разработки, презентации и конспекты

Методические указания к лабораторным работам по созданию сайта "Основы использования HTML"

Все материалы для работы и выполнения контрольной  находятся в папке HTML_met  в архиве HTML_met.zip.Основная методичка называется Html_posobie.pdf...

План-конспект к открытому занятию «Создание Web-страницы с внутренними ссылками»

·                         План-конспект открытого занятия «Создание структуры навигации с внутренними ссылками на web-странице».Занятие явля...

Презентация к открытому занятию "Создание web-страницы с внутренними ссылками"

Презентация к открытому занятию "Создание web-страницы с внутренними ссылками" в формате PDF.  Рассматривается последовательность создания кода меню с внутренними ссылками для перемещения по соде...

План-конспект открытого урока. Специальность 09.02.05 Прикладная информатика (по отраслям) Тема урока: «Создание сайта с использованием HTML + CSS»

Тема  программы: «Создание гипертекстовых документов».  Вид занятия: Урок учебной практике.Тип и вид урока: Комбинированный урок обучения умениям и навыка.Методы обучения: нагляд...

Создание гиперссылок в HTML

Разработка урока по теме "Создание гиперссылок в HTML " с презентацией....

План-конспект учебного занятия по теме "Создание навигационных карт средствами HTML"

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