RSS

Урок 1. Первая HTML-страница или начало большого пути

Самый длинный путь начинается с первого шага. Собственно, путь в сайтостроение начинается с первого созданного именно Вами документа, и этот документ – Ваша первая 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.

notepad ++ описание

phpDesigner 8 – достаточно мощная программа для верстки и программирования. Рекомендую использовать в дальнейшем. Приложение содержит готовые шаблоны страниц HTML, PHP и т.д. Вы так же можете создать свой шаблон. Способна подсвечивать синтаксис языков PHP, HTML, XHTML, CSS, JS, XML, SQL и многих других. Но еще одна важная особенность это автодополнение тегов, атрибутов, функций PHP и др. Из программы Вы можете сразу запустить проект и посмотреть результат.

phpDesigner описание

Другие программы…

На выбор можете использовать и другие пакеты:

Adobe Dreamweaver – мощный пакет от Adobe, ранее приобретенный у Macromedia (той самой, которая когда-то активно внедряла Flash ролики и собственно была родоначальницей  Flash). Пакет платный.

HTML Pad – поддерживает многие языки (HTML, VB, ASP, Perl и др.)

PSPad еще одна бесплатная альтернатива блокнота, понимающая HTML, CSS

EditPlus – так же понимает большое кол-во синтаксисов, в том числе и HTML c CSS.

На этом пока все.