Разметка строчных элементов

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

Цели

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

Задачи

  1. Сформировать понятие абзац.
  2. Закрепить вставку символов используя их юникод и ссылки-мнемоники.
  3. Познакомить с назначением символов разрыва.
  4. Приступить к созданию индивидуальных и коллективного справочника «Строчные элементы HTML».

Инструменты

  1. Текстовый редактор из предлагаемых или любой другой, пока по возможности, с минимальным интерфейсом. В дальнейшем Редактор.
    • Блокнот стандатный редактор в системе Windows.
    • Akelpad с настройками «Объединения ЛиК» в режиме Блокнот.
    • PSpad редактор программного кода.
  2. Браузер для экспериментов. В разных задачах эффективнее могут оказаться разные браузеры. Группы, и отдельные участники могут выбрать любой браузер, основываясь на предпочтениях и опыте. В дальнейшем в тексте, вместо имени конкретного браузера, будет использоваться название группы браузеров.
    • Группа браузеров от Mozilla (далее любой из этой группы будет назван одним именем Firefox):
      Firefox Developer Edition для разработчиков Веб-приложений
      Firefox для рядовых пользователей.
      Примечание. Если у вас операционная система x64 или не Windows, то для выбора особой установки воспользуйтесь ссылкой «Firefox для других платформ и языков» в нижней части страницы каждого браузера.
    • Группа браузеров на ядре браузера Chromium (далее любой из этой группы будет назван одним именем Chromium):
      Яндекс.Браузер. Предпочтителен по многим причинам, одна из основных — его создали русские для русских на базе браузера Opera;
      Crome, Opera, Amigo, Нихром и им подобные.
    • Группа браузеров от Microsoft (так как Edge имеет номер версии 14, что вероятно есть продолжение проекта Internet Exlorer, любой браузер, вне зависимости от версии, будет назван одним именем IE):
      IE версия 9 (входит в состав ОС Windows 7 — без установленных обновлений не знает о многих новых возможностях CSS3);
      IE версия 11 (входит в состав ОС Windows 7 — предпочтителен, так как оснащён полноценным эмулятором предыдущих версий);
      Edge работает только в операционной системе Windows 10.

Материалы

  1. Учебник Web-конструирование 2.
    • Тема 1 > 02. Структура HTML-кода. > Абзац.
    • Тема 1 > 03. Как работает браузер.
    • Тема 1 > 04. Улучшенная HTML-страничка.
    • Тема 1 > 08. Оформление текста.
    • Тема 1 > 10. Стиль записи кода.
    • Тема 1 > 11. Тестирование и отладка.
  2. Словари на «Академике»
  3. Википедия
  4. Прочее

Создание личного шаблона

Начнём урок с того, что вы самостоятельно разработаете шаблон для своих будущих работ. Кодировка шаблона windows-1251. Не забудьте об этом предупредить браузеры.

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

Вопросы для обсуждения.

  • Из чего состоит код HTML… (из элементов HTML)?
  • Сколько элементов непосредственно содержится в документе HTML… (один HTML)?

    Здесь можно обратить внимание, особенно, если кто-то засомневается, по поводу того, что !DOCTYPE это не элемент (DOC — документ и TYPE — тип). Это объявление браузеру о том, что со следующей строки начинается код HTML. Сразу за открывающей угловой скобкой стоит восклицательный знак. Именно он указывает браузеру, что эту запись выполнять не надо, а достаточно принять к сведению.

  • Из каких элементов состоит элемент HTML… (HEAD и BODY)?
  • При помощи чего записывают элементы в коде HTML … (при помощи тегов — имя элемента прописными буквами в угловых скобках)?
  • Для чего нужен структурный отступ и какова его величина… (при записи вложенного элемента его сдвигают на два пробела вправо)?
  • А как оформить запись элемента… (открывающий тег записывают в отдельной строке с учётом структурных отступов, а закрывающий в отдельной строке строго под ним. Содержимое элемента записывают в строке между тегами)?
  • Какой элемент содержит название документа… {TITLE}?
  • В каком атрибуте записывают имя кодовой страницы содержимого файла… (charset)?
  • Чем элемент META отличается от элемента BODY и почему… (не имеет закрывающего тега, так как не имеет содержимого)?

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

Боритесь с односложными ответами. Требуйте (может не от конкретного ученика, а от группы в целом) построения полных предложений: «подлежащее» + «сказуемое» + «определение» + «дополнение» и т.п.

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

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

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

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

Если на школьном на сервере такая возможность не предусмотрена, то можно использовать публичные ресурсы, например, Яндекс.Диск или другие. В облаке должна быть создана общая папка, в которой размещены подпапки — рабочие подпапки каждого ученика. Администрировать всё это должен руководитель или его помощник, но не ученик.

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

В рабочей папке создайте папку template. В ней вы будете хранить все шаблоны, которые понадобятся в процессе работы. Это и макеты проектируемых страниц, и наборы правил CSS для их оформления и др.

Откройте редактор и сразу сохраните ещё пустой файл в своей рабочей папке с именем light.htm (сокращение от слова lightweight — облегчённый). В дальнейшем мы будем создавать и сложные профессиональные шаблоны.

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

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

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

Обратите внимание в меню окна на указанный клавиатурный аккорд Ctrl + S в пункте Файл Сохранить, чтобы каждый раз не открывать меню, а пользоваться клавиатурным аккордом.

Теперь запишите в него код HTML, что бы по нему браузер смог отобразить сформированный документ. Не забудьте в элементе TITLE записать название документа: Шаблон. На это вам понадобится минуты 2-3. Снова сохраните файл — теперь уже готовый шаблон документа HTML.

Абзац

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

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

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

Слово читатель несёт сразу две семантические роли.

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

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

В рабочей папке создайте папку test. Скопируйте в неё шаблон light.htm. Переименуйте его в about_me.thm и откройте в редакторе.

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

Кстати, в каком элементе HTML записывают название документа… (TITLE)?

В элемент BODY (тело документа) начните записывать тот рассказ, который вы придумали о себе. Минут 5-7 вам будет достаточно. Те же, кому о себе сказать нечего, а нечего сказать только о пустом месте!, пишите то, что я буду диктовать.

Я тумбочка. Меня изготовили в 2002 году. Покрасили яркой краской. Сейчас на мне красивый журнал и графин с водой.

Перед первым предложением добавьте ещё одно: Меня зовут… и впишите свои имя и фамилию. Затем сохраните код и откройте файл в браузере.

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

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

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

Ученики, знакомые с HTML сразу начнут предлагать элемент P. Стоит уточнить у них, почему имя элемента абзац начинается с буквы А, а записывается буквой P… (слову абзац в английском языке соответствует слово paragraph)?

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

Использовать Яндекс.Перевод предпочтительнее, потому что в конце блока с переводом есть возможность по ссылкам переключиться в переводчики и Google, и Bing. В них можно сравнить разные толкования перевода, а воспользовавшись кнопками Озвучить или Прослушать, услышать сразу три варианта правильного произношения.

И так, нам нужно создать два параграфа. Чувствуете, какая ерунда получается, когда мы говорим это по-русски?

Какой язык программист должен знать лучше всех… (родной)?

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

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

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

Итак, выяснили. Важные языки для программистов: русский, а затем язык программирования и английский. Или так как вас учат в школе — русский, затем английский и потом язык программирования.

Следует различать понятия, имя элемента и имя тега. Конечно же, будем произносить тег P (по-русски: Пэ), а вот полное имя элемента Paragpaph (и по-русски, и по аглийски: параграф) может ввести в заблуждение, поэтому с учениками стоит его называть, так же как и имя тега элемент Пэ или привычным словом абзац.

И далее все элементы стоит называть по имени тега, или по-русски, а не их английское название. Стоит различаать понтия Знать и Произносить. Не все последуют совету серьёзно заниматься английским. Например, тег и элемент LI стоит так и называть Ли. По-русски это обычный Пункт списка. А английское название — List Item неплохо знать, но использовать в обсуждениях не обязательно.

Запишите открывающий тег элемента P в следующей строке после BODY и не забудьте структурные отступы. В элементе P обязательно будет содержимое, и ему обязательно нужен закрывающий тег. Его тоже запишите в новой строке под ткрывающим тегом P и на том же расстоянии.

Затем выделите текст Это я о себе любимом, вырежьте его аккордом Ctrl + x и вставьте в новую строку между открывающим и закрывающим тегами элемента P Ctrl + v, так чтобы они остались на отдельных строках, но с одинаковыми структурными отступами.

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

Если кто-то посоветует первый абзац переместить в элементе H1, то попросите его объяснить почему. Сами же не тратьте время на спор, даже если ответ не совсем верный. Пока, не стоит акцентировать внимание на ролях абзацев и других блочных элементов. Достаточно их обозначить. Подробное знакомство с ними далее в следующей теме «Абзацы».

Не обращайте внимания и на исключения при написании закрывающих тегов. В более строгих языках, например, xHTML, XML исключений нет. Когда ученики дорастут до профессионалов начального уровня, пусть эти исключения станут для них приятным дополнением. Подробнее об xHTML прочтёте в Википедии в разделе «Различия между XHTML и HTML»

Правило: если элемент предназначен для размещения в нём содержимого (информации), например, текста, то закрывающий тег обязателен, кроме элементов, в которых он запрещён стандартом.

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

Для остальных абзацев текста создайте новые элементы P по правилам построения структуры кода, и текст поместите в них. Затем сохраните код и закройте редактор.

Акцент

Мы пишем не для себя, а для читателя: сообщения в контакте или записки на уроке — друзьям, сочинение — учителю, письмо — бабушкам и дедушкам, на работе объяснительную или служебную записку — начальнику, распоряжение — подчинённому и т. д. Даже код HTML мы пишем не себе, а браузеру. При чтении нашего текста читатель явно должен понимать то, что мы хотим ему передать. Или то, что мы хотим, чтобы он понял.

Давайте рассмотрим пример написанный на доске: Мне очень хотелось писать… Понятно ли о чём идёт речь в этой фразе?

Определением различных значений слов в разных контекстах занимается наука семантика. Проще можно сказать, что в разных контекстах многозначные слова имеют разные роли. Например, дверь для того, чтобы пройти в здание и вход в здание. Слова дверь и вход в этом контексте имеют одинаковый смысл — одинаковую семантическую роль (целесообразно использовать слово Роль так как оно привычнее для учеников и с ним проще строить рассуждения). А в предложении вход на сайт, то же самое слово вход ничего общего со словом дверь не имеет.

Но наша фраза с примером вырвана из контекста. Добавим к ней продолжение: Мне очень хотелось писать… Творческий зуд не покидал меня ни днём, ни ночью.

Теперь понятно о чём — всё стало на свои места. Чтобы подобный вопрос не возникал, можно предложения поменять местами. Но это тоже не очевидное решение.

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

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

Английское название символа ударение называется Acute Accent — острое ударение.Но для записи в электронном тексте используется не он, а его печатная версия Combining Acute Accent — комбинируемое ударение. Этот символ не занимает отдельного знакоместа и встраивается над соседним символом. Про него можно прочесть в Википедии, в словарях на Академике, в таблице Юникода и где-нибудь ещё.

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

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

Способы вставки ударения в разных программах.

  • HTML — первый способ: ́ (юникод символа, записанный шестнадцатеричным числом).
  • HTML — второй способ: ́ (юникод того же символа, записанный десятичным числом).
  • Акелпад — аккорд Alt + ~.
  • MS Word и Skype — аккорд левый Alt + 769 на цифровой клавиатуре (в Cкайпе после аккорда нужно дополнительно нажать пробел).
  • LibreOffice — Вставка Специальные символы Подмножество: Дополняющие диакритические знаки Ячейка: U+0301.

Особенности вставки кодов ударения.

  • Если шрифт пропорциональный, то символ юникод вставляется после ударной гласной.
  • Если шрифт моноширинный, то символ юникод вставляется перед ударной гласной.

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

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

Ответ. Только элементы, так же как и во всём HTML.
Ответ. Абзацы с текстом.

Пока мы ничего другого не знаем второй ответ тоже правильный, но только с оговоркой с текстом (см. выше правило в Теги раздела Абзац).

Чаще возвращайте учеников к понятиям, определениям, правилам, рассмотренным на предыдущих уроках, особенно к клавиатурным аккордам. Не забывайте 5-7 раз повторил — запомнил.

Создайте в BODY абзац (элемент P) для записи в него текста и запишите оба предложения с доски. Расставьте во всех словах ударения. Сохраните код, откройте файл в браузере и проверьте правильность выполнения задания. Время на выполнение 3 минуты. Иначе не успеем ещё кое-чем поразвлечься.

Символы

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

Ответ. Самая маленькая единица текста — символ.

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

Символ самая минимальная не семантическая (не имеющая смыла) единица текста. Но, не смотря на это, существует много элементов для управления и отдельными символами. Давайте попробуем слову придать визуальный смысл — придать смысл его внешним видом.

Скопируйте шаблон light.htm в папку test, переименуйте его в small.htm и откройте в редакторе. Откройте этот же файл в браузере и расположите оба окна рядом. В одном окне будем редактировать и сохранять код после каждого действия, а в другом обновлять и наблюдать за изменениями в документе.

Напишите фразу: Наш котёнок вырос. (можно напомнить: где писать и не забыть добавить абзац).

Наш котёнок вырос.

У слова вырос попробуем буквы написать увеличивающимися. Пойдём с конца. Самой большой будет буква с. Заменим её на прописную (заглавную), а букву о оставим строчной (маленькой).

Наш котёнок выроС.

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

Зная, что элементы называются английскими словами вспомним или в Яндекс.Перевод узнаем, как по английски будет записано слово маленький… (small)? Именно так мы назвали файл. Это и имя нашего искомого элемента.

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

Нужно буквы выр поместить в элемент SMALL. Посмотрите, что получилось (можно помочь вспомнить, что для просмотра нужно сначала сохранить, а затем обновить).

Наш котёнок SMALLвыр/SMALLоС.

Теперь буквы вы сделаем меньше, чем р. Для этого их тоже поместим в ещё один элемент SMALL.

Наш котёнок SMALLSMALLвы/SMALLр/SMALLоС.

Ответ: буквы, помещённые в элемент SMALL, уменьшаются в размере по отношению к окружающим.

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

Чтобы полностью показать результаты задачи, размер шрифта в браузере по умолчанию достаточно мал. Как изменять размеры букв свойствами CSS ученики ещё не владеют. Поэтому можно регулировать масштаб отображения страницы в меню браузера или через клавиатурный аккорд CTRL + + — увеличить и уменьшить — CTRL + .

Обратите внимание, всего один элемент HTML. Но умение его использовать помогло подчеркнуть внешним видом смысл слова: Наш котёнок выроС.

Документ

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

В файле pooh.zip запакован файл с небольшим текстом, который вам нужно превратить в отформатированный документ HTML. Скачайте архив, распакуйте его и откройте одноимённый файл с документом. Оцените документ, его текст и его внешний вид.

В папке test по шаблону light.htm cоздайте файл по имени pooh.htm.

  1. Откройте файл pooh.htm в редакторе.
  2. Поместите в него текст из файла pooh.rtf.
  3. В TITLE запишите название документа.
  4. Cохранте изменённый код.
  5. И откройте файл pooh.htm в браузере.
  6. Измените размеры окна редактора и браузера так, чтобы каждое занимало половину экрана. Разместите окно редактора слева, а браузера -- справа. Зкройте все остальные окна и переключаться из окна редактора в окно браузера будет удобно клавиатурным аккордом Ctrl + Tab.

Теперь документ и инструменты полностью подготовлены к разметке.

Разверните окно браузера на весь экран или измените его размеры. (Строки текста занимают всю ширину и полностью отсутствует разбиение на абзацы. Для чтения это неудобно.)

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

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

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

 Роли  фрагментов первого  абзаца
Визуальная            Семантическая  
--------------------  -------------------
О документе           О документе   
└► название автор     └► название    
   переводчик ссылка     └► источник
                            ├► автор
                            ├► переводчик
                            └► ссылка

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

Примечание. В работе с разрывом строки логичнее ведут себя браузеры IE.

Fifrfox и Chromium не обращают внимания на то, что абзац после разрыва продолжается. И тройным щелчком выделяют только части абзаца.

Семантическая структура «Роли фрагментов…» должна быть записана на доске.

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

Название произведения мы пока оставим в стороне. А вот откуда документ появился вообще и в частности у нас — это стоит записать в отдельной строке. Какие будут предложения?

Давайте попробуем название убрать в новый абзац (кроме абзацев мы пока ничего не знаем). Добавим для него ещё один P.

Что-то получилось не очень аккуратно. Блок о документе разорвался на два отдельных. Давайте выполним двойной щелчок в любом слове, например, Здорово. Выделилось слово. А если выполнить тройной щелчок… (выделился абзац)?

А теперь выполните тройной щелчок отдельно в Названии и в фамилии автора. Браузер нашими стараниями создал два разных абзаца.

Прочитав до до закрывающего тега /P, он вставил символ разрыва, который так и называется конец абзаца и представил его на экране в виде пустой строки, чтобы читателю было легче понять, где заканчивается один абзац и начинается другой.

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

Строку нужно просто разорвать на две. Англичане нужный нам элемент так и называют: разрыв строки. Слово разрыв вы недавно переводили на английский это… (break). А название элемента звучит коротко BR.

В коде элементы записываются тегами. Сразу после названия мы впишем открывающий тег BR и он разорвёт, что надо разорвёт.

Вопрос. Внутри конца строки BR может что-нибудь находиться… (нет)? Значит закрывающий тег ему совершенно не нужен.

В коде весь текст после конца строки тоже начнём с новой строки для удобства чтения самого кода.

Символов разрыва известных нам стало больше: пробел (конец слова), неразрывный пробел (сочетание слов и символов как единый объект), конец абзаца. Теперь у нас добавился ещё один — конец строки.

Вот теперь наш документ полностью готов для экспериментов.

Когда котёнок вырос мы рссматривали буквы. Следующий по размеру после буквы фрагмент текста — слово. Слово всегда имеет смысл. Люблю или сразу словосочетание Я люблю. И не важно что или кого любит: маму, Родину, собаку, мороженное… Важно, что автор испытывает глубокое чувство.

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

У всех перечисленных фрагментов есть определённый смысл и назначенная семантическая роль — то для чего их поместили в текст.

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

Мнемоники и строчные элементы

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

Двойные чёрточки.

Какой знак препинания обозначен двойными чёрточками… (Тире)?

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

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

В языке HTML часто используемые символы могут быть вставлены не только числовым обозначением, но и ссылками-мнемониками — буквенными обозначениями. Поищем слово чёрточка в английском языке (dash). Наша чёрточка должна быть шириной с букву М. Получилось m + dash.

Типографское (длинное) тире так и называют: м-тире, а его мнемоника записывается —. Третье тире в начале строки с прямой речью закодируйте мнемоникой.

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

Проблема с тире решена ещё не полностью. Сожмите окно по ширине так, чтобы в конце четвёртой строки снизу осталось одно слово Здорово. Тире спрыгнуло в начало новой строки и теперь выглядит как прямая речь следующего героя. Но ведь это не так. Читатель снова окажется в заблуждении. Поэтому тире нужно приклеить к предыдущему слову.

Оторванное тире

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

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

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

Не (not) перерыв (break) Пространство (space). Получилось No Break SPace, сокращаем слова до аббревиатуры и получаем ссылку мнемонику  . Она так и называется неразрывный пробел.

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

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

C тире закончили. Но у нас осталась ещё одна явная проблема — кавычки.

Примечание. В работе с кавычками логичнее всех ведут себя браузеры группы Chromium.

Fifrfox не реагируют на значение атрибута lang и, без указаний в CSS, всегда отображают английские кавычки. IE, будучи встроенными в систему, получают сведения о текущем языке не только от страницы, но и от системы. Поэтому без атрибута lang всегда отображают русские кавычки, причём даже вложенные — кавычки в кавычках. А с атрибутом работают правильно.

Цитата.

В тексте браузер отобразил прямые технические кавычки. Их используют в программном коде. Мы в них заключали значения атрибутов у тегов. Но в печатном издании нужны настоящие типографские кавычки. Для этого вернёмся к семантике.

Что за фрагменты взяты в кавычки… (прямая речь)? Прямую речь произносит кто-то, но не автор. Фрагмент чужих слов в тексте называется… (цитата). А какой будет мой следующий вопрос?

Как слово цитата будет по-английски… (quote)? Применим к этому слову неписанное правило: меньше букв — меньше ошибок, и оставим только первую букву. Это и будет имя нужного элемента. Удалите технические кавычки, а цитаты поместите в элемент Q.

Кавычки в кодовой странице.

Вроде в документе ничего не изменилось. Это так и есть, но изменился код. Он стал гибким, послушным и мы сейчас в этом убедимся.

Что мы хотели объяснить браузеру, добавив в описание документа META с атрибутом charset? Конечно же, не то что документ написан на русском языке. Мы только заставили браузер выбрать кодовую страницу, в которой есть нужные для нашего документа кириллические символы.

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

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

Атрибут lang.

Нужно выбрать элемент, который содержит весь документ целиком это… (HTML). Чтобы изменить его свойство нужно к нему добавить атрибут с названием язык… (language сокращённый до lang).

Браузер читает документ построчно слева направо и сверху вниз. Прочитав очередную строку, он выводит её на экран. Элемент HTML записан двумя тегами открывающим HTML и закрывающим /HTML.

Вопрос. В каком из тегов будем записывать атрибут… (конечно в открывающий)? Атрибут меняет значение свойства, соответствующего его имени у всего элемента и его содержимого. Браузер при прочтении строк выведет на экран весь элемент и его содержимое уже изменённым.
Вопрос. А если мы добавим атрибут в закрывающий тег, что нибудь изменится на экране… (конечно нет)? Элемент-то уже выведен на экран. И изменять в нём что-либо поздно.

Атрибут состоит из двух частей: имя изменяемого свойства и его значение, записанное в прямых технических кавычках. Между именем и значением без пробелов ставится знак равенства: HTML lang="".

Эксперимент.

Давайте поэкспериментируем.

Сначала скажем браузеру, что документ написан на английском языке — в атрибуте lang укажем значение "en". Кавычки-лапки выглядят как верхние шестёрки и верхние девятки хвостиками направленные внутрь. Теперь изменим на немецкий — "de". Тоже лапки, но нижние девятки и верхние шестёрки хвостиками направленные наружу. Попробуем французский — "fr". Кавычки ёлочки. А теперь самостоятельно укажите, что документ написан на русском языке… (ru). В России принято применять французские кавычки ёлочки. Но иногда каквычки приходится писать в кавычках, например, прямая речь в цитате. Если используются только ёлочки, то в конце выместо двух ёлочек ставится одна, на что программы проверки грамматики будут ругаться. Есть решение. В русской типографике применяются и немецкие лапки, именно в качестве вложенных кавычек. Но об этом в классе, пока можно и не говорить.

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

Теперь мы визуально разделили два фрагмента Название и Источник. Рассмотрим второй подробнее.

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

Фрагменту автор + переводчик + ссылка с семантической ролью Источник, нужно подобрать элемент с такой же ролью. Этот элемент так и называется: CITE. Браузер, в зависимости от роли изменяет внешний вид текста помещённого в тот или иной элемент. Поместите все три предложения в CITE и оцените сами. Теперь сразу понятно, что после названия идёт не сам текст книги или цитаты, а дополнительные сведения о нём.

Ещё одна в этом примере неточность в оформлении — не работающая ссылка на веб-страницу.

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

Представьте документ-корабль где-то далеко в море интернета. Так же как и корабль, он бросил якорь зацепившись за наш докумнет, чтобы не отплывать то него далеко. Якорь — это и есть ссылка. По-английски якорь… (Anchor). Нужный нам элемент будет называться также, но записываться только первой буквой — A. Именно он и организует гиперссылку.

Ahttp://sheba.spb.ru/libra/miln_puh.htm/A

Ссылка увы не работает. Чтобы наш якорь смог выполнить свою работу — перебросить нас в другой документ, текст ссылки нужно превратить в гиперссылку…

Нам снова понадобится английский язык. Гипер… (Hiper). Ccылка… (Reference).

Ссылке нужно добавить атрибут, который превратит её текст в гиперссылку. Hiper + REFerence = href — это и есть имя нашего атрибута. Запишем его в… (открывающем) теге и скопируем в его значение текст ссылки.

A href="http://sheba.spb.ru/libra/miln_puh.htm"
http://sheba.spb.ru/libra/miln_puh.htm/A

Теперь мы видим, что ссылка наша работает. Давайте разберём её по частям.

  1. http:/ найди в интернете
  2. на сайте /sheba.spb.ru
  3. в папке /libra
  4. документ /miln_puh.htm.

Ничего сложного. А вот та часть ссылки, которая отображается на экране, это только её текст и он гиперссылкой не работает — уже проверено. Давайте подумаем, для чего предназначена сама ссылка… (чтобы можно было перейти на сайт книги и читать её)? Ключевое слово читать. Чтобы читатель сразу это понял, уберём неработающий текст ссылки и вместо неё так и напишем: Читать.

Осторожно. Уберите только текст из ссылки в элементе, а не саму ссылку из атрибута href.

Осталась одна маленькая деталь.

Здорово! — что хотел Кролик сказать этим словом? Что у него хорошее настроение или просто поздоровался? Ударение вы сумеете поставить и сами. Если не помните как это делается, то надо вспомнить только название файла и заглянуть в него.

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

Ну а теперь поработайте на себя. Для начала закройте редактор.

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

У вас есть личная папка test, в которой вы собираете свои тренировочные документы. В них всегда можно заглянуть и вспомнить, что и как вы делали. Например, вы помните какой юникод нужно вставить в код HTML чтобы на экране увидеть ударение? Файлы в эту папку будут только добавляться, и каждый раз найти что-то нужное будет всё труднее.

Теперь вы знаете, что такое гиперссылка и как её создать. Предлагаю сделать в вашей папке оглавление, но не просто список файлов, как в книге, а список гиперссылок, которые помогут вам быстро найти и открыть нужный файл.

В любой папке в интернете файл, с которого начинается просмотр сайта называется index. Мы поступим так же. Скопируйте в папку свой шаблон, назовите его index.htm и откройте в редакторе и в браузере.

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

Какой элемент мы добавим первым… (абзац в котором напишем название)?
Зафиксируйте на доске Абзац: Воплощённые знания, добытые честным трудом и потом.

Потом добавим ещё… (может несколько абзацев, а может один абзац с разрывами строк)?
Зафиксируйте на доске Абзац: …
или Строка: (если один абзац с разрывами)

Что мы запишем в следующем… (не название файла, а ссылку на файл)?
Дополните запись на доске Абзац: Ссылка: …

Где и в каком месте мы запишем текст ссылки… (в атрибуте href="")?
Дополните запись на доске Абзац: Ссылка: атрибут href

Вспомните или подсмотрите, если знаете где, из каких элементов состоит ссылка, и какие из них понадобится нам… (только самый последний /имя_файла)?
Дополните запись на доске Абзац: Ссылка: атрибут href="/имя_файла.htm"

Теперь вы знаете что нужно делать — приступайте к работе. И не забудьте про ударение в слове из названия страницы.

Справочник

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

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

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

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

Мы приступили к рассмотрению и применению элементов, которые находятся внутри абзаца, в строке или нескольких строках. Поэтому их называют строчными (англ.: inline -- встроенный) или текстовыми (англ.:text-level -- уровень текста).

В HTML 5 строчных элементов всего 32. Причём штук 7 к нашему русскому языку отношения не имеют. Все они имеют семантические роли и напрямую связаны с ролями текстовых фрагментов.

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

Задание. В описании стандарта HTML5 найти все строчные элементы кроме устаревших-нерекомендуемых и запрещённых. Результат запишите в таблицу по образцу.

Таблица 1. Строчные элементы для оформления фрагментов текста.
Имя элемента Полное имя Семантическая роль
английское русское
SMALL small уменьшеный шрифт Уменьшение шрифта для записи комментариев, сносок и т. п.
CITE cite источник цитаты Автор, название, дата публикации и другие библиографические сведения.
A anchor, hyperlink гиперссылка Создаёт гиперссылку на другой фрагмент этого документа или на другой документ.

Для практики создайте документ HTML с небольшим текстом. Слова по очереди можно размечать тегами очередного исследуемого строчного элемента. Задача: наблюдать, как веб-страница реагирует на изменение роли текстового фрагмента.

Для выполнения работы пользуйтесь ресурсами.

  1. Официальный сайт консорциума W3C раздел «4.5 Text-level semantics» и «4.6 Edits». Для тех, кто не боится английских текстов или умеет пользоваться переводчиками. Здесь можно узнать полное английское имя элемента.
  2. Справочник Влада Мержевича. Весьма полезный ресурс. Рекомендуется положить в закладки и заглядывать в него почаще.
  3. Переводчики: Яндекс, Промт (Промт перед работой настройте: Определить тематику Техника Компьютеры), Гугл, Бинг.

А так же можете пользоваться имеющейся литературой и знакомыми ресурсами.

Выводы

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

Может возникнуть необходимость одинаково выделить весь текст сразу у двух абзацев, например сноска в конце страницы. Придётся сначала первым строчным SMALL выделить текст внутри первого абзаца, а затем вторым — текст внутри второго.

Для чего нужны строчные элементы, если у некоторых из них на экране ничего не меняется?

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

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

Но браузер обязан объяснить ему роль фрагмента, этот — цитата. А этот — фамилия автора, который написал книгу, а не просто чья-то другая в тексте. А в этом месте можно придавить ссылку и тогда точечный дисплей сменится и начнёт писать текст уже другой страницы из другой книги…

А есть ещё голосовые браузеры. Робот читает слова, складывая их в словосочетания, предложения, абзацы. Как он прочтёт слово Здорово из речи Кролика? Если с неправильным ударением, то изменится характер Кролика, ему будет безразличен ИА. Зд́орово, и побежал дальше.

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

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

Можно ли ошибаться в выборе того или иного элемента для разметки конкретного текстового фрагмента… (нельзя)?

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

А где вы будете их подбирать? Вы уже закончили писать таблицу строчных элементов?