4.72M

Категория:

Интернет

Похожие презентации:

Структура HTML-документа. Форматирование текста

Введение в HTML, структура HTML-документа, форматирование текста

Создание сайтов на HTML 5 и СSS

Введение в HTML. Теги и их атрибуты. Структура HTML-кода

HTML основы. Структура HTML-документа

HTML 5. Форматирование текста

Основные понятия языка гипертекстовой разметки документов HTML. Структура html-документа

Структура HTML-документа

Структура документа HTML

Теория. HTML 5

Основы HTML. Структура HTML документа. Работа с текстом (теги заголовков и параграфов). Работа с изображением. Урок 5

1.

Урок 5. ОСНОВЫ HTML. СТРУКТУРА
HTML ДОКУМЕНТА. РАБОТА С
ТЕКСТОМ (ТЕГИ ЗАГОЛОВКОВ И
ПАРАГРАФОВ). РАБОТА С
ИЗОБРАЖЕНИЕМ

3.

Повторение
Повторим материал прошлой темы и
выполним интерактивные упражнения:
https://learning
apps.org/38720
https://learning
501
apps.org/24982
693
3

Как пройдет
наше занятие
Узнаем, что такое HTML и познакомимся с его
основами
1
Познакомимся со структурой HTML2 документа
Рассмотрим основные команды работы с
3 текстом и изображением
4 Создадим свою первую веб-страницу
4

5.

ОСНОВЫ HTML
5

6.

КАК ВЫ ДУМАЕТЕ: ЧТО ТАКОЕ
WEB-СТРАНИЦА?
6

7.

ЧТО ТАКОЕ WEBСТРАНИЦА?
Web-страница –
текстовый файл, в котором
описано размещение материала
на экране.
Браузер – программа для
просмотра Web-страниц на
экране (Yandex, Chrom, Safari,
Tor, Mozilla Firefox, Opera).
7

8.

ОСНОВЫ HTML
HTML = Hypertext Markup
Language
(язык разметки гипертекста)
images
HTML – это не язык
программирования!
sail.jpg
HTML-страница – это
текстовый файл (Блокнот)
bee.wav
man.jpg
clock.avi
sunset.jpg
ball.swf
8

9.

EDUBLOCKS
9

10.

EDUBLOCKS
Edublocks — это образовательная
платформа, предназначенная для
обучения программированию.
10

11.

EDUBLOCKS
Чтобы начать работу в EduBlocks
перейдем по ссылке на платформу:
https://edubl
ocks.org/
11

12.

EDUBLOCKS
После того, как вы прошли по ссылке, вы попадаете на
основную страницу:
12

13.

EDUBLOCKS
Регистрируемся на платформе:
13

14.

EDUBLOCKS
После регистрации вы окажетесь на главной странице:
14

15.

EDUBLOCKS
Создание нового проекта
Возвращение на главную страницу
Ваши проекты
Библиотека с обучающими материалами
15

16.

EDUBLOCKS
EDUBLOCKS поддерживает несколько языков
программирования и платформ, включая Python 3, HTML,
Micro:bit, CircuitPython и Raspberry Pi.
16

17.

EDUBLOCKS
Создадим новый проект и заполним о нем информацию.
Выберем режим проекта. В нашем случае это HTML
17

18.

EDUBLOCKS
Далее мы попадаем в редактор
1
4
2
3
18

19.

EDUBLOCKS
1. Палитра блоков
Отображается в левой части экрана палитра
блоков, сгруппированных по категориям,
таким как «Логика», «Циклы»,
«Переменные», «Математика» и «Функции».
Пользователи могут перетаскивать блоки из
палитры в область кодирования для
создания своих программ.
19

20.

EDUBLOCKS
2. Область кодирования
Центральная часть интерфейса, где
пользователи собирают код, соединяя
блоки.
20

21.

EDUBLOCKS
3. Консоль вывода
Интерфейс включает в себя консоль,
где пользователи могут запускать
свои программы и просматривать
результаты или сообщения об
ошибках.
21

22.

EDUBLOCKS
4. Предварительный
просмотр кода
Ключевой особенностью EduBlocks
является возможность видеть
сгенерированный код вместе с
блоками.
22

23.

EDUBLOCKS
Для начала работы зайдем в любую вкладку палитры блоков и
выберем блок, например, основной
23

24.

EDUBLOCKS
Затем перетягиваем его в область кодирования. Поздравляем,
вы начали создавать свой код!
24

25.

EDUBLOCKS
Выполним интерактивное задание по интерфейсе Edublocks
Упражнения
25

26.

СТРУКТУРА HTMLДОКУМЕНТА
2
6

27.

СТРУКТУРА HTMLДОКУМЕНТА
9

28.

СТРУКТУРА HTMLДОКУМЕНТА
Тэг – это команда языка HTML, которую выполняет
браузер:
непарные тэги
вставить рисунок
9

29.

СТРУКТУРА HTMLДОКУМЕНТА
Тэг – это команда языка HTML, которую выполняет
браузер:
парные тэги (контейнеры)
открывающий
область действия тэга: описание
таблицы
закрывающий
9

30.

АТРИБУТ
Атрибут – это дополнительный
параметр, добавляющий
информацию о тегах. Хранит
данные, характеризующие
этот объект.
30

31.

СТРУКТУРА HTML-ДОКУМЕНТА
<!DOCTYPE html>
указывает, какой тип
документа может
ожидать веб-браузер
31

32.

СТРУКТУРА HTML-ДОКУМЕНТА
Шапка <head>, или
заголовок метаданных
документа, содержит все
метаданные сайта или
приложения.
32

33.

СТРУКТУРА HTML-ДОКУМЕНТА
Элемент <body>
содержит все элементы,
и в нем записывается
основной контент для
отображения на вебстранице.
33

34.

СОЗДАНИЕ ПЕРВОЙ
СТРАНИЦЫ
34

35.

Первая страница
Давайте создадим простую веб-страницу с заголовком,
подзаголовком и абзацем!
35

36.

Первая страница
Шаг 1. Добавим заголовок
Заголовок
36

37.

Первая страница
Шаг 1. Перетащим его в блок Body
Заголовок
37

38.

Первая страница
Шаг 1. Вместо Heading напишем:
Вместо 1 можно выбрать другой заголовок от 1 до 6. Это
означает его размер. Протестируйте самостоятельно
38

39.

Первая страница
Шаг 2. Добавим абзац P
Абзац
39

40.

Первая страница
Шаг 2. Добавим абзац P и впишем:
40

41.

Первая страница
Шаг 3. Запустите код
41

42.

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

43.

Создание HTMLДОКУМЕНТА
Самостоятельная работа
Задание: Создайте веб-страницу по теме: «Мой
любимый мультфильм». В теге <body> напишите
его название. Далее запустить и показать
преподавателю.
43

44.

Создание HTMLДОКУМЕНТА
Пример выполнения
44

45.

ПЕРЕРЫВ
4
5

46.

РАБОТА С ТЕКСТОМ
4
6

47.

ФОРМАТИРОВАНИЕ
ТЕКСТА
Заголовки
Существует шесть элементов заголовков разделов, <h1>, <h2>,
<h3>, <h4>, <h5> и <h6>, причем <h1> является наиболее важным,
а <h6> — наименее.
47

48.

ФОРМАТИРОВАНИЕ
ТЕКСТА
Атрибут:
ALIGN — определяет способ выравнивания заголовка по
горизонтали.
Возможные значения: left, right, center, justify.
48

49.

ФОРМАТИРОВАНИЕ
ТЕКСТА
Чтобы добавить эту
структуру выберем
пустой блок
49

50.

ФОРМАТИРОВАНИЕ
ТЕКСТА
Чтобы удалить блок –
выделим его и нажмем
кнопку Delete на
клавиатуре
50

51.

ФОРМАТИРОВАНИЕ
ТЕКСТА
Абзац
Тег <p> (от англ. paragraph — параграф) определяет текстовый
абзац.
Элемент <p> является блочным, всегда начинается с новой строки,
абзацы текста идущие друг за другом разделяются между собой
отбивкой.
51

52.

ФОРМАТИРОВАНИЕ
ТЕКСТА
Атрибут:
ALIGN — определяет способ горизонтального
выравнивания абзаца. Возможные значения: left,
center, right, justify. По умолчанию имеет значение
left.
52

53.

ФОРМАТИРОВАНИЕ
ТЕКСТА
Логическое выделение
Тег <strong>…</strong> выделяет жирным выбранный текст.
53

54.

ФОРМАТИРОВАНИЕ
ТЕКСТА
Логическое выделение
Тег <em>…</em> выделяет курсивом выбранный текст.
Данные теги являются парными.
54

55.

ФОРМАТИРОВАНИЕ
ТЕКСТА
Физическое выделение
(для выделения текста на экране )
<I>…</I> - курсив
<B>…</B> - жирный
<U>…</U> - подчёркивание
<S>…</S> - зачёркивание
55

56.

ФОРМАТИРОВАНИЕ
ТЕКСТА
Физическое выделение
56

57.

ФОРМАТИРОВАНИЕ
ТЕКСТА
Разрыв строки
Тег <br> осуществляет
разрыв строки, т.е.
практически аналогичен
нажатию Shift+Enter в
текстовом редакторе.
57

58.

ФОРМАТИРОВАНИЕ
ТЕКСТА
Черта. Тег <HR> осуществляет вставку в текст горизонтальную
разделительную линию.
58

59.

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

60.

РАБОТА С ТЕКСТОМ
Самостоятельная
работа
Самостоятельная
работа
1. Напишите в заголовок <h1> название вашего любимого
мультфильма.
2. В тег <p> напишите о сюжете вашего любимого
мультфильма.
3. Тегом <strong> выделите в тексте все повторения
названия.
4. Добавьте разрыв строки в тексте с помощью тега <br> там
где это необходимо.
60

61.

РАБОТА С ТЕКСТОМ
Пример выполнения
61

62.

РАБОТА С
ИЗОБРАЖЕНИЕМ
6
2

63.

РАБОТА С
ИЗОБРАЖЕНИЕМ
Для вставки изображений используется тег <img>.
Элемент допускает вставку изображений в форматах JPEG и Compuserve GIF. Последние
версии браузеров позволяют также использовать формат PNG.
Тег <img> не парный!
63

64.

РАБОТА С
ИЗОБРАЖЕНИЕМ
Чтобы вставить изображение с интернета в HTML, используйте тег <img> с атрибутом
src, указывающим на URL изображения. Вот пример:
Замените URL на адрес нужного изображения.
64

65.

РАБОТА С
ИЗОБРАЖЕНИЕМ
Выглядит это все вот так:
65

66.

РАБОТА С
ИЗОБРАЖЕНИЕМ
Замените URL на адрес нужного
изображения. URL изображения можно
получить, если оно размещено в
интернете. Для этого найдите
изображение на веб-странице.
Щелкните правой кнопкой мыши по
изображению. Выберите "Копировать
адрес изображения" или аналогичный
вариант. Затем вставьте скопированный
URL в ваш HTML-код.
66

67.

РАБОТА С
ИЗОБРАЖЕНИЕМ
src - обязательный параметр. Указывает адрес (URL) файла с изображением.
HEIGHT и WIDTH - определяют высоту и ширину изображения соответственно.
67

68.

РАБОТА С
ИЗОБРАЖЕНИЕМ
68

69.

АТРИБУТ
Параметр Alt содержит текстовое
описание изображения, которое не
обязательно, но невероятно полезно для
доступности – программы чтения с экрана
читают это описание своим
пользователям, если изображение не
может быть загружено по какой-либо
причине.
69