таблицы на UCOZ
Описание HTML .
HTML - это обычный, текстового вида файл, в котором то, что мы обычно видим на страничках, перемежается невидимым для просмотра из броузера кодом. Вот этот-то невидимый код и есть язык разметки HTML.
HTML - это не язык программирования, - он служит лишь для разметки странички, придания определенного вида тому или иному элементу, будь то таблица, текст или картинки. Осуществляется это путем присвоения каждому элементу своих параметров, которые распознает броузер. Параметры эти могут быть заданы как для одного, так и для группы или типа элементов. Тип элементов может быть таким: таблицы, ячейки, ссылки, текст и т.п. То есть что-то, что можно назвать одним термином. Отдельные свойства можно присваивать и выбранным элементам персонально. Параметры отображения элементов задаются при помощи тегов, в которых и задается желаемый вид того или иного элемента нашей странички.
Принцип наследования HTML.
Теги HTML - контейнеры. Прежде всего стоит определить то, как эти самые теги располагаются. Дело в том, что теги в большинстве своем состоят из двух частей - это открывающий (он же - содержащий параметры) и замыкающий, то есть, "конец" тега. Заданные в теге параметры действуют только между его началом и концом, то есть, только внутри тега: Code <начало 1-го тега>
Теги HTML - это обычный, текстового вида файл, в котором то, что мы обычно видим на страничках, перемежается невидимым для просмотра из HTML броузера кодом.
<начало 2-го тега>
Теги HTML ,- это обычный, текстового вида файл в котором то, что мы обычно видим на страничках, перемежается невидимым для просмотра из HTML броузера кодом.
<начало 3-го тега>
Теги HTML - это обычный, текстового вида файл, в котором то, что мы обычно видим на страничках, перемежается невидимым для просмотра из HTML броузера кодом.
<Конец 3-го тега>
<Конец 2-го тега>
<Конец 1-го тега>
Система понятна? Вот эти "отступы" от левого края - они тоже не случайны - они автоматически выставляются программами, формирующими код HTML для упрощения его восприятия. Достаточно понимать, что чем дальше от левого края отстоит тег, тем "глубже" он лежит, тем большее количество "старших" тегов может на него действовать. Да-да, в некоторых случаях параметры ранее заданного тега могут распространяться и на тег, размещенный в нем, то есть на содержимое вложенных тегов HTML . Также следует заметить, что некоторые параметры вложенных тегов могут воздействовать и на вышестоящие, "старшие" теги. Например, это типично для таблиц, вложенных одна в другую. Если у внутренней таблицы размер задан 100 пикселов, то у внешней не может быть размера меньше 100 пикселов + толщина рамки. Таким образом вложенная таблица как бы "распирает" ту, в которую она вложена. При этом, даже если у нее не задан размер, а количество текста в ней значительно, она будет распирать "старшую" таблицу на такой размер, который необходим для отображения соответствующего количества строк текста. Это называется "обратная связь".
Теги HTML, не нуждающиеся в закрытии.
Это теги переноса -
, принудительно перекидывающие все, что располагается после них, в новую строку. Благодаря этому тегу можно писать стихи столбиками. Вот такая строчка:
Теги переноса -
Теги переноса -
Теги переноса -
При просмотре ее из броузера выдаст вам столбик - Теги переноса -
Теги переноса -
Теги переноса -
Тег этот может располагаться в коде как в середине текста (пример выше), так и заканчивать строку: Теги переноса -
Теги переноса -
Или же разделять строки: текст текст текст
текст текст текст Броузеру не важно положение тега - все отступы и "сдвиги" нужны только для упрощения понимания и ориентирования в коде. Конечно, количество пробелов внутри кода увеличивает размер HTML-странички, поэтому злоупотреблять ими не стоит. Но от того, что вы выделите какие-либо теги определенным образом, хуже не станет. Все пробелы больше одного броузеры просто "не замечают". То есть, сколько ни ставьте вы пробелов в тексте, броузер отобразит все равно с одним пробелом:
в коде написано: текст текст HTML броузер покажет: текст текст Впрочем, если "ну очень хочется", то пробелов можно наставить принудительно. Делается это размещением в коде " ; " (разумеется без кавычек!). ; - обозначение пробела. Неразрывного пробела. То есть в этом месте будет пустое пространство. Но если простой текст с пробелами броузер может перенести на другую строку на месте любого пробела, то слова, разделенные ; , он воспримет как единое целое. Вот потому не стоит злоупотреблять "гибкостью" и слишком часто использовать обозначение ; . Не стоит использовать его и для "выравнивания" текста внутри таблицы. Для этого есть более простые и правильные способы. Не рекомендую употреблять ; больше двух-трех раз подряд. Можете считать это правилом, поскольку при большем количестве символов наверняка проще прописать требуемое выравнивание в HTML тег нужного элемента. Это будет и проще, и нагляднее, и "чище", в плане того, что ваши тексты не будут чересчур тяжелыми и долгогрузящимися. Еще один тег, не нуждающийся в закрытии, это тег HR - в общем-то, это устаревший тег и давно не используется, ибо придуманы куда более приятные способы его замены. Но для общего развития я расскажу и про него.
Итак, тег : Как видим, это элемент "отчеркивание", - просто черта от края до края тега, внутри которого она применяется. Но ее можно и ограничить, например, указав в ее теге размер:
Code <hr align="center" width="50%">
Код содержит команды: выравнять по центру, размер сделать в 50% доступной ширины.
Вот что у нас получится:
Так же, при помощи стандартных наборов команд, этому тегу можно придавать самый разный вид. Например, такой: В общем, полезный в свое время тег был, да только я лично посоветовал бы использовать исключительно таблицы. Это гораздо удобнее и приятнее. Почему - поймете, прочитав это все до конца. А сейчас рассмотрим общее устройство HTML. Если мы возьмем блокнот (рекомендую скачать вот этот) и откроем им любой файл .htm, внутри мы увидим примерно следующее: Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<head><title>Заголовок - то, что будет видно в названии окна броузера</title>
<meta http-equiv="Content-Type" content="text/HTML; charset=windows-1251">
<link href="путь до файла .css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> это начало более или менее стандартно для любого файла .htm .HTML и т.п.
Рассмотрим назначение обязательных тегов: Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- обозначает тип документа и формат. Облегчает распознавание другими программами этого файла. Указывает в начале версию стандарта HTML и язык документа. Рекомендую оставлять без изменений или заменить //EN на //RU :0)
<HTML> - обозначает начало HTMLьки. Благодаря этому бродилка убеждается, что открываемое ею именно HTML, а не картинка или MP3.
<head> -обозначает начало "чердака*" Head по-буржуйски "башка" (она же, голова)
<title>
Заголовок
</title> туточки вписывается название листа (та фигня, что будет отображена в самой верхней полоске окна бродилки - там, где "свернуть, распахнуть и закрыть" (полка, квадрат и крестик))
<meta http-equiv="Содержимое-Тип" content="text/HTML; charset=windows-1251">
тут указываются служебные фичи, вам это понимать не обязательно, за исключением последнего - "windows-1251" - это есть указание, в какой кодировке отображать пагу. Рекомендую ставить это самое 1251, тогда винде пага видна вполне нормальным читаемым текстом, а не абракадаброй. Это не трогать, просто запомнить и все.
</head> конец "чердака" и одновременно начало "тушки" HTML странички.
<body> начало странички, тушка*
<=== то что будет показано юзверю бродилкой ===> можно вписать, что угодно. Собственно, это то, что вы хотите показывать посетителю.
</body> конец тушки
</HTML> ваще конец :0) Этот тег всегда в самом низу и всегда самый последний.. после него уже ничего не пишут... Таблицы: Code <table>-соственное сама таблица <tr>-строка таблицы <td>-столбец таблицы <th>-заголовок к столбцам таблицы caption-определяет заголовок для таблицы TABLE fieldset-рисует рамку вокруг текста и других объектов <b>Тег <TABLE></b> Тег <TABLE> создает таблицу. Все прочие элементы таблицы должны быть вложенными в него. Допускается также вложение таблиц одна в другую, т.е. содержимым ячейки может быть другая таблица. Закрывающий тег обязателен Атрибуты lign Выравнивание таблицы относительно документа. Возможные значения: center, left, right background Строка, определяющая рисунок для заднего фона bgcolor Определяет задний фон таблицы border Толщина рамки в пикселах. Если атрибут не указан, то таблица выводится без видимой рамки bordercolor Цвет рамки cellspacing Задает расстояние между ячейками таблицы cellpadding Задает расстояние между содержимым ячейки и ее рамкой rules Описывает рамки вокруг таблицы. Может принимать следующие значения all Отображает все части рамки внутри таблицы cols Отображает все вертикальные рамки внутри таблицы groups Отображает горизонтальные части рамки между группами таблицы THEAD, TBODY, TFOOT none Удаляет все рамки вокруг таблицы rows Отображает все горизонтальные рамки внутри таблицы summary Описание таблицы для удобства людей, использующих браузеры, поддерживающие азбуку Бройля или речевой вывод title Всплывающая подсказка width Ширина таблицы в процентах или пикселах Пример:  Code <TABLE BORDER=2 COLS=2 BGCOLOR=yellow align=center>
<TR>
<TH>Заголовок столбца 1</TH><TH>Заголовок столбца 2</TH>
</TR>
<TR>
<TD>Ячейка столбца 1, ряд 1</TD><TD>Ячейка столбца 2, ряд 1</TD>
</TR>
<TR>
<TD>Ячейка столбца 1, ряд 2</TD><TD>Ячейка столбца 2, ряд 2</TD>
</TR>
</TABLE>
Источник: http://blmax.ru/forum/17-52-1 |
