.: СТАТЬИ


HTML в примерах


К написанию этой статьи меня подтолкнула недавняя консультация одного начинающего вэб-мастера. Он создавал страничку во FrontPage и я попросил его показать мне ее. Я сильно удивился, когда просмотрел HTML-код: для сдвига картинки в правый верхний угол была полностью забита строка пустыми символами  . Оставшаяся часть кода была оформлена в таком же стиле. Нужно не забывать, что HTML - HyperText Markup Language, ЯЗЫК РАЗМЕТКИ! И в нем присутствуют все средства для создания страниц любой сложности.

Структура HTML документа

HTML-документ имеет вполне определенную структуру.

<HTML>
 <HEAD>
  <TITLE>Загаловок</TITLE>
 </HEAD>
 <BODY>
  Тело документа
 </BODY>
</HTML>
Большинство тегов языка HTML имеют как начальный тег, так и завершающий. Так для обозначения начала документа используется тег <HTML>, соответственно этот тег будет самым первым в документе. А завершающий тег будет выглядеть так </HTML> и будет самым последним в документе.
Пара тегов <HEAD> и </HEAD> обозначают "голову" HTML-документа, с состав которой входит загаловок <TITLE></TITLE>. Текст, введенный в <TITLE> будет виден в заголовке окна браузера.
За "головой" следует "тело" - это теги <BODY></BODY>. Именно между этими тегами и находится основной текст страницы для отображения.

Таблицы

Без таблиц в создании странички НИКАК не обойдешься! Даже для того чтобы поместить картинку в центр странички нужны таблицы.

  <TABLE width="400" bgcolor="#CCCCCC" cellpadding=10 cellspacing=5 border=0>
   <TR>
    <TD width="100" height="100" bgcolor="#999999">
     это ячейка 1
    </TD>
    <TD background="/web/html40/green.gif">
     это ячейка 2
    </TD>
   </TR>
   <TR>
    <TD colspan=2 bgcolor=#DDDDDD align=center valign=bottom height=60>
     Это строка, обеденяющая 2 колонки
    </TD>
   </TR>
  </TABLE>
это ячейка 1 это ячейка 2
Это строка, обеденяющая 2 колонки

В этом примере создана таблица, показывающая почти все возможности настройки внешнего вида. Сейчас я постараюсь вам объяснить назначение каждого свойства.

<TABLE></TABLE>
Начальный и завершающий теги, обозначающие таблицу.

width="400"
Ширина таблицы составляет 400 пикселей. Разрешается задавать ширину в процентном отношении к ширине окна. Выглядеть это будет так: width="100%".

bgcolor="#CCCCCC"
Задает цвет фона всей таблицы.

cellpadding=10
Расстояние от границы таблицы до ее наполнения, то есть задает отступ от всех границ таблицы.

cellspacing=5
Расстояние между смежными ячейками в пикселях.

border=0
Толщина бордюра таблицы.

<TR>
Начальный тег, обозначающий начало описания строки.

<TD>
Начальный тег, обозначающий начало описания столбца.

height="100"
Высота ячейки составляет 100 пикселей.

background="/web/html40/green.gif"
Задает фоновую картинку.

colspan=2
Объединяет (сливает) 2 ячейки в одну. Так как ячейки объеденяются по горизонтали, то используется "colspan", а по вертикали - "rowspan".

align=center
Задает выравнивание горизонтали, по центру. Возможные значения: center, left, right.

valign=bottom
Задает выравнивание по вертикали, нижней границе. Возможные значения: top, middle, bottom.

Copyright © 2002-2003, TUL aka Владимир Шульженко