Добавить в избранное

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

Раздел Информатика
Класс -
Тип Конспекты
Автор
Дата
Формат doc
Изображения Есть
For-Teacher.ru - все для учителя
Поделитесь с коллегами:

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

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

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

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

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

Задание№1.

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

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

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

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

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

  1. Запустите Блокнот.

  2. Введите:

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

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

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

  2. Просмотрите сохраненный документ в браузере Internet Explorer.

  3. Практические рекомендации.

  1. Запустите Блокнот, щелкнув кнопку Пуск и выбрав Программы/ Стандартные/ Блокнот.

  2. Введите теги обозначения HTML - документа < HTML > < /HTML> между которыми должен располагаться весь остальной код.

  3. Так как HTML - документ состоит из двух частей (заголовочной и кода), между открывающим и закрывающим тегами < HTML > введите открывающие и закрывающие теги заголовочной части (<HEAD> и ) и тела документа ( и ).

Примечание.

Проследите, чтобы теги были вложены друг в друга. Помните, что строчное или прописное начертание букв в тегах не имеет значение, а также то, разделены ли они строками, пробелами или табуляцией. Отступы используем только для удобочитаемости программы.

4. Внутри заголовочной части документа впишите титул

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

5. В теле документа неформатированный текст пишется без тегов:

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

6. Теперь ваш документ должен выглядеть так

Сайт семьи Ивановых

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

7. Сохраните файл под именем index.htm в своей рабочей папке, воспользовавшись командой Файл/Сохранить как.

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

Примечание.

По умолчанию Блокнот сохраняет документы с расширением .txt независимо от того, что указано в поле Имя файла диалогового окна Сохранить как. Чтобы сохранить файл с расширением .htm необходимо в списке Тип файлов этого окна предварительно выбрать Все файлы, а затем в поле Имя файла указать имя с расширением, например index.htm.

Если HTML - файл сохранен правильно, то в окне папки будет сопоставлен значок Создание 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 – документаСоздание HTML – документаСоздание HTML – документа


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

  2. Теперь ваш документ должен выглядеть так:

Сайт семьи Ивановых

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

Наша семья

Наши достижения

Это интересно

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

  2. Откройте в Блокноте файл semya.htm.

  3. Дополните его ссылкой на главную страницу (index.htm), вписав в тело следующий текст


Вернуться на главную страницу

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

Наша семья

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

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

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

Наши достижения

Это интересно

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

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

  1. Щелкните ссылку Наша семья. Проследите по титулу, что открылась нужная страница.

  2. Щелкнуть ссылку Вернуться на главную страницу. Проследите по титулу, что вы вернулись на главную страницу. (index.htm)

  3. Проверьте работу ссылок Наша семья, Наши достижения, Это интересно.


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

Задание №3

Добавьте в файл semya.htm заголовок первого уровня, абзац, выровненный по правому краю, и несколько строк, разделенных без создания абзаца.

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

Изучение основ HTML

Освоение тегов форматирование абзацев.

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

  1. Запустите Блокнот и откройте файл peremena.htm.

  2. Дополните тело документа заголовком, для чего введите следующий текст

Наши фотографии

  1. Теперь ваш документ должен выглядеть так

Это интересно

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

Наши фотографии

Вернуться на главную страницу

Наша семья

Наши достижения

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

  2. Проверьте как выглядит файл peremena.htm в браузере. Создание HTML – документа

  3. Вернитесь в Блокнот, не закрывая Internet Explorer. Вставьте между заголовком Наши фотографии и ссылкой Вернуться на главную страницу текст, используя для перевода строки тег <br>


Примечание

Вы можете скопировать данный текст из файла Мой компьютер/ Класс1 на lcpd / Симонова / текст для сайта


  1. Между заголовком Наши фотографии и введенным текстом вставьте абзац, выровненный по правому краю

Семейные фотографии - это так здорово!
Наши родители

  1. Сохраните файл в Блокноте и проверьте как он теперь выглядит, переключившись в браузер и щелкнув по кнопке Обновить.

  2. Откройте в Блокноте файл index.htm

  3. Добавьте теги перевода строки<br>

Сайт семьи Ивановых

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


Наша семья


Наши достижения


Это интересно

  1. Сохраните файл в Блокноте и проверьте, как он теперь выглядит в Internet Explorer.

Форматирование текста

Задание №4

В файле peremena.htm. выделите фрагменты текста полужирным, курсивным начертанием и цветом.

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

Изучение основ HTML

Освоение тегов форматирования текста.

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

  1. Запустите Блокнот и откройте файл peremena.htm.

  2. Выделите эпиграф курсивом, указав в его начале и конце теги <i> и i>

Семейные фотографии - это так здорово!
Наши родители

  1. Выделите в основном тексте имя Мамы полужирным, указав в его начале и конце теги <b> и b>

<b> ИМЯ МАМЫb>

  1. Выделите синим цветом имена Бабушки и Дедушки, заключив их в пары тегов

<font color="blue">ИМЯ БАБУШКИ И ДЕДУШКИfont>

5. Сохраните файл в Блокноте и проверьте, как он теперь выглядит в Internet Explorer.

Форматирование текста

Работа со шрифтами

  1. В файле peremena.htm. выделите фрагменты текста полужирным, курсивным начертанием и цветом.

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

Изучение основ HTML

Освоение тегов форматирования текста.

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

Написание текста полужирным, курсивным начертанием, верхним (нижним) индексом, цветом

  1. Запустите Блокнот и откройте файл peremena.htm.

  2. Дополните документ абзацем, оформленным курсивом, написанным справа

Марина занимается геометрией

  1. Дополнить документ абзацем с применением верхнего индекса

a2+b2=c2

  1. Теперь ваш документ должен выглядеть так

Это интересно

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

Наши фотографии

Семейные фотографии - это так здорово!
Наши родители

Марина занимается геометрией

a2+b2=c2


Вернуться на главную страницу


Наша семья


Наши достижения

  1. Дополните документ абзацем с применением шрифта Tahoma

Пироги, которые испекла наша бабушка

  1. Теперь ваш документ должен выглядеть так

Это интересно

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

Наши фотографии

Семейные фотографии - это так здорово!
Наши родители

Марина занимается геометрией

a2+b2=c2

Пироги, которые испекла наша бабушка


Вернуться на главную страницу


Наша семья


Наши достижения

  1. Измените

Семейные фотографии - это так здорово!
Наши родители, применив к нему форматирование, увеличивающее размер букв и изменяющее цвет шрифта.

<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> добавьте рисунок

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

4. Сохраните файл в Блокноте и проверьте, как он теперь выглядит в Internet Explorer.

  1. Определите размеры рисунка в пикселах

    • Откройте свою рабочую папку

    • Щелкните правой кнопкой значок файла "foto.jpg"и в контекстном меню выберите Cвойства

    • В окне Свойства перейдите на вкладку Сводка. В разделе Изображение списка свойств найдите значения Ширина и Высота.

Примечание.

Вкладка Сводка может не содержать полный список свойств (см. рис выше.) В этом случае щелкните кнопку Подробно.


  1. Дополните тег<img> атрибутами размера, указав в качестве ширины и высоты значения своего рисунка

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

  1. Добавьте подпись к рисунку

<img src = "foto.jpg" width= "135" height = "160" alt - "фото ребенка">

8. Сохраните файл в Блокноте. Обновите его в браузере. Наведите указатель мыши на рисунок и прочитайте надпись.

9.Выровняйте рисунок по правому краю, теперь текст будет обтекать его

Создание HTML – документафото ребенка" align = "left">

10.Сохраните файл в Блокноте и проверьте, как он теперь выглядит в Internet Explorer.

  1. Добавьте вертикальные и горизонтальные поля к рисунку.

Создание HTML – документафото ребенка" align = "left" vspace = "8" hspace = "12">

  1. Сохраните файл в Блокноте. Обновите его в браузере.

Работа с маркированными списками.

Задание №6

Создайте в файле dostihenia.htm маркированный список, перечислите некоторые достижения семьи

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

Изучение основ HTML

Знакомство с тегами маркированных списков <ul> и их атрибутами

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

  1. Запустите Блокнот и откройте файл dostihenia.htm.

  2. В теле документа перед ссылкой на главную страницу введите заголовок <h1>Достижения нашей семьиh1>

  3. Дополните документ маркированным списком (весь список помечается тегом <ul>, а каждый его пункт - тегом<li> )

  • Маркированный список с параметрами, подразумеваемыми по умолчанию

Наша семья заняла 1 место в соревновании "Папа, мама, я- спортивная семья"

Наша семья приняла активное участие в соревновании "Вокруг света"

Мы первые в прыжках с парашютом!

  • Маркированный список - окружность

Наша семья заняла 1 место в соревновании "Папа, мама, я- спортивная семья"

Наша семья приняла активное участие в соревновании "Вокруг света"

Мы первые в прыжках с парашютом!

  • Маркированный список - квадрат

Наша семья заняла 1 место в соревновании "Папа, мама, я- спортивная семья"

Наша семья приняла активное участие в соревновании "Вокруг света"

Мы первые в прыжках с парашютом!

  1. Теперь ваш документ должен выглядеть так

Наши достижения

HEAD>

<BODY>

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

<h1>Достижения нашей семьиh1>

<ul>

<li>

Наша семья заняла 1 место в соревновании "Папа, мама, я- спортивная семья"

li>

<li>

Наша семья приняла активное участие в соревновании "Вокруг света"

li>

<li>

Мы первые в прыжках с парашютом!

<li>

Наша семья заняла 1 место в соревновании "Папа, мама, я- спортивная семья"

li>

<li>

Наша семья приняла активное участие в соревновании "Вокруг света"

li>

<li>

Мы первые в прыжках с парашютом!

<li>

Наша семья заняла 1 место в соревновании "Папа, мама, я- спортивная семья"

li>

<li>

Наша семья приняла активное участие в соревновании "Вокруг света"

li>

<li>

Мы первые в прыжках с парашютом!

li>

ul>

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


Наша семья


Это интересно

HTML>

5. Сохраните файл в Блокноте и проверьте, как он теперь выглядит в Internet Explorer.


Работа с нумерованными списками.


Задание №7

Создайте в файле semya.htm нумерованный список, перечислите некоторые достижения семьи

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

Изучение основ HTML

Знакомство с тегами нумерованных списков <ol> и их атрибутами

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

  1. Запустите Блокнот и откройте файл semya.htm.

  2. В теле документа перед ссылкой на главную страницу введите заголовок <h1>Генеалогическое деревоh1>

  3. Дополните документ маркированным списком (весь список помечается тегом <ol>, а каждый его пункт - тегом<li> )

    • Нумерованный список с параметрами, подразумеваемыми по умолчанию

Иванов Петр Васильевич

Иванова Васса Александровна

Иванов Сергей Петрович

Иванова Светлана Петровна

  • Явное указание нумерации арабскими цифрами

Иванов Селивестр Васильевич

Иванова Оксана Сергеевна

Иванов Владислав Селиверствович

Иванова Юлия Селиверстовна

  • Нумерация арабскими цифрами, начало нумерации с пяти

Иванов Станислав Васильевич

Иванова Татьяна Владимировна

Иванов Сергей Станиславович

Иванова Светлана Станиславовна

  • Нумерация прописными буквами

Иванов Сергей Васильевич

Иванова Ирина Петровна

Иванов Сергей Сергеевич

Иванова Ирина Сергеевна

  • Нумерация строчными латинским буквами

Иванов Василий Васильевич

Иванова Людмила Игоревна

Иванов Сергей Станиславович

Иванова Светлана Станиславовна

  • Нумерация обычными (прописными) римскими цифрами

Иванов Михаил Васильевич

Иванова Галина Викторовна

Иванов Петр Михайлович

Иванова Полина Михайловна

  • Нумерация строчными римскими цифрами

Иванов Ярослав Васильевич

Иванова Антонина Александровна

Иванов Михаил Ярославович

Иванова Яна Ярославовна

  • Нумерация прописными римскими цифрами, начинающимися с семи

Иванов Владислав Васильевич

Иванова Лидия Ивановна

Иванов Станислав Владиславович

Иванова Ольга Владиславовна

  1. Теперь ваш документ должен выглядеть так

Наша семья

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

Генеалогическое дерево

Иванов Петр Васильевич

Иванова Васса Александровна

Иванов Сергей Петрович

Иванова Светлана Петровна

Иванов Селивестр Васильевич

Иванова Оксана Сергеевна

Иванов Владислав Селиверствович

Иванова Юлия Селиверстовна

Иванов Станислав Васильевич

Иванова Татьяна Владимировна

Иванов Сергей Станиславович

Иванова Светлана Станиславовна

Иванов Сергей Васильевич

Иванова Ирина Петровна

Иванов Сергей Сергеевич

Иванова Ирина Сергеевна

Иванов Василий Васильевич

Иванова Людмила Игоревна

Иванов Сергей Станиславович

Иванова Светлана Станиславовна

Иванов Михаил Васильевич

Иванова Галина Викторовна

Иванов Петр Михайлович

Иванова Полина Михайловна

Иванов Ярослав Васильевич

Иванова Антонина Александровна

Иванов Михаил Ярославович

Иванова Яна Ярославовна

Иванов Владислав Васильевич

Иванова Лидия Ивановна

Иванов Станислав Владиславович

Иванова Ольга Владиславовна


Вернуться на главную страницу


Наши достижения


Это интересно

Работа с многоуровневыми (вложенными) списками.


Задание №7

Создайте в файле index.htm нумерованный список, перечислите родственников семьи

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

Изучение основ HTML

Знакомство с тегами многоуровневыми (вложенными) списков <ol> и их атрибутами

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

  1. Запустите Блокнот и откройте файл semya.htm.

  2. В теле документа перед ссылкой на Наша семья введите заголовок <h1>Генеалогическое деревоh1>

  3. Дополните документ многоуровневыми (вложенными) списками (весь список помечается тегом <ol>, а каждый его пункт - тегом<li>

  4. Теперь ваш документ должен выглядеть так

Сайт семьи Ивановых

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

Родственники

Бабушка и Дедушка Иванов Петр Васильевич Иванова Васса Александровна Папа и Мама Иванов Сергей Петрович Иванова Светлана Петровна

ВнукиИванов Юрий Сергеевич Иванова Полина Сергеевна


Наша семья


Наши достижения


Это интересно

Ссылка на адрес электронной почты

Задание №8

Создайте в файле index.htm ссылку на свою электронную почту.

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

Изучение основ HTML

Создайте ссылки на свою электронную почту.

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

  1. Запустите Блокнот и откройте файл index.htm.

  2. В теле документа перед закрытием тегов введите ссылку на свою электронную почту.
    Напишите автору

  3. Дополните документ ссылкой


Вопрос автору

  1. Теперь ваш документ должен выглядеть так

Сайт семьи Ивановых

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


Наша семья


Наши достижения


Это интересно


Напишите автору


Вопрос автору

  1. Сохраните файл в Блокноте и проверьте, как он теперь выглядит в Internet Explorer.

Ссылки внутри WEB - страницы

Задание №9

Создайте в файле index.htm ссылку на свою электронную почту.

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

Изучение основ HTML

Создайте ссылок внутри WEB - страницы

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

  1. Запустите Блокнот и откройте файл index.htm.

  2. В теле документа перед закрытием тегов введите ссылки внутри WEB - страницы.
    Напишите автору

  3. Дополните документ ссылкой


Вопрос автору

  1. Сохраните файл в Блокноте и проверьте, как он теперь выглядит в Internet Explorer.

17Симонова Т.А., учитель информатики МОУ «Лицей №3» г.Прохладный КБР

e-mail: [email protected]


загрузить
Пользовательское соглашениеО проектеОбратная связьАрхивные статьи
© 2010-2022