Урок 3. Редактирование текста. Создание таблицы Практическая работа №3

Урок 3. Редактирование текста. Создание таблицы
Практическая работа №3
1. Откройте Блокнот (Notepad ++, Dreamweaver).
2. Откройте файл «index.html» с предыдущего урока.
3. Измените код, чтобы он соответствовал коду, который показан на
рисунке 1:
Рис.1. Html код
4. Сохраните файл с именем index и с расширением .html (index.html). Не
забудьте поменять тип файла на «Все файлы».
5. Откройте в любом браузере (должно получиться, как показано на
рисунке 2):
Рис.2. Отображение кода в браузере
6. Откройте снова документ в блокноте.
7. Посмотрите на выравнивание текста.
8. Отредактируйте текст. Сделайте выравнивание по центру для тега
<h1>. Для тега <h2> и <h3> сделайте выравнивание по ширине. Для
тега <h4> и <h5> сделайте выравнивание по левому краю. А для тега
<h6> выравнивание по правому краю.
9. Сравните полученный результат с рисунком 3.
Рис.3. Отображение html-кода в браузере
10. Откройте снова блокнот.
11. Отредактируйте код следующим образом (рис.4):
Рис.4. html-код
12. Сохраните файл.
13. Откройте в браузере. Посмотрите, что произошло со строчкой, в
которой используется тег <br>.
14. Сравните результат с рисунком 5.
Рис.5. Отображение кода в браузере
15. Откройте блокнот.
16. Измените код следующим образом (рис.6):
Рис.6. html-код
17. Сохраните файл.
18. Откройте в браузере. Посмотрите, как текст выглядит в тегах <cite>,
<dfn> <em><i>.
19. Сравните полученный свой результат с рисунком 7.
Рис.7. Отображение файла в браузере
20. Откройте файл в блокноте.
21. Отредактируйте код (рис. 8)
Рис. 8. Html-код
22. Сохраните файл.
23. Откройте файл в браузере. Посмотрите, как выглядит текст, который
написан в тегах <strong> и <b>. Сравните их.
24. Сравните полученный результат с рисунком 9.
Рис.9. Отображение файла в браузере
25. Откройте файл в блокноте.
26. Измените код (рис.10):
Рис.10. html-код
27. Сохраните файл.
28. Откройте в браузере.
29. Посмотрите, как отображается текст, который написан в тегах <ins> и
<u>. Сравните их.
30. Сравните полученный свой результат с рисунком 11.
Рис.11. Отображение файла в браузере
31. Откройте блокнот.
32. Измените код (рис.12):
Рис.12. html-код
33. Сохраните файл.
34. Откройте в браузере.
35. Посмотрите на отображение текста, который написан в теге <sup> и
<sub>. Сравните их.
36. Сравните полученный свой результат с рисунком 13.
Рис.13. Отображение файла в браузере
37. Откройте файл.
38. Измените код (рис.14):
Рис. 14. Html-код
39. Сохраните файл.
40. Откройте файл в браузере.
41. Проанализируйте код. Сравните результат с рисунком 15:
Рис.15. Отображение файла в браузере
42. Поэкспериментируйте с размером шрифта, с цветом, с названием
шрифта. Введите различные значения.
43. Используя тег <center> сделайте выравнивание всех элементов по
центру браузера.
44. Сравните результат с рисунком 16:
Рис.16. Выравнивание элементов по центру браузера
45. А теперь попробуем совместное использование тегов. Сделать слово
«Текст» жирным красным и курсивом одновременно.
Выделим слово «текст» красным цветом:
<font color=”red”>Текст</font>
Теперь добавим теги курсива (открывающий – слева, закрывающий –
справа):
<em><font color=”red”>Текст</font></em>
А теперь – теги полужирного начертания.
<strong><em><font color=”red”>Текст</font></em></strong>
В окне браузера это будет выглядеть так (рис. 17):
Рис.17. Отображение файла в браузере
Каждый раз все предыдущие теги мы помещаем в новые. Это и называется
порядком вложенности. Вы можете использовать разные теги для
оформления текста, главное не нарушать порядок вложенности.
46. Теперь попробуем нарисовать горизонтальную линию, применяя тег
<hr>. Набираем следующий код (рис.18):
Рис.18. html-код
47. Сохраняем файл и открываем в браузере.
48. Сравниваем результат с рисунком 19:
Рис.19. Отображение файла в браузере
49. Если нам нужно сохранить все пробелы и отступы в тексте, то мы
используем тег <pre>. Открываем снова блокнот и набираем следующий
код (рис.20):
Рис.20. html-код
50. Сохраняем файл и открываем в браузере.
51. Сравниваем результат с рисунком 21:
Рис.21. Отображение файла в браузере
Создание таблиц
52. Откройте блокнот.
53. Наберите следующий код (рис.22):
Рис.22. Создание таблицы
54. Сохраните файл и откройте его в браузере. Посмотрите на результат.
Должно получиться как показано на рисунке 23:
Рис.23. Отображение в браузере
55. А теперь будем ее украшать. Дополняем наш код (рис.24):
Рис.24. html-код
56. Сохраняем и открываем в браузере. Сравниваем с рисунком 25:
Рис.25. Отображение файла в браузере
57. Таблица прижата к левому краю окна, также, как и текст в ней.
Исправим это, добавив еще три параметра (рис.26):
Рис.26. html-код
58. Сохраняем файл и открываем в браузере. Сравниваем результат с
рисунком 27:
Рис.27. Отображение файла в браузере
59. Редактируем таблицу дальше. Редактируем наш код (рис.28):
Рис.28. html-код
60. Сохраняем код и открываем в браузере. Сравниваем результат с
рисунком 29:
Рис.29. Отображение файла в браузере
61. Добавьте в код, в тег <td> параметр bgcolor=”red”.
<td bgcolor=”red”>
21 Здесь текст прижат к левому краю по горизонтали и к низу – по
вертикали
</td>
В теги <th> следующие параметры:
<tr>
<th width=”50” height=”50”>1</th>
<th width=”30%”>2</th>
<th width=”20%”>3</th>
</tr>
62. Сохраните файл и посмотрите результат в браузере (рис.30):
Рис.30. Отображение файла в браузере
63. Потренируйтесь создавать и оформлять таблицы.