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

и получить 10 документов
и свидетельство автора

Изображение пользователя Шибеко Марина Николаевна Шибеко Марина Николаевна

ЛПЗ_по теме ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА HTML

  • doc
  • 25.04.2020
Публикация на сайте для учителей

Публикация педагогических разработок

Бесплатное участие. Свидетельство автора сразу.
Мгновенные 10 документов в портфолио.

Добавить материал
Иконка файла материала 60. ЛПЗ_по теме ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА HTML.doc

ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА HTML

ПОРЯДОК СОЗДАНИЯ HTML-ДОКУМЕНТА С ПОМОЩЬЮ ТЕКСТОВОГО РЕДАКТОРА БЛОКНОТ:

 

  1. Создать текстовый документ.
  2. Набрать текст HTML-документа.

 

  1. Сохранить документ в формате HTML, т.е. при сохранении указать расширение html или htm.

 

  1. Если вы сохраните документ правильно, то пиктограмма вашего файла будет выглядеть так: . Во всех остальных случаях вы его увидите таким: .

 

  1. Теперь созданный HTML-документ можно просмотреть или в браузере, или в виде HTML-кода. Для просмотра документа в браузере дважды щелкните по пиктограмме, загрузится браузер Internet Explorer, в котором будет отображаться ваш документ.

 

Для просмотра html-кода можно использовать несколько способов:

                        I.                   Вызвать контекстное меню файла ОТКРЫТЬ С ПОМОЩЬЮ -> БЛОКНОТ

                      II.                   В браузере, который отображает ваш  html-документ, вызвать контекстное меню на области просмотра и выбрать команду ПРОСМОТР HTML-КОДА

                   III.                   В браузере, который отображает ваш  html-документ, выбрать команду меню ВИД -> ПРОСМОТР HTML-КОДА

 

После изменения HTML-кода документ необходимо сохранить, после чего необходимо обновить содержимое окна браузера. Обновление можно осуществить несколькими способами, с помощью:

- команды меню ВИД ->ОБНОВИТЬ

- команды из контекстного меню ОБНОВИТЬ

- функциональной клавиши F5

- кнопки на панели инструментов

Примечание: При наборе HTML-кода можно использовать любой регистр, любое расположение строк. Между угловыми скобками и именем тега символ «пробел» не ставится!!

    

ПРАВИЛЬНО                                 ПРАВИЛЬНО                       НЕ ПРАВИЛЬНО

 

 

ЛАБОРАТОРНАЯ РАБОТА №1. ФОРМАТИРОВАНИЕ ТЕКСТА

Задание:

  1. Создать текстовый документ
  2. Ввести Html-код (представленный ниже).
  3. Сохранить документ с именем TEXT.HTML или TEXT.HTM (не забудьте, выбрать папку, при сохранении документа)
  4. Просмотреть созданный документ в браузере.

Text Box:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Рис.1. Html-код для Лабораторной работы №1

 

Рис.2. Результат Html-кода в браузере

 

  1. Изменить цвет и размер заголовка текста (цвет- gold- золотой, размер - 10) . Исправьте соответствующую строку html-кода:

<font color=gold size=10> Вальс-бостон </font>

  1. Сохранить и проверить результат.
  2. Выровнять весь текст документа по центру.

<p align=center> … </p>    или    <center>… </center>

  1. Сохранить и проверить результат.

 

  1. Все четные строки выделить курсивным начертанием.

<i> … </i>           (поместите в этом теге соответствующий текст)

  1. Сохранить и проверить результат.
  2. Добавить фрагмент текста (после заголовка): «сл. и муз. А. Розенбаума» Параметры форматирования: гарнитура – Times New Roman, размер – 6, цвет – золотой, выравнивание – по правому краю.

   <p align=right> <font color=gold size=6> сл. и муз. А.Розенбаума </font></p>

  1. Сохранить и проверить результат.

 

Рис.3. Результат Лабораторной работы № 1.

 

ЗАДАНИЕ ДЛЯ САМОСТОЯТЕЛЬНОЙ РАБОТЫ

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

Рис.5. Результат выполнения задания 2

Примечание: Для задания фона страницы и цвета текста:

<body bgcolor=black text=white> … </body>.

В качестве фона можно использовать графическое изображение:

<body background=1.jpg>… </body>

ЛАБОРАТОРНАЯ РАБОТА №2. СОЗДАНИЕ СПИСКОВ

Задание:

  1. Создать HTML-документ со следующим HTML-кодом:

Рис.6. Html-код для лабораторной работы №2

 

  1. Сохранить документ под именем lab2.html
  2. Просмотреть результат созданного HTML-документа в браузере

 

Рис.7. Просмотр результата

 

  1. Изменить тип нумерации списка, сохранить, посмотреть результат.

<ol type=I> ….. </ol>

  1. Изменить тип списка на маркированный, сохранить, посмотреть результат.

<ul type=square> … элементы списка ... </ul>

 

Рис.8. Нумерация римскими цифрами.

 

Задания для самостоятельной работы:

                Оформить комбинированный (сложный) список, представленный на рисунке.

 

Рис.9. Комбинированный (сложный) список

………………………………..

<ol>

   <li> Первый элемент нумерованного списка

   <li> Второй элемент нумерованного списка

   <li> Третий элемент нумерованного списка

   <li> Четвертый элемент нумерованного списка

   <li> Пятый элемент нумерованного списка

   <li> Шестой элемент нумерованного списка

            <ol type=a>

<li> Первый элемент второго нумерованного списка

<li> Второй элемент второго нумерованного списка

<li> Третий элемент второго нумерованного списка

            </ol>

   <li> Седьмой элемент нумерованного списка

………………………………………………………………………………………

 

 

 
 
 

 

 

 

 

 

 


ЛАБОРАТОРНАЯ РАБОТА №3. СОЗДАНИЕ ТАБЛИЦ

 

Рис.10. Html-код для самостоятельной работы

ЛАБОРАТОРНАЯ РАБОТА №3. ВСТАВКА ГРАФИЧЕСКИХ ИЗОБРАЖЕНИЙ

Задание:

  1. Найти графическое изображение (формата jpg, gif или png), скопировать в вашу папку.
  2. Создать HTML-документ со следующим HTML-кодом:

<html>

<head>

</head>

<body>

<center>

<font face=arial color=blue size=4>

На страницу можно помещать графические изображения

</font>

<br>

<br>

<img src=animal.jpg>

</center>

</body>

</html>
 
 

 

 

 

 

 

 

 

 

 

 


  1. Вместо выделенного текста укажите имя вашего графического изображения, обязательно с указанием расширения.

 

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

<img src=1.gif> или <img src=C:\Документы\Для лаб_Html\1.gif>

 

  1. Если изображение большое (или маленького) масштаба, то можно указать его размеры для отображения, в процентах или пикселах.

 

<img src=animal.jpg width=50%> ширина указана в % (от общей ширины окна браузера)

<img src=animal.jpg width=200> ширина указана в пикселах

 

ЛАБОРАТОРНАЯ РАБОТА №4. СОЗДАНИЕ ТАБЛИЦ

Задание:

  1. Создать HTML-документ со следующим HTML-кодом:

Рис.14. HTML-код для лабораторной работы №4

 

  1. Сохраните и сравните результат.

Рис.15. Результат

 

  1. Задайте ширину таблицы не в процентах, а в пикселах.

<table width=200 border=1>

  1. Заполните таблицу необходимыми данными.

    2.
  2. Добавьте две строки в таблицу, заполните соответствующим содержимым:

 

CTRL+A

 

ALT+F4

 

 

  1. Для фона ячеек заголовочной части использовать зеленый цвет.

<th bgcolor=green> ... </th>

  1. Для фона ячеек основной части использовать желтый цвет.

<td bgcolor=……> ... </td>

 

Задания для самостоятельной работы:

                Оформить, используя возможности языка HTML, таблицу.

 

 Расписание занятий

Понедельник

Вторник

8-00

Электротехника

лекция

С-104

10-00

Химия

лекция

СП-135

10-00

Электротехника

практика

С-242

12-00

Психология

практика

СП-108

 

Примечание: Для объединения ячеек используется тег:

     <td colspan=N> ... </td>  - объединение N столбцов

<td rowspan=N> ... </td> - объединение N строк

 

ЛАБОРАТОРНАЯ РАБОТА №5. СОЗДАНИЕ ГИПЕРССЫЛОК

 

Гиперссылки бывают нескольких видов:

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

- на другой документ или ресурс

 

Задание:

  1. Создать HTML-документ со следующим содержанием:

 

Примечание: Для слова гиперссылка нужно использовать такой код:

<a href=1.html> гиперссылка </a>

  1. Сохранить документ с именем 1.html. Сравнить результат.
  2. Создать html-документ, вставить графическое изображение. Для графического изображения использовать такой код (вместо многоточия вставьте имя объекта):

<a href=1.html> <img src=……………………> </a>

  1. Сохранить второй документ  с именем 1.html в той же папке, где сохранен файл 2.html.
  2. Открыть файл 1.html в браузере, щелкнуть по гиперссылке (должен открыться другой документ). В файле 2.html щелкнуть по графическому изображению (должен открыться документ 1.html).

 

Таблица цветов

 

Аквамарин

 

aqua

#00FFFF

Белый

 

white

#FFFFFF

Желтый

 

yellow

#FFFF00

Зеленый

 

green

#008000

Золотистый

 

gold

#FFD700

Индиго

 

indigo

#4B0080

Каштановый

 

maroon

#800000

Красный

 

red

#FF0000

Оливковый

 

oliv

#808000

Пурпурный

 

purple

#800080

Светло-зеленый

 

lime

#00FF00

Серебристый

 

silver

#C0C0C0

Серый

 

gray

#808080

Сизый

 

teal

#008080

Синий

 

blue

#0000FF

Ультрамарин

 

navy

#000080

Фиолетовый

 

violet

#EE80EE

Фуксиновый

 

fuchsia

#FF00FF

Черный

 

black

#000000

 

 

               


ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА HTML Примечание: При наборе HTML -кода можно использовать любой регистр, любое расположение строк Рис.2. Результат Html -кода в браузере ЗАДАНИЕ ДЛЯ САМОСТОЯТЕЛЬНОЙ РАБОТЫ Рис.7. Просмотр результата Рис.9. Комбинированный (сложный) список ……………………………… ЛАБОРАТОРНАЯ РАБОТА №3. ВСТАВКА Задание: Создать HTML -документ со следующим Добавьте две строки в таблицу, заполните соответствующим содержимым: Примечание: Для слова гиперссылка нужно использовать такой код: <a href=1

Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.

Посмотрите также

Мы используем Cookies

Продолжая использовать наш сайт, вы соглашаетесь с политикой использования Cookies. Это файлы в браузере, которые помогают нам сделать ваш опыт взаимодействия с сайтом удобнее.