Цели:
Образовательная:
научиться создавать Web-страницы в блокноте.
Воспитательная:
воспитание информационной культуры учащихся, внимательности, аккуратности, дисциплинированности, усидчивости.
Развивающая:
развивать наглядно-образное мышление, память и умение сравнивать и анализировать.
Тип занятия: комбинированный
Технические средства: компьютеры
Программное обеспечение: операционная система Windows, тестовая программа,
программа блокнот, браузер Mozilla Firefox
План урока:
I. Орг. момент.
II. Актуализация знаний.
III. Практическая работа.
Тест.
IV. Домашнее задание
V. Итог урока.
Ход урока:
I. Орг. момент.
Приветствие, проверка присутствующих. Объяснение хода занятия.
II. Актуализация знаний.
Web — это средство представления информации в Интернете. Информация может быть представлена в виде текстов, рисунков, аудио и видеоклипов. В то же время, Web — это технология доступа к информационным ресурсам Интернета, размещенным на множестве Web-серверов.
Как работает браузер: интерпретация HTML документа
В целом, Web — это гипертекстовая информационная среда, использующая принятый язык разметки гипертекста и поддерживающая различные протоколы Интернета для доступа к его информационным ресурсам. Любой протокол — это набор правил, которые используются компьютерами для обмена информацией. Среди протоколов Интернета самый распространенный — HTTP (Hyper Text Transfer Protoсol). Используются FTP (для присоединения и загрузки файлов), FILE (для доступа к файлам на локальных дисках), протокол для электронной почты и некоторые другие.
Язык HTML (HyperText Markup Language, язык разметки гипертекста) — это язык, на котором создаются Web-страницы. HTML-документы могут просматриваться различными типами Web-браузеров. Когда документ создан с использованием HTML, Web-браузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей.
Web-страницы могут быть созданы с помощью
1) обычного текстового редактора;
2) редактора, способного сохранять в формате HTML;
3) специализированного редактора;
4) специализированной системы.
HTML-документы сохраняются на диске как обычные текстовые документы в формате ASCII. Для распознавания Web-страниц по их именам общепринято обозначать такие файлы использованием расширений .HTM (для Windows 3.1) или .HTML (для Windows 95/98/NT/XP, Macintosh и Unix).
Кроме полезного текста в HTML-документах используются специальные управляющие последовательности символов — тэги.
Чаще всего тэги используются попарно, окружая размеченные фрагменты текста. Такие тэги называются контейнерами. Закрывающийся тэг отличается от начального только присутствием символа «/», добавляемого перед именем тэга. При интерпретации тэгов браузер не делает различия между строчными и прописными буквами. Поэтому сами тэги можно набирать на любом регистре.
Как добавить прогресс выполнения задачи в html? Прогресс бар в html
Зачастую параметр (атрибут) является необязательной величиной и его можно пропускать.
III. Практическая работа.
1. Откройте программу Блокнот (Пуск-Программы-Стандартные-Блокнот).
2. Напишите следующий текст(карточки):
Государственные символы
Государственный Герб Республики Казахстан
Авторы герба — два известных архитектора Казахстана, Жандарбек Малибеков и Шот-Аман Валиханов
4 июня 1992 года навсегда останется в истории и в памяти народа как день рождения Государственного Герба Республики Казахстан
Сегодняшний Герб суверенного Казахстана является результатом огромного труда, творческих исканий двух известных архитекторов: Жандарбека Малибекова и Шоты Уалиханова, выиграть в этом соревновании было нелегко.
Достаточно напомнить, что только в финальном конкурсе принимали участие 245 проектов и 67 описаний будущего герба.
• Обратите внимание, что есть отрытые теги (например
) и закрытые теги (например или )
• Первый и главный тег — который сообщает браузеру, что сайт написан на языке HTML.
• Тег является заголовочной частью документа и помещается сразу после тега .
• Тег текст позволяет дать имя странице, которое будет отображаться в строке заголовка Вашего браузера.
• Между тегами содержится тело документа — текст, таблицы, рисунки.
• Теги и соответственно заголовки 1-го и 2-го уровней.
• Тег текст позволяет выровнять текст, помещенный внутри него, по центру страницы.
• В HTML бегущая строка определяется тегами .
Атрибут BEHAVIOR=»» – определяет тип движения текста. При значении alternate текст движется слева направо, достигнув края, меняет направление. При значении scroll бегущая строка, достигнув края, появляется с противоположной стороны. При значении slide бегущая строка останавливается у противоположного края страницы.
Атрибут DIRECTION=»» – определяет направление движения текста. Значение down определяет движение текста вниз. Значение up определяет движение текста вверх. При значении left бегущая строка движется справа налево. При right – слева направо.
• Таким же образом может перемещаться изображение:
• Для вставки картинки в страницу применяется тег .
Для указания пути к картинке в теге используется параметр SRC=
Вот так будет выглядеть код HTML, при помощи которого можно вставить картинку в страницу HTML:
(при условии: страница и картинка находятся в одной папке). WIDTH=»» – определяет ширину изображения в пикселях. HEIGHT=»» – определяет высоту изображения в пикселях. ALT=»» – определяет альтернативный текст.
• Тег
указывает на новый абзац. Тег
указывает на закрытие нового абзаца. ALIGN=»LEFT» – определяет выравнивание текста слева (по умолчанию).
3. Сохраните документ в своей папке:
o Файл-Сохранить Как
o Укажите свою папку
o Дайте имя файлу index.html
4. Откройте файл с помощью Mozilla Firefox и просмотрите результат.
IV. Тест
1. Кто выполняет HTML-программу?
а) Браузер
б) Человек
в) Компилятор
г) Операционная система
2. Записывая на HTML абзац, между двумя соседними словами вы поставили пять пробелов. Сколько пробелов вы увидите в браузере?
а) Пять
б) Один
в) Ни одного
г) Два
3. Голова документа задается тегами:
4. Записывая на HTML свое имя, вы написали так:
Государственный
Герб
Как покажет этот текст браузер?
а) В одну строку с одним пробелом
б) В одну строку с двумя пробелами
в) В две строки
г) Не покажет вовсе
5. HTML (HYPER TEXT MARKUP LANGUAGE) является:
а) Одним из средств при создании Web-страниц
б). Системой программирования
в). Графическим редактором
г). Системой управления базами данных
6. Какие команды способны изменить цвет шрифта.
а) команда .
б) команда .
в) команда .
г) команда
.
7. Web-страница (документ HTML) представляет собой:
а) Текстовый файл с расширением txt или doc
б). Текстовый файл с расширением htm или html
в) Двоичный файл с расширением com или exe
г) Графический файл с расширением gif или jpg
Источник: muratbaeva.ucoz.com
Тест ответы
В коде HTML, записывая абзац, Вы между двумя словами поставили пять пробелов. Сколько пробелов Вы увидите в браузере?
Варианты ответов:
Вопрос №3 (ID — 227) Тип: Закрытая форма: верен только один вариант из всех
Текст на HTML выглядит следующим образом:
Как покажет этот текст браузер?
Варианты ответов:
В одну строку с двумя пробелами
В одну строку с одним пробелом
Не покажет вовсе
Вопрос №4 (ID — 228) Тип: Закрытая форма: верно несколько вариантов из всех
Какие из программ задают вывод текста в две строки? (т.е. слова должны быть в разных строках)
Варианты ответов:
Пришла осень.
Вопрос №5 (ID — 229) Тип: Закрытая форма: верен только один вариант из всех
Какой тег способен изменить цвет фона всего документа?
Варианты ответов:
Вопрос №6 (ID — 230) Тип: Закрытая форма: верно несколько вариантов из всех
Какие теги способны изменить цвет шрифта?
Варианты ответов:
Вопрос №7 (ID — 231) Тип: Закрытая форма: верен только один вариант из всех
Каким тегом выделяются небольшие цитаты и текстовые ссылки?
Варианты ответов:
.
Вопрос №8 (ID — 233) Тип: Открытая форма: безвариантный тип вопроса
Запишите тег (без символов «< >»), при помощи которого можно увеличить размер шрифта.
Правильные ответы:(через запятую): big
Вопрос №9 (ID — 234) Тип: Открытая форма: безвариантный тип вопроса
Запишите тег (без символов «< >»), при помощи которого можно уменьшить размер шрифта
Правильные ответы:(через запятую): small
Вопрос №10 (ID — 235) Тип: Открытая форма: безвариантный тип вопроса
Запишите тег, предназначенный для усиления элементов текста (как правило, полужирным шрифтом). (без символов «< >»)
Правильные ответы:(через запятую): b, strong
Вопрос №11 (ID — 237) Тип: Открытая форма: безвариантный тип вопроса
При помощи какого атрибута тега P> можно изменить выравнивание абзаца по горизонтали?
Правильные ответы:(через запятую): align
Вопрос №12 (ID — 238) Тип: Открытая форма: безвариантный тип вопроса
Запишите значение параметра атрибута «align» тега для выравнивания абзаца по центру.
Правильные ответы:(через запятую): center
Вопрос №13 (ID — 239) Тип: Открытая форма: безвариантный тип вопроса
Запишите значение параметра атрибута «align» тега для выравнивания абзаца по правому краю.
Правильные ответы:(через запятую): right, rigth
Вопрос №14 (ID — 240) Тип: Открытая форма: безвариантный тип вопроса
Правильные ответы:(через запятую):
Вопрос №15 (ID — 241) Тип: Открытая форма: безвариантный тип вопроса
Как вывести символ «>» на экран браузера (чтобы он не воспринимался браузером как элемент тега)?
Правильные ответы:(через запятую): >, >
Вопрос №16 (ID — 242) Тип: Открытая форма: безвариантный тип вопроса
Какой тег служит для создания маркированного списка(без символов «< >»)?
Правильные ответы:(через запятую): ul
Вопрос №17 (ID — 243) Тип: Открытая форма: безвариантный тип вопроса
Какой тег служит для создания нумерованного списка(без символов «< >»)?
Правильные ответы:(через запятую): ol
Вопрос №18 (ID — 244) Тип: Открытая форма: безвариантный тип вопроса
Запишите значение параметра атрибута «align» тега для выравнивания абзаца по левому краю.
Правильные ответы:(через запятую): left
Вопрос №19 (ID — 245) Тип: Закрытая форма: верен только один вариант из всех
Какая из программ формирует список следующего вида:
Источник: studfile.net
Что такое HTML-программа? a) документ на экране браузера; b) интернетовская Web–страница; c) текст на языке HTML; d) список тегов. 1. — презентация
Презентация на тему: » Что такое HTML-программа? a) документ на экране браузера; b) интернетовская Web–страница; c) текст на языке HTML; d) список тегов. 1.» — Транскрипт:
1 Что такое HTML-программа? a) документ на экране браузера; b) интернетовская Web–страница; c) текст на языке HTML; d) список тегов. 1
2 Кто выполняет HTML- программу? a) человек; b) браузер; c) компилятор; d) Windows. 2
4 Укажите тег, который указывает на начало основного содержания web- страницы a) b) c) d)
5 Укажите тег, который указывает на начало основного содержания web- страницы a) b) c) d)
6 Создание Web-сайта на языке HTML
7 Привет! Атрибуты тега Значение атрибута Тег — специальная метка в начале и в конце элемента HTML — документа
8 bgcolorцвет фона html- страницы textустанавлив ает цвет текста html- документа Атрибуты..
9 backgro und позволяет задать в качестве фона html-страницы картинку Атрибуты..
11 Абзац ……. Атрибуты: Align=left – выравнивание по левому краю Align=right — выравнивание по правому краю Align=center — выравнивание по центру Align=justify — выравнивание по ширине
13 … АтрибутОпределениеЗначение SIZEОпределяет размер шрифта 1, 2, 3, 4, 5, 6, 7. COLOR Определяет цвет текста. #00000 Red, black….. FACEОпределяет используемый шрифт. Times New Roman, Arial, Tahoma, Courier, Courier New
15 ТегОпределение Переход на новую строку.. Подчеркнутый текст.. Жирный текст.. Текст курсивом
16 С помощью какого тега можно задать абзац в тексте? Что задает тег ?
17 Практическая работа3.7 «Интернет: создание Web- сайта на языке HTML» (стр.72) Цель работы: освоение приёмов создания Web-страниц на языке HTML; знакомство с элементами HTMLи структурой HTML- документа
19 Index.html Страничка Компьютерной школы ПГУ Koмпьютерная школа ПГУ 19
20 Index.html История создания Преподаватели 20
21 Index.html Kypcы 21
23 История Компьютерной школы ПГУ История создания 23
24 History.htm Компьютерная школа была основана в сентябре 1994 года. Первый набор учеников составил 100 человек. В 1995 году в школе появилось старшее, а в 1996 году — младшее отделение. 24
27 Исправить Index.html Страничка Компьютерной школы ПГУ Koмпьютерная школа ПГУ 27
28 Исправить Index.html История создания Преподаватели 28
29 Index.html Страничка Компьютерной школы ПГУ Koмпьютерная школа ПГУ 29
30 Index.html История создания Преподаватели Курсы Приветствуем Вас на нашей странице 30
Источник: www.myshared.ru