Основы html простыми словами


 В этой статье рассмотрим основы html которые пригодятся тем кто хочет научиться создавать собственные сайты. Вы узнаете основы html в лёгкой и доступной форме. 
 
Язык html служит для создания каскада страниц в веб браузере, а язык css о котором мы поговорим в другой статье служит для описания стилей. То есть язык html задаёт каркас страницы, а сss позволят выбрать как будут выглядеть определенные html элементы на странице веб браузера. 

Вы можете скопировать этот код и вставить в браузер. 


 
<!DOCTYPE html> <!– Объявление формата html документа –> 
 
<html lang=”en”> 
 
<head> <!– В данном теге вложены теги которые определяют кодировку,–> 
 
<!– заголовок, сюда еще входят подключения стилей или java script файла –> 
 
<meta charset=”UTF-8″> <!– Определяет кодировку html документа –> 
 
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <!– Указывает экран и область просмотра для адаптивного дизайна> 
 
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”> 
 
<title>Document</title> <!– Заголовок html документа –> 
 
<link rel=”stylesheet” href=”style.css”> <!– Подключение стилей> 
 
<script src=”script.js”></script> <!– Подключения java script сценария> 
 
</head> 
 
<body> <!– Внутри тега body прописываются элементы которые, будут отображаться на странице> 
 
</body> 
 
</html> 


 
Таким образом каждый html документ должен содержать основные теги, указанные выше. Написание html документа может осуществляться даже в блокноте, но для удобства и скорости работы лучше пользоваться специальными редакторами кода. Например, хорошо подойдёт Visual Studio Code в нем есть встроенная подсветка синтаксиса и встроенный emmit благодаря ему можно достаточно быстро создавать html элементы. Для того чтобы узнать, как и где скачать редактор кода Visual Studio Code перейдите по ссылке


 
Например давайте создадим заголовок 


 
<!DOCTYPE html> <!– Объявление формата html документа –> 
 
<html lang=”en”> 
 
<head> <!– В данном теге вложены теги которые определяют кодировку,–> 
 
<!– заголовок, сюда еще входят подключения стилей или java script файла –> 
 
<meta charset=”UTF-8″> <!– Определяет кодировку html документа –> 
 
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <!– Указывает экран и область просмотра для адаптивного дизайна> 
 
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”> 
 
<title>Document</title> <!– Заголовок html документа –> 
 
<link rel=”stylesheet” href=”style.css”> <!– Подключение стилей> 
 
<script src=”script.js”></script> <!– Подключения java script сценария> 
 
</head> 
 
<body> <!– Внутри тега body прописываются элементы которые, будут отображаться на странице> 
 
<h1> Заголовок в тексте </h1> <!– Например этот тег позволяет вывести заголовок –> 
 
</body> 
 
</html> 


 
В результате на станице в браузере будет следующий вид 


 
Тег h1 позволяет вывести главный заголовок в тексте. В теге h1 обычно используется ключевое слово, по которому продвигается статья. О продвижении сайта будет говориться в одной из следующих статей. Вы скорее всего уже обратили внимание на, то что вначале используется открывающийся тег, а потом закрывающийся между ними располагается его содержимое. 
 
<!– –> 
 
Этот тег используется для комментариев и текст внутри этого тега игнорируется браузером. Комментарии позволяют облегчить понимание кода. Теги могут располагаться внутри элемента с атрибутом class или id. К атрибуту class и id могут прописываться свойства в стилях css. 
 
Например: 


 
Размещаем этот код внутри тега body 
 
<div class=”header”> 
 
<h1> Заголовок в тексте</h1> 
 
</div> 


 
Таким образом если прописать классу header в css отображение по центру, тогда все элементы внутри класса header начнут располагаться по центру. 
 
И так подведем итог 
 
1) Язык разметки html используется для создания каркаса страницы. 
 
2) Html документ должен содержать теги, указывающие формат документа, используемую кодировку и тег head. 
 
3) Внутри тега body располагаются html элементы, которые будут отображаться на странице. 
 
4) В большинстве случаев сначала идёт открытый тег < > , потом закрытый </>. 
 
5) Свойства, которые описаны для родительского элемента будут принадлежать и к дочерним (элементы которые находятся внутри родительского). 

Комментирование на данный момент запрещено, но Вы можете оставить ссылку на Ваш сайт.

Комментарии закрыты.