Руководство html для чайников - Большая энциклопедия инструкций и руководств

HTML «коды».

HTML — это основа сегодняшнего интернета. Миллионы веб-сайтов вместе образовали интернет. HTML — это строительный блок всех этих сайтов. Двадцать лет назад, даже если вы просто хобби-блогер, вы должны были знать некоторые веб-коды, чтобы защитить себя или добавить простую функцию на свой сайт. Но сейчас существует так много редакторов и плагинов, что даже знание основ HTML больше не требуется.

Проблема в том, что если вы не знаете нескольких основ, вы можете легко попасть в серьезные проблемы в своем блоге и нанять дорогостоящего разработчика для устранения, возможно, незначительной проблемы. Не только это, но и внесение изменений в блог, например, добавление пользовательского текстового виджета, требует определенных знаний.

А если вы столкнулись с тем, что содержимое сайта выглядит неправильно, знание HTML поможет вам вернуться на правильный путь.

Создаете свой первый сайт? Попробуйте использовать конструктор сайтов без кода
Для создания сайта с помощью такого конструктора, как Wix, вам не нужны навыки кодирования. Этот инструмент поставляется с 800+ дизайнерскими шаблонами и позволяет управлять сайтом с мобильного > Попробуйте Wix бесплатно, нажмите здесь

Что такое HTML?

HTML — это аббревиатура HYper TExt MArkupe Language. Это стандартный язык для тегов содержимого веб-браузеров.

HTML представлен «Элементами». Элементы также известны как «теги».

Зачем нужен HTML?

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

Вот почему вам нужен HTML.

Чувствителен ли HTML к регистру?

HTML не чувствителен к регистру. Но лучше всего писать HTML с правильным регистром.

Удобный для начинающих хостинг для размещения ваших HTML-проектов

Если вы новичок, мы рекомендуем хостинг-провайдеров, которые доступны по цене и просты для начала работы. Важными требованиями являются мгновенная активация учетной записи, простая в использовании панель управления, полное руководство пользователя и полезная техническая поддержка, которая всегда готова помочь.

Шаги по созданию вашего первого HTML-файла

Вы можете создать базовый HTML-файл с помощью блокнота на вашем компьютере. Но это будет мучительно для написания многих строк кода.

Вам нужен редактор кода. Хороший редактор кода облегчит написание и организацию больших кодов. Я использую и рекомендую Notepad ++ (бесплатный и с открытым исходным кодом) для написания веб-языков. Есть и другие редакторы, которые вы можете использовать, например нижеlime Text, Atom и так далее

Вот что вам нужно сделать:

Установить редактор кода
Открыть его
Создать новый файл
Сохраните его как .html-файл

Содержание

Hello World
HTML-теги
Атрибуты HTML
Отображение кода: Блочный и встроенный
Двойная кавычка против одиночной кавычки
Семантический HTML против несемантического HTML
Проверка подлинности HTML
Дополнительные полезные ресурсы

1. Hello World!

Скопируйте и вставьте следующий код в новый HTML-файл и сохраните его. Теперь запустите его в своем веб-браузере.

HTML код

<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>

Вывод:

Поздравляем! Вы создали свой самый первый HTML-файл. Вам не обязательно понимать его на данном этапе. Мы расскажем об этом в ближайшее время.

Понимание структуры HTML

Каждый HTML-файл имеет общую голую структуру. Именно с нее все начинается. И каждая большая страница кодов после обрезки придет к этой структуре.

Поэтому давайте попробуем понять это на примере кода «Hello World!». Следующие элементы являются обязательными для каждого HTML-файла.

= Это объявление браузеру о том, что это HTML-файл. Вы должны указать его перед тегом <html>.
= Это корневой элемент HTML-файла. Все, что вы пишете, проходит между а также .
= Это метаинформационная часть для браузера. Коды внутри этого тега не имеют визуального вывода.
= Это часть, которую отображает веб-браузер. На веб-сайте вы видите отображение кодов между а также .

2. HTML-теги

HTML — это взаимодействие сотен различных тегов. Вам необходимо изучить, как они работают. Вы также должны убедиться, что они используются правильно.

HTML-теги обычно имеют открывающий и закрывающий теги. Открывающий тег содержит ключевое слово, окруженное знаком «меньше» (<) и «больше» (>). Закрывающий тег имеет все то же самое, кроме дополнительной косой черты (/) после знака «меньше» (<).

Теги заголовков

Все теги заголовка идут между <head> и </head>. Они содержат метаинформацию для веб-браузера и поисковых систем. В основном они не имеют визуального вывода.

Тег Title определяет заголовок веб-страницы, который виден на вкладке браузера. Эта информация используется веб-программами и поисковыми системами. В каждом HTML-файле может быть только один заголовок.

Код:

<title>My first web page</title>

Тег заголовка отображается в верхней части браузера.

Тег ссылки связывает вашу HTML-страницу с внешними ресурсами. Его основное применение — связывание HTML-страницы с таблицами стилей CSS. Он является самозакрывающимся тегом и не нуждается в окончании </link>. Здесь rel означает связь с файлом, а src — источник.

Код:

<link rel="stylesheet" type="text/css" src="style.css">

Meta — это еще один самозакрывающийся тег, который предоставляет мета-информацию html-файла. Поисковые системы и другие веб-сервисы используют эту информацию. Мета-теги являются обязательным условием, если вы хотите оптимизировать свою страницу для поисковых систем.

Код:

<meta name="description" content="This is the short description that search engines show"

Тег script используется для включения сценария на стороне сервера или создания ссылки на внешний файл сценария. Он может иметь два атрибута в открывающем теге. Один из них — тип, а другой — источник (src).

Код:

<script type="text/javascript" src="scripts.js"></script>

Тег Noscript работает, когда скрипты отключены в веб-браузере. Он делает страницу совместимой для тех, кто не разрешает использование скриптов в своих браузерах.

Код:

<noscript><p>Alas! Scripts are disabled.</p></noscript>

Теги body

Все теги body находятся между <body> и </body>. Они имеют визуальный вывод. Именно здесь выполняется наибольшая работа. Вы должны использовать эти теги для структурирования основного содержимого страницы.

<h1 data-spai-bg-prepared=»1″></h1> к <h6 data-spai-bg-prepared=»1″></h6>

Это теги заголовков. Наиболее важный заголовок обозначается тегом <h1>, а наименее важный — <h6>. Вы должны использовать их в правильной иерархии.

Код:

<h1>This is  a h1 heading</h1>
<h2>This is  a h2 heading </h2>
<h3>This is  a h3 heading </h3>
<h4>This is  a h4 heading </h4>
<h5>This is  a h5 heading </h5>
<h6>This is  a h6 heading </h6>

Вывод:

Форматирование тегов

Текст в html-файле может быть отформатирован с помощью множества тегов форматирования. Это будет необходимо, когда вы захотите выделить слово или строку из вашего контента.

Код:

<p>You can highlight your text in many ways.</p>

<p>You can <strong>bold</strong>, <u>underline</u>, <em>italic</em>, <mark>mark</mark>, <sub>subscript</sub>, <sup>superscript</sup> and more!</p>

Вывод:

Вы можете отклонить некоторые коды от отображения с помощью тега комментария. Код будет отображаться в исходном коде, но не будет отображаться. В основном этот тег используется для создания документации к html-файлам для дальнейшего использования.

Пример:

<!-- <p>You can comment out any code by surrounding them in this way</p> -->

Другие важные теги HTML

Анкор — это бесценный тег, который используется практически везде. Вы не увидите ни одной веб-страницы в Интернете без хотя бы одной анкорной ссылки.

Структура такая же. Имеет открывающуюся и закрывающуюся части . Текст, который вы хотите привязать, находится между и .

Есть некоторые атрибуты, которые определяют, куда и как переходит пользователь после нажатия на него.

ahref = »« = Определяет ссылку назначения. Ссылка находится между двойными кавычками.
target = «» = Определяет, будет ли URL открываться в новой вкладке браузера или в той же вкладке. target=»_blank» — для новой вкладки, а target=»_self» — для открытия в той же вкладке.
rel = «» = Определяет связь текущей страницы со связанной страницей. Если вы не доверяете связанной странице, вы можете определить rel=»nofollow».

Код:

<p><a target="_blank" href="https://www.google.com/">Click here</a> to go to Google. 
It will open in a new tab.</p>

<p><a target="_self" href="https://www.google.com/">Click here</a>. 
It will also take you to Google but will open in the current tab.</p>

Вывод:

Тег изображения — еще один важный тег, без которого невозможно представить многие сайты, основанные на изображениях.

<img /> самозакрывающийся тег. Не требует традиционного закрытия вроде <img />. Есть некоторые атрибуты, которые вам необходимо знать, прежде чем вы сможете использовать его правильно.

src = »« = Это для определения исходной ссылки изображения. Поместите ссылку прямо между двойными кавычками.
alt = »« = Это означает альтернативный текст. Когда ваш образ не загружается, этот текст даст пользователям представление о недостающем изображении.
ширина = «» = Определяет ширину изображения в пикселях.
Высота = «» = Определяет высоту изображения в пикселях.

<p>This is the Googleplex in August 2014.</p>

<p>This image has a width of 500 pixels and a height of 375 pixels.</p>

<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" 
alt="Google's Headquarter in August 2014" width="500" height="375" />

Вывод:

Советы: Хотите вставить интерактивное изображение? Оберните код изображения тегом. Посмотри, как получится.

или

Тег List предназначен для создания списка элементов. обозначает упорядоченные списки (нумерованный список) и обозначает неупорядоченные списки (маркеры).

Элементы списка внутри или помечен . li означает список. Вы можете иметь столько как хочешь внутри родителя или тег.

Код:

<p>This is an ordered list:</p>

<ol>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ol>

<p>This is an unordered list:</p>

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ul>

Вывод:

Тег Table предназначен для создания таблицы данных. Существует несколько тегов внутреннего уровня, которые определяют заголовки таблицы, строки и столбцы.

<table> </table> — это внешний родительский код. В этом теге <tr> обозначает строку таблицы, <td> — столбец таблицы, а <th> — заголовок таблицы.

Код:

<table>

<tr>
<th>Name</th>
<th>Age</th>
<th>Profession</th>
</tr>

<tr>
<td>Jo
<td>27</td>
<td>Businessman</td>
</tr>

<tr>
<td>Carol</td>
<td>26</td>
<td>Nurse</td>
</tr>

<tr>
<td>Simone</td>
<td>39</td>
<td>Professor</td>
</tr>

</table>

Вывод:

Примечание: Значения внутри первого <tr> являются заголовками. Поэтому мы использовали <th>, который применяет эффект жирного текста к тексту.

Группировка таблиц

Вы можете расширить функциональность таблицы с помощью элементов группировки таблиц. Бывают случаи, когда необходимо создать большие таблицы, разбитые на несколько страниц.

Группируя данные таблицы в верхний, основной и нижний колонтитулы, вы можете разрешить независимую прокрутку. Верхний и основной колонтитулы будут печататься на каждой странице, на которую попала ваша таблица.

Тегами группировки таблиц являются:

= Для обертывания заголовков таблицы. Печатается на каждой разделенной странице таблицы.
= Для обертывания основных данных таблицы. Вы можете иметь столько <tbody>, сколько вам нужно. Тег <tbody> означает отдельную группу данных.
= Для обертывания информации нижнего колонтитула таблицы. Он печатается на каждой разделенной странице таблицы.

Обратите внимание, что использование группировки не является обязательным. Вы можете использовать ее, чтобы сделать большие таблицы более читабельными. Хотя некоторые специальные разработчики заметно используют эти теги в качестве селекторов CSS.

Вот как мы можем сгруппировать нашу примерную таблицу в <thead>, <tbody> и <tfoot>:

Код:

<table>

<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Profession</th>
</tr>
</thead>

<tbody>
<tr>
<td>John</td>
<td>27</td>
<td>Businessman</td>
</tr>
<tr>
<td>Carol</td>
<td>26</td>
<td>Nurse</td>
</tr>
<tr>
<td>Simone</td>
<td>39</td>
<td>Professor</td>
</tr>
</tbody>

<tfoot>
<tr>
<td>Total Persons:</td>
<td>3</td>
</tr>
</tfoot>

</table>

Вывод:

Элемент формы используется для создания интерактивных форм для веб-страниц. Форма HTML содержит несколько последовательных элементов. Например: <label>, <input>, <textarea> и т.п.

Атрибут action в форме очень важен. Он указывает на серверную или стороннюю страницу для обработки информации. Для обработки сначала необходимо определить метод.

Вы можете использовать один из двух методов, get или post. Get отправляет всю информацию в формате URL, а Post отправляет информацию в теле сообщения.

Существует множество типов ввода для форм. Самым основным типом ввода является текст. Он записывается как <input type=»text»>. Типы также могут быть radio, checkbox, email и так далее. В нижней части формы должен быть вход типа submit для создания кнопки отправки.

Тег <label> используется для создания меток и связывания их с входами. Правило связывания меток с входами заключается в том, чтобы иметь одинаковое значение в атрибуте for=»» метки и атрибуте id=»» входа.

Код:

<form action="#">

<label for="firstname">First Name: </label>

<input type="text" id="firstname"><br>

<label for="lastname">Last Name: </label>

<input type="text" id="lastname"><br>

<label for="bio">Short Bio: </label>

<textarea id="bio" rows="10" cols="30" placeholder="Enter your bio here..."></textarea><br>

<label>Gender:</label><br>

<label for="male">Male</label>

<input type="radio" name="gender" id="male"><br>

<label for="female">Female</label>

<input type="radio" name="gender" id="female"><br>

<input type="submit" value="Submit">

<form>

Вывод:

Примечание: Я указал действие на нулевое значение, потому что оно не было подключено к какому-либо серверу для обработки информации.

3. Атрибуты HTML

Атрибуты — это один из видов модификаторов для тегов HTML. Они добавляют новые конфигурации к тегам HTML.

Атрибут выглядит как attributename=» » и располагается в открывающем HTML-теге. Значение атрибута находится между двойными кавычками.

id = ”” и class = ””

id и class являются идентификаторами тэгов HTML. Различные имена назначаются различным HTML-элементам с использованием идентификаторов. Вы можете использовать один идентификатор класса для нескольких элементов. Но вы не можете использовать один идентификатор идентификатора для нескольких элементов.

Код:

<h1 class="heading">This is the main title</h1>

href = ””

href означает гипертекстовую ссылку. Они указывают пользователям ссылочные ссылки. Тег привязки использует href для отправки пользователей на целевой URL.

Код:

<a href="https://www.google.com/">Google</a>

src = ””

src обозначает источник. Он определяет источник носителя или ресурса, который вы используете в файле HTML. Источником может быть локальный или сторонний URL.

Код:

<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" />

alt=””

alt означает альтернативу. Это резервный текст, который используется, когда элемент HTML не может загружаться.

Код:

<img  src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" alt="Google's Headquarter" />

style = ””

Атрибут style часто используется в тегах HTML. Он выполняет работу CSS внутри HTML-тега. Свойства стиля заключаются в двойные кавычки.

Код:

<h2 style="color:red">This is another title</h2>

4. Отображение кода: Блочный и встроенный

Некоторые элементы всегда начинаются с новой строки и занимают всю доступную ширину. Это «блочные» элементы.

Например: <div data-spai-bg-prepared=»1″>, <p data-spai-bg-prepared=»1″>,</p><h1 data-spai-bg-prepared=»1″>-</h1><h6 data-spai-bg-prepared=»1″>формы и т. д.</h6></div>

Некоторые элементы занимают только необходимое пространство и не начинаются с новой строки. Это «встроенные» элементы.

Например: <a>, <span>, <br>, <strong>, <img> и т.п.

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

Код:

<!DOCTYPE html>

<html>

<head>

<title>My first web page</title>

</head>

<body>

<h2>This is a H2 heading. It has Block display.</h2>

<h2>This is <u>another</u> H2 heading. Here the underline tag has Inline display.</h2>

</body>

</html>

Вывод:

5. Двойные и одинарные кавычки в HTML

Этот вопрос очень очевиден. Что вы должны использовать в HTML? Одинарную или двойную кавычку? Кажется, что люди используют обе, но какая из них правильная?

В HTML одинарные и двойные кавычки одинаковы. Они не имеют никакого значения в выводе.

Вы можете использовать любой, какой вам больше нравится. Но смешивание обоих кодов на одной странице считается плохой практикой. Вы должны быть последовательны в использовании любого из них.

6. Семантический HTML против несемантического HTML

Семантический HTML — это последняя версия HTML, которая также называется HTML5. Это развитая версия несемантического HTML и XHTML.

Почему HTML5 лучше? В предыдущих версиях элементы HTML определялись идентификаторами / именами классов. Например: считалась статьей.

В HTML5 Тег представляет собой статью без идентификатора идентификатора / класса.

Благодаря HTML5 поисковые системы и другие веб-приложения теперь могут лучше понимать веб-страницу. Семантические веб-сайты оказались лучше для SEO.

Вот список некоторых популярных тегов HTML5:

= Это нужно для размещения основного контента, который вы хотите показать зрителям.
= Это предназначено для маркировки части заголовка содержимого, например, метаданных заголовка или автора.
= Определяет пользовательский или независимый контент для ваших зрителей.
= Он может группировать любой код, такой как верхний, нижний колонтитул или боковая панель. Вы можете сказать, что это семантическая форма div.
= Здесь находится контент нижнего колонтитула, отказ от ответственности или авторский текст.
= Он позволяет вставлять аудиофайлы без каких-либо проблем с плагинами.
= Как и <audio>, вы можете вставлять видео с помощью этого тега без проблем с плагином.

Простая структура HTML5 будет выглядеть так:

<!DOCTYPE html>
<html>
                <head>
                                <meta charset="utf-8" />
                                <title>My first web page</title>
                </head>

                <body>
                                <header>
                                               <nav>
                                                                <ul>
                                                                                <li>Menu 1</li>
                                                                                <li>Menu 2</li>
                                                                </ul>
                                                </nav>
                                </header>
                                <main>
                                                <article>
                                                               <header>
                                                                                <h2>This is the title of the article</h2>
                                                                                <p>Posted by John Doe</p>
                                                                </header>
                                                                <p>Content of the article goes here</p>
                                                </article>
                                </main>
                                <footer>
                                               <p>Copyright 2017 John Doe</p>
                                </footer>
                </body>
</html>

7. Проверка HTML

Большинство веб-специалистов проверяют свой код после его завершения. Почему необходимо проверять код, если он работает нормально?

Есть две возможные причины для проверки ваших кодов:

Это поможет вам сделать ваш код кроссбраузерным и кроссплатформенным. Код может не показывать ошибки в вашем текущем браузере, но может показать ошибку в другом. Валидация кода исправит это.
Поисковые системы и другие веб-программы могут перестать просматривать вашу страницу, если на ней есть ошибки. Убедиться в отсутствии серьезных ошибок можно с помощью валидации.

W3C Validator является самым популярным сервисом для проверки кодов. У них есть несколько методов проверки кодов. Вы можете загрузить файл или напрямую ввести код в механизм проверки.

Дополнительные полезные ресурсы

HTML — это постоянно изучаемая тема. Новые версии HTML могут появиться раньше. Поэтому вы должны постоянно обновлять и практиковаться. Практика — это то, что помогает овладеть HTML.

Вот некоторые полезные ресурсы для вас:

Учебники W3Schools HTML
Электронная книга TutorialsPoint
HTML-руководство Code Academy
Code Burst Let’s Make a [HTML] веб-сайт
Шпаргалка Mozila по HTML

Часто задаваемые вопросы по HTML

Легко ли освоить HTML новичкам?

Да, HTML легко изучить. Вы можете создать базовый HTML-файл с помощью блокнота на вашем компьютере; или вы можете использовать HTML-редактор для написания и лучшей организации более длинных страниц.

Как я могу самостоятельно обучиться HTML?

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

Что такое HTML простыми словами?

HTML — это аббревиатура от языка разметки гипертекста. Для неспециалистов HTML можно понять как строительный блок веб-сайтов. Это стандартный компьютерный язык, используемый для структурирования веб-страницы и ее содержимого.

Стоит ли изучать HTML в 2022 году?

Да, HTML является самым распространенным языком разметки и имеет наибольшее признание веб-браузеров. Он остается важнейшей составной частью (наряду с CSS и JavaScript) большинства веб-сайтов в Интернете. Если вы планируете стать веб-разработчиком или управлять веб-сайтом, лучше всего, если вы будете обладать базовыми знаниями HTML.

Версии HTML

HTML 2.0 — опубликован IETF как RFC 1866 в статусе Proposed Standard (24 ноября 1995 года);
HTML 3.0 — 28 марта 1995 года — IETF Internet Draft (до 28 сентября 1995 года);
HTML 3.2 — 14 января 1997 года;
HTML 4.0 — 18 декабря 1997 года;
HTML 4.01 — 24 декабря 1999 года;
ISO/IEC 15445:2000 (так называемый ISO HTML, основан на HTML 4.01 Strict) — 15 мая 2000 года;
HTML5— 28 октября 2014 года;
HTML 5.1 начал разрабатываться 17 декабря 2012 года. Рекомендован к применению с 1 ноября 2016 года.
HTML 5.2 был представлен 14 декабря 2017 года.
HTML 5.3 был представлен 24 декабря 2018 года.

Структура и основные элементы

Основным элементом HTML является тег. Тег это определенный текст заключенный в угловые скобки <...>.

Большинство тегов парные, они имеют открывающий и закрывающий тег. Закрывающий тег отличается от открывающего добавлением слеша перед текстом.

Например:
<html> ... </html>

Теги могут иметь атрибуты которым присваиваются значения (об этом чуть позже).

Теги могут быть вложенными друг в друга.

Например:
<html> <head> ... </head> </html>

Редактор HTML

Теги прописываются в редакторе. Простейший пример редактора — блокнот. Но я советую пользоваться редактором Notepad++, скачать его можно на официальном сайте, устанавливается он в два клика.

Основное преимущество этого (да и других) редактора в том, что в нем есть подсветка синтаксиса. Это значит что ваш код будет выделяться определённым цветом. Данное действие упрощает написание кода и позволяет избежать ошибок.

В редакторе прописываются теги, а затем файл сохраняется с расширением .html. Посоле чего его можно открыть с помощью браузера.

Основные элементы web-страницы

Проста веб-страница состоит из «базового» набора тегов. Это следующие теги:

<html> — тег указывает что это HTML код.
<head> (голова — в переводе с английского) — тег содержащий техническую информацию, например заголовок страницы, подключаемы стили и скрипты, мета-информацию и так далее.
<title> (заголовок — в переводе с английского) — тег содержит заголовок HTML-документа который отображается во вкладке браузера.
<body> (тело — в переводе с английского) — «тело» или основное содержимое документа которое видит пользователь.

Все базовые теги имеют закрывающие теги и являются вложенными друг в друга.

Структура простого HTML документа

Давайте наберем в редакторе следующий код:

<html>
<head>
<title>Заголовок моей первой страницы (во вкладке браузера)</title>
</head>
<body>
<h1>Заголовок страницы в браузере</h1>
<p>Любой тест, обычно это Hello World!</p>
</body>
</html>

Затем сохраните файл с расширением .html, в моем случае это файл html-1.html. Если у вас появились проблемы, просто скачайте этот файл.

Откройте файл в браузере и посмотрите результат.

Рассмотрим основные элементы подробнее.

Элемент <html>

Корневой элемент веб-страницы. Все HTML-теги должны быть внутри него, иначе они не будут правильно обрабатываться браузером.

Помните, в начале статьи я писал что теги имеют атрибуты со значениями? Так вот, атрибут это определенное свойство тега имеющее значение. Атрибут со значением прописывается после тега.

Атрибуты элемента <html>.

Атрибут	Описание	Возможные значения
`manifest`	Указывает путь к кешу манифеста.	URL.

Манифест (manifest) представляет из себя текстовый файл со списком ресурсов для кеширования. Я знаю, сейчас ничего не понятно. Про манифест можно нет запоминать. дальше я приведу более понятный пример.

Прописываются атрибуты так:

<html manifest = "URL">

, где:

html — тег;
manifest — атрибут;
URL — значение атрибута.

Элемент <head>

Между тегами <head> … </head> заключается информация которую не видит пользователь, эта информация «служебная» или «техническая», называть ее можно как угодно, но по сути она нужна для:

Роботов поисковых систем.
Стилизации и расширения функциональности сайта.
Указания, с помощью тега <title> заголовка документа в браузере.

Элемент <title>

Как я уже говорил, тег <title> используется для того, что бы указать название web-страницы которое будет отображаться в закладке браузера.

Элемент <body>

Между тегами <body> и </body> заключается все содержимое веб-страницы которое видит пользователь.

Атрибуты тегов

Теперь, когда у нас есть понимание основ HTML в общих чертах, давайте разберемся с атрибутами тегов.

Возьмем тег <p> — параграф. По сути это тег в который вкладывают одно или несколько предложений. Один из глобальных атрибутов — style.

Style — стиль, то есть с помощью этого атрибута мы можем изменять стиль текста в теге <p>. Разберемся на примере.

<p style="color:blue;">Какой-то текст...</p>

Результатом выполнения этого кода будет:

Какой-то текст…

Я повторюсь, но все же, в этом примере:

p — тег;
style — атрибут тега p;
color:blue — значение атрибута style тега p.

Тег meta (или мета-тег) является не обязательным. Но если вы хотите продвинуть свою веб-страницу или сайт в поисковых системах, то указывать его нужно.

С помощью тега meta можно указать:

Описание страницы.
Ключевые слова.
Кодировку.
Возможность индексирования.
Время перезагрузки страницы.

Meta тег description

Meta тег description указывает описание страницы.

<meta name="description" content="Описание содержимого вашей web-страницы">

Оптимальная длинна meta-тега description составляет 160-180 символов. Тег должен содержать конкретное описание страницы, желательно делать описания уникальными, но не обязательно если в таком случае описания искажают содержание страницы.

Meta тег keywords

Тег содержит ключевые слова через запятую. Если вы когда-либо писали статьи для конференций, то в них вы указывали ключевые слова. Тут, по сути, то же самое.

<meta name="keywords" content="ключевые слова">

Meta тег robots

Мета-тег robots содержит инструкции для роботов поисковых систем. Первая задача мета-тега — указать поисковым системам на возможность индексации веб-страницы. То есть можно индексировать эту страницу (index) или нельзя (noindex). Вторая задача — указать можно ли переходить по ссылкам (follow) или нельзя (follow).

Пример.

<meta name="robots" content="index, follow">

В данном случае роботам поисковых систем разрешено индексировать страницу и переходить по ссылкам.

Meta http-equiv

Этот meta-тег позволяет перезагружать страницу (meta http-equiv=»refresh») и перенаправлять пользователя на другую страницу (content=»0; url=https://abuzov.com/»).

Например.

<meta http-equiv="refresh" content="5; url=https://abuzov.com/">

Этот код означает, что через 5 секунд вы будете перенаправлены на главную страницу моего сайта.

Meta charset

При помощи meta charset мы устанавливаем кодировку документа. Если кодировку указать неправильно появиться, так называемые, «кракозябры».

Стандартная кодировка для HTML-документа это UTF-8.

<meta charset="utf-8">

Эта кодировка включает в себя наибольшее количество языков.

Тег style

Элемент style используется для оформления сайта. Он указывает что код между тегами <style>…</style> является css кодом. Тег <style> располагается в теге <head>.

Подключение стилей будет рассмотрено отдельно. Давайте допишем небольшой код в наш, уже созданный файл. Например, заголовок будет красным, а текст синим курсивом.

<html>
<head>
<style>
h1{color:red;}
p {color:blue;font-style:italic;}
</style>
<title>Заголовок моей первой страницы (во вкладке браузера)</title>
</head>
<body>
<h1>Заголовок страницы в браузере</h1>
<p>Любой тест, обычно это Hello World!</p>
</body>
</html>

Наберите код в редакторе и сохраните под именем html-2.html. Так же вы можете скачать этот файл. Посмотрите результат в браузере.

Тег link

Link подключает внешние файлы. В предыдущем примере мы прописали стили непосредственно в HTML-документе. Но что если нам нужен сайт состоящий из тысячи страниц? Прописывать код в каждом крайне затруднительно. Поэтому создается отдельный файл (обычно его называют style.css) который подключается веб-странице.

Код выше можно переписать следующим образом:

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<title>Заголовок моей первой страницы (во вкладке браузера)</title>
</head>
<body>
<h1>Заголовок страницы в браузере</h1>
<p>Любой тест, обычно это Hello World!</p>
</body>
</html>

А файл style.css будет выглядеть следующим образом:

h1{color:red;}
p {color:blue;font-style:italic;}

При этом мы избавляемся от тега <style>.

Атрибуты тега link

Атрибут	Описание	Возможные значения
`href`	Место расположения ресурса.	URL.
`rel`	Атрибут, определяющий отношение между веб-страницей которая ссылается и веб-страницей на которую ссылаются.	`stylesheet`: ссылка на файл стилей. `alternate`: ссылка на альтернативную версию текущей web-страницы. `author`: ссылка на контакты автора текста. `help`: ссылка на справку для текущей страницы. `icon`: ссылка на фавиконку. `license`: лицензия и авторские права на веб-страницу. `next`: значение указывает на то, что страница находится в последовательности, а связанная страница является следующей страницей в последовательностиe. `prefetch`: связанный ресурс должен быть кэширован. `prev`: значение указывает на то, что страница находится в последовательности, а связанная страница является предыдущей страницей в последовательности `search`: средство поиска, которое можно использовать для поиска текущих и связанных документов.
`type`	Тип документа, на который ведет ссылка.	MIME тип.
`media`	Тип (или типы) мультимедиа, к которому должен применяться связанный ресурс.	Медиа-запрос, например screen, print, или screen and max-width:640.
`hreflang`	Язык документа на который ведет ссылка.	Языковой код, например `en` (Английский) или `ru` (Русский).
`sizes`	Размер иконки, используется когда ссылка ведет на фавиконку `rel="icon"`.	[ширина]x[высота], например `32x64`.
`crossorigin`	Используется вместе с JavaScript, чтобы определить, как обрабатываются запросы на совместное использование ресурсов между источниками.	`anonymous` `use-credentials`

Фавиконка (favicon) это файл, рисунок, имеющий расширение .ico который отображается на вкладке браузера перед заголовком (тег <title>).

Favicon сайта abuzov.com

Тег script

Элемент <script> подключает к HTML-документу различные скрипты, например JavaScript. Скрипты, как в случае с тегом <style> могут находятся как непосредственно в HTML-файле, так и в отдельных файлах с соответствующим расширением, например .js.

Атрибуты тега script

Атрибут	Описание	Значение
`src`	Расположение файла со скриптами или сценариями.	URL.
`type`	Тип используемого сценария.	MIME тип. По умолчанию это `text/javascript`.
`charset`	Кодировка символов внешнего скрипта. Используется только при наличии `src` .	Объявление кодировки символов, например`UTF-8`.
`async`	Указывает, что внешний сценарий должен выполняться асинхронно. Используется только при наличии `src` .	Нет.
`defer`	Указывает, что внешний сценарий следует отложить и выполнить только после анализа страницы. Используется только при наличии `src` .	Нет.
`crossorigin`	Определяет, как обрабатываются запросы на совместное использование ресурсов между источниками.	`anonymous` `use-credentials`

Отношения между тегами

Очень важная тема которую нужно понять. Тут нет ничего сложного. Давайте разбираться.

Возьмем наш последний код.

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<title>Заголовок моей первой страницы (во вкладке браузера)</title>
</head>
<body>
<h1>Заголовок страницы в браузере</h1>
<p>Любой тест, обычно это Hello World!</p>
</body>
</html>

Изобразим его в виде дерева.

Мы видим, что элементы этого дерева взаимосвязаны, взаимосвязи между тегами бываю следующих типов:

Предок. Предком называют элемент который содержит в себе другие. То есть, исходя из рисунка можно сказать что <html> это предок для всех тегов, а <head> является предком для <link>, <script> и <title>. Аналогично <body> это предок по отношению к <h1> и <p>.
Потомок. Потомком называют элемент вложенный в другой. То есть <body> — потомок <html>, а <h1> потомок <body>.
Родительский элемент. Родительским элементом называют тег который связан с другими тегами более низкого уровня, и находится на дереве выше их. <html> является родителем только для тегов <head> и <body>.
Дочерний элемент. Дочерним называют тег который который вложен в тег более высокого уровня, то есть противоположность родительскому элементу. На рисунке тег <h1> является дочерним элементом тега <body>.
Сестринский элемент. Сестринским элементом называют тег имеющий один и тот же родительский тег. То есть, теги <head> и <body> на рисунке — сестринские элементы, так же как и теги <h1> с <p>.

Тут все довольно просто. Это нужно запомнить и знать. Теперь вы знаете основы HTML.

Расшифровка и перевод тегов

Когда я начинал изучать HTML, я задавался вопросом: как запомнить теги? Самым простым вариантом для меня стал перевод тегов. То есть, каждый HTML-тег это означает что-то на английском языке или это сокращение какого-то английского слова. Давайте разберемся с тегами которые уже нам известны.

Тег	Значение	Перевод
<html>	Hyper Text Markup Language	Язык гипертекстовой разметки
<head>	Head	Голова (документа)
<body>	Body	Тело (документа)
<title>	Title	Название, заголовок
<h1>	Heading 1…6	Заголовок с 1 по 6 уровень
<p>	Paragraph	Параграф
<link>	Link	Ссылка
<style>	Style	Стиль

Как это работает?

Теперь у вас есть общее понимание о том, что такое HTML. Возникает вопрос, а как это вообще работает?

Работает это так. Мы пишем HTML-код и сохраняем его с расширением HTML. Наша операционная система (Windows или Linux) понимает что файл с таким расширением нужно открывать при помощи браузера.

Браузер открывает файл и читает (интерпретирует) наш код в виде дерева (DOM) в соответствии с определенными правилами.

После того как браузер «прочитал» и интерпретировал наш код он отображает его нам в привычном виде — в виде текста, таблиц, изображений, ссылок, списков и других элементов.

Элемент DOCTYPE

В конце об элементе DOCTYPE. Почему в конце, а не в начале? В самоучителе для начинающих я не придаю этому тегу особое значение, не не могу не упомянуть о нем.

DOCTYPE задает тип документа. Обычно это html. Указывать тип документа нужно в самом его начале.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<title>Заголовок моей первой страницы (во вкладке браузера)</title>
</head>
<body>
<h1>Заголовок страницы в браузере</h1>
<p>Любой тест, обычно это Hello World!</p>
</body>
</html>

При помощи этого тега мы даем понять браузеру что мы используем именно HTML код. Возникает вопрос, а что, в HTML-документе может быть другой код? Вообще да, документ может быть XML, но пока об этом думать рано. Нужно знать следующее.

Тип документа зависит от того, какие теги в нем используются и есть три типа синтаксиса. Если вы используете все новые теги, то есть теги HTML5 (на момент написания статьи) то достаточно указать <!DOCTYPE html>.

Типы синтаксиса:

Strict — строгий.
Transitional — переходный.
Frameset — набор фреймов.

Это типы для HTML 4.01.

Для строгого типа указываем:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//RU" "http://www.w3.org/TR/html4/strict.dtd">

Для переходного:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//RU" "http://www.w3.org/TR/html4/loose.dtd">

Для набора фреймов:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//RU" "http://www.w3.org/TR/html4/frameset.dtd">

Более старые версии HTML сейчас практически не используются.

На этом все, теперь вы знаете основы HTML.

Источник

HTML — это стандартный язык разметки для веб-страниц.

С помощью HTML вы можете создать свой собственный веб-сайт.

HTML прост в освоении — Вам понравится!

Выучить HTML Бесплатно »

Простое обучение с помощью HTML «Попробуйте сами»

С помощью редактора «Попробуйте сами» вы можете отредактировать HTML-код и просмотреть результат:

Пример

<!DOCTYPE html>
<html>
   <head>
     <title>HTML Учебник</title>
   </head>
   <body>

<h1>Это заголовок</h1>
<p>Это параграф.</p>

</body>
</html>

Попробуйте сами »

Нажмите на кнопку «Попробуйте сами», чтобы увидеть, как это работает.

HTML Примеры

В этом руководстве по HTML вы найдете более 200 примеров. С помощью нашего онлайн
-редактора «Попробуйте сами» вы можете редактировать и тестировать каждый пример самостоятельно!

Перейдите к примерам HTML!

HTML Упражнения

Это руководство по HTML также содержит почти 100 упражнений по HTML.

Проверьте себя с помощью Упражнений

Упражнение:

Добавьте «всплывающую подсказку» к абзацу ниже с текстом «О SchoolsW3».

<p =»О SchoolsW3″>SchoolsW3 — это сайт веб-разработчика.</p>

HTML Тест-викторина

Проверьте свои навыки работы с HTML с помощью нашей HTML-викторины!

Старт тест по HTML!

HTML Справочник

В SchoolsW3 вы найдете все ссылки на HTML-элементы,
атрибуты, события, названия цветов, сущности, наборы символов, кодировку URL,
языковые коды, HTTP-сообщения, поддержку браузера и многое другое:

Источник

Наш
учебник (самоучитель) по основам языка гипертекстовой разметки
HTML предназначен как для начинающих программистов, так и
состоявшихся профессионалов, которые решили освоить новую область
веб-программирования с нуля. Учебник написан довольно просто и максимально последовательно и не
требует каких-либо отдельных знаний по CSS, т.к. согласно принципу разделения содержимого страницы и ее оформления,
HTML теперь отвечает только за структуру и логическую разметку страницы, а оформление ложится полностью на
каскадные таблицы стилей. Дополнительно к учебнику по HTML прилагается
задачник с решениями, что несомненно позволит новичкам самостоятельно изучить
основы HTML с нуля и за максимально короткие сроки.

Начинать изучать веб-программирование следует именно с языка гипертекстовой разметки HTML, т.к. ни один сайт в
интернете не обходится без него. И хотя HTML скорее является формальным, чем полноценным высокоуровневым языком
программирования, он позволяет начинающим программистам приучиться к аккуратному набору кода (неформатированный код очень тяжело читать и
редактировать), внимательности при вводе синтаксических конструкций (пропуск даже единичных служебных символов может привести к неработоспособности
всего кода), а также знакомит новичков с понятием комментариев и общими правилами их составления.

Чтобы посмотреть результат выполнения исходного кода примеров учебника во фрейме кодового блока, используйте кнопку
«Результат».

Если на вашем хостинге имеется возможность использовать python-скрипты , то вам наверняка будет полезно почитать и наш учебник
«Основы Python с нуля».

Источник

Читайте также

Что такое HTML?

Зачем нужен HTML?

Чувствителен ли HTML к регистру?

Удобный для начинающих хостинг для размещения ваших HTML-проектов

Шаги по созданию вашего первого HTML-файла

Содержание

1. Hello World!

HTML код

Вывод:

Понимание структуры HTML

2. HTML-теги

Теги заголовков

Теги body

<h1 data-spai-bg-prepared=»1″></h1> к <h6 data-spai-bg-prepared=»1″></h6>

Форматирование тегов

Другие важные теги HTML

или

Группировка таблиц

3. Атрибуты HTML

id = ”” и class = ””

href = ””

src = ””

alt=””

style = ””

4. Отображение кода: Блочный и встроенный

5. Двойные и одинарные кавычки в HTML

6. Семантический HTML против несемантического HTML

Вот список некоторых популярных тегов HTML5:

7. Проверка HTML

Дополнительные полезные ресурсы

Часто задаваемые вопросы по HTML

Читайте также

Версии HTML

Структура и основные элементы

Редактор HTML

Основные элементы web-страницы

Элемент <html>

Элемент <head>

Элемент <title>

Элемент <body>

Атрибуты тегов

Meta тег description

Meta тег keywords

Meta тег robots

Meta http-equiv

Meta charset

Тег style

Тег link

Атрибуты тега link

Тег script

Атрибуты тега script

Отношения между тегами

Расшифровка и перевод тегов

Как это работает?

Элемент DOCTYPE

Простое обучение с помощью HTML «Попробуйте сами»

Пример

HTML Примеры

HTML Упражнения

Проверьте себя с помощью Упражнений

Упражнение:

HTML Тест-викторина

HTML Справочник

А вот и еще интересные новости по теме: