|
div.main {margin-left: 20pt; margin-right: 20pt}
HTML в примерах
Страница 1
К написанию этой статьи меня подтолкнула недавняя консультация одного начинающего вэб-мастера. Он создавал страничку во 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.
|
