Практическая работа по теме «Язык разметки гипертекста HTML

реклама
Практическая работа по теме
«Язык разметки гипертекста HTML»
1. Откройте текстовый редактор Блокнот (Пуск → Все программы → Стандартные – Блокнот)
2. Наберите текст будущего HTML-документа – вашей персональной web-страницы.
<html>
<head>
<title> Моя личная страница </title>
</head>
<body>
Фамилия Имя Отчество. Место учебы. Я выбрал(а) данную специальность, потому что ….
(дополните предложение).
</body>
</html>
3. Сохраните файл в личной папке для этого:
В меню Файл щелкните Сохранить как.
A. В открывшемся окне Сохранение документа щелкните на списке Папка и выберите
свою папку
B. В поле Имя файла: введите index.htm
C. В поле Тип файла выберите Все файлы
D. Щелкните кнопку Сохранить.
4. Откройте Internet Explorer
A. В меню Файл выберите команду Открыть
B. В открывшемся окне нажмите кнопку Обзор
C. В открывшемся окне Открытие документа, щелкните на списке Папка и выберите свою
папку
D. Выделите файл index.htm
E. Щелкните кнопку Открыть
5. Просмотрите созданную вами WEB-страницу
6. Вернитесь в Блокнот, щелкнув на панели задач соответствующую кнопку, и добавьте тэги
заголовков следующим образом:
<h1> Фамилия Имя Отчество </h1>
<h2> Место учебы </h2>
7. Сохраните изменения (Файл → Сохранить)
8. Просмотрите изменения, для этого:
A. Вернитесь в окно Internet Explorer, щелкнув на панели задач соответствующую кнопку
B. Щелкните на кнопке Обновить
9. Вставьте тэги <br> перевода строки, чтобы текст выглядел в три строки
Мой проект <br>
будет называться <br>
……………………
!!! после каждого изменения файл полезно сохранять и просматривать
Сохраните изменения в файле командой Файл – Сохранить
Перейдите в окно Internet Explorer
Обновите информацию в окне Internet Explorer командой Вид – Обновить или
кнопка на панели инструментов Обновить
10. Измените начертание текста на курсив, заключив его в тэги, например,
<i> Фамилия Имя Отчество </i>
11. Измените фон и цвет текста на странице, для этого в тэг <body> допишите атрибуты bgcolor и
text
<body bgcolor=aqua text=green>
12. Измените цвет отдельных слов, например,
<font color=red> ИТ </font>
13. После заголовков (после </h2>) вставьте красную горизонтальную линию по центру шириной
10 пикселей, занимающую половину ширины экрана
<hr width=50% size=7 color=red>
14. Установите размер шрифта
<font size=5> Место учебы </font>
15. Перед вторым заголовком (перед <h2>) вставьте рисунок, используя тэг <img> с
альтернативным текстом «фирменный знак» (alt), шириной –65, высотой –60 пикселей, с
отступами по горизонтали и вертикали (hspace, vspace)
<img src=" имя файла.расширение " alt="фирменный знак" height=60
width=65 hspace=10 vspace=10>
16. Расположите заголовки c рисунком по центру, заключив в тэги
<center><h1>…</h2> </center>
17. Из папки с рисунками скопируйте в свою папку понравившийся файл с фоном, запомните его
имя.
Измените фон страницы, используя свой файл. Тэг <body> теперь будет выглядеть так:
<body bgcolor=aqua text=green background= имя_картинки.расширение >
18. Вставьте маркированный список
<ul> Мои увлечения - это:
<li>Одно увлечение
<li>Еще увлечение
<li>Самое новое увлечение
</ul>
19. Дополните страницу нумерованным списком (после маркированного списка):
<оl type=1> Мои любимые предметы:
<li>Самый любимый предмет
<li>Еще один предмет
<li>И еще один предмет
</оl>
20. Создайте по образцу еще одну страницу с информацией о семье или о группе. Для упрощения
работы можно выполнить следующие действия в программе Блокнот:
A. Файл → Сохранить как…
B. Измените имя файла на новое_имя.htm
C. Тип файла – Все файлы
D. Кнопка Сохранить
21. Внесите изменения в теле файла, заменив новой информацией прежний текст.
A. Перейдите в окно Блокнота (новое_имя.htm)
B. Добавьте тэги оформления
22. Не забывайте сохранять изменения!
23. Вставьте в файл новое_имя.htm гипертекстовую ссылку для связи созданных страниц
<a href=" новое_имя.htm">На мою личную страницу</а>
24. Для отправки электронного письма на e-mail адрес, указанный в HTML - документе, оформите
ссылку таким образом:
<a href="mailto:имя_ящика@имя_почтового_сервера">Пишите письма</A>
Дополнительно








<b></b> - жирный текст
<i></i> - выделяет текст курсивом
<big></big> - крупный текст
<small></small> - малый текст
<sub></sub> - нижний индекс.
<sup></sup> - верхний индекс
<h№></h№> - заголовок
<center></center> - центрирование текста








<p> - новый абзац
o <p align=left> - выравнивает абзац по левому краю, может быть right (по правому краю),
center (по центру), justify (по ширине страницы)
o <p title= "Подсказка про абзац"> - всплывающая подсказка при наведении мыши на абзац
<font></font> - определяет выводимый шрифт, его цвет и размер
o <font color= "green"> - задает зеленый цвет текста
o <font face=Arial> - задает гарнитуру шрифта типа Arial
o <font size=7> - задает размер шрифта (от 1 до 7)
<body></body> - обязательный тэг
o <body text="#cc0000"> - задает цвет текста всего документа (если вы знаете названия
различных оттенков цвета по-английски, то можете использовать эти слова вместо кодов)
o <body bgcolor="#000000"> - задает цвет фона документа
o <body background="картинка.jpg"> - задает фоновую картинку
o <body link="#ff9999"> - задает цвет ссылки
o <body alink="#ff9999"> - задает цвет активной (нажатой) ссылки
o <body vlink="#ff9999"> - задает цвет посещенной ссылки
o <body topmargin=20> - определяет ширину верхнего и нижнего полей документа для IE
o <body leftmargin=40> - определяет ширину левого и правого полей документа для IE
<br> - перенос строки (принудительный)
<a href="другая_страница.htm"></a> - ссылка
<hr> - линия
o <Hr align="right"> (center или left)
o <Hr width="30%"> (ширина линии в процентах)
o <Hr size="6"> (толщина линии)
o <Hr NoShade> (отмена объемности)
o <Hr color="cc0000"> (цвет линии, только в IE)
<img src="ваша_картинка.расширение"> - рисунок
o Border="0" - рамки вокруг картинки нет, вернее есть, но ее ширина равна нулю
o width="500" - ширина картинки (можно указать только один параметр – ширину или
высоту, другой изменится автоматически)
o height="100" - высота картинки
o align="left" - расположение картинки по отношению к тексту (right, top, middle, left, bottom)
o vspace="10" - расстояние от картинки до текста по вертикали
o hspace="30" - расстояние от картинки до текста по горизонтали
o alt="описание" - описание картинки
<ol type=1> - список, в котором строки пронумерованы арабскими цифрами
o <ol type= A> - нумерация заглавными буквами
o <ol type= a> - нумерация строчными буквами
o <ol type= I > - нумерация заглавными римскими буквами
Скачать