Практическая работа по теме «Язык разметки гипертекста HTML
advertisement
Практическая работа по теме «Язык разметки гипертекста 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 > - нумерация заглавными римскими буквами
