Инфоурок Информатика КонспектыСоздание HTML – документа

Создание HTML – документа

Скачать материал

Создание HTML – документа

Симонова Татьяна Адлеровна

учитель информатики

 МОУ «Лицей №3»

 г.Прохладный КБР

Задание№1.

Создайте в редакторе Блокнот  HTML - документ с текстом «Этот небольшой сайт посвящен семье Ивановых..»

Сохраните его в своей рабочей папке под именем index.htm и просмотрите его в браузере.

Цель упражнения.

Изучение основ языка HTML. Знакомство со структурой HTML – документа.

Порядок выполнения.

  1. Запустите Блокнот.
  2. Введите:

<HTML>

   <HEAD>

       <TITLE>Сайт семьи Ивановых</TITLE>

    </HEAD>

           <BODY>

                Этот небольшой сайт посвящен семье Ивановых.

            </BODY>

</HTML>

  1. Сохраните документ под именем  index.htm  в своей рабочей папке.
  2. Просмотрите сохраненный документ в браузере Internet Explorer.
  3. Практические рекомендации.

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 – страниц гиперссылками.

Порядок выполнения

  1. Скопируйте файл index.htm.
  2. Переименуйте скопированный файл в semya.htm
  3. Скопируйте еще раз файл index.htm. и назовите его dostihenia.htm
  4. Скопируйте еще раз файл index.htm. и назовите его peremena.htm
  5. Запустите Блокнот и откройте файл index.htm.

Примечание.

По умолчанию в диалоговом окне Открыть, вызываемой по команде Файл/Открыть, отображается только текстовый документ. Чтобы найти и открыть HTML – файл в списке Тип файлов этого окна предварительно следует выбрать Все файлы.

Выберите Все файлы, чтобы открыть HTML - файл

 

 

  1. Дополните документ ссылками на файлы semya.htm, dostihenia.htm, peremena.htm. Для этого введите в тело документа теги.
  2. Теперь ваш документ должен выглядеть так:

<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>

  1. Сохраните файл.
  2. Откройте в Блокноте файл semya.htm.
  3. Дополните его ссылкой на главную страницу (index.htm), вписав в тело следующий текст

<br><a rel="nofollow ugc" target="_blank" href="index.htm">Вернуться на главную страницу</a></br>

  1. Измените титул

<TITLE>Наша семья </TITLE>

12.Сохраните файл.

  1. Повторите шаги 9-12 для файлов dostihenia.htm, peremena.htm

В качестве титула напишите

<TITLE>Наши достижения </TITLE>

<TITLE>Это интересно</TITLE>

  1. Откройте  в Internet Explorer файл  index.htm.

  1. Щелкните ссылку Наша семья. Проследите по титулу, что открылась нужная страница.
  2. Щелкнуть ссылку Вернуться на главную страницу. Проследите по титулу, что вы вернулись на главную страницу. (index.htm)
  3. Проверьте работу ссылок Наша семья, Наши достижения, Это интересно.

  

 

Форматирование абзацев

Задание №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.jpgwidth= “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.

 

Просмотрено: 0%
Просмотрено: 0%
Скачать материал
Скачать материал "Создание HTML – документа"

Методические разработки к Вашему уроку:

Получите новую специальность за 3 месяца

Менеджер гостиничного комплекса

Получите профессию

Интернет-маркетолог

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Скачать материал

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

6 663 617 материалов в базе

Скачать материал

Другие материалы

Вам будут интересны эти курсы:

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.

  • Скачать материал
    • 17.12.2015 1846
    • DOCX 2.6 мбайт
    • Оцените материал:
  • Настоящий материал опубликован пользователем Симонова Татьяна Адлеровна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

    Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.

    Удалить материал
  • Автор материала

    Симонова Татьяна Адлеровна
    Симонова Татьяна Адлеровна
    • На сайте: 8 лет и 6 месяцев
    • Подписчики: 0
    • Всего просмотров: 28504
    • Всего материалов: 13

Ваша скидка на курсы

40%
Скидка для нового слушателя. Войдите на сайт, чтобы применить скидку к любому курсу
Курсы со скидкой

Курс профессиональной переподготовки

Методист-разработчик онлайн-курсов

Методист-разработчик онлайн-курсов

500/1000 ч.

Подать заявку О курсе
  • Сейчас обучается 130 человек из 45 регионов

Курс профессиональной переподготовки

Разработка и сопровождение требований и технических заданий на разработку и модернизацию систем и подсистем малого и среднего масштаба и сложности

Системный аналитик

600 ч.

9840 руб. 5600 руб.
Подать заявку О курсе
  • Сейчас обучается 66 человек из 34 регионов
  • Этот курс уже прошли 83 человека

Курс повышения квалификации

Методика преподавания информатики в начальных классах

72 ч. — 180 ч.

от 2200 руб. от 1100 руб.
Подать заявку О курсе
  • Этот курс уже прошли 67 человек

Курс профессиональной переподготовки

Математика и информатика: теория и методика преподавания в образовательной организации

Учитель математики и информатики

500/1000 ч.

от 8900 руб. от 4150 руб.
Подать заявку О курсе
  • Сейчас обучается 685 человек из 79 регионов
  • Этот курс уже прошли 1 808 человек

Мини-курс

Информационные технологии в науке и бизнесе: от концепции до реализации

10 ч.

1180 руб. 590 руб.
Подать заявку О курсе

Мини-курс

Wildberries: от управления заказами до продвижения товаров

6 ч.

780 руб. 390 руб.
Подать заявку О курсе
  • Сейчас обучается 57 человек из 26 регионов

Мини-курс

Литература и культура

3 ч.

780 руб. 390 руб.
Подать заявку О курсе
  • Этот курс уже прошли 11 человек
Сейчас в эфире

Информационная интоксикация: методы исцеления

Перейти к трансляции