Документ HTML и WEB

Воображаемые уроки с вымышленными учениками

Цели

  1. Основная. Знакомство с языком разметки HTML и правилами оформления Кода HTML, принятыми в Роботландском университете.
  2. Образовательная. Формирование предметного тезауруса и логического стиля мышления.
  3. Деятельностная. Разработка прообраза шаблона для создания файлов htm.
  4. Развивающая. Знакомство с методом Системный подход.

Задачи

  1. Сформировать понятия документ HTML и Веб-страница.
  2. Познакомить с назначением базовых элементов документа HTML.
  3. Сформулировать требования ТЗ РУ к оформлению кода HTML.
  4. Сформировать понятие шаблона для удобного и быстрого создания документов, в частности, документов HTML.
  5. Обобщение. Элементы HTML — основной строительный материал кода HTML.

Инструменты

  1. Один из предлагаемых текстовых редакторов.
    • Любой текстовый редактор с минимальным интерфейсом и поддержкой файлов MS-DOS в кодировке CP-866.
    • Текстовый редактор Akelpad в режиме работы «Блокнот+» (настройка от «Объединения ЛиК»).
    • Редактор WordPad.
  2. Любой браузер.

Материалы

  1. Учебник Web-конструирование 2.
    • Тема 1 > 01. Простейшая HTML-страничка.
    • Тема 1 > 02. Структура HTML-кода > Головная часть HTML-программы.
    • Тема 1 > 02. Структура HTML-кода > Стиль записи кода программы.
    • Тема 1 > 06. Атрибуты тегов.
  2. Словари на «Академике» (сравните с Wikipedia).
  3. Википедия
  4. Прочее
    • Текстовый документ с именем «sample» и расширением «.htm» в формате CP-866 (ibm866) с предложением на русском языке, записанным в одну строку без разбивки на абзацы, расположенный в дежурной_папке (образец в архиве: sample.zip).

Три стороны одной медали одного гипертекста

Откройте папку «дежурная_папка». Мне хотелось бы узнать, какой орган у вас развит больше: пальцы или голова (в смысле «соображаловка»)? В этой папке находится файл «sample» (или «sample.htm» в зависимости от состояния переключателя Скрывать расширение для зарегистрированных типов файлов в Проводнике).

Скопируйте этот файл в свою рабочую папку.

Если кто-то поторопится и двойным щелчком откроет файл, то увидит в браузере «не-текст» и назовёт это веб-страницей.

Кто-то найдёт описание типа файла в Проводнике и назовёт это документом HTML.

Оба ответа можно посчитать верными, но не полными.

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

Подробнее. Термин плоский текст (англ. plain text) относится к такой форме электронного письма, в которой присутствуют только символы самого текста, символы табуляции, символы конца строк и нет разметки, отвечающей за структуру текста (заголовки, абзацы, таблицы, цитаты, списки…) и его визуальное представление (цвет, начертание, размер, шрифт, выравнивание…).

Консорциум W3C разработал стандарт MIME-типов файлов пересылаемых по Интернету. Файлы .htm имеют тип text/htm. Это указывает на то, что в файле содержится обычный текст, а формат этого содержимого, то есть того что записано текстовыми символами — код программы на языке HTML.

Уже во второй четверти рассмотрим ещё один тип файлов: text/css. Но об этом позже.

Проводник нам сообщил, что файл «sample.htm» это Документ HTML. Возможно мнения разделились: есть кто-то, кто считает что это веб-страница? Попробуем разобраться.

Стоит требовать объяснения, почему они считают именно так. Каким образом они узнали об этом. Можно развить полемику (максимум минуты на 2), что же это такое на самом деле: обычный текстовый документ, документ HTML или веб-страница?

Как можно узнать тип файла, не открывая его? Это важно для определения, какие программы могут быть использованы в работе с файлами этих типов. А работать нам придётся с разными: и с каскадными таблицами стилей (.css), и с изображениями (.png, .gif, .jpg, .svg), и со скриптами (.js) и с мультимедиа… Хотим ли мы содержимое файла только увидеть, или намерены его редактировать?

Проводя подобные опросы желательно ответ получить от каждого ученика, не акцентируя внимание на правильных и неправильных ответах: А вы как думаете?, А какое у вас мнение по этому вопросу?… Тому, кто затрудняется ответить, можно дать подсказку: Наверное, Согласен с предыдущим оратором?. Можно задавать дополнительные вопросы даже к правильным ответам: А почему вы думаете, что этот ответ правильный?. Главная задача — вовлечь в беседу, по возможности, всех учеников.

Разные ответы нужно фиксировать на доске. Если диалог живой, то каждый примет в нём участие. Аргументы в подтверждение разных мнений выслушают все, и у каждого будет возможность составить своё мнение или присоединиться к уже озвученному. А затем итоговое действие — обсуждение списка.

Можно использовать формулировки из ответов учеников или конкретизировать свои со ссылкой на их ответы, зачёркивать неправильные ответы на доске и озвучить правильный окончательный ответ. А к нему добавить практические действия для новичков — включить в Проводнике режим отображения рабочей области Таблица или в контекстном меню файла выбрать пункт Свойства.

Чтобы узнать, что же в этом файле, давайте заглянем в него. Выполним двойной щелчок.

Если кто-то заранее открыл файл в браузере, предложите им первым объяснить, что же произошло после того, как они выполнили двойной щелчок.

Ответ. Запустилась программа-браузер (имя_браузера), в рабочей области которой, отобразилось содержимое этого файла (имя_файла).

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

Слева в заголовке окна программы (на вкладке браузера) можно прочесть имя файла, открытого в рабочей области программы (вкладки). А имя самой программы можно прочесть либо там же, либо в одной из трёх последних строк контекстного меню кнопки окна на Панели задач.

Ученики должны усвоить, что никакой файл сам не открывается. Если выполнить двойной щелчок по файлу программы, то запустится выбранная программа. А если по файлу с данными — то операционная система (в данном случае Windows) запустит программу, соответствующую типу выбранного файла, а уже она прочитает файл и отобразит его содержимое в своей рабочей области.

Какая незадача… Мы выполнили двойной щелчок, запустился браузер и показал нам, содержимое файла. Но, вместо ожидаемых привычных букв, отобразились какие-то «букозявочки» и «кракозябры».

Помните, что файл HTML — обычный текстовый документ? Воспользуемся текстовым редактором, чтобы заглянуть в него с другой стороны.

Если вы пользуетесь программой Akelpad и он настроен правильно, то достаточно в контекстном меню файла выбрать пункт Изменить. Файл откроется в Akelpad автоматически, и далее совет «Редактирование файла, сохранённого в кодировке MS-DOS» можно пропустить.

Ученики уже знают, что в рабочей области окна программы отображается содержимое открытого файла. В данном случае файла «sample.htm». Того же самого, содержимое которого мы видим в окне браузера.

Не забудьте узнать у учеников, где найти название программы и как она называется.

В современных операционных системах Windows после версии XP редактировать штатными средствами файлы MS-DOS можно только в программе WordPad.

  1. Запустите программу WordPad. Самая важная работа с любой программой — это не только установить её на компьютер, но и настроить для комфортной работы. Сейчас мы её настроим.
    • Сначала откройте диалог Файл Параметры страницы….
    • Установите переключатель Ориентация > Альбомная и нажмите клавишу табуляции Tab.
    • Установите число «10» во всех четырёх полях ввода в блоке Поля, прыгая по ним клавишей Tab, и закройте диалог кнопкой Ok….
  2. Откройте диалог Файл Открыть.
  3. Перейдите в папку с открываемым файлом.
    • Если вы в Проводнике уже открыли рабочую папку, то из его адресной строки скопируйте путь доступа к ней.
    • Скопированный путь доступа вставьте в поле ввода Имя файла и щёлкните кнопку Открыть.
  4. В выпадающем списке Все документы Wordpad… выберите пункт Текстовые документы MS-DOS.

    В рабочей области окна будут отображаться только файлы с расширением «.txt» или будет пусто, если файлов этого типа в папке нет. Но нам-то нужен файл HTML.

  5. В поле ввода Имя файла введите *.htm и снова щёлкните кнопку Открыть.
  6. Откройте файл «sample.htm».

Таким образом можно пытаться открывать любые файлы в любой программе. Но лучше знать, какие программы могут работать с файлами выбранного типа. Если делать это наобум, то часто ничего хорошего из этого не выходит, и даже можно будет навредить операционной системе и пользователям.

Документ из файла «sample.htm» действительно похож на обычный текстовый документ и в нём всё в порядке. В текстовом редакторе нам и буквы понятны, и слова, и даже предложение тоже понятно. Но...

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

Браузер создаёт документ HTML на экране, выполняя код HTML, записанный в файле «.htm».

Но в файле «sample.htm» только обычный текст и нет никакого кода HTML. И что же делать?

Нужно написать программу на языке HTML, чтобы она подсказала браузеру, как правильно отображать буквы в документе.

Приступать к написанию программы ещё рано. У нас без ответа остался вопрос: Что это за файл, документ HTML или веб-страница? Чтобы ответить на него, нужно понять, что же обозначают эти названия.

Приставка «гипер» придаёт слову значение превышения предела, возвышение над нормой, или проще «сверх». Например, гипермаркет — сверх-магазин. В нём есть всё от еды до мебели. Но мы не собираемся ничего покупать и ничего продавать. Нас интересует другое слово с этой приставкой.

Гипертекст
Гипертекст — это текст, в котором имеются отсылки к другим его фрагментам и другим текстам. Мы можем читать гипертекст последовательно, как обычный, или, переходя по ссылкам к другим текстам и возвращаясь, читать их вместе как единый сверхтекст.
Примерами гипертекста в реальной жизни служат энциклопедии, словари и даже ваш реферат, если вы в него добавили список литературы или в сносках указали, откуда был взят материал. В виртуальной жизни гипертекстовые страницы — это то, что вы много раз видели в браузере.
В виртуальном мире для создания гипертекстовых документов служит язык программирования HTML. Как и любой другой язык, он имеет набор структурных и семантических элементов-слов и строгие правила их записи.
В этом языке предусмотрена возможность создавать ссылки на другие документы. Тем самым, обычный документ, размеченный кодом HTML, превращается в гипертекстовый. Читателю не надо бежать в библиотеку или рыться в старых газетах в поисках статьи. Достаточно щёлкнуть по ссылке и статья тут же будет доставлена ему на экран.
Код HTML
Код HTML — это программа на языке HTML, плоским текстом записанная в файл. Пользователь щелкает по файлу и видит документ на экране. Неграмотному пользователю кажется, что файл с кодом — это документ в «сонном» состоянии. Щелчок по файлу «пробуждает» (открывает) документ, и мы видим его на экране.
На самом деле файл — это не сам документ, а его код. С любым документом (даже плоским текстом) всегда связана программа-интерпретатор, которая читает код и строит документ на экране, выполняя этот код.
Код HTML тоже является гипертекстом. В текстовый файл нельзя вставить картинку, видеоролик со звуком и т. п. Нельзя даже изменить шрифт отдельного слова или пометить фрагмент текста «чуть-чуть немножко красненьким».
Поэтому в код программы встраивают ссылки на другие файлы: с правилами оформления текста, с изображениями, с фотографиями, с музыкой, с видеороликами или целыми фильмами и т. п. Браузер читает код HTML из файла. Двигаясь по ссылкам в коде он получает содержимое и из других файлов: текстовых, графических, мультимедийных и др. Всё, что им получено из этих файлов, он также помещает в создаваемую гипертекстовую страницу.
Собрав воедино все данные браузер формирует на экране документ HTML с текстом, картинками и фотографиями, аудио и видео роликами и пр.

Представим компьютер, возможно даже не подключенный к Интернету. Компьютер — это физический объект, состоящий из большого количества электронных, металлических и пластмассовых элементов. Во время его работы создаётся виртуальная среда, в которой программы и файлы можно видеть на экране. Отдельный компьютер, если он не подключен к сети, называется локальным.

документ HTML
документ HTML — это гипертекстовый документ, который браузер создаёт на экране, выполняя код HTML, записанный в файле «.htm» на локальном компьютере.

Усложним задачу. В мире существует множество компьютеров. Большинство из них проводами связано в единую сеть. Такая сеть называется Интернет. Это физический объект, состоящий из огромного количества компьютеров соединённых между собой различными средствами электромагнитной связи.

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

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

Веб-страница
Веб-страница — это гипертекст, размещённый в веб. Представьте, что эту фразу вы произносите в ответ на вопрос: Что такое веб-страница?. Причём объясняете это младшему брату, маме или дедушке. А сами поняли о чём эта фраза? Ну-ка попробуйте объясните это мне пятилетнему малышу.
Теперь подробнее. Если файл с кодом HTML размещён в веб то это статичная веб-страница. Документ один раз написали и выложили в Интернет, точнее в веб, для обозрения. Такая веб-страница будет выглядеть всегда одинаково, до тех пор пока документ не отредактируют.
Сегодня существует немало динамических веб-страниц, которые по запросу читателя автоматически серверными программами (PHP, ASP.NET и др.) создают гипертекстовые документы. Типичный пример — любая поисковая система, например, Яндекс. Каждому читателю возвращается одна и та же страница, но с разным контентом, в зависимости от запроса.

Теперь соберём это всё в кучу. Гипертекст это:

  • код HTML, размещённый в файле «.htm»:
  • документ HTML, построенный в рабочей области браузера в результате чтения кода HTML из файла «.htm»;
  • статичная веб-страница построенная на экране браузера в результате чтения кода HTML из файла «.htm», размещённого в веб;
  • и множество других динамичных веб-страниц созданных серверными программами и отображаемых в браузере.

Редактирование файла

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

Для выяснения проблемы с буквами снова открываем полемику. Строим рассуждение и подводим учеников к выводу из двух пунктов:

  • Компьютер (программа) выполняет действия не по желанию пользователя, а по полученным инструкциям.
  • Компьютер станет вашим «умным помощником», если вы станете для него «умным начальником».

Браузеру нужно объяснить, что вы просите его отобразить не странный текстовый документ, а именно документ HTML да ещё и с русским текстом. Пусть он «застегнётся на все пуговицы» и серьёзно приготовится к его прочтению. Уточним ему тип нашего документа: сдвинем текст на вторую строку, а в первой напишем !DOCTYPE html.

!DOCTYPE html
В документе HTML могут содержаться только элементы.

Формируемый код документа HTML после обсуждения ученики записывают в своих копиях файла «sample». Учитель дублирует запись кода на доске, ориентируясь на ответы учеников в процессе рассуждения, или корректирует их, если в рассуждениях были допущены ошибки.

Возможно, что кто-то из учеников заметит ошибку. Предложим ему объяснить, а новичкам убедиться, в том, что запись без угловых скобок — это действительно ошибка.

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

В тексте документа есть подсказка — «…могут содержаться только элементы». Элементы браузер понимает, как инструкции — он их читает и выполняет. Поместим нашу фразу в угловые скобки. Покажем, что она отличается от обычного текста.

!DOCTYPE html
В документе HTML могут содержаться только элементы.

Снова сохраните изменения в коде и снова обновите страницу в браузере. Он понял инструкцию о типе документа, выполнил её и на экране не отобразил. Но текст так и не исправился. Выходит, одной этой инструкции мало. Она лишь объявляет тип документа. А где же сам документ? Где он начинается и где заканчивается?

Нужен ещё один элемент, который укажет начало и конец документа. Дадим ему очевидное имя HTML, а текст разместим внутри него так же, как мы привыкли писать текст в скобках или в кавычках.

Начало и конец элемента в документе обозначается парой тегов. Имя открывающего тега (оно же и имя элемента) записывается в угловых скобках: HTML. Закрывающий тег отличается от открывающего тем, что между угловой скобкой и его именем без пробелов ставится наклонная черта: /HTML. Чтобы нам было удобнее отличать обычные слова в тексте от имён тегов, будем записывать их прописными (заглавными, большими) буквами.

Запишем открывающий и закрывающий теги в отдельных строках перед текстом и после него. Текст, оказавшийся внутри — это содержимое созданного элемента.

!DOCTYPE html
HTML
В документе HTML могут содержаться только элементы.
/HTML

Вот так мы элемент HTML описали в документе. Теперь уже и браузер понимает, что в документе не просто текст.

Снова сохраните изменения в коде и обновите страницу в браузере. Опять ничего не изменилось? Значит, и этих инструкций недостаточно. А что же мы такое написали?

Ответ. Элемент HTML — синтаксическая конструкция языка HTML. Его записывают, как правило, парой тегов (открывающий и закрывающий), размещая содержимое между ними.

Синтаксис любого языка — это набор правил. Их необходимо соблюдать при построении конструкций языка: словосочетаний, предложений и т. п. Если вы будете нарушать синтаксические правила русского языка, английского и др., то в лучшем случае вам поставят двойку или собеседник вас не поймёт, в худшем — вас поймут неправильно.

К чему приводит нарушение любых правил? Когда вы молча соглашаетесь с чем-то, вы киваете головой. Если отказываетесь — мотаете. Например, вы спрашиваете: Подскажите, пожалуйста, вокзал находится в той стороне?. Болгарин кивает вам в ответ и молча идёт дальше. Вам стоит идти в выбранном направлении? В Болгарии издревле жесты имеют противоположные привычным нам значения: кивать головой — «Нет», мотать — «Да». Кто допустил ошику? Вы в Болгарии на Солнечном берегу или он на экскурсии в Санкт-Петербурге — не важно. Вы не поняли друг-друга.

С языком HTML происходит то же самое. Есть синтаксические правила. Их разрабатывает консорциум w3c. Набор правил называется стандартом, в данном случае стандарт HTML5. Этот стандарт относится не только к написанию кода HTML, но и к его чтению.

Чтением кода занимаются браузеры и строго следует правилам, прописанным в стандарте. Читая документ HTML они формируют элементы, наделяют их соответствующими свойствами и определённым образом отображают на экране. Если вы допустите ошибку при записи кода, как у нас получилось с DOCTYPE, то браузер, строго следуя правилам, правильно выполнит неправильный код. Ну а, что произойдёт дальше — фантазируйте сами.

Браузер, как истинный английский дворецкий, с невозмутимым выражением лица будет молча ждать, пока вы закончите фразу оформите документ полностью. А мы пока только и объявили, что есть документ HTML, начинается тут и заканчивается там. А какие у документа особенности? Как в нём должны выглядеть символы? Мы об этом браузеру ничего ещё не «сказали». Нужны дополнительные элементы и их может быть несколько, а в сложных документах — десяток и более.

Структура

Чтобы не смешивать описание о документе и сам текст документа, элемент HTML разобьём на две части. В первой HEAD будем записывать необходимые инструкции о документе, а во второй BODY — оставим текст документа.

Внутри элемента HTML сначала создадим элемент HEAD и опишем его тегами: открывающий в одной строке и закрывающий в следующей. Элементы, которые впоследствии будут расположены в нём, объяснят браузеру, в чём особенности нашего документа.

В строке после HEAD создадим ещё один элемент BODY. Так же запишем оба тега в разных строках, а текст разместим в отдельной строке между ними.

!DOCTYPE html
HTML
··HEAD
··/HEAD
··BODY
В документе HTML могут содержаться только элементы.
··/BODY
/HTML

В процессе обсуждения записи элементов стоит обратить внимание на их размещение «рядом» друг с другом или «внутри». Примером можно использовать структуру папок в Проводнике. Как он показывает, какие папки лежат рядом, а какие внутри? Нам стоит поступить так же.

И ещё. Не у всех пользователей компьютеров, планшетов и смартфонов бесконечно широкие мониторы с мелким шрифтом. Поэтому ширина строк по ТЗ РУ ограничивается только восьмьюдесятью символами (80).

На этом этапе сразу вводим понятие структурный отступ на 2 пробела. Один пробел плохо заметен, а три и больше — неудобно. Особенно, если вложенность объектов будет глубокой, как у матрёшки. Ширина-то нашей строки ограничена.

Сохраните изменения в коде и обновите страницу в браузере. Опять ничего не изменилось. Но место для описания сведений о документе мы приготовили!

Кодовые страницы

Вот теперь в HEAD нужно создать элемент, в котором мы запишем, как правильно отображать знакомые нам буквы этого документа. Мы же их видим. Надо добиться, чтобы и браузеры их видели правильно.

Когда мы сохраняем написанный документ, например, документ HTML или любой другой, то в файл записываются не буквы. Записываются коды символов из конкретной Кодовой страницы. Из какой? Из той, которую сам автор выбрал при сохранении файла, а если он не выбирал, то программа это сделала за него.

Программы, выводящие на экран текст из файла, читают записанные коды и ищут соответствующие им символы в текущей кодовой странице. Если она не совпадает с той, с помощью которой был записан файл, то на экран выводятся «букозявочки» и «кракозябры». Давайте с этим разберёмся.

В документах мы видим привычные символы — буквы, цифры, знаки препинания, оформленные определённым шрифтом. Шрифты можно менять по собственному желанию. Список шрифтов, установленных на компьютере, можно увидеть в программе «Таблица символов».

Запустите программу «Таблица символов» и выберите в выпадающем списке Шрифт, например, шрифт «Arial». В состав этого шрифта входят символы разных алфавитов: от латинской и кириллической групп до восточных и иероглифических.

Все символы имеют уникальные коды и размещаются в таблице, которая так и называется: Unicode. В ней имеется 65 536 ячеек для хранения символов разных языков и не только. Каждый пользователь компьютера желает читать тексты на родном языке.

Но в настоящее время в основном используются кодовые страницы с ограниченным набором ячеек — всего 255. Все символы юникода в ней не помещаются. Именно это и вызывает проблемы с буквами.

Выберите в выпадающем списке Набор символов программы «Таблица символов» Windows: кириллица. Для каждой буквы имеется своя ячейка. Обратите внимание, что в левом нижнем углу в ячейке расположена буква Ш.

Теперь в верхнем выпадающем списке Шрифт смените шрифт на «Arial Black», «Arial Narrow», «Book Antiqua», «Courier New» или любой другой с русскими буквами. Буква «Ш» у разных шрифтов меняет свой внешний вид, но всегда остаётся в той же ячейке.

А теперь выберите другую кодовую страницу в выпадающем списке с названием Набор символов. Даже в кириллических, а тем более в иностранных наборах, символы, отображаемые в левой нижней ячейке, меняются и никакой буквы «Ш» там нет.

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

В интернете ibm866 не самая распространённая страница. И не все браузеры автоматически умеют его определять. Если в документе HTML заранее не описать, какая кодовая страница была использована при сохранении файла, то в веб-странице может отобразиться совсем не то, что записано в документе. Что мы и наблюдаем.

На сегодняшний день в веб-программировании стандартом считается полный набор символов юникод: META charset="unicode". Но в Роботландском университете, по традиции, а так же по многим другим соображениям, применяется набор символов windows-1251: META charset="windows-1251".

Чтобы все браузеры правильно считывали сведения о кодовой странице, объявление кодировки должно быть среди первых 512 символов документа. Для этого тег META charset="…" целесообразно записывать как можно ближе к началу элемента HEAD .

Выбранный нами файл имеет тип MS-DOS. Файлы подобного типа создаются с использованием набора символов ibm866. Вот об этом наборе, соблюдая структурные отступы, и нужно сообщить браузеру. Для того, чтобы объяснить браузеру, какой набор символов был использован при сохранении файла, создадим элемент META.

В одном документе элементов META с разными назначениями может быть несколько, поэтому, для отличия от других, нужно уточнить его роль.

Для этого добавим элементу META атрибут с именем charset и зададим ему значение — имя той кодовой страницы, из которой нужно использовать набор кириллических символов. charset="ibm866"

Стандарты HTML разработанные консорциумом w3c позволяют записывать значения атрибутов либо в кавычках, либо без них. Но на сайте консорциума все атрибуты записаны в кавычках, как того требуют более строгие стандарты разметки документов xHTML, XML и т. п.

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

Атрибут запишем внутри тега через пробел сразу после имени. Теперь браузер сумеет понять, какой набор символов нужно использовать для правильного отображения текста нашего файла. Элемент полностью сформирован — META charset="ibm866". Осталось правильно поместить его в документе.

Предложите ученикам самостоятельно решить, где и как записать новый элемент с добавленным атрибутом, определить его место с учётом структурного отступа. При этом не забывайте об обсуждении, например: Вы уверены, что нужно записывать именно в это место?, А почему именно сюда? и т. п. Настаивайте на объяснении не только самих действий, но и причин, почему именно так.

Ученики могут допустить ошибку, так как у элемента META нет закрывающего тега. Но это стоит обсудить отдельно.

Внутри нашего элемента META нет и не может быть никаких данных — они ему не нужны. Его роль — только указать браузеру, какая кодовая страница использовалась при сохранении документа, чтобы он смог правильно подобрать набор символов. Это мы уже записали в атрибуте charset. Раз данных в элементе META нет и быть не может, то и закрывающий тег ему совершенно не нужен. А по стандартам он даже и запрещён.

Вот, что у нас получилось.

!DOCTYPE html
HTML
··HEAD
····META charset="ibm866"
··/HEAD
··BODY
В документе HTML могут содержаться только элементы.
··/BODY
/HTML

Сохраните и обновите. Наконец браузер сумел правильно понять и отобразить текст нашего документа.

Создание проекта шаблона

Давайте добавим ещё один элемент META, но с другим атрибутом. Назовём его author. А значение атрибута, думаю, вы сумеете написать без подсказки.

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

!DOCTYPE html
HTML
··HEAD
····META charset="ibm866"
····META author="Попович Александр Борисович"
··/HEAD
··BODY
В документе HTML могут содержаться только элементы.
··/BODY
/HTML

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

Теперь пусть он сообщит читателю, что в этом окне (вкладке) отображается документ с названием «Образец». Добавим ещё один новый элемент TITLE — титул, и разместим в нём выбранное название.

Предоставьте ученикам возможность самостоятельно решить, где поместить элемент и как разместить в нём текст. Если времени осталось мало, то перед работой можно это обсудить коллегиально. Элемент TITLE для удобства чтения кода стоит разместить самым первым в HEAD.

!DOCTYPE html
HTML
··HEAD
····TITLEОбразец/TITLE
····META charset="ibm866"
····META author="Попович Александр Борисович"
··/HEAD
··BODY
В документе HTML могут содержаться только элементы.
··/BODY
/HTML

В последний раз в этой теме сохраните изменения в коде и обновите страницу.

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

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

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

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

Можно поговорить:

  • о бланках, с которыми мы сталкиваемся на почте,
  • о рецептах, которые врачи выписывают для аптеки,
  • о документах, которые им пришлось (придётся) заполнять при получении паспорта и т. д.
  • и о множестве страниц одного сайта

Ответ. Удалить текст и сохранить его как шаблон.

Но с этим документом мы так поступать не станем. Он неудобен нам, потому что создан с нестандартной кодировкой (кодовой страницей). А на следующем уроке ученики должны будут сами создать новый файл-шаблон по имени «template.htm» в кодировке (она будет автоматически выбрана программой) windows-1251. Но об этом в следующей теме.

Чтобы поэкспериментировать с шаблоном, продолжить знакомство с элементами HTML нужен небольшой текст. Для этого на следующее занятие принесите сочинение на тему: Кто я? или О себе любимом.

Размер. Минимум 2 абзаца, но не более 5. В каждом абзаце 3-5 предложений.

Содержание. Вас когда-то (лет 14-15 назад) и в природе не было. А вот вы здесь. Для чего вы здесь? Попробуйте ответить на ряд вопросов.

  • Что вы успели узнать, понять, достичь с момента рождения и до сегодняшнего дня?
  • Чего в вас есть особенного, что отличает от сверстников?
  • К чему вы стремитесь и чего хотите достичь годам к 20-30-50 (на выбор)?
  • Когда-нибудь меня и вас не станет. Что после вас останется в этом мире, кроме фантиков от чупа-чупса?
  • Есть ли чьё-нибудь высказывание или чья-то цитата, которая характеризует вас или вы готовы взять её своим девизом?

Сейчас обсуждать это не надо, принесите в письменном виде. Как говорит поговорка (по-моему, французская): «С бедой надо переспать ночь» или русская: «Утро вечера мудренее» — вам есть о чём подумать.

Выводы

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

  • Шаблоны экономят время.
  • Шаблоны частично предохраняют от ошибок.
  • Шаблоны подчёркивают имидж автора.
  • Шаблоны можно создавать не только для документов HTML, но и для школьных рефератов, презентаций и т.п.

Ответ. Из элементов.

Сколько элементов содержится непосредственно в документе HTML? (Только один с именем HTML).

При затруднении в поиске правильного ответа используйте наводящие вопросы.
«Сколько дверей в вашей квартире?», «Когда гость нажимает кнопку звонка на вашей входной двери, сколько (ваших) дверей он видит?».

Сколько элементов содержится внутри элемента HEAD? (3 шт.)

А в элементе BODY?

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

Система

Описание работ
Действия Объекты
изучали документ HTML
знакомились веб-страница
записывали и то и другое вместе
создавали шаблон

Запишите на доске ответы каждого из учеников. Их может быть больше.

Эта тема не призывает ни к какой деятельности, кроме умственной. Любопытнее будет изложить её в виде беседы, а бо́льшую часть в виде публичных вопросов. Пусть ученики сами ищут ответы.

Ни документ HTML, ни гипертекстовая страница в самом начале не дали никакой ясности в вопросе: «что же это такое?». Только в конце стало понятно, что это один и тот же объект. Как мы это выяснили? Мы стали добавлять отдельные элементы в файл с текстом.

Элементы HTML — это объекты. У каждого объекта есть свойства, и мы можем управлять им, меняя значения его свойств. Как?

Например, если элементу META добавить атрибут charset и указать его значение, то он станет сообщать браузерам, в какой кодовой странице создан файл с текстом документа.

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

Позже выяснилось, что каждый элемент — это не просто объект, а целая Система объектов. Например, такие элементы, как HTML, HEAD и др., включают в себя другие элементы.

Особенность системы заключается в том, что при включении в неё объектов она приобретает свойство, которого не было ни у одного объекта. Давайте рассмотрим это подробнее.

Просто элемент МЕТА с атрибутом charset="...", будучи в одиночестве, никому ничего не сообщает. Он просто есть. Он даже не элемент. Он просто обычный набор символов.

А вот когда мы его поместили внутри элемента HEAD, а элемент HEAD, в свою очередь, поместили в HTML, получилось, что из отдельных элементов мы собрали новую более сложную систему — документ HTML. Теперь документ HTML вернёт браузеру сведения о своей кодовой странице, и тот сумеет правильно подобрать нужный набор символов для отображения её текста.

Для того, чтобы выполнить те работы, которые записаны в таблице на доске, мы использовали весьма интересный мыслительный инструмент, который называется Системный подход. В нём объект рассматривается как множество элементов, взаимная связь которых определяет его свойства.

Так автомеханик, досконально зная устройство двигателя, понимает назначение, местоположение, особенности строения каждого узла и каждой детали, из которых он состоит. Это помогает ему легко определять неисправности в работе всего двигателя. Быстро его разбирать, исправлять и собирать. Это его работа.

Так же малыши из отдельных кубиков Лего собирают самолёты, роботов и др. Причём, им совершенно не надо отдельно этому учиться — они экспериментируют и учатся в процессе игры. Учёба — это их работа.

Вы ещё не «механики», но уже и не «малыши» (хотя… как знать). Вы можете сознательно использовать системный подход, например, в учёбе. Вам «не даётся» какая-то тема по русскому или математике, по физике или географии? Представьте это правило, определение или формулу в виде системы. Разберите её на отдельные элементы: понятия и термины, переменные и константы, ключевые слова и фразы.

Найдите им объяснения в предыдущих темах, в учебниках за прошлые годы, в справочниках, в дополнительной литературе, спросите, наконец, у учителя. Тогда как из кирпичиков у вас будет складываться понимание всего учебного предмета. Он станет для вас лёгким и, возможно, интересным.

Если вы научитесь использовать системный подход для изучения нового (в учёбе, в работе, в творчестве), для поиска ошибок (в расчётах, в неработающем устройстве, в собственных рассуждениях), вам намного легче будет постигать вершины наук и совершенствоваться в профессиональной деятельности.