Практическая работа по информатике для 11 класса «Создание Web-сайта на языке HTML»
Практическая работа по информатике для 11 класса «Создание Web-сайта на языке HTML»
Практическая работа по информатике для 11 класса
«Создание Web-сайта на языке HTML»
Цель работы: научиться создавать Web-сайтов с использованием языка разметки текста HTML в простом тестовом редакторе Блокнот
Ход практической работы:
Задание 1
Загрузите Блокнот и создайте HTML-документ вида:
<HTML>
<HEAD>
</HEAD>
<BODY>
Драматические театры Санкт-Петербурга
</BODY>
</HTML>
2. Сохраните документ в папке своего класса с именем glavn.html.
3. Загрузите браузер и откройте файл. На экране появится текст: «Драматические театры Санкт-Петербурга»
4. В тексте вставьте несколько символов  .
Драматические театры Санкт-Петербурга
Каждый раз как только вносите изменения в HTML-документ, обязательно делайте сохранение со старым именем и сворачивайте окно программы Блокнот, а в окне браузера Internet Explorer делайте Обновить (клавиша F5).
Вы уже знаете о суперспособностях современного учителя?
Тратить минимум сил на подготовку и проведение уроков.
Быстро и объективно проверять знания учащихся.
Сделать изучение нового материала максимально понятным.
Избавить себя от подбора заданий и их проверки после уроков.
Просмотр содержимого документа
«Практическая работа по информатике для 11 класса «Создание Web-сайта на языке HTML»»
Практическая работа по информатике для 11 класса
«Создание Web-сайта на языке HTML»
Цель работы: научиться создавать Web-сайтов с использованием языка разметки текста HTML в простом тестовом редакторе Блокнот
Ход практической работы:
Задание 1
Загрузите Блокнот и создайте HTML-документ вида:
HTML
HEAD
HEAD
BODY
Драматические театры Санкт-Петербурга
BODY
HTML
2. Сохраните документ в папке своего класса с именем glavn.html.
3. Загрузите браузер и откройте файл. На экране появится текст: «Драматические театры Санкт-Петербурга»
4. В тексте вставьте несколько символов  .
Драматические театры Санкт-Петербурга
Каждый раз как только вносите изменения в HTML-документ, обязательно делайте сохранение со старым именем и сворачивайте окно программы Блокнот, а в окне браузера Internet Explorer делайте Обновить (клавиша F5).
5. Сделайте часть текста жирно, курсивом и с новой строки:
BODY
BДраматические театрыBBR
IСанкт-ПетербургаI
BODY
6. Измените размет и цвет фразы «Драматические театры»:
BДраматические театрыB BR
FONT
IСанкт-ПетербургаI
BODY
8. Самостоятельно измените размет и цвет фразы «Санкт-Петербурга».
Задание 2
1. Откройте в окне браузера из своей папки файл glavn.htm. Выровняйте весь заголовок по центру и сделайте его красным цветом, размер шрифта - 5, создайте голубой фон и желтый цвет текста
BGCOLOR=BLUETEXT=YELLOW
BДраматические театрыB BR
IСанкт-ПетербургаI
FONT
P
BODY
2. Дополните документ
BGCOLOR=BLUE TEXT=YELLOW
BДраматические театрыB BR
IСанкт-ПетербургаI
FONT
P
PALIGN=LEFT
H1Драматический театрим.КомиссаржевскойH1
H2Малый драматический театр «Европа»H2
H3Драматический театрна ЛитейномH3
H4Большой драматический им.Товстоногова/H4
P
BODY
Задание 3
Создайте текстовый документ , имеющий следующее оформление:
Если рисунок окажется слишком маленьким, поэкспериментируйте с соответствую щими атрибутами.
2. Самостоятельно создайте HTML-документы для всех театров, называя их a1.htm, a2.htm, a3.htm, a4.htm, взяв за основу файл glavn.htm. Измените заголовок, фотографию театра, вместо списка театров вставьте небольшой текст про театр и выровняйте его по ширине. Фотографии театров и текст берите из Интернета. Фотографии театров сохраняйте в своей папке. Копирование фрагментов текста из Интернета осуществляйте через опции «Копировать» и «Вставить».
3. Сохраняйте, созданные Вами файлы a1.htm, a2.htm, a3.htm, a4.htm в папке своего класса.
Практическое задание №4
Оформление списка театров на главной странице glavn.htm, как гиперссылки на соотвествующие Web-страницы театров
1. Списки с названиями театров в файле glavn.htm оформите как гиперссылки:
LIAHREF=”a2.htm” Малый драматический театр «Европа»A
LIAHREF=”a3.htm” Драматический театрна ЛитейномA
LIAHREF=”a4.htm” Большой драматический театр им.Товстоногова AOL
2. Самостоятельно на всех HTML-страницах, посвященных театрам, создайте гиперссылку для возврата на гланую страницу, написав в конце текста:
AHREF=”glavn.htm” На главнуюA
3. Оставшееся время посвяшаем дооформлению Web-страниц про театры.
У вас должен получиться простенький сайт про драматические театры С-Петербурга, проверьте, как он работает.
Практичекое задание №5
Создание навигации по сайту в виде таблицы из одной строки
1. Создайте таблицу из одной строки на всю ширину экрана с названиями театров (для дальнейшего оформления навигации по сайту) в файле glavn.htm. Теги по созданию таблицы напишите сразу после BODY:
Главная
т-рим.Комиссаржевской
МДТ «Европа»
т-рнаЛитейном
БДТим.Товстоногова
TR
TABLE
2. Самостоятельно текст в таблице оформите как гиперссылки на соответствующиек файлы a1.htm, a2.htm, a3.htm, a4.htm. (Смотри урок №4).
3. Созданную таблицу с гиперссылками скопируйте на все с Web-страницы: a1.htm, a2.htm, a3.htm, a4.htm Проверьте, как работаю гиперссылки. Сайт о драматических театрах С-Петербуга с навигацией в виде списков и в таблицах – готов.
3. Домашнее задание: определитесь с темой, по которой будете создавать собственный сайт, по возможности, подберите материал.
Примерные темы проекта: «Мосты через Неву», «Реки и каналы Санкт-Петербурга», «Мосты через каналы Санкт-Петербурга», «Необычные музеи Санкт-Петербурга», «Музыкальные театры», «Филармонии и капелла», «Технические ВУЗ-ы Санкт-Петербурга», «Детские театры Санкт-Петербурга», «Гуманитарные ВУЗ-ы Санкт-Петербурга», «Пригороды Санкт-Петербурга», «Музеи Санкт-Петербурга», «Военные учебные заведения в Санкт-Петербурге» т.п.
