Теги html, head, title, body, p, ol, ul, li, table, img.

Теги html, head и title мы уже рассмотрели раньше. Здесь заметим то, что у этих тегов есть еще атрибуты и вложенные теги. Так у тега html есть атрибут lang, значение которого сообщает браузеру, на каком языке написана страница, например, «ru».

У тега head может быть вложенный тег basefont. Атрибуты этого тега определяют умалчиваемый шрифт страницы: size – размер шрифта, face – название шрифта, color – цвет шрифта.

В базовой структуре документа указан тег body. Внутрь этого контейнерного тега помещается все теги страницы.

Сначала рассмотрим тег p, обозначающий абзац. Браузер перед текстом и после текста, помещенного в абзац, делает широкий междустрочный промежуток. Текст абзаца не пишется с красной строки, но вы сможете это сделать позже, когда научитесь работать со стилями. Атрибут align позволяет выровнять текст абзаца по левому краю экрана (значение left), по правому (right), или по центру (center). По умолчанию – значение left.

Поле большое, зеленый лесок.

Сколько весною путей и дорог!

Хорошо на свете! Солнышко, свети

Пожелай нам, ветер, доброго пути!

Доброго, доброго, доброго пути.

Самого-самого доброго пути.

Этот текст в браузере будет выглядеть так:

Поле большое, зеленый лесок.

Сколько весною путей и дорог!

Хорошо на свете! Солнышко, свети!

Пожелай нам, ветер, доброго пути!

Доброго, доброго, доброго пути.

Самого-самого доброго пути.

Вернемся к тегу body. У него может быть достаточно много атрибутов. Атрибутом title вы можете задать текст всплывающей подсказки, появляющийся при остановке мыши на экране. Атрибут title разрешается писать в любом теге, не только в body. Если он написан и в body и в каком-нибудь теге p, расположенном внутри body, то при наведении мыши на абзац будет показана всплывающая подсказка, указанная в теге p, а в любом другом месте – указанная в теге body.

Важно! Этот принцип соблюдается всюду. Вы можете указать некоторые характеристики для контейнера, и они будут применяться для всех вложенных тегов, кроме тех, в которых явно заданы другие значения характеристик.

Атрибут bgcolor тега body определяет цвет фона страницы. Цвет задается тремя однозначными или двузначными шестнадцатеричными числами. Первое число задает интенсивность красного цвета, второе – интенсивность зеленого, третье – интенсивность синего цвета. Вы уже знаете об этом методе задания цвета: RGB. Для некоторых цветов придуманы названия, хотя рекомендуется применять числовое значение для единообразия.

Атрибут text задает цвет текста.

Можно задать умалчиваемые отступы текста страницы от границ экрана: leftmargin (слева), rightmargin (справа), topmargin (сверху) и bottommargin (снизу). Заметим, что отступ сверху почему-то виден только на первом экране сайта, а снизу – на последнем.

Полезное свойство background, при помощи которого можно положить на фон картинку. Не стоит брать для этого красивый вид, для фона хорошо подходят так называемые текстуры: небольшие файлы с неярким часто в стиле графики рисунком. Дело в том, что на фоне из текстур хорошо читается основное содержимое сайта. Кроме того, браузер использует картинку как обои, т.е. дублирует её по горизонтали и по вертикали. Для обычной картинки получаемый эффект не красив.

Картинка фона по умолчанию прокручивается вместе с текстом. Если вы хотите получить эффект неподвижного фона, над которым проплывает текстовое содержимое экрана, задайте в теге body атрибут bgproperties со значением fixed.

На странице часто может потребоваться список. В html предусмотрено два вида списков: нумерованный – тег ol и маркированный – тег ul. Это контейнерные теги. Пункты списков обоих видов оформляются при помощи тега li. Можно построить и вложенный список, если внутри одного контейнера ol или ul использовать другой контейнер.

<ul> Экзамены

<ul TYPE=disc>1 курс

<li> 1 семестр

<ol>

<li>история</li>

<li>физика</li>

<li>математика</li>

</ol>

</li>

<li> 2 семестр

<ol>

<li>физика</li>

<li>информатика</li>

<li>технология программирования</li>

</ol>

</li>

</ul>

<ul TYPE=disc> 2 курс

<li> 3 семестр

<ol>

<li>архитектура ЭВМ</li>

<li>метрология</li>

<li>химия</li>

</ol>

</li>

<li> 4 семестр

<ol>

<li>операционные системы</li>

<li>инфокоммуникационные системы и сети</li>

</ol>

</li>

</ul>

Обратите внимание на структурные отступы в html-коде. Это не требуется самим html, но рекомендуется из методологических соображений. Структурирование информации облегчает её понимание, поэтому в таком коде вы быстрее найдете нужный фрагмент, быстрее обнаружите ошибку, точнее, вы сделаете меньше ошибок.

Таблицы в html – это, прежде всего, тэг-контейнер table, внутри которого располагаются теги-контейнеры строки tr. Наконец, в строке может быть некоторое количество тегов ячеек td или th.

Таблица в html – это набор ячеек, возможно с внешней границей, распределенный по строкам. Такое понимание несколько отличается от уже привычного для нас представления (в текстовых редакторах). В отличие от таблицы в MS Word в html мы не объединяем ячейки, а растягиваем их на два или более столбца и на две или более строчки при помощи атрибутов colspan и rowspan. Растянутая ячейка считается принадлежащей тому месту таблицы, где расположен её левый верхний угол. В результате получается, что в описании таблица в разных строках и столбцах описывается разное количество ячеек.

<tr><td colspan=2>длинная</td><td>обычная</td><td>oбычная</td>

<tr><td>oбычная</td><td colspan=2 rowspan=2>длинная и широкая</td><td>oбычная</td>

<tr><td>oбычная</td><td>oбычная</td>

<tr><td>oбычная</td><td>oбычная</td><td>oбычная</td><td>oбычная</td>

</table>

Заметьте, что в том случае, если вы укажите ошибочное количество ячеек в некоторой строке, могут появиться «ничем не занятые дырки», т.е. внутри рамки нет ячеек. Впрочем, можно рассматривать как способ построения своеобразной пирамиды.

Таблица часто нужна для структуризации окна. При помощи таблицы можно разместить на экране данные, отформатированные по-разному. Например, пусть поставлена следующая задача: расположить по центру экрана некоторый текст, слева поместить меню сайта, а справа – контактную информацию. Ниже приводится решение с применением таблицы.

<tr>

<ol>

<li>архитектура ЭВМ</li>

<li>метрология</li>

<li>химия</li>

</ol>

</td>

<td>

На нашем сайте вы можете найти всю нужную вам информацию о проведении экзаменационной сессии.

Общие правила читайте на странице "Всем-всем-всем"

</td>

<td>

В качестве формы отчетности по учебному плану в 4 семестре предусмотрен экзамен.

К экзамену допускается студент, защитивший на минимально допустимый балл все пункты, указанные в промежуточной отчетности.

В случае пропуска занятий по уважительной причине разрешается сдача не защищенных вовремя заданий.

</td>

</tr>

</table>

Интересно то, что если в описании таблицы не заданы никакие размеры, браузер растягивает таблицу на весь доступный экран. В случае длинного текста все равно приходится перенести текст на другую строку экрана. Разные браузеры определяют размеры колонок по-разному. Эта – одна из причин того, что страницы в разных браузерах выглядят по-разному.

Некоторые атрибуты: bgcolor - цвет фона, border – толщина границ, bordercolor – цвет границ, width – ширина, height – высота, background – фоновая картинка, valign – выравнивание текста в ячейках по вертикали. Атрибут align делает таблицу обтекаемой. Есть еще несколько атрибутов, но здесь о них не будет сказано, изучите их самостоятельно по справочникам.

Изображение можно поместить на страницу, воспользовавшись тегом img. У этого тега атрибут src определяет имя файла-картинки, атрибут alt задает текст, который покажет браузер в случае, если пользователь отключит показ изображений.

Размер картинки на странице может отличаться от исходного: картинку можно сжать или растянуть. Но это делать не рекомендуется, т.к. при этом либо ухудшается качество, либо генерируется лишний трафик. Лучше заранее подготовить в графическом редакторе картинку нужного размера и качества. Если вы хотите дать пользователю возможность увидеть выбранную картинку в увеличенном виде и хорошего качества, то следует сначала показать ему маленькие картинки, оформив их гиперссылками, а по щелчку перейти на большое изображение (см. далее).

1 2 34

Дата добавления: 2016-04-19; просмотров: 2670;