1.84M

Category:

internet

Основы CSS. Урок 6

3.

Повторение
Повторим материал прошлой темы и
выполним интерактивные упражнения:
Интерфейс
HTML
3

Как пройдет
наше занятие
Познакомимся с основными тегами,
используемыми для создания списков
1
2 Научимся добавлять ссылки
3 Рассмотрим вставку видео на веб-страницу
4
Познакомимся с CSS и встроенными таблицами
стилей
4

5.

ССЫЛКИ
5

6.

ГИПЕРССЫЛКИ
Гиперссылки —
это элементы на вебстраницах, которые
позволяют переходить
по другим страницам
или ресурсам при клике
на них.
6

7.

ГИПЕРССЫЛКИ
ВНУТРЕННИЕ
ВНЕШНИЕ
Внутренние гиперссылки
ведут на другие страницы или
разделы внутри одного и того
же веб-сайта. Помогают
улучшить навигацию.
Внешние гиперссылки ведут
на страницы других сайтов.
Служат для вставки
дополнительной информации.
7

8.

ВНУТРЕННИЕ
ГИПЕРССЫЛКИ
За вставку гиперссылок отвечает парный тег
<а>.
8

9.

ВНУТРЕННИЕ
ГИПЕРССЫЛКИ
И его атрибут href. После этого атрибута
записывается название файла. Файл должен
быть в той же папке, что и html-документ
9

10.

ВНУТРЕННИЕ
ГИПЕРССЫЛКИ
Далее тег <a> закрывается и между этим
парным тегом пишем слово, на которое
можно будет перейти по гиперссылке.
10

11.

ВНЕШНИЕ
ГИПЕРССЫЛКИ
Чтобы вставить внешнюю гиперссылку на сайт,
необходимо после href вставить ссылку.
11

12.

ПРАКТИЧЕСКАЯ
РАБОТА
12

13.

ГИПЕРССЫЛКИ
Самостоятельная работа
Задание: Продолжаем работу с сайтом вашего
любимого мультфильма. Создайте две
гиперссылки. Первая – внешняя на страницу с
трейлером «Трейлер». А вторая на страницу с
описанием мультфильма
13

14.

ГИПЕРССЫЛКИ
Результат работы
14

15.

СПИСКИ
1
5

16.

СПИСКИ?
Списки — это
структурированные
элементы, которые
используются для
отображения связанных
данных в виде
последовательности.
1
6

17.

СПИСКИ
Упорядоченные
Упорядоченными списками
являются нумерованные
списки
Неупорядоченны
е Неупорядоченными списками
являются маркированные
списки
17

18.

Неупорядоченные
списки
За вставку неупорядоченных
списков отвечает парный тег
<ul>
18

19.

Неупорядоченные
списки
list item
(элемент списка)
unordered list
(неупорядоченный список)
Под тегом <li>
подразумевается элемент
списка. Каждый новый
элемент записывается под
новым тегом <li>.
19

20.

Неупорядоченные
списки
Изменение маркера:
Чтобы изменить маркер, необходимо указать
атрибут type.
20

21.

Неупорядоченные
списки
Изменение маркера:
У атрибута type
следующие значения:
disc
circle
square
○
■
21

22.

Упорядоченные
списки
За вставку упорядоченных
списков отвечает парный
тег <ol>
22

23.

Неупорядоченные
списки
list item
(элемент списка)
ordered list
(упорядоченный список)
Под тегом <li> подразумевается
элемент списка. Каждый новый
элемент записывается под
новым тегом <li>.
23

24.

Неупорядоченные
списки
Изменение маркера:
Чтобы изменить маркер, необходимо указать
атрибут type и атрибут start, который
позволяет начать с другой нумерации.
24

25.

Неупорядоченные
списки
Изменение маркера:
У атрибута type
следующие значения: 1, i, I, a, A
25

26.

ПРАКТИЧЕСКАЯ
РАБОТА
26

27.

СПИСКИ
Самостоятельная работа
Задание: Продолжим работать над нашим сайтом
мультфильма. Перечислите с помощью списка маркированного
всех героев мультфильма. А с помощью нумерованного
определите самых любимых героев. На 1 место поставьте
любимого, на второе менее любимого и так до последнего –
самый не любимый персонаж
27

28.

СПИСКИ
Результат работы
28

29.

ПЕРЕРЫВ
2
9

30.

ВСТАВКА ВИДЕО И
АУДИО НА СТРАНИЦУ
3
0

31.

КАК ВСТАВИТЬ
ВИДЕО?
Чтобы вставить видео в HTML, используйте тег
<video>. Вот простой пример:
Подобный блок находим в разделе Media. Вместо
URL вставляем url на видео
31

32.

КАК ВСТАВИТЬ
ВИДЕО?
Чтобы вставить видео в HTML, используйте тег
<video>. Вот простой пример:
Посмотрим, как это выглядит при предварительном просмотре
32

33.

КАК ВСТАВИТЬ
ВИДЕО?
Чтобы вставить видео в HTML, используйте тег
<video>. Как это выглядит в html-документе.
33

34.

КАК ВСТАВИТЬ
ВИДЕО?
Чтобы вставить видео из интернета, например, с
YouTube, используйте тег <iframe>. Вот пример:
Замените ID_видео на идентификатор нужного
видео.
Готовый фрейм можно взять прямо на
странице видео на YouTube. Нажмите
«Поделиться» под видео, затем выберите
«Встроить» (или «Embed»). Скопируйте
предложенный HTML-код и вставьте его в свой
документ.
9

35.

КАК ВСТАВИТЬ
ВИДЕО?
Чтобы вставить видео из интернета, например, с
YouTube, используйте тег <iframe>. Как это
выглядит:
9

36.

ВСТАВКА ВИДЕО
Самостоятельная работа
Задание: Вставьте в ваш проект видео из
мультфильма. Например, любимый фрагмент.
36

37.

ПЕРЕРЫВ
37

38.

ОСНОВЫ CSS
38

39.

ОСНОВЫ CSS
CSS (Cascading Style
Sheets) – каскадные
таблицы стилей – набор
правил или свойств,
которые описывают, как тот
или иной элемент или
группа элементов будут
отображаться на экране
монитора в браузере.
3
9

40.

Возможности CSS
Осуществление выбора элемента,
к которому будет применен стиль
Создание блоков и изменение их
стиля
Управление шрифтом на странице
Создание стилей для текста
Управление фоном страницы
Управление списками
40

41.

Использование CSS
Для того, чтобы использовать
CSS в Edublocks, вам
достаточно перейти в раздел
Style
41

42.

Использование CSS
Перейдя в раздел Style мы видим следующие разделы и блоки:
42

43.

Использование CSS
Добавим тег <style> из раздела <style> на рабочую область. И
теперь необходимо в тег <style> добавить тег на изображении.
После записываем h1 в поле, к нему будут применяться свойства
43

44.

Использование CSS
Выбираем из раздела Text свойства. Вставляем под тег
h1, так как редактировать будем именно его.
44

45.

ОСНОВЫ CSS
Самостоятельная работа
1. Работаем в прежнем файле.
2. Добавьте информацию на сайт на любую тему.
45

46.

ОСНОВЫ CSS
Результат работы
46

47.

ОСНОВЫ CSS
Цвет любого текста можно задать с помощью
атрибута color:
47

48.

ОСНОВЫ CSS
Цвет можно задать:
1. С помощью буквенночисловым кодом, для
этого используй
символ #:
2. С помощью палитры
RGB
3. С помощью названий
цветов
48

49.

ОСНОВЫ CSS
Самостоятельная работа
1. Измените цвет заголовка h1.
49

50.

ОСНОВЫ CSS
Шрифт можно задать с помощью
атрибута font-family: sans-serif
Шрифт — это набор букв и символов,
написанных в определённом стиле.
с засечками serif:
текст
без засечек sans-serif:
текст
Примеры:
font-family: Georgia, serif;
font-family: "Gill Sans", sans-serif;
font-family: cursive;
50

51.

ОСНОВЫ CSS
Самостоятельная работа
1. Измените шрифт заголовка h1 и h2, и шрифт абзаца.
51

52.

ОСНОВЫ CSS
Размер текста: высота строки в пикселях — font-size
52

53.

ОСНОВЫ CSS
Самостоятельная работа
1. Измените размер заголовка h2, абзаца и подвала.
53

54.

ОСНОВЫ CSS
Выравнивание текста — text-align
center — выравнивание по
центру страницы;
right — по правому краю;
left — по левому краю,
значение по умолчанию.
54

55.

ОСНОВЫ CSS
Самостоятельная работа
1. Измените выравнивание заголовка h1,h2 и подвала.
55

56.

ОСНОВЫ CSS
Цвет фона документа определяется следующим
свойством background-color
56

57.

ОСНОВЫ CSS
Самостоятельная работа
1. Измените фон веб-страницы и определите её цвет.
57

58.

ОСНОВЫ CSS
Изображение фона документа определяется
следующими свойствами background-image,
background-size, background-repeat
background-image – вставляет
изображение
background-position –
определение начальной позиции
фонового изображения
background-repeat – запрет на
повтор изображения
58