Добрый день!
Вот мы с вами и перешли ко второй лекции, а значит базовая теория уже позади. Также мы с вами разобрали, какие инструменты нам, как верстальщикам, с вами понадобятся. Естественно такие моменты, как работа с графическим редактором, мы с вами разбирать не будем, поскольку проходим курс именно HTML-программирования.
Сегодня мы с вами постепенно перейдём к разбору самого файла html и узнаем из чего он состоит.
Итак, мы с вами уже разобрали, что сайт состоит из файлов. Основными файлами, которые именно формируют страницы сайта, как раз и являются html-файлы. Их формат - это просто текстовый документ.
Можем даже сделать с вами простейшую страницу в виде такого примера:
1. Создаём на своём компьютере обычный текстовый документ (.txt).
2. Открываем его с помощью блокнота и вписываем в него любой текст, например, "Привет, мир!". Закрываем документ, сохраняя его.
3. Прямо в названии документа (нажимаем правой кнопкой мыши > Переименовать) меняем расширение файла с .txt на .html.
4. Двойным щелчком открываем его. Браузер, который используется у вас по умолчанию, откроет документ новой вкладкой, и на этой вкладке вы увидите слова "Привет, мир!".
Естественно, сайты сейчас так не пишутся.
Для начала, необходимо установить редактор кода. Если вы не выбрали, на каком из них вы будете работать, то можете просто вбить в поисковик вашего браузера "Редактор кода" и выбрать из предложенных вариантов, пусть даже наугад. Как уже говорил в предыдущей лекции, я привык работать на Brackets, поэтому все примеры буду демонстрировать в нём же.
Перед началом работы лучше включить на вашем компьютере отображение расширения файлов в названии.
Начнём с того, что создадим на вашем компьютере новую папку и назовём её на английском, например, lesson. В этой папке, для начала, создадим новый текстовый документ и назовём его index.html (.html - расширение файла. Оно позволяет системе определить какой у файла вид и чем его открывать). Так всегда должен называться файл, который будет являться главной страницей сайта.
Открываем этот файл с помощью редактора кода, который вы прежде установили. Вот перед нами открывается "холст", на котором мы будем творить, ведь, казалось бы, уже пора, но... всё не так просто.
Перед этим нужно разобрать ещё несколько моментов, которые необходимо знать перед началом работы, и первый из них заключается в понимании того, из чего состоит html- файл. А состоит он не только из самого контента, а ещё и из разметки.
Любой html-файл имеет разметку, которую читает наш браузер, а сама разметка, в свою очередь строится из тегов и их атрибутов.
Тег отвечает за размещение информации на странице. Есть тег для создания абзаца, есть тег для вставки картинки или фото. Для любого действия есть свой тег. А вот, к примеру, для указания пути, по которому нужно взять картинку, уже используется атрибут. Атрибуты - это дополнительные параметры тегов.
Сам html-файл построен в виде иерархического дерева. Т. е. в файле всегда есть главный тег, в нём располагаются другие теги, которые, в свою очередь, тоже могут содержать в себе ещё теги и т. д.
И, что ещё очень важно всегда помнить, html-файл всегда читается браузером сверху вниз.
Вернёмся к тегам. HTML теги:
- одинарные: <название тега>;
- парные: <название тега>...</название тега>.
Разберём ещё основные типы HTML тегов:
- Блочные - это теги, которые занимают всю ширину и начинаются всегда с новой строки.
- Строчные - это теги, которые занимают только то пространство, которое им необходимо, и располагаются на одной строке, пока пространство не закончится.
Подведём итог.
Сегодня мы узнали:
- что такое html-файл;
- каким должно быть название у html-файла, который будет являться главной страницей сайта;
- из чего состоит html-файл;
- из чего состоит разметка html-файла;
- что такое теги и атрибуты;
- какие есть теги, и каких они бывают типов.
Если по этой или по какой-то из предыдущих лекций у вас возникли вопросы, задавайте их в комментарии. На следующем занятии мы с вами приступим к работе с самим html-файлом и познакомимся с первыми (основными) тегами.
