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

и получить 10 документов
и свидетельство СМИ

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

Лабораторная работа «Язык разметки гипертекста HTML»

  • doc
  • 24.04.2020
Публикация в СМИ для учителей

Публикация в СМИ для учителей

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

Добавить материал
Иконка файла материала 51. Лабораторная работа «Язык разметки гипертекста HTML».doc

Лабораторная работа «Язык разметки гипертекста HTML»

 

  1. На Рабочем столе создать папку с именем Задание_номер_группы
  2. Открыть редактор Блокнот
  3. Набрать  HTML-код (представленный ниже).

Надпись:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  1. Сохранить документ с именем Page1.html или Page1.htm (не забудьте, выбрать папку, при сохранении документа)
  2. Открыть сохраненный файл в браузере.

 

 

 

 

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

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

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

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

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

<i> … </i>           (ограничьте нужный фрагмент текста этими тегами)

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

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

  1. Сделать фон страницы серебристого цвета.

<body bgcolor=silver> … </body>.

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

 

  1. Оформить структуру страницы в виде таблицы.

Для этого добавить код после тега <hr> (горизонтальной линии):

<table border=1>

<tr> <td> 1 </td> <td> 2 </td>  <td> 3 </td> </tr>

<tr> <td> 4 </td> <td> 5 </td>  <td> 6 </td> </tr>

<tr> <td> 7 </td> <td> 8 </td> <td> 9 </td> </tr>

</table>

 

Примечание. <table border=1 width=100%> - начало таблицы, толщина границы = 1 пиксель, ширина = 100% (т.е. вся страница), <tr> - это строка, <td> - это ячейка. Тега для столбца не существует. Ячейки не могут быть пустыми, поэтому пока расставим цифры.

  1. Сохранить и проверить результат. Убедитесь, что таблица появилась.
  2. Необходимо объединить ячейки 2,5,8, для этого изменить код:

<table border=1>

<tr> <td> 1 </td> <td rowspan=3> 2  5  8 </td>  <td> 3 </td> </tr>

<tr> <td> 4 </td> <td> 6 </td> </tr>

<tr> <td> 7 </td> <td> 9 </td> </tr>

</table>

Примечание. Rowspan – объединяет ячейки по строкам. Ячейки 5 и 8 отдельно в других строках прописывать не надо.

В объединенную ячейку поместить набранный текст песни, т.е. перенести фрагмент кода с песней и вставить вместо «2 5 8»

  1. В остальные ячейки таблицы вставить графические изображения. Лучше всего использовать файлы формата jpg, jpeg, gif, png

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

 

Код для вставки изображения:      <img src=list.png>

list.png – это имя графического файла

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

  1. Вставить изображение в ячейки 4 и 6


  1. Необходимо выровнять картинку внутри ячейки, а также сделать фон ячейки белого цвета, чтобы не было видно границы картинки. Для этого измените код:

…………………………

</td>  <td> 3 </td> </tr>

<tr>

<td bgcolor=white align=center> <img src=list.png> </td>

<td bgcolor=white align=center> <img src=list.png>  </td> </tr>

<tr> <td> 7 </td> <td> 9 </td> </tr>

</table>

  1. Сохранить и проверить результат.
  2. В ячейки 1,3,7,9 поместить то же самое изображение, но уменьшенное в 2 раза. Размер можно указать в % или в пикселях

< img src=list.png width=50%>  или < img src=list.png width=200>

  1. Вставленные изображения выровнять в ячейке и залить ячейку белым цветом

  1. Сохранить и проверить результат.
  2. Сделать границы таблицы невидимыми, т.е. установить толщину=0 (border=0)
  3. В папке сделать копию файла Page1.html. Копию переименовать в Page2.html
  4. Открыть файл Page2.html в Блокноте
  5. Изменить цвет фона страницы на #FFFFE0 (цвет можно писать шестнадцатеричным кодом)
  6. Организовать после таблицы гиперссылку на Page1.html. Для этого после закрывающего тега </table> добавить код:

<a href=Page1.html> На 1 страницу </a>

  1. Сохранить и проверить результат.
  2. Аналогично создать гиперссылку из документа Page1.html в Page2.html, но разместить ее ДО таблицы
  3. Сохранить и проверить результат.

 

 

 

Лабораторная работа «Язык разметки гипертекста Все четные строки выделить курсивным начертанием В остальные ячейки таблицы вставить графические изображения Необходимо выровнять картинку внутри ячейки, а также сделать фон ячейки белого цвета, чтобы не было видно границы картинки

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

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