Ученики на Учителя.com


Практическая работа "Основы языка HTML"

2022г. МОУ «СОШ №32», г. Магнитогорск Кортикова Ольга Михайловна
1
Текст, выровненный по центру,
Текст, прижатый к левому краю,
Текст, прижатый к правому краю.
«Скажи-ка, дядя, ведь не даром
Москва, спаленная пожаром,
Французу отдана?
Ведь были ж схватки боевые?
Практическая работа №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 и др. цвета и значения
добейтесь, что бы браузер выводил следующий текст разными цветами:
2022г. МОУ «СОШ №32», г. Магнитогорск Кортикова Ольга Михайловна
2
Формула ДИСКРИМИНАНТА D=b
2
-4ac
Формула ВОДЫ H
2
O
Формула РАЗНОСТЬ КВАДРАТОВ
a
2
-b
2
=(a-b)(a+b)
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> добавьте следующую фразу :
Да, говорят, еще какие!
Не даром помнит вся Россия
Про день Бородина!»
2022г. МОУ «СОШ №32», г. Магнитогорск Кортикова Ольга Михайловна
3
<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. Задание для самостоятельного выполнения:
2022г. МОУ «СОШ №32», г. Магнитогорск Кортикова Ольга Михайловна
4
Используя вложение списков, получите следующий текст в окне браузера:
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">
2022г. МОУ «СОШ №32», г. Магнитогорск Кортикова Ольга Михайловна
5
• Сохраните файл, откройте его в браузере и убедитесь, что цвет таблицы изменился
и она выровнялась по центру.
• 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>
2022г. МОУ «СОШ №32», г. Магнитогорск Кортикова Ольга Михайловна
6
• Оглавление моего сайта.
• </FONT>
•
• </P>
• Сохранитесь, и запустите браузер, на экране должна появиться фраза «Оглавление
сайта» красного цвета выровненная посредине.
• 6. Перед закрывающим тегом </P> вставьте тег отображающий гиперссылку.
•
• <BR>
• <A HREF="Фамилия_1.html">Практическая работа № 1</A>
•
• Обратите внимание на правильное написание имени файла первой страницы.
Сохранитесь и убедитесь, что гиперссылка работает правильно.
• 7. Подобным образом добавьте ссылки на две другие работы.
• 8. В трех предыдущих файлах после первого тега <BODY> добавьте:
•
• <BR>
• <A HREF="Фамилия_4.html">На главную</A>
•
• Убедитесь, что гиперссылки работают
Скачать материал

Информатика - еще материалы к урокам: