ТБ и правила поведения в кабинете информатики

Web-сайт представляет собой информационную систему, охватывающую 2 основных компонента:

1.25M

Категория:

Информатика

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

Основы языка разметки гипертекста HTML

Создание HTML. Примеры тегов с атрибутами

Язык HTML

Учебник по Html. Список основных тегов

HTML язык гипертекстовой разметки

Сложные теги. Таблица

Web-сайты и web-страницы

Тема урока: «Язык разметки гипертекста HTML»

Форматирование текста на web-странице

Дизайн web-страницы

Теги HTML и web-проектирование

1. ТБ и правила поведения в кабинете информатики

I. ТБ
до
начала
работы
на
компьютере
II. ТБ во время работы на компьютере
III. ТБ после окончания работы на
компьютере
IV. Правила поведения в аварийных
ситуациях
V. Гимнастика для глаз
1

2. Раздел 4: Web-проектирование

2
10 класс
Раздел 4:
Web-проектирование
2026 год.
10А – 18 уроков, 10Б – 20 уроков

3. Цели раздела «Web-проектирование»

3
Цели раздела
«Web-проектирование»
10.4.2.1 использовать HTML-теги при разработке
web-страниц
10.4.2.2 использовать CSS при разработке webстраниц
10.4.2.3 использовать готовые скрипты при
разработке web-страниц
10.4.2.4 применять HTML-теги для вставки
мультимедиа объектов на web-страницу

4. Наша цель научиться:

• создавать структуру документа HTML
• форматировать текст
• создавать списки и таблицы
• осуществлять вставку изображений
• организовывать гиперссылки
• использовать каскадные таблицы
стилей
• добавлять элементы мультимедиа
• использовать скрипты
4

5. Способы разработки веб-сайтов. HTML

10 класс. Раздел 4: Web-проектирование
Способы разработки
веб-сайтов. HTML
10.4.2.1 использовать HTML-теги
при разработке web-страниц
5

6. Основные понятия

Web-страница – основной документ,
используемый во всемирной паутине WWW.
Это комбинированный документ, который
может содержать текст, рисунки, таблицы,
диаграммы, анимированные изображения.
Web-сайт
–
обычно
содержит
информацию по какой-либо определенной
теме,
связанной
соответствующими
гиперссылками.
Набор web-страниц обычно размещается
на серверах в виде имени и адреса webсайта.

7. Web-сайт представляет собой информационную систему, охватывающую 2 основных компонента:

Компонент показа
(front-end)
Web-страница,
которую видят
посетители
Компонент
реализации
(back-end)
Набор аппаратнопрограммных средств,
при помощи которых
реализуется логика
работы сайта

8. Этапы разработки web-сайта

планирование
разработка элементов
программирование
тестирование
публикация
рекламирование
контроль

9.

Современный
этап
развития
Internet’а начался в начале 90-х годов
с появлением нового протокола обмена
информацией HTTP (HyperText Transfer
Protocol), вместе с этим протоколом
появилась и служба World Wide Web,
которая представляет собой обширную
сеть серверов HTTP, передающих
файлы через Internet.

10.

Основную
часть
этих
файлов
представляют собой Web-страницы –
специальные файлы, написанные на
языке
HTML
(HyperText
Markup
Language)
–
язык
разметки
гипертекста, разработанным Тимом
Бернерсом-Ли в 1989 году. Webстраницы публикуются в Internetе путём
размещения таких файлов на серверах
HTTP (Web-узлах). Документы HTML
обычно имеют расширение .htm или
.html.

11.

Гипертекст – это текст, в который
встроены
специальные
коды,
управляющие
дополнительными
элементами,
такими
как
форматирование,
иллюстрация,
мультимедийные вставки и гиперссылки
на другие документы.
Под разметкой понимается вставка
в текст этих кодов, определяющих то,
как
итоговый
документ
должен
отображаться
специальной
программой-браузером.

12. Теги НТМL

За основу модели разметки документов в
HTML принята теговая модель, т.е.
документ описывается как совокупность
контейнеров, каждый из которых начинается
и заканчивается тегами.
Теги НТМL-документов в большинстве
своем
просты
для
понимания
и
использования, ибо они образованы с
помощью
общеупотребительных
слов
английского языка, понятных сокращений и
обозначений.

13. Теги НТМL

НТМL-тег состоит из имени, за
которым
может
следовать
необязательный список атрибутов тега.
Текст тега заключается в угловые
скобки (< и >).
Простейший вариант тега - имя,
заключенное
в
угловые
скобки,
например <HEAD> или <i>.

14.

Чаще всего НТМL-теги состоят из
начального и конечного компонентов,
между которыми размещаются текст и другие
элементы документа. Начальные теги часто
могут содержать атрибуты, влияющие на
эффект, создаваемый тегом. Некоторые
атрибуты требуют указания значения, оно
отделяется от ключевого слова «=». Имя
конечного тега идентично имени начального,
но перед именем конечного тега ставится
косая черта (/). Конечный тег никогда не
содержит атрибутов.
Например, для тега стиля шрифта курсив <i> закрывающая пара представляет
собой </i>, для тега заголовка <ТIТLЕ>
закрывающей парой будет </ТIТLЕ>.

15.

Конечные теги никогда не содержат
атрибутов. В некоторых случаях конечные
теги в документе можно опускать. Самый
распространенный тег такого типа - тег
абзаца <Р>. Поскольку он используется в
документе очень часто, то его обычно ставят
только в начале каждого абзаца.
Если по ошибке в теге указано ключевое
слово, отсутствующее в языке НТМL, то тег
игнорируется целиком. При отображении
документа в браузере сами теги не
отображаются, но влияют на способ
отображения документа.

16. Структура документа

<html>
<HEAD>
<TITLE>
Название документа в заголовке окна
</TITLE>
</HEAD>
<BODY>
Содержимое страницы
</BODY>
</HTML>

17. Структура документа

1. <HTML> </HTML> - показывают
браузеру
о
наличии
HTMLдокумента
2. HTML-документ состоит из раздела
заголовка (<HEAD> </HEAD>) и тела
документа (<BODY> </BODY>)
3. <TITLE> </TITLE> - теги, отражающие
название документа в заголовке
окна браузера

18. Структура документа

<html>
<HEAD>
<TITLE>
Название документа
</TITLE>
</HEAD>
<BODY>
Содержимое страницы
</BODY>
</HTML>
1. Наберите в блокноте
данную программу,
заменив фразу «Название
документа» на фразу «Моя
первая страница». Фразу
«Содержимое страницы»
замените на фразу
«Привет, ВАШЕ ИМЯ! Это
твоя первая webстраничка! Удачи!!!».
2. Сохраните документ под
именем 1 в свою папку с
расширением htm или html
(1.htm или 1.html)
3. Покажите работу

19. Подведем итоги 1 урока:

1. Назовите два основных компонента, из которых
состоит web-сайт
2. Назовите этапы разработки web-сайта
3. Расшифруйте аббревиатуру HTML
4. Назовите разработчика языка HTML и год
разработки
5. Назовите расширение документов HTML
6. Дайте определение понятия гипертекст
7. Дайте определение понятия разметка
8. Что взято за основу модели разметки
документов в HTML? Объясните
9. Назовите основные теги структуры документов
HTML

20. Теги НТМL. Атрибуты тегов

Какого цвета фон страницы?
Какого цвета буквы?
Пример:
<BODY bgcolor=green text= yellow>
20

21.

22.

Тег
<P>
<BR>
Назначение
Новый абзац
Переход на новую строку

23.

24.

Тег
<sub>
<sup>
Назначение
Нижний индекс
Верхний индекс

25.

Многие
Web-дизайнеры
разбивают
содержание своих страниц на несколько
разделов, подобных главам в книге. Для
выделения
таких
разделов
и,
соответственно,
облегчения
жизни
читателей
вы
можете
использовать
заголовки.
В идеале заголовки действуют как
обычные мини описания, которые дают
представление о том, что излагается в
данном разделе.

26. Теги заголовков

• <H1> - заголовок наибольшего шрифта
• <H2>
• <H3>
• <H4>
• <H5>
• <H6> - заголовок наименьшего шрифта

27. Выравнивание заголовков

• <H1 ALIGN=CENTER> - по центру
• <H1 ALIGN=LEFT> - по левому краю
• <H1 ALIGN=RIGHT> - по правому краю
1. Назовите тег
2. Определите атрибут тега
3. Определите значение атрибута тега

28. Различные виды линий

• <HR> - рисует линию (одиночный тег)
Атрибуты
• COLOR - цвет линии
• SIZE - толщина линии (в пикселях)
• WIDTH - длина линии (в пикселях или процентах)
• ALIGN - смещение линии
• SHADE - пунктирная линия
Напишите команду, рисующую пунктирную
красную линию толщиной 20 пиксель, длиной 50%,
размещенную посередине строки
<HR COLOR=RED SIZE=20 WIDTH=50% ALIGN=CENTER
SHADE>

29. Списки

Создание списков
Списки
нумерованные
маркированные

30. Нумерованные списки <OL> </OL>

Нумерованные списки
<OL> </OL>
<OL TYPE="1">
<OL TYPE="i">
<OL TYPE="a">
<OL TYPE="I">
<OL TYPE="A">
По умолчанию
список нумеруется
1, 2, 3, …

31. 32. Нумерованные списки

• Если нумерованный список начинается
с определенного числа, то его задают
атрибутом START тега <OL>
<OL TYPE=“1" START= "3">
Список начинается с числа ___
<OL TYPE= "a" START= "2">
Список начинается с буквы ___
<OL TYPE= "I" START= "4">
Список начинается с числа ___
32

33. Маркированные списки <UL> </UL>

Маркированные списки
<UL> </UL>
<UL TYPE=“disс">
<UL TYPE=“circle">
При указании типа
маркировки важно
учитывать
регистр
написания слов
disc, circle, square.
<UL TYPE=“square"> По умолчанию
•__
список
•__
маркируется

34. 35. Добавление строки в список <LI> </LI>

Добавление строки в список
<LI> </LI>
Между <LI> и </LI> можно разместить
• Текст
• Теги для форматирования текста
• Списки
• Ссылки
• Изображения

36. Список определений (definition list)

• Представляет
такой
список,
который
содержит термин и определение к этому
термину. И таких пар термин-определение в
списке может быть множество. Для создания
списка определений применяются теги <dl> и
</dl>. Внутрь этих тегов помещаются
элементы списка.
• Каждый элемент списка состоит из термина и
определения. Термин помещается в теги
<dt> и </dt> (definition term), а определение в теги <dd> и </dd> (definition description).
36

37. 38. Многоуровневые списки

Иногда приходится
составлять список,
находящийся
внутри другого
списка.
Такие списки
называются
многоуровневые
Расписание
I. Понедельник
• Геометрия
• Информатика
II. Вторник
Химия
Биология
III. Среда
1. Казахский язык
2. Алгебра
38

39. Домашнее задание

1. §§ 1-2 (стр.105-113), знать этапы разработки webсайта, определения основных терминов, написание
тегов и их назначение.
2. Знать ответы на вопросы после параграфов.
3. Выполнить задания интерактивных уроков
Способы разработки веб-сайтов. HTML Урок 2.
Форматирование текста (шрифт, абзац, списки). Урок 1
4. Создать страничку Меню, файл сохранить под
именем «Меню_Фамилия» и отправить на почту
oknn@mail.ru (10A – до 18.00 18.01.26г., 10Б – до
18.00 19.01.26г.)

40. Практическая работа

Создать страницу «Меню»
• Заголовок на странице «Недельное меню»
размером Н4.
• Названия 7 дней недели обозначены римскими
числами.
• Между днями недели – линии разного цвета,
длины, толщины и смещения.
• Перечень трех блюд (первое, второе, напиток)
на каждый день обозначить разным видом
маркировки или нумерации.
• Файл сохранить под именем «Меню_Фамилия»

41. Недельное меню

I. Понедельник
1. Борщ
2. Гречка с курицей
3. Лимонад
II. Вторник
Солянка
Плов
Компот
III. Среда
A. Рассольник
B. Рис с тефтелей
C. Сок апельсиновый
Например
41

42. Возможный перечень блюд

Первое
Борщ
Щи
Уха
Солянка
Второе
Пюре с котлетой
Гречка с курицей
Плов
Жаркое
Напитки
Компот
Сок
Чай с молоком
Чай черный
Рассольник
Суп куриный с
клецками
Лапша домашняя
Суп с галушками
Манты
Макароны с
гуляшом
Рис с тефтелей
Лагман
Чай зеленый
Минеральная
вода
Лимонад
Чай с лимоном
42

43. Рефлексия

English Русский Правила