Имеет ли значение регистр в тэгах html?
Для HTML 4 и ранее - нет. Для XHTML - да. По стандарту XHTML все теги и атрибуты должны быть в нижнем регистре.
Вопрос5 Рассмотрим технические теги контейнера <HEAD>:
<TITLE>заголовок страницы</TITLE>
<BASE href="базовый url">
<META информация о странице>
<LINK ссылка на файл (документ)>
<STYLE> стиль </STYLE>
<SCRIPT type="тип файла"
src="путь к файлу скрипта">
</SCRIPT>
"BASE", "LINK" и "META" являются непарными тегами и каждый из них имеет обязательные атрибуты, но обо всем по порядку.
Контейнер <TITLE> содержит в себе заголовок страницы. Заголовок отображается в окне обозревателя в левом верхнем углу. Сейчас там написано "Структура документа HTML".
Тег <title> является обязательным и должен непременно присутствовать в коде документа.
<BASE href="http://www.mysite.ru">
Тег <BASE> позволяет расширять относительные пути в ссылках. Если в документе вы употребляете относительные ссылки
<IMG src="images/image.jpg" alt="">
<A HREF="coder4.php">ссылка</A>
вместо абсолютных,
<IMG src="http://www.mysite.ru/
images/image.jpg" alt="картинка">
<A HREF="http://www.mysite.ru/
coder4.php">ссылка</A>
то при любом перемещении файлов ссылки на них станут "битыми", поскольку станут ссылаться на пустое место. Если в <BASE> прописан базовый url "http://www.mysite.ru", то относительные ссылки
images/image.jpg
coder4.php
независимо от местоположения документа, будет выглядеть так:
http://www.mysite.ru/images/image.jpg
http://www.mysite.ru/coder4.php
Тег <META> содержит информацию для обозревателей и поисковых роботов. У него два обязательных атрибута, первый из которых определяет тип информации, а второй ее содержит. Информацию содержит атрибут "content", а определяют тип информации атрибуты "name" и "http-equiv". Вариантов тега достаточно много, но на сегодняшний день большинство из них утратило актуальность и почти не используется. Перечислю те, которые пока не сдают свои позиции и играют роль при верстке сайта:
<META name="keywords"
content="ключевые слова страницы">
Тут нужно указывать часто встречающиеся слова, которые характеризуют информационное наполнение страницы. В идеале эти слова должны присутствовать в контейнерах заголовков <TITLE> (HEAD), <H1> - <H6> (BODY) и в тексте страницы (желательно ближе к началу). При грамотном использовании это даст хороший результат при индексации страницы поисковым роботом.
<META name="description"
content="краткое описание страницы">
С помощью этого атрибута можно сделать краткое описание страницы. Оно обычно отображается под ссылками ресурсов при выдаче запроса в поисковике. Чем подробнее описание, тем лучше. Главное описывать по существу и помнить, что краткость сестра таланта. В сети можно встретить массу статей о том, что "description" и "keywords" утратили актуальность, однако игнорирует данные атрибуты пока только Рамблер, а Гугл напротив советует их использовать и делать качественное описание страниц для лучшей индексации своими поисковыми роботами.
<META name="revisit"
content="период индексации страницы">
Этот атрибут сообщает поисковому роботу с какой периодичностью обновляется сайт. Период индексации указывается числом (кол-во дней). Это конечно не заклинание и робот будет приходить когда ему вздумается, но все же возьмет этот срок на заметку. Так что если он будет соответствовать действительности, это положительно скажется на индексации.
<META name="robots"
content="команды для поискового робота">
Еще один инструмент влияния на поискового робота, уже больше напоминающий заклинание. Значений у атрибута "content" четыре: "index", "noindex", "follow", "nofollow". Первые два отвечают за индексацию страницы, вторые - за переход робота по ссылкам в документе. Указываются значения парами:
<META name="robots"
content="noindex, follow">
При таких значениях робот не проиндексирует страницу, то есть выдаваться в поисковике по запросу она не будет, но перейдет по ссылкам и проиндексирует остальную часть сайта. Полезно указывать подобные значения для страниц с ограниченным доступом (личные или запароленные).
<META http-equiv="content-type"
content="text/html;charset=windows-1251">
Эти атрибуты информируют обозреватель о кодировке документа. В примере указана стандартная windows-кодировка. Важно, чтобы она, во избежании проблем, совпадала с настройками кодировки на сервере.
<LINK rel="stylesheet" href="style.css"
type="text/css">
<LINK rel="shortcut icon" href="favicon.ico"
type="image/ico">
С помощью тега <LINK> можно сделать ссылку на любые файлы (технические документы), которые могут потребоваться при обработке основного документа. При этом атрибут "rel" описывает сам файл, "href" указывает его местоположение, а "type" сообщает о типе файла. Первый пример делает ссылку на таблицу стилей (stylesheet), которая находится там же, где и обрабатываемый файл (имя файла style.css), представляя собой текстовой css-файл (text/css). Второй пример делает ссылку на фавикон страницы. Есть и другие варианты использования тега, но я использую только эти.
<STYLE>
p.red {font-color: red;}
</STYLE>
Контейнер <STYLE> применяется для добавления стилей, использующихся только в данном документе, чтобы не увеличивать код лишними атрибутами, а обойтись атрибутом "class" и не увеличивать таблицу стилей лишней записью, использующейся лишь однажды.
Последний тег списка - <SCRIPT>. Это контейнер для скриптов. Употребляется как в техническом, так и в пользовательском блоке. Можно либо указать путь к файлу скрипта, либо поместить код скрипта непосредственно в контейнер. Подробности этих манипуляций смотрите в спецификации.
Вопрос6. <b>Полужирный текст</b>
<i>Выделение текста курсивом</i>
<u>Подчёркнутый текст</u>
<s>Зачёркнутый текст</s>
Знак сноски<sup>сверху</sup> или индекс<sub>снизу</sub> от текста
<font style="font-size:16pt;">Шрифт размером 16 пикселей</font>
Предопределённые размеры шрифта (могут быть от 1-го до 7-го):
<font size="3">Шрифт 3-го размера</font>
<font size="+1">Шрифт на 1 размер больше обычного</font>
<h2>Заголовок 2-го размера</h2>
<font style="font-family:Monotype Corsiva;">Шрифт Monotype Corsiva</font>
<font color="red">Красный текст</font>
У фона тоже можно менять цвет, вот так:
<div style="background-color:#eeeeff;">голубой фон</div>
<div style="background-color:lightgray; color:#0000ff;">синий текст, серый фон</div>
Обратите внимание на синтаксис. Аттрибут style использует синтаксис CSS.
HTML Тэги. Форматирование параграфов.
Оформить отступы абзацев, легко:
<blockquote>
Процитированый в отдельном блоке текст
у которого будет
небольшой отступ слева.
</blockquote>
<div style="float:right; margin:8px; padding:6px; border:1px solid #bbbbbb; width:400px;">
Я врезаный, обтекающий другим текстом, текст с правого края с выравниванием слева, с серой рамкой и отступом от рамки снаружи в 8 пикселей
</div>
<p style="text-indent: 40px"> <div style="float:right; margin:8px; padding:6px; border:1px solid #bbbbbb; width:400px;">
Я врезаный, обтекающий другим текстом, текст с правого краю с выравниванием слева, с серой рамкой и отступом от рамки снаружи в 8 пикселей
</div>
<div style="width:300px;">Опачки! Этот абзац будет написан с фиксированой шириной в 300 пикселей. Узенько так типа. А если добавить style="width:300px; float:right;" тогда он ещё и будет висеть справа. Смотрите пример чуть ниже.</div>
<pre>Преформатированый текст
сохраняет отступы слева и между словами
и устанавливает те что вы укажите пробелами.
NB! тэг не делает переноса строки автоматом!
</pre>
<center>отцентрированый текст</center>
<div align=right>
текст с правого краю
в две строчки с выравниванием справа
</div>
<div style="float:right;">
текст с правого краю
в две строчки с выравниванием слева
</div><br clear=all>
HTML Тэги. Форматирование списков.
<li>Один из пунктов несортированого списка
<li>Другой такой пункт
Добавляем тэг ol по краям и список становится сортированым автоматически:
<ol>
<li>Один из пунктов несортированого списка
<li>Другой такой пункт
</ol>
Логические стили
При использовании логических стилей автор документа не может знать заранее, что увидит на экране читатель. Разные браузеры толкуют одни и те же метки логических стилей по-разному. Некоторые браузеры игнорируют некоторые метки вообще и показывают нормальный текст вместо выделенного логическим стилем. Вот самые распространенные логические стили.
<EM> ... </EM>
От английского emphasis — акцент.
<STRONG> ... </STRONG>
От английского strong emphasis — сильный акцент.
<CODE> ... </CODE>
Рекомендуется использовать для фрагментов исходных текстов.
<SAMP> ... </SAMP>
От английского sample — образец. Рекомендуется использовать для демонстрации образцов сообщений, выводимых на экран программами.
<KBD> ... </KBD>
От английского keyboard — клавиатура. Рекомендуется использовать для указания того, что нужно ввести с клавиатуры.
<VAR> ... </VAR>
От английского variable — переменная. Рекомендуется использовать для написания имен переменных.
Вопрос7.Теги гиперссылок. Между собой ссылки различаются на внешние и внутренние, а также на текстовые и графические. Внешние ссылки ведут за «пределы» html-страницы, внутренние на различные части этой же страницы. Текстовые ссылки представляют из себя текст (по умолчанию он выделен синим цветом и подчеркнут), а графические, в качестве объекта, по которому нужно щелкнуть для перехода, содержат какое-либо изображение. Все эти разновидности ссылок создаются в HTML с помощью тега < A>< /A> (сокращение от англ. anchor — якорь). Рассмотрим его поподробнее.
Для создания ссылки на другой документ (внешняя ссылка) служит атрибут тега A href. В качестве значения этот атрибут принимает URL-адрес документа или имя файла, если файл расположен в этом же каталоге, в противном случае нужно указывать полный путь. Текст ссылки (его еще называют анкором) может быть как обычным текстом (текстовая ссылка), так и графическим изображением (графическая ссылка). Графическая ссылка создается вставкой тега IMG между тегами < A> и < /A>. В общем, синтаксис создания ссылки выглядит так:
< a href="URL-адрес или имя файла">текст ссылки (анкор)< /a>
Цвет текста ссылок можно изменить с помощью атрибутов тега BODY. Вообще, к тексту ссылок можно применять все те же атрибуты форматирования, что и к основному тексту страницы, т.е. выделять жирным, курсивом, использовать заголовки и т.д.
Чтобы создать графическую ссылку, как я уже сказал выше, нужно вместо текста ссылки воспользоваться тегом IMG. Пример этой ссылки выглядит так:
< a href="http://www.seoded.ru/">< img src="logo.jpg">< /a>
пять-таки по умолчанию браузер при переходе по ссылке открывает страницу в этом же окне. Чтобы изменить это используется атрибут тега A target. Он имеет следующие значения:
_blank — открывает страницу в новом окне;
_parent — загружает ссылку в родительском окне;
_self — по умолчанию. Открывает ссылку в этом же окне.
Это не все значения атрибута target, но это самые основные. Пример использования этого атрибута
< a href="http://www.seoded.ru/" target="_blank">Главная страница< /a>
В теге A можно также использовать атрибут title. С его помощью можно создать всплывающую при наведении мыши на ссылку подсказку
< a href="http://www.seoded.ru/" title="Перейти на главную страницу">Главная страница< /a>
Внутренние ссылки создаются по тому же принципу, что и внешние. Только в значении атрибута href указывается якорь ссылки. Якорь создается атрибутом name:
< a name="имя якоря">текст< /a>
Вопрос8 Тег: <table> [контейнерный]
Создаёт таблицу. Обязательные теги: <td>, <tr>. Пример:
<table>
<tr>
<td> Пример
</td>
</tr>
</table>
Возможные атрибуты тега:
<table border="..."> Задаёт толщину рамки. От 0 до ...
<table bordercolor="..."> Задаёт цвет рамки.
<table cellspacing="..."> Расстояние между ячейками таблицы. От 0 до ...
<table cellpadding="..."> Расстояние между содержимым ячейки и её рамки. От 0 до ...
<table width="..."> Ширина таблицы. От 0 до ...
<table height="..."> Высота таблицы. От 0 до ...
Тег: <tr> [контейнерный]
Создаёт строку в таблице. Допустимые атрибуты:
<tr align="..."> Задаёт горизонтальное выравнивание ячеек в таблице. Допустимые значения:
"left" — выравнивание по левому краю.
"center" — выравнивание по центру.
"right" — выравнивание по правому краю.
"justify" — выравнивание теста на всю строчку.
<tr valign="..."> Задаёт вертикальное выравнивание ячеек в таблице. Допустимые значения:
"top" — выравнивание по верхнему краю.
"middle" — выравнивание по центру.
"bottom" — выравнивание по нижнему краю.
<tr bgcolor="..."> Задаёт цвет фона.
Тег: <td> [контейнерный]
Создаёт ячейку в таблице. Допустимые атрибуты: <align>, <valign>, <bgcolor>, <width>, <height>...
<td colspan="..."> Указывает кол-во столбцев, которое объединено в одной ячейке. От 1 до ...
<td rowspan="..."> Указывает кол-во строк, которое объединено в одной ячейке. От 1 до ...
Тег: <th> [контейнерный]
Определяет заголовок таблицы. Нормальная ячейка с отцентрованным жирным текстом.
Вопрос9 Тег <form> устанавливает форму на веб-странице. Форма предназначена для обмена данными между пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению.
Документ может содержать любое количество форм, но одновременно на сервер может быть отправлена только одна форма. По этой причине данные форм должны быть независимы друг от друга.
Для отправки формы на сервер используется кнопка Submit, того же можно добиться, если нажать клавишу Enter в пределах формы. Если кнопка Submit отсутствует в форме, клавиша Enter имитирует ее использование, но только в том случае, когда в форме имеется только один элемент <input>. Если таких элементов два и более, нажатие на <Enter> не вызовет никакого результата.
Когда форма отправляется на сервер, управление данными передается программе, заданной атрибутом action тега <form>. Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом name тега <input>, а значение введено пользователем или установлено в поле формы по умолчанию.
Параметры перечисляются после вопросительного знака, указанного после адреса CGI-программы и разделяются между собой символом амперсанда (&). Нелатинские символы преобразуются в шестнадцатеричное представление (в форме %HH, где HH — шестнадцатеричный код для значения ASCII-символа), пробел заменяется на плюс (+).
Допускается внутрь контейнера <form> помещать другие теги, при этом сама форма никак не отображается на веб-странице, видны только ее элементы и результаты вложенных тегов.
Синтаксис
<form action="URL">
...
</form>
Атрибуты
accept-charset
Устанавливает кодировку, в которой сервер может принимать и обрабатывать данные.
action
Адрес программы или документа, который обрабатывает данные формы.
enctype
MIME-тип информации формы.
method
Метод протокола HTTP.
Name - Имя формы.
Novalidate - Отменяет встроенную проверку данных формы на корректность ввода.
Target - Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег - Обязателен.
Пример. Использование тега <form>
HTML 4.01IE 7IE 8IE 9Cr 9Op 11Sa 5Fx 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег FORM</title>
</head>
<body>
<form action="handler.php">
<p><b>Как по вашему мнению расшифровывается аббревиатура "ОС"?</b></p>
<p><input type="radio" name="answer" value="a1">Офицерский состав<Br>
<input type="radio" name="answer" value="a2">Операционная система<Br>
<input type="radio" name="answer" value="a3">Большой полосатый мух</p>
<p><input type="submit"></p>
</form>
</body>
</html>
