- •Практическое занятие № 1. Создание html – документов в текстовом редакторе Блокнот. Структура документа, форматирование, работа со шрифтами.
- •Практическое занятие № 2. Создание html – документов в текстовом редакторе Блокнот. Работа со списками и гиперссылками.
- •Откройте текстовый редактор Блокнот (Пуск Программы Стандартные Блокнот).
- •Практическое занятие № 3. Создание html – документов в текстовом редакторе Блокнот. Работа с таблицами.
- •Откройте текстовый редактор Блокнот (Пуск Программы Стандартные Блокнот).
- •Практическое занятие № 4. Создание html – документов в текстовом редакторе Блокнот. Работа с изображений.
- •Откройте текстовый редактор Блокнот (Пуск Программы Стандартные Блокнот).
В свой рабочей папке создайте папку с именем 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)
Откройте текстовый редактор Блокнот (Пуск Программы Стандартные Блокнот).
Сохраните документ с имением doc4.html в папке С:\Winnt\Profiles\Ваше_имя_пользователя (Для этого в окне сохранения файла выберете в поле тип файла пункт «Все файлы», в поле имя файла вручную введите имя и расширение).
Введите следующий HTML – код: <HTML > <HEAD> <TITLE>Работа с рисунками </TITLE> </HEAD> <BODY background="images/04.gif" link="braun" alink="braun"> </BODY> </HTML>
В теле документа вставьте рисунок и текст : <p><img src="images/01.gif"> 1. HTML - язык разметки гипертекста, который является одним из приложений SGML. Изначально, HTML, как и положено SGML- приложению, разделял все особенности идеологии SGML.
Сохраните документ. Просмотрите его в браузере. (Для этого откройте браузер и в адресной строке наберите полный путь к файлу или просто наберите С: а далее открывайте папки действуя, как в Проводнике).
В тег img добавьте атрибуты width="50" height="100".
Сохраните документ. Перейдите в окно браузера и обновите страницу. Проанализируйте изменения. Вернитесь в окно Блокнота.
В тег img добавьте атрибуты alt="Рисунок 1" Выполните действия шага 8 и продолжайте выполнять задания, следующие за данным пунктом.
Добавьте еще два рисунка с соответствующим текстом: <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 и продолжайте выполнять задания, следующие за данным пунктом.
В теги вставки изображения добавьте атрибуты align co значениями “bottom” “middle” “top” для первого, второго и третьего рисунка соответственно. Выполните действия шага 8 и продолжайте выполнять задания, следующие за данным пунктом.
Измените значения атрибута align в первом и третьем рисунке на значение “left”, а во втором – на значение “right” Выполните действия шага 8 и продолжайте выполнять задания, следующие за данным пунктом.
В теги вставки первого рисунка добавьте атрибуты vspace="40" hspace="40" Выполните действия шага 8 и продолжайте выполнять задания, следующие за данным пунктом.
В конце документа вставьте еще один рисунок <img src="images/05.gif" >. А затем информацию о себе как о создателе документа: <p> Документ составил Иванов А.А. <br>Е-mail: <a href= mailto:\\IvanovАА@info.sgu.ru>IvananAA@info.sgu.ru</a> Выполните действия шага 8 и продолжайте выполнять задания, следующие за данным пунктом.
Теперь сверстаем станицу с рисунками с помощью таблицы. Скопируйте текст из окна Блокнота (текст документа doc4.html). Создайте новый документ в Блокноте. Вставьте текст из буфера. Сохраните документ с имением doc5.html в папке С:\Winnt\Profiles\Ваше_имя_пользователя.
Удалите атрибуты 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 и продолжайте выполнять задания, следующие за данным пунктом.
В тег вставки таблицы вставьте атрибуты 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 и продолжайте выполнять задания, следующие за данным пунктом.
Удалите атрибут border из тега table. В тег <img src="images/05.gif" >, который должен находиться непосредственно после закрывающего тега table вставьте атрибут width=”70%”. Выполните действия шага 8 и продолжайте выполнять задания, следующие за данным пунктом.
В ссылке на 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 и продолжайте выполнять задания, следующие за данным пунктом.
В тег ><img src="images/06.gif" > добавьте атрибуты align=”middle” border=”0”. Выполните действия шага 8 и покажите созданный документ преподавателю.