Урок 2. Инструментарий и первая HTML страница

  В этом уроке рассмотрим инструментарий который пригодится нам для эффективной работы при создании, редактировании и просмотре HTML файлов. Нам понадобятся следующие программы:

• Текстовый редактор.
• Браузер.
• Справочник по тегам HTML(при желании).

Текстовый редактор

Для начала давайте разберемся что такое HTML файл (страница) — это обычный текстовый файл, а сайт набор страниц связанных между собой, поэтому создавать свою первую

Web-страницу мы будем в любом тестовом редакторе, подойдет обычный блокнот, но я посоветовал бы вам Notepad++ или Brackets. В чем достоинства данных программ:

• Бесплатный текстовый редактор с подсветкой синтаксиса, а именно выделением тегов, ключевых слов и параметров разными цветами. это облегчит и ускорит нам работу, при написании или редактировании HTML файла, а также при поиске нужного элемента, снизит количество возникающих ошибок;
• Позволяет работать сразу с несколькими файлами (вкладками), так как сайт представляет собой набор страниц, которые приходится редактировать по отдельности, нам понадобится редактор, способный работать сразу с несколькими документами;
• Проверка кода на ошибки;
• Возможность работать с документами разных форматов (HTML, TXT, PHP, JAVA и другие).

Скачать Notepad++

Скачать Brackets

Браузер

Браузер — программа предназначенная для просмотраWeb-страниц. В начале подойдет совершенно любой браузер, но с опытом понадобятся сразу несколько браузеров,

для проверки правильности отображения сайта в различных браузерах. Суть в том, что каждый браузер имеет свои особенности и возможности, поэтому проверку универсальности кода требуется просматривать и корректировать код с учетом этих особенностей. Рассмотрим самые надежные и популярные: Mozilla Firefox, Google Chrome, Opera.

1.Mozilla Firefox

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

Скачать Mozilla Firefox

2.Google Chrome 

Весьма простой интерфейс, большое количество расширений, но потребление оперативной памяти весьма высоко, нет возможности настроить под себя.

Скачать Google Chrome

3.Opera 

Быстрый и функциональный, есть такие особенности как предзагрузка страниц и встроенный VPN.

Скачать Opera

Справочник по тегам HTML

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

Краткий справочник HTML тегов (Тег — краткое описание).

Краткий справочник HTML

Онлайн справочник с описанием тегов HTML (на английском языке)

Справочник HTML

Теперь когда мы разобрались с минимально-необходимым набором инструментов напишем нашу первую HTML страницу. Я буду использовать Brackets, вы можете использовать что вам понравилось.

В текстовом редакторе составим HTML документ с простой структурой и добавим "Моя первая HTML страница" в тело документа. Назовем наш файл first.html и сохраним его.

Не забудьте сохранить файл! Названия HTML файлов должны заканчиваться на .html или .htm 

Теперь если открыть файл с помощью браузера, мы увидим следующее:

Поздравляю вы создали свою первую HTML страницу.

Пару советов при изучении языка HTML:

• Не стоит заучивать все тэги, многие тэги встречаются крайне редко как в теории так и на практике.
• Чаще практикуйтесь, так вам будет проще осваивать материал.

В следующем уроке мы познакомимся с несколькими часто встречающимися тегами, узнаем что они делают и применим это все на практике.

Урок 3. Тег title и форматирование текста.