Язык HTML5

Речь

Два вида речи

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

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

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

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

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

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

Общение с браузером

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

HTML — HyperText Markup Language или язык разметки гипертекстовых документов.

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

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

Различными элементами HTML оформляют конкретные фрагменты документа, имеющие определённые роли: заголовки, цитаты, списки, встроенные изображения и т.п. Семантические имена элементов соответствуют ролям фрагментов, для разметки которых они и предназначены. Поэтому для человека, который знает и понимает семантические названия элементов, не составит труда размечать гипертекстовые документы и создавать веб‑страницы в соответствии со стандартами HTML 5.

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

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

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

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

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

Разработка шаблона

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

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

Откройте программу Блокнот и выберите в меню Файл пункт «Сохранить как…». Выберите для сохранения свою рабочую папку. Запишите имя файла sample.htm. Выберите Тип файла: Все файлы и укажите кодировку UTF‑8. Теперь файл можно сохранить.

Правило 1. Имена всех папок и файлов должны быть написаны строчными латинскими буквами и цифрами без пробелов не более 8. Добавленное расширение имени файла не более 3 символов.

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

Сохраняя новый файл, допишите расширение имени: после имени обязательно ставьте точку и без пробела добавляйте 3 латинские буквы htm от английских слов hypertext markup (размеченный гипертекст).

Теперь разметим документ кодом HTML, чтобы он стал понятен браузеру. Самая первая строчка в коде — объявление типа документа. Она сообщает браузеру, что этот документ с гипертекстовой разметкой.

!DOCTYPE html

Язык HTML состоит из элементов. Элементы HTML можно рассматривать как слова. Они объясняют браузеру, что нужно делать и как отображать фрагменты текста на веб‑странице.

Элементы HTML — основные конструкции языка HTML.

Главный элемент страницы HTML — сам документ. Элементы записывают, используя скобки особого рода. Их называют теги. Открывающий тег (начало элемента) запишем во второй строке так: HTML, а закрывающий (конец элемента) напишем в новой строке прямо под ним: /HTML. Обратите внимание: имя закрывающей скобки отбито косой чертой, по‑английски slash. Вот что получилось.

!DOCTYPE html
HTML
/HTML

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

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

Для удобной работы расположите Блокнот и окно браузера рядом друг с другом.

Экспериментальный полигон.

Обновить страницу можно щёлкнув мышкой кнопку Обновление страницы. Профессионалы же редко хватаются за мышку, когда обе руки лежат на клавиатуре. Обновить веб‑страницу с клавиатуры можно так: аккордом клавиш Alt + Tab выберите браузер и нажмите клавишу F5.

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

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

Вспомните, как сдвигая вправо, Проводник показывает папки, вложенные в одну. Так же поступим с описанием элемента HEAD. Освободим пару строк между тегами элемента HTML и со структурным отступом в 2 пробела запишем открывающий тег HEAD. А в следующей строке строго под ним, с тем же структурными отступом, закрывающий — /HEAD.

!DOCTYPE html
HTML
··HEAD
··/HEAD
/HTML

В головной части серьёзных веб‑страниц пишут много сведений. Мы пока ограничимся одним названием. Для этого имеется элемент TITLE — заглавие. Но он будет помещён внутри HEAD, поэтому его теги нужно будет сдвигать вправо ещё на один структурный отступ, то есть добавить дополнительно ещё 2 пробела.

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

!DOCTYPE html
HTML
··HEAD
····TITLEГипертекстовый документ/TITLE
··/HEAD
/HTML

Браузер всегда читает содержимое файла с диска. Поэтому сначала нужно сохранить файл в Блокноте: аккорд Ctrl + S (первая буква английского слова Save). И только после этого обновить страницу в браузере. Попробуйте самостоятельно найти, где браузер показал название документа.

Голова документа уже описана и теперь осталось добавить к ней тело: элемент BODY. Он будет помещён сразу после HEAD на том же структурном уровне.

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

!DOCTYPE html
HTML
··HEAD
····TITLEГипертекстовый документ/TITLE
··/HEAD
··BODY
Текст документа всегда записывают в теле документа, между тегами элемента BODY.
··/BODY
/HTML

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

Сохраните изменения в файле и обновите рабочую область в браузере. Код нашего документа HTML написан правильно, браузер его «понимает» и выполняет. Мы видим страницу с названием и текстом.

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

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

Чтобы каждый раз, создавая новый документ не писать всё то, что уже написано в sample.htm превратим его в шаблон. В дальнейшем, по мере изучение языка HTML, будем его усложнять: добавлять и другие элементы. Но это позже.

Шаблон должен хранить в себе неизменяемые фрагменты. Теги элементов с учётом структурных отступов нужны во все будущих документах, а вот текст — нет. Поэтому удалите текст и строку между тегами BODY и /BODY оставьте пустой. И замените название документа в элементе TITLE на Шаблон.

Закройте теперь уже шаблон sample.htm и в текстовом редакторе и в браузере. В рабочей папке создайте папку и назовите её по‑английски: task_01 (первое задание). Скопируйте файл sample.htm в созданную папку и копию файла в ней переименуйте add_text.htm.

Дальнейшую работу будем выполнять с файлом add_text.htm.

Вставка текста
в гипертекстовый документ

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

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

В тексте    гипертекстового       документа    можно ставить  сколь угодно много  пробелов между    словами, в начале и в конце строк.   Вы   помните    первое правило набора   электронного
       текста?            
Браузер  его   помнит  и  строго  выполняет:        каждое  слово  оканчивается  пробелом и
        только                 одним! Поэтому он и заменяет на один все цепочки пробелов.  


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



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


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

Сохраните документ и обновите страницу.

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

Давайте порассуждаем.

  1. Документ HTML — гипертекстовый документ.
  2. Для разметки гипертекстовых документов используют язык HTML.
  3. Язык HTML — состоит из элементов.
  4. Обычный текст — элементом HTML не является.

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

Что это за элементы, как создавать абзацы, как форматировать текст, как вставлять изображения. Об этом уже на следующих уроках.

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

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

  1. Что означает аббревиатура HTML?
    ʚоɯнǝwʎʞоɓ хıqʚоɯɔʞǝɯdǝuиɹ иʞɯǝwεɐd ʞıqεʁ
  2. Сколько и каких элементов содержится непосредственно в файле гипертекстового документа?
    ΊW⟂H — ниɓо
  3. Сколько вложенных элементов содержится в элементе HTML?
    ʎⱭOᗺ и ⱭⱯЭH — ɐʚɓ
  4. Для чего служит тег /HEAD?
    ɐɯнǝwʎʞоɓ ʁинɐɔиuо ǹǝноʞ ɯǝɐҺɐнεоƍо
  5. Между какими тегами записывают название веб-страницы?
    ЭΊ⟂I⟂/ и ЭΊ⟂I⟂
  6. Какова рекомендованная величина структурного отступа?
    ɐvǝƍоdu ɐʚɓ