Особенности разработки сайта с применением языка разметки HTML4 и CSS

Особенности разработки сайта с применением языка разметки HTML4 и CSS.

Статьи по теме
Искать по теме

Общие понятия разработки сайта

Интернет – глобальная компьютерная сеть, которая связывает между собой как пользователей компьютерных сетей, так и пользователей ПК. В последнее время, получив бурное развитие в России, Интернет стал средством корпоративного общения. При помощи Интернета происходит поиск информации, рассылаются пресс-релизы, устраиваются конференции, выставки, интервью. Обычный пользователь может при помощи Интернета не только заказать себе необходимый товар или узнать погоду, но и познакомиться с интересными людьми.

Веб-сайт, или просто сайт (англ. website, от web – паутина, site – "место") – это одна или совокупность веб-страниц, доступных в Интернете через протоколы HTTP/HTTPS; Веб-сайт – это место в интернете, которое определяется своим адресом (URL), имеет своего владельца и состоит из веб-страниц, которые воспринимаются как единое целое. Все общедоступные веб-сайты называются Всемирной паутиной. Обычно страницы веб-сайта объединены общим корневым адресом, тематикой, логической структурой, оформлением и авторством. Страницы веб-сайтов – это файлы с текстом, размеченным на языке HTML или XHTML. Эти файлы, будучи загруженными посетителем на его компьютер, обрабатываются программой-обозревателем (браузером) и выводятся на средство отображения пользователя (монитор, экран КПК). Язык HTML/XHTML позволяет форматировать текст, различать в нем функциональные элементы, создавать гипертекстовые ссылки и вставлять в отображаемую страницу изображения, звукозаписи и другие мультимедийные элементы. Отображение страницы можно изменить добавлением в нее таблицы стилей на языке CSS или сценариев на языке JavaScript.

Стандарт W3C (World Wide Web Consortium, W3C (Консорциум Всемирной паутины)) – организация, разрабатывающая и внедряющая технологические принципы и стандарты для Всемирной паутины. W3C-стандарт – это общий набор "правил" для браузеров с указанием, как использовать и показывать код страницы.

Эти стандарты основаны на следующих утверждениях:

- Чистый код, соответствующий стандартам W3C, XHTML. Важно удостовериться в том, что код является чистым кодом, соответствующим стандартам W3C. Это легко проверить с помощью сайта validator.w3.org Проверьте, что вы определили правильный DOCTYPE.

- Семантически верный код. Удостоверьтесь, что XHTML описывает только содержимое, но не внешний вид содержимого. Это означает использование тегов h1/h2 и др. и использование таблиц для представления табличных данных, но не для представления всей страницы.

- CSS (Cascading Style Sheets, каскадные таблицы стилей) – это набор параметров форматирования, который применяется к элементам веб-страницы для управления их видом и положением. Стили являются удобным, практичным и эффективным инструментом при верстке веб-страниц и оформления текста, ссылок, изображений и других элементов.

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

Наиболее общая классификация сайтов:

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

- Сайты некоммерческих организаций. Разнообразные некоммерческие организации также стремятся заявить о своём существовании в сети интернет. Многообразие подобных сайтов огромно. Тут и сайты какого-нибудь регионального отделения пенсионного фонда, и сайты политических партий и общественных движений, и сайты научно-исследовательских институтов. Весьма популярны в интернете новостные ресурсы, ресурсы, представляющие онлайновые версии различных СМИ. Для двух особых категорий сайтов некоммерческих организаций, а именно сайтов государственных и образовательных учреждений в интернете даже выделены специальные доменные зоны:.gov и.edu.

Также следует разделить сайты по способу их использования и направленности:

- Личные сайты. Таким сайтом владеет и осуществляет его поддержку один человек. Такие сайты сейчас составляют большинство. Спектр этих сайтов весьма широк – от маленьких домашних страничек (home page), где есть немного информации о владельце и его увлечениях до очень известных и популярных ресурсов.

- Сайт-визитка используется предприятиями, организациями и частными лицами, обычно состоит из нескольких страниц и имеет уникальный, но простой и функциональный дизайн; идеально подходит для компаний, которые хотят разместить информацию о себе и своих услугах в Интернете; основные разделы сайта: "О компании", "Продукция или услуги", "Прайс-листы", "Контактная информация".

- Корпоративные сайты делятся на виды:

- Корпоративный информационный web-сайт – необходим для автоматизации внутреннего документооборота, учёта показателей компании, управления персоналом, может быть оснащён функциями обмена информацией между удалёнными филиалами; корпоративный сайт позитивно влияет на репутацию и имидж компании; дизайн должен соответствовать фирменному стилю компании; чаще всего, включает "администраторскую часть" для создания и изменения контента.

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

- Интернет-магазин – интерактивный веб-сайт рекламирующий товар или услугу, принимающий заказы на покупку, предлагающий пользователю выбор варианта расчета, выписывающий счет на оплату, служащий одновременно подтверждением заказа; при этом администратор магазина обязан:

- организовать доставку товара;

- проконтролировать расчеты с покупателем за поставку.

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

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

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

Определение целей и задач создаваемого сайта

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

Графика на web-сайтах

В практике web-дизайна используются форматы jpg и gif. Реже используются форматы swf и png. В данном проекте использовались такие форматы как.jpg,.png. Такое решение было принято, оценив плюсы и минусы форматов. Предоставленных ниже.

- Характеристика формата JPG

На самом деле не существует формата JPG, как такового. В большинстве случаев это файлы форматов JFIF и JPTG-TIFF сжатые по JPEG технологиям сжатия. Однако для практики это не имеет особого значения, поэтому будем придерживаться общепринятой терминологии.

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

Алгоритм сжатия JPEG достаточно сложен, поэтому работает медленнее большинства других. Кроме того, к этому типу сжатия относится несколько близких по своим свойствам JPEG технологий.

- Характеристика формата GIF

Формат GIF был разработан в 1987 году компьютерной информационной службой CompuServe. Сейчас этот формат является наиболее используемым форматом в сети Интернет. GIF использует мощный 12-разрядный алгоритм сжатия LZW, он предназначается для работы на различных платформах и, кроме того, данный формат позволяет во время получения данных сразу же выводить их на экран.

Формат GIF предназначен в основном для "рисованных" изображений: чертежей, графиков и т. д. В нём используется так называемая индексированная цветовая палитра. Максимальное количество цветов в ней – 256.

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

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

Другое достоинство GIF-рисунков – возможность загружать их чересстрочным методом. Если графический файл имеет большой размер и грузится из Интернета долго, пользователь увидит сначала как бы нечеткие контуры будущего рисунка, а по мере загрузки изображение будет постепенно "проявляться", что достигается очень простым приемом – изменением порядка загрузки строк изображения. Для этого необходимо при сохранении GIF-файла не забыть включить режим Interlaced (Чересстрочный).

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

GIF стал одним из наиболее используемых графических форматов, но технический прогресс движется и поэтому 8 битов на пиксель оказывается слишком мало. И еще один немаловажный фактор, то, что алгоритм сжатия LZW формата GIF запатентован. Владельцем патента с 1994 года является фирма Unisys, и она начала брать плату с разработчиков, использующих формат GIF. Поэтому был создан формат PNG ("пнг"). В отличие от GIF формата PNG поддерживает до 64 битов на пиксель, и на него не накладываются никакие патенты.

- Характеристика формата PNG

Формат PNG самый "младший" среди популярных форматов web-графики. Поэтому он пока не достаточно широко распространен. Но его возможности позволяют предположить, что в будущем производители программного обеспечения и разработчики web-страниц уделят ему больше внимания.

В отличие от GIF, формат PNG является свободно распространяемым для использования. Это значит, что его поддержку в программном обеспечении можно вводить без оплаты каких-либо лицензий. Для сжатия изображения в формате PNG используется алгоритм LZ78 – предшественник LZW, используемого в формате GIF.К недостаткам PNG по сравнению с GIF можно отнести невозможность сохранения в одном файле нескольких изображений и создания анимации.

Глубина цвета может быть любой, вплоть до 48 бит (RGB, для сравнения, – 24), поддерживается плавно переходящая прозрачность. В файл формата PNG записывается информация о гамма-коррекции. Гамма представляет собой некое число, характеризующее зависимость яркости свечения экрана вашего монитора от напряжения на электродах кинескопа. Это число, считанное из файла, позволяет ввести поправку яркости при отображении. Таким образом, эта особенность помогает реализации основной идеи WWW – одинакового отображения информации независимо от аппаратуры пользователя.

Сетевая графика представлена преимущественно двумя форматами файлов – GIF (Graphics Interchange Format) и JPG (Joint Photographics Experts Group). Оба этих формата являются компрессионными, то есть данные в них уже находятся в сжатом виде.

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

Кодировки страниц

К сожалению, web-дизайн еще не достиг такой ступени развития, когда технические средства реализации идей отойдут на второй план. На настоящий момент, сайты должны отвечать духу и букве соответствующих стандартов и спецификаций. Стандарты появились в результате распространения web-дизайна и расширения средств и методов их реализации – например на сегодняшний день существует несколько основных браузеров – в России это Internet Explorer, Opera, Mozilla Firefox и Google Chrome – и эти браузеры получили распространение только в последние годы. Существуют также и другие, каждый со своими особенностями.

Прежде всего, говоря о стандартах web-дизайна, стоит поговорить о кодировании текста в компьютере. В общем случае кодировка или кодовая таблица, – это однозначное соответствие между подмножеством целых чисел (как правило, идущих подряд) и некоторым набором символов. Символ может быть буквой (а может и не быть), может соответствовать звуку речи (а может и не соответствовать), а может быть представлен графическим знаком (но может обходиться и без какого бы то ни было визуального представления). Язык, используемый по умолчанию в приложениях, запущенных на компьютере, указывается при установке операционной системы. Язык по умолчанию определяет раскладку клавиатуры, кодовую страницу системы, вид кодировки HTML, используемый установленными на компьютере приложениями. Кодовые страницы и виды кодировок могут применяться к различным языкам.

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

2. Средства создания сайта

Язык гипертекстовой разметки HTML

HTML – стандартный язык разметки документов во Всемирной паутине.

Большинство веб-страниц содержат описание разметки на языке HTML. Язык

HTML интерпретируется браузерами и отображается в виде документа в удобной для пользователя форме.

Язык HTML является приложением SGML (стандартного обобщѐнного языка разметки) и соответствует международному стандарту ISO 8879.

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

Во всемирной паутине HTML-страницы, как правило, передаются браузерам от сервера по протоколам HTTP или HTTPS, в виде простого текста или с использо-

ванием сжатия.

Язык HTML был разработан британским учѐным Тимом Бернерсом-Ли при-

близительно в 1986–1991 годах в стенах Европейского Центра ядерных исследова-

ний в Женеве(Швейцария). HTML создавался как язык для обмена научной и техни-

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

сти SGML путѐм определения небольшого набора структурных и семантических элементов – дескрипторов. Дескрипторы также часто называют "тегами".

С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже.

Например, тег <TABLE> предназначен для создания в документах таблиц, но часто используется и для оформления размещения элементов на странице. С течени-

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

Текстовые документы, содержащие разметку на языке HTML (такие докумен-

ты традиционно имеют расширение.html или.htm), обрабатываются специальными приложениями, которые отображают документ в его форматированном виде. Такие приложения, называемые "браузерами" или "интернет-обозревателями", обычно предоставляют пользователю удобный интерфейс для запроса веб-страниц, их про-

смотра (и вывода на иные внешние устройства) и, при необходимости, отправки введѐнных пользователем данных на сервер. Наиболее популярными на сегодняш-

ний день браузерами являются Google Chrome, Mozilla Firefox, Opera, Internet

Explorer и Safari.

HTML – теговый язык разметки документов. Любой документ на языке

HTML представляет собой набор элементов, причѐм начало и конец каждого эле-

мента обозначается специальными пометками – тегами. Элементы могут быть пу-

стыми, то есть не содержащими никакого текста и других данных (например, тег пе-

ревода строки <br>). В этом случае обычно не указывается закрывающий тег. Кроме

того, элементы могут иметь атрибуты, определяющие какие-либо их свойства

(например, размер шрифта для элемента font). Атрибуты указываются в открываю-

щем теге.

Регистр, в котором набрано имя элемента и имена атрибутов, в HTML значе-

ния не имеет (в отличие от XHTML). Элементы могут быть вложенными.

Кроме элементов, в HTML-документах есть и сущности –"специальные сим-

волы". Сущности начинаются с символа амперсанда и имеют вид: "&имя"; или

&#NNNN;, где NNNN – код символа в Юникоде в десятичной системе счисления.

Каждый HTML-документ, отвечающий спецификации HTML какой-либо вер-

сии, должен начинаться со строки объявления версии HTML <!DOCTYPE…>. Эле-

мент <!DOCTYPE> предназначен для указания типа текущего документа – DTD

(document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML

существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на

HTML, но различающийся с ним по синтаксису. Чтобы браузер "не путался" и по-

нимал, согласно какому стандарту отображать веб-страницу и необходимо в первой

строке кода задавать <!DOCTYPE>.

Существует несколько видов <!DOCTYPE>, они различаются в зависимости

от версии языка, на которого ориентированы.

У применяемого в разработке текущего проекта HTML 4.01 существуют сле-

дующие <!DOCTYPE>:

- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd"> - Строгий синтаксис HTML.

- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> – Переходный синтаксис HTML.

- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> – В HTML-документе применяются фреймы.

XHTML

XHTML (англ. Extensible Hypertext Markup Language – Расширяемый язык разметки гипертекста) – язык разметки веб-страниц, по возможностям сопоставимый с HTML, созданный на базе XML. Как и HTML, XHTML соответствует спецификации SGML, поскольку XML является ее подмножеством. Вариант XHTML 1.1 одобрен в качестве Рекомендации Консорциума Всемирной паутины (W3C) 31 мая 2001 года.

Стандарт XHTML построен не как самодостаточное описание языка, а как перечень различий между HTML 4.01 и XHTML.

Валидным (т. е. отвечающим всем правилам) XHTML-документом считается документ, удовлетворяющий технической спецификации. В идеале, все браузеры должны следовать веб-стандартам и, в соответствии с ними, валидные документы должны отображаться во всех браузерах на всех платформах. Валидация XHTML-документа рекомендована даже несмотря на то, что она не гарантирует кросс-браузерности. Документ может быть проверен на соответствие спецификации с помощью онлайновой Службы валидации разметки W3C. Валидация обнаружит и разъяснит ошибки в XHTML-разметке.

Главное отличие XHTML от HTML заключается в обработке документа. Документы XHTML обрабатываются своим модулем (парсером) аналогично документам XML. В процессе этой обработки ошибки, допущенные разработчиками, не исправляются.

XHTML соответствует спецификации SGML, поскольку XML является её подмножеством. HTML обладает множеством особенностей в процессе обработки и фактически перестал относиться к семейству SGML, что, и закреплено в черновике спецификации HTML 5.

Различия между XHTML и HTML. Согласно синтаксису XHTML:

Все элементы должны быть закрыты. Теги, которые не имеют закрывающего тега (например, <img> или <br>), должны иметь на конце / (например, <br />).

Логические атрибуты записываются в развёрнутой форме. Например, следует писать <option selected="selected">.

Имена тегов и атрибутов должны быть записаны строчными буквами (например, <img alt="" /> вместо <IMG ALT="" />).

XHTML гораздо строже относится к ошибкам в коде; < и & везде, даже в URL, должны замещаться &lt; и &amp; соответственно. По рекомендации W3C браузеры, встретив ошибку в XHTML, должны сообщить о ней и не обрабатывать документ. Для HTML браузеры должны были попытаться понять, что хотел сказать автор.

Для XHTML-страниц рекомендуется задавать MIME-тип – application/xhtml+xml, но это не является обязательным, более того – браузер Internet Explorer 8 и младшие версии не смогут обрабатывать страницу, поэтому с XHTML 1.0 традиционно используется MIME-тип для HTML – text/html.

Существует три типа документов XHTML: strict, transitional и frameset. Наиболее употребительной и универсальной из версий XHTML является переходная (англ. transitional), поскольку она позволяет использовать iframe (включение содержимого одной веб-страницы в другую) и атрибут target у ссылок (для указания того, например, что ссылке необходимо открываться в новом окне). Фреймовая версия (англ. frameset) представляет собой расширенный вариант transitional и добавляет к нему, как следует из названия, возможность установки frameset вместо body. DTD ((Document Type Definition) определение типа документа) строгой версии XHTML (англ. strict) не содержит многих тегов и атрибутов, описанных в DTD transitional и признанных устаревшими.

Каскадная таблицей стилей CSS

CSS (англ. Cascading Style Sheets – каскадные таблицы стилей) – язык описания внешнего вида документа, написанного с использованием языка разметки.

Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться к любым XML-документам.

Основной целью разработки CSS является разделение содержимого (написанного с использованием языка разметки) и оформления документа (написанного на CSS). Это разделение увеличивает доступность документа, предоставляет большую гибкость и возможность управления его отображением, а также уменьшает сложность и повторяемость в структурном содержимом.

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

CSS при отображении страницы может быть взята из различных источников.

При использовании связанных стилей описание селекторов и их значений располагается в отдельном файле, как правило, с расширением.css, а для связывания документа с этим файлом применяется тег <link>. Данный тег помещается в контейнер <head>.

<head>

<meta http-equiv="content-type" content="text/html; charset=Windows-1251">

<title>Сантехнические работы</title>

<link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>

</head>

Значения атрибутов тега <link> – rel и type остаются неизменными независимо от кода, как приведено в данном примере. Значение href задает путь к CSS-файлу, он может быть задан как относительно, так и абсолютно. Атрибут media позволяет указать тип носителя, для которого будет применяться указанный стиль. В качестве типов выступают различные устройства, например, принтер, КПК, монитор.

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

Стандарт CSS определяет приоритеты, в порядке которых применяются правила стилей, если для какого-то элемента подходят свойства нескольких правил одновременно (или, в редких случаях, в одном правиле есть одноименные свойства). Это называется "каскадом", в котором для свойств рассчитываются приоритеты или "веса", что делает результаты предсказуемыми.

Преимущества CSS:

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

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

- Простота последующего изменения дизайна. Не нужно править каждую страницу, а лишь изменить CSS-файл.

- Дополнительные возможности оформления. Например, с помощью CSS-вёрстки можно сделать блок текста, который остальной текст будет обтекать (например для меню) или сделать так, чтобы меню было всегда видно при прокрутке страницы.

Недостатки:

- Различное отображение вёрстки в различных браузерах (особенно устаревших), которые по разному интерпретируют одни и те же данные CSS.

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

Селектор id (это уникальный идентификатор элемента) используется для задания стиля для одного, единственного элемента. Селектор id использует атрибут id элемента HTML, и определяется с "#". Правило стиля ниже будет применяться к элементу с id="para1":

<style type="text/css">

#para1 { text-align:center; color:red; }

</style>

</head>

<body>

<p id="para1">Привет Мир!</p>

<p>На этот § не влияют стили.</p>

Селектор класса используется для определения стиля для группы элементов. В отличии от id селектора, селектор класса обычно используется на несколько элементов. Это позволяет установить особый стиль для любых элементов HTML с тем же классом. Селектор класса использует атрибут HTML класса, и определяется с "."

В примере, приведенном ниже, все HTML-элементы с class="center" будут отцентрованны:

<style type="text/css">

.center { text-align:center; }

</style>

</head>

<body>

<h1 class="center">Отцентрованный заголовок</h1>

<p class="center">Отцентрованный абзац.</p>

Вы можете также указать, что только определенные HTML элементы должны быть затронуты классом. В примере ниже, все элементы p с class="center" будут отцентрованны:

<style type="text/css">

p.center { text-align:center; }

</style>

</head>

<body>

<h1 class="center">Этот заголовок не будет изменен</h1>

<p class="center">Этот абзац будет отцентрован.</p>

На самом деле, нельзя выбирать, что использовать: class или id. Это на подобии, как выбирать, что лучше: есть или пить? Пользоваться необходимо и классами и идентификаторами, в зависимости от поставленной цели. В большинстве случаев лучше использовать class, чтобы случайно не использовать id на одной странице более одного раза. Но там где необходимо, нужно применять id: выделение уникального блока страницы, для якорей, для JS.

Язык программирования PHP

Выбрана данная технология, так как PHP позволяет уменьшить главным образом дублирование XHTML кода. Так же это технология служит для создания модульности.

PHP-скрипты – это программы, которые выполняются и обрабатываются сервером. Так что сравнивать его со скриптовыми языками типа JavaScript невозможно, потому что написанные на них скрипты выполняются на машине клиента. В чем отличие скриптов, выполняемых на сервере и на клиенте? Если скрипт обрабатывается сервером, клиенту посылаются только результаты работы скрипта.

Главным фактором языка РНР является практичность. РНР должен предоставить программисту средства для быстрого и эффективного решения поставленных задач.

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

GET передает данные серверу используя URL, когда POST передает данные, используя тело HTTP запроса.

Длина URL'а ограничена 1024 символами, это и будет верхним ограничением для данных, которые можно отослать GET'ом.

POST может отправлять гораздо большие объемы данных. Лимит устанавливается веб-сервером и обычно равен около 2MB.

Передача данных методом POST более безопасна, чем методом GET, так как секретные данные (например пароль) не отображаются напрямую в web-клиенте пользователя (в отличии от URL, который виден почти всегда).

Сервер принимает три типа запросов: GET, POST и HEAD. Запрос программы к Web-серверу выглядит следующим образом:

GET /index.html HTTP/1.0

Первая часть, в данном случае GET, – это метод запроса,

вторая, index.html, – запрашиваемый URL,

третья, HTTP/1.0, – протокол, используемый клиентом.

Два основных метода запроса – это GET и POST. Это те самые методы которые доступны вам при создании формы. Метод HEAD редко используется броузером, поскольку он запрашивает только заголовок ответа, а тело ответа в таком случае не передается. Например, для проверки того, не изменилась ли страница, броузер может запросить заголовок, но при этом не порождается полноценный обмен данными.

По умолчанию при запросе используется метод GET. Метод POST используется только тогда, когда это явно указано в запросе формы. Для CGI-программиста очень важно понимать, что при запросе методом GET данные формы передаются серверу вместе с URL. Web-серверы, поддерживающие CGI, копируют эти данные в переменную окружения с именем QUERY_STRING. После этого забота о получении данных из переменной окружения и их обработке возлагается на CGI-программу.

URL со строкой запроса выглядит так:

http://www.domen-name.com/login.pl?nick=maks&psw=parol

Знак? отделяет строку запроса от собственно URL ресурса; nick и psw – переменные передаваемые серверу, maks и parol – их значения соответственно.

Метод POST используется тогда, когда это явно указано в атрибуте формы METHOD. В отличии от метода GET, POST помещает данные не в URL, а в тело запроса. Запрос POST во многом похож на ответ HTTP. Первая строка представляет собой стандартный запрос HTTP, в котором указан метод POST. В ней могут быть необходимые дополнительные заголовки, отделяемые от тела запроса пустой строкой.

Тело запроса при использовании метода POST передается программе как стандартный поток ввода.

Выбор между GET и POST. Понятно, что при разработке форм перед CGI-программистом встанет вопрос: какой из этих методов применять. В большинстве случаев применимы оба метода и оба будут хорошо работать. Однако бывают ситуации, когда использование того или иного метода дает определенные преимущества.

Рассмотрим несколько ситуаций, когда есть смысл предпочесть метод GET или POST.

- Если вы хотите, чтобы ваша программа вызывалась с помощью ссылки, предпочтение следует отдать методу GET.

- Если вы не хотите, чтобы аргументы, передаваемые вашей программе, записывались в файл отчета сервера, используйте метод POST. Например, если форма требует указать имя пользователя и пароль, вы вряд ли захотите, чтобы имена и пароли сохранялись в файле отчета. Кроме того, не разумно передавать пароль как часть URL.

- Если ваша форма имеет значительные размеры, например в ней есть текстовые окна с заметками и коментариями, следует использовать метод POST. Вообще говоря, можно и в этом случае применять метод GET, но тогда вы сможете столкнуться с ограничениями на размер URL, разными для разных операционных систем и броузеров (ограничение обусловленно размером переменных окружения). Проще воспользоваться методом POST.

- Если ваша форма содержит файловое поле, используйте метод POST. Кроме того, в этом случае нужно установить значение атрибута ENCTYPE в multipart/form-data.

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

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

Протокол HTTP является протоколом "без сохранения состояния". Это означает, что данный протокол не имеет встроенного способа сохранения состояния между двумя транзакциями. Т. е., когда пользователь открывает сначала одну страницу сайта, а затем переходит на другую страницу этого же сайта, то основываясь только на средствах, предоставляемых протоколом HTTP невозможно установить, что оба запроса относятся к одному пользователю. Т. о. необходим метод, при помощи которого было бы отслеживать информацию о пользователе в течение одного сеанса связи с Web-сайтов. Одним из таких методов является управление сеансами при помощи предназначенных для этого функций. Для нас важно то, что сеанс по сути, представляет собой группу переменных, которые, в отличие от обычных переменных, сохраняются и после завершения выполнения PHP-сценария.

При работе с сессиями различают следующие этапы:

- открытие сессии, самый простой способ открытия сессии заключается в использовании функции session_start, которая вызывается в начале PHP-сценария: session_start. Синтаксис: session_start(); Эта функция проверяет, существует ли идентификатор сессии, и, если нет, то создает его. Если идентификатор текущей сессии уже существует, то загружаются зарегистрированные переменные сессии.

- регистрация переменных сессии и их использование, после инициализации сессии появляется возможность сохранять информацию в су-перглобальном массиве $_SESSION. Пусть имеется файл index.php в котором в массив $_SESSION сохраняется переменная и массив.

<?php // Инициируем сессию

session_start(); // Помещаем значение в сессию

$_SESSION['name'] = "value"; // Помещаем массив в сессию

$arr = array("first", "second", "third");

$_SESSION['arr'] = $arr; // Выводим ссылку на другую страницу

echo "<a href='other.php'>другая страница</a>";?>

- закрытие сессии, после завершения работы с сессией сначала нужно разрегистрировать все переменные сессии, а затем вызвать функцию unset(): Синтаксис: unset ($_SESSION["username"]);

Скриптовый язык JavaScript

JavaScript представляет собой язык написания сценариев на клиентской стороне, который вносит на Web-страницы элементы интерактивности и условного поведения. С помощью JavaScript мною будет реализовано портфолио, которое будет использовать свободно-распространяемую библиотеку.

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

Lightbox

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

Lightbox совместим с такими браузерами как:

- Firefox 3.0+;

- Opera 9.0+;

- Internet Explorer 6 +;

- Google Chrome 10.0 +.

Отличие JavaScript от Java

В основном Java и JavaScript различаются количеством возможностей и сложностью. JavaScript имеет более свободную в сравнении с Java реализацию, поэтому в нем, например, можно не объявлять переменные, а преобразование типов данных осуществляется проще. К тому же, исходный код программы на языке JavaScript не нужно компилировать, в отличие от Java-апплетов: язык JavaScript интерпретируемый. Интерпретатор JavaScript читает программу строка за строкой и сообщает об ошибках (если таковые есть) после каждой прочитанной строки (а не после обработки всего текста программы, как это делает компилятор языка Java).

Исходный код программы на языке Java должен быть преобразован в формат с побайтовым представлением до выполнения программы, и, следовательно, программы на языке JavaScript можно разрабатывать и отлаживать значительно быстрее. Как и язык Java, JavaScript является объектно-ориентированным языком, хотя в нем нет ни классов, ни встроенных механизмов наследования, которые являются стандартными для Java. В программах на языке Java используются классы объектов, и эти программы являются полностью объектно-ориентированными.

И Java, и JavaScript относятся к числу безопасных языков – в том смысле, что в каждом из них реализована поддержка средств, которые не допускают записи на жесткий диск данных, полученных из неизвестного источника. Что касается переносимости кода, написанного на этих двух языках, то здесь имеются небольшие различия. Откомпилированную программу на Java будет выполнять любой "Java-ориентированный" броузер. Для работы JavaScript вначале требовалась только 32-разрядная версия Netscape 2.0, но сейчас он может работать и на 16-разрядной платформе.

Способы верстки страниц

На сегодняшний день известно всего несколько основных способов верстки сайта. Для создания своей работы я предпочёл блочную верстку страниц, так как этот способ сейчас больше распространён, он удобный в работе с ним. Сейчас рассмотрим один из способов:

- Блочная верстка.

Сначала давайте разберемся с основным понятием. Что такое блок? Под этим понятием понимается прямоугольная область на веб – странице, которая имеет внешние, внутренние отступы, рамку и содержимое. Возможно, вы его встречали или даже работали: <div>Содержимое</div>

Div-верстка – это разновидность верстки сайта, в которой для позиционирования элементов на странице применяются теги <div>. Данный вид верстки гораздо предпочтительнее табличного подхода.

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

У свободно позиционируемых элементов (DIV-ов, дивов) есть главное неоспоримое преимущество: они предоставляют Web-дизайнеру полнейший контроль над Web-страницей.

Преимущества блочной верстки (верстки "дивами"):

- Все свойства блоков задаются в таблице стилей, что облегчает html-код.

- Слои-блоки можно накладывать друг на друга, что облегчает расположение элементов на веб-странице.

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

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

- Табличная верстка.

Любая таблица имеет ячейки. Если мы будем в этих ячейках располагать элементы веб – страницы, то сможем получить достаточно интересные макеты сайтов. Можете посмотреть на исходный код любого сайта с табличной версткой, и вы заметите, что все содержание размещается в обычной табличной структуре.

Недостатки табличной верстки

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

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

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

Средства разработки сайта

На сегодняшний день в мире существует множество программных продуктов, которые осуществляют работу по созданию web – страниц. Рассмотрим некоторые из них:

- Notepad++ – свободный текстовый редактор для Windows с подсветкой синтаксиса большого количества языков программирования и разметки. Он базируется на компоненте Scintilla, написан на C++ с использованием STL и распространяется под лицензией GPL. Базовый функционал программы может быть расширен как за счет плагинов, так и сторонних модулей.

Редактор Notepad++ программа по сути весьма похожа на Блокнот, однако разработчики специально предусмотрели некоторые удобства для того, чтобы писать код HTML (а также языков Java, С, C++, Perl и еще некоторых). Это выражается в том, что при написании HTML-документа все теги автоматически подсвечиваются синим цветом, их атрибуты – темно-синим, а значения атрибутов – зеленым (цвета можно настроить по собственному желанию, так же, как и шрифт). Это очень удобно. К примеру, если автор случайно ошибется в имени тега или атрибута, то оно останется черным, и он сразу поймет, что здесь что-то не то. Правда, проверка не является "интеллектуальной": программа может спокойно "разрешить" приписать тегу какое-либо свойство, которого у него в принципе быть не может (спокойно подсвечивает абракадабру типа <BR ALIGN="top"> или </BR>).

В отличие от Блокнота, Notepad++ – редактор многооконный и с использованием распознания кода по цветам. В нем можно открыть сразу несколько документов и работать, легко переключаясь между ними с помощью списка в левой части окна или вкладок в нижней части, Веб-редактор Notepad++ позволяет автоматизировать набор многих тегов. Если не хочется набирать их вручную (многие этого не любят просто из-за того, что приходится переключаться на латинский шрифт), то обратите внимание на левую нижнюю часть окна программы. Там приведен список наиболее распространенных HTML-тегов, которые можно вставлять в свой основной текст двойным щелчком мыши. Правда, в списке указаны не сами теги, а их описание. Например, чтобы вставить тег <BR>, нужно выбрать из списка пункт Block > Break Line. Однако к этому быстро привыкаешь. Почти все пункты списка вставляют теги вместе с закрывающим парным тегом. Например, если выбрать пункт Block > Preformatted, в текст автоматически будут добавлены теги и <PRE> и </PRE>. Некоторые пункты добавляют сразу целые блоки-заготовки. Если, к примеру, выбрать пункт Table (Таблица), в текст будет вставлен такой код:

<TABLE ALIGN="left" WIDTH="lOO">

<TR ALIGN="left" VALIGN='micldle'>

У тега <BR>, как было указано выше, нет закрывающего парного тега; кроме того, он не может иметь атрибут ALIGN=. Впрочем, браузеры просто игнорируют подобные ошибки.

<TH></TH> <TH>?</TH>

<TR ALIGN="left" VALIGN=middle">

<TD>? </TD>

<TD>? </TD> </TABLE>

Те, кто часто вводят какие-либо последовательности символов, что при написании веб-страниц не редкость, могут облегчить свою задачу, записав в Notepad++ соответствующие макросы. Для записи макроса надо нажать комбинацию клавиш CTRL+ SHIFT+ R (или выбрать из меню Macros пункт Record). При этом начнется запись макроса, то есть все последующие действия будут запомнены. Чтобы закончить запись, надо снова нажать комбинацию клавиш CTRL+ SHIFT+ R, после чего присвоить имя файлу макроса, а также дать название для представления макроса в меню. Здесь можно также дать, если нужно, краткое описание макроса и указать имя его автора. После нажатия на кнопку ОК название макроса появится в меню Macros. Выбрав его, можно ввести сразу всю заданную последовательность символов.

Для удобства отладки можно установить флажок в пункте Line Numbers (Нумерация строк) в меню View (Вид), – в этом случае все строки текста будут пронумерованы. Хочется отметить, что если в меню Configure (Настройка) включен пункт Word Wrap (Перенос по словам) для автоматического переноса концов длинных строк в видимую часть экрана, то каждая такая длинная строка все равно будет нумероваться одним номером, а не двумя или тремя (кстати, такая нумерация почему-то недоступна в замечательной программе Homesite, о которой речь пойдет ниже). А если в меню View (Вид) включить флажок Visible Spaces (Отображать пробелы), то можно увидеть на экране и "невидимые символы", такие, как пробелы, символы табуляции и прочие.

В программе Notepad++ можно легко сравнить два файла, выбрав из меню tools (Сервис) пункт Compare Files (Сравнить файлы). А если есть два (или более) похожих файла, в некоторые местах которых надо внести изменения, удобно использовать функцию Synchronize Scrolling (Одновременная прокрутка) из меню Configure (Настройка). В этом случае можно открыть сразу несколько файлов, например, выбрав из меню Windows (Окна) пункт Tile Vertically (Расположить по вертикали), и тогда при прокрутке одного из них другие прокручиваются синхронно.

Среди других полезных функций программы Notepad++ стоит отметить возможность автоматической смены клавиатурного регистра командой Edit > Change Case (Правка > Сменить регистр), автоматического копирования в буфер слова или строки, на которой находится курсор, с помощью команд Edit > Cut Other (Правка > Вырезать) и Edit > Copy Other (Правка > Копировать), а также функцию проверки орфографии Tools > Spelling (Сервис > Правописание). И, конечно, здесь присутствует возможность просмотра созданного файла в броузере View > In Web Browser (Вид > В броузере).

- Денвер (от сокр. Д.н.w.р или ДНВР – джентльменский набор Web-разработчика) – набор дистрибутивов и программная оболочка, предназначенные для создания и отладки сайтов (веб-приложений, прочего динамического содержимого интернет-страниц) на локальном ПК (без необходимости подключения к сети Интернет) под управлением ОС Windows.

В 1999 году Дмитрий Котеров написал статью "Apache + Perl + PHP3 + MySQL для Windows 95/98: руководство по установке". Как он рассказывает в своём интервью отвечая на письма читателей, он задумался над автоматизацией процесса. Так появился "джентльменский набор web-разработчика (д.н.w.р.)". Поначалу это был просто zip-архив размером около 1,5 Мбайт, с урезанными версиями Apache, Perl, PHP, MySQL и php My Admin + скриптами на Perl для запуска/остановки компонентов и работы с несколькими виртуальными хостами одновременно. Все компоненты системы уже были сконфигурированы так, чтобы работать только с относительными файловыми путями, вне зависимости от каталога, куда ставится пакет. 15 марта 2002 года вышла первая официальная версия "Denwer", в котором появился простой инсталлятор, который копировал файлы в указанное место и предлагал добавить ярлыки в папку автозагрузки Windows.

Сразу после установки доступен полностью работающий веб-сервер Apache, работающий на локальном компьютере, на котором может работать неограниченное количество сайтов, что очень эффективно для разработки и отладки сценариев PHP без загрузки его файлов на удаленный сервер. Для запуска практически всех утилит "Денвера" используется приложение Run в подкаталоге /denwer(или /etc) корневого каталога установки "Денвера". При запуске создается виртуальный диск (по умолчанию Z:), где хранятся все файлы проектов.

Третья версия поддерживает работу со съемного флеш-накопителя.

Особенностью, отличающей Denwer от других WAMP-дистрибутивов, является автоматическая правка системного файла hosts, являющегося локальным аналогом DNS-сервера, что позволяет обращаться к локальным сайтам, работающим под управлением Денвера, по именам, совпадающим с именем папки, расположенной в каталоге home Денвера.

Средства подготовки графических материалов

GNU Image Manipulation Program или GIMP ("Гимп") – растровый графический редактор, программа для создания и обработки растровой графики и частичной поддержкой работы с векторной графикой. Проект основан в 1995 году Спенсером Кимбеллом enru и Питером Маттисом enru как проект, в настоящий момент поддерживается группой добровольцев. Распространяется на условиях GNU General Public License.

Изначально сокращение "GIMP" означало англ. General Image Manipulation Program, а в 1997 году полное название было изменено на "GNU Image Manipulation Program", и программа официально стала частью проекта GNU.

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

В течение продолжительного времени GIMP создавался с учётом пожеланий пользователей, но в основном согласно предпочтениям разработчиков и без привлечения экспертов по эргономике. Целостное видение проекта отсутствовало. Чтобы решить накопившиеся в результате этого проблемы, был принят ряд мер.

В 2005 году проект GIMP был зарегистрирован участником программы OpenUsability. На конференции Libre Graphics Meeting в марте 2006 года состоялась первая встреча представителей OpenUsability и команды разработчиков GIMP, в ходе которой было определено видение GIMP как продукта для конечных пользователей:

- GIMP является свободным ПО;

- GIMP является высококачественным приложением для фоторетуши

позволяет создавать оригинальные изображения;

- GIMP является высококачественным приложением для создания экранной и веб-графики;

- GIMP является платформой для создания мощных и современных алгоритмов обработки графики учёными и дизайнерами;

- GIMP позволяет автоматизировать выполнение повторяющихся действий;

- GIMP легко расширяем за счёт простой установки дополнений.

Эти тезисы определяют дальнейшее развитие GIMP.

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

Традиционно GIMP считается свободным аналогом ряда проприетарных редакторов (чаще всего называется Adobe Photoshop), хотя сами разработчики часто возражают против такой формулировки.

Caesium – это простой инструмент с открытым кодом, который предназначен для сжатия PNG, JPG и BMP. Caesium действительно обеспечивает поддержку сжа-

тия PNG без потери качества, хотя в ней и есть некоторые ограничения. Он может выводить только 24-битные изображения, в противном случае, вероятно, будет уве-

личиваться размер изображения. Результаты программы наглядно иллюстрируют проблему, так как большинство тестовых изображений веб-графики PNG c глубиной цвета в 48 бит на самом деле увеличиваются в размерах. При тщательной настройке общий размер изображения уменьшается на 12%.

Выводы

Благодаря созданию сайта, об организации узнает множество людей, которые, возможно, заинтересуются услугами организации.

Цели создания сайта:

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

- Предоставление актуальной информации для людей в глобальной сети Интернет;

- Предоставить максимум информации об организации и её услугах.

Литература

Основная литература:

1. Романова Ю.Д. Информатика и информационные технологии /Ю.Д. Романова, – М.:Эксмо, 2012 – 592с.

2. Влад Мержевич. Справочник по CSS. 2011 – 59 с.: ил.

3. Джона Коггзолл. РНР 5. Полное руководство. – М Диалектика, 2011.

4. Ирина Кузина.: Учебник по CSS. 2012 – 28 с.: ил.

5. Кирсанов Д. Веб-дизайн. – СПб Символ-Плюс, 2010 – 319 с.: ил.

6. Косарев А.Ф. PHP в web-дизайне – СПб BHV, 2011 – 89 с.

7. Якоб Нильсен. Веб-дизайн. – СПб Символ-Плюс, 2012 – 187 с.

8. Влад Мержевич.: HTML и CSS на примерах, 2010. – 103 с.: ил.

9. Исси Коэн, Лазаро; Исси Коэн, Джозеф. Полный справочник по HTML, CSS и JavaScript, 2012 – 159 с.

10. Гудман, Д. JavaScript и HTML. Сборник рецептов. Для профессионалов, 2013 – 207 с.

11. Закарян, И.; Рафалович, В Что такое Internet, www и html. Первое знакомство, 2010 – 114 с.

12. К. Шмитт – "CSS. Рецепты программирования (CSS: Cookbook)" 2011 – 256 с.

13. Билл Кеннеди, Чак Муссиано – "HTML и XHTML. Подробное руководство (HTML & HXTML. The Definitive Guide)" 2010 – 310 c.

14. Д. Скляр, А. Трахтенберг PHP. Рецепты программирования. 2012 – 125 с.

15. А. С. Строганов. Ваш первый сайт с использованием PHP-скриптов.2010-103с.