Всем привет, друзья!
Мы с Вами на первом занятии столкнулись с неожиданной проблемой: браузер отказался показывать наш текст так, как мы его написали:
Все дело тут в том, что интерпретатор HTML любого браузера не распознает знаки переноса строки ("Enter"). Также не распознаются знаки табуляции ("Tab") и несколько пробелов, стоящих подряд - браузер их "видит" как один.
В этом есть и очевидный плюс: код в текстовом редакторе с помощью переносов строки и знаков табуляции можно редактировать таким образом, чтобы было проще с ним работать при его отладке, при этом его отображение в браузере изменяться не будет. Для сравнения два примера:
С каким вариантом кода работать будет проще? Думаю, ответ очевиден.
Так как же заставить браузер переносить текст по строкам? Варианта два:
Вариант 1. Двойной тэг <p></p> (от англ. paragraph - абзац). Текст, заключенный внутри этого тэга считается отдельным абзацем и будет начинаться с новой строки:
<html>
<head>
<title>Стих</title>
</head>
<body>
<p>Я помню чудное мгновенье:</p>
<p>Передо мной явилась ты,</p>
<p>Как мимолетное виденье,</p>
<p>Как гений чистой красоты.</p>
</body>
</html>
Вариант 2. Использовать одинарный тэг <br> - он показывает браузеру, в каком месте нужно сделать перенос строки:
<html>
<head>
<title>Стих</title>
</head>
<body>
Я помню чудное мгновенье:<br>
Передо мной явилась ты,<br>
Как мимолетное виденье,<br>
Как гений чистой красоты.<br>
</body>
</html>
Вообще, в HTML с текстом можно делать все то же самое, что и в любом текстовом процессоре (Microsoft Word или другом аналогичном). Часто пользуетесь этими кнопочками?
Какие тэги за все это отвечают:
<b></b> (от англ. bold - жирный) - текст, заключенный в этот тэг отображается жирным шрифтом
<i></i> (от англ. italian - итальянский) - текст, заключенный в это тэг отображается в "итальянском" стиле - курсивом
<u></u> (от англ. underline - подчеркнутый)- текст, заключенный в это тэг отображается подчеркнутым снизу
<s></s> (от англ. strike - перечеркнутый)- текст, заключенный в это тэг отображается перечеркнутым посередине горизонтальной чертой.
Для примера возьмем опять наше стихотворение и выделим на разных строках четыре слова разными стилями:
<html>
<head>
<title>Стих</title>
</head>
<body>
Я помню <b>чудное</b> мгновенье:<br>
Передо мной <i>явилась</i> ты,<br>
Как <u>мимолетное</u> виденье,<br>
Как гений <s>чистой</s> красоты.<br>
</body>
</html>
А если мы захотим применить к одному и тому же участку текста два или три стиля? Тогда нужно будет заключать текст в несколько двойных тэгов, но делать это нужно правильно. В среде веб-разработчиков существуют "правила хорошего тона", одно из них мы с Вами уже разбирали в начале этого урока (когда писали код "красиво", используя знаки табуляции и переноса текста), другое относится к применению нескольких двойных тэгов к одному и тому же "куску" текста: тэги должны быть вложены друг в друга, например так:
<b><i><u><s>текст</s></u></i><b>
Чтобы было более наглядно напишу так:
<b>
<i>
<u>
<s>
текст
</s>
</u>
</i>
</b>
Обратите внимание, что тэги закрываются в последовательности, обратной той в которой они открывались.
Вот так будет не правильно:
<i><u>текст</i></u>
И так тоже неправильно:
<s><b><i>текст</b></s></i>
Теперь возьмем снова наш пример и применим к каждой строке по два-три стиля:
<html>
<head>
<title>Стих</title>
</head>
<body>
<b><i>Я помню чудное мгновенье:</i></b><br>
<u><s>Передо мной явилась ты,</s></u><br>
<u><i>Как мимолетное виденье,</i></u><br>
<b><u><i>Как гений чистой красоты.</i></u></b><br>
</body>
</html>
В текстовых процессорах можно увидеть еще две кнопки, управляющие стилем текста:
Эти стили бывают особенно полезны при написании формул.
Тэги отвечающие за их создание:
<sub></sub> - (англ. sub - под) нижний индекс
<sup></sup> - (англ. super - сверх) верхний индекс
Запомнить достаточно просто: посмотрите на последнюю букву в тэге (b или p) - в какую сторону она направлена круглой частью, с той стороны и будет располагаться индекс.
На сегодня это все. А вот вам "домашнее задание": создайте веб-страницу со следующим текстом (соблюдая стиль):
Исходный текст (чтобы скопировать):
Галогенирование метана:
CH4 + Br2 → CH3Br + HBr (hv или повышенная to);
CH4 + I2 → CH3I + HI (hv или повышенная to).
Реакция носит цепной характер. Молекула брома или йода под действием света распадается на радикалы, затем они атакуют молекулы метана, отрывая у них атом водорода, в результате этого образуется свободный метил CH3·, который сталкиваются с молекулами брома (йода), разрушая их и образуя новые радикалы йода или брома:
Br2 → Br·+ Br· (hv); – инициирование реакции галогенирования;
CH4 + Br· → CH3· + HBr; – рост цепи реакции галогенирования;
CH3· + Br2 → CH3Br + Br·;
CH3· + Br· → CH3Br; – обрыв цепи реакции галогенирования.
Галогенирование — это одна из реакций замещения. В первую очередь галогенируется наименее гидрированый атом углерода (третичный атом, затем вторичный, первичные атомы галогенируются в последнюю очередь). Галогенирование метана проходит поэтапно – за один этап замещается не более одного атома водорода.
CH4 + Br2 → CH3Br + HBr (hv или повышенная to);
CH3Br + Br2 → CH2Br2 + HBr (hv или повышенная to);
и т.д.
Галогенирование будет происходить и далее пока, не будут замещены все атомы водорода.
CH2Br2 + Br2 → CHBr3 + HBr (hv или повышенная to);
CHBr3 + Br2 → CBr4 + HBr (hv или повышенная to).
Попробуйте сделать сами, а на следующем занятии я покажу Вам исходный код.
На этом всем спасибо за внимание и до новых встреч!