3.41M
Категория: ИнтернетИнтернет

Курс “Веб-разработка”

1.

ELEMENT
Урок 2. Курс “Веб-разработка”
www.element.com

2.

Если качество звука и видео
хорошее, отправьте эмоджи

3.

Какие виды заголовков
существует?
Поднимите руки, кто хочет ответить на вопрос

4.

Какой тег используется для
параграфа?
Поднимите руки, кто хочет ответить на вопрос

5.

Что такое <body> ?
Поднимите руки, кто хочет ответить на вопрос

6.

Цели нашего урока
● Познакомиться с элементами разделения контента;
● Познакомиться с элементами для выделения текста;
● Применить знания при разработке проектов;

7.

Элемент разделения
контента

8.

Тег div
Универсальный контейнер для
содержимого сайта. Используется
для создания структуры сайта.

9.

Этот элемент я
блочным и это
его содержим
будет начинат
строки, при эт
занимает всю
ширину.

10.

Тег span
Этот элемент обозначает «просто текстовый блок». То есть особенного
собственного смысла он не имеет. Также этот тег никак не изменяет
отображение текста.
<span class = “text”>Еще один текст</span>

11.

Где же использовать тег<span>?

12.

<br>
Переносит текст на следующую строку, создавая разрыв строки.

13.

<hr>
Cоздает горизонтальную линию на HTML-странице, может
использоваться в роли тематического разрыва.

14.

Элементы для форматирования
текста

15.

Что означает выделение
текста?
Поднимите руки, кто хочет ответить на вопрос

16.

Мы можем сделать текст
полужирным, добавить
курсив, подчеркнуть и т.д.

17.

<b> и <strong>
Элемент <b>
Задаёт полужирное начертания шрифта. Выделяет
текст без акцента на его важность.
Элемент <strong>
Задаёт полужирное начертание шрифта

18.

19.

<i> и <em>
Элемент <em>
Отображает шрифт курсивом, придавая тексту
значимость.
Элемент <i>
Отображает шрифт курсивом.

20.

21.

<ins>
Подчеркивает текст

22.

<del>
Перечёркивает текст. Используется для выделения текста, удаленного из
документа.

23.

Практическая часть

24.

Гарри Поттер и
философский камень

25.

ШАГ 1
Открываем редактор и создаем
новый файл.
Сначала перепишем начало
документа.

26.

ШАГ 2
Пишем заголовок сайта с
помощью тега <h1>

27.

ШАГ 3
Далее открываем тег <div> и перепишем основную информацию,
как Жанр, О книге.

28.

ШАГ 4
Добавим еще немного информации. Сохраняем файл.

29.

Результат

30.

Самостоятельная работа
Выберите вашу любимую
книгу, кино, мультик, аниме,
игра и т.д. и сделайте
подобный проект.
Используйте теги для
выделения текста.
Обязательно сохраните ваш
проект.

31.

English TIME
Content - контент
Bold - жирный
Italic - курсив
Underline- подчеркивание
Strong - сильный
Block - блок

32.

Рефлексия
Напишите что вам понравилось на
уроке в комментарии
English     Русский Правила