Создание HTML – документа
Симонова Татьяна Адлеровна
учитель информатики
МОУ «Лицей №3»
г.Прохладный КБР
Задание№1.
Создайте в
редакторе Блокнот HTML - документ с текстом «Этот
небольшой сайт посвящен семье Ивановых..»
Сохраните его в своей рабочей папке под именем
index.htm и просмотрите
его в браузере.
Цель упражнения.
Изучение основ языка HTML.
Знакомство со структурой HTML – документа.
Порядок выполнения.
- Запустите Блокнот.
- Введите:
<HTML>
<HEAD>
<TITLE>Сайт семьи Ивановых</TITLE>
</HEAD>
<BODY>
Этот небольшой сайт посвящен семье Ивановых.
</BODY>
</HTML>
- Сохраните документ под именем index.htm в своей рабочей папке.
- Просмотрите сохраненный документ в браузере Internet
Explorer.
- Практические рекомендации.
1.
Запустите Блокнот, щелкнув кнопку Пуск и выбрав
Программы/ Стандартные/ Блокнот.
2.
Введите теги обозначения HTML
– документа < HTML > < /HTML>
между которыми должен располагаться весь остальной код.
3.
Так как HTML – документ
состоит из двух частей (заголовочной и кода), между открывающим и закрывающим
тегами < HTML > введите открывающие и закрывающие
теги заголовочной части (<HEAD> и </HEAD>)
и тела документа (<BODY> и </BODY>).
Примечание.
Проследите, чтобы теги были вложены друг в
друга. Помните, что строчное или прописное начертание букв в тегах не имеет
значение, а также то, разделены ли они строками, пробелами или табуляцией.
Отступы используем только для удобочитаемости программы.
4. Внутри заголовочной части
документа впишите титул
<TITLE> Сайт семьи Ивановых </TITLE>
5.
В теле документа неформатированный текст пишется без тегов:
Этот небольшой сайт
посвящен семье Ивановых.
6. Теперь ваш документ должен
выглядеть так
<HTML>
<HEAD>
<TITLE>Сайт семьи Ивановых</TITLE>
</HEAD>
<BODY>
Этот небольшой сайт
посвящен семье Ивановых
</BODY>
</HTML>
7. Сохраните файл под именем index.htm в своей рабочей папке,
воспользовавшись командой Файл/Сохранить как.
Выберите Все файлы чтобы корректно
сохранить HTML - файл
|
|
Обязательно укажите расширение файла
|
|
Примечание.
По умолчанию Блокнот сохраняет
документы с расширением .txt независимо от
того, что указано в поле Имя файла диалогового окна Сохранить как.
Чтобы сохранить файл с расширением .htm необходимо
в списке Тип файлов этого окна предварительно выбрать Все файлы,
а затем в поле Имя файла указать имя с расширением, например index.htm.
Если HTML – файл сохранен
правильно, то в окне папки будет сопоставлен значок
Просмотр сохраненной страницы.
1. Запустите Internet Explorer
2.
В меню Файл щелкнуть Открыть.
3.
Щелкнуть кнопку Обзор. В списке папок выберите
свою рабочую папку, а в ней – файл - index.htm.Щелкнуть кнопку Открыть.
4.
Изучите открывшийся документ. Найдите, где
отображается текст, помещенный в тегах <TITLE>
Создание
простейшего сайта. Гиперссылки
Задание №2
Скопируйте файл index.htm
дважды, назвав получившиеся файлы semya.htm, dostihenia.htm, peremena.htm. Свяжите все файлы гиперссылками. Проверьте
работу файла.
Цель упражнения.
Изучение основ HTML.
Освоение приемов связывания HTML – страниц гиперссылками.
Порядок выполнения
- Скопируйте файл index.htm.
- Переименуйте скопированный файл в semya.htm
- Скопируйте еще раз файл index.htm. и назовите его dostihenia.htm
- Скопируйте еще раз файл index.htm. и назовите его peremena.htm
- Запустите Блокнот и откройте файл index.htm.
Примечание.
По умолчанию в диалоговом окне Открыть,
вызываемой по команде Файл/Открыть, отображается только текстовый
документ. Чтобы найти и открыть HTML – файл в списке Тип
файлов этого окна предварительно следует выбрать Все файлы.
Выберите Все файлы, чтобы открыть HTML - файл
|
|
- Дополните документ ссылками на файлы semya.htm,
dostihenia.htm, peremena.htm. Для этого введите в тело
документа теги.
- Теперь ваш документ должен выглядеть так:
<HTML>
<HEAD>
<TITLE>Сайт семьи Ивановых
</TITLE>
</HEAD>
<BODY>
Этот небольшой сайт посвящен семье Ивановых.
<a rel="nofollow ugc" target="_blank" href="semya.htm">Наша семья</a>
<a rel="nofollow ugc" target="_blank" href="dostihenia.htm">Наши достижения</a>
<a rel="nofollow ugc" target="_blank" href="peremena.htm">Это интересно</a>
</BODY>
</HTML>
- Сохраните файл.
- Откройте в Блокноте файл semya.htm.
- Дополните его ссылкой на главную страницу (index.htm), вписав в тело следующий текст
<br><a
rel="nofollow ugc" target="_blank" href="index.htm">Вернуться на главную
страницу</a></br>
- Измените титул
<TITLE>Наша
семья </TITLE>
12.Сохраните файл.
- Повторите шаги 9-12 для файлов dostihenia.htm, peremena.htm
В качестве титула
напишите
<TITLE>Наши
достижения </TITLE>
<TITLE>Это
интересно</TITLE>
- Откройте в Internet Explorer файл
index.htm.
- Щелкните ссылку Наша семья.
Проследите по титулу, что открылась нужная страница.
- Щелкнуть ссылку Вернуться на главную
страницу. Проследите по титулу, что вы вернулись на главную страницу.
(index.htm)
- Проверьте работу ссылок Наша семья, Наши
достижения, Это интересно.
Форматирование абзацев
Задание №3
Добавьте в файл semya.htm
заголовок первого уровня, абзац, выровненный по правому краю, и несколько
строк, разделенных без создания абзаца.
Цель упражнения.
Изучение основ HTML
Освоение тегов
форматирование абзацев.
Порядок
выполнения.
1.
Запустите Блокнот и откройте файл peremena.htm.
2.
Дополните тело документа заголовком, для чего
введите следующий текст
<h1>Наши
фотографии</h1>
3.
Теперь ваш документ должен выглядеть так
<HTML>
<HEAD>
<TITLE>Это интересно</TITLE>
</HEAD>
<BODY>
Этот небольшой сайт
посвящен семье Ивановых.
<h1>Наши
фотографии</h1>
<a
rel="nofollow ugc" target="_blank" href="index.htm">Вернуться на главную страницу</a>
<a
rel="nofollow ugc" target="_blank" href="semya.htm">Наша семья</a>
<a
rel="nofollow ugc" target="_blank" href="dostihenia.htm">Наши достижения</a>
</BODY>
</HTML>
4.
Сохраните файл.
5.
Проверьте как выглядит файл peremena.htm в
браузере.
6.
Вернитесь в Блокнот, не закрывая Internet
Explorer. Вставьте между
заголовком Наши фотографии и ссылкой Вернуться на главную страницу текст,
используя для перевода строки тег <br>
Примечание
Вы можете
скопировать данный текст из файла Мой компьютер/ Класс1 на lcpd / Симонова / текст для сайта
7.
Между заголовком Наши фотографии и введенным
текстом вставьте абзац, выровненный по правому краю
<p
align=right> Семейные фотографии - это так здорово!<br>Наши
родители</p>
8.
Сохраните файл в Блокноте и проверьте как он
теперь выглядит, переключившись в браузер и щелкнув по кнопке Обновить.
9.
Откройте в Блокноте файл index.htm
10. Добавьте теги перевода строки<br>
<HTML>
<HEAD>
<TITLE>Сайт семьи Ивановых
</TITLE>
</HEAD>
<BODY>
Этот небольшой сайт
посвящен семье Ивановых.
<br><a
rel="nofollow ugc" target="_blank" href="semya.htm">Наша семья</a></br>
<br><a
rel="nofollow ugc" target="_blank" href="dostihenia.htm">Наши достижения</a></br>
<br><a
rel="nofollow ugc" target="_blank" href="peremena.htm">Это интересно</a></br>
</BODY>
</HTML>
11. Сохраните файл в Блокноте и проверьте, как он теперь выглядит в Internet
Explorer.
Форматирование текста
Задание №4
В файле peremena.htm. выделите
фрагменты текста полужирным, курсивным начертанием и цветом.
Цель упражнения.
Изучение основ HTML
Освоение тегов форматирования текста.
Порядок выполнения.
1.
Запустите Блокнот и откройте файл peremena.htm.
2.
Выделите эпиграф курсивом, указав в его начале и
конце теги <i> и </i>
<p align=right> <i>Семейные фотографии - это так
здорово!<br>Наши родители</i></p>
3.
Выделите в основном тексте имя Мамы полужирным,
указав в его начале и конце теги <b> и </b>
<b> ИМЯ МАМЫ</b>
4.
Выделите синим цветом имена Бабушки и Дедушки,
заключив их в пары тегов
<font color=”blue”>ИМЯ БАБУШКИ И ДЕДУШКИ</font>
5. Сохраните файл в
Блокноте и проверьте, как он теперь выглядит в Internet
Explorer.
Форматирование текста
Работа со шрифтами
1.
В файле peremena.htm. выделите фрагменты
текста полужирным, курсивным начертанием и цветом.
Цель упражнения.
Изучение основ HTML
Освоение тегов форматирования текста.
Порядок выполнения.
1.
Написание текста
полужирным, курсивным начертанием, верхним (нижним) индексом, цветом
1.
Запустите Блокнот и откройте файл peremena.htm.
2.
Дополните документ абзацем, оформленным курсивом,
написанным справа
<p>
<i>Марина занимается геометрией</i></p>
3.
Дополнить документ абзацем с применением верхнего
индекса
<p>a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></p>
4.
Теперь ваш документ должен выглядеть так
<HTML>
<HEAD>
<TITLE>Это интересно</TITLE>
</HEAD>
<BODY>
Этот небольшой сайт
посвящен семье Ивановых.
<h1>Наши
фотографии</h1>
<p
align=right> <i>Семейные фотографии - это так здорово!<br>Наши
родители</i></p>
<p>
<i>Марина занимается геометрией</i></p>
<p>a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></p>
<br> <a
rel="nofollow ugc" target="_blank" href="index.htm">Вернуться на главную
страницу</a></br>
<br><a
rel="nofollow ugc" target="_blank" href="semya.htm">Наша семья</a></br>
<br><a
rel="nofollow ugc" target="_blank" href="dostihenia.htm">Наши достижения</a></br>
</BODY>
</HTML>
5.
Дополните документ абзацем с применением шрифта
Tahoma
<p><font
face=Tahoma>Пироги, которые испекла наша бабушка</font></p>
6.
Теперь ваш документ должен выглядеть так
<HTML>
<HEAD>
<TITLE>Это интересно</TITLE>
</HEAD>
<BODY>
Этот небольшой сайт
посвящен семье Ивановых.
<h1>Наши
фотографии</h1>
<p align=right>
<i>Семейные фотографии - это так здорово!<br>Наши
родители</i></p>
<p>
<i>Марина занимается геометрией</i></p>
<p>a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></p>
<p><font
face=Tahoma>Пироги, которые испекла наша бабушка</font></p>
<br> <a
rel="nofollow ugc" target="_blank" href="index.htm">Вернуться на главную
страницу</a></br>
<br><a
rel="nofollow ugc" target="_blank" href="semya.htm">Наша семья</a></br>
<br><a
rel="nofollow ugc" target="_blank" href="dostihenia.htm">Наши достижения</a></br>
</BODY>
</HTML>
7.
Измените
<p
align=right> <i>Семейные фотографии - это так здорово!<br>Наши
родители</i></p>, применив к нему форматирование, увеличивающее
размер букв и изменяющее цвет шрифта.
<p align=right> <i><font size =
+2 color = green>Семейные
фотографии</font> <font size
= +3 color = blue>- это так
здорово!</font><br><font
size = +4 color = red>Наши
родители</font></i></p>
8. Сохраните файл в
Блокноте и проверьте, как он теперь выглядит в Internet
Explorer.
Работа с изображением
Задание №5
Добавьте в файл peremena.htm
портрет из файла Мой компьютер/ Класс1 на lcpd / Симонова / текст для сайта/фото ребенка,
сопроводив его подписью, задав поля и выровняв по левому краю.
Цель упражнения.
Изучение основ HTML
Знакомство с тегом
<img> и его атрибутами.
Порядок
выполнения.
1.
Скопируйте файл Мой компьютер/ Класс1 на lcpd / Симонова / текст для сайта/фото ребенка в свою
рабочую папку.
2.
Запустите Блокнот и откройте файл peremena.htm.
3.
Перед строкой <b> ИМЯ МАМЫ</b> добавьте рисунок
<img src = “foto.jpg”>
4. Сохраните файл в
Блокноте и проверьте, как он теперь выглядит в Internet
Explorer.
5.
Определите размеры рисунка в пикселах
ü
Откройте свою рабочую папку
ü
Щелкните правой кнопкой значок файла “foto.jpg”и в контекстном меню
выберите Cвойства
ü
В окне Свойства перейдите на вкладку Сводка.
В разделе Изображение списка свойств найдите значения Ширина и Высота.
Примечание.
Вкладка Сводка может не содержать
полный список свойств (см. рис выше.) В этом случае щелкните кнопку Подробно.
6.
Дополните тег<img>
атрибутами размера, указав в качестве ширины и высоты значения своего рисунка
<img src = “foto.jpg” width= “135”
height = “160”>
7.
Добавьте подпись к рисунку
<img src = “foto.jpg” width= “135”
height = “160” alt – “фото
ребенка”>
8. Сохраните файл в Блокноте. Обновите
его в браузере. Наведите указатель мыши на рисунок и прочитайте надпись.
9.Выровняйте рисунок по правому краю,
теперь текст будет обтекать его
<img src = “foto.jpg” width= “135”
height = “160” alt – “фото ребенка” align = “left”>
10.Сохраните файл в Блокноте
и проверьте, как он теперь выглядит в Internet Explorer.
12. Добавьте вертикальные и горизонтальные поля к рисунку.
<img src = “foto.jpg” width= “135”
height = “160” alt – “фото ребенка” align = “left” vspace = “8”
hspace = “12”>
13. Сохраните файл в Блокноте. Обновите его в браузере.
Работа с маркированными списками.
Задание №6
Создайте в файле dostihenia.htm маркированный
список, перечислите некоторые достижения семьи
Цель упражнения
Изучение основ HTML
Знакомство с тегами маркированных списков <ul> и их атрибутами
Порядок выполнения
1.
Запустите Блокнот и откройте файл dostihenia.htm.
2.
В теле документа перед ссылкой на главную страницу
введите заголовок <h1>Достижения нашей семьи</h1>
3.
Дополните документ маркированным списком (весь
список помечается тегом <ul>, а каждый его пункт -
тегом<li> )
ü Маркированный
список с параметрами, подразумеваемыми по умолчанию
<ul type = circle>
<li>
Наша семья заняла 1
место в соревновании "Папа, мама, я- спортивная семья"
</li>
<li>
Наша семья приняла
активное участие в соревновании "Вокруг света"
</li>
<li>
Мы первые в прыжках
с парашютом!
</li>
</ul>
ü
Маркированный список - окружность
<ul type = circle>
<li>
Наша семья заняла 1
место в соревновании "Папа, мама, я- спортивная семья"
</li>
<li>
Наша семья приняла
активное участие в соревновании "Вокруг света"
</li>
<li>
Мы первые в прыжках
с парашютом!
</li>
</ul>
ü
Маркированный список – квадрат
<ul type =
square>
<li>
Наша семья заняла 1
место в соревновании "Папа, мама, я- спортивная семья"
</li>
<li>
Наша семья приняла
активное участие в соревновании "Вокруг света"
</li>
<li>
Мы первые в прыжках
с парашютом!
</li>
</ul>
4.
Теперь ваш документ должен выглядеть так
<HTML>
<HEAD>
<TITLE>Наши достижения
</TITLE>
</HEAD>
<BODY>
Этот небольшой сайт
посвящен семье Ивановых.
<h1>Достижения нашей семьи</h1>
<ul>
<li>
Наша семья заняла 1
место в соревновании "Папа, мама, я- спортивная семья"
</li>
<li>
Наша семья приняла
активное участие в соревновании "Вокруг света"
</li>
<li>
Мы первые в прыжках
с парашютом!
</li>
</ul>
<ul type = circle>
<li>
Наша семья заняла 1
место в соревновании "Папа, мама, я- спортивная семья"
</li>
<li>
Наша семья приняла
активное участие в соревновании "Вокруг света"
</li>
<li>
Мы первые в прыжках
с парашютом!
</li>
</ul>
<ul type = square>
<li>
Наша семья заняла 1
место в соревновании "Папа, мама, я- спортивная семья"
</li>
<li>
Наша семья приняла
активное участие в соревновании "Вокруг света"
</li>
<li>
Мы первые в прыжках
с парашютом!
</li>
</ul>
<br><a href="index.htm">Вернуться на главную страницу</a></br>
<br><a
rel="nofollow ugc" target="_blank" href="semya.htm">Наша семья</a></br>
<br><a
rel="nofollow ugc" target="_blank" href="peremena.htm">Это интересно</a></br>
</BODY>
</HTML>
5. Сохраните файл в
Блокноте и проверьте, как он теперь выглядит в Internet Explorer.
Работа с нумерованными списками.
Задание №7
Создайте в файле semya.htm
нумерованный список, перечислите некоторые достижения
семьи
Цель упражнения
Изучение основ HTML
Знакомство с тегами нумерованных списков <ol> и их атрибутами
Порядок выполнения
2.
Запустите Блокнот и откройте файл semya.htm.
3.
В теле документа перед ссылкой на главную страницу
введите заголовок <h1>Генеалогическое дерево</h1>
4.
Дополните документ маркированным списком (весь
список помечается тегом <ol>, а каждый его пункт -
тегом<li> )
ü Нумерованный
список с параметрами, подразумеваемыми по умолчанию
<ol>
<li>
Иванов Петр
Васильевич
</li>
<li>
Иванова Васса
Александровна
</li>
<li>
Иванов Сергей
Петрович
</li>
<li>
Иванова Светлана
Петровна
</li>
</ol>
ü Явное
указание нумерации арабскими цифрами
<ol type=1>
<li>
Иванов Селивестр
Васильевич
</li>
<li>
Иванова Оксана
Сергеевна
</li>
<li>
Иванов Владислав
Селиверствович
</li>
<li>
Иванова Юлия
Селиверстовна
</li>
</ol>
ü
Нумерация арабскими цифрами, начало нумерации с
пяти
<ol start=5>
<li>
Иванов Станислав
Васильевич
</li>
<li>
Иванова Татьяна
Владимировна
</li>
<li>
Иванов Сергей
Станиславович
</li>
<li>
Иванова Светлана
Станиславовна
</li>
</ol>
ü
Нумерация прописными буквами
<ol type=A>
<li>
Иванов Сергей
Васильевич
</li>
<li>
Иванова Ирина
Петровна
</li>
<li>
Иванов Сергей
Сергеевич
</li>
<li>
Иванова Ирина
Сергеевна
</li>
</ol>
ü
Нумерация строчными латинским буквами
<ol type=a>
<li>
Иванов Василий
Васильевич
</li>
<li>
Иванова Людмила
Игоревна
</li>
<li>
Иванов Сергей
Станиславович
</li>
<li>
Иванова Светлана
Станиславовна
</li>
</ol>
ü
Нумерация обычными (прописными) римскими цифрами
<ol type=I>
<li>
Иванов Михаил
Васильевич
</li>
<li>
Иванова Галина
Викторовна
</li>
<li>
Иванов Петр
Михайлович
</li>
<li>
Иванова Полина
Михайловна
</li>
</ol>
ü
Нумерация строчными римскими цифрами
<ol type=i>
<li>
Иванов Ярослав
Васильевич
</li>
<li>
Иванова Антонина
Александровна
</li>
<li>
Иванов Михаил
Ярославович
</li>
<li>
Иванова Яна
Ярославовна
</li>
</ol>
ü
Нумерация прописными римскими цифрами,
начинающимися с семи
<ol type= I start=7>
<li>
Иванов Владислав
Васильевич
</li>
<li>
Иванова Лидия
Ивановна
</li>
<li>
Иванов Станислав
Владиславович
</li>
<li>
Иванова Ольга
Владиславовна
</li>
</ol>
5.
Теперь ваш документ должен выглядеть так
<HTML>
<HEAD>
<TITLE>Наша семья </TITLE>
</HEAD>
<BODY>
Этот небольшой сайт посвящен семье Ивановых.
<h1>Генеалогическое дерево</h1>
<ol>
<li>
Иванов Петр Васильевич
</li>
<li>
Иванова Васса Александровна
</li>
<li>
Иванов Сергей Петрович
</li>
<li>
Иванова Светлана Петровна
</li>
</ol>
<ol type=1>
<li>
Иванов Селивестр Васильевич
</li>
<li>
Иванова Оксана Сергеевна
</li>
<li>
Иванов Владислав Селиверствович
</li>
<li>
Иванова Юлия Селиверстовна
</li>
</ol>
<ol start=5>
<li>
Иванов Станислав Васильевич
</li>
<li>
Иванова Татьяна Владимировна
</li>
<li>
Иванов Сергей Станиславович
</li>
<li>
Иванова Светлана Станиславовна
</li>
</ol>
<ol type=A>
<li>
Иванов Сергей Васильевич
</li>
<li>
Иванова Ирина Петровна
</li>
<li>
Иванов Сергей Сергеевич
</li>
<li>
Иванова Ирина Сергеевна
</li>
</ol>
<ol type=a>
<li>
Иванов Василий Васильевич
</li>
<li>
Иванова Людмила Игоревна
</li>
<li>
Иванов Сергей Станиславович
</li>
<li>
Иванова Светлана Станиславовна
</li>
</ol>
<ol type=I>
<li>
Иванов Михаил Васильевич
</li>
<li>
Иванова Галина Викторовна
</li>
<li>
Иванов Петр Михайлович
</li>
<li>
Иванова Полина Михайловна
</li>
</ol>
<ol type=i>
<li>
Иванов Ярослав Васильевич
</li>
<li>
Иванова Антонина Александровна
</li>
<li>
Иванов Михаил Ярославович
</li>
<li>
Иванова Яна Ярославовна
</li>
</ol>
<ol type= I start=7>
<li>
Иванов Владислав Васильевич
</li>
<li>
Иванова Лидия Ивановна
</li>
<li>
Иванов Станислав Владиславович
</li>
<li>
Иванова Ольга Владиславовна
</li>
</ol>
<br> <a
rel="nofollow ugc" target="_blank" href="index.htm">Вернуться на главную
страницу</a></br>
<br><a rel="nofollow ugc" target="_blank" href="dostihenia.htm">Наши достижения</a></br>
<br><a rel="nofollow ugc" target="_blank" href="peremena.htm">Это интересно</a></br>
</BODY>
</HTML>
Работа с многоуровневыми (вложенными) списками.
Задание №7
Создайте в файле index.htm
нумерованный список, перечислите родственников семьи
Цель упражнения
Изучение основ HTML
Знакомство с тегами многоуровневыми
(вложенными) списков <ol> и их атрибутами
Порядок выполнения
1.
Запустите Блокнот и откройте файл semya.htm.
2.
В теле документа перед ссылкой на Наша семья
введите заголовок <h1>Генеалогическое дерево</h1>
3.
Дополните документ многоуровневыми (вложенными)
списками (весь список помечается тегом <ol>, а
каждый его пункт - тегом<li>
4.
Теперь ваш документ должен выглядеть так
<HTML>
<HEAD>
<TITLE>Сайт семьи Ивановых
</TITLE>
</HEAD>
<BODY>
Этот небольшой сайт
посвящен семье Ивановых.
<h1>Родственники</h1>
<ul>
<li> Бабушка
и Дедушка</li>
<ol>
<li>Иванов
Петр Васильевич</li>
<li>Иванова
Васса Александровна</li>
</ol>
<li>Папа и
Мама</li>
<ol>
<li>Иванов
Сергей Петрович</li>
<li>Иванова
Светлана Петровна</li>
</ol>
<li>Внуки</li>
<ol>
<li>Иванов
Юрий Сергеевич</li>
<li>Иванова
Полина Сергеевна</li>
</ol>
</ul>
<br><a
rel="nofollow ugc" target="_blank" href="semya.htm">Наша семья</a></br>
<br><a
rel="nofollow ugc" target="_blank" href="dostihenia.htm">Наши достижения</a></br>
<br><a
rel="nofollow ugc" target="_blank" href="peremena.htm">Это интересно</a></br>
</BODY>
</HTML>
Ссылка на адрес электронной почты
Задание №8
Создайте в файле index.htm
ссылку на свою электронную почту.
Цель упражнения
Изучение основ HTML
Создайте ссылки на свою электронную почту.
Порядок выполнения
1.
Запустите Блокнот и откройте файл index.htm.
2. В теле документа перед закрытием тегов введите ссылку на свою
электронную почту. <br><a
rel="nofollow ugc" target="_blank" href="mailto:ivanova@mail.ru">Напишите автору</a></br>
3.
Дополните документ ссылкой
<br><a
rel="nofollow ugc" target="_blank" href="mailto:ivanova@mail.ru?subject=Вопрос автору">Вопрос
автору</a></br>
4.
Теперь ваш документ должен выглядеть так
<HTML>
<HEAD>
<TITLE>Сайт семьи Ивановых
</TITLE>
</HEAD>
<BODY>
Этот небольшой сайт посвящен семье Ивановых.
<br><a rel="nofollow ugc" target="_blank" href="semya.htm">Наша семья</a></br>
<br><a rel="nofollow ugc" target="_blank" href="dostihenia.htm">Наши достижения</a></br>
<br><a rel="nofollow ugc" target="_blank" href="peremena.htm">Это интересно</a></br>
<br><a rel="nofollow ugc" target="_blank" href="mailto:ivanova@mail.ru">Напишите автору</a></br>
<br><a
rel="nofollow ugc" target="_blank" href="mailto:ivanova@mail.ru?subject=Вопрос автору">Вопрос
автору</a></br>
</BODY>
</HTML>
5.
Сохраните файл в Блокноте и проверьте,
как он теперь выглядит в Internet Explorer.
Ссылки внутри WEB – страницы
Задание №9
Создайте в файле index.htm
ссылку на свою электронную почту.
Цель упражнения
Изучение основ HTML
Создайте ссылок внутри WEB – страницы
Порядок выполнения
1.
Запустите Блокнот и откройте файл index.htm.
2. В теле документа перед закрытием тегов введите ссылки внутри WEB – страницы. <br><a
rel="nofollow ugc" target="_blank" href="mailto:ivanova@mail.ru">Напишите автору</a></br>
3.
Дополните документ ссылкой
<br><a
rel="nofollow ugc" target="_blank" href="mailto:ivanova@mail.ru?subject=Вопрос автору">Вопрос
автору</a></br>
4.
Сохраните файл в Блокноте и проверьте,
как он теперь выглядит в Internet Explorer.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.