 |
Шаг 2. Создание HTML-документа
|
|
|
|
Шаг 1. Основные понятия
Чтобы разговаривать на одном языке, а также для лучшего понимания темы, вначале следует обговорить термины, которые будут использоваться в тексте. Этот шаг при желании можно пропустить, а затем вернуться к нему еще раз, если вы встречаете слово, которое вам не понятно.
Веб-страница
Веб-страницей называется сетевой документ, открываемый в браузере. Обычно веб-страница создается в формате HTML и содержит, как правило, текст, изображения и ссылки. В связи с развитием технологий, веб-страницей также могут называться документы и в другом формате, например, XML, Flash, PDF и т.д.
Сайт (интернет-ресурс)
Cайт — это набор отдельных веб-страниц, которые связаны между собой ссылками и единым оформлением.
HTML (HyperText Markup Language, язык разметки гипертекста)
HTML — это система верстки веб-страниц, которая определяет, какие элементы и как должны располагаться в документе. Чтобы показать, что мы имеем дело не с обычным текстовым документом, используется термин HTML-документ. Подобные документы открываются под управлением браузера.
HTML-документ
Обычный текстовый файл, который может содержать в себе текст, теги и стили. Изображения и другие объекты хранятся отдельно. Содержимое такого файла обычно называется HTML-код.
Браузер
Браузером называется программа для просмотра веб-страниц. Браузер анализирует код HTML, находит специальные символы, называемые тегами, и использует их для отображения изображений, изменения вида текста, создание ссылок на другие веб-страницы и т.д.
Наиболее популярны следующие браузеры: Internet Explorer, Firefox, Opera.
Тег
Тег — это специальный символ разметки, который применяется для вставки различных элементов на веб-страницу таких как: рисунки, таблицы, ссылки и др. и для изменения их вида. Для обозначения тегов используется символ <тег>. Теги нечувствительны к регистру, поэтому запись <B> и <b> эквивалентна.
|
|
|
Контейнер
Контейнером называется парный тег, внутри которого могут располагаться другие теги. Контейнер требует закрывающего тега, обозначаемого </тег>. Таким образом, контейнер состоит из открывающего тега (<тег>) и закрывающего (</тег>).
Ссылки (гиперссылки)
Ссылки являются основой сетевых документов и позволяют переходить с одной веб-страницы на другую. Особенность их состоит в том, что сама ссылка может указывать не только на HTML-файлы, но и на файл любого типа, причем этот файл может размещаться совсем на другом сайте. Главное, чтобы к файлу, на который делается ссылка, был доступ.
CSS (Cascading Style Sheets, каскадные таблицы стилей)
CSS или стили — это набор параметров форматирования, который применяется к элементам документа, чтобы изменить их внешний вид. Возможность работы со стилями издавна включают в развитые издательские системы и текстовые редакторы, тем самым, позволяя одним нажатием кнопки придать тексту заданный, заранее установленный вид. Теперь это доступно и создателям сайта, когда цвет, размеры текста и другие параметры хранятся в определенном месте и легко «прикручиваются» к любому тегу.
Редактор веб-страниц
Хотя HTML-документ представляет собой обычный текстовый файл и его можно править в любом текстовом редакторе, для этой цели лучше использовать специализированные программы, которые называются редакторами веб-страниц. Такие программы по своему подходу делятся на WYSIWYG-редакторы и HTML-редакторы.
WYSIWYG (What You See Is What You Get; Что видишь, то и получишь)
Визуальный редактор, в котором элементы отображаются так, как они впоследствии будут показаны в браузере.
|
|
|
HTML-редактор
Редактор, предназначенный для добавления и изменения кода HTML. В отличие от обычных текстовых редакторов здесь существует подсветка синтаксиса, проверка правильности кода, удобное добавление и редактирование параметров тегов, и многое другое.
Кодировка
Чтобы русскоязычные символы корректно отображались в браузере, их необходимо указывать в определенной кодировке. Браузер понимает, какая кодировка используется в документе, если определенным образом настроен веб-сервер или внутри веб-страницы добавлен соответствующий параметр.
Веб-сервер
Веб-сервером называется компьютер, на котором хранятся документы сайта. Одновременно так же называется программа, которая обеспечивает выдачу документов при их запросе браузером, а также работу с различными сервисами. Наиболее популярными веб-серверами являются Apache и Internet Information Server (IIS).
Шаг 2. Создание HTML-документа
Поскольку HTML-файл является обычным текстовым документом, то для написания кода HTML и создания веб-страницы подойдет любой текстовый редактор, например «Блокнот» (Notepad), который входит в комплект Windows. Большинство авторов так и советуют — используйте Блокнот, говорят они и точка. Но мы заявляем — забудьте об этой программе, она не предназначена для создания и редактирования HTML-кода. Существует целый класс HTML-редакторов специально «заточенных» для создания отдельных веб-страниц и сайтов целиком. Если ваша цель — написание небольшого HTML-кода, то разницы нет, в каком редакторе его писать. Но если вы хотите серьезно и эффективно подойти к созданию сайта, воспользуйтесь редакторами, которые помогут вам в этом. «Эффективно» в данном случае означает достижение требуемого результата с наименьшими затратами. Сюда входит время, затраченное на написание корректного кода, исправление ошибок, тестирование и т.д.
Далее все манипуляции с HTML будем производить в HTML-редакторе Nvu. Его достоинства следующие.
· Эта программа бесплатная для использования, скачать последнюю версию можно с сайта http://nvu.mozilla.ru.
· Программа грамотно русифицирована, также имеется справка и документация на русском языке.
· Это визуальный редактор, работа в нем напоминает работу в текстовом редакторе, и результат виден сразу же, как он будет отображаться в окне браузера.
|
|
|
· Можно переключаться между несколькими режимами редактирования — визуальным, кодом HTML и режимом отображения тегов.
· Встроенный менеджер сайта дает возможность управлять множеством HTML-документов и отслеживать их изменения.
· Легко добавлять и менять популярные элементы веб-страниц, такие как: формы, таблицы, изображения.
· Работа с шаблонами позволяет модифицировать дизайн в одном месте, в то время как он автоматически применяется к множеству документов.
· Nvu построена на открытом коде. Это означает динамичное развитие программы, добавление новых возможностей, появление тем и расширений.
· Имеется мощный встроенный редактор CSS с предварительным просмотром результата.
· Есть возможность использования стилей вместо параметров тегов.
· Код HTML и CSS формируется в соответствии с существующими стандартами и спецификациями.
После запуска программы минимальный первоначальный код будет создан автоматически.
На рис. 2.1 показан вид программы Nvu в режиме редактирования HTML-кода.
Рис. 2.1. Исходный код пустой веб-страницы
Поскольку первоначально документ не содержит в себе нашего текста, а только служебную информацию, текст перед просмотром результата следует добавить. Для этого используется место между тегами <body> и </body>. В примере 2.1 показан код после того, как в него вставлен подходящий текст.
Пример 2.1. Код HTML с текстом
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <meta content="text/html; charset=Windows-1251" http-equiv="content-type"> <title></title> </head> <body> Не беспокойся о мелочах. Если имеешь убеждение, то мелочи склонны подчиняться обстоятельствам. Твоим планом может быть следующее. Выбери что-нибудь и назови это началом. Затем иди и стань лицом к началу. Встав лицом к лицу с началом, позволь ему сделать с собой все, что угодно. Я надеюсь, что твои убеждения не позволят тебе выбрать начало с причудами. Смотри на вещи реально и скромно. Начни это сейчас! Флоринда Доннер, "Сон ведьмы" </body></html>Теперь надо сохранить файл в определенном месте, чтобы мы его могли просмотреть в браузере. Хотя в Nvu и встроен предварительный просмотр результата, он предназначен лишь для предварительной оценки результата, ведь пользователи будут смотреть нашу веб-страницу именно в браузере.
|
|
|
Нажимаем на кнопку Сохранить (
) на панели инструментов Nvu или используем комбинацию клавиш <Ctrl>+<S>. После чего появляется окно, где просят ввести заголовок страницы. Это текст, который будет отображаться в заголовке окна браузера. В коде HTML заголовок указывается между тегами <title> и </title>, но поскольку мы ничего там не указали, Nvu автоматически запрашивает нужный текст (рис. 2.2).
Рис. 2.2. Окно для ввода текста заголовка страницы
Теперь осталось только указать место, куда сохранить наш файл (например, C:\www\) и задать его имя. По умолчанию имя файла совпадает с введенным заголовком, но можно указать любое другое подходящее. Заметьте, что расширение у файла должно быть html, именно по нему операционная система определяет, что имеет дело с HTML-документом.
Замечание 1
Хотя файлы можно называть как угодно, в том числе и по-русски, рекомендуется это делать, только когда надо создать один-два отдельных документа на локальном компьютере. При создании сайта и его размещении в Интернете, используйте в именах файлов только латинские символы без пробелов и в нижнем регистре (маленькими буквами, значит).
Замечание 2
Обычно к файлу добавляется расширение html. Вы также можете повстречать расширение и htm. Разницы между такими формами написания нет, однако заметим, что расширение html встречается чаще, его и будем придерживаться в дальнейшем.
Чтобы посмотреть результат в браузере, можно пойти двумя путями.
1. Перейти в папку, куда мы сохранили наш файл, и щелкнуть по нему. В этом случае откроется браузер установленный по умолчанию и документ в нем будет загружен автоматически.
2. Запустить браузер самостоятельно и выбрать пункт меню Файл > Открыть (<Ctrl>+<O>), после чего указать путь к файлу. Можно также написать полный путь к файлу в адресной строке браузера.
Смотрим, что получилось (рис. 2.3).
Рис. 2.3. Веб-страница в браузере
Ба, что это!? Итог выглядит совсем не так, как ожидалось. Переносов строк нет, все отображается сплошным текстом. Чтобы понять, почему это произошло, следует знать особенности HTML.
Шаг 3. Особенности HTML
Прежде чем редактировать код веб-страницы, следует принять во внимание некоторые особенности, которые присущи HTML при работе с текстом.
|
|
|
