Поделиться
Практическая работа ««Style».docx
Практическая работа «Style»
Тип урока – Совершенствования знаний, умений и навыков
Вид урока – учебный практикум
Ресурсы: компьютеры, Visual Studio Code.
Требование:
· Каждый ученик должен сделать 1 страницу
· Создать свою папку на рабочем столе
· Название страницы должно соответствовать его заданию
Напоминание:
· Текст страницы записывается после тега <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>
· Упорядоченные списки
<ol>
<li> текст 1
<li> Текст 2
<li> Текст 3
</ol>
Атрибут type в сочетании с упорядоченным списком может иметь следующие значения:
Пример:
ol type="1">
<li>Во-первых
<li>Во-вторых
</ol>
Строчные буквы
<ol type="a">
<li>Во-первых
<li>Во-вторых
</ol>
Заглавные буквы
<ol type="A">
<li>Во-первых
<li>Во-вторых
<li>В-третьих
</ol>
Строчные римские цифры
<ol type="i">
<li>Во-первых
<li>Во-вторых
<li>В-третьих
<li>В-четвёртых
</ol>
Заглавные римские цифры
<ol type="I">
<li>Во-первых
<li>Во-вторых
<li>В-третьих
<li>В-четвёртых
</ol>
· Style
<p style=""> это параграф с индивидуальным стилем </p>
Пример:
<p style="color: #ff0000; font-size:12px"> это параграф с индивидуальным стилем</p>
Пример
<body style="background-color: #c5ffa0">
<h1 style="color: #0000ff; font-size:18px">Всё
о слонах</h1>
<p style="color: #ff0000; font-size:14px">На
этом сайте Вы найдёте любую информацию о слонах.</p>
<h2 style="color: #0000ff; font-size:16px">Купить
слона</h2>
<p style="color: #ff0000; font-size:14px">У
нас Вы можете по выгодным ценам приобрести лучших слонов!!</p>
<h2 style="color: #0000ff; font-size:16px">Взять
слона на прокат</h2>
<p style="color: #ff0000; font-size:14px">Только
у нас Вы можете взять любых слонов на прокат!!</p>
</body>
Практическое задание
· Сделать 1 сайт c применением style.
· Цвет страниц: отличный от белого
· Цвет текста: отличный от черного
Составляющие сайта:
· Фон: отличный от белого
· Заголовок:
· «Моя любимая книга»
· Выравнивание по центру
· Применение style(цвет любой( не черный), размер 30)
· Изображение:
· Любое изображение, связанное с выбранной книгой
· Выравнивание по центру
· Размер:300 на 300
· Текст
· Информация о книге: автор, название, краткий сюжет
· Размер текста:18 px
· Цвет отличающийся от заголовка(через style)
Пример
Скачано с www.znanio.ru
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
