Структура html-страницы
HTML и CSS тесно взаимосвязаны, поэтому, будем рассматривать их в комплексе (частично повторяя информацию, представленную в ветке "HTML"). Начнем сначала.
Что такое HTML-страница?
HTML-страница - это текстовый документ, информация в котором заключена в особые инструкции для браузера, называемые тегами (дескрипторами). Теги заключаются в угловые скобки, и, как правило, имеют открывающий тег и закрывающий тег. Информация, заключенная между открывающим и закрывающим тегом, интерпретируется браузером, согласно значению данного тега.
Например:
--- <p> - открывающий тег абзаца; </p> - закрывающий тег абзаца; тег <b>жирного текста</b> - как выглядит показано ниже: ---
тег жирного текста
Любая HTML-страница должна состоять из обязательного набора тегов. Вот пример пустой HTML-страницы с обязательными тегами:
--- <html> <head> <title>Untitled</title> </head> <body> </body> </html> ---
Более подробно останавливаться на тегах больше не будем, т.к. она подробно рассмотрена в ветке "HTML".
Перейдем к конкретным примерам. Заполним тело HTML-страницы информацией для нашего учебного сайта. Информацию возьмем из Энциклопедии "Кирилла и Мефодия", посвященную Золотому кольцу России.
Как выглядит страница: Пример №1
HTML-код страницы:
Обратите внимание, что браузер "не понимает" форматирование документа в коде HTML-страницы, если оно сделано не при помощи тегов. Для того, чтобы текст в окне "браузера" стал удобочитаемым, необходимо расставить нужные теги в нужном месте HTML-страницы. Воспользуемся тегом абзаца <p> и перевода строки <br> (обратите внимание, что тег перевода строки не имеет закрывающего варианта).
Как выглядит страница: Пример №2
HTML-код страницы:
Обратите внимание, как изменился текст страницы - теперь он стал более удобным для восприятия.
У хорошего веб-дизайнера любой текст html-страницы должен находиться в паре тегов. Обычно, это теги абзаца <p></p>. Текст, заключенный между этими двумя тегами является абзацем. Существует еще два очень полезных тега для форматирования текста:
- <div></div> - блок текста, заключенный в DIV, заканчивается переводом строки, это производится автоматически. При использовании DIV (в отличие от P) в начале тега не вставляется абзац.
- <span></span> - область документа, в пределах которой будут применены параметры форматирования. В отличие от DIV м P этот тег можно применять к любым элементам, даже, к отдельным буквам.
Пример использования тегов DIV и SPAN: Пример №2a
HTML-код страницы: