Блочные и строчные элементы. Списки. Картинки. Урок 3.
Как на страничку вставить картинку?
Без картинок, странички в сети Интернет, лишились бы доли своей привлекательности и шарма. Поэтому, в процессе работы, нам не обойтись без такого важного элемента, как img, который за вставку этих картинок на страничку и отвечает. Его синтаксис:
<img src="путь к картинке" />
Возможно, вы удивитесь, ведь от большинства других элементов, которые мы с вами встречали, у этого – нет закрывающего тэга. В чём дело? Нет, это не ошибка. Просто этот элемент, не должен где-то начинаться, а где-то заканчиваться. У него есть атрибут, в котором хранится путь к картинке, и этого вполне достаточно для того, чтобы отобразить её в том или ином месте. Обратите внимание на то, как этот тэг пишется: он открывается обычным образом и тут же закрывается с помощью />. В принципе, вместо /> можно было вполне написать вот так >, опустив косую черту и браузер бы даже прекрасно понял вас и отобразил всё правильно, несмотря на то, что синтаксически это было бы неверно. Но это тема отдельного урока, и мы обязательно об этом с вами поговорим.
Другие полезные элементы при работе с текстом. Понятие блочного и строчного элемента.
Предположим, нам надо вставить цитату на нашу страничку. Для этого можно использовать тэг <q>, сокращённо от quote. Причём текст, который мы будем заключать в цитату, не нужно будет обрамлять в кавычки – за нас всё сделает элемент q. Наряду с элементом q, есть ещё и такой элемент как blockquote. Он тоже используется для цитат. Давайте же попробуем определить различие в этих элементах.
Элемент q обычно используется для короткой цитаты. К примеру, пусть это будет Шекспировская – “Быть или не быть?". Это небольшая цитата и её можно поместить в абзац, то есть элемент p.
Пришло время наконец-то рассказать, о строчных и блочных элементах.
Вот к примеру, q - это строчный элемент. Такие элементы могут быть помещены в блочные, такие как p. Но не наоборот. При этом переноса строки внутри абзаца осуществлено не будет. Чтобы понять, о чём мы с вами сейчас говорим, попробуйте проделать следующее. Откройте HTML-файл и пропишите в нём такой код:
<p>Извечная дилемма, которая изредка мучает человека: <q>Быть или не быть</q></p>
Обратите внимание, цитата автоматически была заключилась в кавычки. Произошло так, очевидно потому, что браузер знает что перед ним цитата. И оформляет её в соответствии с заложенными в него правилами. Возможно, читатель задаст вполне закономерный вопрос: а есть ли смысл использовать этот тэг, если гораздо проще будет заключить его в кавычки сразу. Действительно соглашусь, кавычки поставить гораздо проще и времени это нам сэкономит. Но суть здесь не в этом. Заключая цитату в соответствующий тэг, мы намеренно создаём структуру и сообщаем поисковым роботам, заходящим на сайт, что вот здесь цитата. И воспринимать её надо соответствующим образом.
Другое дело с элементом blockquote, он используется для тех же цитат, но только если эта цитата – какая-нибудь проза или многострочное высказывание. При этом элемент ведёт себя так, как будто перед ним и после него нажали клавишу Enter. Такое поведение свойственно блочным элементам, коим blockquote и является. Внутри блочных элементов могут находиться другие блочные элементы. Иначе говоря, - внутри p может находиться blockquote и с точностью да наоборот. Где это может применяться на практике? Вот к примеру мы решили какое-то четверостишие поместить в тэг blockquote. Давайте проделаем это на практике. Вставим в наш документ вот этот кусок кода:
<p>Вот одно из стихотворений: <blockquote> Первая строка Вторая строка </blockquote></p>
Запустим этот код в браузере. Обратили внимание, как повёл себя элемент blockquote? Он ведёт себя так, словно обособленный блок. Я намеренно поместил код в одну кучу, чтобы продемонстрировать вам поведение элемента и не путать отображение элемента в коде с его отображением на странице.
Ладно, а если мы хотим сделать так, чтобы вторая строчка начиналась с новой строки. То как же быть в этом случае? Если мы в самом коде нажмём Enter, между первой и второй строчкой, то ничего не поменяется. Ведь, как мы уже знаем, браузер проглатывает всё, что больше одного пробела, а также символы табуляции и переноса строк. Выход есть, поместить каждую строчку внутри элемента blockquote в элемент p. Наш код при этом видоизменится следующим образом:
<p>Вот одно из стихотворений: <blockquote> <p>Первая строка</p> <p>Вторая строка </p></blockquote></p>
Можете открыть и проверить в своём браузере. Ранее я упоминал, что прописал код одной строкой лишь в учебных целях. А на самом деле, лучше придерживаться правила – каждый блок начинается с новой строки. Если блок вложенный, то делается отступ либо в два пробела, либо с помощью табуляции. Вот как правильно:
<p>Вот одно из стихотворений: <blockquote> <p>Первая строка</p> <p>Вторая строка </p> </blockquote> </p>
Надеюсь, основной смысл такой структуризации вам понятен – из ближайших по аналогии, можно ещё вспомнить матрёшку. Одна большая помещает в себя более маленькую, а та в свою очередь ещё поменьше.
Но обратите внимание, должна соблюдаться именно вложенность. К примеру вот такая разметка недопустима:
<p>Код начинается <em>здесь, </p> а заканчивается там. <em>
Это явное нарушение структуризации и всех принципов вложенности.
Так какой же всё-таки вывод мы можем сделать, исходя из всего вышенаписанного? Если нам нужно процитировать только одну строку, то мы используем quote. Потому как, попытки поместить в этот элемент нечто многострочное, - не увенчаются успехом. А тэг blockquote напротив, нам такую возможность предоставляет. Вот собственно и вся разница. Значит, в зависимости от того или иного случая, нам нужно будет использовать тот или иной тэг. Принцип тут такой – каждый инструмент хорош для какой-то одной цели.
У блочного элемента есть такая особенность, - переносить текст на следующую строку. Но неужели теперь всегда, когда мы захотим какой-то текст перенести на следующую строчку, мы должны обрамлять его в тэг p? Совсем нет, ведь в языке HTML есть такой элемент, который специально для этого и создан. Называется он <br />. Он, также как и img, относится к разряду одиночных тэгов, поскольку там где он начинается, там он и заканчивается.
Списки
Итак, мы уже с вами немало умеем. Но давайте придадим нашей страничке ещё больше структурированности. В частности, изучим элемент списков. Списки в интернете встречаются так же часто, как и в повседневной жизни. Это могут быть, списки просмотренных фильмов, будущих покупок, или вещей, которые необходимо будет взять с собой в дорогу. Предположим, что у нас есть информация, которую мы хотим перечислять не через запятую, а так, чтобы каждый элемент списка был на отдельной строке. Тем самым у нас всё будет на виду и в голове будет порядок. В HTML как раз есть специальный инструмент, предназначенный для работы со списками.
Вот к примеру есть у нас список вещей, которые мы хотели бы взять с собой в дорогу и у нас появилась необходимость, выложить этот список на свою страничку в интернете, чтобы поделиться с ней общественностью.
1. Ноутбук.
2. Полотенце.
3. Зубная паста.
…
и т. д.
Чтобы сделать такое, мы конечно можем использовать элемент p. Но тому, чтобы так не поступать, есть несколько причин. Во-первых, он не предназначен для списков. И соответственно, мы в дальнейшем не сможем придать ему стиль, который будет подходить для него больше всего, а номера нам нужно будет проставлять вручную. Во-вторых, если мы вдруг захотим сменить порядок, то для каждого абзаца нам придётся менять и цифру, в то время как для элементов списка это всё будет происходить автоматически. Ну и в-третьих, гораздо правильнее и разумнее использовать для достижения какой-то цели, наиболее подходящий инструмент. Здесь всё просто, - списки предназначены для списков, а абзацы, - для абзацев. Чем больше вы будете придерживаться такого принципа, тем с меньшими трудностями вам потом предстоит столкнуться.
Списки бывают двух видов: упорядоченный (нумерованный) и неупорядоченный (маркированный). Давайте же рассмотрим на практическом примере, как же отобразить в виде HTML наш список в дорогу, который мы хотели бы с собой взять. Задачу можно разбить в два этапа:
1. Заключить каждый пункт списка в тэги <li></li>.
2. В зависимости от того, какой мы список будем использовать, - нумерованный или маркированный, - обернуть все наши пункты тэгами ol или ul соответственно.
В итоге у меня получился такой код:
<ul> <li>Ноутбук</li> <li>Полотенце</li> <li>Зубная паста</li> </ul>
Кроме того, мы можем создавать списки внутри списков. Для этого нам нужно будет в элемент li вложить элемент ul.
В коде это отобразится вот так:
<ul> <li>Ноутбук <ul> <li>Сумка для ноутбука</li> <li>Зарядка для ноутбука</li> </ul> </li> <li>Полотенце</li> <li>Зубная паста</li> </ul>
А теперь попробуйте набрать всё это в браузере и посмотреть, что из этого получится. Причём не обязательно повторять всё за мной, строчка в строчку. Ведь у каждого может быть свой список. Поэкспериментируйте с тэгами ul и ol и обратите внимание, как при этом меняется отображение в браузере. Попробуйте вставить перед элементами списка ul или ol абзац p, и исходя из того, что у вас в результате получилось, ответьте на вопрос, - список это строчный или блочный элемент?
Хочу также заметить, что упорядоченные и неупорядоченные списки не единственные, которые можно встретить в HTML. Гораздо реже, но всё-таки где-то да встречаются списки определений:
<dl> <dt>Термин 1</dt> <dd>Описание термина 1</dd> <dt>Термин 2</dt> <dd>Описание термина 2</dd> </dl>
А теперь представьте такую ситуацию, что вы хотите описать какой-то термин, и термин этот ни что иное как тэг HTML. Пусть это будет тэг <p>. Но если этот элемент ввести на клавиатуре обычным способом, то страничка поедет. Ведь браузер будет обрабатывать её как обычный код, ему же никто не объяснял, что на самом деле этот тэг следует интерпретировать как обычный текст. Как быть в таком случае? Для этого следует использовать так называемые сущности. В нашем случае, чтобы отобразить тэг p, придётся использовать <p> К слову, с помощью таких сущностей можно отобразить в браузере практически любой символ, будь то копирайт или амперсанд. К примеру, значок копирайта отображается с помощью ©.
Также я предлагаю выучить ещё несколько новых элементов. Основные принципы их использования вы знаете, так что ознакомиться с ними у вас не составит никакого труда. Это я предлагаю вам сделать в качестве домашнего задания.
<code> - используется для отображения кода из какой-нибудь компьютерной программы.
<em> - отображение текста курсивом.
<address> - данный элемент сообщает браузеру, что его содержимое – адрес.
<strong> - выделение текста жирным.
<pre> - отображение текста как есть. То есть, будут учитываться все пробелы и табуляции в тексте.
<hr> - вставляет в текст горизонтальную линию. Обычно используется для логического отделения одной части от другой.
На этом всё! Если будут какие-то вопросы, то пишите их в комментариях к уроку.