Практическая работа HTML «Бегущая строка»

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

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

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

Иконка файла материала Практическая работа «Бегущая строка».docx

Практическая работа «Бегущая строка» 

Тип урока – Совершенствования знаний, умений и навыков

Вид урока – учебный практикум

Ресурсы: компьютеры,  Visual Studio Code.                                                                                             

Требование:

·         Каждый ученик должен сделать 4 страницы.

·         Создать свою папку на рабочем столе

·         Название страницы должно соответствовать его  заданию

Напоминание:

·         Текст страницы записывается после тега <body>

·         Выравнивание осуществляется с помощью тега

<p align=”……”> Текст, который выравнивается</p>

rightleftcenter

 

 

·         Переход на новую строку <br>

·         Цвет текста

<font color="      ">Текст</font>

 

 


Цвет на англ. яз.Цвет RGB

 

 

·         Цвет фона

<body bgcolor="    ">

 

 


Цвет RGBЦвет на англ. яз.

 

 

 

·         Заголовки

 

<h1> Первый заголовок </h1>

<h2> Второй заголовок </h2>

<h3> Третий заголовок </h3>

·         Стиль текста

·         Вставка изображения

<img src="foto.jpg">           foto.jpg-название файла с изображением

·         Вставка изображения с размерами

<img src="foto.jpg" width="180" height="240"> 
 height - Высота изображения.

width -Ширина изображения

·         Выравнивание изображения

·        

·          

 

·         Пример таблицы

<html>

<head>

<title>Иван</title>

</head>

<body>

<table border="10" width="300" height="300"> 

<tr>

    <td> 1 </td></p>

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

</body>

</HTML>

 

 

·         Ссылка

<a href= “путь к файлу”> Название ссылки </a>

·         Ссылка картинкой

<a href="путь к файлу"><img src="путь к изображению"></a>

·         «Прозрачная» таблица(верстка сайта таблицей)

<table border= “0”>……</table>

·         Видео

<video src="путь к видео" width="400" height="300" controls="controls">

                 </video>

 

·         Бегущая строка

 

Примеры бегущих строк

 

 

·         Кнопка

<button type="button" >

<a href="путь к файлу">Название ссылки </a>

</button>

·         Аудиофайл

<audio controls>

    <source src="путь к файлу ">

  </audio>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Практическое задание

·         Создать 4 страницы о себе

·                     1 страница-Главная

·                     2 страница-Спорт

·                     3 страница-Дом

·                     4 страница-Друг

 

·         1 страница(Главная):

·                     Заголовки: выравнивание по центру

·                     Табличная вёрстка сайта(1 столбец-текст, 2 столбец-изображение)

·                     Ссылка: кнопки на следующие страницы(4 шт.)

·                     Размер изображений:300 на 300

·                     Таблица: выравнивание по центру

·                     Цвет фона: отличный от белого

·                     Цвет текста: отличный от черного

 

Макет 1 страницы

 

 

 

·         2 страница(Спорт):

·                     Заголовки: выравнивание по центру

·                     Табличная вёрстка сайта(1 столбец-текст, 2 столбец-видео)

·                     Таблица: выравнивание по центру

·                     Ссылка: кнопки на следующую страницу и назад(2 шт.)

·                     Размер видео:400 на 300

·                     Цвет фона: отличный от белого

·                     Цвет текста: отличный от черного

·                     Бегущая строка: scroll

 

Макет 2 страницы

 

 

 

 

·         3 страница(Дом):

·                     Заголовки: выравнивание по центру

·                     Табличная вёрстка сайта(1 столбец-текст, 2 столбец-видео)

·                     Таблица: выравнивание по центру

·                     Ссылка: кнопки на следующую страницу, назад и на главную страницу (3 шт.)

·                     Размер изображение:300 на 300

·                     Цвет фона: отличный от белого

·                     Цвет текста: отличный от черного

·                     Бегущая строка: scroll (скорость 13)

 

Макет 3 страницы

 

 

 

 

 

 

 

 

·         4 страница(Друг):

·                     Заголовки: выравнивание по центру

·                     Табличная вёрстка сайта(1 столбец-текст, 2 столбец-изображение)

·                     Таблица: выравнивание по центру

·                     Ссылка: кнопки на следующую страницу, назад и на главную страницу (3 шт.)

·                     Размер изображение:300 на 300

·                     Аудиофайл

·                     Цвет фона: отличный от белого

·                     Цвет текста: отличный от черного

·                     Бегущая строка: scroll (скорость 13, снизу вверх)

 

Макет 4 страницы

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Пример

 

 

 


 

Скачано с www.znanio.ru