Закрыть
Вход на сайт
Регистрация
Вы успешно зарегистрировались!

Перейти к обучению
Регистрация
Войти на сайт

Основы HTML и CSS
Шаблон

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

Для начала давайте откроем совершенно пустую index-html страницу. В браузере нажмём «Посмотреть код». В исходном коде мы видим, что у нас есть теги «html», «head», «body».


Мы их не писали, но они у нас есть, то есть эти теги создаются автоматически в любых условиях. Их лучше всё-таки писать сразу в html-странице сразу же, а не так, чтобы браузер автоматически их подставлял. Давайте разберёмся, что это за теги, какие они должны быть и откуда они вообще берутся, собственно говоря.

Для начала напишем код самого шаблона и будем по очереди разбираться с каждым тегом.

 

<!DOCTYPE>
<html>
<head>
  <meta charset='utf-8'>
  <title>Заголовок страницы</title>
</head>
<body>

</body>
</html>

 

Самый первый тег, который вы должны написать на странице – это «<!DOCTYPE html>». Этот тег говорит нам о версии языка html. То есть, если мы пишем в начале страница «<!DOCTYPE html>», то браузер понимает, что мы пишем на версии языка Html 5.

Следующий тег, который вы, соответственно, должны написать, – это «html», соответственно не забыть его закрыть. Этот тег говорит о том, что мы начали писать Html-код.

Дальше мы пишем тег «head» и «body». Собственно говоря, то, что мы с вами видели в исходном коде страницы. Давайте разбираться, что это такое.


В «head’е» мы прописываем все настройки нашей страницы. Например, мы можем написать здесь тег «title» и написать «Заголовок страницы». То есть то, что вы пишете в «title’е» между открывающим и закрывающим тегом, это показывается в заголовке страницы. Абсолютно во всех сайтах этот текст пишется в теге «title».

В «body» мы прописываем весь текст, который хотим увидеть на нашей странице. Причем, хочу обратить внимание, что если мы напишем что-то в «head’е», то это появится на экране, но браузер автоматически уберёт этот текст из «head’а» и поставит его в «body». Поэтому в «head’е» ничего никогда не пишем того, что должно выводиться на странице, только какие-то настройки, либо здесь ещё можно файлы подключать. Об этом мы сейчас тоже поговорим. 

Итак, в «head’е» мы пишем настройки, в «body» мы пишем то, что выводится на экран. Дословно «head» – «шапка», а «body» – «тело». Ну, или «head» – «голова», кто как называет. Но в целом, в «голове» мы пишем настройки, а в «body», повторюсь – пишем всё то, что хотим увидеть в браузере. 

Давайте рассмотрим, что ещё мы можем написать в «head’е» – это тег «meta». Здесь пишем «charset=”utf-8”». Эта штука называется кодировкой «utf-8», то есть мы на нашей странице будем использовать кодировку «utf-8». Если не знаете, что такое кодировка, то в описании к уроку будет ссылочка к описанию того, что такое кодировка. Дело в том, что иногда можно сделать так, что мы создадим файл нечаянно в другой кодировке или неслучайно, например, потому что просто «Блокнотом» пользуемся. то у вас могут появятся какие-то карказябры и какие-то непонятные будут символы. Если такое случится, то обязательно ставьте кодировку «meta charset=”utf-8”». Вообще просто примите за правило всегда её писать и просто не парится. И всё у вас в жизни тогда будет хорошо. Просто берите, ставьте и всё будет классно.

Итак, продолжим. То, что мы написали, – это такой минимальный набор Html-тегов, который всегда должен лежать у вас под рукой, поэтому лучше всего сделать следующим образом. Сохраните папку с текущим проектом с именем «pattern» или как-нибудь еще, как хотите, и сделайте шаблончиком эту папочку, в которой у вас всё будет лежать. А потом просто берёте, копируете, вставляете называете, как новый какой-то проект.  Всё, у вас уже в новом проекте лежит файлик «index.html» с готовыми Html-тегами. Вам не придется ничего переписывать, заново писать, и всё будет классно. 

Теперь давайте немножечко разберёмся с CSS-ками, как их подключать, что вообще с ними делать, потому что в прошлом уроке мы писали просто теги «style». Как это теперь-то делать? Во-первых, вы можете, как и в прошлом уроке, написать в «шапке» тег «style». И здесь уже писать какие-то свойства.

 

<head>

  <style>

    ...css-свойства...

  </style>

</head>

 

Лучше всего, на самом деле CSS-ки выносить в отдельный файл. Для этого мы создаём отдельный файл, называем его «style.css» и все css-свойства переносим в него.

Но если мы просто перенесли, просто создали файл, то ничего интересного не произойдёт. Потому что файлы «index.html» и «style.css» не связаны друг с другом. Они два разных файла, живут сами по себе и никто друг о друге не знает. Нам их нужно соединить. Для этого в теге <head> мы подключаем наш CSS. 

 

<head>

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

</head>

 

Если у вас стоит Emmet, то вообще просто пишете «link», нажимаете tab и всё автоматически напишется. У вас должно быть написано «rel=”stylesheet”», то есть мы подключаем таблицу стилей и в «href» мы прописываем путь к нашему файлику.

Таким образом, по факту, сайт – это одна страница html, в которой прописаны все CSS-свойства и все теги, но для удобства читания и рассмотрения всего проекта, учитывая то, что если проект большой, то может быть до тысячи и больше строк кода. Представьте, у вас в css тысяча срок кода, потом ещё html тысяча строк кода, да вы запутаетесь здесь, поэтому лучше разделять CSS-ки на разные файлы, ещё лучше, если вы будете разделять их логически. Допустим, если у вас есть какой-то общий стиль CSS, есть CSS-ки для каких-то отдельных файлов, но это такие загоны на будущее, пока что просто создавайте «style.css» один файлик и в нём пишите все CSS-свойства, которые вам необходимы. На самом деле, вот эту штуковину вы тоже можете сохранить в шаблон, чтобы опять же «style.css» не пересоздавать, то есть вот в таком формате сохраните и будет вам счастье. Потом просто скопировали папочку «Pattern», переименовали и всё, у вас уже есть файлик со стилями и есть файлик с html-тегами и жизнь прекрасна.

Вот, собственно, так создаётся минимальный шаблон, так начинаются проекты. Создали проект, написали теги, написали css-свойства и всё классно. Теперь у вас есть базовые знания, понимание того, как это вообще всё работает, взаимодействует. Дальше следующим шагом и в следующих курсах мы начнём изучать все html-теги, все css-свойства и дальше уже посмотрим, что будет. Поэтому не сдавайтесь. Я надеюсь, что всё понятно и всё круто, продолжайте дальше. Да прибудет с вами Сила Html и CSS! 

Предыдущий урок Следующий урок
Тестирование

Чтобы пройти тестирование, необходимо войти или зарегистрироваться