Веб-дизайн и HTML

Что такое веб-дизаин Веб-дизайн в русском понимании этого слова - это, в первую очередь, графический дизайн сайтов. Но, помимо визуального оформления, он включает в себя и разработку структуры сайта, работу над его логикой и удобством пользования (юзабилити). Причем визуальное оформление я ставлю на последнее место: внутреннее содержание гораздо важнее внешней оболочки. Разумеется, веб-дизайнер должен, прежде всего, уметь нарисовать красивый дизайн, "обложку': но часто на его плечи ложатся разработка структуры сайта, навигации и т.д. И если визуальное оформление помогает привлечь внимание к сайту, то его удобство и простота - необходимые условия, чтобы удержать пользователя и заставить его посетить сайт еще раз. Отсюда следует, что веб-дизайнеру нужно уметь логично мыслить, кое-что понимать в вебтехнологиях и хорошо рисовать.

С чеrо начинать. 

К веб-дизайну каждый приходит своим путем. Кого-то учат в вузах или на курсах, кто-то постигает эту науку сам. Последний путь - самый интересный и самый сложный, и, между прочим, позволяет отсеять тех, кто не готов отдать десяток лет своей жизни компьютеру. Когда меня спрашивают, сколько лет я училась, то я по-прежнему затрудняюсь с ответом. Вот вам моя история. В 2000 году я познакомилась с Интернетом. Это был период бурного развития Рунета, очень популярны были различные сервисы вроде отправки поздравительных открыток, чатов, виртуальных свадеб. Чего только уже не придумали! Помнится, в первые часы серфинга по русской зоне я зарегистрировала себе почтовый ящик, отправила несколько электронных открыток и познакомилась с понятием "чат.Знаете,что чувствует человек, впервые попавший в чат и осознающий, что прямо сейчас общается с десятком людей из разных городов? Ему кажется, что стерлись абсолютно все границы между странами и ему подвластно все то, о чем раньше нельзя было и мечтать. Тогда у меня было ощущение, что это и есть наивысший момент развития
Интернета.
Однажды я узнала, что и сама могу создать веб-страничку, воспользовавшись сервисом
на сайте Narod.Ru. Сейчас, кстати, любой может сделать это на сотнях сервисов,
предлагающих просто огромную функциональность. Но тогда с готовыми шаблонами
было не очень интересно: стало понятно, что у моего сайта неуникальный
дизайн. И я начала изучать язык HTML. Самым сложным на тот момент было освоение
верстки с помощью таблиц. Браузеры были еще несовершенны, поэтому о НТМLверстке
с помощью слоев и блоков тогда говорили немногие. Как можно говорить о
блочной верстке, когда даже с железобетонными таблицами у разных браузеров были
проблемы?
А что с графикой? Из всех доступных инструментов на компьютере у меня были
только Блокнот и Paintbrush от Microsoft Windows. С помощью Paintbrush для первой
веб-странички был создан декор в виде цветочков и листочков, причем рисовалось
все попутно с версткой. Лишь спустя многие и многие попытки я поняла, что сначала
сайт нужно продумать и нарисовать, а уже потом, удовлетворившись задуманным
внешним видом, сверстать. Именно тогда язык HTML был ненадолго отложен в сторону
и началась эра освоения графических программ, а также, что немаловажно, чтения
книжек и статей, касающихся веб-дизайна.
Когда учишься сам, непременно изобретаешь столько велосипедов, что сейчас это
даже кажется смешным. Для того чтобы назвать себя дизайнером, мне потребовалось
четыре года упорной работы над собой, причем учиться я продолжаю до сих пор. Но
зато знания, добытые с таким трудом, уже никуда не денутся, в отличие от университетского
образования.
Дизайнерам, начинающим поиск своего "я·: советую не повторять моих ошибок
и начинать сразу с рисования в Photoshop и чтения различной полезной литературы.
Ну а язык HTML - это по желанию, хотя, безусловно, огромный плюс (и много дополнительных
нейронных связей в мозгу), если свои первые сайты вы сможете от начала
и до конца сделать самостоятельно.

Что такое HTML.

Датой рождения веб-дизайна принято считать год, когда был придуман
язык HTML (Hypertext Markup Language). Хотя в этой книге я рассматриваю лишь
азы HTML, история Языка Разметки Гипертекста интересна и поучительна: в конце
концов, не будь HTML, возможно, и веб-дизайна не было бы.
Далекие от интернет-технологий люди называют HTML языком программирования.
Однако это не так, HTML - всего лишь язык разметки веб-документа. Говоря
проще, он заведует тем, "что куда поставить и в какой цвет покрасить" в отображаемом
браузером документе. Никакой выполняемой программы на нем написать нельзя.
Этот язык придумал британский ученый Тим Вернере-Ли, и произошло это знаменательное
событие примерно в 1991-1992 годах в стенах Европейского совета по
ядерным исследованиям в Женеве (Швейцария). Цель создания языка HTML (как и
практически всего, что было связано с Интернетом в те далекие годы) - сугубо практическая
и научная: это должен был быть язык, предназначенный для обмена научной
и технической документацией. Простой, даже, можно сказать, примитивный (о том,
что такое каскадные таблицы стилей, тогда еще никто не знал), он идеально подходил
для того, чтобы люди, не являющиеся специалистами в области верстки, могли его
выучить и использовать для составления документов, которые можно было бы прочесть
на компьютерах различных платформ.
Суть языка HTML - это небольшой набор структурных и семантических элементов,
называемых тегами и служащих для создания простых, но красиво оформленных
документов. Ясное дело, что тогда понятие "красиво" было гораздо проще, чем
сейчас: можно было создать документ с многоуровневой системой заголовков, выделить
текст полужирным шрифтом или курсивом, задать для документа цвет фона и
вставить в него картинки. В целом это было предельно минималистично: простенько
и чистенько.
Помимо средств структурирования документа, в HTML была реализована поддержка
гипертекста, т.е. добавлена возможность создания активных ссылок на другие
страницы и документы. И это понятно: не будь в HTML гиперссылок, их все равно
пришлось бы придумать: зачем нам Интернет без ссылок? Кстати сказать, всевозможные
мультимедийные возможности, такие как вставка и проигрыванне аудио или видео,
анимация и так далее, были добавлены в язык HTML позже.
Изначально язык HTML был создан как простейшее средство структурирования и
форматирования документов без их привязки к средствам отображения. Это значит,
что в идеале текст с НТМL-разметкой должен был без каких-либо искажений воспроизводиться
на каком угодно оборудовании, будь то цветной экран современного
компьютера, монохромный экран допотопного КПК или же экран мобильного телефона.
Это могло быть даже устройство голосового воспроизведения текстов! Однако
развитие Интернета и самого языка HTML привело к тому, что сейчас HTML очень
далек от его изначальной задачи. Например, тег <TABLE> был предназначен для создания
в документах самых обычных таблиц, по умолчанию он отображается с ужасными
рамочками, как показано на рис. 1.1.
Рис. 1 . 1 . Вид НТМL-таблицы по умолчанию
Но веб-дизайнеров эта "красота" не очень-то вдохновляла, поэтому долгое время,
до повсеместного распространения блочной верстки, таблицы использовались не по
своему прямому назначению, а для проведения довольно хитрого маневра: с целью
формирования веб-страницы заданного формата посредством размещения в ее ячейках
отдельных .функциональных блоков.
Очень долго таблицы были главным орудием НТМL-верстальщиков. Но сейчас я,
наконец-то, могу смело сказать: "Прощайте, НТМL-таблицы и да здравствуют блоки!"
А таблицы пусть останутся лишь для своего прямого назначения - представления
табличных данных и не более.
Да здравствуют бпоки!
Язык HTML н а начальном уровне должен знать каждый уважающий себя дизайнер,
чтобы не пугаться при виде вот такого, например, куска кода.
<div id=wrappe r>
<div id=heade r>
< img s rc=" logo . png" c l a s s = " logo " >
</div>
<div id=leftcolumn>content</ div>
<div id=rightcolumn>content</ div>
< / div>
Этот код может быть отображен как угодно. Структурно это блок, в котором находятся
еще три блока. Однако здесь не хватает еще кое-чего: файла со стилями, в котором
и будет указано, как все это следует отображать на странице.
Рассмотрим некоторые из часто встречающихся в этом примере слов. Тег <DIV>
означает, что тут начинается блок. Внутри блока может быть все что угодно, любое
содержимое. Тег </ DIV>, или закрывающий тег, отмечает конец блока.
Тег <DIV> - всего лишь структурный элемент разметки. Сам по себе он не обладает
никакими свойствами, и, чтобы заставить его работать, нужны стили.
Технология CSS - Cascading Style Sheets (принято переводить как "каскадные таблицы
стилей") - просто гениальное изобретение человечества. Она предоставляет
разработчику множество полезных функций: отделение структурной, логической
разметки от элементов визуального форматирования, средства придания блокам и
другим элементам какого угодно цвета, размера, положения и т.д. И еще - с самого
начала грамотно написав таблицу стилей, вы получаете возможность в любой момент
всего за полчаса полностью преобразить вид всего сайта. Да-да, не отдельной страницы
или отдельного ее участка, а вообще всего сайта в целом. Согласитесь, что это
огромная экономия сил и времени, а следовательно, и денег.
На сегодняшний день хороший веб-дизайнер просто обязан знать следующее.
• Основные элементы, часто встречающиеся в НТМL-коде
• Что такое блоки и как они работают
• Как работать со стилями CSS
Конечно же, можно всего этого не знать и быть профессиональным дизайнером.
Но, учитывая, как много узких специалистов, и как мало людей, способных не только
нарисовать, но и сверстать, эти знания никогда не будут лишними.
Начапо пюбоrо документа
Для верстки НТМL-документов создано множество программ. Одни из них очень
мощные, другие - узкоспециализированные, с ограниченной функциональностью.
Ну а для начала изучения языка HTML вам вполне подойдет простейший текстовый
редактор, такой как Блокнот, входящий в состав ОС Windows как одна из стандартных
программ. Откройте Блокнот и сохраните пока еще пустой файл под именем i ndex .
html или даже he l l owo r l d . html . Учтите, что самое главное здесь - не само имя, а
расширение имени файла: . html . Именно по этой части названия файла програмыбраузеры
смогут понять, что данный файл как раз для них. Не закрывая приложения
Блокнот, откройте только что сохраненный пустой файл в своем любимом браузере.
Не важно, в каком: это может быть Internet Explorer или Opera, Mozilla Firefox или
Google Chrome, на ваш выбор. В любом случае результатом будет совершенно пустая
страница. Не закрывайте браузер, он вам еще пригодится, лишь освежите в памяти
назначение, которое в браузерах имеет функциональная клавиша <FS> - обновление
вида отображаемой веб-страницы в окне браузера.
Теперь в приложении Блокнот введите в наш файл следующий код.
<html >
<head>
< t i t le>Wake up Neo< / t i t l e >
< / head>
<body bgcolor= " IO O O O O O " text= " I 3 3 FF0 0 " >
<Hl >Wake u p Neo< /Hl >
Fol l ow the white rabb i t
< /body>
< / html >
Сохраните файл и обновите в браузере (клавиша <FS>) уже открытую в нем страницу.
Как видите, в ней что-то изменилось. Разберем этот фрагмент кода по частям.
Все, что в НТМL-документе находится между парой угловых скобок < >, называется
тег. Теги бывают парные, такие как пара из открывающего тега <html> и закрывающего
тега < / h tml>, и непарные, только открывающие. Впрочем, парные встречаются
гораздо чаще.
Для языка HTML не важно, используете вы при написании кода строчные или прописные
буквы, для него <html> и <HTML> - это одно и тоже. Однако важно давать
имена файлам и записывать расширения имени файлов, используя только строчные
буквы, и это касается абсолютно всех файлов, из которых состоит сайт. Причина в том,
что веб-серверы на базе ОС UNIX воспринимают запись i ndex . html, Inde x . HTML
и INDEX . h tml как имена трех разных файлов, поэтому для исключения возможных
ошибок принято писать имена всех файлов только строчными буквами.
Также в HTML не важно, заключаете вы параметры тегов в кавычки или нет. В кавычках
главное - закрывать их, если уж открыли. И угловые скобки у тегов тоже
терять не надо.
Тег <html> - один из обязательных. По сути, он является большим контейнером,
в который помещается весь остальной НТМL-код. С него начинается любая вебстраница,
которая всегда заканчивается его парным закрывающим тегом </html>,
обязательно содержащим знак 1 (слеш). Вообще-то, современные браузеры часто могут
обойтись без закрывающей половины тегов, "додумывая" за ленивого кодера все
недостающее, но если верстать по правилам, то лучше писать все теги как положено.
Следующий на очереди - тег <he ad>. Это "голова': т.е. заголовок документа,
потому-то он так и назван. Это тоже обязательный тег-контейнер, в который, помимо
классического тега <t i t l e>, отвечающего за заголовок страницы в окне браузера,
помещается самая разная информация. В тег <he ad> можно поместить, во-первых,
инструкции об используемых стилях CSS, во-вторых - важную служебную информацию,
такую как кодировка страницы, указания для поисковых роботов и выполняемые
сценарии (скрипты), а также ключевые слова данного документа и описание
веб-страницы в целом.
Тег <t i t l e> нужен, если вы хотите присвоить веб-странице заголовок. Поскольку
страница без заголовка выглядит довольно странно, этот тег можно отнести к разряду
условно-обязательных: можно и без него, но с ним лучше.
Теперь переходим к телу документа, которое целиком помещается в парный тег
<body>. Обратите внимание, что в нашем примере внутри угловых скобок написано
не только название тега, но и его атрибуты. Так, инструкция bgco l o r="# OOOOOO"
означает, что фон страницы (background color) будет черного цвета. С тем же успехом
можно было бы написать bgco l o r="Ь l a c k", и браузер понял бы это слово не хуже
цифр, но данный маневр не пройдет со сложными цветовыми оттенками, для которых
трудно подобрать точное словесное описание. Для того чтобы указать цвет всего
текста на странице, мы пишем в теге <body> инструкцию t e x t ="# 33FF0 0 ". Я не
знаю, как называется этот кислотный оттенок зеленого, поэтому на помощь приходят
цифры. Значок # перед шестизначной цифрой обозначает, что при записи цифр используется
шестнадцатеричная система счисления.
Не6а11ьwае атсrуn11ен•е а q1фрах
Обычно в качестве шестнадцатеричных цифр используются десятичные цифры от о до 9 и латинские
буквы от А до F для обозначения цифр от 1 О до 15. Белый цвет в шестнадцатеричной системе обозначается
как "#FFFFFF". Не подумайте, что вам придется как-то мучаться с переводам цветов в
цифры, чтобы обозначить цвет на веб-странице: для этого у вас есть программа Adobe Photoshop, в палитре
цветов которой указывается числовое значение каждого опенка в разных моделях: RGB, СМУК,
lab, HSB и hex !обозначается значком решетки, Jt). На рис. 1 .2 представлено окно этой программы,
чтобы вам было понятнее, откуда берется числовое значение цвета.

Между открывающим тегом <body> и закрывающим < /body> располагается содержимое
страницы, или контент. Поскольку английское слово "контент" в наше
время уже стало общеупотребительным, я буду использовать его везде, где это потребуется.
Контент на данной странице содержит всего две строчки: первая служит
заголовком, вторая - просто текст. Заголовком текст делает парный тег <Hl>. Его
можно расшифровать как "Headerl" или "Заголовок первого уровня

Всего существует
шесть уровней заголовков, от <Hl> до <Н б>, и последний уровень будет означать
самый мелкий размер текста. Еще одна функция этого тега - закрывающий тег </Hn>
переносит последующий текст на новую строку.
Теперь, когда вы в самом минимальном объеме уже познакомились с языком
HTML, перейдем к изучению более сложного и полезного понятия: технологии CSS.
TexнonorиR CSS
Еще раз откройте в приложении Блокнот свой файл hel loworl d . html. Будем
вносить в него изменения.
Начнем с того, что на самом деле в теге <body> совсем необязательно указывать
цвет фона документа и цвет шрифта. Стирайте эти атрибуты - оставьте просто
<body>. Почему? Достаточно долго в вебе смешивали структурное форматирование
Глава 1 . Веб-дизайн и HTML 29
(то, какие данные и в каком порядке будут располагаться на странице) и визуальное
форматирование (всевозможный декор отображаемых элементов). Технология CSS
долго казалась дизайнерам и веб-мастерам непонятным страшным зверем, ее плохо
воспринимали браузеры, а в языке HTML и без того было много средств визуального
форматирования: можно было увеличить объект, покрасить его, изменить цвет и
размер шрифта и т.д. Так что долгие годы все учили лишь язык HTML, смешивали
структуру и дизайн и ждали, когда, наконец, браузеры дозреют до CSS.
Технология таблиц стилей имеет свою семантику, свой огромный " словарь" атрибутов и несколько
способов внедрения своих данных в НТ МL-файл.
Итак, чтобы задать объекту свойства, в CSS пишут, например, так.
body {bac kground-color : #O O O O O O ; color : #FFFFFF; }
Это буквально означает, что у всего документа фон будет черный, а цвет текста -
белый, если в других элементах вы не переопределите этот цвет. Для синтаксиса CSS
важно не забывать открывать и закрывать фигурные скобки и ставить точку с запятой
после каждого свойства. Регистр букв здесь значения не имеет.
Но куда же поместить все это в НТМL-документе?
Сnособ 1. Пр•мо в rer• H1ML
Измените тег <body> так: <body s t y l e ="ba c kground- c o l o r : # 0 0 0 0 0 0 ; c o l o r :
# FFFFFF; ">. Сохраните документ, обновите страницу в браузере. Теперь цвет фоначерный,
как и был, а текста - белый. Можно считать это первым шагом к использованию
таблиц стилей. Но по сути, когда вы смешиваете оформление и структуру, это
неправильно. Можно задавать стиль для отдельных элементов, но в целом в НТМLдокументе
в отношении визуального форматирования должна быть стерильность:
ничего лишнего, всю красоту выносим.
Сnособ 2. В JUO докrменrа с nомощью cneqмanьнoro rera <S'l'YLE>
Для описания всех стилей на странице можно воспользоваться специальным тегом
<STYLE> </ STYLE>. Для этого после открывающего тега <BODY> нужно написать,
например, следующее.
<STYLE type="text / c s s " >
Hl {color : pin k ; font-weight : norma l ; }
< / STYLE>
И это значит, что все теги <Hl> в этом конкретном документе будут покрашены в
розовый цвет и иметь нормальное начертание. Нормальное - значит не полужирное,
хотя по умолчанию заголовок уровня Hl имеет полужирное начертание букв.
30 Часть 1. Вспомнить все
Размещать весь список стилей в одном месте НТМL-документа лучше, чем применять
стили к каждому конкретному объекту. Но для создания сайтов, состоящих
более чем из одной страницы, и этот вариант не слишком удобен.
Сnособ 3. Ссыпка на фalln
Самый удобный способ внедрения стилей CSS в документ - это дать ссылку на
специальный файл с расширением имени . с s s. Файл может храниться где угодно - в
той же папке, что и НТМL-файл документа, или в любой другой на сервере, если вы
правильно укажете путь к ней. Можно даже использовать ссылку на другой сервер, но
это не имеет смысла, и вообще, все должно быть под рукой.
Чтобы сослаться на СSS-файл, нужно для начала его создать - просто как текстовый
документ, но с расширением . c s s - и положить в нужное место. Затем отройте свой
НТМL-документ и между тегами <head> и </head> напишите такую строчку.
< l i n k type= " text / c s s " hre f= " style . cs s " re l = " Styleshee t " >
Обратите внимание на запись hre f=" s t y l e . c s s ". Если ваш . сs s -файл называется
по-другому, то исправьте код соответственно. В этом примере файл стилей лежит в
той же папке, что и сам НТМL-документ.
Когда все стили CSS выделены в отдельный файл, это очень удобно: у вас есть отдельный
документ, заведующий только стилями и больше ничем. И вы можете легко
"освежить" десять, сто, миллион страниц, изменив только один файл. При условии,
конечно, что все эти страницы пользуются единой таблицей стилей, сохраненной
в данном файле.
Итак, у нас есть вот такой код.
<htrnl>
<head>
< t i t le>Wa ke up Neo< / t i t le>
< l i n k type= " text / c s s " hre f= " style . cs s " rel= " Style sheet " >
< / head>
<body>
<Hl>Wake up Neo< / Hl>
Fol l ow the white rabbit
< / body>
< /htrnl >
Теперь у нас есть два файла, HTML и CSS. Чтобы лучше понять, как работает технология
CSS и почему ею так восхищаются, нужно модифицировать документ he l l
o wo r l d . htrnl, добавив туда блоки!
Впишем между тегами <body> и </body> еще кусочек кода.
<div i d=container>
<div c l a s s =winter><P>Зимa< /p>< / div>
<div class=spring><P>Becнa< /p>< / div>
<div class=summer><P>Лeтo</p>< / div>
<div class=autumn><P>Oceнь < /p>< / div>
< / div>
Глава 1 . Веб-дизайн и HTML 31
Это пять блоков, один из которых, внешний (с идентификатором i d=c o t n t a in e r),
включает в себя все остальные.
Атрибут ID- или по-русски " ай-ди " - зто идентификатор. Он может иметь любое название, которое
вы придумаете. Атрибут clas s- "класс" по-русски - также может иметь любое значение
и в иерархии CSS он стоит ниже, чем ID.
Если вы сейчас сохраните НТМL-файл и обновите его в браузере, то не увидите
ничего интересного. Так что давайте перейдем к СSS-файлу: теперь мы будем иревращать
эти блоки во что-то более значимое. Собственно, с НТМL-кодом на этой тренировочной
странице мы полностью закончили: далее всю красоту будем наводить
только через таблицы стилей.
&JIOKII CSS
Открывайте файл s t y l e . c s s и вписывайте в него вот такой код (простите, что
много!). Если вы достаточно хорошо знаете английский, то сами поймете, что делают
те или иные свойства: задают ширину и высоту, цвет фона, размер шрифта, создают
тени и закругленные уголки, обтекание справа или слева.
body {background-color: #DDD;}
#container { margi n:O auto;
width:4 4 0px;
height:4 4 0px;
padding:Spx ;
border-radius: lOpx lOpx lOpx lOpx;
bac kground-color: #FFF;
margin-top:20px;
-moz-box-shadow: Орх Орх lOpx #ВВВ;
-webki t-box-shadow: Орх Орх lOpx #ВВВ;
box-shadow: Орх Орх lOpx #ВВВ;
}
. winter , . spring , . surnmer , . autumn
width: 1 90рх;
height: 1 90рх;
pos i t ion:relat ive;
border-radiu s : lOpx l Opx lOpx lOpx;
padding: lOpx;
margin: Spx ;
}
р {
32 Часть I. Вспомнить все
position: relative;
color: ltFFF;
text-align: center;
font-size: 24pt;
margin-top: 40%;
}
.winter {
float:left;
background: -moz-linear-gradient(top, ltB9D8C8, lt90ClA6);
)
.spring{
float:right;
clear:right;
background: -moz-linear-gradient(top, ltF18B8B, ltEB5B5B);
}
.summer {
float:left;
background: -moz-linear-gradient(top, ltA9DE52, lt88C425);
)
.autumn {
float:right;
clear:right;
background: -moz-linear-gradient(top, ltF8B47C, ltF5903F);
}
То, что у нас в результате получилось, представлено на рис. 1.3. (Как это выглядит
в цвете, вы сможете посмотреть на цветной вкладке - ил. 1.) В этом что-то есть: когда
пишешь браузеру буквы и цифры, а он в ответ показывает тебе картинку.
-·-
1 'Зума
1
Рис. 1.3. Стили CSS в действии
Глава 1 . Веб-дизайн и HTML 33
Обратите внимание на несколько моментов. Первый, позитивный: не было использовано
ни одной картинки - все, что отображается в браузере, описано только средствами
HTML плюс CSS. Меньше картинок - удобнее работать. Минималистичный дизайн теперь
можно сделать вполне привлекательным вообще без единой картинки!
Второй момент (и это начало всех проблем): вся мощь CSS проявляется далеко не
во всех браузерах. Я использовала Firefox 5.0, чтобы просто и без дополнительных
трюков показать, что можно сделать, зная о возможностях CSS.
И третий момент: дизайнер тем и отличается от профессионального HTML-кодера,
что кодер знает, будет ли отображаться этот код во всех основных браузерах (причем
нескольких версий, а не только свежайших), а дизайнер - не знает. Также важна
оптимизация кода: способность объединить стили так, чтобы использовать меньше
строчек кода и, соответственно, уменьшить размер СSS-файла. Для этого важно умение
структурировать данные, продумывать задачу на несколько шагов вперед.
Впрочем, немного утешим себя (я тоже так делаю, когда понимаю, что многого я
еще не знаю): главное, что вы знаете о том, что умеет делать CSS, для чего он нужен.
Если верстка увлечет вас сильнее, то вы всегда сможете найти источники дополнительных
знаний и одновременно приобрести дополнительную квалификацию.
И дизайнеру, и кодеру важно помнить о кросс-браузерности, о том, что существует
много трюков, помогающих сделать сайт красивым не для одного (вашего), но и для
многих популярных браузеров. И что иногда нужно написать больше кода и добавить
больше картинок, чтобы в итоге все получилось так, как задумано.
Друrие НТМL-теrи
Хотя современная НТМL-верстка по большей части блочная, все же в ней используются
не только блоки <di v>.
Ниже я перечислю по алфавиту самые популярные теги, которые помогут вам
лучше разбираться в чужой верстке и при случае блеснуть знаниями. Попробуйте
применить их при создании своей учебной веб-страницы, чтобы лучше усвоить их
назначение.
rer <а>
<а hre f="http : / /www . sitename . ru" >ccылкa< /a>
Это, можно сказать, самый главный тег, без него изобретение языка HTML вообще
не имело смысла. С помощью тега <а> создаются ссылки. Они могут вести как
на другие сайты, как в этом примере, так и на страницы внутри данного сайта. В этом
случае необязательно указывать полный адрес, начинающийся с h t t р. Так, атрибут
hre f="page2 . html" указывает на страницу, находящуюся в той же папке, что и документ,
в котором находится данная ссылка. Значение h r e f=" 1 f o l de r /page2 . html"
означает, что файл требуемой страницы page2 . html находится в папке f o l de r .
2 3ak. 436
34 Часть 1. Вспомнить все
У тега <а> есть еще несколько дополнительных атрибутов. Например, чтобы открыть
адресуемую ссылку в новом окне, тег должен иметь такой вид: <а hre f="h t tp: 1 1
www . s i tename . ru" t a rget="_Ь l an k">c cылкa</ a>. Здесь атрибут target="
Ь l a n k" указывает, что будет использовано новое окно.
1er<Ьr>
<br>
Этот одиночный тег ставят, если хотят разорвать строку и перенести текст на новую
строку. Если вам нужно не только создать строку, но и сделать отступ между
абзацами, лучше воспользуйтесь парным тегом <р> </ р>.
Jer <center>
<center> < / center>
Это парный тег, определяющий способ выравнивания объекта, например картинки,
таблицы или текста, по центру. Он может быть заменен стилями CSS и в HTML 5
исключен из стандарта. Вот пример центрирования текста с использованием CSS.
p.cente r { text-al ign:center;}
И все абзацы в НТ МL-документе, отнесенные в своих тегах с созданному вами
классу. c e n t e r , т.е. записанные по шаблону <р c l a s s =ce n t e r> текст </ р>, будут
выровнены по центру.
1er<font>
<font> < / font>
До изобретения технологии CSS этот тег был крайне популярен, поскольку только
с его помощью можно было управлять размером, цветом и начертанием любого
текста. Однако на данный момент его употребление - явный признак отсутствия
знаний о современных технологиях. В HTML 5 он уже и вовсе не включен как не соответствующий
новому стандарту. И хотя кое-где он еще встречается, например в виде
<fo n t с о l о r="#FFОООО">красный текст</ fо nt>, никогда так не делайте и всегда
пользуйтесЪ универсальными возможностями технологии CSS. К слову, визуальные
редакторы, встраиваемые в сайты (как пример в блогах и форумах), часто используют
тег <fo n t > и другие устаревшие теги. Но я полагаю, что таких со временем не останется
и код станет чистым.
1er<Ьr>
<hr>
Это одиночный тег, создающий горизонтальную линию. По умолчанию эта линия
имеет псевдотрехмерный вид, не очень эстетичный, и занимает 100% окна браузера
Глава 1 . Веб-дизайн и HTML 35
по ширине. Можно управлять ее внешним видом посредством стилей CSS. Если написать
в таблице стилей правило HR { h e i gh t: lpx; border: lpx s o l i d Ь l a c k; } ,
получится линия толщиной в один пиксель без эффекта трехмерности.
Также замечу, что сейчас часто используется и такая конструкция: <span
c l a s s ="l ine">&nb sp; </ span>, а в таблице стилей для класса l i ne указываются
дополнительные параметры: ширина, высота, цвет. Здесь значение & nbsp; - это текстовое
обозначение специального символа, которое браузеры воспринимают и воспроизводят
на экране как неразрывный пробел. Иначе говоря, в теге <span> будет
присутствовать только один пробел, но выглядеть это в окне браузера будет именно
так, как вам нужно.
Tвr <em>
<еm>текст</ ern>
Текст, заключенный в этот тег, выделяется курсивом. Впрочем, вы можете переопределить
эти свойства в стилях CSS, добавив требуемый цвет и размер и даже вообще
убрать курсивное начертание. Ранее также были популярны теги <Ь>, <i > и <u>они
обеспечивали выделение текста полужирным, курсивным или подчеркнутым начертанием
соответственно. Но поскольку в настоящее время принято избавляться от
визуального форматирования в HTML-коде, тег <em> с приписанными к нему классами
и стилями взял на себя их роль. Он указывает браузеру, что некий текст выделен и
является важным, но его внешний вид определяется средствами CSS.
Tвr <iiDg>
< i rng s rc="pi cture . j pg " >
Это одиночный тег, с помощью которого в НТМL-документ вставляются изображения.
Можно сказать, это главный дизайнерский тег, поэтому о нем мы поговорим
поподробнее.
На данный момент в НТМL-документ можно вставить изображение, сохраненное
в одном из трех графических форматов: JPG, GIF и PNG. Все остальные форматы,
такие как PSD, TIFF и ВМР, не подходят, поскольку браузерамп не поддерживаются.
Когда-то браузеры вообще поддерживали только форматы JPG и GIF, но времена меняются.
(Подробнее о форматах изображений мы будем говорить позднее.)
У тега <img> есть целый набор атрибутов. Так, атрибут s r c=" ... " определяет
путь к файлу изображения. Понятно, что без указания пути изображение на странице
не появится. Атрибут аl t ="описание" предоставляет альтернативный текстзаместитель
для данного изображения. Если по какой-либо причине картинка в браузер
пользователя не загрузилась, на ее месте будет выведен этот альтернативный
текст, который, в частности, может представпять собой краткое описание картинки.
Также это описание будет появляться на экране при наведении на картинку указателя
мыши.
36 Часть I. Вспомнить все
РвкомендвqмR
Используйте альтернативный текст только для важных в отношении восприятия документа изображениях:
некоторые люди могут пользоваться аудио-браузерами , т.е. программами, которые читают вслух
всю текстовую информацию документа, и лишняя информация наподобие "это левый верхний уголок"
в действительности никому не нужна.
Атрибуты width= " 5 0 0 " , height= " l O O " - ширина и высота изображения в пикселях.
Указывайте реальную ширину и высоту изображения, если не хотите видеть
его в браузере искаженным.
Итак, в итоге тег изображения, помещенный в документ со всеми необходимыми
атрибутами, будет иметь приблизительно такой вид.
<img s rc="pic . j pg" width= " 5 0 0 " height= " 5 0 0 " аlt=" картинка " >
Если говорить начистоту, то у тега < img> есть еще и другие атрибуты, позволяющие
определить для изображения рамку, выровнять его относительно текста, определить
отступы и т.д. Но я сейчас не вижу в них большого смысла и повторяю: пользуйтесь
CSS как более корректным и мощным средством управления внешним видом
НТМL-страницы.
1er <p>
<р>текст</р>
Этот парный тег отделяет один абзац документа от другого. По умолчанию абзацы,
описанные в документе тегом <р>, имеют отступ относительно друг друга.
rer <strong>
<st rong>тeкcт< / s t rong>
Окруженный этими тегами текст будет отображаться полужирным шрифтом. Как
и в случае тега <em>, тега логического форматирования страницы, с помощью таблицы
стилей можно изменить его воздействие на текст, добавив дополнительные свойства.
Если же вам нужен просто полужирный текст, можете воспользоваться и тегом
< s t rong>.
1er <span>
< span>тeкcт< / span>
Этот тег предназначен для задания различных свойств отдельным строкам текста.
Если тег <р> отвечает за абзац в целом, а тег <di v> - сразу за весь блок, то тег < span>
применяется к отдельным словам или строкам. Сам по себе никаких визуальных
воздействий на текст он не оказывает, т.е. без применеиных к нему дополнительно
Глава 1 . Веб-дизайн и HTML 37
стилей вы просто ничего не увидите. Но стоит придумать, как должен выглядеть выделенный
текст, и создать нужные классы, как тег < span> сразу же покажет все, на
что он способен.
Та6nмlfные rer•
Как я писала выше, на протяжении многих лет кодеры пользовались таблицами
при верстке НТМL-документов. Теперь у нас есть блоки, но таблицы сбрасывать со
счетов все же не стоит. Любые табличные данные проще и лучше всего описывать
именно с помощью табличных тегов HTML. В этом языке для создания таблиц предназначено
несколько тегов, и все они парные: <taЬle>, < t r>, < t d>.
• Тег <taЬle> - контейнер для всей таблицы.
• Тег <tr> - контейнер для строки в целом.
• Тег < td> - контейнер для отдельной ячейки.
Эти три тега вкладываются один в другой по ходу построчного создания таблицы.
Вся информация, отображаемая в таблице, должна быть заключена в теги
<td> ... < 1 td>. Размещение текста в любых других местах приводит к тому, что он либо
не отображается, либо ломает таблицу.
Вот пример НТМL-таблицы из одной строки и трех столбцов.
<taЬle>
<tr>
<td>столбец 1 < / td>
<td>столбец 2 < / td>
<td>столбец 3 < / td>
< / t r>
< / taЬle>
Чтобы добавить еще одну строку, нужно скопировать контейнер < t r > ... < / t r > со
всем его содержимым и поместить эту копию под или над имеющейся строкой, после
чего поменять прежний текст в ячейках на требуемый. Казалось бы, просто, но в работе
с таблицами есть еще много секретов, описание которых займет слишком много
места. Отложим их обсуждение на некоторое время.
rде узнать бопьwе
Эта книга - вовсе не руководство по языку HTML. И если вы хотите углубить
свои знания в этой области, обратитесь к соответствующим книгам или поищите информацию
в Интернете. Лично я за справками часто обращаюсь на сайт h t t р : 1 1 www .
htmlboo k . ru/ - один из популярных российских ресурсов, причем хорошо структурированный
и достаточно полно охватывающий тему. Здесь можно найти ответы
38 Часть 1. Вспомнить все
практически на все вопросы. Сведений, данных выше в этой главе, я думаю, вам вполне
хватит для того, чтобы совсем не растеряться и суметь при необходимости создать
хотя бы простепькую веб-страницу собственными силами.
Однако в наше время сайт очень редко может быть создан только средствами
HTML/CSS. У него, как правило, есть большая, хотя и певидимая большинству посетителей
проzраммная часть, разработкой которой занимаются веб-программисты,
а также набор изображений - пиктограммы, фото, различные иллюстрации, за которые
отвечает дизайнер (судя по всему, это вы). Ваша задача в процессе разработки
сайта - создать качественный современный дизайн, на основе которого другие сделают
работающий сайт. Из сведений о языке HTML, полученных выше, вы уже можете
составить себе представление, как делается верстка и как та или иная идея находит
свое воплощение. А в следующей главе мы немного поговорим о магии HTML 5 - новой
версии языка HTML, поражающей воображение своими возможностями и вдохновляющей на истинные дизайнерские подвиги.