Разметка текста

Кавычки

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

Скопируйте из рабочей папки файл sample.htm в папку task_01, переименуйте копию файла в school.htm и в коде документа HTML смените название на Школа. Подготовьте из текстового редактора и браузера экспериментальный полигон. Для этого эксперимента нужно выбрать браузер на базе ядра Chromium. Он грамотнее всех других в работе с кавычками.

Chromium общее ядро (движок) программ-браузеров: и Google Chrome, и Яндекс.Браузер, и Opera, и любой из множества других на них похожих.

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

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

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

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

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

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

Строчные элементы не участвуют в построении структуры кода, а записываются в строке вместе с обычным текстом.

У нас есть ещё пара кавычек. Они означают, что слово "отвёртка" в контексте этого предложения имеет совершенно другой смысл. И у него машинописные кавычки замените на теги элемента Q.

Сергей Ениколопов, психолог, конфликтолог:
QСегодня повсеместно навязывается идея, что школа должна дать некие знания, из которых состоит жизнь. Это ошибка: школа не даёт Qотвёртки/Q, она учит её находить/Q.

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

Элемент html содержит в себе весь документ. Чтобы изменить свойство документа нужно к этому элементу добавить атрибут с названием язык (language сокращённый до lang).

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

Атрибут меняет значение свойства, соответствующего его имени, у всего элемента и его содержимого. Браузер при прочтении открывающего тега выведет на экран весь элемент и его содержимое уже изменённым. А в закрывающем теге ничего писать не нужно: элемент уже на экране и изменить ничего нельзя.

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

Укажем браузеру, что этот документ написан, например, для англичан. Для этого в атрибут допишем значение en lang=en.

!DOCTYPE html
HTML lang=en
...
/HTML

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

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

Замените значение атрибута lang на другие языки: немецкий de, французский fr, русский ru. У немцев кавычки тоже «лапки», но направлены наружу и открывающие кавычки нижние «девятки», а верхние «шестёрки».

У французов кавычки «ёлочки» и внутренние и внешние. Русские кавычки комбинированные. Внешние — французские «ёлочки», а внутренние — немецкие «лапки». Почему так? Изучайте историю. История — наука очень интересная.

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

А кроме кавычек вы узнали, что у элементов в коде можно менять свойства, добавляя к ним атрибуты с определёнными значениями. Закройте файл school.htm

Из рабочей папки откройте в редакторе шаблон для будущих файлов файл sample.htm. И добавьте атрибут в открывающий тег HTML lang=ru. Сохраните и закройте файл шаблона.

Чёрточка

Длинное тире

Скопируйте из рабочей папки файл sample.htm в папку task_01, измените имя копии файла на educated.htm и в коде смените название документа HTML на Образование. Подготовьте из текстового редактора и браузера экспериментальный полигон.

Создайте абзац и не забудьте соблюсти структуру при записи его тегов. В абзаце от левого края строки запишите текст.

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

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

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

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

На сайте «Таблица символов Юникода» в разделе «Техническая информация» предложено три варианта одного и того же кода.
Первый U+2014 номер кода в шестнадцатеричной системе счисления.
Второй — —  в десятеричной.
Третий мнемоника —.

Мы можем двойную чёрточку заменить любым из этих кодов.
— Первый вариант: Учёба — совсем другое.
— Второй вариант: Школа — это одно.
Обратите внимание на то, что для записи шестнадцатеричного числа в код добавляется буква икс x.
— И третий: ваша задача — постоянно учиться.

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

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

Замените в коде документа три двойные чёрточки на три разные записи кода длинного тире.

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

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

Тире спрыгивает, потому что браузер воспринимает его как слово. Есть же однобуквенные слова: соединительный союз и, разделительный а, предлог к и т. п. Чтобы тире не спрыгивало, нужно «приклеить» его к предыдущему слову. Но удалять пробел нельзя, ведь тире самостоятельное слово.

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

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

Рассмотрим ещё одну неприятность с тире и пробелом. Обычный диалог, записанный прямой речью: — Должен говорить сперва один, потом другой, — говорил ИА.

На планшете или смартфоне может случиться так, что второе тире не поместится в одну строку с началом предложения (рис. 1). Браузер сбросит его в начало новой строки.

Ошибка: Тире не приклеено к предыдущему слову.
Рисунок 1.

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

Ошибка: Тире не приклеено к предыдущему слову.
Рисунок 2.

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

Ошибка: Тире не приклеено к предыдущему слову.
Рисунок 3.

Правильно, когда между запятой и тире будет только один неразрывный пробел и никаких других символов (рис. 4). Тогда тире приклеится к слову…

Ошибка: Тире не приклеено к предыдущему слову.
Рисунок 4.

…а если места в строке не хватит, то оно спрыгнет на новую строку месте со словом (рис. 5).

Ошибка: Тире не приклеено к предыдущему слову.
Рисунок 5.

Замените в трёх местах текста между словом и следующим за ним тире обычный пробел на неразрывный по образцу: Учёба·—🡆Учёба —

Символ

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

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

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

Скопируйте из рабочей папки файл sample.htm в папку task_01 и копию в ней переименуйте cat.htm и документу дайте название Котёнок.

В теле документа создайте абзац и не забудьте соблюсти структуру при записи его тегов. В абзаце в строке между его тегами от левого края строки напишите фразу: Наш котёнок вырос.

Фраза получилась короткой, а буквы маленькими. Чтобы лучше видеть изменения на странице увеличьте масштаб её отображения. Это легко выполнить с клавиатуры. Нажимайте аккорд CTRL + + (на цифровой клавиатуре справа) для увеличения и CTRL +  для уменьшения масштаба. Остановитесь на размере не менее 250%. Буквы должны выглядеть крупнее в два и более раза.

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

Оставим строчную букву о обычного размера, а размер выр — уменьшим. Если вы внимательно составляли таблицу строчных элементов, то заметили, что они называются английскими словами, обозначающие их роль. Небольшой размер (англ.: small size). Подскажет имя элемента. Элемент с именем small имеется. Поместим в него буквы выр.

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

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

Строчные элементы не участвуют в построении структуры кода. Их записывают в строке вместе с обычным текстом.

Пока всё происходит отлично, но буквы вы должны быть ещё меньше, чем р. Их тоже поместим в ещё один элемент small

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

И в завершение работы самостоятельно добавьте ещё один элемент small для буквы в.

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

Статья

Роль семантических ролей

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

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

В папке task_01 создайте копию файла sample.htm и переименуйте её в pooh.htm смените название документа на Пух. Скопируйте в него текст файла pooh.txt. Для этого эксперимента нужно выбрать браузер Internet Explorer. Он лучше всех справляется с абзацами.

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

Оценим текст документа и определим роли его фрагментов. Каждому из них подберём соответствующие семантические элементы HTML 5.

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

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

Семантический анализ текста

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

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

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

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

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

Разрыв строки

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

Винни Пух и все, все, все.

Алан Милн. Перевод Бориса Заходера. http://sheba.spb.ru/libra/miln_puh.htm

И, кроме того, я лично был тут неделю назад -- ответил Кролик.

-- Но беседа не состоялась, -- сказал Иа. -- Не было обмена мнениями. Ты сказал "Здорово!" и промчался дальше. Пока я обдумывал свою реплику, твой хвост мелькнул шагов за сто отсюда на холме…

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

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

Фрагмент О документе рассы́пался и теперь не понятно: источник ещё часть заголовка или уже принадлежит тексту произведения…

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

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

До этого мы рассматривали элементы-инструкции, каким образом браузер должен выводить на экран их содержимое. Перед BR строка заканчивается и после него начинается новая. В самом элементе ничего не может содержаться. Это элемент-команда: начни выводить текст с новой строки. Записываются такие элементы только открывающим тегом BR.

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

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

····P
Винни Пух и все, все, все.BR
Алан Милн. Перевод Бориса Заходера. http://sheba.spb.ru/libra/miln_puh.htm
····/P
····P
И, кроме того, я лично был тут неделю назад -- ответил Кролик.
····/P
····P
-- Но беседа не состоялась, -- сказал Иа. -- Не было обмена мнениями. Ты сказал "Здорово!" и промчался дальше. Пока я обдумывал свою реплику, твой хвост мелькнул шагов за сто отсюда на холме…
····/P

Если для эксперимента выбран браузер Internet Explorer, то выполните тройной щелчок в названии. Теперь видно, что фрагменты О документе остались в одном абзаце.

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

Источник материала

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

Фрагменту автор + переводчик + ссылка с семантической ролью источник нужно подобрать элемент с такой же ролью. Этот элемент так и называется: CITE. Все три предложения поместите в CITE и оцените сами.

Семантические элементы HTML 5 используются не просто для разметки текста, а для разметки его смысловых фрагментов.

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

Гиперссылка

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

Представьте документ как корабль где-то далеко в море интернета. Он бросил якорь, зацепившись за наш документ, чтобы «не отплывать» от него далеко. Его якорь — это и есть ссылка. По-английски якорь anchor. Нужный нам элемент для создания называется также, а записывается только первой буквой — A. Попробуйте сами.

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

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

Управлять свойствами элементов можно используя их атрибуты, так же как это делали с HEAD. Для имени атрибута нам снова понадобятся английские слова: гипер (англ.: hiper) и ссылка (англ.: 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».

Таблица символов

Ударение

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

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

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

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

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

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

В код HTML можно вставить юникод символа так же как и тире. Код ударения записывают числом либо шестнадцатеричным &#x301, либо десятеричным &#0769. И вставляют ударение в шрифтах моноширинных (в текстовых редакторах) перед ударной гласной, а в пропорциональных — после.

В нашем рассказе есть слово Здорово!. Что хотел Кролик сказать этим словом? Что у него хорошее настроение Здóрово или просто поздоровался Здорóво? Учитывая то, что браузер по умолчанию использует пропорциональный шрифт «Times New Roman», то ударение нужно ставить после ударной гласной. Проверьте.

Если всё получилось удачно, то сохраните и закройте этот файл.

Кодировка

Для дальнейшей работы откройте из рабочей папки файл sample.htm шаблон для новых документов HTML.

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

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

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

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

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

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

Чтобы подобного не происходило с вашими страницами в документ HTML нужно добавить сведения о нём: с какой кодовой страницей сохранён файл. И для этого в языке HTML есть элемент META.

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

Нужно указать элементу META, какое свойство документа он определяет. Для этого в открывающем теге записывают определённый атрибут. Для указания кодовой страницы документа: charset=имя_кодовой_страницы.

Изначально наши документы сохраняются в кодировке (с кодовой страницей) UTF-8. Это и запишем в атрибут тега META charset=UTF-8, а так как сам тег содержит сведение о документе, то поместим его в элемент HEAD с соблюдением структурных отступов.

Элементов META в документе может быть несколько. Они содержат дополнительные сведения о нём для поисковых роботов и браузеров. Добавим ещё один, но с другим атрибутом. Укажем, кто автор этого документа: META author=ваши_имя_и_фамилия и поместим его рядом с предыдущим.

!DOCTYPE html
HTML lang=ru
··HEAD
····TITLEШаблон/TITLE
····META name=author content=ваши_имя_и_фамилия
····META charset=utf-8
··/HEAD
...
/HTML

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

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

Справочник
строчные элементы

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


Титульный лист практических работ

В рабочей папке рядом с шаблоном HTML создайте его копию, переименуйте её в index.htm смените название документа на Оглавление. На большинстве сайтов файл с таким именем является главным. В нём код титульной страницы. С него и начинается просмотр сайта.

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

Затем добавьте ещё один абзац и поместите в него ссылку A. В атрибуте ссылки напишите имя папки task_01 (если она у вас есть) и имя файла add_text.htm (если вы его создавали). Между ними нужно поставить косую черту (slash) /.

Атрибут должен выглядеть так: href=task_01/add_text.htm. Браузер прочтёт эту инструкцию так:

  • рядом с этим файлом зайди в папку task_01,
  • найди в ней файл add_text.htm,
  • и открой его.

Если вы прямо после этого откроете файл в браузере, то ничего не увидите. Дело в том, что у вашей ссылки нет контента (содержимого). Элемент A пустой. Браузер не показывает пустые элементы.

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

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

Главное давайте ссылкам осмысленные имена, чтобы потом в них не заблудиться.