2020-05-25
165САМОСТОЯТЕЛЬНАЯ РАБОТА
Тема: «Форматирование текста в HTML-документах.»
Задание № 1: Добавьте в документ proba1.htm тэги, с помощью которых можно задать цвет фона и шрифта, различное начертание шрифта, выравнивание.
1. Откройте созданный документ proba1.htm из своей папки, в заголовке окна браузера высвечивается название Web-страницы – Первое знакомство с тэгами HTML. Сверните это окно на Панель задач, для просмотра изменений в своей Web-странице необходимо выполнять команду Вид – Обновить.
2. Допечатав в свой документ тэги, выделенные жирным шрифтом, задайте цвет шрифта для всего текста и цвет фона документа:
<!DOCTYPE HTML PUBLIC@-//W3C//DTD HTML 4.01 Transitional//EN”
@http://www.w3.org/TR/html4/loose.dtd”>
<HTML>
<HEAD>
<TITLE> Первое знакомство с тэгами HTML </TITLE>
</HEAD>
<BODY TEXT=”#0000FF” BGCOLOR=”#808080” >
3. Допечатав тэги, выровняйте заголовки по центру и сделайте второй заголовок красного цвета:
<CENTER>
<H1> Моя личная страница. </H1>
<H2> <FONT COLOR="#FF0000"> Давайте познакомимся. </FONT> </H2>
<H3> Немного о себе: </H3>
</CENTER>
4. Допечатав тэги, измените толщину и цвет горизонтальной разделительной линии:
<HR SIZE="5" COLOR="#FFD800" >
<OL>
<LI> Моё имя… </LI>
<LI> Мой адрес… </LI>
<LI> Контактные координаты… </LI>
</OL>
<HR>
5. Допечатайте текст, выровняйте его по ширине, применив тэги-параграфы для выравнивания; добавьте цветную горизонтальную разделительную линию:
<P ALIGN="JUSTIFY">
Я совсем недавно начал(а) знакомиться с виртуальной жизнью. Мне тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они смогли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомиться со мной и у меня появится ещё один виртуальный друг?:)
</P>
<HR SIZE="5" COLOR="#FFD800">
6. Допечатайте тэги для увеличения отступов маркированного списка:
<UL>
<LI> До встречи. </LI>
<UL> <LI> Спасибо за внимание. </LI> </UL>
<UL><UL> <LI> Продолжение следует! </LI> </UL></UL>
</UL>
7. Используйте тэг <BR> для переноса текста на другую строку, сделайте разноцветными примеры начертания шрифта:
<HR>
<FONT COLOR="#00FFFF"> Обычный текст </FONT>
<BR>
<FONT COLOR="#FFFF00"> <B> Жирный </B> </FONT>
<BR>
<FONT COLOR="#000000"> <I> Курсив </I> </FONT>
<BR>
<FONT COLOR="#00FF00"> <U> Подчеркнутый </U> </FONT>
<BR>
<FONT COLOR="#FF00FF"> <B><I><U> Жирный подчеркнутый курсив </B></I></U> </FONT>
<HR SIZE="5" COLOR="#FFD800"></BODY>
</HTML>
8. Сохраните изменения в файле proba1.htm.
Задание № 2: Составить свое резюме по следующему плану (в общей сложности 4 – 5 строчек, вместо многоточий и пояснений в скобках вставить свои данные):
Я, … (ФИО), родился … (дата и год рождения) в городе … (место, где родились).
В 20… году окончил … школу (лицей, гимназию) с углубленным изучением …, средний балл аттестата...
В 20… году поступил(а) на специальность … ГБОУ СПО «Медицинский колледж № 5, г. Урюпинск». Средний балл по первым сессиям ( аттестациям ) …
В свободное от учебы время увлекаюсь … ( перечислить не менее трех увлечений помимо учебы ).
Мои приятели в группе: …( перечислить не менее трех фамилий из группы ).
Выполнение
1. Подготовьте бланк для HTML-кода Вашего резюме. Для этого следует:
1) выполнить команду Пуск ® Программы ® Стандартные ® Блокнот ® Файл® Сохранить как …;
2) в окне Сохранение документа открыть свою папку. В поле Имя ввести Резюме Фамилия. html (вместо Фамилия, естественно, должна стоять Ваша фамилия), нажать кнопку Сохранить.
Если все сделано правильно, то в папке появится этот файл со значком обозревателя, в противном случае – со значком блокнота. Тогда следует удалить созданный файл и повторить все снова.
2. Введите в созданный документ стандартные теги:
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Теги набираются в английском регистре. Для ускорения и облегчения набора желательно активно пользоваться командами копирования и переноса информации.
3. Внутри контейнера <BODY> напечатайте свое резюме. Выполните команду Файл® Сохранить.
4. Посмотрите, как выглядит набранный текст без «украшательств». Для этого следует открыть созданный файл из своей папки.
5. Проведите первую коррекцию кода. Для этого следует:
1) не закрывая Explorer, перейти в окно Блокнота;
2) вставить в контейнер <HEAD> …</HEAD> контейнер
<TITLE> Резюме ФИО </TITLE>
(вместо ФИО, естественно, должна стоять Ваша фамилия);
3) выполнить команду Файл® Сохранить;
4) перейти в окно Explorer;
5) нажать кнопку Обновить.
Посмотрите, как повлиял тег <TITLE > на информацию в заголовке Explorer.
6.Проведите вторую коррекцию кода. Для этого следует:
1) не закрывая обозреватель, перейти в окно Блокнота;
2) в открывающий тег <BODY> вставить атрибуты TEXT и BGCOLOR, значения цветов выбрать самим.
3) выполнить Файл® Сохранить;
4) перейти в окно Explorer;
5) нажать кнопку Обновить.
Посмотрите, как изменился вид информации в окне Explorer.
Если какой-то атрибут «не сработал», значит, допущены ошибки в написании английских слов или пропущены пробелы между атрибутами. Следует найти ошибки и повторить цикл коррекции кода.
Итак, один цикл коррекции кода включает следующие действия: внесение и сохранение исправлений в окне блокнота, переход в окно Explorer и обновление его информации кнопкой Обновить или командой Вид® Обновить. В дальнейших пунктах инструкции будут просто указываться изменения, которые следует внести в код, а все остальные действия перечисляться не будут.
7. Проведите третью коррекцию кода. Для этого следует:
1) после раздела «ФИО, где и когда родился», поставить тег абзаца <P>;
2) после раздела «какую школу кончил, средний балл аттестата» – тег разрыва строки <BR>;
3) перед разделом «увлечения помимо учебы» вставить в код тег горизонтальной линии <HR>.
Посмотрите через Explorer, в чем разница действий тегов <P> и <BR>, как действует тег <HR> со значениями атрибутов по умолчанию.
8. Измените вид шрифтов в разных частях резюме. Для этого следует контейнером <H1> выделить свою фамилию, контейнером <I> – город, где Вы родились, контейнером <H6> – информацию о школе, контейнером <FONT> с атрибутами SIZE=7 COLOR=RED – информацию о специальности, контейнером <FONT> с атрибутами SIZE=1 COLOR=GREEN – информацию о приятелях, контейнером <В> выделить какое-нибудь увлечение.
Просмотрите через Explorer, как действуют эти теги.
9. Оформите часть текста в виде списка. Для этого следует контейнером <OL> выделить блок об увлечениях, разбить его на пункты тегами <LI> Аналогично контейнером <UL> и тегами <LI> оформить в виде маркированного списка перечень Ваших приятелей.
Посмотрите, как выглядят стандартные списки.
10. Измените нумерацию в списке. Для этого с помощью атрибутов TYPE и START поменяйте нумерацию в списке.
Посмотрите, как изменится стандартный нумерованный список при новых атрибутах.
Таблица тэгов для форматирования текста
| ТЭГИ | НАЗНАЧЕНИЕ |
| <hl></hl> … <hl></hl> | Задает размер заголовка |
| <pre></ pre > | Обрамляет предварительно отформатированный текст |
| <b></b> | Жирное начертание шрифта |
| <i></i> | Начертание Курсив |
| <tt></tt> | Имитация стиля печатной машинки |
| <cite></cite> | Используется для цитат, обычно наклонный текст |
| <strong></ strong > | Используется для выделения наиболее важных частей текста (наклонный и жирный текст) |
| <font size=…></font> | Устанавливает размер текста в пределах от 1 до 7 |
| <font color=…></font > | Устанавливает цвет текста, используя значение цвета в виде |
| <p> | Начало нового абзаца |
| <p align=…> | Выравнивает абзац относительно одной из сторон документа, значения: |
| <br> | Вставляет перевод строки |
| <blockquote> </ blockquote> | Создает отступы с обеих сторон текста. |
| <ol></ol> | Создает нумерованный список |
| <li> | Определяет каждый элемент списка и присваивает номер |
| <ul></ul> | Создает ненумерованный список |
| <a href=”URL”></a> | Создает гиперссылку на другие документы или часть текущего документа |
4.2. Создание веб-страницы в Блокноте (HTML-2)
1. Запустить программу Проводник. В своей папке создать папку лабораторной работы HTML-2.
2. Запустить браузер Internet Explorer.
3. Установить пустую домашнюю веб-страницу (about-blank), если она не установлена, на вкладке Общие (Сервис/Свойства обозревателя), а затем обновить (кнопка Домой).
4. Открыть содержимое пустой веб-страницы в Блокноте (Вид/В виде HTML). Вставить между тэгами <HTML></HTML> структурные тэги области заголовка и тела страницы. Для справки открыть предварительно скопированный в свою папку файл … / Tutorial.htm.
5. Сохранить модифицированную веб-страницу в папке HTML-2 как файл с именем Web-страница ФамилияИмя.htm.
Внимание! Во избежание потери данных при сбоях формируемый файл время от времени сохранять в той же папке.
6. Перейти в окно браузера, открыть файл (Файл/Открыть/Обзор).
7. Перейти в Блокнот. Вставить между тэгами области заголовка тэги <TITLE></TITLE>, между ними написать название страницы. Сохранить файл.
8. Перейти в браузер, обновить изображение страницы (Вид/Обновить или кнопка Обновить или F5). Посмотреть, где в окне браузера отобразилось название страницы.
Внимание! Все дальнейшие изменения просматривать таким же образом.
9. В открывающем тэге области основного текста страницы (тела веб-документа) задать цвет фона и текста. Для задания цвета использовать текстовый формат: red, green, blue, yellow, black, white и т.д.
10. Между тэгами области основного текста вставить заголовки
· 1-го уровня: Фамилия Имя;
· 2-го уровня: Биографическая справка, Профессиональные интересы, Хобби.
11. В разделе Биографическая справка вставить текст, задавая переход на новую строку: Дата рождения: дд.мм.гг., Место Рождения: …, Адрес: г. … ул. …д. …, Телефон:000-00-00, Е-mail: aaa@bbb.ccc.
12. В разделе Профессиональные интересы написать текст, отформатировав его аналогичным образом, например: Работаю:…Учусь на факультете… Специальность:… Специализация:… Владею иностранным языком:…Имею опыт:… Особые умения:… Хочу получить работу:…
13. В разделе Хобби создать несколько разделов в виде маркированного списка, например:
· Спорт;
· Искусство;
· Рукоделия.
14. Запустить Word. Cоздать в своей папке файлы: Спорт.html, Искусство. html, Рукоделия. html, кратко написав в них о своих увлечениях.
15. Слова раздела Хобби сделать гиперссылками на одноименные файлы.
16. Сохранить полученную страницу. Закрыть созданные файлы. Проверить работоспособность ссылок в браузере.
17. В конце раздела вставить картинку, предварительно выбрав или в папке Мои документы/Мои рисунки (или Пуск/Найти) и сохранив как файл в своей папке.
18. Запустить графический редактор. Нарисовать стилизованный автопортрет и сохранить его в своей папке. Вставить это изображение после заголовка 1-го уровня, указав параметры размеров, выравнивание и др.
19. Сохранить последний раз полученную страницу. Предъявить работу преподавателю.
