Практическая работа №1.
Тема: Создание простейшего HTML-документа. Форматирование шрифта и абзаца
Цель работы:
· Научиться создавать простейший гипертекстовый документ средствами текстового редактора Блокнот.
· Научиться использовать теги форматирования шрифта и абзаца.
Задание на выполнение
1. Создать файл с гипертекстовым документом:
· Запустить редактор Блокнот, ввести текст:
Приветствую Вас на моей первой web-страничке!
· Сохранить файл в созданной папке. При сохранении, в окне диалога Сохранить как… в строке Тип файла: выбрать вариант Все файлы (*.*) , а в строке Имя файла задать имя с расширением .html, например 1_name.html(где name – ваше имя)
· Закрыть документ, найти его пиктограмму в окне Мой компьютер или в окне программы Проводник.
· Открыть файл. Проанализировать, с помощью какого приложения отображается файл и как выглядит введенная фраза.
2. Ввести теги, определяющие структуру html-документа:
· С помощью контекстного меню открыть файл с помощью редактора Блокнот. Ввести приведенные ниже теги, в разделе заголовка документа (между тегами <TITLE></TITLE>)указать свою фамилию.
<HTML>
<HEAD><TITLE>Фамилия</TITLE>
</HEAD>
<BODY>
Приветствую Вас на моей первой web-страничке!
</BODY>
</HTML>
· Сохранить документ под тем же именем, обновить его отображение в браузере (выполнить Вид/Обновить или нажать кнопкуОбновить на панели инструментов). Проанализировать произошедшие изменения в отображении документа.
3. Отредактировать документ:
· Вызвать меню браузера Вид/Просмотр HTML-кода и добавить после текста «Приветствую Вас на моей первой web-страничке!» текст подписи:
Студент группы NNN Фамилия Имя
Сохранить документ (но не закрывать) и обновить его просмотр в браузере.
· Используя одиночный тег<BR>, отредактировать документ так, чтобы подпись начиналась с новой строки, а Фамилия Имя – в следующей строке. Просмотреть в браузере новый вариант.
Внимание! После каждого изменения документ нужно сохранять, а просмотр в браузере начинать с обновления загрузки документа с помощью кнопки «Обновить» на панели инструментов.
4. Оформить фрагменты текста с помощью стилей Заголовков:
· Первую строку документа оформить стилем Заголовок 1-го уровня с помощью парного тега <H1> …</H1>. Вторую строку оформить как Заголовок 6-го уровня, а третью как Заголовок 4-го уровня.
· Просмотреть документ в браузере, изменяя настройку отображения шрифтов (меню Вид / Размер шрифта / Самый крупный, Средний, Мелкий и Самый мелкий).
· Поменять стиль оформления первой строки на Заголовок 2 уровня, второй строки - на Заголовок 5 уровня, последней строки - на Заголовок 3-го уровня.
5. Выполнить форматирование шрифта:
· После строки Фамилия Имя добавить еще одну строку текста
Нас утро встречает прохладой
· Оформить фразу по приведенному ниже образцу.
В слове УТРО все буквы должны иметь разные цвета. В слове ПРОХЛАДОЙ оформить буквы ПРО – красным цветом, ОЙ – синим.
· Оформить строку с подписью (Студент группы NNN Фамилия Имя) курсивом, размер шрифта задать относительным изменением. Использовать теги <FONTSIZE=«+2»>и<I>
· Просмотреть полученный документ в браузере.
6. Выполнить форматирование абзацев:
· Создать новый документ 2_name.html, сохранить его в той же рабочей папке.
· Ввести текст (использовать копирование текста из документа 1_name.html):
<HTML>
<HEAD><TITLE>Фамилия</TITLE>
</HEAD>
<BODY>
Приветствую Вас на моей второй web-страничке! <BR> Монолог Гамлета
</BODY>
</HTML>
· Выровнять текст по центру.
· Ввести текст:
Быть иль не быть - вот в чем вопрос. Что благороднее: сносить удары неистовой судьбы - иль против моря невзгод вооружиться, в бой вступить. И все покончить разом...
· Оформить выравнивание абзаца по ширине.
· Ограничить абзац горизонтальными разделительными линиями сверху и снизу, используя тег <HR>.
· Скопировать монолог и разбить его на абзацы. Выровнять по центру.
Быть иль не быть - вот в
чем вопрос.
Что благороднее: сносить удары
Неистовой судьбы - иль против моря
Невзгод вооружиться, в бой вступить
И все покончить разом...
· Сохранить документ.
· Просмотреть документ в окне браузера, изменяя размер окна.
7. Выполнить оформление списков:
· Создать новый документ 3_name.htm, сохранить его в той же рабочей папке жесткого диска.
· Ввести текст:
<HTML>
<HEAD><TITLE>Фамилия</TITLE>
</HEAD>
<BODY>
Приветствую Вас на моей третьей web-страничке!
</BODY>
</HTML>
·
Дополнить текст документа (между тегами
<BODY>…</BODY>) следующим текстом:
Я знаю как оформлять:
Шрифты,
Заголовки,
Абзацы
· Оформить три последние строки как список нумерованный. Для этого использовать следующую конструкцию тегов:
<OL>
<LI> Шрифты, </LI>
<LI> Заголовки, </LI>
<LI> Абзацы </LI>
</OL>
· Поменять оформление списка на список маркированный. Использовать теги <UL>, </UL>
8. Предъявить результаты работы преподавателю.
Скачано с www.znanio.ru
Практическая работа №1. Тема:
Отредактировать документ: ·
HTML> <HEAD><TITLE> Фамилия </TITLE> </
Я знаю как оформлять: Шрифты,
© ООО «Знанио»
С вами с 2009 года.
