shape1
shape2
shape3
shape4
shape7
shape8

HTML и CSS курс - урок №4 "Состав ТЕГа head, 1 часть"


Enzo_Fabiano

Новичок
Пользователь
21.05.2021
24
0
0
27
В прошлом уроке мы успешно написали фундаментальную структуру 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 ТЕГами и названием вкладки.

 

VEYYN

Новичок
Пользователь
08.06.2019
95
1
1
0
18
Сильная каша. Урок называется "HTML и CSS", а тут уже PHP идет. Также некоторые объяснения точно не поймут новички

 
Последнее редактирование модератором: