- •4. Модель стандартов Web - html, css и JavaScript
- •Введение
- •Зачем разделять?
- •Разметка, основа каждой страницы
- •Что такое xhtml?
- •Валидация, что это такое?
- •Css - давайте добавим немного стиля
- •JavaScript - добавление поведения на страницы Web
- •Пример страницы
- •Index.Html
- •Styles.Css
- •Заключение
- •Контрольные вопросы
JavaScript - добавление поведения на страницы Web
Наконец, JavaScript является языком сценариев, который используется для добавления поведения на страницы Web — его можно использовать для проверки данных, которые вводятся в форму (имеют ли они правильный формат или нет), предоставления функций буксировки, изменения стиля на лету, анимации элементов страницы, таких как меню, обработки функций кнопок, и множества других вещей. Большая часть современного кода JavaScript работает, находя элемент HTML, а затем делая с ним что-то, также как CSS, но способ действия, синтаксис и т.д. совершенно другие.
Язык JavaScript является более сложной и широкой темой, чем HTML и CSS, поэтому, чтобы сохранить простоту и избежать путаницы на данном этапе, он не будет рассматриваться в следующем примере. Фактически в этом курсе JavaScript будет рассмотрен только значительно позже.
Пример страницы
Здесь не рассматривается множество деталей, но в конечном счете в ходе изучения этого курса по Web-дизайну будет рассмотрено все. Пока показан пример реальной страницы, чтобы дать представление, с чем придется столкнуться в остальных лекциях.
Показанный ниже пример является эталонной страницей, которую можно было бы использовать для создания ссылок в конце, скажем, психологического исследования о групповой динамике рабочей группы разработчиков Web, или отчета о работе над применением широкополосного доступа Интернет в США. Обратите внимание, что если вы являетесь приверженцем строгих академических требований, то этот пример использует форматирование APA.
Index.Html
<!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 импортируют файл CSS на страницу - стили, содержащиеся в этом файле будут применяться к различным элементам на странице. Содержимое этого файла CSS, который управляет всем форматированием страницы, будет показано в следующем разделе.
Для каждого из различных типов ссылок созданы различные классы. Это позволяет применить различные стили оформления для каждого типа ссылок — например, в данном примере справа от каждой ссылки помещен специальный цветовой индикатор, чтобы облегчить просмотр списка.
Теперь давайте посмотрим на файл CSS, который оформляет этот HTML.