Урок 3. Заголовки и абзацы

Какие объекты есть в самом обычном тексте? Чаще всего в тексте на веб-странице можно выделить заголовки, абзацы, списки, таблицы, изображения. Вот пример такого текста.

Заголовки

Заголовки структурируют текст, образуют определённую иерархию. В HTML можно использовать до шести уровней заголовков:

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


<html>
<head>
<meta charset="utf-8">
<title>Информатика. 8 класс. Информация и её свойства</title>
</head>
<body>
<h1>Информатика. 8 класс</h1>
<h2>Информация и её свойства</h2>
...
<h2>Контрольные вопросы</h2>
...
</body>
</html>

Абзацы

После заголовков располагаются абзацы текста. Каждый абзац открывается тегом <p> и закрывается тегом </p>. В нашем примере тоже есть эти теги, вот они выделены:


<html>
<head>
<meta charset="utf-8">
<title>Информатика. 8 класс. Информация и её свойства</title>
</head>
<body>
<h1>Информатика. 8 класс</h1>
<h2>Информация и её свойства</h2>
<p>Приступая к изучению информатики, надо пусть приблизительно отдавать себе отчёт в предмете изучения. Что такое информатика? Информатика - это наука об информации. А что такое информация? Вот здесь и начинается то, что я обозначил словом "приблизительно". "Лицом к лицу лица не увидать. Большое видится на расстояньи". Информацию, конечно, можно понимать как сведения, как что-то новое, то, что можно понять. В учебниках информацию связывают с порядком, и это справедливо. Представьте себе, что вы что-то не знаете. На чётко поставленный вопрос в сознании всплывают ответы, но порядка в этом нет, нет информации. А как только появляется информация, пусть в виде понятных новых сведений, то всё в сознании встаёт на свои места, упорядочивается. Информация как определённый ответ на чётко поставленный вопрос внесла порядок в предшествующий хаос предчувствий, мыслей.</p>
<p>Информацию иногда отличают от просто данных сведений. Например, на уроке математики задали решить дома задачу. Для учеников, которые не решили задачу сами, помощь товарищей будет очень информативной, а для тех, кто справились сами, готовое решение не информативно, поскольку оно у них уже есть. Или другой пример. Вы получили записку на языке, который вам не знаком. Что вы узнаете из этой записки? Какую информацию получите? Записка для вас, в сравнении с тем, кто знает язык, будет нести значительно меньше информации. Полученные сведения ещё нуждаются в интерпретации, в понимании, только тогда они становятся информацией для нас.</p>
<p>У человека есть органы чувств, при помощи которых он получает сведения об окружающем мире:</p>
<h2>Контрольные вопросы</h2>
</body>
</html>

Итак, давайте разбираться с этим практически.

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

Письменно ответьте на вопросы так, чтобы получился связный текст (напишите сочинение, затронув все вопросы!). Оформите текст в редакторе с использованием тегов HTML и сохраните получившийся текст в файл с расширением *.html.

  1. Что такое знаки и знаковые системы? Объясните на примерах.
  2. Что такое естественные и формальные языки? Приведите примеры.
  3. Почему в компьютерах используется двоичная знаковая система? Приведите примеры использования в компьютерах других знаковых систем.

Перевод строки в стихах

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

Давид Самойлов. Свободный стих

Профессор Уильям Росс Эшби
Считает мозг негибкой системой.
Профессор, наверное, прав.
Ведь если бы мозг был гибкой системой,
Конечно, он давно бы прогнулся,
Он бы прогнулся, как лист жести,—
От городского гула, от скоростей,
От крика динамиков, от новостей,
От телевидения, от похорон,
От артиллерии, от прений сторон,
От угроз, от ложных учений,
Детективных историй, разоблачений,
Прогресса наук, семейных дрязг,
Отсутствия денег, актерских масок,
Понятия о бесконечности, успеха поэзии,
Законодательства, профессии,
Нового в медицине, неразделенной любви,
Несовершенства.
Но мозг не гибок. И оттого
Стоит, как телеграфный столб,
И только гудит под страшным напором,
И все-таки остается прямым.
Мне хочется верить профессору Эшби
И не хочется верить писателю Кафке.
Пожалуйста, выберите время,
Выключите радио, отоспитесь
И почувствуете в себе наличие мозга,
Этой мощной и негибкой системы.

Сделать это можно при помощи тега <br />, который ставится в том месте, где строку надо разбить на части (break).


<html>
<head>
<meta charset="utf-8">
<title>Давид Самойлов. Свободный стих</title>
</head>
<body>
<h1>Давид Самойлов. Свободный стих</h1>
<p>Профессор Уильям Росс Эшби<br />
Считает мозг негибкой системой.<br />
Профессор, наверное, прав...</p>
</body>
</html>

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

Письменно ответьте на вопросы так, чтобы получился связный текст (напишите сочинение, затронув все вопросы!). Оформите текст в редакторе с использованием тегов HTML и сохраните получившийся текст в файл с расширением *.html.

  1. Кто такой Уильям Росс Уэшби и как он связан с информатикой и компьютерными технологиями?
  2. Дочь какого знаменитого поэта известна как первый программист?
  3. Есть ли что-то общее между написанием литературных произведений и написанием компьютерных программ? Если есть, то что это и как связаны литература и программирование?
  4. Какие стихи для вас очень важны? Почему? Оформите веб-страницу со стихами, которые для вас значимы.
Урок 2 Содержание Урок 4