День 5. Вместо каллиграфии.
Друзья, как ни крути, а на просторах всемирной паутины тексты занимают все таки главенствующую роль. Статьи, описания, ссылки, даже самый кайфовый блог с самыми кайфовыми читателями - все это текстовая информация. И, разумеется, мне показалось что для начала нужно научиться основам ввода и структурирования текста на странице.
Здесь отступление. Друзья, прокрутите страницу вниз. До конца, пожалуйста. Видите сколько кода размещено в записи. Весь этот код, ясное дело вводился мной вручную и как итог этого я ясно понимаю структуру вводимого мной кода, при написании кода пальцы сами летят к нужным знакам, да чего уж там, я теперь хоть представляю где какая буква на английской раскладке клавиатуры находится. Не ленитесь и вы, не копируйте код со страницы, а печатайте вручную, использую приведенный здесь код как справочник, не более.
Так, переходим собственно к делу, думаем и вникаем.
Тег обрыва строки <br>
Представьте, что вам нужно написать стихотворение на своей странице.
Скажем что то вроде:
А дом, заставленный добром - еще не дом,
И даже с люстрой над столом еще не дом,
И на окне с живым цветком еще не дом,
И даже с чайника баском еще не дом.
И даже с люстрой над столом еще не дом,
И на окне с живым цветком еще не дом,
И даже с чайника баском еще не дом.
Когда вечерняя сгустится темнота,
Так эта истина понятна и проста,
Что от ладони до окна наполнен дом
Твоим теплом, твоим теплом.
Все вещи тихо растворила темнота,
И стала комната бездонная и пуста,
И среди этой мирозданной пустоты
Весь мир мой ты и дом мой ты.
А дом, заставленный добром - еще не дом,
И даже с люстрой над столом еще не дом,
И на окне с живым цветком еще не дом,
И даже с чайника баском еще не дом.
Утираем слезы умиления и думаем о том, что если использовать элемент абзаца <p>
то есть вот такую конструкцию,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ru" dir="LTR" title="Привет">
<head>
<title>365.WEB-программирование</title>
</head>
<body>
<p>
А дом, заставленный добром - еще не дом,
И даже с люстрой над столом еще не дом,
И на окне с живым цветком еще не дом,
И даже с чайника баском еще не дом.
Когда вечерняя сгустится темнота,
Так эта истина понятна и проста,
Что от ладони до окна наполнен дом
Твоим теплом, твоим теплом.
Все вещи тихо растворила темнота,
И стала комната бездонная и пуста,
И среди этой мирозданной пустоты
Весь мир мой ты и дом мой ты.
А дом, заставленный добром - еще не дом,
И даже с люстрой над столом еще не дом,
И на окне с живым цветком еще не дом,
И даже с чайника баском еще не дом.
</p>
</body>
</html>
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ru" dir="LTR" title="Привет">
<head>
<title>365.WEB-программирование</title>
</head>
<body>
<p>
А дом, заставленный добром - еще не дом,
И даже с люстрой над столом еще не дом,
И на окне с живым цветком еще не дом,
И даже с чайника баском еще не дом.
Когда вечерняя сгустится темнота,
Так эта истина понятна и проста,
Что от ладони до окна наполнен дом
Твоим теплом, твоим теплом.
Все вещи тихо растворила темнота,
И стала комната бездонная и пуста,
И среди этой мирозданной пустоты
Весь мир мой ты и дом мой ты.
А дом, заставленный добром - еще не дом,
И даже с люстрой над столом еще не дом,
И на окне с живым цветком еще не дом,
И даже с чайника баском еще не дом.
</p>
</body>
</html>
то получится вот такая вещь:
Зато если применить тег <br>, то есть сказать браузеру: "Так дорогой, вот до сюда пишешь строку, а потом сматываешь удочки и переходишь на строку ниже", то можно получить вот такой вариант кода:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ru" dir="LTR" title="365.WEB">
<head>
<title>365.WEB-программирование</title>
</head>
<body>
<p>
А дом, заставленный добром - еще не дом,<br/>
И даже с люстрой над столом еще не дом,<br/>
И на окне с живым цветком еще не дом,<br/>
И даже с чайника баском еще не дом.<br/>
<br/>
Когда вечерняя сгустится темнота,<br/>
Так эта истина понятна и проста,<br/>
Что от ладони до окна наполнен дом<br/>
Твоим теплом, твоим теплом.<br/>
<br/>
Все вещи тихо растворила темнота,<br/>
И стала комната бездонная и пуста,<br/>
И среди этой мирозданной пустоты<br/>
Весь мир мой ты и дом мой ты.<br/>
<br/>
А дом, заставленный добром - еще не дом,<br/>
И даже с люстрой над столом еще не дом,<br/>
И на окне с живым цветком еще не дом,<br/>
И даже с чайника баском еще не дом.<br/>
</p>
</body>
</html>
И соответственно вот такой результат:
<br> </br>, но, когда такую структуру нужно ввести много раз, это становится проблемой. Так что запомните первый вариант, впредь будет использоваться именно он.
И обратите внимание на один новый и очень важный момент: посмотрите внимание на отступы от левого края в записи кода. Чем "глубже" элемент вставлен в код, тем дальше он отстоит от левого края. То есть прилипает к нему только заглавный тег <html>, теги <head> и <body> встроены в него и на один шаг стоят дальше. Внутри <head> и <body> также есть теги и они стоят еще дальше.
К чему эти сложности? В коде моей амебной страницы не так много элементов и это правило размещения элементов может показаться сейчас излишним, но при создании более глобальных страниц конструкции кодов могут быть на порядок сложнее и разработчику необходимо ориентироваться в структуре, а делать это когда все твои теги размещены списком, довольно сложно. Этот принцип написания кодов на самом деле является общепринятым для всех программистов, пишущих на любых языках.
Заголовки
Заголовки статей очень нужны при написании больших объемов текста, они позволяют легко ориентироваться в нем. Собственно, чтобы их создавать в языке HTML имеется элемент с хитрым названием H, тег его выглядит так: <h>. При этом так как в тексте есть главный и заголовок и подзаголовки, то в HTML предусмотрено 6 уровней заголовков.Называются они соответственно: <h1> <h2> <h3> <h4> <h5> <h6>. Давайте рассмотрим пример создания заголовков.<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html title="365.WEB" lang="ru">
<head>
<title>Заголовки</title>
<meta htttp-equiv="content type" content="text/html" charset="windows-1251" />
</head>
<body>
<h1 align="center">Заголовок 1</h1>
<h2 align="center">Загловок 2</h2>
<h3 align="center">Загловок 3</h3>
<h4 align="center">Заголовок 4</h4>
</body>
</html>
Результат:
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html title="365.WEB" lang="ru">
<head>
<title>Заголовки</title>
<meta htttp-equiv="content type" content="text/html" charset="windows-1251" />
</head>
<body>
<h1 style="color:#0000FF; word-spacing:20px;" align="center">Заголовок 1</h1>
<h2 style="color:#00FF00; word-spacing:20px;" align="center">Заголовок 2</h2>
<h3 style="color:#4567AC; word-spacing:20px;" align="center">Заголовок 3</h3>
<h4 align="center">Заголовок 4</h4>
</body>
</html>
Результат:
Также элементы заголовка поддерживает атрибут title, который позволяет добавлять всплывающую подсказку для заголовка. И снова код:
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html title="365.WEB" lang="ru">
<head>
<title>Заголовки</title>
<meta htttp-equiv="content type" content="text/html" charset="windows-1251" />
</head>
<body>
<h1 title="Заголовок" style="color:#0000FF; word-spacing:20px;" align="center">Заголовок 1</h1>
<h2 style="color:#00FF00; word-spacing:20px;" align="center">Заголовок 2</h2>
<h3 style="color:#4567AC; word-spacing:20px;" align="center">Заголовок 3</h3>
<h4 align="center">Заголовок 4</h4>
</body>
</html>
И снова результат:
Списки
Очень часто приходится информацию фиксировать в виде списков. При этом если порядок записей в списке неважен, то используется маркированный(ненумерованный) список, если порядок все таки важен, то можно применить список, в котором элементы будут пронумерованы. Наконец, может понадобится составлять список в списке, вложенный то есть.И вот для всех этих вариантов есть возможность оформления.
Начнем пожалуй с маркированного списка.
Элементом маркированного списка является UL, основным атрибутом элемента UL является type, который определяет значок, который будет стоять перед записями списка(по умному он называется маркер).
Type может принимать следующие значения:
- circle - окружность
- square - квадрат
- disc - круг
При этом к элементу UL применимы атрибуты title и style. Они нам уже знакомы, их применения абсолютно аналогичны предыдущим.
Внутри элемента UL для внесения записей в список используется элемент LI. Этим элементом задаваться каждая запись.
Пример:
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html title="365.WEB" lang="ru">
<head>
<title>Списки</title>
</head>
<body>
<h1>Рыцари круглого стола</h1>
<ul type="circle" style="color:#0000FF">
<li>Гавейн</li>
<li>Ланселот</li>
<li>Галахад</li>
</ul>
</body>
</html>
"http://www.w3.org/TR/html4/loose.dtd">
<html title="365.WEB" lang="ru">
<head>
<title>Списки</title>
</head>
<body>
<h1>Рыцари круглого стола</h1>
<ul type="circle" style="color:#0000FF">
<li>Гавейн</li>
<li>Ланселот</li>
<li>Галахад</li>
</ul>
</body>
</html>
Результат:
В принципе, сама конструкция достаточно проста, создайте свой список и вы поймете это абсолютно точно.
Аналогично создаются нумерованные списки. Элементом нумерованного списка является OL, атрибут type в нем может принимать значения:
- А - заглавные латинские буквы
- а - строчные латинские буквы
- 1 - арабские цифры
- I - заглавные римские цифры
- i - строчные римские цифры
Вот вам пример нумерованного списка:
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html title="365.WEB" lang="ru">
<head>
<title>Списки</title>
</head>
<body>
<h1>Рыцари круглого стола</h1>
<ol type="1" style="color:#0000FF">
<li type="1" value="7">Гавейн</li>
<li>Ланселот</li>
<li>Галахад</li>
"http://www.w3.org/TR/html4/loose.dtd">
<html title="365.WEB" lang="ru">
<head>
<title>Списки</title>
</head>
<body>
<h1>Рыцари круглого стола</h1>
<ol type="1" style="color:#0000FF">
<li type="1" value="7">Гавейн</li>
<li>Ланселот</li>
<li>Галахад</li>
</ol> </body>
</html>
</html>
Вот картинка:
Обратите внимание, что список начинается с номера 7. Для этого был использовани атрбут value. Он задает начальное значение маркера для первой записи. Если вы будете использовать в качестве маркера латинские буквы, то качестве значение атрибута value должна быть нужная вам буква. Если нужно, чтобы список имел нормальные номера, то атрибут value можно не использовать.
Домашнее задание.
Друзья, я не привел пример сложного списка с вложенными элементами. Его то я и предлагаю создать вам самим. Для этого нужно внутрь элемента UL(или OL) вложить другой элемент списка(какой это будет элемент - OL или UL - не имеет значения). Особое внимание стоит обратить на то, где заканчивается один список и начинается другой, иначе вы рискуете не создать нужную структуру. В дополнение создайте подсказки для каждого элемента главного списка. Мой вариант такого спика вы сможете увидеть в завтрашнем рассказе.Итог.
Мы рассмотрели большую часть оформления текста, конструкции оказались, на мой взгляд достаточно просты, я уверен, что и вам не составит особого труда понять их после небольших самостоятельных занятий. И, как обычно, вот небольшой сюрприз вам от меня.Пока, друзья.
Комментариев нет:
Отправить комментарий