Меню
Спросить
< >

Урок 5. Назад в будущее.

8 ноября 2016
Урок 5. Назад в будущее.

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

Что такое HTML?

HTML - это язык гипертекстовой разметки, он не является языком программирования, запомните это. Html, своего рода строительный материал для сайта. В этот строительный материал html входят элементы, которые называются ТЕГИ. С помощью тегов происходит процесс построения сайта или верстка сайта.Верстка - написание кода, построение сайта, написание сайта по макету и тд.

Как создать сайт?

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

Все проще чем вы думаете.
- Создаем папку;
- В папке создаем текстовый документ;
- Переименовываем его в "index" или же произвольно;
- Так же меняем расширение "txt" на "html";
- Открываем, созданный файл, через обычный блокнот или же воспользуемся специальными текстовыми редакторами(Notepad++, Sublime Text и тд);
- Если в вашем редакторе есть возможность декодирования или кодирования, то кодируем наш файл в UTF-8 без BOM, тем самым вы избежите проблем с кодировкой;
- Начинаем писать наш первый код.
Но сначала разберем, что такое тег.

Что такое теги?

У каждого тега есть своей название, которое записывается между знаками <>.
Тег должен открываться и закрываться, то есть показывать, в каком месте он начинается и где заканчивается. Но не каждый тег требует закрытия.
Например:

  1. <Название тега> <!--Тег открылся-->
  2. </Название тега> <!--Тег закрылся-->
  3. <Название тега> <!--Тег не требует закрытия-->

Теперь начинаем писать код.

  1. <!doctype html> <!--Показываем браузеру, что это документ html-->
  2. <html> <!--Открываем тег html, который говорит о начале кода html-->
  3. <head> <!--Открываем тег head, который будет содержать в себе настройки сайта-->
  4. </head> <!--Закрываем тег head, который будет содержать в себе настройки сайта-->
  5. <body> <!--Открываем тег body, который будет содержать в себе остальные теги, другими словами, это тела сайта, внутри которого все и будет строиться-->
  6. </body> <!--тег body, который будет содержать в себе остальные теги, другими словами, это тела сайта, внутри которого все и будет строиться-->
  7. </html> <!--Закрываем тег html, который говорит о начале кода html-->

Такой код или такая структура, должна быть у каждой html-страницы, естественно можно без комментариев.

Комментарии в html

Комментарии, как и в любом другом языке, используются в основном для программиста, чтобы не забыть что-либо, оставить пометку, закладку и тд. Машина или компьютер игнорирует комментарии, но комментарии добавляют вес к файлу.

  1. <!--Это комментарий-->

Атрибуты в html

Атрибуты - это, параметры или дополнительные свойства у тегов. Они пишутся после названия тега, через пробел. Пишется название атрибута, ставится знак =, открываются кавычки, внутри кавычек пишутся свойства атрибутов.
Например:

  1. <Название тега атрибут="свойства атрибута">
  2. </Название тега">

Как подключить стили к html?

Чтобы изменять внешний вид сайта, нужно изучать язык CSS.
Чтобы html понимал стили css, нужно их подключить или объявить.
Вот вам пару способов:

Способ первый
Можно писать стили прямо в html используя атрибут style

  1. <Название тега style="сюда пишем стили css">
  2. </Название тега>

Способ второй
Можно подключить css прямо в html, но используя уже тег style

  1. <Название тега>
  2. </Название тега>
  3. <style>
  4. Сюда пишем стили css
  5. </style>

Способ третий
Этот способ считается более правильным. Используйте именно этот способ. Он заключается в том, что стили мы используем, подключая внешний файл, в который они записаны. Подключаем с помощью тега link. В атрибут href мы пишем путь, где лежит наш файл, в атрибут rel прописываем отношение между документами. Этот тег следует записываться в теге head.

- Создаем файл в той же папке или же создаем в той же папке папку и уже в ней создаем файл style, с расширением css. И пишем тег link в тег head.

  1. <link href="style.css" rel="stylesheet">

Блочная верстка

Это верстка с использованием тега div, который является по умолчанию блоком. Мы используем эти теги, как кирпичики для построения дома. Этот тег требует закрытия.

Классы и id в html

Класс - или class, это атрибут с помощью которого можно связаться в стилях css с элементов и изменить ему свойства.
Айди - или id аналогично классу.
Так же, чтобы связаться с элементов, мы можем использовать только название тега. Классы и айди можно задать с произвольным названием на латинице.

Заключение

Вкратце это все, что я хотел донести до вас в этом уроки, если что-то упустили или упустил я, посмотрите видео или напишите мне. Ждите следующего урока, а пока ждете начинайте изучать css.

Следующая статьяПредыдущая статья