П. Ташков

Веб-мастеринг на 100 %: HTML, CSS, JavaScript, PHP, CMS, AJAX, раскрутка

Технический редактор Ю. Кравцова

Литературный редактор Ю. Кравцова

Художники Л. Адуевская, К. Подольцева-Шабович

Корректоры Н. Терех, Ю. Цеханович

Верстка О. Махлина, К. Подольцева-Шабович

П. Ташков

Веб-мастеринг на 100 %: HTML, CSS, JavaScript, PHP, CMS, AJAX, раскрутка. — СПб.: Питер, 2014.

ISBN 978-5-49807-826-7

© ООО Издательство "Питер", 2014

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

Введение

Эта книга написана для тех, кто хочет создать собственный сайт в Интернете, отвечающий всем требованиям к профессиональному веб-порталу. Такой сайт должен быть красивым, удобным в использовании и навигации, свободным от всякого рода проблем, мешающих его просмотру. К тому же он должен попадать в начало списка с результатами поиска с помощью крупнейших поисковиков, то есть сайт должен быть посещаемым. Использования существующих программ веб-дизайна может оказаться недостаточно: тонкая настройка содержимого веб-страниц и их внутренней организации может быть выполнена только путем самостоятельного написания кода HTML-страницы и встроенных в них сценариев. Для этого вам нужно изучить язык гипертекстовой разметки HTML, научиться создавать сценарии на языках JavaScript и PHP, уметь работать с каскадными таблицами стилей CSS, а также владеть принципами раскрутки сайтов. Обо всем этом вы узнаете из книги, которую сейчас держите в руках. С ее помощью вы научитесь создавать эффективно функционирующие, красиво оформленные, рейтинговые сайты профессионального уровня.

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

В главе 2 излагается техника построения динамических веб-страниц с помощью внедрения в код HTML сценариев JavaScript, которые привносят интерактивность в содержимое сайта, необходимую для его полноценного функционирования.

В главе 3 вы научитесь работать с мощными средствами создания веб-приложений — с сервером Apache, языком Perl и базами данных MySQL. Вы освоите установку этих средств на компьютер, запуск сервера Apache, подключение к нему базы данных MySQL и технику обращения из сценариев Perl к базе MySQL с помощью Apache и запросов на языке SQL. Таким образом, вы сможете создавать веб-порталы, предоставляющие своим посетителям различные ресурсы по запросам к базе данных. Эти веб-порталы удобны тем, что позволяют пользователям быстро находить необходимую информацию.

В главе 4 описывается работа с «движками» сайтов — специальными программами по управлению содержимым сайта (системами CMS). Такие системы стали весьма популярным средством работы с сайтами, содержимое которых требуется непрерывно обновлять и редактировать (сайты новостей, интернет-магазины). Вы освоите работу с наиболее популярными программами CMS — Drupal и Joomla!, научитесь устанавливать их на компьютер, настраивать их работу и администрировать.

В главе 5 описывается язык PHP, ставший основным средством создания веб-приложений коммерческого плана. Рассматриваются основные конструкции языка: переменные, циклы, сравнения, присвоения, а также использование функций.

В главе 6 используются сведения, приведенные в главе 5, для построения примеров веб-приложений, реализующих работу с формами, хранение информации в базах данных MySQL, отправку почты и сохранение файлов Cookie.

В главе 7 описывается технология AJAX, позволяющая организовывать асинхронные вызовы серверного сценария для оптимизации загрузки данных на клиентское приложение и улучшения качества взаимодействия пользователя с различными сервисами Интернета. AJAX широко используется в современных веб-приложениях, реализующих функции интернет-магазинов, просмотр графических данных большого объема, поиск информации в Интернете. Рассмотрен общий принцип организации асинхронных запросов, применение AJAX совместно со сценариями PHP, работы с базами данных MySQL.

В главе 8 описываются методы поиска ошибок на веб-сайтах. Наверное, многие пользователи посещали сайты со ссылками, которые никуда не ведут, с пустыми рамками рисунков и неработающими элементами навигации. Такие ошибки могут просто свести на нет эффективность работы сайта. Однако найти их не всегда легко. Для решения данной задачи были разработаны специальные программы диагностики и поиска ошибок, которые и рассматриваются в этой главе.

В главе 9 описываются методы размещения сайтов на различных ресурсах Интернета, которых сейчас предлагается великое множество. Выбору оптимального варианта и методов работы с предоставляемыми средствами выгрузки и управления сайтом как раз и посвящается эта глава.

В главе 10 рассматриваются принципы раскрутки сайта, без знания которой вы не сможете получить никакой отдачи от разработанного веб-сайта. Сейчас в Интернете размещаются сотни миллионов сайтов, и занять высокое место в рейтингах поисковиков и каталогов очень непросто. Для достижения этой цели существуют специальные методики раскрутки, которые и рассматриваются в этой главе.

Освоив технику разработки веб-cайтов, вы станете настоящим веб-мастером, которому по плечу любые задачи, решаемые специалистами IT-фирмы при разработке веб-сайтов любого назначения.

Соглашения, принятые в книге

Чтобы ваша работа с книгой была более эффективной, в ней используются специальные приемы выделения важных фрагментов текста.

Шрифты

Для выделения важных фрагментов текста применяются следующие шрифты:

•курсивомвыделены определения и термины;

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

• шрифтом для команд  выделены имена файлов, команды и другой текст, который нужно вводить с клавиатуры.

Нумерованные и маркированные списки

Чтобы описать несколько однотипных объектов, дать советы для решения какой­-нибудь проблемы или предложить варианты выполнения определенного действия, в книге применяются маркированные списки. Из рекомендаций, оформленных маркированным списком, вы можете выбрать одну или несколько в произвольном порядке.

Нумерованным списком оформлены пошаговые инструкции для выполнения каких­либо действий. Для достижения результата нужно последовательно проделать описанные шаги, не пропуская их и не переставляя местами.

Врезки

Для особого выделения одного или нескольких абзацев текста в книге используются врезки, которые имеют следующее назначение.

ПРИМЕЧАНИЕ

Такие врезки содержат уточнения, дополнения или комментарии, которые относятся к излагаемому материалу.

ВНИМАНИЕ

В данных врезках приводится информация, на которую следует обратить особое внимание ввиду ее важности. Наиболее часто подобные врезки применяются для предупреждения о возможных ошибочных действиях пользователя.

СОВЕТ

В этих врезках описаны эффективные приемы выполнения практических дей­ствий.

Листинги

В листингах приводятся коды программ, необходимые для выполнения некоторых действий при создании сайтов в Интернете.

От главы коллектива авторов

Высказать замечания и пожелания, задать вопросы по этой книге вы можете по адресу AlexanderZhadaev@sigmaplus.mcdir.ru или посетив нашу домашнюю страничку www.sigmaplus.mcdir.ru (там вы найдете также дополнительные материалы по книге, сможете принять участие в форуме или пообщаться в чате).

Александр Жадаев

От издательства

Ваши замечания, предложения и вопросы отправляйте по адресу электронной почты dgurski@minsk.piter.com (издательство «Питер», компьютерная редакция).

Мы будем рады узнать ваше мнение!

Все приведенные в книге листинги (коды программ) можно загрузить с сайта издательства «Питер» по адресу http://www.piter.com/download.

На сайте издательства http://www.piter.com вы найдете подробную информацию о наших книгах.

Глава 1. HTML и CSS

Структура языка HTML

Структура HTML-документа

Ввод и оформление текста

Ссылки

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

Работа с таблицами

Изображения

Формы

Общие принципы CSS

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

Оформление документа CSS

Резюме

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

Структура языка HTML

Для создания страниц в Интернете служит язык гипертекстовой разметки (HTML — HiperText Markup Language). Каждый сайт, конечно, индивидуален, однако существуют общие правила построения HTML-страниц, следовать которым нужно обязательно.

Существуют общие правила записи HTML-документов и общие понятия, используемые при создании сайтов. Вначале рассмотрим понятия.

Тег

Основой языка HTML является тег. Этот элемент несет в себе определенную информацию, может описывать документ в общем или способ форматирования текста. Все содержимое веб-страниц задается и редактируется с помощью тегов.

Тег помещается в угловые скобки <ТЕГ>. Иногда необходимо задать парный закрывающий тег, который пишется так: </ТЕГ>. В некоторых случаях закрывающий тег вообще не требуется, а иногда его можно пропустить. Однако для корректной обработки документа рекомендуется всегда использовать закрывающий тег. Информация, заключенная между открывающимся и закрывающимся тегом, называется его контейнером.

Кратко функции тегов можно описать так: открывающий тег включает форматирование, а закрывающий — выключает его.

Примером использования закрывающегося тега является тег <P>, который обозначает абзац: <P>Текст абзаца</P>, при этом закрывающий тег не является обязательным, хотя желателен. Закрывающего тега не требует тег <IMG>, который добавляет картинку на сайт.

Тег нужен для того, чтобы сообщить браузеру, какой элемент должен быть на месте тега или какого типа информация заключена внутри тега. Кроме того, теги показывают, как следует отображать эту информацию.

Атрибут

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

Например, в одном абзаце нужно выровнять текст по левому краю, а в другом — по правому. Чтобы задать выравнивание абзаца, используется атрибут ALIGN тега <P>.

<P align="left">Выравнивание по левому краю</P>

<P align="right">Выравнивание по правому краю</P>

Значение атрибута задается после знака равенства, как правило, в кавычках. Значения атрибутов различаются в зависимости от тега.

Теги и их атрибуты являются основой языка HTML, но для правильного отображения страницы в браузерах важно также по строгим правилам правильно создать структуру документа. Существуют теги, без которых HTML-документ не может обойтись, потому что именно они определяют его структуру.

Структура HTML-документа

Для создания структуры документа и хранения служебной информации о нем предусмотрено много тегов. Рассмотрим их по порядку.

Тег <!DOCTYPE>

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

В листинге 1.1 приводится пример заполнения информацией тега <!DOCTYPE>. Для большинства сайтов текст внутри этого тега будет таким.

Листинг 1.1. Описание документа в теге <DOCTYPE>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Эта строчка дает браузеру общую информацию об HTML-документе. Вряд ли вам придется заполнять эту строку иначе, однако рассмотрим ее по частям и выясним, какую информацию о документе несут данные из тега <!DOCTYPE>.

• html — показывает, что для создания документа используется язык HTML.

• PUBLIC — указывает на то, что при создании документа использовалась общепринятая версия HTML.

• "-//W3C//DTD XHTML 1.0 Transitional//EN" — отражает, какая версия языка используется, а также какие элементы и атрибуты можно применять.

• "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" — адрес URL-документа, в котором описываются элементы и атрибуты, используемые в соответствии с версией языка. В этом теге содержится общая служебная информация о странице. Он не влияет на то, как страница будет выглядеть на экране, более того, без него страница не сможе