Поделиться
Практическая работа «Неупорядоченные списки».docx
Практическая работа «Неупорядоченные списки»
Тип урока – Совершенствования знаний, умений и навыков
Вид урока – учебный практикум
Ресурсы: компьютеры, Visual Studio Code.
Требование:
· Каждый ученик должен сделать 3 страницы
· Создать свою папку на рабочем столе
· Название страницы должно соответствовать его заданию
Напоминание:
· Текст страницы записывается после тега <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>
· Фреймы
<html>
<head>
<title>фреймы
</title>
</head>
<frameset>
</frameset>
</html>
Отсутствие тега <body> компенсирует новый тег <frameset> - установить фрейм или набор фреймов
<frameset rows="15%,15%,70%"> - такая запись говорит о том, что будет три
горизонтальных окошка где последнее займет 70% площади окна браузера, а первые
два по 15%.
<frameset
cols ="200,240,200"> - здесь три окна расположены вертикально ширина которых указана в
пикселях.
<frameset
rows="100,*,180"> -
такая запись значит, что первое и третье окно будут иметь ширину 100 и 180
пикселей соответственно, а второй фрейм займет всю оставшеюся площадь.
<html>
<head>
<title>фреймы</title>
</head>
<frameset
rows="15%,15%,70%">
<frame
src="logotype.html">
<frame
src="menu.html">
<frame
src="text.html">
</frameset>
</html>
Logotype,menu,text-3 дополнительные страницы.
· Неупорядоченные списки
<ul>
<li> Пункт
первый..
<li> Пункт
второй..
<li> Пункт
третий..
</ul>
· Виды отображения неупорядоченных списков
Пример:
<ul>
<li type="disk"> кружок,
диск (по умолчанию)
<li type="circle"> полый круг
<li type="square"> квадрат
</ul>
· Размер текста
<font size=’’ ‘’>Текст</font> или вместе с цветом <font color=" " size=" ">Текст</font>
Практическое задание
· Сделать 3 сайта
· Цвет страниц: отличный от белого
· Цвет текста: отличный от черного
Составляющие 1 сайта:
· Заголовок:
· «Известные ученые по математике и их открытия»
· Выравнивание по центру
· Изображение:
· Любое изображение, связанное с математикой
· Выравнивание по центру
· Размер:300 на 300
· 3 ФИО ученных:
· Использовать неупорядоченный список(3 разных вида)
· Каждая фамилия- это ссылка на новую страницу
· Размер текста:5
Составляющее остальных 3 сайтов.
· Заголовок:
· ФИО ученого, годы жизни
· Выравнивание по центру
· Изображение (портрет ученого):
· Размер 400 на 400
· Выравнивание по центру
· Текст:
· Информация об ученом и его открытии
· Кнопка:
· 1 кнопка(Вернуться к списку ученых)
Пример
Скачано с www.znanio.ru
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
