В предыдущей лекции мы слегка затронули базовые строительные блоки
Это обычно первый вопрос, который задают о
Как можно было бы догадаться, элементы определяют тип реального контента, в то время как атрибуты определяют дополнительную информацию об этих элементах, такую как ID для идентификации элемента, или некоторое место, на которое указывает ссылка. Необходимо помнить, что разметка предполагается насколько возможно семантической, т.е. предполагается, что она описывает функцию контента как можно более точно. Рисунок 4.1 показывает структуру типичного элемента (X)
(рис 4.1) Структура элемента (X)HTMLАнатомия элемента HTML: Символ "меньше", символ "больше" и текст между ними называется начальным тегом, так как он начинает элемент. Текстовая строка состоящая из последовательности символов, за которой следует знак равенства, за которым следует другая последовательность символов, заключенная в символы кавычек, называется атрибутом. Элементы
Помня об этом, посмотрим в чем заключается различие между
Буква "X" в XHTML означает "расширяемый" (простите, если
| HTML | XHTML |
|---|---|
Элементы и атрибуты не различают регистр символов, <h1> эквивалентно <H1>. |
Элементы и атрибуты различают регистр символов; они используют символы нижнего регистра. |
Некоторым элементам не требуется закрывающий тег (например, параграфы, <p> ), в то время как другие (называемые "пустыми элементами") запрещают закрывающий тег (например, изображения, <img> ). |
Все элементы должны быть явно закрыты (например, ), и помещать пробел перед косой чертой. Необходимо использовать длинную форму (с раздельными начальным и конечным тегами) для любого элемента, не определенного как пустой — даже если он не имеет никакого контента. |
| Некоторые значения атрибутов могут записываться без кавычек. | Значения атрибутов должны быть заключены в кавычки. |
Для некоторых атрибутов можно использовать сокращения (например, <option selected> ). |
Для всех атрибутов должна использоваться полная форма атрибута (например, <option selected="selected"> ) |
| Серверы должны доставлять клиенту |
XHTML должен использовать тип носителя application/xhtml+xml, но может использовать application/xml, text/xml или text/html. Если используется text/html, то необходимо следовать рекомендациям совместимости |
Пока мы рекомендуем не беспокоиться слишком много о записи
Так как
Дополнительную информацию о валидации можно найти в лекции 24. Дополнительная информация о типах документов находится в лекции 14.
Каскадные таблицы стилей (
p {
line-height: 2em;
color: green;
}
Теперь, любой контент, заключенный в теги <p>, будет записываться через две строки зеленым цветом.id для уникальной идентификации его на странице (каждый ID может использоваться на странице только однажды) - например, id="navigation_menu". Это позволяет иметь более детальный контроль форматирования страницы, например, если вы хотите, чтобы только определенный параграф текста выводился через два интервала и зеленым цветом, задайте для него ID:<p id="highlight">Контент параграфа </p>И затем примените к нему правило
#highlight {
line-height: 2em;
color: green;
}
Это позволяет применить правило id, заданным как highlight (символ # является просто соглашением <p class="highlight">Контент параграфа </p> <p class="highlight">Контент второго параграфа </p>И затем применим к ним правило
.highlight {
line-height: 2em;
color: green;
}
highlight является в данном случае классом, а не ID - точка в начале является просто соглашением Пример ниже позволит лучше понять, как
Наконец,
Язык
Здесь не рассматривается множество деталей, но в конечном счете в ходе изучения этого курса по
Показанный ниже пример является эталонной страницей, которую можно было бы использовать для создания ссылок в конце, скажем, психологического исследования о групповой динамике рабочей группы разработчиков
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>References</title>
<style type="text/css">
@import url("styles.css");
</style>
</head>
<body>
<div id="bggraphic"></div>
<div id="header">
<h1>References</h1>
</div>
<div id="references">
<cite class="article">Adams, J. R. (2008). The Benefits of Valid Markup:
A Post-Modernistic Approach to Developing Web Sites.
<em>The Journal of Awesome Web Standards, 15:7,</em> 57-62.</cite>
<cite class="book">Baker, S. (2006). <em>Validate Your Pages.... Or Else!.
</em> Detroit, MI: Are you out of your mind publishers.</cite>
<cite class="article">Lane, J. C. (2007). Dude, HTML 4, that's like so 2000.
<em>The Journal that Publishes Genius, 1:2, </em> 12-34.</cite>
<cite class="website">Smith, J. Q. (2005). <em>Web Standards and You.
</em> Retrieved May 3, 2007 from Web standards and you.</cite>
</div>
<div id="footer">
<p>The content of this page is copyright © 2007
<a href="mailto:jonathanlane@gmail.com">J. Lane</a></p>
</div>
</body>
</html>
Этот файл не будет разбираться построчно, так как вы увидите много примеров в будущих лекциях, однако, несколько основных моментов, которые необходимо отметить, следующие:
Строка 1 представляет так называемое doctype. В данном случае страница имеет тип XHTML 1.0 Transitional. Тип документа определяет множество правил, которым следует разметка, и согласно которым будет проверяться. Более подробно о типах документов смотрите в лекции 14.
Строки с 5 по 7 импортируют файл
Для каждого из различных типов ссылок созданы различные классы. Это позволяет применить различные стили оформления для каждого типа ссылок — например, в данном примере справа от каждой ссылки помещен специальный цветовой индикатор, чтобы облегчить просмотр списка.
Теперь давайте посмотрим на файл
body {background: #fff url('images/gradbg.jpg') top left repeat-x; color: #000; margin: 0;
padding:0; border: 0; font-family: Verdana, Arial, sans-serif; font-size: 1em;}
div {width: 800px; margin: 0 auto;}
#bggraphic {background: url('images/pen.png') top left no-repeat; height: 278px;
width: 362px; position: absolute; left: 50%; z-index: -100;}
h1 {text-align: center; text-transform: uppercase; font-size: 1.5em; margin-bottom: 30px;
background: url('images/headbg.png') top left repeat; padding: 10px 0;}
#references cite {margin: 1em 0 0 3em; text-indent: -3em; display: block;
font-style: normal; padding-right: 3px;}
.website {border-right: 5px solid blue;}
.book {border-right: 5px solid red;}
.article {border-right: 5px solid green;}
#footer {font-size: 0.5em; border-top: 1px solid #000; margin-top: 20px;}
#footer a {color: #000; text-decoration: none;}
#footer a:hover{text-decoration: underline;}
Эта страница специально несколько перегружена стилистическим оформлением, добавляющим несколько эффектов для фона, чтобы показать некоторые возможности, которые можно реализовать с помощью
Строка 1 задает для документа некоторые значения по умолчанию, такие как цвет текста и фона, толщину границы вокруг текста и т.д. Некоторые люди не особенно беспокоятся о том, чтобы явно задавать такие значения по умолчанию, а большинство современных браузеров применяют свои собственные значения по умолчанию, но это неплохая идея, так как предоставляет дополнительный контроль за тем, как будет выглядеть
На следующей строке задано, что страница будет иметь ширину 800px, хотя здесь можно было бы определить процент, чтобы страница расширялась/сжималась на основе размера окна браузера. Настройки полей, использованные здесь, будут гарантировать, что контент страницы остается центрированным в окне.
Затем обратим наше внимание на фоновые изображения, использованные на странице (они применяются с помощью объявлений решение этой проблемы для IE6, которое исправляет также некоторые проблемы поддержки PNG для фона заголовка страницы. Оно создает для заголовка небольшой
дополнительный контраст, аккуратно выделяя его.
Пример будет выглядеть как показано на рисунке 4.2.
(рис 4.2) Законченный пример с примененными стилевыми оформлениями
Нет ничего особенно таинственного в отношении XHTML,
Кроме получения удовлетворения от хорошо сделанной работы, разработка в соответствии со
copyright ) внизу страницы.Джонатан Лейн является Президентом компании Industry Interactive (http://industryinteractive.net/), занимающейся разработкой приложений
Он поддерживает блог по адресу http://www.flyingtroll.com/, и в настоящее время занимается разработкой Mailmanagr (http://www.mailmanagr.com/), интерфейса e-mail для приложения по управлению проектами Basecamp.
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.