Next Lesson

Неделя 1

Создание расписания уроков в HTML Неделя 1

Цель:

Знакомство с языком HTML
Обучение написанию кода на HTML
Создание расписания уроков на HTML

Ожидаемые результаты:

После изучения проекта учащиеся:

– умение хорошо общаться с учителем
– анализ и обобщение информации
– формируется ответственный подход к обучению
– привыкание к самостоятельной работе
– самостоятельное логическое рассуждение и заключение
– Научиться писать код на HTML
– Понимание структуры языка HTML

Введение

HTML (Hypertext Markup Language) – это код, который используется для структурирования и отображения веб-страницы и её контента. HTML не является языком программирования; это язык разметки, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете. Он может быть сложным или простым, в зависимости от того, как хочет веб-дизайнер.

В данном проекте Вы изучите:

создание простого HTML-файла;
создание расписания уроков на HTML;
учится писать код на HTML.

Междисциплинарные связи:

Информатика (работа с языком программирования HTML)

Руководство учителю

Для оценивания проекта, на первой неделе, предоставьте данный материал (PBLrubrics) учащимся, для того чтобы:

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

— ученики самостоятельно смогли дать соответствующую оценку своим коллегам.

2. В начале урока рекомендуется:

— для побуждения интереса к проекту, задать несколько «наводящих вопросов», таких как:

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

Что представляет собой HTML: набор команд, который после обработки превращается в визуальное представление. С помощью языка разметки HTML браузер делает запрос по адресу, который ввел пользователь, и получает файл в формате «.html». Браузер распознает код, выбирает знакомые для себя сигналы: понимает, что написать словами, где поставить заголовок и какой именно. Таким образом код из файла преобразуется в необходимые визуальные объекты. Если вы сейчас находитесь на ноутбуке или компьютере, вы можете посмотреть, как любой блог будет выглядеть в HTML. Если вы щелкните правой кнопкой мыши в любом месте для Google Chrome и выберите “View Page Source”, вы увидите HTML-код этой страницы.

Язык HTML помогает структурировать информацию. Это могут быть команды добавить картинку, разбить текст на абзацы, добавить заголовки и подзаголовки, создать список, вставить таблицу, нарисовать какой-либо элемент. Вёрстка страницы будет выглядеть так, как её закодирует разработчик.

Анатомия HTML элемента

Основными конструкциями языка являются тэги. Все тэги HTML начинаются с “<” (левой угловой скобки) и заканчиваются символом “>” (правой угловой скобки). Как правило, существует стартовый тэг и завершающий тэг.

<title> Заголовок документа </title>

Завершающий тэг выглядит также, как стартовый, он отличается от него прямым слэшем перед текстом внутри угловых скобок. Некоторые тэги, такие, как <hr> (тэг, определяющий горизонтальную линию), не требуют завершающего тэга.

HTML не реагирует на регистр символов, на синтаксис. Тэги либо распознаются браузером, либо нет.

Простая HTML-страница состоит из трех тегов: <html>, <head> и <body>. В документе <head> и <body> используют только раз.

<html> идёт в документе сразу после «доктайпа» — обозначения типа документа. По нему браузер определяет версию HTML и понимает, как правильно отобразить страницу.

<head> хранит важную служебную информацию — заголовок страницы и кодировку.

<body> хранит содержимое страницы. Именно так код отображается в браузере. Тексты и картинки добавляются внутрь этого тега.

Как HTML работает на сайтах?

Давайте разберём, как браузеры отрисовывают веб-страницы с помощью HTML-файлов.

Принцип работы разметки следующий:

Вы вводите в адресную строку адрес сайта или страницы.
Браузер отправляет запрос по этому адресу и получает файл в формате HTML.
Код из полученного файла последовательно преобразуется в визуальные объекты.

Источники:

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

Лабораторная работа № 1.

Создание простого HTML-файла

Шаг 1.Создайте отдельную папку, в которой хранятся все файлы вашего сайта.

Шаг 2.Запустите программу текстового документа.

Шаг 3.Введите простой код файла HTML в Блокнот.

<HTML>
     <HEAD>
           <TITLE> Учебный файл HTML</TITLE>
     </HEAD>
     <BODY>
           Расписание занятий на вторник
     </BODY>
</HTML>

Шаг 4. Сохраните файл под именем tuesday.HTML (обязательно укажите тип файла HTML при сохранении) в личной папке

Шаг 5. Для просмотра Web-страницы используйте любую программу браузера (Google Chrome, Internet Explorer, Opera, Mozilla Firefox или другую). Для этого, не покидая программу Блокнот (сверните окно на панель задач), откройте личную папку и двойным кликом по файлу tuesday.HTML откройте окно браузера.

Лабораторная работа № 2.

Управление расположением текста на экране.

Шаг 1.Откройте текст Веб-страницы в блокноте (tuesday.HTML щелкните правой кнопкой мыши файл HTML 1 раз, откройте с помощью… и выберите приложение Блокнот).

Шаг 2.Внести изменения в файл tuesday.HTML, расположив слова Расписание, занятий, на вторник на разных строках.

<HTML>
<HEAD>
<TITLE>Учебный файл HTML</TITLE>
</HEAD>
<BODY>
 Расписание
 занятий 
 на вторник
</BODY>
</HTML>

Шаг 3. Сохраните текст с внесенными изменениями в файле tuesday.HTML (меню Файл | Сохранить).

Шаг 4. Откройте окно браузера, открыв отдельную папку и дважды щелкнув файл tuesday.HTML.

Изменилось ли отображение текста на экране?

Не удивляйтесь тому, что внешний вид вашей Web-страницы не изменился.

Лабораторная работа № 3.

Некоторые специальные команды для изменения текста

Тег перевода строки <BR> отделяет строку от последующего текста или графики. Тег абзаца <P> тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзац. Оба тега являются одноэлементными, тег <P> – двойной, т.е. требуется закрывающий тег.

Шаг 2. Внесите изменения в файл tuesday.HTML

<HTML>
<HEAD>
<TITLE>Учебный файл HTML</TITLE>
</HEAD>
<BODY>
 <P>Расписание</P>
 <BR>занятий<BR>
 на вторник
</BODY>
</HTML>

Шаг 3. Сохраните внесенные изменения, переключитесь на панели задач на программу браузера, обновите Web-страницу.

Шаг 4. Проанализируйте HTML-код, глядя на результат, который появляется в браузере.

Back to Course

Next Lesson