Содержание страницы:
Основы HTML. HTML — HyperText Markup Language или по русски язык разметки гипертекста. Если коротко гипертекст это текст в котором есть отсылки к другим текстам имеющим отношение к данному. Близким для нас примером гипертекста являются страницы сайтов. HTML это не язык программирования а язык разметки, хотя новые стандарты позволяют верстальщикам делать то что раньше делали программисты.
Аббревиатуру расшифровали но легче не стало. Что же это за разметка и для чего она нужна? Вы читаете этот текст находясь на странице сайта Webonlife.ru. Эта страница является HTML файлом. Если бы не было разметки то перед вами был бы просто текст. Благодаря HTML стать разделена на абзацы все картинки и блоки на месте. Теперь подходим к самому интересному. Читайте еще: Как открыть пункт выдачи заказов интернет магазинов.
Что представляет собой HTML?
Как уже упоминалось, HTML — это язык гипертекстовой разметки, с помощью которого наши коллеги верстальщики непосредственно создают структуру web-страниц (одной из разновидностей которых являются лендинги) и email-писем.
Если объяснить суть данного понятия простыми и наглядными образами, то можно сказать, что HTML — это тело, а CSS (Cascading Style Sheets — каскадные таблицы стилей) — одежда. В то время как CSS определяет внешний вид web-страницы, HTML формирует ее структуру (скелет) посредством заголовков, списков и других подобных элементов, начиная от начала страницы — хедера, и до ее конца — футера.
Неспроста также сказано, что HTML — это язык разметки: именно метки или как их еще называют тэги (tags), заключенные в угловые скобки, формируют те элементы, из которых и состоит код HTML. В большинстве своем, элементы данного языка имеют открывающий и закрывающий тэг. От правильного (валидного) использования последних зависит не только адекватность структуры веб-страницы, но и правильность ее отображения интернет-браузерами.
Базовые понятия HTML
Итак, первым делом давайте ознакомимся с тем, как создать новый HTML документ. Для этого нужно знать из чего состоит каркас HTML документа, но прежде чем приступить к рассмотрению каркаса, давайте ознакомимся со значением такого слова, как тег.
Тег – это так называемый контейнер, который сообщает браузеру, как нужно отображать тот или иной элемент. Например, нам нужно чтобы текст был выделен абзацами. Для этого нужную часть текста помещаем в теги абзацев <p>.
Как видите HTML тег <p> парный, т.е. абзац начинается открывающим тегом <p> и заканчивается закрывающим тегом </p>. Это сообщает браузеру, что данный «контейнер» завершен. Также существуют непарные теги, которые закрывать не нужно, но об этом мы поговорим чуть позже.
Теперь давайте перейдем к самому процессу создания нового HTML документа. Для этого можно воспользоваться любой удобной для вас программой. Я бы рекомендовал как для работы, так и для обучения использовать программу Dreamweaver или Notpade++.
Первая программа специально предназначена для работы с HTML, PHP, CSS и т.д., но ее я бы не советовал использовать, если вы только начинаете изучать язык гипертекстовой разметки HTML. Она прекрасно подойдет для разработки сайтов, если вы уже обладаете нужными знаниями в данной области.
Вторая программа под названием Notpade++ является простым текстовым редактором, который тоже отлично подойдет для наших целей, а именно для изучения HTML. Лично я при подготовке статьи пользовался именно программой Notpade++, так как она очень проста в использовании и не будет отвлекать внимание разнообразными доступными функциями.
Плюс ко всему этому она очень легкая и не сильно нагружает компьютер (моему ноутбуку порядка 3-х лет и он с трудом дышит, когда на нем запущено несколько программ, таких как, например, Adobe PhotoShop CS5 + Dreamweaver + FireFox и т.д).
Итак, первым делом создаем новый документ, например, index.html. Для этого можно создать простой текстовый документ и изменить его расширение с txt на html. Для того чтобы изменить расширение через проводник (если вы используете операционную систему Windows), нужно первым делом зайти в Панель управления – Свойства папок – Вид и снять галочку с пункта «Скрывать расширение для зарегистрированных типов файлов». После этого в проводнике вы сможете просматривать и изменять расширения для файлов.
Теперь давайте подробно рассмотрим каждую строчку, которая присутствует в приведенном выше коде. Сразу хочу обратить ваше внимание на то, что данную структуру нужно сразу запомнить, так как она лежит в основе каждой HTML страницы.
- <!DOCTYPE html PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»> — данная строчка является обязательной. С ее помощью мы указываем, к какой версии стандарта принадлежит данный документ. В данном случае мы используем HTML версии 4.01.
- Корневой тег <html> — указываем браузеру, что все содержимое будет написано на языке HTML. Данный тег парный и его нужно закрывать в самом конце страницы. Все содержимое страницы будет находиться между тегами <html>.
- Тег <head> — данный тег тоже парный. С его помощью мы создаем так называемый контейнер для служебных тегов. В нем мы можем подключать к HTML документу таблицы стилей, скрипты, указывать ключевые слова, краткое описание для страницы и многое другое. Информация, которая находится между тегами <head>, не выводится пользователям, за исключением названия страницы.
- Теги <body> — являются «телом» страницы. Между этими тегами будет находиться вся та информация, которая будет видна пользователям, которые будут просматривать эту HTML страницу.
- Теги <title> — заголовок страницы. Он играет очень важную роль в поисковой оптимизации, так как именно его будут видеть пользователям при просмотре результатов поиска.
- <meta http-equiv=»Content-type» content=»text/html» charset=»windows-1251″> — указываем тип документа и его кодировку. В данном случае это текстовый или HTML документ с кодировкой windows-1251. Для русского сегмента интернета стоит использовать именно эту кодировку.
- <meta content=»ключевые слова через запятую»> — указываем ключевые слова для данной HTML страницы. Данное поле, как и следующее, предназначено для поисковых систем и не будет видно посетителям вашего сайта.
- <meta name=»description» content=»краткое описание»> — краткое описание HTML страницы. В кавычках вводим краткое описание для данной страницы, например, в моем случае это будет выглядеть примерно так: «Базовые понятия HTML. Как создать HTML страницу».
Что такое теги HTML
- <link rel=»shortcut icon» type=»image/ico» href=»/favicon.ico»> — указываем путь к фавикону. Данная картинка отображается в браузере в адресной строке рядом с адресом страницы. Ее также использует поисковая система Yandex при отображении результатов поиска.
- <link rel=»stylesheet» href=»/style.css» type=»text/css» media=»screen»> — прописываем путь к таблице стилей CSS. Более подробно о CSS вы можете прочитать в статьях «Знакомство с CSS» и «Каскадные таблицы стилей. Свойства текста, полей, отступов, границ и шрифтов».
- <script language=»JavaScript» src=»agent.js»></script> — подключение к документу скриптов.
На этом мы заканчиваем знакомиться с языком гипертекстовой разметки HTML. Как видите данный язык очень простой в изучении и для того, чтобы создать HTML страницу не нужно прикладывать особых усилий. В следующих статьях рубрики «HTML, CSS, PHP и MySQL» мы продолжим изучение HTML, поэтому, если вы не хотите пропустить обновлений блога, вы можете подписаться на новости сайта любым удобным для вас способом в пункте «Подписка».
Не так страшен HTML, как его рисуют, верно?
Понятно, что существует достаточно много других тэгов, благодаря которым задаются дополнительные параметры структуры web-страницы. Однако даже такого краткого обзора будет достаточно для того, чтобы не растеряться, если вам придется столкнуться с необходимостью вникнуть в код.
Существует немало качественных интернет-ресурсов, посвященных тематике HTML и CSS. Говоря на языке маркетологов, можно сказать, что входящий маркетинг в этой нише достаточно хорошо развит, и при желании можно увеличить свои познания в данной сфере, отыскав подходящий ресурс в том числе и в русскоязычной части Сети.
Избитая фраза о том, что знание — это сила, не теряет своей актуальности, а уточненный ее вариант «применение знания — это сила» может принести еще лиды и финансовые дивиденды. И кто знает, возможно более глубокое понимание того, как на уровне HTML устроен и функционирует ваш лендинг, поможет вам более полно использовать существующие или даже внедрить какие-то новые приемы, которые могут посодействовать увеличению продаж. Читайте еще: Как делать инфографику.
Если же все-таки у вас нет желания или времени — все мы люди занятые — вникать в HTML, всегда остается возможность использовать функционал LPgenerator для создания качественной целевой страницы.