Гипертекст и HTML

Гипертекст

Символы разрыва

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

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

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

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

Для управления оформлением гипертекста на странице, в документе HTML текст должен содержаться только в элементах HTML.

Чтобы соблюсти требования языка гипертекстовой разметки наш текст нужно поместить в элемент HTML «абзац». Для этого надо учитывать две особенности.

  1. Имена элементов — английские слова или аббревиатуры и их нужно знать.
  2. В коде элементы описывают тегами, которые обозначают начало элемента (открывающий тег) и его конец (закрывающий тег).

Элементы HTML

Имена элементов

Итак, на странице отсутствуют абзацы. Слово абзац по-английски пишется paragraph, а произносится как пáраграф. Элемент, который размечает абзацы в тексте, называется P — первая буква слова paragraph.

В русском языке слово парáграф имеет совсем другое значение. Иначе было бы здорово, если б все параграфы в учебниках состояли лишь из одного абзаца. Но проблема намного глубже. Когда читаешь массу страниц про HTML, смотришь кучу роликов по веб-дизайну, в большей части авторы, размечая абзацы, элемент P называют русским словом «парáграф».

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

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

Можно изучать несколько языков программирования, можно в совершенстве владеть одним. Но правильный ответ — родной. Для немца — немецкий, для француза — французский и т.д. А для вас?

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

Чтобы не было путаницы имя элемента будем произносить сокращённо, как в спецификации HTML 5, с добавлением слова «элемент», чтобы не путать с именем тегов. Спецификация — рекомендации консорциума W3C, который разрабатывает стандарты для создателей браузеров и создателей веб-сайтов. Имя элемента для разметки абзацев будет звучать так: «элемент П».

Имена элементов HTML можно произносить как написано в спецификации W3C с добавлением слова элемент.

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

Яндекс.Перевод позволяет быстро переключиться в Google Translate и Bing Translator, предлагая сразу три версии перевода.

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

Элементы и теги

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

Имена элементов HTML можно произносить по-русски. Это будет фраза, которая описывает его назначение (семантическую роль).

В интернете существует множество справочников, в которых описаны и сами элементы, и их назначение, и примеры их использования. Один из самых популярных справочников-учебников сайт под редакцией Влада Мержевича webref.ru. Ну и, конечно же, основной источник достоверных сведений о стандарте HTML 5 на сайте w3c.org.

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

Имена тегов произносятся только по-английски, как записано в спецификации W3C.

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

А теперь пора поработать.

Практика

Разметка абзацев

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

Элемент P или абзац. Разметим оба абзаца тегами, указывая начало и конец каждого. Именно теги элементов HTML являются для браузера инструкциями, чтобы он знал, каким шрифтом оформить текст на веб‑странице, какой абзац оформить заголовком, откуда загрузить изображение и в каком месте страницы его показать и т. д.

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

Для структурного отступа можно выбрать любое количество пробелов и в коде всех документов он должен быть всегда один и тот же. Оформим его в виде очередного правила.

Правило 2. Для отображения в коде вложенности элемента его теги сдвигаются вправо на ширину структурного отступа относительно уровня вложенности элемента, в котором он находится.

Ширина структурного отступа в 1 пробел не очень заметна, а в 3 и более оставляет излишне большое место слева от начала строки. Поэтому установим как рекомендацию: ширина структурного отступа равна двум пробелам.

Элемент BODY — тело документа HTML — служит для размещения в нём всего, что вы хотите передать читателю — текст, изображения, видеоролдики и т. п. Наш абзац будет располагаться в нём. В следующей строке после тега BODY запишите открывающий тег P с добавлением структурного отступа как у BODY (2 пробела) плюс ещё один (тоже 2 пробела). Итого структурный отступ у P должен быть 4 пробела. Теперь, глядя на код, легко понять, что элемент P находится внутри элемента BODY.

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

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

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

!DOCTYPE html
HTML
··HEAD
····TITLEГипертекстовый документ/TITLE
··/HEAD
··BODY
····P
В тексте    гипертекстового       документа    можно ставить  сколь угодно много  пробелов между    словами, в начале и в конце строк.   Вы   помните    первое правило набора   электронного
       текста?            
Браузер  его   помнит  и  строго  выполняет:        каждое  слово  оканчивается         пробелом и
        только                 одним! Поэтому он и заменяет на один все цепочки пробелов.  

····/P
····P

           Более того, можно сколь угодно много раз



нажимать клавишу Enter, добавляя в текст


новый абзац. Браузер игнорирует и их,
заменяя каждую цепочку концов абзаца на единственный пробел.
····/P
··/BODY
/HTML

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

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

Правило 3. Текст надо записывать от левого края строки, не учитывая структурные отступы.

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

Правило 4. Длина строк в коде не должна превышать 80 символов.

Мы не станем исправлять этот текст по правилам. Пусть он останется примером безóбразного безобрáзного кода.

Но обратим внимание на ещё одну особенность элементов P. Весь текст разбит на два самостоятельных блока — абзацы. Как ведут они себя на странице?

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

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

Строчные элементы

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

Жирный шрифт, как яркое пятно, привлекает внимание ученика и позволяет лучше запомнить правило. Такое выделение называется строгое (англ.: strong). Для него имеется элемент strong.

Прочтём текст ещё раз. В первом абзаце нам напоминают про правило набора электронного текста. Но в тексте это не очень заметно. Поместите словосочетание «правило набора электронного текста» между тегами strongправило… и …текста/strong. Запишем теги впритык со словами, не захватывая пробелы.

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

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

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

Правило 5. Имена тегов в коде HTML записывать только прописными буквами.

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

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

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

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

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

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

Задание. В описании стандарта HTML5 найти и описать все строчные элементы кроме устаревших, нерекомендуемых и осуждаемых.

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

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

Выполнение работы

Для экспериментов со строчными элементами скопируйте из рабочей папки шаблон sample.htm в папку task_01. Переименуйте копию в inline.htm. В элементе TITLE кода HTML смените название документа с Шаблон на Строчные элементы. В элемент BODY, в строки между его тегами BODY и /BODY? добавьте произвольный текст из нескольких абзацев. Произвольный текст можно взять на сайте Яндекс.Рефераты. Но сначала познакомьтесь с текстом на титульной странице.

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

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

В этой же папке task_01 создайте ещй один файл в котором будете формировать таблицу по образцу предложенному выше. Это может быть обычный текстовый документ: TXT, документ Microsoft Word: DOC(x), документ OpenOffice Write: ODT или любой другой, с которым вы умеете работать. Файл назовите inline.

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

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

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

Вопросы на засыпку

Подумайте и ответьте