1. В свой рабочей папке создайте папку с именем images. Скопируйте в нее с дискеты (папка images) преподавателя файлы 01.gif, 02.gif, 03.gif, 04.gif, 05.gif, 06.gif.
Примечание. Для выполнения задания вы также можете воспользоваться любыми файлами с расширением.gif или.jpeg, которые найдете на вашем компьютере. Их них три рисунка должны быть прямоугольной формы (сохраните их с именем 01.gif, 02.gif, 03.gif), один рисунок должен быть текстурой (он используется в качестве фона, сохраните его с именем 04.gif), один рисунок должен быть длинной полосой (он будет играть роль разделителя, сохраните его с именем 05.gif), один рисунок должен быть маленьким прямоугольником (он будет играть роль пиктограммы письма, сохраните его с именем 06.gif)
2. Откройте текстовый редактор Блокнот (Пуск® Программы® Стандартные® Блокнот).
3. Сохраните документ с имением doc4.html в папке С:\Winnt\Profiles\Ваше_имя_пользователя (Для этого в окне сохранения файла выберете в поле тип файла пункт «Все файлы», в поле имя файла вручную введите имя и расширение).
4. Введите следующий HTML – код:
<HTML >
<HEAD>
<TITLE>Работа с рисунками </TITLE>
</HEAD>
<BODY background="images/04.gif" link="braun" alink="braun">
</BODY>
</HTML>
5. В теле документа вставьте рисунок и текст:
<p><img src="images/01.gif"> 1. HTML - язык разметки гипертекста, который является одним из приложений SGML. Изначально, HTML, как и положено SGML- приложению, разделял все особенности идеологии SGML.
6. Сохраните документ. Просмотрите его в браузере. (Для этого откройте браузер и в адресной строке наберите полный путь к файлу или просто наберите С: а далее открывайте папки действуя, как в Проводнике).
7. В тег img добавьте атрибуты width="50" height="100".
8. Сохраните документ. Перейдите в окно браузера и обновите страницу. Проанализируйте изменения. Вернитесь в окно Блокнота.
9. В тег img добавьте атрибуты alt="Рисунок 1"
Выполните действия шага 8 и продолжайте выполнять задания, следующие за данным пунктом.
10. Добавьте еще два рисунка с соответствующим текстом:
<p><img src="фон/02.gif" width="150" height="100" alt="Рисунок 2">
2. HTML - язык разметки гипертекста, который является одним из приложений SGML. Изначально, HTML, как и положено SGML- приложению, разделял все особенности идеологии SGML.
<p><img src="фон/03.gif" width="150" height="100" alt="Рисунок 3">
3. HTML - язык разметки гипертекста, который является одним из приложений SGML. Изначально, HTML, как и положено SGML- приложению, разделял все особенности идеологии SGML.
Выполните действия шага 8 и продолжайте выполнять задания, следующие за данным пунктом.
11. В теги вставки изображения добавьте атрибуты align co значениями “bottom” “middle” “top” для первого, второго и третьего рисунка соответственно.
Выполните действия шага 8 и продолжайте выполнять задания, следующие за данным пунктом.
12. Измените значения атрибута align в первом и третьем рисунке на значение “left”, а во втором – на значение “right”
Выполните действия шага 8 и продолжайте выполнять задания, следующие за данным пунктом.
13. В теги вставки первого рисунка добавьте атрибуты vspace="40" hspace="40"
Выполните действия шага 8 и продолжайте выполнять задания, следующие за данным пунктом.
14. В конце документа вставьте еще один рисунок <img src="images/05.gif" >. А затем информацию о себе как о создателе документа:
<p> Документ составил Иванов А.А.
<br>Е-mail: <a href= mailto:\\IvanovАА@info.sgu.ru>IvananAA@info.sgu.ru</a>
Выполните действия шага 8 и продолжайте выполнять задания, следующие за данным пунктом.
15. Теперь сверстаем станицу с рисунками с помощью таблицы. Скопируйте текст из окна Блокнота (текст документа doc4.html). Создайте новый документ в Блокноте. Вставьте текст из буфера. Сохраните документ с имением doc5.html в папке С:\Winnt\Profiles\Ваше_имя_пользователя.
16. Удалите атрибуты vspace="40" hspace="40" из тега вставки рисунка 01.gif. Из всех тегов вставки рисунка удалите атрибут align. Расположите текст и рисунки в ячейках таблицы следующим образом
<table border=2> (Мы устанавливаем границу для наглядности, позже мы ее уберем)
<tr >
<td ><img src="фон/01.gif" width="150" height="100" alt="Рисунок 1" align= left>
<td >1. HTML - это язык разметки гипертекста, который является одним из приложений SGML. Изначально, HTML, как и положено SGML- приложению, разделял все особенности идеологии SGML.
</tr>
<tr>
<td >2.HTML - это язык разметки гипертекста, который является одним из приложений SGML. Изначально, HTML, как и положено SGML- приложению, разделял все особенности идеологии SGML.
<td ><img src="фон/02.gif" width="150" height="100" alt="Рисунок 2" >
</tr>
<tr>
<td ><img src="фон/03.gif" width="150" height="100" alt="Рисунок 3" >
<td >3.HTML - это язык разметки гипертекста, который является одним из приложений SGML.Изначально, HTML, как и положено SGML- приложению, разделял все особенности идеологии SGML.
</tr>
</table>
Выполните действия шага 8 и продолжайте выполнять задания, следующие за данным пунктом.
17. В тег вставки таблицы вставьте атрибуты width=”90%” align=” center”. В первой и третьей строки таблицы вставьте атрибуты widht=”20%” и colspan=”2” в тег первой и второй ячеек соответственно, то есть
<tr >
<td widht=20%>……………
<td colspan=2>……………..
</tr>.
Во вторую строку таблицы вставьте атрибуты colspan=”2” и widht=”20%” в тег первой и второй ячеек соответственно, то есть
<tr >
<td colspan=2>…………….
<td widht=20%>……………
</tr>.
Выполните действия шага 8 и продолжайте выполнять задания, следующие за данным пунктом.
18. Удалите атрибут border из тега table. В тег <img src="images/05.gif" >, который должен находиться непосредственно после закрывающего тега table вставьте атрибут width=”70%”. Выполните действия шага 8 и продолжайте выполнять задания, следующие за данным пунктом.
19. В ссылке на e-mail автора документа вместо текста IvanovАА@info.sgu.ru вставьте рисунок <img src="images/06.gif"> Таким образом информация об авторе документа должна выглядеть следующим образом:
<p> Документ составил Иванов А.А.
<a href= mailto:\\ivanovaa@info.sgu.ru><img src="images/06.gif"> </a>.
Выполните действия шага 8 и продолжайте выполнять задания, следующие за данным пунктом.
20. В тег ><img src="images/06.gif" > добавьте атрибуты align=”middle” border=”0”. Выполните действия шага 8 и покажите созданный документ преподавателю.