Каждый обитатель Интернета рано или поздно созревает до созидания
собственного сайта. Будь то домашняя страничка или официальный сервер
родной конторы. Вами, энтузиастами, наполняется Интернет полезнейшей
информацией, гениальными идеями и откровенным бредом. Уверены, что вас
также однажды посетит светлая мысль создать свой сайт. А создание сайта
начинается с изучения хотя бы азов языка HTML и работы в редакторах.
Дерзайте! А наша задача - помочь вам.
Во "всемирной паутине" (WORLD WIDE WEB или WWW) существуют WEB-серверы
и клиенты-браузеры. Серверы показывают браузерам документы, лежащие в
каталоге, определенном для общего доступа. В принципе, это могут быть
обычные текстовые документы, созданные в блокноте. Браузер способен
принять и показать их вам.
Браузер может также принять от WEB-сервера и показать графические файлы
- картинки. Если набрать в адресной строке браузера имя файла с
фотографией, фотография вскоре окажется на экране.
Только очень утомительно просматривать документы, набирая адреса
текстовых файлов и картинок попеременно. Как было бы замечательно
объединить графику с текстом и избавить посетителя сайта от
утомительного набора адресов! И вот появился язык разметки
гипертекстовых документов (Hyper Text Markup Language - HTML), а также
серверно - клиентская связка с протоколом передачи этого самого
гипертекста (Hyper Text Transfer Protocol - HTTP).
Основой языка HTML стали "теги" (tags), внедряемые непосредственно в
основной текст документа. Создадим файл с именем INDEX.HTML, запишем в
него простую фразу и посмотрим в браузере. Увидим обычный текст,
выровненный по краю.
Теперь поместим текст внутри парного тега <CENTER> и снова откроем документ в браузере. Текст выровняется по центру.
Многие теги в HTML бывают парными и влияют на тот участок текста,
который помещен между открывающим и закрывающим тегами. Закрывающий тег
отличается от открывающего наличием "слеша" - косой черты - перед
именем тега. Например, чтобы выделить жирным шрифтом слово, поместим
его внутри тега <B> . . . </B>. Соответственно, курсивное
начертание достигается с помощью тега <I> . . . </I>.
Некоторые теги умеют манипулировать сразу с несколькими параметрами
текста. Для этого после имени тега записываются значения параметров.
Например, свойства текста определяются с помощью парного тега
<FONT>. В открывающем теге после имени можно указать значение
цвета шрифта <FONT COLOR=RED>. В этом случае выделенный участок
текста станет красным.
Можно увеличить или уменьшить размер шрифта. Для этого устанавливаем
параметр SIZE. Примерно вот так - <FONT SIZE=+3>. Получим большие
буквы, пригодные для заголовка. Можно комбинировать параметры. Для
примера выделим участок текста и сделаем его буквы большими и красными.
<FONT SIZE=+1 COLOR=RED> . . . </FONT>. Кстати, цвет шрифта
может быть абсолютно любым, если его задавать в виде шестнадцатеричного
числа, соответствующего цветовой RGB-кодировке. Например, <FONT
COLOR=#FF00FF>.
Можно даже сменить начертание шрифта. Задаем параметр FACE и указываем
в его значении название шрифта, как он отображается в списке шрифтов
WINDOWS. Например, <FONT FACE=VERDANA> . . . </FONT>. Не
беспокойтесь. Вам, скорее всего, не придется вручную печатать всю эту
ахинею. Существует множество программ, которые выполнят работу по
написанию кода за вас. А вы будете только щелкать по кнопкам. Но знать
принципы полезно.
Еще один важный тег. Если при написании текста в блокноте вы переведете
строку, браузер на это не отреагирует. Это и понятно - иногда полезно
разбивать длинные строки для наглядности кода. Чтобы перевести строку в
HTML, удобнее всего воспользоваться тегом <BR>. Этот тег
одиночный, непарный. Закрывающего тега для него не существует.
Теперь, когда мы вкратце познакомились с самим понятием тега, попробуем
вставить в наш документ графику. Делаем две текстовые строчки. И между
ними помещаем картинку. Файл картинки копируем в тот же каталог, где у
нас стоит файл INDEX.HTML. И пишем код <IMG SRC="PHOTO.JPG">, где
имя тега напоминает о слове IMAGE ("картинка"), а параметр SRC
("source" - "источник") указывает на имя файла картинки. Все это
заключаем в теги <CENTER> для красоты.
Чаще всего при написании HTML-страниц используются графические файлы
двух форматов. GIF - для малоцветных, штриховых и анимированных
картинок, требующих высокой четкости. JPG - для полно-цветных
фотографий и иллюстраций. Ни в коем случае не следует использовать
некомпрессированные форматы типа BMP. Файлы огромных размеров будут
закачиваться долго, и ваши посетители не дождутся их загрузки.
Учтите, что картинка не внедряется в текстовый файл, как это
происходит, например, в программе WORD. Текст и иллюстрация хранятся в
разных файлах. Если при публикации страницы на сайте вы забудете
поместить картинку вместе с файлом HTML, то вместо картинки браузер
отобразит пустое место.
Частая ошибка начинающего WEB-мастера - забывать о том, что
UNIX-подобные системы, установленные на большинстве серверов в
Интернете, различают большие и маленькие буквы в названии файлов. Лучше
делать так, чтобы все файлы, участвующие в построении сайта, имели в
названии только маленькие буквы латинского алфавита.
Тег <IMG> может включать в себя различные параметры. Например,
прямо указывать ширину и высоту картинки - <IMG SRC="photo.jpg"
width=400 height=300>. Это бывает полезно при масштабировании
декоративных линеек на ширину экрана. Файл линейки с шириной 2-3
пикселя займет совсем небольшой объем и будет подгружаться быстрее.
Иллюстрации обычно не масштабируют - это приводит к ухудшению качества
изображения.
Важным элементом оформления страницы являются таблицы. Таблицы не
связаны с текстом и определяются парным тегом <TABLE>. Внутри
этого тега помещаются парные теги <TR>, количество которых
определяет количество строк в таблице. Внутрь тегов <TR>
вкладываются также парные теги <TD>, количество которых
указывает, сколько столбцов будет в таблице.
Если тег <TABLE> не снабжен параметрами, то браузер
подразумевает, что ширина и высота таблицы минимальна. Ширина и высота
таблицы может быть указана как в пикселях, так и в процентах от
размеров экрана.
Таблицы удобны тем, что внутри ячейки могут быть размещены текст и
графика по вашему желанию. Таким образом, таблица может служить
средством позиционирования элементов дизайна. Цвет фона каждой ячейки
может быть определен параметром в теге <TD>.
Если таблица используется как средство позиционирования элементов
дизайна, то толстые линии границ ячеек совершенно излишни.
Нежелательные бордюры можно убрать, указав в теге <TABLE> их
нулевую ширину. Примерно так - <TABLE BORDER=0>.
Таблицы удобны и распространены на страницах сайтов. Они имеют огромное
количество возможных параметров и функций. Но работать с построением
таблиц гораздо удобнее в специальных редакторах, чем просто в блокноте.
Язык HTML замечателен и тем, что способен внедрять на страницу сайта не
только графику, но и полный набор мультимедиа - контента. Звук, видео,
трехмерные объекты - все это может быть установлено на страницу.
Например, чтобы ваша страница проигрывала в фоновом режиме MIDI-файл,
можно добавить такой тег <BGSOUND SRC="etude.mid"
LOOP="INFINITE">, где параметр LOOP определяет количество
проигрываний файла.
Звуковые файлы также могут быть проиграны непосредственно на странице.
Для ускорения загрузки рекомендуется использовать компрессированные
форматы звуковых файлов. В данном примере, с помощью тега <EMBED>
("Внедрение") к странице присоединен файл ETUDE.MP3. Разумеется,
посетитель услышит звук, только если на его компьютере установлен
соответствующий декодер. Пример: <embed src="etude.mp3"
autostart="false" hidden="false" loop="0">.
Аналогично к странице могут быть подключены видеофрагменты,
анимационные ролики, выполненные по технологии Flash, трехмерные модели
VRLM и многое другое, что сделает ваш сайт наглядным и неповторимым.
Теперь можно приступать к созданию своей домашней странички. При
подготовке очень важно соблюдать определенную последовательность.
Сначала продумайте, о чем вы хотите рассказать. Нарисуйте на листке
бумаги структуру сайта. Отметьте, как будет называться каждый файл, и
какая информация будет в нем представлена. Подготовьте все необходимое
- текст, иллюстрации. И только после этого начинайте создание самих
страниц.
Лучше всего учиться на чужих ошибках и чужих удачах. С тем чтобы не
повторять ошибок и сделать удачу своей постоянной спутницей. Погуляйте
по Интернету. Смотрите как можно больше, по вашему мнению, удачных
сайтов. Разбирайте их по косточкам, сохраняя страницы на свой диск и
просматривая в редакторах, как они устроены. Пробуйте скопировать и
сделать "не хуже". Постепенно вы обретете уверенность в своем таланте
дизайнера и будете делать только шедевры WEB-искусства.
