Эта статья поможет вам разобраться в тегах HTML и научится создавать разметку для будущего сайта.
как создать файл HTML и начать писать на нём код:
для начала нужно создать текстовый документ на рабочем столе, кликнув правой кнопкой мыши по свободному месту на рабочем столе.
появившийся файл переименовать так:
(любое название файла).html
получим такой файл:
он будет открываться в окне браузера.
среда разработки кода:
это специальная программа, в которой вы можете редактировать и создавать свой код.
самые популярные из них:
один из самых популярных сред разработки:
Sublime Text имеет удобный интерфейс и не требует мощного ПК для его использования.
Visual Studio Code довольно требовательна, но в то же время удобна в использовании
и многие другие.
первое что нужно знать о HTML это создание структуры:
<! DOCTYEPE html>
<html>
<head>
</head>
<body>
</body>
</html>
пока что абсолютно ничего не понятно, но на самом деле всё очень легко и в самом языке гипертекстовой разметки HTML нет ничего сложного и ему можно легко научится за пару недель.
начнём с разбора структуры сайта
- <! DOCTYPE html> - это объявление типа документа, другими словами, DOCTYPE означает, какую версию HTML (либо XHTML) Вы используете
- <html></html> HTML — это основная структурная единица веб-страницы, написанная на языке HTML.
- <head></head> - в переводе с английского означает "голова" или же шапка вашего сайта, то что будет находится с верху сайта - заголовок, название проекта и название открытой вкладки браузера.
- <body></body> - этот же "тег" в переводе с английского означает "тело" основная структура вашего сайта. Например: Основной текст который будет размещён в теге <body>текст</body> окажется ниже текста записанного в теге <head></head>
открывающий и закрывающий теги:
как вы уже могли заметить по мимо одного тега например <body> рядом всегда стоит тег </body> - такой тег уже называется закрывающий
между этими двумя тегами пишется текст который выводится на экран в зависимости от значения тега, например: <body><p>текст</p></body> где <p></p> - парный тег отвечающий за набор обычного текста . Текст будет выведен в тело сайта. Если же запись будет выглядеть так: <head><h1>текст</h1></head> - где h1 это парный тег для оглавления текста.
теперь давайте разберёмся что нужно делать со структурой сайта:
Первый тег для написания оглавления:
<head>
<title>Название открытой вкладки</title>
<link rel="stylesheet" type="text/css" href="название css файла.css">:
и так давайте по порядку разберём эту строку которая необходима для нормальной работы сайта:
link rel="stylesheet" type="text/css"- всегда нужно писать не задумываясь и вы никогда не ошибётесь, что это значит знать пока не обязательно.
href="название css.файла"- таким образом мы указали путь к css файлу.
CSS - это отдельный язык который мы ещё затронем, проще сказать что на HTML мы делаем набросок, а на css уже придаём вид сайту.
<meta charset="UTF-8"> - UTF-8 - тип кодировки который так же нужно писать не задумываясь и у вас никогда не будет с этим проблем.
</head>.
больше в <head></head> писать ничего не нужно.
что касается <body></body> - это как я и сказал ранее тело сайта в на котором вы можете разместить любой текст. Каким образом мы можем это сделать?
- <p>текст</p> - парный тег отвечающий за набор обычного текста
- <h1>текст<h1> - парный тег-заголовок так же существуют теги-заголовки <h2></h2>; <h3></h3> и так далее. Отличаются они лишь тем что при возрастании числа после "h" тест становится больше.
так же у нас есть возможность записывать текст следующим образом:
- текст
- текст 2
- текст 3
этого можно добиться тегом <li>текст</li>
давайте обсудим ещё немного самых важных тегов:
<div class="любое название"></div> - опять же по порядку.
в парный тег <div></div> вписывают различного вида код. Например:
<div class="любое название ">
<h1>текст</h1>
<li>текст</li>
</div>
так зачем же он нужен?
этот тег создаёт своего рода блок кода, это нужно для того что бы не редактировать по отдельности каждый тег в css, а обратиться целому блоку и присваивать ему значения которые будут распространятся на весь код выписанный в тег.
вы наверное заметили в теге <div></div> не парный тег class="любое название"
давайте поговорим и о нём:
тег class="" служит для названия другого тега что бы, обратиться к нему в css и редактировать его.
Пока что это всё.
Сегодня мы затронули самые важные теги которые стоит знать для успешного старта в изучении языка HTML.