Атрибуты тегов
Теги могут иметь атрибуты, которые предоставляют дополнительную информацию об элементах HTML. Атрибуты всегда используются в виде пары "имя/значение". Общий формат задания атрибутов имеет вид:
<имя_тега имя_атрибута="значение">
Например, тег:
<body bgcolor="red">
означает, что цвет фона страницы должен быть красным.
А тег:
<p align="center">
означает, что параграф необходимо выровнять по центру страницы отображения браузера.
Атрибуты всегда помещаются в начальном теге элемента HTML. Значения атрибутов всегда должны заключаться в кавычки. Наиболее широко используются двойные кавычки, но одиночные кавычки также допустимы.
В некоторых редких ситуациях, когда, например, значение атрибута само содержит кавычки, необходимо использовать одиночные кавычки:
<html> <body> <abbr title='проект "Интернет-Университет Информационных Технологий" – INTUIT.ru'.>ИНТУИТ</abbr> </body> </html>
Пример выполнения данного HTML-кода
Кроме атрибутов записываемых вышеописанным способом, для некоторых элементов определены специальные флаги, которые просто указываются как <тег имя_флага>.
<html> <body> <p>Попробуйте исправить текст в этих полях ввода</p> <form action="index.php" method="GET"> <input type="text" name="blocked" value="Пример поля ввода у которого указан флаг readonly" readonly size="100"><br/><br/> <input type="text" name="unblocked" value="Обычное поле ввода у которого нет флагов" size="100"> </form> </body> </html>
Пример выполнения данного HTML-кода
Дополнительные параграфы
Этот пример демонстрирует некоторые особенности поведения по умолчанию элементов параграфа.
<html> <body>
<p> Этот параграф содержит много строк в исходном коде, но браузер это игнорирует. </p>
<p> Этот параграф содержит много пробелов в исходном коде, но браузер это игнорирует. </p>
</body> </html>
Пример выполнения данного HTML-кода
Дополнительные примеры
Лучшим способом изучения HTML является работа с примерами. Рассмотрим несколько примеров, которые иллюстрируют некоторые элементы форматирования документов.
Фоновый цвет
Этот пример демонстрирует использование цветного фона на странице HTML. При выборе фона всегда проверяйте, чтобы текст был хорошо читаем!
<html> <body bgcolor="yellow"> <h2>Смотри: Цветной фон!</h2> </body> </html>
Пример выполнения данного HTML-кода
Горизонтальная линейка
Разделять различные элементы можно при помощи горизонтальной линейки, для этого используйте тег <hr>:
<html> <body> <p>Это параграф отобразится сверху горизонтальной полосы.</p> <hr> <p>Это параграф отобразится снизу горизонтальной полосы.</p> </body> </html>
Пример выполнения данного HTML-кода
Тег <hr> не имеет закрывающего тега. Поэтому для совместимости с будущими версиями стандарта рекомендуется следующее написание тега <hr/>. Для этого тега определен ряд атрибутов, но они являются устаревшими. И хотя их применение возможно, но консорциум W3C их использовать не рекомендует. Вместо них следует использовать таблицы стилей.
Элементы HTML
Страницы Всемирной паутины отображаются при помощи документов HTML, которые являются обычными текстовыми файлами, содержащими специальные теги разметки. Теги разметки определяют элементы HTML, из которых состоят документы HTML.
Это заголовок 1, Он выровнен по центру страницы.
Используйте теги заголовков только для заголовков. Не используйте их просто для того, чтобы выделить что-то жирным шрифтом. Используйте для этого другие теги.
Комментарии в HTML
Тег комментария используется для вставки комментариев в исходный код HTML. Комментарии будут проигнорированы браузером. Комментарии можно использовать для пояснения кода, что может помочь при редактировании исходного кода в будущем.
<!-- Это комментарий -->
Вот пример:
<html> <body> Этот текст будет показан в окне браузера. <!-- Этот текст не будет показан, это комментарий. --> </body> </html>
Пример выполнения данного HTML-кода
Этот пример демонстрирует, как использовать
Этот пример демонстрирует, как использовать комментарий в исходном коде HTML.
<html> <body>
<!--Этот комментарий выводиться не будет--> <p>Это обычный параграф.</p>
</body> </html>
Пример выполнения данного HTML-кода
Коротко о HTML
HTML (Hyper Text Markup Language) означает язык разметки гипертекста. Этот язык был разработан Тимом Бернерсом-Ли в рамках создания проекта распределенной гипертекстовой системы, которую он назвал World Wide Web (WWW) или Всемирная паутина. HTML предназначен для написания гипертекстовых документов, публикуемых в World Wide Web. Документ на языке HTML может включать следующие компоненты:
стилизованный и форматированный текст,команды включения графических и звуковых файлов,гиперсвязи с различными ресурсами Internet.скрипты на языке JavaScript и VBScript.различные объекты, например Flash-анимацию
Документы HTML являются обычными текстовыми файлами, содержащими специальные теги (или управляющие элементы) разметки. Теги разметки указывают браузеру Web (программе пользователя для отображения web-страниц, например, Internet Explorer, Mozilla, Netscape или Opera), как надо вывести страницу.
Файлы HTML обычно имеют расширения htm или html. Их можно создавать при помощи любого текстового редактора.
Язык HTML является подмножеством мощного языка SGML (Standard Generalized Markup Language), который широко используется в издательской деятельности. Основной выигрыш от использования этих языков состоит в переносимости текста между разными издательскими системами. Эта же особенность сохраняется и в HTML. Так, читая документ, пользователи могут устанавливать способы выделения текста, гарнитуру и размер шрифтов по своему вкусу; они могут отменить просмотр рисунков.
В документе HTML можно выделить два основных блока: головная часть и тело документа. Содержимое головной части не выводится на экран пользователя, за исключением заголовка, в ней, как правило, указывают ключевые слова, авторов и другую служебную информацию, а также подключают внешние таблицы стилей и скрипты. В теле документа размещают ту информацию которая будет выведена пользователю.
Коротко о тегах
Теги HTML используются для выделения элементов HTML. Обычно теги HTML используются парами и заключены между двумя символами угловых скобок < (начальный тег)> и <(конечный тег)>. Текст между начальным и конечным тегами является содержимым элемента. Некоторые теги не имеют конечного, например, тег принудительного переноса строки <br>, для таких тегов рекомендуется использовать следующее написание <br/>.
Регистр символов для отображения тегов не важен, например, <p> и <P> означает одно и то же. Однако в этом курсе используется нижний регистр для написания тегов. Это связано с тем, что консорциум WWW (W3C), который занимается стандартизацией спецификации HTML, рекомендует использовать теги в нижнем регистре, поскольку в следующем поколении стандартов будет именно такое требование.
Коротко об элементах HTML
Рассмотрим тот же пример документа HTML:
<html> <head> <title>Это заголовок страницы</title> </head> <body> <h1>Здравствуйте!</h1> <p>Это моя первая страница HTML. <b>Этот текст выводится жирным шрифтом.</b></p> </body> </html>
Пример выполнения данного HTML-кода
Элементом HTML является:
<h1>Здравствуйте!</h1>
Этот элемент начинается с тега <h1>, имеет содержимым "Здравствуйте!" и заканчивается тегом </h1>.
Также элементом HTML, является:
<p>Это моя первая страница HTML. <b>Этот текст выводится жирным шрифтом.</b></p>
Этот элемент, начинается с начального тега <p>, заканчивается конечным тегом </p> и означает, что содержимое элемента "Это моя первая страница HTML. <b> Этот текст выводится жирным шрифтом.</b>" является отдельным параграфом. При этом внутри этого элемента находится другой элемент:
<b>Этот текст выводится жирным шрифтом.</b>
Этот элемент HTML начинается с начального тега: <b> Содержимым элемента HTML является: Этот текст выводится жирным шрифтом. Этот элемент HTML заканчивается конечным тегом </b>. Назначение тега <b> состоит в определении элемента HTML, который должен выводиться жирным шрифтом.
Все описанные элементы HTML содержатся в элементе:
<body> <h1>Здравствуйте!</h1> <p>Это моя первая страница HTML. <b>Этот текст выводится жирным шрифтом.</b></p> </body>
Этот элемент HTML начинается с начального тега <body>, и заканчивается конечным тегом </body>. Назначение тега <body> состоит в определении элемента HTML, который содержит основную часть (или тело) документа HTML.
Мой первый сайт
В разных операционных системах имеются различные редакторы, которые можно использовать для создания документов HTML. Если вы используете:
Microsoft Windows запустите редактор Notepad;Mac OS запустите редактор SimpleText;OSX запустите редактор TextEdit (обязательно измените настройки "Rich Text" или "Расширенный текст" на "Plain text" или "Простой текст" и отметьте пункт "Ignore rich text commands in HTML files" или "Игнорировать команды расширенного текстового формата в файлах HTML").
Файлы HTML можно создавать и в редакторе Microsoft Word, в котором имеется возможность сохранить документ как Web-страницу (в меню "Файл"), однако использовать эту возможность не рекомендуется. Во-первых, потому что HTML-код, генерируемый MS Word не оптимален и содержит множество ненужных элементов разметки, и, во-вторых, автоматическая генерация кода не будет способствовать изучению и правильному пониманию HTML.
Имеется также большое количество специализированных редакторов для создания файлов HTML, таких как FrontPage, Macromedia Dreamweaver или Adobe Web Bundle, которые обладают возможностью WYSIWYG (What You See Is What You Get - что видишь, то и получишь). С их помощью можно легко создавать документы HTML, при помощи кнопок и элементов меню, а не писать самому теги разметки. Однако, как уже отмечалось выше, тем, кто хочет стать технически грамотным разработчиком Web, настоятельно рекомендуется использовать простой текстовый редактор для начального изучения HTML.
Напечатайте следующий текст:
<html> <head> <title>Это заголовок страницы</title> </head> <body> <h1>Здравствуйте!</h1> <p>Это моя первая страница HTML. <b>Этот текст выводится жирным шрифтом.</b></p> </body> </html>
Пример выполнения данного HTML-кода
Сохраните файл как "page1.htm".
При сохранении файла HTML можно использовать расширение .htm или .html. Расширение .htm было принято для старых версий операционных систем, которые допускали трехбуквенное расширение для файлов. В настоящее время практически все операционные системы не имеют подобного ограничения и можно использовать расширение .html.
Теперь посмотрите как браузер отобразит вашу первую страницу. Запустите браузер Интернет. Выберите "Open" или "Open Page" ("Открыть" или "Открыть страницу") в меню File (Файл) браузера. Появится диалоговое окно. Выберите "Browse" или "Choose File" ("Просмотр" или "Выбрать файл") и найдите только что созданный файл HTML - "page1.htm" - выберите его и щелкните на кнопке "Open" ("Открыть"). В диалоговом окне должен появиться адрес, например "C:\MyDocuments\page1.htm". Щелкните на кнопке ОК, и браузер выведет на экран вашу страницу.
Параграфы.
Прежде чем изучать теги форматирования HTML посмотрим как введенный текст отобразится, если не будут применены никакие теги кроме тегов <html> и <body>. Следующий пример демонстрирует такой документ HTML
<html> <body> Этот текст будет показан в окне браузера. </body> </html>
Пример выполнения данного HTML-кода
Этот простой пример документа HTML, который содержит минимальное количество тегов HTML и демонстрирует, как текст внутри элемента body отображается в браузере.
Если ввести большой объем текста таким способом, то читать его будет очень не удобно. Логичнее разбить его на параграфы, как в книге, которые повышают читабельность текста, и кроме того выделяют смысловые блоки.
Следующий пример показывает как отображаются параграфы
<html> <body> <p>Это параграф 1.</p> <p>Это параграф 2.</p> <p>Это параграф 3.</p> </body> </html>
Пример выполнения данного HTML-кода
Этот пример демонстрирует, как в браузере выводится текст внутри элементов параграфа. Можно видеть, что по умолчанию текст каждого параграфа выводится в виде отдельного блока. Каждый из таких блоков отделяется от предыдущих и последующих блоков страницы пустой строкой. Однако отображение параграфа браузером может быть легко изменено посредством таблицы стилей.
Можно заметить, что параграфы можно записывать без закрывающего тега </p>, однако лучше этого не делать, тем более, что в следующей версии HTML не позволит пропустить ни один не закрывающий тег.
В разных браузерах на разных мониторах с разным разрешением страница будет отображаться по-разному, поэтому не стоит форматировать при помощи добавления пустых строк и пробелов. Любое число пробелов заменяется одним.
Использование пустых параграфов <p> для вставки пустых строк является плохим стилем, вместо этого используйте тег <br/>.
Перенос строк
Этот пример демонстрирует использование переноса строк в документе HTML.
<html> <body>
<p> Чтобы выполнить перенос<br>строк<br>в<br>параграфе,<br>используйте тег br. </p>
</body> </html>
Пример выполнения данного HTML-кода
Этот пример демонстрирует некоторые проблемы с форматированием HTML. Попробуем сформатировать стихи:
<html> <body>
<p> В лесу родилась елочка. В лесу она росла. Зимой и летом стройная, Зеленая была. </p>
<p>Обратите внимание, что браузер просто проигнорировал использованное форматирование!</p>
</body> </html>
Пример выполнения данного HTML-кода
Переносы строк.
Для переноса внутри параграфа используется тег <br>, который выполняет принудительный перенос строки.
<html> <body> <p>Это <br>пара<br>граф с переносами строк</p> </body> </html>
Пример выполнения данного HTML-кода
Тег <br> не имеет закрывающего тега. Поэтому для совместимости с будущими версиями стандарта рекомендуется следующее написание тега <br/>
Разбор примера
Ваш первый HTML-документ начинается с тега <html>, который сообщает браузеру о начале документа HTML и заканчивается тегом </html>, который информирует браузер о достижении конца документа HTML.
Текст между тегами <head> и </head> является информацией заголовка документа. Эта информация не выводится в окне браузера.
Текст "Это заголовок страницы" между тегами <title> и </title> является заголовком документа. Этот заголовок выводится в строке заголовка окна браузера.
Текст между тегами <body> и </body> является текстом, который будет выведен в окне браузера. Текст "Здравствуйте!" между тегами <h1> и </h1> будет отображен стилем заголовка, обычно жирным шрифтом большего размера.
Тег <p> означает, что начинается новый параграф, тег </p> означает конец параграфа.
Текст "Этот текст выводится жирным шрифтом." между тегами <b> и </b> будет выведен жирным шрифтом.
Таблица основных тегов HTML
| <html> | Определяет документ HTML |
| <body> | Определяет основную часть или тело документа |
| <h1> -- <h6> | Определяет заголовки с 1 по 6 |
| <p> | Определяет параграф |
| <br> | Вставляет единичный перенос строки |
| <hr> | Определяет горизонтальную линейку |
| <!--> | Определяет комментарий |
Заголовки.
Заголовки определяются с помощью тегов от <h1> до <h6>. <h1> определяет заголовок самого большого размера, а <h6> определяет заголовок самого маленького размера.
<h1>Это заголовок первого уровня</h1> <h2>Это заголовок второго уровня</h2> <h3>Это заголовок третьего уровня</h3> <h4>Это заголовок четвертого уровня</h4> <h5>Это заголовок пятого уровня</h5> <h6>Это заголовок шестого уровня</h6>
Заголовки автоматически отделяются дополнительными промежутками от остальных элементов документа.
Здравствуйте!
Это моя первая страница HTML. Этот текст выводится жирным шрифтом.
Форматирование символов
Для маркировки переменных используется тег <var>, который обычно отображается курсивом.
<html> <body> <p>Версии стандарта HTML обычно маркируются следующим образом <var>x</var>.<var>у</var>.</p> </body> </html>
Пример выполнения данного HTML-кода
Тег <address> маркирует контактную информацию для всего документа или его части. Он может включать имена людей осуществляющих поддержку документа, ссылки на страницы, адреса электронной почты, телефоны и прочее. Использование данного тега для маркировки почтовых адресов организаций является не совсем корректным. Его следует использовать только для пометки адресов для связи по поводу документа. Также допустимо использование тега <address> для выделения контактной информации по поводу части документа, обычно формы.
<html> <body> <form method=post action="http://www.intuit.ru/cgi-bin/order.cgi">
<fieldset> <legend accesskey=c>Информация о кредитной карте<br></legend> <p> <label accesskey=v> <input type=radio name=card value=visa> Visa </label> <label accesskey=m> <input type=radio name=card value=mc> Mastercard </label> <br> <label accesskey=n> Номер: <input type=text name=number> </label> <label accesskey=e> Срок действия: <input type=text name=expiry> </label> </p> </fieldset>
<p> <input type=submit value="Отправить заказ" accesskey=s> </p>
<address> Если у вас имеются вопросы по поводу заказа свяжитесь с нами по адресу <a href="mailto:orders@htmlhelp.com">orders@htmlhelp.com</a>, Или телефону в офисе 555-5555. </address>
</form> </body> </html>
Пример выполнения данного HTML-кода
Этот пример показывает, как работать с сокращениями или акронимами.
<html> <body>
<abbr title="Содружество Независимых Государств">СНГ</abbr> <br> <acronym title="World Wide Web">WWW</acronym>
<p> При наведении указателя мыши на акроним или сокращение показывается атрибут title.</p>
<p>Это работает по-разному в разных браузерах.</p>
</body> </html>
Пример выполнения данного HTML-кода
Этот пример показывает, как изменять направление вывода текста.
<html> <body>
<p> Если используемый браузер поддерживает двунаправленное представление (bdo),
то следующая строка будет записана справа налево (rtl): </p>
<bdo dir="rtl"> Здесь какой-то арабский текст </bdo>
</body> </html>
Пример выполнения данного HTML-кода
Этот пример показывает, как использовать длинные и короткие цитаты.
<html> <body>
Здесь представлена длинная цитата: <blockquote> Это длинная цитата. Это длинная цитата. Это длинная цитата. Это длинная цитата. Это длинная цитата. </blockquote>
Здесь представлена короткая цитата: <q> Это короткая цитата </q>
<p> Для элемента blockquote браузер вставляет дополнительные перенос строки, пустые строки и поля, но элемент q не изображается каким-то специальным образом. </p>
</body> </html>
Пример выполнения данного HTML-кода
Этот пример показывает, как пометить текст, который удален или вставлен в документ.
<html> <body> <p> дюжина означает <del>двадцать</del> <ins>двенадцать</ins> pieces </p> <p> Большинство браузеров будет зачеркивать удаленный текст и подчеркивать вставленный текст. </p> <p> Некоторые старые браузеры будут выводить удаленный или вставленный текст как обычный текст. </p> </body> </html>
Пример выполнения данного HTML-кода
Форматирование текста
<html> <body> <p> Если необходимо чтобы к тексту было применено какое-либо форматирование, например, выделение <b>полужирным</b> или <i>курсивом</i>, необходимо использовать соответствующие теги форматирования. При этом форматируемый текст помещается между тегами. </p> </body> </html>
Пример выполнения данного HTML-кода
Так же для выделения текста используются теги <strong> и <em>, данные теги являются контейнерами и требуют закрывающегося тега. Тег <strong> сообщает браузеру, что на заключенном в нем тексте необходимо сделать сильное ударение. Обычно визуальные браузеры отображают содержимое данного тега полужирным шрифтом, но это может быть легко изменено с помощью таблицы стилей. Так как данный тег является структурным, он несет смысловую нагрузку, в отличие от тега <b>, который лишь форматирует текст полужирным, то его использование предпочтительней. Тег <em> тоже акцентирует внимание на заключенном внутри тексте, но он считается менее сильным ударением. Отображается он как правило курсивом. По тем же причинам использование <em> предпочтительней чем применение <i>. Сравните как будет отформатирован следующий текст.
<html> <body> <p><strong>Данный параграф отформатирован тегом strong</strong></p> <p><b>А этот тегом b, внешне они не отличаются.</b></p> <p><em>Данный параграф отформатирован тегом em</em></p> <p><i>А этот тегом i, внешне они не отличаются.</i></p> </body> </html>
Пример выполнения данного HTML-кода
Еще одной парой тегов форматирования являются теги <big> и <small>. Первый выводит текст увеличенным по сравнению со стандартным, а второй уменьшенным. Вместо тега <big> рекомендуется использовать теги <strong> или теги заголовков, так как они несут и структурную нагрузку. Тег <small> является тегом по смыслу противоположным <strong> и <em>, он деакцентирует внимание на тексте. По поводу применения этого тега следует сделать одно замечание: на разных компьютерах установлено различное разрешение экрана и в браузере может быть установлен различный размер основного шрифта и сильное уменьшение текста может сделать текст не читаемым. Следующий пример демонстрирует вид текста отформатированного с помощью этих тегов.
<html> <body> <p><big> Данный параграф отформатирован тегом big </big></p> <p><small>Данный параграф отформатирован тегом small </small></p> <p>А в данном параграфе теги не применяются</p> </body> </html>
Пример выполнения данного HTML-кода
Другой парой полезных тегов являются <sup> - верхний индекс и <sub> - нижний индекс. Которые могут быть полезными при написании математических и химических формул. Сравните формулы набранные различным способом
<html> <body> <p>Формула воды H2O. В данном параграфе формула набрана без использования тега sub</p> <p>Формула воды H<sub>2</sub>O. В данном параграфе формула набрана с использованием тега sub Формула выглядит более привычно.</p> <p>2^4=16. В данном параграфе формула набрана без использования тега sup</p> <p>2<sup>4</sup>=16. В данном параграфе формула набрана с использованием тега sup Формула выглядит более привычно.</p> </body> </html>
Пример выполнения данного HTML-кода
В некоторых случаях, например для вывода кода программ, полезным будет использование тега <pre>, который сообщает браузеру, что находящийся внутри текст должен быть выведен как есть. При этом будут сохранены все пробелы переносы строк и прочие символы, которые обычно при выводе браузером не отображаются.
Этот пример показывает, как можно управлять переносами строк и пробелами с помощью тега <pre>.
<html> <body>
<pre> Это предварительно форматированный текст. Он сохраняет как пробелы так и переносы строк. </pre> </body> </html>
Пример выполнения данного HTML-кода
Сравните написание кода программы с применением тега <pre> и без его использования.
<html> <body>
<pre> // Данный фрагмент набран с использованием тега <pre> for (int i = 1; i < 10; i++) { printf ("i=%i\n, i); } </pre>
<p> // Здесь тег <pre> не применялся for (int i = 1; i < 10; i++) { printf ("i=%i\n", i); } </p>
</body> </html>
Пример выполнения данного HTML-кода
Тег <code> маркирует код компьютерной программы. Браузеры обычно отображают его моноширинным шрифтом. Этот элемент является структурным, поэтому его использование предпочтительней использования тега <tt>, который маркирует моноширный текст. Также следует отметить, что тег <code> лучше использовать внутри тега <pre>, так как в противном случае, все множественные пробелы будут заменены одним. Тег <kbd> маркирует текст введенный с клавиатуры. Отображается он также, как и текст внутри тега <code>
<html> <body> <p>Данные примеры демонстрируют то как будет представлен текст при использовании разных тегов</p> <pre><code> // отформатировано с помощью <pre> и <code> class helloworld { public static void main(string[] args) { system.out.println("hello world!"); } } </code></pre>
<pre><tt> // отформатировано с помощью <pre> и <tt> class helloworld { public static void main(string[] args) { system.out.println("hello world!"); } } </tt></pre>
<code> // отформатировано с помощью <code> class helloworld { public static void main(string[] args) { system.out.println("hello world!"); } } </code> <h3>Использование тега <kbd></h3> <p>Сохранить результат <kbd>Да/Нет</kbd></p> </body> </html>
Пример выполнения данного HTML-кода
Для маркировки примера вывода программы или скрипта используется тег <samp>.
<html> <body> <p>Если в HTML коде встретится ошибка, то будет выдано следующее: </p><p><samp>c:\sp\bin\nsgmlsu.exe:test.html:4:7:e: element "foobar" undefined</samp></p> </body> </html>
Пример выполнения данного HTML-кода
<html> <body> <p> Версии стандарта HTML обычно маркируются следующим образом <var>x</var>.<var>у</var>.</p> </body> </html>
Пример выполнения данного HTML-кода
Тег <address> маркирует контактную информацию для всего документа или его части. Он может включать имена людей осуществляющих поддержку документа, ссылки на страницы, адреса электронной почты, телефоны и прочее. Использование данного тега для маркировки почтовых адресов организаций является не совсем корректным. Его следует использовать только для пометки адресов для связи по поводу документа. Также допустимо использование тега <address> для выделения контактной информации по поводу части документа, обычно формы.
<html> <body> <form method=post action="http://www.intuit.ru/cgi-bin/order.cgi">
<fieldset> <legend accesskey=c>Информация о кредитной карте<br></legend> <p> <label accesskey=v> <input type=radio name=card value=visa> Visa </label> <label accesskey=m> <input type=radio name=card value=mc> Mastercard </label> <br> <label accesskey=n> Номер: <input type=text name=number> </label> <label accesskey=e> Срок действия: <input type=text name=expiry> </label> </p> </fieldset>
<p> <input type=submit value="Отправить заказ" accesskey=s> </p>
<address> Если у вас имеются вопросы по поводу заказа свяжитесь с нами по адресу <a href="mailto:orders@htmlhelp.com">orders@htmlhelp.com</a>, Или телефону в офисе 555-5555. </address>
</form> </body> </html>
Пример выполнения данного HTML-кода
Этот пример показывает, как работать с сокращениями или акронимами.
<html> <body>
<abbr title="Содружество Независимых Государств">СНГ</abbr> <br> <acronym title="World Wide Web">WWW</acronym>
<p> При наведении указателя мыши на акроним или сокращение показывается атрибут title.</p>
<p>Это работает по-разному в разных браузерах.</p>
</body> </html>
Пример выполнения данного HTML-кода
Этот пример показывает, как изменять направление вывода текста.
<html> <body>
<p> Если используемый браузер поддерживает двунаправленное представление (bdo),
то следующая строка будет записана справа налево (rtl): </p>
<bdo dir="rtl"> Здесь какой-то арабский текст </bdo>
</body> </html>
Пример выполнения данного HTML-кода
Этот пример показывает, как использовать длинные и короткие цитаты.
<html> <body>
Здесь представлена длинная цитата: <blockquote> Это длинная цитата. Это длинная цитата. Это длинная цитата. Это длинная цитата. Это длинная цитата. </blockquote>
Здесь представлена короткая цитата: <q> Это короткая цитата </q>
<p> Для элемента blockquote браузер вставляет дополнительные перенос строки, пустые строки и поля, но элемент q не изображается каким-то специальным образом. </p>
</body> </html>
Пример выполнения данного HTML-кода
Этот пример показывает, как пометить текст, который удален или вставлен в документ.
<html> <body> <p> дюжина означает <del>двадцать</del> <ins>двенадцать</ins> pieces </p> <p> Большинство браузеров будет зачеркивать удаленный текст и подчеркивать вставленный текст. </p> <p> Некоторые старые браузеры будут выводить удаленный или вставленный текст как обычный текст. </p> </body> </html>
Пример выполнения данного HTML-кода
Исходный код HTML-документа
Полезно изучать код Web-страниц, сделанных другими. Такую возможность предоставляют все популярные браузеры. Для этого в меню кнопке View ("Вид") браузера следует выбрать Source ("Исходный код") или Page Source ("Код страницы"). Откроется окно, в котором будет показан фактический код HTML страницы.
| <b> | Задает жирный текст |
| <big> | Относительное увеличение текста |
| <em> | Выделяет текст (обычно курсив) |
| <i> | Задает курсив |
| <small> | Относительное уменьшение текста |
| <strong> | Акцентирует текст (обычно жирный) |
| <sub> | Определяет нижний индекс |
| <sup> | Определяет верхний индекс |
| <ins> | Вставленный текст |
| <del> | Удаленный текст |
| <s> | Не рекомендуется. Используйте вместо этого <del> |
| <strike> | Не рекомендуется. Используйте вместо этого <del> |
| <u> | Не рекомендуется. Используйте вместо этого стили (style) |
| <code> | Определяет текст кода программы |
| <kbd> | Определяет текст клавиатуры |
| <samp> | Определяет образец кода программы |
| <tt> | Определяет текст телетайпа |
| <var> | Определяет переменную |
| <pre> | Определяет заранее отформатированный текст |
| <listing> | Не рекомендуется. Используйте вместо этого <pre> |
| <plaintext> | Не рекомендуется. Используйте вместо этого <pre> |
| <xmp> | Не рекомендуется. Используйте вместо этого <pre> |
| <abbr> | Определяет сокращение |
| <acronym> | Определяет акроним |
| <address> | Определяет элемент address (адрес) |
| <bdo> | Определяет направление вывода текста |
| <blockquote> | Определяет длинную цитату |
| <q> | Определяет короткую цитату |
| <cite> | Определяет сноску на другой материал |
| <dfn> | Используется для определения термина |
Неразрывный пробел
Наиболее часто используемым символьным объектом является неразрывный пробел - . Обычно браузер удаляет лишние пробелы и вместо нескольких использует один, если необходимо вставить в текст пробелы, используется символьный объект . Еще одно частое применение неразрывного пробела заполнение пустых ячеек в таблице, так большинство браузеров не отображает ячейки, в которых ничего нет.
| неразрывный пробел | |   | |
| < | меньше | < | < |
| > | больше | > | > |
| & | амперсанд | & | & |
| " | двойная кавычка | " | " |
| ' | апостроф | ' | ' (не работает в IE) |
| ? | цент | ¢ | ¢ |
| ? | фунт стерлингов | £ | £ |
| ? | йена | ¥ | ¥ |
| § | параграф | § | § |
| © | авторское право | © | © |
| ® | зарегистрированная торговая марка | ® | ® |
| ? | умножение | × | × |
| ? | деление | ÷ | ÷ |
Полный список символьных объектов HTML представлен в Справочнике объектов HTML.
либо форматирование, например, выделение полужирным
Если необходимо чтобы к тексту было применено какое- либо форматирование, например, выделение полужирным или курсивом, необходимо использовать соответствующие теги форматирования. При этом форматируемый текст помещается между тегами.
Данный параграф отформатирован тегом <strong>
А этот тегом <b>, внешне они не отличаются.
Данный параграф отформатирован тегом <em>
А этот тегом <i>, внешне они не отличаются.
Данный параграф отформатирован тегом <big>
Данный параграф отформатирован тегом <small>
А в данном параграфе теги не применяются
Формула воды H2O. В данном параграфе формула набрана без использования тега <sub>
Формула воды H2O. В данном параграфе формула набрана с использованием тега <sub> Формула выглядит более привычно.
2^4=16. В данном параграфе формула набрана без использования тега <sup>
24=16. В данном параграфе формула набрана с использованием тега <sup> Формула выглядит более привычно.
Это предварительно форматированный текст. Он сохраняет как пробелы так и переносы строк.
// Данный фрагмент набран с использованием тега <pre> for (int i = 1; i < 10; i++) { printf (“i=%i\n”, i); }
// Здесь тег <pre& gt не применялся for (int i = 1; i < 10; i++) { printf (“i=%i\n”, i); }
Символьные элементы
Некоторые символы, такие как символ <, имеют в HTML специальное значение. Поэтому их нельзя использовать в тексте в явном виде. Для их отображения используются символьные элементы CER (Character Entity Reference).
Для представления символа "<" в теле документа HTML используется <, а для символа ">" используется >. Символьный элемент отображается в виде:
&имя_символа;
или
&#номер_символа;
Например, знак меньше (<) изображается в виде: < или <.
Преимущество использования имени вместо номера состоит в том, что имя легче запомнить. Недостаток состоит в том, что не все браузеры поддерживают самые новые имена объектов, в то время как поддержка номеров объектов реализована очень хорошо почти во всех браузерах. Обратите внимание, что символьные объекты зависят от регистра символов.
Следующий пример позволит поэкспериментировать с символьными объектами.
Символьные объекты. Работает только в Internet Explorer.
<html> <body>
<p>Это символьный объект: �</p>
<p> Попробуйте заменить номер (000) на другой номер (например, 169), сохраните измененный текст и перезагрузите страницу в браузере, чтобы увидеть результат. </p>
</body> </html>
Пример выполнения данного HTML-кода
Фрейм навигации
Этот пример показывает, как сделать фрейм навигации. Фрейм навигации содержит список ссылок, указывающих на второй фрейм.
<html>
<frameset cols="120,*"> <frame src="menu.htm"> <frame src="frame_1.htm" name="frame_1"> </frameset>
</html>
Пример выполнения данного HTML-кода
Файл с именем "menu.htm" содержит ссылки на другие документы HTML, которые будут загружаться в frame_1. Исходный код для ссылок:
<a href ="file_1.htm" target ="frame_1">Файл 1</a><br> <a href ="file_2.htm" target ="frame_1">Файл 2</a><br> <a href ="file_3.htm" target ="frame_1">Файл 3</a>
Фреймы HTML
Фреймы используются для разбивки окна браузера на несколько независимых частей, каждая из которых представляет собой отдельный HTML-документ. Наиболее частое применение фреймов это отделение меню от основного информационного наполнения. Хотя фреймы достаточно удобная вещь использование их не рекомендуется. Следует внимательно следить за тем чтоб теги формирующие фреймовую структуру располагались вне тегов <body>, так как они не относятся к телу документа.
Горизонтальные и вертикальные фреймы
Этот пример показывает, как сделать набор фреймов с тремя документами, и как разделить их на строки и столбцы. При этом не все границы фреймов можно передвинуть.
<html>
<frameset rows="50%,50%"> <frame src="frame_1.htm"> <frameset cols="25%,75%"> <frame noresize="noresize" src="frame_2.htm"> <frame src="frame_3.htm"> </frameset> </frameset> </html>
Пример выполнения данного HTML-кода
Изображение в качестве ссылки
Этот пример показывает, как использовать в качестве ссылки изображение.
<html> <body> <p> Можно также использовать в качестве ссылки изображение: <a href=" http://www.intuit.ru/"> <img border="0" src="logo.gif" width="285" height="52"> </a> </p>
</body> </html>
Пример выполнения данного HTML-кода
Набор горизонтальных фреймов
Этот пример показывает, как создать набор горизонтальных фреймов с тремя различными документами.
<html>
<frameset rows="25%,50%,25%">
<frame src="frame_1.htm"> <frame src="frame_2.htm"> <frame src="frame_3.htm">
</frameset>
</html>
Пример выполнения данного HTML-кода
Набор вертикальных фреймов
Этот пример показывает, как создать набор вертикальных фреймов с тремя различными документами.
<html>
<frameset cols="50%,25%,25%">
<frame src="frame_1.htm"> <frame src="frame_2.htm"> <frame src="frame_3.htm">
</frameset>
</html>
Пример выполнения данного HTML-кода
Описание тега гипертекстовой ссылки
Якорь (аnchor) позволяет устанавливать связь с любыми ресурсами во Всемирной Сети: другую страницу HTML, изображение, звуковой файл, видеоклип, и т.д.
Синтаксис тега гипертекстовой ссылки:
<a href="url">текст ссылки</a>
При помощи атрибута href передается адрес документа, на который указывает ссылка.
<a href="http://www.intuit.ru/">Добро пожаловать в ИНТУИТ!</a>
Такой же синтаксис используется для перехода во вложенную папку, например в папку "Помощь" на сайте Интернет-Университета Информационных Технологий используется код:
<a href="http://www.intuit.ru/help/">Страница помощи на сайте ИНТУИТ!</a>
Всегда добавляйте завершающую косую черту к ссылкам на вложенные папки. Если ссылка имеет следующий вид: href="http://www.intuit.ru/help", то будет создано два запроса HTTP к серверу, так как сервер добавит косую черту к адресу и создаст новый запрос следующего вида: href="http://www.intuit.ru/help/". При этом вызове обращение обычно происходит к странице index.htm внутри папки help или к другому файлу – это зависит от настроек web-сервера.
С помощью данного атрибута можно задавать ссылки не только по протоколу HTTP, но и по другим:
http://... - создает ссылку на www-документ;ftp://... - создает ссылку на ftp-сайт или расположенный на нем файл;mailto:... - запускает почтовую программу-клиент с заполненным полем имени получателя. Если после адреса поставить знак вопроса, то можно указать дополнительные атрибуты, разделенные знаком "&";news:.. - создает ссылку на конференцию сервера новостей;telnet://... - создает ссылку на telnet-сессию с удаленной машиной;wais://... - создает ссылку на WAIS - сервер;gopher://... - создает ссылку на Gopher - сервер;
С помощью атрибута target можно определить, где будет открыт документ, на который указывает ссылка. В качестве значения необходимо задать либо имя одного из существующих фреймов, либо одно из следующих зарезервированных имен:
_self - указывает, что определенный в параметре href документ должен отображаться в текущем фрейме;_parent - указывает, что документ должен отображаться во фрейме-родителе текущего фрейма. Иначе говоря, _parent ссылается на окно, содержащее frameset, включающий текущий фрейм;_top - указывает, что документ должен отображаться в окне-родителе всей текущей фрэймовой структуры;_blank - указывает, что документ должен отображаться в новом окне.
<html> <body> <a href="http://www.intuit.ru/" target="_blank">Добро пожаловать в ИНТУИТ!</a> <a href="http://www.intuit.ru/" target="_parent">Добро пожаловать в ИНТУИТ!</a> <a href="http://www.intuit.ru/" target="_top">Добро пожаловать в ИНТУИТ!</a> <a href="http://www.intuit.ru/" target="_self">Добро пожаловать в ИНТУИТ!</a> </body> </html>
Пример выполнения данного HTML-кода
Для перехода внутри страницы к конкретному разделу используют атрибут name тега гипертекстовой ссылки a, при помощи которого создается именованный якорь.
<a name="label">ссылка на именованный якорь</a>
В данном примере внутри документа создается своеобразная метка, при этом именованный якорь никак не отображается в окне браузера.
Для перехода на место, которое отмечено именованным якорем используется знак # и имя якоря в конце URL следующим образом:
<a href="page1.html#label">переход на именованный якорь </a>
Переход внутри файла "page1.html" на именованный якорь выглядит следующим образом:
<a href="#label">переход на именованный якорь </a>
Если браузер не сможет найти указанный именованный якорь на вызываемой странице, то переход произойдет на начало документа, при этом сообщения об ошибке доступа не возникает.
Открытие ссылки в новом окне браузера
Этот пример показывает, как открыть ссылку на другую страницу в новом окне, чтобы посетителю не нужно было покидать ваш Web-сайт.
<html> <body>
<a href="lastpage.htm" target="_blank">Последняя страница</a>
<p> Если задать атрибут target ссылки как "_blank", то ссылка будет открыта в новом окне. </p>
</body> </html>
Пример выполнения данного HTML-кода
является ссылкой на страницу на
Этот текст является ссылкой на страницу на этом Web-сайте.
Этот текст является ссылкой на страницу во Всемирной Паутине.
Можно также использовать в качестве ссылки изображение:
Добро пожаловать в ИНТУИТ!
Добро пожаловать в ИНТУИТ!
Добро пожаловать в ИНТУИТ!
Добро пожаловать в ИНТУИТ!
Последняя страница
Если задать атрибут target ссылки как "_blank", то ссылка будет открыта в новом окне.
Создание гиперссылок
Этот пример показывает, как создавать ссылки в документе HTML.
<html> <body>
<p> <a href="page1.htm"> Этот текст</a> является ссылкой на страницу на этом Web-сайте. </p>
<p> <a href="http://www.intuit.ru/"> Этот текст </a> является ссылкой на страницу во Всемирной Паутине. </p>
</body> </html>
Пример выполнения данного HTML-кода
Создание ссылки mailto
Этот пример показывает, как соединиться с сообщением mail (будет работать только, если установлена служба mail).
<html> <body>
<p> Это ссылка на почтовые адреса: <a href="mailto:help@intuit.ru?сс=orders@intuit.ru&bcc=admin@intuit.ru&subject=Тестовый%20запрос!"> отправить запрос</a> </p>
<p>При помощи этой ссылки отправляется письмо по адресу электронной почты help@intuit.ru, его копия на адрес orders@intuit.ru и скрытая копия на адрес admin@intuit.ru. Для корректной обработки заголовка письма необходимо пробелы заменять на %20.</p>
</body> </html>
Пример выполнения данного HTML-кода
Ссылка в определенное место на той же странице
Этот пример показывает, как использовать ссылку на другую часть документа.
<html> <body>
<p> <a href="#part5">Переход на часть 5.</a> </p>
<h1>Лекция 1</h1>
<h2>Часть 1</h2> <p>Это первая часть ... </p>
<h2> Часть 2</h2> <p>Это вторая часть ...</p>
<h2> Часть 3</h2> <p>Это третья часть ...</p>
<h2> Часть 4</h2> <p>Это четвертая часть ...</p>
<h2><a name="part5"> Часть 5</h2> <p>Это пятая часть ...</p>
<h2> Часть 6</h2> <p>Это шестая часть ...</p>
<h2> Часть 7</h2> <p>Это седьмая часть ...</p>
<h2> Часть 8</h2> <p>Это восьмая часть ...</p>
<h2> Часть 9</h2> <p>Это девятая часть ...</p>
<h2> Часть 10</h2> <p>Это десятая часть ...</p>
</body> </html>
Пример выполнения данного HTML-кода
Теги для работы с фреймами
Тег <frameset> определяет, как разделить окно на фреймы. Каждый frameset определяет набор строк или столбцов. Значения rows/cols указывают величину области экрана, которую будут занимать каждая строка/столбец. Атрибут framespacing - определяет расстояние между фреймами в пикселах.
Тег <frameset> является контейнером для всех остальных тегов фреймов. Между начальным и конечным тэгами кроме элементов <frame> и <noframe> могут находиться другие элементы <frameset>. То есть элемент <frameset> поддерживает вложенные конструкции фреймов.
Тег <frame> определяет, какой документ HTML поместить в каждый фрейм. Тег <frame> имеет атрибут noresize="noresize", который запрещает изменять размер фрейма пользователю.
В примере ниже задана фреймовая структура с двумя столбцами. Для первого столбца задано 25% ширины окна браузера. Для второго фрейма задано 75% ширины окна браузера. В первый столбец помещается документ HTML "frame_1.htm", а во второй столбец помещается документ HTML "frame_2.htm":
<frameset cols="25%,75%"> <frame src="frame_1.htm"> <frame src="frame_2.htm"> </frameset>
Необходимо учитывать, что браузер может не поддерживать фреймы, в этом случае следует использовать тег <noframes>.
При использовании фреймов теги <body></body> не используются. Однако, если добавить тег <noframes>, содержащий некоторый текст для браузеров, которые не поддерживают фреймы, необходимо будет поместить этот текст между тегами <body></body>. Например,
<html>
<frameset cols="25%,50%,25%"> <frame src="frame_1.htm"> <frame src="frame_2.htm"> <frame src="frame_3.htm">
<noframes> <body>Ваш браузер не поддерживает фреймы!</body> </noframes>
</frameset> </html>
Пример выполнения данного HTML-кода
Встроенный фрейм
Этот пример показывает, как создать встроенный фрейм (фрейм внутри страницы HTML).
<html> <body>
<iframe src="menu.html"></iframe>
<p>Некоторые старые браузеры не поддерживают iframes.</p> <p>В этом случае встроенный фрейм (iframe) не будет виден.</p>
</body> </html>
Пример выполнения данного HTML-кода
Атрибут frame
<html> <body>
<p> Если никакие границы кадра таблицы в этих примерах не видны, то используемый браузер слишком старый, или не поддерживает их. </p>
<h4> frame="border":</h4> <table frame="border"> <tr> <td>Первая</td> <td>строка</td> </tr> <tr> <td>Вторая </td> <td>строка</td> </tr> </table>
<h4> frame="box":</h4> <table frame="box"> <tr> <td>Первая</td> <td>строка</td> </tr> <tr> <td>Вторая </td> <td>строка</td> </tr> </table>
<h4>frame="void":</h4> <table frame="void"> <tr> <td>Первая </td> <td>строка</td> </tr> <tr> <td>Вторая</td> <td>строка</td> </tr> </table>
<h4>frame="above":</h4> <table frame="above"> <tr> <td>Первая</td> <td>строка</td> </tr> <tr> <td>Вторая</td> <td>строка</td> </tr> </table>
<h4>frame="below":</h4> <table frame="below"> <tr> <td>Первая</td> <td>строка</td> </tr> <tr> <td>Вторая</td> <td>строка</td> </tr> </table>
<h4>frame="hsides":</h4> <table frame="hsides"> <tr> <td>Первая</td> <td>строка</td> </tr> <tr> <td>Вторая</td> <td>строка</td> </tr> </table>
<h4>frame="vsides":</h4> <table frame="vsides"> <tr> <td>Первая</td> <td>строка</td> </tr> <tr> <td>Вторая</td> <td>строка</td> </tr> </table>
<h4>frame="lhs":</h4> <table frame="lhs"> <tr> <td>Первая</td> <td>строка</td> </tr> <tr> <td>Вторая</td> <td>строка</td> </tr> </table>
<h4>frame="rhs":</h4> <table frame="rhs"> <tr> <td>Первая</td> <td>строка</td> </tr> <tr> <td>Вторая</td> <td>строка</td> </tr> </table>
</body> </html>
Пример выполнения данного HTML-кода
Фоновый цвет или фоновое изображение в ячейке таблицы
<html> <body>
<h4>Ячейки с фоном:</h4> <table border="1"> <tr> <td bgcolor="red">Первая</td> <td>Строка</td> </tr> <tr> <td background="bg.jpg"> Вторая</td> <td>Строка</td> </tr> </table>
</body> </html>
Пример выполнения данного HTML-кода
Использование в таблице фонового цвета или фонового изображения
<html> <body>
<h4>Фоновый цвет (bgcolor):</h4> <table border="1" bgcolor="red"> <tr> <td>Первая </td> <td>Строка </td> </tr> <tr> <td>Вторая </td> <td>Строка </td> </tr> </table>
<h4>Фоновое изображение (background):</h4> <table border="1" background="bg.jpg"> <tr> <td>Первая</td> <td>Строка</td> </tr> <tr> <td>Вторая </td> <td>Строка </td> </tr> </table>
</body> </html>
Пример выполнения данного HTML-кода
Ячейка, которая охватывает два столбца:
| Интернет-Университет Информационных Технологий | 253-9312 | 253-9313 |
Ячейка, которая охватывает две строки:
| Интернет-Университет Информационных Технологий |
| 253-9312 |
| 253-9313 |
Ячейки таблицы, которые охватывают более одной строки/столбца
<html> <body>
<h4>Ячейка, которая охватывает два столбца:</h4> <table border="1"> <tr> <th>Организация</th> <th colspan="2">Телефон</th> </tr> <tr> <td>Интернет-Университет Информационных Технологий</td> <td>253-9312</td> <td>253-9313</td> </tr> </table>
<h4>Ячейка, которая охватывает две строки:</h4> <table border="1"> <tr> <th>Организация:</th> <td> Интернет-Университет Информационных Технологий </td> </tr> <tr> <th rowspan="2">Телефон:</th> <td>253-9312</td> </tr> <tr> <td>253-9313</td> </tr> </table>
</body> </html>
Пример выполнения данного HTML-кода
Эта таблица имеет заглавие и толстую рамку:
| 100 | 200 | 300 |
| 400 | 500 | 600 |
Отступ от рамки до содержимого ячейки
<html> <body>
<h4>Без отступа:</h4> <table border="1"> <tr> <td>Первая </td> <td>Строка</td> </tr> <tr> <td>Вторая </td> <td>Строка</td> </tr> </table>
<h4>С отступом (cellpadding) :</h4> <table border="1" cellpadding="10"> <tr> <td>Первая</td> <td>Строка</td> </tr> <tr> <td>Вторая</td> <td>Строка</td> </tr> </table>
</body> </html>
Пример выполнения данного HTML-кода
Как можно видеть, одна из
| Некоторый текст | Некоторый текст |
| Некоторый текст |
Как можно видеть, одна из ячеек не имеет рамки. Это потому, что она пустая. Попробуйте вставить в ячейку пробел. Она по-прежнему не будет иметь рамки.
Хитрость состоит в том, чтобы вставить в ячейку неразрывный пробел.
Неразрывный пробел является символьным объектом.
Объект неразрывного пробела начинается с амперсанда ("&"), затем следуют буквы "nbsp", и в конце стоит точка с запятой (";")
|
Это параграф Это другой параграф |
Эта ячейка содержит таблицу: |
| A | B |
| C | D |
элемент 1
элемент 2
элемент 3
| Базы данных | 2 | 3 |
| Программирование | 4 | 5 |
| Интернет-технологии | 2 | 3 |
Рассмотрим вышеизложенное на примерах различного
Рассмотрим вышеизложенное на примерах различного вида таблиц.
<html> <body>
<p> Каждая таблица начинается с тега table. Каждая строка таблицы начинается с тега tr. Каждый элемент данных таблицы начинается с тега td. </p>
<h1>Это пример простейшей таблицы, содержащей одну строку и одну ячейку.</h1> <table border="1"> <tr> <td>Одна строка и одна ячейка</td> </tr> </table>
<h1>Одна строка и три столбца:</h1> <table border="1"> <tr> <td> столбец 1</td> <td> столбец 2</td> <td> столбец 3</td> </tr> </table>
<h1>Две строки и три столбца:</h1> <table border="1"> <tr> <td>1.1</td> <td>1.2</td> <td>1.3</td> </tr> <tr> <td>2.1</td> <td>2.2</td> <td>2.3</td> </tr> </table>
</body> </html>
<h1>Рамка таблицы</h1>
<html> <body> <h1>Обычная рамка:</h1> <table border="1"> <tr> <td>Первая</td> <td>строка</td> </tr> <tr> <td>Вторая </td> <td>строка</td> </tr> </table>
<h1>Толстая рамка:</h1> <table border="10"> <tr> <td>Первая</td> <td>строка</td> </tr> <tr> <td>Вторая </td> <td>строка</td> </tr> </table>
</body> </html>
<table border="1"> <tr> <td>строка 1, ячейка 1</td> <td>строка 1, ячейка 2</td> </tr> <tr> <td>строка 2, ячейка 1</td> <td>строка 2, ячейка 2</td> </tr> </table>
Пример выполнения данного HTML-кода
Для тега table определены следующие аттрибуты.
align - определяет способ горизонтального выравнивания таблицы на странице. Возможные значения: left, center, right. Значение по умолчанию - left.valign - должен определять способ вертикального выравнивания для содержимого таблицы. Возможные значения: top, bottom, middle.border - определяет ширину внешней рамки таблицы (в пикселах). При BORDER="0" или при отсутствии этого параметра рамка отображаться не будет.cellpadding - определяет расстояние (в пикселах) между рамкой каждой ячейки таблицы и содержащимся в ней материалом.cellspacing - определяет расстояние (в пикселах) между границами соседних ячеек.width - определяет ширину таблицы. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.height - определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.bgcolor - определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.background - позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.
Ячейки таблицы без содержимого в большинстве браузеров выводятся не очень хорошо. Если необходимо сделать ячейку таблицы пустой, то разместите в ней неразрывный пробел
Такие элементы как <thead>,<tbody> и <tfoot> используются редко в связи с тем, что не все браузеры их поддерживают.
Для тегов <td> и <th> очень полезными являются атрибуты colspan и rowspan. Первый показывает сколько ячеек надо объединить по горизонтали, а второй по вертикали. Следует заметить, что если мы применяем объединение ячеек, то общее число ячеек с учетом объединенных должно быть равным. Продемонстрируем на примере.
<html> <body>
<h4>Правильное применение colspan:</h4> <table border="1"> <tr> <td colspan="2">100</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table>
<h4>Неправильное применение colspan:</h4> <table border="1"> <tr> <td colspan="2">100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table>
<h4>Правильное применение rowspan:</h4> <table border="1"> <tr> <td rowspan="2">100</td> <td>200</td> <td>300</td> </tr> <tr> <td>500</td> <td>600</td> </tr> </table>
<h4>Неправильное применение rowspan:</h4> <table border="1"> <tr> <td rowspan="2">100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html>
Пример выполнения данного HTML-кода
Пустые ячейки
<html> <body>
<table border="1"> <tr> <td>Некоторый текст </td> <td>Некоторый текст </td> </tr> <tr> <td></td> <td>Некоторый текст </td> </tr> </table>
<p> Как можно видеть, одна из ячеек не имеет рамки. Это потому, что она пустая. Попробуйте вставить в ячейку пробел. Она по-прежнему не будет иметь рамки. </p>
<p> Хитрость состоит в том, чтобы вставить в ячейку неразрывный пробел. </p>
<p>Неразрывный пробел является символьным объектом. </p>
<p>Объект неразрывного пробела начинается с амперсанда ("&"), затем следуют буквы "nbsp", и в конце стоит точка с запятой (";") </p>
<p> </p>
</body> </html>
Пример выполнения данного HTML-кода
Расстояние между ячейками
<html> <body>
<h4>Расстояние между ячейками не задано:</h4> <table border="1"> <tr> <td>Первая </td> <td>Строка </td> </tr> <tr> <td>Вторая </td> <td>Строка </td> </tr> </table>
<h4>Расстояние между ячейками (cellspacing) задано:</h4> <table border="1" cellspacing="10"> <tr> <td>Первая </td> <td>Строка</td> </tr> <tr> <td>Вторая </td> <td>Строка </td> </tr> </table>
</body> </html>
Пример выполнения данного HTML-кода
Таблица без рамки
<html> <body>
<h4>Эта таблица не имеет рамки:</h4> <table> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table>
<h4>И эта таблица не имеет рамки:</h4> <table border="0"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table>
</body> </html>
Пример выполнения данного HTML-кода
Теги таблиц
| <table> | Определяет таблицу |
| <th> | Определяет заголовки в таблице |
| <tr> | Определяет строку таблицы |
| <td> | Определяет ячейку таблицы |
| <caption> | Определяет заглавие таблицы |
| <colgroup> | Определяет группы столбцов таблицы |
| <col> | Определяет значения атрибутов для одного или нескольких столбцов таблицы |
| <thead> | Определяет заголовок группы строк таблицы |
| <tbody> | Определяет тело группы строк таблицы |
| <tfoot> | Определяет нижний заголовок группы строк таблицы |
Теги внутри таблицы
<html> <body> <table border="1"> <tr> <td> <p>Это параграф </p> <p>Это другой параграф </p> </td> <td>Эта ячейка содержит таблицу: <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr> <td>Эта ячейка содержит список <ul> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> </ul> </td> <td>КОНЕЦ</td> </tr> </table>
</body> </html>
Пример выполнения данного HTML-кода
Вертикальные заголовки:
| Калиткин |
| 202 55 55 |
| 456 77 84 |
Выравнивание содержимого в ячейках таблицы
<html> <body>
<table width="360" border="1"> <tr> <th align="left">Опубликовано курсов</th> <th align="center">2004</th> <th align="center">2005</th> </tr> <tr> <td align="left">Базы данных</td> <td align="center">2</td> <td align="center">3</td> </tr> <tr> <td align="left">Программирование</td> <td align="center">4</td> <td align="center">5</td> </tr> <tr> <td align="left">Интернет-технологии</td> <td align="right">2</td> <td align="right">3</td> </tr> <tr> <th align="left">всего</th> <th align="right">8</th> <th align="right">11</th> </tr> </table>
</body> </html>
Пример выполнения данного HTML-кода
Заглавие таблицы
<html> <body>
<h4> Эта таблица имеет заглавие и толстую рамку: </h4>
<table border="6"> <caption>Заглавие</caption> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table>
</body> </html>
Пример выполнения данного HTML-кода
Заголовки таблицы:
| Калиткин | 202 55 55 | 456 77 84 |
Заголовки в таблице
<html> <body>
<h4>Заголовки таблицы:</h4> <table border="1"> <tr> <th>Имя </th> <th>Телефон </th> <th>Телефон </th> </tr> <tr> <td>Калиткин</td> <td>202 55 55 </td> <td>456 77 84 </td> </tr> </table>
<h4>Вертикальные заголовки:</h4> <table border="1"> <tr> <th>Фамилия:</th> <td>Калиткин</td> </tr> <tr> <th>Телефон :</th> <td>202 55 55</td> </tr> <tr> <th>Телефон:</th> <td>456 77 84</td> </tr> </table>
</body> </html>
Пример выполнения данного HTML-кода
