В прошлом уроке мы успешно написали фундаментальную структуру html, а так же изучили каждый ТЕГ из нее, узнали про двойные(парные)ТЕГи, теперь мы начнем изучение состава ТЕГа head, данный урок будет про ссылки в head. Приступим!
Для начала важно напомнить, все ТЕГи, которые находятся в ТЕГе head не видны на сайте обычному пользователю.
Зачем нам ссылки в head? И вправду, ведь мы можем прописывать JS, PHP и CSS(это мы изучим в будущем и немного затронем в html курсе), но такой код будет(по мнению SEO специалистов)нагружать сайт, поэтому все разбивается на несколько файлов, именно для подключения различных файлов используются ссылки в head, для этого используют ТЕГ link, он является одиночным, но что это такое?
Одиночные ТЕГи не нуждаются в закрывающем ТЕГе и делают это сами, такие ТЕГи выглядят так:
<meta>
Вернемся к нашему ТЕГу link, но просто одного ТЕГа нам не хватит, для того, чтобы определить вид подключаемого файла и ссылку на него.
Для этого нам нужны атрибуты(??), да, еще одна новинка для начинающего верстальщика.
Что же такое атрибуты? Атрибуты - дополнения ТЕГов, которые расширяют их возможности, некоторые атрибуты повторяются у многих ТЕГов, а другие у единиц, прописывать их можно только вместе с ТЕГом, такая запись выглядит вот так:
<link rel="stylesheet"> <!-- Все что находится после rel - пока неважно -->
Атрибут rel определяет тип подключаемого файла, в нашем случае это стиль, поэтому в кавычках мы прописали "stylesheet", но где же указывать путь к файлу на вашем ПК или ссылку на интернет-файл? Тут мы знакомимся с еще одним атрибутом, называется он href, такой код выглядит так:
<link rel="stylesheet" href="www/istyle.css">
В этих кавычках как раз и указывается путь к файлу или ссылку к интернет-файлу, но, так мы подключили файл со стилем нашего сайта(css), но ведь есть еще js и php, сначала разберемся с последним, у нас по нему будет отдельный курс, но скажу так, работать мы будем в самом html файле.
Но для этого нам будет необходимо сменить расширение нашего файла с html на php, выглядит вставка кода php для сайта так:
<?php
<!-- Тут ваш код -->
?>
Подключение JS проще, но существует два возможных места для его подключения, внутри body и head, но заново же SEO специалисты твердят о нагрузке сайта и рекомендуют подключение файла в body, выглядит в body это подключение так:
<script>
src="/name.js"
</script>
Самое сложное осталось позади, но впереди нас ждет еще и подключение иконки для вкладки браузера, но для начала нам нужно это изображение, для этого его необходимо сделать в PS и перейти на сайт favicon.io, конвертировать изображение, скачать полученные файлы и закинуть их в папку assets, после вернуться на сайт и пролистать немного ниже, там вы увидите код и кнопку "copy", нажмите на нее для копирования кода, теперь перейдите в редактор и вставьте в head, код должен выглядеть так:
<head>
<link rel="apple-touch-icon" sizes="180x180" href="Тут путь к файлу(на пк)">
<link rel="icon" type="image/png" sizes="32x32" href="Тут путь к файлу(на пк)">
<link rel="icon" type="image/png" sizes="16x16" href="Тут путь к файлу(на пк)">
<link rel="manifest" href="Тут путь к файлу(на пк)">
</head>
На данном этапе наш урок подходит к концу, приношу извинения, что он немного запутан, но старался написать максимально подробно и понятливо для новичка.
Повторение:
"ТЕГ link" - данный ТЕГ служит для подключения ссылок к сайту".
"Атрибут rel" - данный атрибут служит для определения типа подключаемого интернет-файла/файла.
"Атрибут href" - данный атрибут служит для ввода ссылки до файла.
"Подключение JS" - разобрались как нам подключить файл с js кодом для сайта.
"Подключение PHP" - а точнее написание кода в самом html файле.
"Подключение иконки, которая отображается во вкладке браузера" - разобрались каким сервисом пользоваться для подключения кода и как правильно ввести код в head.
// В следующем уроке мы разберемся с meta ТЕГами и названием вкладки.
Для начала важно напомнить, все ТЕГи, которые находятся в ТЕГе head не видны на сайте обычному пользователю.
Зачем нам ссылки в head? И вправду, ведь мы можем прописывать JS, PHP и CSS(это мы изучим в будущем и немного затронем в html курсе), но такой код будет(по мнению SEO специалистов)нагружать сайт, поэтому все разбивается на несколько файлов, именно для подключения различных файлов используются ссылки в head, для этого используют ТЕГ link, он является одиночным, но что это такое?
Одиночные ТЕГи не нуждаются в закрывающем ТЕГе и делают это сами, такие ТЕГи выглядят так:
<meta>
Вернемся к нашему ТЕГу link, но просто одного ТЕГа нам не хватит, для того, чтобы определить вид подключаемого файла и ссылку на него.
Для этого нам нужны атрибуты(??), да, еще одна новинка для начинающего верстальщика.
Что же такое атрибуты? Атрибуты - дополнения ТЕГов, которые расширяют их возможности, некоторые атрибуты повторяются у многих ТЕГов, а другие у единиц, прописывать их можно только вместе с ТЕГом, такая запись выглядит вот так:
<link rel="stylesheet"> <!-- Все что находится после rel - пока неважно -->
Атрибут rel определяет тип подключаемого файла, в нашем случае это стиль, поэтому в кавычках мы прописали "stylesheet", но где же указывать путь к файлу на вашем ПК или ссылку на интернет-файл? Тут мы знакомимся с еще одним атрибутом, называется он href, такой код выглядит так:
<link rel="stylesheet" href="www/istyle.css">
В этих кавычках как раз и указывается путь к файлу или ссылку к интернет-файлу, но, так мы подключили файл со стилем нашего сайта(css), но ведь есть еще js и php, сначала разберемся с последним, у нас по нему будет отдельный курс, но скажу так, работать мы будем в самом html файле.
Но для этого нам будет необходимо сменить расширение нашего файла с html на php, выглядит вставка кода php для сайта так:
<?php
<!-- Тут ваш код -->
?>
Подключение JS проще, но существует два возможных места для его подключения, внутри body и head, но заново же SEO специалисты твердят о нагрузке сайта и рекомендуют подключение файла в body, выглядит в body это подключение так:
<script>
src="/name.js"
</script>
Самое сложное осталось позади, но впереди нас ждет еще и подключение иконки для вкладки браузера, но для начала нам нужно это изображение, для этого его необходимо сделать в PS и перейти на сайт favicon.io, конвертировать изображение, скачать полученные файлы и закинуть их в папку assets, после вернуться на сайт и пролистать немного ниже, там вы увидите код и кнопку "copy", нажмите на нее для копирования кода, теперь перейдите в редактор и вставьте в head, код должен выглядеть так:
<head>
<link rel="apple-touch-icon" sizes="180x180" href="Тут путь к файлу(на пк)">
<link rel="icon" type="image/png" sizes="32x32" href="Тут путь к файлу(на пк)">
<link rel="icon" type="image/png" sizes="16x16" href="Тут путь к файлу(на пк)">
<link rel="manifest" href="Тут путь к файлу(на пк)">
</head>
На данном этапе наш урок подходит к концу, приношу извинения, что он немного запутан, но старался написать максимально подробно и понятливо для новичка.
Повторение:
"ТЕГ link" - данный ТЕГ служит для подключения ссылок к сайту".
"Атрибут rel" - данный атрибут служит для определения типа подключаемого интернет-файла/файла.
"Атрибут href" - данный атрибут служит для ввода ссылки до файла.
"Подключение JS" - разобрались как нам подключить файл с js кодом для сайта.
"Подключение PHP" - а точнее написание кода в самом html файле.
"Подключение иконки, которая отображается во вкладке браузера" - разобрались каким сервисом пользоваться для подключения кода и как правильно ввести код в head.
// В следующем уроке мы разберемся с meta ТЕГами и названием вкладки.