Понятие тега

Урок 2. Понятие тега. Каркас страницы

Любая разработка это сложный продолжительный процесс. Чем удобнее среда, в которой осуществляется процесс разработки, тем проще двигаться вперед и меньше вероятность совершить ошибку. Многие специальные программы для HTML разработчиков подсказывают, что можно использовать в данном случае, а так же выполняют проверку написанного кода. Помимо этого, нужно позаботиться о средствах проверки. Где и как проверять – это важно. Ведь если ваша страница будет некорректно отображаться у пользователей, они просто не смогут ее просмотреть.

Набор программ.

Первое, с чего начинается любая разработка – working environment (рабочее окружение). Простыми словами – тот набор программ, который нам понадобится для работы. Самое простое – это использовать любой текстовый редактор. Но в большинстве случаев это неудобно. Для быстрой и качественной разработки существуют специальные средства, которые подсвечиваю ошибки, подсказывают правильное написание тегов и атрибутов, проверяют на правильность весь html документ, и показывают, как будет выглядеть готовый результат. Таких программ много, возможности разные, да и условия использования разные. Есть программы для Linux, Windows, Open Source, бесплатные, платные. Я бегло пройдусь по самым популярным их них.

1. Браузеры. Хоть html код и является стандартом, но всё же в разных браузерах страница может отображаться по-разному. Плюс нужно учитывать различные разрешения компьютеров, планшетов, телефонов. Я рекомендую установить самые популярные браузеры и проверять результат работы в разных браузерах. К ним относятся:

  • Google Chrome
  • Яндекс.Браузер
  • Mozilla Firefox
  • Opera
  • Internet Explorer
  • Safari

2. Среда разработки. Самое простое – использовать стандартный текстовый редактор notepad, но я рекомендую использовать один из специализированных редакторов:

  • Notepad++. Совершенно бесплатен. Текстовый редактор, но с расширенными возможностями. Знает много языков программирования, в том числе HTML и CSS. Подсвечивает цветом синтаксис.
  • Macromedia (Adobe) dreamweaver. Это очень мощный инструмент. Наверно, даже лучший. Но платный.
  • CoffeeCup HTML Editor. Неплохая программа для разработки HTML страниц. Достаточно простая в освоении. Но платная.
  • Magic HTML Studio. Современная среда разработки. Бесплатная. Достойный продукт, но на английском языке. Если очень плохо знаете английский, то могут быть проблемы.
  • Zend Studio. Очень крутая среда разработки. Но она больше подойдет для программирования на PHP или Java. Платная. Если интересно программирование или планируете помимо HTML коснуться PHP, рекомендую ознакомиться с возможностями.

3. Графические редакторы. Ну какая современная web страница обойдется без графики. Графика уже давно и везде. Она облегчает понимание материала, делает красивой обычные скучные тексты. Обзавестись каким-нибудь графическим редактором придется, хотя бы самым простым. Я их даже перечислять не буду, их огромное множество как платных, так и бесплатных.

Понятие тега, атрибута, элемента

Из предыдущей главы мы узнали, что HTML страница строится с помощью специальных слов, которые называются тегами. Тег – это специальное слово, означающее для браузера некоторую инструкцию. Чтобы выделить теги из текста они заключаются между знаками больше и меньше.
<html>
            <body>
                        <p>
                                    Текст<br/>
                                    Текст
                        </p>
            </body>
</html>

Теги бывают парные и одиночные. Парные теги это теги, которые нужно открыть и закрыть. Например, тег абзаца <p> нужно открыть, а по завершению его действия – закрыть </p>. <p> — называется открывающим тегом, </p> — называется закрывающим тегом. Закрывающий тег должен быть таким же, как и открывающий, только со слешем (/) перед тегом. Одиночный тег закрывать не нужно, но по некоторым стандартам (XHTML) слеш должен присутствовать в закрывающем теге, но после тега, как бы сразу его закрывать. Непарный тег, например, переход на новую строку <br/> или тег вставки изображения <img />

Регистр букв при написании тегов значения не имеет. Браузеры понимают как заглавные буквы, так и строчные в равной степени. <html> и <HTML> — одно и то же. Я рекомендую соблюдать одну стилистику для простоты понимания написанного. Если вам нравится писать теги заглавными буквами, значит пишите весь документ заглавными тегами.

Почти у всех тегов есть атрибуты. Это некоторые дополнительные свойства для тега. Например, есть тег вставки изображения <img />. Нам нужно указать, откуда брать это изображение, какого размера оно должно быть в документе, и многое другое. Для этого есть атрибуты src, width, height. Тег с атрибутами выглядит следующим образом:

<img src=”http://mysite.com/images/image.jpg” width=”100” height=”200” />

Ну а элемент, это открывающий тег, закрывающий тег и содержимое тега:

<strong/>это жирный текст<strong/>

У разных тегов разный набор атрибутов и всевозможных значений. Для того, чтобы среда разработки вам подсказывала, какие атрибуты могут быть у данного тега, я и рекомендовал поставить специальный редактор. Можно всё найти и в справочниках, но куда удобней, когда вам тут же выпадает список атрибутов, из которых нужно просто выбрать нужный.

Вложенность элементов

Как видите, ничего сложного нет. Главное понять основу, атрибуты подскажет среда разработки. Есть еще один важный момент, который нужно усвоить. Содержимое элемента может быть не только текст, но и другой элемент. Вкладывать элементы друг в друга можно и нужно, причем, сколько угодно много раз. Самое главное – соблюдать порядок вложенности, т.е. в каком порядке теги открывались в таком они должны закрываться:

<strong><em>жирный курсив</em></strong> - правильно
<strong><em>жирный курсив</strong></em> - НЕ правильно

Для того, чтобы не запутаться в иерархии и закрывать теги в нужном порядке используются отступы. Пишите структурированно, это и вам будет проще и другим людям.

<html>
            <body>
                        <p> Текст абзаца </p>
            </body>
</html>

Вот пример одной из страниц моего блога. Обратите внимание на урони вложенности:

Пример HTML страницы

Основа страницы

Абсолютно любая HTML страница это текстовый файл “<имя файла>.html” следующего содержания:

<!DOCTYPE html>
<html>
            <head>
            Заголовочный блок. Здесь содержится служебная информация.
            </head>
            <body>
            Тело страницы. Всё что мы видим на странице, содержится здесь
            </body>
</html>

Самая первая строка содержит информацию о типе документа. Здесь может быть либо просто указание на тип документа, либо расширенное указание поддерживаемого стандарта. Далее следует тег страницы <html>, в котором содержится 2 блока – заголовок и тело. В заголовке содержится служебная информация: Название страницы, описание, ключевые слова, подключаемые модули, подключаемые скрипты, и многое другое. Тело страницы содержит информацию, которую видит пользователь.

Комментарии

В html документе есть специальный тег, который можно увидеть только в исходном коде страницы, для разработчиков. Браузеры этот тег игнорируют. Этот тег используется для комментариев. Выглядит он так:

<!--Здесь написан комментарий-->

Используйте его для описания не очевидных ситуаций. Такие подсказки помогут вам разобраться в написанном коде, спустя долгое время. Это правило хорошего тона — документировать написанный код.

Нужные программы подобраны и установлены. Обязательные части HTML страницы мы знаем. Не забывайте проверять все свои разработки в различных браузерах и документировать сложные участки кода. Всем удачи!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *