<div>…</div> - по умолчанию параграф, но создан для сложного форматирования места нахождения контента на странице, используется для верстки через таблицы стилей (css).
<table>…</table> - помещает на Web-страницу таблицу. Может иметь вложенные теги:
<CAPTION>...</CAPTION> - заголовок таблицы
<TH>...</TH> - обозначает заголовок таблицы
<TR>...</TR> - метки строк в таблице
<TD>...</TD> - метки ячеек в таблице
<MULTICOL>...</MULTICOL> - вывод текста в несколько столбцов
<FORM>...</FORM> - открытие формы
<INPUT>...</INPUT> - рисует кнопку или окно вывода
<SELECT>...</SELECT> - выбор значения из всех предложенных
<OPTION>...</OPTION> - определяет элемент меню. Используется внутри тега <SELECT>
<TEXTAREA>...</TEXTAREA> - выводит область ввода текста
<ul>…</ul>, <ol>…</ol> - списки
<LI>...</LI> - метка, помечает позицию списка.
<b>…</b>,<i>…</i>, <u>…</u> - форматирование теста. Текст выводится жирным, курсивом и подчеркиванием соответственно.
<a>…</a> - ссылка
<br /> - перенос строки (<br >…<br /> - устаревшая, не валидная запись)
<p>…</p> - параграф
<H1 >…< /H1>, <H2 >…< /H2>, …<H6>…< /H6>
* Пример
*Пример1 блочной верстки
<HTML>
<HEAD>
.
.
.
</HEAD>
<BODY>
<! - -блок, содержащий «шапку» - - >
<DIV class = «header»> <H1> Имя компании </H1></DIV>
<- - блок меню! - ->
<DIV class= «menu» >
<ul class= «menu_list» >
<li> HOME </li>
<li>…</li>
<li>…</li>
</ul>
</DIV> <! - -блок меню end - ->
<! - - блок компонента - ->
<DIV class = «coutent» >
<h2> КОНТЕНТ </h2>
<p> какой-то текст </p>
<p> новый параграф </p>
</DIV> < - -блок контента end - ->
<! - - блок «подвал» - - >
<DIV class= «footer» >
<p> имя компании (c) 2011 </p>
|
|
</DIV> <! - - блок «подвал» end - ->
</BODY>
</HTML>
*Пример2 табличной верстки
<HTML>
<HEAD>
.
.
.
</HEAD>
<BODY>
<table> <TR> <TH>…</TH>
<TD>…</TD>
<TD>…</TD>
</TR>
<TR> <TH>…</TH>
<TD>…</TD>
<TD>…</TD>
<TD>…</TD>
</TR>
</table>
</BODY>
</HTML>
Технология CSS
Каскадные таблицы стилей или CSS (от английского Cascading Style Sheets) являются следствием дальнейшего развития HTML и дают нам возможность перейти на следующий уровень представления информации. Таблицы стилей позволяют разделить смысловое содержимое странички и его оформление.
Все оформление рекомендуется вынести во внешний стилевой файл. Основная же страничка будет содержать только информацию и ссылки на необходимые стили.
Размещение всей стилевой информации в одном внешнем файле открывает нам и другие полезные возможности - ведь изменив содержимое только одного стилевого файла, мы можем в считанные секунды сменить весь дизайн сайта. Причем никаких других переделок не понадобится. Разумеется, это верно лишь в том случае, если первоначально сайт был спроектирован верно.
Подключение таблиц стилей
Для осуществления этой задачи мы можем воспользоваться одним из 3-х предлагаемых методов:
внешний файл,
inline-описание,
описание в секции заголовка.
inline-описание
или описания, встроенное в тег:
<p style="color:red; text-align:center;">
Этот текст переопределен стилем
</p>
При помощи дополнительного атрибута style мы можем определить нужные нам стилевые параметры в любом теге. Это самый легкий способ, и действует он в пределах лишь одного тега. Но представьте, насколько вырастет размер файла, и насколько неудобно будет его исправлять, если мы будем указывать стиль у каждого тега.
|
|
Описание в секции заголовка.
Его действие распространяется на всю страничку. Определение стилей происходит при помощи классов либо id(!), которые представляют собой списки с определением всех необходимых параметров оформления.
При использовании этого метода описание стилей необходимо разместить в секции заголовка:
<head>....
<style type="text/css">
<!--
.header {
text-align:center;
font-size: 27pt;}
.red {color: red; }
-->
</style>
</head>
Вынесение описания стилей во внешний файл.
Диапазон его воздействия простирается на все файлы, в которые включено описание. Это способ наиболее соответствует концепции HTML 4.0. В случае, если нам потребуется изменить внешний вид сайта, то будет достаточно скорректировать лишь один этот файл. Сравните его с предыдущими способами. В одном из них придется менять описание на каждой страничке, а в другом даже более того - около каждого тега, что, разумеется, совершенно не вдохновляет.
Каким же образом производится внедрение внешнего файла? Для начала создается стилевой файл с описанием всех нужных нам классов (mystyle.css):
.header { text-align: center; font-size: 27pt;}
.red { color:red; }
p { text-align: center; font-size: 12pt;}
А потом ссылка на него внедряется в документ при помощи тега <link>:
<head>.... <link rel="stylesheet" type="text/css"
href="css/mystyle.css" title="MyStyleSheet">.... </head>
Это самый удобный способ, и для основной таблицы стилей рекомендуется пользоваться именно им.
*Переделать пример1 и пример2. Добавить стили