II четверть

10 grade

10.2А - Создание веб-страниц

В данном разделе рассматривается вопросы создания веб страниц при помощи стандартизированного языка разметки документов во всемирной паутине - HTML и использование формального языка для описания оформления внешнего вида документа - CSS.

Будете знать: знать и использовать элементы, атрибуты, значения для создания статичного сайта, способы улучшения внешнего вид страницы. Будете создавать и редактировать веб-страницу, редактировать документы средствами HTML. Значимым результатом изучения материала раздела станут навыки по создания сайтов для дальнейшего их использования.

Сэр Тимоти Джон Бе́рнерс-Ли OM — британский информатик, наиболее известный как создатель URI, URL, HTTP, HTML и Всемирной паутины (совместно с Робертом Кайо) и действующий глава Консорциума Всемирной паутины. Автор концепции семантической паутины, множества других разработок в области информационных технологий.

В 1989 году, работая в CERN, Бернерс-Ли предложил проект, известный как Всемирная паутина (англ. World Wide Web). Проект подразумевал публикацию гипертекстовых документов, связанных между собой гиперссылками, что облегчило бы поиск и консолидацию информации.

Проект Паутины был предназначен для учёных CERN и первоначально использовался во внутренней сети CERN. Для осуществления проекта Тимом Бернерсом-Ли (совместно с его помощниками) были изобретены идентификаторы URI (и, как частный случай, URL), протокол HTTP и язык HTML. Эти технологии легли в основу современной Всемирной паутины. В период с 1991 по 1993 год Бернерс-Ли усовершенствовал технические спецификации стандартов и опубликовал их.

10.2А - Создание веб-страниц

Основные теги HTML

10.1.2.2 объяснять структуру HTML документа;

10.1.2.3 использовать НТМL теги форматирования текста при разработке веб-страницы;

10.1.2.4 использовать НТМL теги форматирования абзацев при разработке веб-страницы;

10.1.2.5 описывать понятие атрибута тега;

10.1.2.6 определять значение атрибута тега.

- объяснять понятие HTML;

- объяснять, какие редакторы позволяют создавать и редактировать веб страницы;

- объяснять понятие элемента HTML и атрибута;

- различать основные теги HTML;

- объяснять назначение веб браузера;

- описывать структуру HTML страницы;

- объяснять назначение основных тегов HTML;

- понимать необходимость использования кодировки UTF-8;

- использовать текстовый редактор для написания кода;

- создавать веб страницу, используя теги, элементы, атрибуты;

- сохранять веб страницу и просматривать через веб-браузер.

Цели урока:

1. Какие элементы дизайна и навигации делают этот сайт удобным для пользователей?

​

2. Как данные сайты помогает пользователям быстро достигать своих целей (например, найти информацию или сделать покупку)?

​

3. Как дизайн и структура сайта влияют на общее впечатление пользователя?

​

4. Какие изменения вы бы предложили для улучшения удобства использования этого сайта?

HTML (Hyper Text Markup Language)

язык разметки гипертекста

– это язык для создания Web-ресурсов

Отступы в HTML-коде сами по себе не влияют на вид или дизайн сайта, поскольку HTML является языком разметки, который описывает структуру содержимого. Однако отступы имеют важное значение в следующих аспектах:

Читаемость кода: Отступы помогают программистам и разработчикам легче воспринимать структуру кода, что упрощает его чтение и понимание. Это особенно важно при работе с большими проектами, где код может быть сложным и запутанным.

Упрощение работы в команде: При совместной работе над проектом соблюдение единого стиля отступов помогает команде понимать код друг друга и облегчает его поддержку.

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

HTML-файл состоит из «головы» (заголовка) и «тела».

В заголовке указывается тип документа, его кодировка, язык, имя автора и прочая дополнительная информация.

Тело HTML-документа заключает в себе все информативное содержание

Технология HTML

состоит в том, что в обычный текстовый документ вставляются управляющие метки – тэги (англ. tag - метка) – команды языка HTML.

Кодировка UTF-8 — это стандарт, который позволяет веб-страницам отображать текст на разных языках и с различными символами, включая специальные и диакритические знаки. Использование метатега <meta charset="UTF-8"> в HTML-документе сообщает браузеру, что страница должна интерпретироваться с этой кодировкой, что обеспечивает правильное отображение текста.

Теги делятся на парные и непарные. Парные теги показывают диапазон влияния правила <название тега> … </название тега> и являются «контейнером».

Непарные теги сразу содержат название, атрибуты и являются только открывающимися <название тега, атрибуты, их значения>. Парные теги должны быть вложенными.

1. Создать папку SITE_имя_ученика на локальном диске D.

2. Запустить текстовый редактор Notepad++.

3. Ввести теги, определяющие структуру Web–страницы.

4. Ввести заголовок Web–страницы - «Я - изучаю HTML».

5. Ввести заголовок текста, отображаемый в браузере – «Мои первый сайт».

6. Сохранить набранный текст по следующему алгоритму: Файл - Сохранить как – выбрать место на компьютере Рабочий стол - папка SITE_имя_ученика в строке Имя файла указать index.html – Сохранить.

7. Открыть папку сайта на Рабочем столе. Запустить ярлык и посмотреть Web–страницу в браузере.

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

8 минут

Для редактирования кода программы, на ярлыке щелкнуть правой кнопкой мыши и выбрать Открыть с помощью – Notepad/Блокнот

Критерии оценивания:

Использует текстовый редактор для написания кода.

Дескрипторы:

- Выбирает текстовый редактор для создания вэб-страницы;

- Использует теги, определяющие структуру Web–страницы.

- Использует заголовок текста, отображаемый в браузере.

Основные теги редактирования текста

Учебник 72 страница

Найди тег для изменения цвета фона страницы в Интернете.

Создай веб-страницу аналогично представленной на рисунке, озаглавь страницу «Страница обо мне».

Критерии оценивания: Создает вэб-страницу используя парные теги для редактирования текста

Дескрипторы:

Использует тэг для заголовка текста

Использует тэг для горизонтальной линии;

Использует тэг для выделения жирным шрифтом;

Использует тэг для подчеркивания текста;

Использует тэг для курсива

Использует атрибут для определния цвета фона.

10 минут

1. Для чего нужны атрибуты?

2. Сколько атрибутов для тега можно добавлять?

3. Каков порядок записи атрибутов?

4. Про какие виды атрибутов ты узнал?

5. *Какие атрибуты считаются универсальными?

Атрибуты добавляют дополнительную информацию или свойства к элементам HTML, такие как стиль, идентификатор, класс или действие.

Для одного тега можно добавлять несколько атрибутов, нет ограничения на их количество.

Атрибуты записываются в любом порядке, но обычно их размещают после имени тега, начиная с обязательных и заканчивая необязательными.

Универсальными считаются атрибуты, которые могут применяться ко всем HTML-элементам, например, class, id, style, title и lang.

1. Веб страница состоит из…
2. Элемент — это…

3. Теги обычно парные:

4. Открывающий тег может содержать дополнительную информацию —….

5. Атрибуты позволяют…

​

<DOCTYPE html

title>Моя первая страница<title>

</head>

<body>

Я создал пробную страницу:)</h1>

<p>У меня почему-то не получилось

</body>

</html>.

​

Рассмотрите код страницы и найдите ошибки

Практическое задание: (Продолжить ранее созданный вэб-страницу)

15 минут

Добавь на веб-страницу следующие теги форматирования текста:

<strong>

<em>

<mark>

<small>

<del>

<ins>

<sub>

<sup>

и посмотри их эффект:

Оценить работу друг друга и сравнить результаты.

Индивидуальное задание

Рефлексия «Сэндвич»

Я желаю, чтобы …

У меня хорошо получилось…

Мне было трудно …

Я допустил ошибки в …

Конкурс веб страниц

Создают веб страницу с добавлением всех изученных тегов – заголовков, абзацев, разделения чертой, перехода на новую строку, атрибутов стиля и возможно другое.

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

Критерий оценивания

1.Набрал код по образцу – 1 балл.

2.Сохранил файл веб-страницы – 1 балл.

3.Страница рабочая (открывается через браузер) – 1 балл.

4.Использовал заголовок – 1 балл.

5.Использовал абзац – 1 балл.

6.Использовал выравнивание абзаца по центру – 1балл.

7.Использовал горизонтальную черту – 1 балл.

8.Применил цвет к линии – 1 балл.

9.Использовал background-color для цвета фона – 1 балл.

10.Использовал color для цветов текста – 1 балл.

11.Использовал font-family для текстовых шрифтов – 1 балл.

12.Использовал font-size для размеров текста– 1 балл.

13.Использовал text-align для выравнивания текста – 1 балл.

14.Форматирование страницы – 1 балл.