Перед Вами шестое издание одной из самых лучших и полных руководств по HTML и XHTML. Авторы постарались в своей книге затронуть практически все важнейшие темы и современные тенденции, знание которых необходимо для создания хороших web-сайтов.

Прочитав эту книгу, Вы не просто узнаете, что такое HTML и XHTML, но также научитесь самостоятельно создавать сложные и оригинальные web-страницы, используя каскадные таблицы стилей, фреймы, формы и многое другое.

Помимо этого Вы познакомитесь с особенностями разработки web-страниц для мобильного Интернета.

Для новичков эта книга станет прекрасным учебным пособием, а для профессионалов она станет не только полным и подробным справочником по HTML и XHTML, но и возможно откроет новые горизонты в создании сайтов.

Книжка небольшого размера, рассчитана на быстрое прочтение. Предназначена, пожалуй, для совсем еще новичков в области Web, своеобразный аналог книги "для чайников". Помимо разъяснений азов Интернета, введения в HTML и CSS, в книге можно прочесть про принципы создания веб-узла как такового, планирование будущего сайта, анализ целовой аудитории и так далее. В приложении есть XHTML и CSS справочники.

В целом, если Вы пока еще не особо представляете процесс создания веб сайта и такие слова как HTTP, HTML, URL, CSS, ... не являются чем-то большим, чем просто набор заграничных букв, то эта книга - весьма неплохое решение ликвидировать этот пробел в знаниях.

В электронной книге кратко и просто описывается язык HTML. Прочитав ее, вы научитесь создавать собственные веб-страницы, причем не только простые, но и содержащие сложные таблицы, анимации Flash, коды javascript, апплеты Java, видеофрагменты и звук. Помимо непосредственно HTML, в электронной книге излагаются базовые вопросы таких технологий, как XHTML, CSS, javascript, PHP, иметь представление о которых просто необходимо любому, кто хочет сам создавать HTML-страницы. В последней главе электронной книги приводится обзор как коммерческих, так и бесплатных инструментальных средств, позволяющих разрабатывать веб-сайты без набора кода «вручную».

Рассматриваются современные веб-технологии клиентской стороны: языки разметки HTML 4.01 и XHTML 1.x в сочетании с каскадными листами стилей CSS2, а также язык сценариев JavaScript. По мере прочтения книги складывается целостное представление о технологической цепочке создания веб-сайтов и формируется понимание актуальных тенденций развития веб-технологий. Обилие практических примеров и скриншотов делает знакомство с материалом интересным и увлекательным. Среди примеров имеется ряд вполне завершенных разработок, обладающих самостоятельной практической ценностью: несколько вариантов шаблонов веб-страниц, сверстанных при помощи блоков, небольшой законченный сайт, интерактивное приложение—тест на знание HTML и др. В результате читатели смогут самостоятельно создавать вполне работоспособные веб-сайты информационной направленности.
Для веб-разработчиков.

Книга «XHTML: учебный курс» позволит вам изучить основы языка XHTML. Новая спецификация сравнивается с самой популярной среди пользователей версией языка разметки — HTML 4, описываются инструменты, необходимые для создания документов при помощи нового языка. Вы познакомитесь со способами построения web-страниц, которые позволяют включать в документ изображения, таблицы, фреймы, научитесь применять каскадные стили и расширяемые таблицы стилей, освоите XHTML Basic и модульное конструирование документов.

Вы хотите создать собственный Web-сайт? Или обновить уже имеющийся? Может быть, вы хотите быстро и легко освоить новые технологии и сделать свою работу максимально эффективной? Тогда эта книга для вас.
Автор является членом организационного комитета рабочей группы по разработке Web-стандартов и членом консультативного комитета всемирной организации Web-мастеров.
На основе множества прекрасно подобранных примеров кода HTML, XHTML, CSS вы освоите все, что нужно для практической работы в Web. Никакой теории или занудных нотаций, только освоение техники работы с HTML/CSS и применение уже готовых шаблонов для своих целей. К тому же в книге содержится приложение с описаниями всех элементов языка XHTML и CSS, что делает ее ценным справочником для Web-дизайнера.

Книга одного из наиболее известных "гуру" в области Web-дизайна, Криса Джамса, Эффективный самоучитель по креативному Web-дизайну. HTML, XHTML, CSS, JavaScript, PEP, ASP, ActiveX. Текст, графика, звук и анимация является не просто очередным учебным пособием в этой сложной и многогранной области, изобилующей множеством разнообразных технологий и приемов. Это настоящая "книга рецептов" для тех, кто желает быстро и эффективно получить минимальных набор знаний и навыков, дабы немедленно приступить к разработке Web-сайтов профессионального качества. Удачно подобранные примеры и их решения в реальных ситуациях, простой и точный стиль изложения, большой объем работающего кода и иллюстраций - вот лишь несколько очевидных достоинств книги, выгодно отличающих ее от множества ей подобных. В ней приводятся оптимальные решения более чем 300 задач, возникающих в повседневной практике программирования для Web. Подробно рассматриваются такие вопросы, как создание динамических сайтов с использованием HTML, JavaScript и CSS-стилей, внедрение мультимедиа-элементов в Web-страницы, подготовка мультимедиа-содержимого, создание и использование Java-аплетов и ActiveX-объектов, написание серверных сценариев на РНР и ASP, создание баз данных для Web и многие другие.

Большое внимание уделяется вопросам производительности и готовности Web-сайтов, а также методике повышения безопасности пользователей и защите критически важной информации.

Книга рекомендуется, в первую очередь, тем, кто совершает первые шаги в области разработки для Web, однако принесет несомненную пользу и профессионалам, за плечами которых имеется солидный опыт создания Web-приложений.
Для просмотра книг в DJVU используем DjvuReader или WinDjView

Какие данные можно получить о посетителе сайта при помощи php (браузер, ip, url и другое) или сервере (имя, почта и другое)?

PHP - Код


echo ("REDIRECT_UNIQUE_ID==");echo (getenv (REDIRECT_UNIQUE_ID));echo ("< br >");
echo ("QUERY_STRING==");echo (getenv (QUERY_STRING));echo ("< br >");
echo ("DBENTRY==");echo (getenv (DBENTRY));echo ("< br >");
echo ("REDIRECT_SCRIPT_URI==");echo (getenv (REDIRECT_SCRIPT_URI));echo ("< br >");
echo ("HTTP_ACCEPT_LANGUAGE==");echo (getenv (HTTP_ACCEPT_LANGUAGE));echo ("< br >");
echo ("HTTP_REFERER==");echo (getenv (HTTP_REFERER));echo ("< br >");
echo ("REDIRECT_SCRIPT_URL==");echo (getenv (REDIRECT_SCRIPT_URL));echo ("< br >");
echo ("REMOTE_PORT==");echo (getenv (REMOTE_PORT));echo ("< br >");
echo ("HTTP_ACCEPT==");echo (getenv (HTTP_ACCEPT));echo ("< br >");
echo ("HTTP_USER_AGENT==");echo (getenv (HTTP_USER_AGENT));echo ("< br >");
echo ("GATEWAY_INTERFACE==");echo (getenv (GATEWAY_INTERFACE));echo ("< br >");
echo ("HTTP_HOST==");echo (getenv (HTTP_HOST));echo ("< br >");
echo ("SCRIPT_URI==");echo (getenv (SCRIPT_URI));echo ("< br >");
echo ("SCRIPT_NAME==");echo (getenv (SCRIPT_NAME));echo ("< br >");
echo ("SCRIPT_URL==");echo (getenv (SCRIPT_URL));echo ("< br >");
echo ("SERVER_NAME==");echo (getenv (SERVER_NAME));echo ("< br >");
echo ("REDIRECT_STATUS==");echo (getenv (REDIRECT_STATUS));echo ("< br >");
echo ("UNIQUE_ID==");echo (getenv (UNIQUE_ID));echo ("< br >");
echo ("HTTP_VIA==");echo (getenv (HTTP_VIA));echo ("< br >");
echo ("SCRIPT_FILENAME==");echo (getenv (SCRIPT_FILENAME));echo ("< br >");
echo ("PATH==");echo (getenv (PATH));echo ("< br >");
echo ("STATUS==");echo (getenv (STATUS));echo ("< br >");
echo ("SERVER_ADDR==");echo (getenv (SERVER_ADDR));echo ("< br >");
echo ("SERVER_PROTOCOL==");echo (getenv (SERVER_PROTOCOL));echo ("< br >");
echo ("HTTP_CONNECTION==");echo (getenv (HTTP_CONNECTION));echo ("< br >");
echo ("REDIRECT_DBENTRY==");echo (getenv (REDIRECT_DBENTRY));echo ("< br >");
echo ("SERVER_SIGNATURE==");echo (getenv (SERVER_SIGNATURE));echo ("< br >");
echo ("PATH_TRANSLATED==");echo (getenv (PATH_TRANSLATED));echo ("< br >");
echo ("PATH_INFO==");echo (getenv (PATH_INFO));echo ("< br >");
echo ("SERVER_ADMIN==");echo (getenv (SERVER_ADMIN));echo ("< br >");
echo ("SERVER_SOFTWARE==");echo (getenv (SERVER_SOFTWARE));echo ("< br >");
echo ("REMOTE_ADDR==");echo (getenv (REMOTE_ADDR));echo ("< br >");
echo ("DOCUMENT_ROOT==");echo (getenv (DOCUMENT_ROOT));echo ("< br >");
echo ("REQUEST_URI==");echo (getenv (REQUEST_URI));echo ("< br >");
echo ("REDIRECT_URL==");echo (getenv (REDIRECT_URL));echo ("< br >");
echo ("REQUEST_METHOD==");echo (getenv (REQUEST_METHOD));echo ("< br >");
echo ("SERVER_PORT==");echo (getenv (SERVER_PORT));echo ("< br >");
echo ("HTTP_REFERER==");echo (getenv (HTTP_REFERER));echo ("< br >");


Как расшифровываются переменные окружения в PHP (SERVER, REDIRECT и др) и что они передают?

DOCUMENT_ROOT - Путь к корневой папке сайта. Для локального веб-сервера значение может принимать вид z:/home/htmlbook.ru/www, а в других случаях зависит от операционной системы сервера и используемого программного обеспечения.
GATEWAY_INTERFACE - Версия CGI (Common Gateway Interface, общий шлюзовый интерфейс). Значение обычно равно CGI/1.1.
HTTP_ACCEPT - Типы файлов, которые способен принять браузер. В качестве значения возвращается список поддерживаемых MIME-типов разделенных между собой запятой, например: text/html, application/xhtml+xml.
HTTP_CONNECTION - Тип соединения браузера с веб-сервером. Так, значение keep-alive означает, что браузер поддерживает постоянное соединение с сервером. При этом в течение одного сеанса соединения разрешено делать несколько запросов. Повторного соединения в таком случае уже не происходит.
HTTP_HOST - Доменное имя сайта. Обычно различают имена с префиксом www (www.tradebenefit.ru) и без него (tradebenefit.ru). Переменная вернёт тот адрес сайта, который указан в адресной строке браузера.
HTTP_REFERER - Адрес страницы, с которой пользователь перешел на данный сайт, он еще называется реферер.
HTTP_USER_AGENT - Идентификатор используемого браузера и операционной системы. В качестве значения возвращается строка, содержащая ключевые слова. Например, следующая строка

Код

Mozilla/5.0 (Windows NT 6.1; WOW64; rv:6.0.2) Gecko/20100101 Firefox/6.0.2

говорит, что пользователь использует браузер Firefox 6.0.2 под операционной системой Windows 7.

QUERY_STRING - Запрос, который указан в адресной строке после вопросительного знака (?). Обычно пишется в форме «переменная=значение», где переменные разделяются между собой амперсантом. Рассмотрим пример.

Код

& - амперсант. Разделитель передаваемых в URL переменных
http://site.ru/?id=5&art=34
Будет возвращено значение id=5&art=34

REMOTE_ADDR - IP-адрес посетителя сайта.
REQUEST_METHOD - Метод отправки данных на сервер. По умолчанию применяется метод GET.
REQUEST_URI - Адрес запрашиваемого документа. Отсчёт ведётся от корня сайта, т.е. для полного адреса http://site.ru/1.html вернется значение 1.html.
SERVER_ADDR - IP-адрес компьютера, на котором размещается сайт.
SERVER_ADMIN - Адрес электронной почты администратора сайта.
SERVER_NAME - Имя сервера.
SERVER_PORT - Порт, по которому ожидается получение данных.
SERVER_PROTOCOL - Протокол для получения и отправки данных. Значение обычно равно HTTP/1.1.
SERVER_SOFTWARE - Программное обеспечение установленное на сервере. Для веб-сервера Apache возвращается номер версии (Apache/2.2.4), а также версия PHP (PHP/5.3.3).


Пример вывода переменной окружения в php

Вывод одной переменной делается так:

Код

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SSI</title>
</head>
<body>
<p>Ваш IP-адрес: echo $_SERVER['REMOTE_ADDR']; </p>
</body>
</html>

А для вывода всех данных создаём цикл:

PHP - Код


 print "<!DOCTYPE html>&#092;n<html>&#092;n<head><title></title></head>&#092;n<body>&#092;n";
 print "<table border=1>&#092;n";
 foreach ($_SERVER as $a => $b) print "<tr><td>$a</td><td>$b</td></tr>&#092;n";
 print "</table>&#092;n";
 print "</body>&#092;n</html>&#092;n";


Можно создать массив с набором данных

PHP - Код

 
 $indicesServer = array('PHP_SELF', 
'argv', 
'argc', 
'GATEWAY_INTERFACE', 
'SERVER_ADDR', 
'SERVER_NAME', 
'SERVER_SOFTWARE', 
'SERVER_PROTOCOL', 
'REQUEST_METHOD', 
'REQUEST_TIME', 
'REQUEST_TIME_FLOAT', 
'QUERY_STRING', 
'DOCUMENT_ROOT', 
'HTTP_ACCEPT', 
'HTTP_ACCEPT_CHARSET', 
'HTTP_ACCEPT_ENCODING', 
'HTTP_ACCEPT_LANGUAGE', 
'HTTP_CONNECTION', 
'HTTP_HOST', 
'HTTP_REFERER', 
'HTTP_USER_AGENT', 
'HTTPS', 
'REMOTE_ADDR', 
'REMOTE_HOST', 
'REMOTE_PORT', 
'REMOTE_USER', 
'REDIRECT_REMOTE_USER', 
'SCRIPT_FILENAME', 
'SERVER_ADMIN', 
'SERVER_PORT', 
'SERVER_SIGNATURE', 
'PATH_TRANSLATED', 
'SCRIPT_NAME', 
'REQUEST_URI', 
'PHP_AUTH_DIGEST', 
'PHP_AUTH_USER', 
'PHP_AUTH_PW', 
'AUTH_TYPE', 
'PATH_INFO', 
'ORIG_PATH_INFO') ; 

echo '<table cellpadding="10">' ; 
foreach ($indicesServer as $arg) { 
    if (isset($_SERVER[$arg])) { 
        echo '<tr><td>'.$arg.'</td><td>' . $_SERVER[$arg] . '</td></tr>' ; 
    } 
    else { 
        echo '<tr><td>'.$arg.'</td><td>-</td></tr>' ; 
    } 
} 
echo '</table>' ; 



Спасибо за внимание!

Существует несколько разных способов форматирования элементов веб-страниц. Вообще под форматирование подразумевается придание им каких-либо нужных веб-дизайнеру атрибутов - например размер шрифта и его цвет. Но в этой статье мы не будем рассматривать именно такую работу со стилями - как показала практика их лучше менять средствами каскадных таблиц стилей - CSS. А это уже тема других статей.

---

Вы уже знаете, что для разделения страницы горизонтальной полоской необходимо воспользоваться тегом <hr>. Теперь давайте рассмотрим еще несколько методов изменения внешнего вида элементов нашей веб-страницы

Форматирование текста

В нашей страничке у есть строка ссылок "<p><a href="index.html">Главная страница</a> - <a href="aboutme.html">Обо мне</a></p>".

Попробуем сделать текст ссылок более крупным. Это можно сделать с помощью тега <b>, который отвечает за жирный шрифт (bold.

Поэтому наша строка "<p><a href="index.html">Главная страница</a> - <a href="aboutme.html">Обо мне</a></p>" преобразуется в "<p><a href="index.html"><b>Главная страница</b></a> - <a href="aboutme.html"><b>Обо мне</b></a></p>".

Вот как это будет выглядеть в коде:

Код

<p><a href="index.html"><b>Главная страница</b></a> - <a href="aboutme.html"><b>Обо мне</b></a></p>

Добавление изображений в веб-страницу

С помощью добавления изображений на страниц можно значительно увеличить ее привлекательность и добавить информативности. Пусть у вас есть изображение test.jpg, которое лежит в папке images. Тогда для его отображения на странице необходимо воспользоваться вот таким кодом:

Код

<p><img src="images/test.jpg" width="20" height="20" title="Some image" alt="Some image" /><p/>

У тега, который отвечает за вывод изображения, есть несколько параметров:

* Расположение изображения (директория).
* Ширина (width) и высота (height).
* Заголовок (title).
* Альтернативный текст (alt).

Параметры ширина и высота должны соответствовать реальным размерам изображения. В противном случае они уменьшат или увеличат его (естественно, что исходное изображение при этом останется прежних размеров).

Параметр заголовок используется для краткого описания картинки. Эта надпись появляется при наведении курсором мышки поверх картинки.

Последним, но не менее важным идет тег alt. Он очень важен для соответствия кода веб-страницы стандартам консорциума W3C. Этот тег отображается на месте изображения в том случае, если посетитель использует текстовый браузер или у него отключена функция отображения графики.

Такие поисковые машины, как Google и Яндекс (да и все остальные) могут использовать заголовки изображений для их индексации. В дальнейшем эта информация используется для поиска картинок по определенным ключевым словам.

Окончательный результат:

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>Моя домашняя страница</title>
</head>
<body>
<h1>My Cool Site!</h1>
<hr /> <p><a href="index.html"><b>Главная страница</b></a> - <a href="aboutme.html"><b>Обо мне</b></a></p>
<hr />
<p>Привет всем! Это моя первая веб-страница. Надеюсь, она вам понравилась :)</p>
<p><img src="images/test.jpg" width="20" height="20" title="Some image" alt="Some image" /><p/>
</body>
</html>