Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Свидетельство о публикации

Автоматическая выдача свидетельства о публикации в официальном СМИ сразу после добавления материала на сайт - Бесплатно

Добавить свой материал

За каждый опубликованный материал Вы получите бесплатное свидетельство о публикации от проекта «Инфоурок»

(Свидетельство о регистрации СМИ: Эл №ФС77-60625 от 20.01.2015)

Инфоурок / Информатика / Другие методич. материалы / Две практические работы по HTML
ВНИМАНИЮ ВСЕХ УЧИТЕЛЕЙ: согласно Федеральному закону № 313-ФЗ все педагоги должны пройти обучение навыкам оказания первой помощи.

Дистанционный курс "Оказание первой помощи детям и взрослым" от проекта "Инфоурок" даёт Вам возможность привести свои знания в соответствие с требованиями закона и получить удостоверение о повышении квалификации установленного образца (180 часов). Начало обучения новой группы: 28 июня.

Подать заявку на курс
  • Информатика

Две практические работы по HTML

библиотека
материалов

Практическая работа по HTML № 1

Задание № 1. Создание простейшего документа HTML

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

  2. Запустите программу Блокнот (Пуск – Все программы – Стандартные - Блокнот).

  3. Наберите в окне программы следующий набор тегов (Для отступа используя кнопку Tab):

<ТITLЕ>

  1. Сохраните файл под именем baza.txt в своей папке, не закрывая файл. Этим файлом будем пользоваться при дальнейшей работе.

  2. Сохраните еще раз файл под именем 1.HTML в своей папке (в папке уже два файла, но разные значки).

  3. Для просмотра Web-страницы откройте свою папку и двойным кликом по файлу 1.HTML откройте документ в окне браузера.

Оба файла не закрывайте!


Задание № 2. Добавление текста

  1. Для работы нам понадобится файл ТОК.doc (расположение файла уточнить у учителя).

  2. Внесем изменения в файл 1.HTML, для этого:

- впишем «справочник электрика» между тегами

справочник электрика

- скопируем весь текст из файла ТОК.doc и вставим в файл 1.txt между тегами

<BODY> ТОК, НАПРЯЖЕНИЕ, СОПРОТИВЛЕНИЕ

BODY>

  1. Сохраните файл с внесенными изменениями (Файл - Сохранить). Переключитесь на Web-страницу, и обновите эту страницу.


Не забывайте каждый раз сохранять текст в программе Блокнот и обновлять Web-страницу при просмотре в браузере!


Задание № 3. Форматирование текста

Вы заметили, что полученный текст отличается от изначального. Существуют специальные команды для форматирования текста на странице.

<BR> – команда перевода строки для отделения строки от последующего текста или графики.

<P> P> новый абзац, закрывающий тег можно не ставить.


Внесите изменения в файл 1.HTML:

  1. впишите теги <P> P> на все абзацы, например:

Электрический ток ( I ) - это упорядоченное движение заряженных частиц. Первая мысль, которая приходит в голову из школьного курса физики - движение электронов. Безусловно. Однако электрический заряд могут переносить не только они, а, например, еще ионы, определяющие возникновение электрического тока в жидкостях и газах.

  1. Сохраните внесенные изменения в файле 1 и обновите Web-страницу.

Как изменилось отображение текста на экране? Выглядеть ваша Web-страница будет примерно так, как показано на рисунке 1.


hello_html_m15eda902.png

Рисунок 1.

Задание № 4. Выделение фрагментов текста

Для выделения текста используются следующие теги:

<HR> – горизонтальная линия

<B> B> – полужирный шрифт

<I> I> курсив

<U> U> – подчёркивание

<EM> EM> – выделение

<STRONG> STRONG>– усиленное выделение

Надо выделить фрагменты текста так, как в оригинале ТОК

  1. Слова «ТОК, НАПРЯЖЕНИЕ, СОПРОТИВЛЕНИЕ» впишем между тегами

<B> ТОК, НАПРЯЖЕНИЕ, СОПРОТИВЛЕНИЕ B>

  1. Поступим так со всеми выделенными полужирным шрифтом словами в файле.

  2. Слова «напряженность электрического поля (Е)» впишем между тегами

<I> напряженность электрического поля (Е)I>

  1. Поступим так со всеми выделенными курсивным шрифтом словами в файле.

  2. Сохраним изменения и обновим страницу в браузере.

Должен получиться документ, подобный исходному файлу ТОК.doc.(рисунок 2).

hello_html_5281a4c4.png

Рисунок 2.


  1. Сохраните изменения и закройте документы.

Практическая работа по HTML № 2

Задание № 1. Задание размеров заголовков

Используется шесть тегов заголовков: от <H1> до <H6> (тег двойной, т.е. требует закрытия). Каждому тегу соответствует конкретный стиль, заданный параметрами настройки браузера.

Для внесения изменений в файле 1.HTML надо открыть его в Блокноте:

  1. Пуск – Все программы – Стандартные – Блокнот.

  2. В окне Блокнота выбрать меню Файл – Открыть.

  3. В окне Открытие выбрать свою папку, в типе файлов выбрать –все, щелкнуть по 1.html и нажать кнопку открыть.

  4. Для открытия в браузере, просто дважды щелкнуть по значку файла 1.html.

Внесем изменения в файл 1.HTML-Блокнот

<Н1>ТОК, НАПРЯЖЕНИЕ, СОПРОТИВЛЕНИЕН1>

  1. Сохраним изменения в Блокноте и обновим в браузере. На экране вы увидите, что размер заголовка увеличился.

  2. Удалим парные теги <H1> H1>. Сохраним изменения и обновим страницу. Размер заголовка уменьшился.



Задание № 2. Установка размера, гарнитуры и цвета шрифта

Размер: Тег шрифта <FONT> позволяет задавать размер текущего шрифта в отдельных местах текста в диапазоне от 1 до 7. Для заголовка поставим 6 размер, для остального текста – 4.

  1. Внесите изменения в текст 1.HTML

справочник электрика

< FONT SIZE="6" >ТОК, НАПРЯЖЕНИЕ, СОПРОТИВЛЕНИЕFONT>

Электрический ток ( I ) - это упорядоченное движение …

умножите ампер на килоом, то напряжение получите совсем не вольтах.

FONT>

  1. Сохраните изменения в 1.html и обновите файл справочника в окне браузера. Шрифт должен увеличиться.

Гарнитура: Изменение гарнитуры текста выполняется простым добавлением к тегу <FONT> атрибута FACE: <FONT FACE = «название шрифта»>

  1. Внесите изменения в текст 1.HTML

<Н1> <FONT SIZE="6" FACE = “arial> ТОК, НАПРЯЖЕНИЕ, СОПРОТИВЛЕНИЕFONT>Н1>

  1. Сохраните изменения в 1.html и обновите файл справочника в окне браузера.

Цвет: <FONT COLOR = «название цвета»> – смена цвета текста

Red – красный; green – зеленый; Black – черный;

maroon - тёмно-красный; Olive – оливковый; navy – сине-зеленый;

Aqua - морской волны; purple – фиолетовый; teal - зеленовато-синий;

lime – известковый; fuchsia - ярко-малиновый; silver – серебристый;

white – белый; yellow – желтый; blue – голубой

gray – коричневый.

FONT>

  1. Внесите изменения в текст 1.HTML

<Н1> <FONT SIZE="6" FACE = “arialCOLOR=”navy”> ТОК, НАПРЯЖЕНИЕ, СОПРОТИВЛЕНИЕFONT>Н1>

  1. Сохраните изменения в 1.html и обновите файл справочника в окне браузера.


Задание № 3. Выравнивание текста по горизонтали

Абзац

<P> – абзац

P> – конец абзаца

Атрибуты тэга <P> для выравнивания текста

Атрибуту ALIGN может быть присвоено одно из 4-значений:

LEFT по левому

ALIGN = RIGHT по правому

CENTER по центру

JUSTIFY по ширине

  1. Внесите изменение в документ

ТОК, НАПРЯЖЕНИЕ, СОПРОТИВЛЕНИЕ

  1. Сохраните изменения в 1.html и обновите файл справочника в окне браузера.

Практические работы по HTML



Подайте заявку сейчас на любой интересующий Вас курс переподготовки, чтобы получить диплом со скидкой 50% уже осенью 2017 года.


Выберите специальность, которую Вы хотите получить:

Обучение проходит дистанционно на сайте проекта "Инфоурок".
По итогам обучения слушателям выдаются печатные дипломы установленного образца.

ПЕРЕЙТИ В КАТАЛОГ КУРСОВ

Краткое описание документа:

Предлагаю для ознакомления первых две практических работы по языку гипертекстовой разметки HTML для профессии "Электромонтер...", но могут быть использованы для любой другой технической специальности, т.к. используется материал по физике. Для создания работ использовался материал с сайта "Электрика, электротехника и электроника (справочно-информационный ресурс)", адрес доступа: http://eltechbook.ru/sovet.html.

Автор
Дата добавления 14.09.2016
Раздел Информатика
Подраздел Другие методич. материалы
Просмотров285
Номер материала ДБ-194067
Получить свидетельство о публикации
Похожие материалы

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