Цвет

HTML с нуля

99₽ 129₽

Категории:

html

В этом гайде мы научимся использовать HTML

Всё начинается с основы любого HTML документа

Поэтому пишем

<!DOCTYPE html>

</html>

!DOCTYPE указывает на тип файла

В теле всегда должны находится 2 тега с закрытием.

<!DOCTYPE html>
     <head>
     </head>
     <body>
     </body>
</html>

В head пишутся headers, то есть заголовки страницы. Их множество, но большинство редко используются. В основном тут подключаются файлы .css (стили) и скрипты .js (JavaScript), тут же заголовок сайта

В body пишется тело сайта, все выводимые на страницу элементы будут здесь.

Давайте рассмотрим несколько примеров того, что можно прописать в head

<head>
   <title>Главная</title>
   <link rel="stylesheet" type="text/css" href="styles.css">
   <script src="jquery-3.7.1.js"> </script>
</head>

Здесь мы добавляем заголовок страницы "Главная".

Мы подключаем файл styles.css в той же директории.

Мы подключаем файл jquery-3.7.1.js в той же директории

jQuery - это библиотека, облегчающая написания кода на JS. Если хотите узнать больше, зайдите сюда.

Помимо прочего, в теге head можно писать CSS код в теге style

<style>
   *{
     margin: 0;
     padding: 0;
   }
</style>

Обычная практика ставить внешние отступы (margin) и внутренние отступы (padding) элементов, как 0. Обычно это пишут в отдельном файле.

Теперь переходим к самому интересному, к тегу body.

Как мы обсудили ранее, в теге body перечисляются элементы, которые будут показаны пользователю. Давайте перечислим основные теги, которые постоянно используются

<div></div>
<p></p>
<a href="index.php">ссылка</a>
<h1 / h2 / h3 / h4 / h5 / h6> </h(1/2/3/4/5/6)>
<form></form>
<input>
<span></span>
<br>

Давайте теперь разберём каждый из тегов

div - это блочный элемент, используется как контейнер для объединения элементов. Очень полезен.

p - параграф, в котором пишут большие текста.

a - ссылка

h1,h2,h3,h4,h5,h6 - теги заголовочного текста, отличаются по размеру, от большего к меньшему.

form - форма для отправки данных из инпутов (input)

input - поле для ввода данных, часто используется в форме. В языке PHP

span - почти тоже самое, что и div, но располагается inline (в линию/в ряд)

br - перенос строки с отступом.


Вы наверняка заметили в этих 2 строчках

<link rel="stylesheet" type="text/css" href="styles.css">
<a href="index.php">ссылка</a>

Атрибут href, указывающий на файл/ссылку/ссылку на файл в интернете

href = "index.php" / href = "styles.css"
href= "https://google.com"

Мы плавно перешли к атрибутам.

До этого мы просто перечисляли элементы (теги). Но у каждого элемента есть атрибуты. Атрибуты, по своей сути, это свойства элемента.

Вы заметили? Когда мы подключали скрипт там был атрибут src="", где мы ссылались на файл, так уж завелось, что атрибут href и src почти идентичны, но используются для разных элементов.

<link ... href="styles.css">
<script src="file.js"></script>
<a href="https://google.com">ссылка</a>
<img src="image.png" alt="image">

Тег img , как вы могли догадаться , это картинка.

Атрибут alt у картинок - это текст, в случае, если картинка не будет показана по разным причинам.

Если есть тег img, то есть и тег video.

<video width="1600" height="900" controls>
     <source src="movie.mp4" type="video/mp4">
</video>

Вы заметили, что у тега video есть атрибуты width и height, обычно они находятся в CSS, но для этого элемента сделали исключение

Так же, в теге video должен быть тег source, у которого будет атрибут src и type, ссылка на файл и тип файла.


Вообще-то нужно сказать, что тегов HTML огромное множество. Вот вам подробный список.

Давайте разберём основные атрибуты и где они применяются

style // внутри пишутся стили CSS для элемента. Для всех элементов, включая body.
href // для подключения стилей в <head></head> (<link>) и для ссылок (<a></a>).
src // для подключения скриптов JS (<script>) и для файлов типа картинок (<img>)
id // id - это уникальный идентификатор, присваивается одному элементу, нужен для CSS и JS.
name // name - используется относительно редко, идентификатор для input'ов формы PHP.
class // class - идентификатор для одного/нескольких элементов, в основном используется для CSS, когда нужны выделить сразу несколько элементов.
alt // alt - атрибут для картинок, где пишется текст на случай, если картинка не загрузилась.
method // method="post" - это типичная запись атрибута для формы под PHP, где будут отправляться данные.
action // action="file.php" - атрибут формы, куда будут отправляться данные.
value // атрибут, для заполнения поля input, какой-либо строкой.
placeholder // атрибут поля input, где серым текстом будет подсказка, что в этом поле будут писать
type // тип поля input, примеры: text, password, submit, email, checkbox, button, image и т.д.

Как создавать комментарии? Очень просто, вот формат комментария в HTML

<!-- Абсолютно что угодно -->

Комментарий ограничивается с двух сторон <!-- и -->

И ещё один важный момент, в HTML можно создавать свои теги. Тег должен иметь определенный формат: должен быть в нижнем регистре, должен содержать только латинские буквы, должен содержать дефис. Можно добавить цифры и даже смайлики. Вот пара примеров

<my-hello></my-hello>

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

<warning-🔥></warning-🔥>

Такой элемент будет иметь свойство

display: inline-block;

Это как тег span, чтобы сделать его как тег div, нужно прописать стиль display: block; для вашего элемента.

Спасибо за изучение данного скрипта. Вы также можете изучить скрипт по CSS, чтобы дополнить знания.