Закрыть
Войти
Подождите...
Собирается информация...
Восстановить пароль
Логин или пароль введены не верно!
Подождите...
Идет авторизация.
Вход
Логин или пароль введены не верно!
Забыли пароль?
или войти через вконтакте

Шаблон

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

В этом уроке мы изучим минимальный набор 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! 

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

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

Политика конфиденциальности   Пользовательское соглашение