Урок 2. Инструментарий и первая HTML страница
В этом уроке рассмотрим инструментарий который пригодится нам для эффективной работы при создании, редактировании и просмотре HTML файлов. Нам понадобятся следующие программы:
- Текстовый редактор.
- Браузер.
- Справочник по тегам HTML(при желании).
Текстовый редактор
Для начала давайте разберемся что такое HTML файл (страница) — это обычный текстовый файл, а сайт набор страниц связанных между собой, поэтому создавать свою первую
Web-страницу мы будем в любом тестовом редакторе, подойдет обычный блокнот, но я посоветовал бы вам Notepad++ или Brackets. В чем достоинства данных программ:
- Бесплатный текстовый редактор с подсветкой синтаксиса, а именно выделением тегов, ключевых слов и параметров разными цветами. это облегчит и ускорит нам работу, при написании или редактировании HTML файла, а также при поиске нужного элемента, снизит количество возникающих ошибок;
- Позволяет работать сразу с несколькими файлами (вкладками), так как сайт представляет собой набор страниц, которые приходится редактировать по отдельности, нам понадобится редактор, способный работать сразу с несколькими документами;
- Проверка кода на ошибки;
- Возможность работать с документами разных форматов (HTML, TXT, PHP, JAVA и другие).
Браузер
Браузер — программа предназначенная для просмотраWeb-страниц. В начале подойдет совершенно любой браузер, но с опытом понадобятся сразу несколько браузеров,
для проверки правильности отображения сайта в различных браузерах. Суть в том, что каждый браузер имеет свои особенности и возможности, поэтому проверку универсальности кода требуется просматривать и корректировать код с учетом этих особенностей. Рассмотрим самые надежные и популярные: Mozilla Firefox, Google Chrome, Opera.
1.Mozilla Firefox
Простой и надежный, большое количество различных настроек, чтобы настроить его под себя, имеет большое количество различных дополнений и расширений не имеющих аналогов в других браузерах.
2.Google Chrome
Весьма простой интерфейс, большое количество расширений, но потребление оперативной памяти весьма высоко, нет возможности настроить под себя.
3.Opera
Быстрый и функциональный, есть такие особенности как предзагрузка страниц и встроенный VPN.
Справочник по тегам HTML
Запомнить все теги и их параметры наизусть в первое время очень сложно, поэтому нам понадобится шпаргалка, чтобы уточнить возникший у нас вопрос. Справочник нужен не только начинающим, но и опытным Web-мастерам не зависимо от опыта
Краткий справочник HTML тегов (Тег — краткое описание).
Онлайн справочник с описанием тегов HTML (на английском языке)
Теперь когда мы разобрались с минимально-необходимым набором инструментов напишем нашу первую HTML страницу. Я буду использовать Brackets, вы можете использовать что вам понравилось.
В текстовом редакторе составим HTML документ с простой структурой и добавим "Моя первая HTML страница" в тело документа. Назовем наш файл first.html и сохраним его.
Не забудьте сохранить файл! Названия HTML файлов должны заканчиваться на .html или .htm
Теперь если открыть файл с помощью браузера, мы увидим следующее:
Поздравляю вы создали свою первую HTML страницу.
Пару советов при изучении языка HTML:
- Не стоит заучивать все тэги, многие тэги встречаются крайне редко как в теории так и на практике.
- Чаще практикуйтесь, так вам будет проще осваивать материал.
В следующем уроке мы познакомимся с несколькими часто встречающимися тегами, узнаем что они делают и применим это все на практике.