Практическая работа «Бегущая строка»
Тип урока – Совершенствования знаний, умений и навыков
Вид урока – учебный практикум
Ресурсы: компьютеры, Visual Studio Code.
Требование:
· Каждый ученик должен сделать 4 страницы.
· Создать свою папку на рабочем столе
· Название страницы должно соответствовать его заданию
Напоминание:
· Текст страницы записывается после тега <body>
· Выравнивание осуществляется с помощью тега
<p align=”……”> Текст,
который выравнивается</p>
· Переход на новую строку <br>
· Цвет текста
<font color=" ">Текст</font>
![]() |
|||
![]() |
· Цвет фона
<body bgcolor=" ">
![]() |
|||
![]() |
|||
· Заголовки
<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
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.