Автор: Кортикова Ольга Михайловна
Должность: учитель информатики
Учебное заведение: МОУ "СОШ №32"
Населённый пункт: город Магнитогорск, Челябинская область
Наименование материала: Практические работы
Тема: Основы языка HTML
Раздел: полное образование
2019г. МОУ «СОШ №32», г. Магнитогорск Кортикова Ольга Михайловна
Практическая работа №1 «Основы языка HTML»
1.Запустите Блокнот и наберите следующий текст:
<HTML>
<HEAD>
<TITLE>Первая страница Иванова Ивана</TITLE>
</HEAD>
<BODY>
Привет!
</BODY>
</HTML>
2. Сохраните файл с именем «Фамилия.HTML»
3. Сверните Блокнот и откройте этот файл при помощи Браузера. (Щелкните по этому
файлу мышкой, и он автоматически откроется в Браузере).
4. После слова «Привет!» добавьте следующую фразу :
<P ALIGN="center">
Текст выровненный по центру
</P>
Изменяя параметр center на:
left
(по левой границе)
right
(по правой границе)
center (по центру)
!!! Для того, что бы новая фраза выводилась с новой строки, используйте тег <BR> после
каждого фрагмента. !!!
добейтесь, что бы браузер выводил следующий текст:
5. После последнего выровненного текста добавьте фразу:
<FONT COLOR=red
SIZE=6>
Как дела?
</FONT>
Изменяя Red
и
цифру
:
на red,
green,
blue,
magenta,
black и др. цвета и значения
добейтесь, что бы браузер выводил следующий текст разными цветами:
1
Текст, выровненный по центру,
Текст, прижатый к левому краю,
Текст, прижатый к правому краю.
«Скажи-ка, дядя, ведь не даром
Москва, спаленная пожаром,
Французу отдана?
Ведь были ж схватки боевые?
2019г. МОУ «СОШ №32», г. Магнитогорск Кортикова Ольга Михайловна
6. Используя таблицу физической разметки
курсив
<I>Пример</I>
Пример
жирный
<B>Пример</B>
Пример
подчеркивание
<U>Пример</U>
Пример
зачеркнутый
<S>Пример</S>
Пример
верхний индекс
Пример<SUP>2</SUP>
Пример
2
нижний индекс
Пример<SUB>2</SUB>
Пример
2
и предыдущие теги , добейтесь, что бы браузер выводил следующий текст:
Практическая работа №2 «Основы языка HTML»
Списки.
1.Запустите Блокнот и наберите следующий текст:
<HTML>
<HEAD>
<TITLE>Вторая страница Иванова Ивана</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
2. Сохраните файл с именем «Фамилия_2.HTML»
3. Сверните Блокнот и откройте этот файл при помощи Браузера. (Щелкните по этому
файлу мышкой, и он автоматически откроется в Браузере).
4. После первого слова <BODY> добавьте следующую фразу :
2
Да, говорят, еще какие!
Не даром помнит вся Россия
Про день Бородина!»
Формула ДИСКРИМИНАНТА D=b
2
-4ac
Формула ВОДЫ H
2
O
Формула РАЗНОСТЬ КВАДРАТОВ a
2
-b
2
=(a-b)(a+b)
2019г. МОУ «СОШ №32», г. Магнитогорск Кортикова Ольга Михайловна
<UL>
<LI> Первый пункт списка </LI>
<LI> Второй пункт списка </LI>
<LI> Третий пункт списка </LI>
</UL>
5. Сохраните файл и откройте его при помощи браузера. На экране должен появиться
маркированный список.
6. Измените данный фрагмент следующим образом и убедитесь, что все по-прежнему
работает.
<UL TYPE="disk" >
<LI> Первый пункт списка
<LI> Второй пункт списка
<LI> Третий пункт списка
</UL>
Изменяя "disk" на circle и square посмотрите как изменяется вид маркеров.
7. После этого фрагмента добавьте следующий текст:
<OL>
<LI> Первый пункт списка
<LI> Второй пункт списка
<LI> Третий пункт списка
</OL>
Сохраните файл, откройте его в браузере и убедитесь, что появился нумерованный список.
8. Измените его следующим образом:
<OL TYPE=i START=3>
<LI> Первый пункт списка
<LI> Второй пункт списка
<LI> Третий пункт списка
</OL>
Изменяя i на 1, i,
I,
a,
A убедитесь, меняется вид нумерации, а изменяя цифру 3 можно
установить любой начальный номер.
9. Если внутрь нумерованного списка добавить маркированный, следующим образом:
<OL TYPE="1" START="2">
<LI> Пункт два </LI>
<UL>
<LI> Первый пункт списка
<LI> Второй пункт списка
<LI> Третий пункт списка
</UL>
<LI> Пункт три </LI>
<LI> Пункт четыре </LI>
</OL>
То на экране должен получится комбинированный список:
2.
Пункт два
o
Первый пункт списка
o
Второй пункт списка
o
Третий пункт списка
3.
Пункт три
4.
Пункт четыре
Задание 1
10. Задание для самостоятельного выполнения:
3
2019г. МОУ «СОШ №32», г. Магнитогорск Кортикова Ольга Михайловна
Используя вложение списков, получите следующий текст в окне браузера:
1. Собаки:
Немецкая овчарка
Лайка
Спаниель
Московская сторожевая
Гончая
Шпиц
Тузик
2. Кошки:
Сиамская
Корниш-рекс
Шотландская вислоухая
Барсик
Практическая работа №3 «Основы языка HTML»
Таблицы.
1.Запустите Блокнот и наберите следующий текст:
<HTML>
<HEAD>
<TITLE>Третья страница Иванова Ивана</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
2. Сохраните файл с именем «Фамилия_3.HTML»
3. Сверните Блокнот и откройте этот файл при помощи Браузера. (Щелкните по
этому файлу мышкой, и он автоматически откроется в Браузере).
4. После первого слова <BODY> добавьте следующую фразу :
<TABLE BORDER="1">
<TR>
<TD>Ячейка 1</TD>
<TD>Ячейка 2</TD>
<TD>Ячейка 3</TD>
</TR>
</TABLE>
5. Сохраните файл и откройте его при помощи браузера. На экране должна
появиться таблица из одной строки.
6.
Измените
данный
фрагмент
следующим
образом
и
убедитесь,
что
таблица
увеличилась в размерах.
<TABLE BORDER="1"
WIDTH="1000"
HEIGHT="300">
Изменяя цифры 1000 и 300 посмотрите, как изменяются размеры таблицы.
7. После этого фрагмента добавьте в начало таблицы следующий текст:
BGCOLOR="green"
ALIGN="center">
4
2019г. МОУ «СОШ №32», г. Магнитогорск Кортикова Ольга Михайловна
Сохраните файл, откройте его в браузере и убедитесь, что цвет таблицы изменился
и она выровнялась по центру.
8. Измените описание ячейки следующим образом:
<TD><FONT COLOR="white">Ячейка 1</FONT></TD>
Убедитесь, что цвет текста в первой ячейке стал белым.
9. Измените описание ячейки следующим образом
<TD BGCOLOR="red"><FONT COLOR="white">Ячейка
1</FONT></TD>
Убедитесь, что фон первой ячейки стал красным.
Задание
10. Задание для самостоятельного выполнения:
Используя изученные теги, постройте следующую таблицу и раскрасьте ее в
разные цвета.
Наименование
Цена
Количество
Стоимость
Компьютер
25000 руб.
2 шт.
50000 руб.
Принтер
8000 руб.
2 шт.
16000 руб.
Сканер
3000 руб.
1 шт.
3000 руб.
Практическая работа №4 «Основы языка HTML»
Гиперссылки.
1.Запустите Блокнот и наберите следующий текст:
<HTML>
<HEAD>
<TITLE>Четвертая страница Иванова Ивана</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
2. Сохраните файл с именем «Фамилия_4.HTML»
3. Откройте графический редактор Paint. Установите размеры рисунка 300 х 200
пикселей и нарисуйте, что ни будь напоминающее следующий рисунок.
Рисунок сохраните под именем Familie.jpg (имя файла на английском языке).
4. После первого тега <BODY> вставьте следующее выражение:
<IMG SRC=" Familie.jpg">
Запустите браузер и убедитесь, что рисунок отображается в браузере.
5. Вставьте следующую фразу:
<P ALIGN="center">
<FONT COLOR=red
SIZE=6>
5
2019г. МОУ «СОШ №32», г. Магнитогорск Кортикова Ольга Михайловна
Оглавление моего сайта.
</FONT>
</P>
Сохранитесь, и запустите браузер, на экране должна появиться фраза «Оглавление
сайта» красного цвета выровненная посредине.
6. Перед закрывающим тегом </P> вставьте тег отображающий гиперссылку.
<BR>
<A HREF="Фамилия_1.html">Практическая работа № 1</A>
Обратите внимание на правильное написание имени файла первой страницы.
Сохранитесь и убедитесь, что гиперссылка работает правильно.
7. Подобным образом добавьте ссылки на две другие работы.
8. В трех предыдущих файлах после первого тега <BODY> добавьте:
<BR>
<A HREF="Фамилия_4.html">На главную</A>
Убедитесь, что гиперссылки работают
6