Самый длинный путь начинается с первого шага. Собственно, путь в сайтостроение начинается с первого созданного именно Вами документа, и этот документ – Ваша первая HTML страница. С него-то мы и начнем.
Для создания страниц можно использовать специализированные средства, такие как phpDesignerPro, Adobe Dreamweaver или SharePoint от Microsoft, но в большинстве случаев можно обойтись более простыми средствами, такими как стандартный Блокнот Windows или его расширенная версия – «Notepad ++».
Для начала создания первой страницы, открываем блокнот (Пуск-Стандартные-Блокнот), создаем новый документ и вносим код указанный в примере 1. Для создания структуры HTML документа в коде используются теги <html>, <head>, <body>, прописанные в угловых скобках (<…>). В большинстве случаев используются парные теги, первый из которых открывает значение, а второй – закрывает (закрывающий тег содержит «/»). Необходимо запомнить простые правила, чтобы создавать валидный (правильный) код с первого раза:
- Вся разметка страниц HTML проводится с использованием тегов.
- Почти все теги парные (открывающий и закрывающий), за исключением небольшого количества тегов форматирования текста.
- Все, что написано внутри пары тегов подчиняется правилам примененного тега, в том числе использование другого тега.
- Для удобства теги лучше располагать «лесенкой», т.е. подчиненные теги прописываются с некоторым отступлением от начала управляющего тега.
Что такое валидность кода HTML и как ее проверить, будет рассказано в следующем уроке.
Пример 1. Создание первой HTML-странички
<html>
<head>
</head>
<body>
Этот документ читается как HTML
</body>
</html>
Итак, первый документ создан. Теперь его необходимо сохранить, для чего используется команда «Сохранить как…», и при сохранении документа, ему присваивается любое имя (желательно на латинице) и вместо расширения .txt пишется .html или .htm. Это важно, поскольку файлы с расширением отличным от указанного не воспринимаются машинами как необходимый тип документа, и могут выполняться другими программами «по умолчанию».
После сохранения, Вы увидите файл со значком в виде странички. У меня установлен браузер Opera по умолчанию, поэтому значок выглядит так:
Открыв двойным кликом этот документ, мы увидим в браузере нашу первую страницу с текстом «Этот документ читается как HTML». Конечно, до сайта далеко, но мы только начинаем 🙂
Вторым шагом в создании документа HTML будет формирование «шапки» и «тела». Создается это также с использованием тегов <head> и <body>, следующими непосредственно друг за другом. На практике это выглядит так:
Пример 2 – голова и тело
<html>
Этот документ читается как HTML
<head>
Это шапка документа, не отображаемая пользователю.
</head>
<body>
Это – тело документа, которое будет виден пользователю.
</body>
</html>
Разделение на голову и тело можно сравнить с нервной системой человека. «Всем управляет голова» — выражение верное именно для HTML страниц, ибо в Голове находятся управляющие элементы, которым подчиняются элементы, заключенные в Теле документа.
Разбираться с деятельностью «Головы», мы, пожалуй, будем немного позже. Чтобы понять правила работы, сначала «поковыряемся» в Теле.
«Сначала было слово»… Вот, со слова начнем и мы. Для отображения на страницах используется текст, и форматирование текста – основная часть создания сайта. Вся последующая работа будет вестись в теге <body>
Для просмотра страницы открываем созданную страницу в своем браузере и одновременно открываем этот же документ редактором, т.е. блокнотом.
Пишем любой текст между тегами <body></body>, например, «Этот текст я хочу увидеть в окне браузера, потому что это первый мой документ».
Теперь придадим тексту красоты.
Для придания свойств тексту, таких как полужирный, курсив, подчеркнутый, применяются управляющие теги <i> </i>, <u> </u> и <b> </b>. Первый тег присваивает тексту курсивное начертание, второй – подчеркивание, третий – полужирное. А также применим тег «br» для разрыва строки. Код страницы будет выглядеть так:
<html>
<head>
</head>
<body>
Этот <u>текст я хочу</u> увидеть <b>в <i>окне</i> браузера, </b> <br>потому что <i>это <b>первый</b> мой документ</i>
</body>
</html>
Сохраняем изменения и обновляем страницу в браузере. В результате, в браузере мы увидим:
Этот текст я хочу увидеть в окне браузера,
потому что это первый мой документ
Более подробно с тегами форматирования, мы продолжим знакомиться на следующих уроках.
Написание кода лесенкой, не принципиально, показанный выше пример можно разместить в одну строку (сплошным текстом), и результат будет такой же
<html> <head></head><body>Этот <u>текст я хочу</u> увидеть <b>в <i>окне</i> браузера,</b> <br>потому что <i>это <b>первый</b> мой документ</i></body></html>
Но читать и редактировать такой код сложно, поэтому используется «лесенка» для лучшего восприятия и редактирования.
Специализированные программы, кроме Notepad ++, дают возможность просмотра результата в окне самой программы. Кроме того, можно открыть отредактированную страницу в браузере непосредственно из редактора. Для удобства пользования в специальных редакторах применяется синтаксическая подсветка кода и может использоваться набор стандартных HTML тегов для быстрой их вставки.
Список программ HTML-редакторов с кратким описанием их возможностей.
Notepad ++ — бесплатный редактор, заменяющий стандартный блокнот и дающие очень широкие возможности. Способен подсвечивать синтаксис многих языков программирования, в том числе и HTML, JavaScript, CSS, PHP.
phpDesigner 8 – достаточно мощная программа для верстки и программирования. Рекомендую использовать в дальнейшем. Приложение содержит готовые шаблоны страниц HTML, PHP и т.д. Вы так же можете создать свой шаблон. Способна подсвечивать синтаксис языков PHP, HTML, XHTML, CSS, JS, XML, SQL и многих других. Но еще одна важная особенность это автодополнение тегов, атрибутов, функций PHP и др. Из программы Вы можете сразу запустить проект и посмотреть результат.
Другие программы…
На выбор можете использовать и другие пакеты:
Adobe Dreamweaver – мощный пакет от Adobe, ранее приобретенный у Macromedia (той самой, которая когда-то активно внедряла Flash ролики и собственно была родоначальницей Flash). Пакет платный.
HTML Pad – поддерживает многие языки (HTML, VB, ASP, Perl и др.)
PSPad – еще одна бесплатная альтернатива блокнота, понимающая HTML, CSS
EditPlus – так же понимает большое кол-во синтаксисов, в том числе и HTML c CSS.
На этом пока все.