HTML — это основа сегодняшнего Интернета. Миллионы веб-сайтов вместе образовали Интернет. Где HTML — это строительный блок всех этих веб-сайтов. Двадцать лет назад, даже если вы просто блоггер-любитель, вам нужно было знать немного веб-кодирования, чтобы защитить себя или добавить простую функцию на свой сайт. Но сейчас доступно так много редакторов и плагинов, что даже знание основ HTML больше не требуется.
Проблема в том, что если вы не знаете несколько основ, вы можете легко попасть в настоящую беду в своем блоге и вам придется нанять дорогого разработчика, чтобы исправить то, что может быть незначительной проблемой. Более того, внесение изменений в ваш блог, например, добавление пользовательского текстового виджета, требует некоторых знаний.
А если вы заметили, что макет контента выглядит неправильно, знание HTML поможет вам вернуться на правильный путь.
Прежде чем начать – Основы HTML
Что такое HTML?
HTML — это аббревиатура от HYper TExt MArkupe Language. Это стандартный язык для тегирования контента для веб-браузеров.
HTML представлен «Элементами». Элементы также известны как «Теги».
Зачем нужен HTML?
Веб-браузеры могут отображать веб-сайт только в том случае, если он написан на поддерживаемом ими языке. HTML — наиболее распространенный язык разметки, имеющий наибольшее признание среди веб-браузеров.
Вот почему вам нужен HTML.
Чувствителен ли HTML к регистру?
HTML не чувствителен к регистру. Но лучше всего писать HTML с учетом регистра.
Шаги по созданию вашего первого HTML-файла
Вы можете создать базовый HTML-файл с помощью Блокнота на вашем компьютере. Но это будет мучительно для написания многих строк кода.
Вам нужен редактор кода. Хороший редактор кода облегчит написание и организацию больших кодов. Я использую и рекомендую Notepad++ (бесплатный и с открытым исходным кодом) для написания веб-языков. Есть и другие редакторы, которые вы можете использовать, например Sublime Text, Atom и т. д.
Вот что вам нужно сделать:
- Установить редактор кода
- Откройте его
- Создать новый файл
- Сохраните его как файл .html.
1. Привет, мир!
Скопируйте и вставьте следующий код в ваш новый 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-файла. Все, что вы пишете, находится между и .
- = Это часть метаинформации для браузера. Коды внутри этого тега не имеют визуального вывода.
- = Это часть, которую отображает веб-браузер. То, что вы видите на веб-сайте, это отображение кодов между и .
2. HTML-теги
HTML — это совместная работа сотен различных тегов. Вам нужно изучить, как они работают. Вам также нужно убедиться, что они используются правильно.
HTML-теги обычно имеют открывающий и закрывающий теги. Открывающий тег содержит ключевое слово, окруженное знаками «меньше» (<) и «больше» (>). Закрывающий тег содержит все то же самое, но имеет дополнительный слеш (/) после знака «меньше» (<).
Теги головы
Все теги заголовка находятся между и . Они содержат метаинформацию для веб-браузера и поисковых систем. По сути, они не имеют визуального вывода.
Тег заголовка определяет заголовок веб-страницы, который отображается на вкладке браузера. Эта информация используется веб-программами и поисковыми системами. Вы можете иметь один заголовок на HTML-файл.
Код:
<title>My first web page</title>
Тег ссылки связывает вашу HTML-страницу с внешними ресурсами. Его основное применение — связывание HTML-страницы с таблицами стилей CSS. Это самозакрывающийся тег, и ему не требуется окончание . Здесь 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>Теги тела
Все теги тела находятся между и . У них есть визуальные выходы. Здесь выполняется большая часть работы. Вам нужно использовать эти теги для структурирования содержимого вашей главной страницы.
к
Это теги заголовков. Самый важный заголовок помечен тегом и наименее важный с . Вы должны использовать их в правильной иерархии.
Код:
<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="" = Определяет целевую ссылку. Ссылка находится между двойными кавычками.
- цель =” “ = Определяет, будет ли открываться 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>Выход:
Тег изображения — еще один важный тег, без которого невозможно представить многие веб-сайты, основанные на изображениях.
это самозакрывающийся тег. Он не нуждается в традиционном закрытии, как . Перед тем, как использовать его правильно, вам необходимо знать некоторые его атрибуты.
- источник="" = Это для определения исходной ссылки изображения. Поместите ссылку прямо между двойными кавычками.
- альт="" = Это означает альтернативный текст. Когда ваше изображение не загружается, этот текст даст пользователям представление об отсутствующем изображении.
- ширина =” “ = Определяет ширину изображения в пикселях.
- Высота =” “ = Определяет высоту изображения в пикселях.
<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" />Выход:
Советы: Хотите вставить кликабельное изображение? Оберните код изображения тегом. Посмотрите, как это работает.
или
Тег списка предназначен для создания списка элементов. обозначает упорядоченные списки (нумерованный список) и обозначает неупорядоченные списки (маркированные списки).
Список элементов внутри или помечен тегом . 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>
<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>Выход:
Примечание: Значения внутри первого являются заголовками. Итак, мы использовали который применяет к тексту эффект жирного шрифта.
Группировка таблиц
Вы можете расширить функциональность таблицы, используя элементы группировки таблиц. Будут моменты, когда вам понадобится создавать большие таблицы, которые будут разделены на несколько страниц.
Группируя данные таблицы в заголовок, тело и нижний колонтитул, вы можете разрешить независимую прокрутку. Заголовок и тело будут печататься на каждой странице, где находится ваша таблица.
Теги группировки таблиц:
- = Для переноса заголовков таблицы. Печатается на каждой разделенной странице таблицы.
- = Для обертывания основных данных таблицы. Вы можете иметь столько как вам нужно. А тег означает отдельную группу данных.
- = Для переноса информации нижнего колонтитула таблицы. Печатается на каждой разделенной странице таблицы.
Обратите внимание, что группировка не является обязательной. Вы можете использовать ее, чтобы сделать большие таблицы более читабельными. В то время как некоторые специальные разработчики заметно используют эти теги как селекторы CSS.
Вот как мы можем сгруппировать нашу примерную таблицу в , и :
Код:
<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-форма содержит несколько последовательных элементов. Например: , , и т. д.
Атрибут action в форме очень важен. Он указывает на серверную или стороннюю страницу для обработки информации. Для обработки сначала нужно определить метод.
Вы можете использовать любой из двух методов: get или post. Get отправляет всю информацию в формате URL, а Post отправляет информацию в теле сообщения.
Существует множество типов ввода для форм. Самый базовый тип ввода — текст. Он пишется как . Типы также могут быть радио, флажок, электронная почта и т. д. Внизу должен быть ввод типа отправки для создания кнопки отправки.
тег используется для создания меток и связывания их с входами. Правило связывания меток с входами заключается в том, что они имеют одинаковое значение в атрибуте 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="" и класс=""
id и class — это идентификаторы HTML-тегов. Разным HTML-элементам назначаются разные имена с помощью идентификаторов. Вы можете использовать один идентификатор класса для нескольких элементов. Но вы не можете использовать один идентификатор id для нескольких элементов.
Код:
<h1 class="heading">This is the main title</h1>href=""
href означает гипертекстовую ссылку. Они направляют пользователей на ссылки. Тег привязки использует href для отправки пользователей на целевой URL.
Код:
<a href="https://www.google.com/">Google</a>источник=""
src означает source. Он определяет источник медиа или ресурса, который вы используете в HTML-файле. Источник может быть как локальным, так и сторонним URL.
Код:
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" />альт =»»
alt означает alternative. Это резервный текст, который используется, когда HTML-элемент не может загрузиться.
Код:
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" alt="Google's Headquarter" />стиль=""
Атрибут style часто используется в тегах HTML. Он выполняет работу CSS в теге HTML. Ваши свойства стиля заключаются в двойные кавычки.
Код:
<h2 style="color:red">This is another title</h2>4. Отображение кода: блочное или строчное
Некоторые элементы всегда начинаются с новой строки и занимают всю доступную ширину. Это элементы «Блочные».
Бывший: , , - , форма и т.д.
Некоторые элементы занимают только необходимое пространство и не начинаются с новой строки. Это элементы «Inline».
Бывший: , , , , и т. д.
Вам нужно будет отличать блочные элементы от встроенных, когда вы будете использовать стили 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 идентифицировались по именам id/class. Например: считалось статьей.
В HTML5, тег представляет себя как статью без необходимости в каком-либо идентификаторе id/class.
Ради HTML5, теперь поисковые системы и другие веб-приложения могут лучше понимать веб-страницу. Семантические веб-сайты доказали, что они лучше подходят для SEO.
Вот список некоторых популярных тегов HTML5:
- = Это необходимо для оформления основного контента, который вы хотите показать своим зрителям.
- = Это необходимо для разметки заголовочной части контента, например заголовка или метаданных автора.
- = Он указывает вашим зрителям определенный пользователем или независимый контент.
- = Он может группировать любой код, такой как заголовок, нижний колонтитул или боковая панель. Можно сказать, это семантическая форма div.
- = Здесь должно располагаться содержимое нижнего колонтитула, отказ от ответственности или текст об авторских правах.
- = Позволяет вставлять аудиофайлы без каких-либо проблем с плагинами.
- = Нравится , вы можете вставлять видео, используя этот тег, без проблем с плагином.
Простая структура 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 2025 John Doe</p>
</footer>
</body>
</html>7. Проверка HTML
Большинство веб-профессионалов проверяют свой код после его завершения. Зачем нужно проверять код, если он работает нормально?
Существует две возможные причины для проверки ваших кодов:
- Это поможет вам сделать ваш код кроссбраузерным и кроссплатформенным. Код может не показывать никаких ошибок в вашем текущем браузере, но может в другом. Проверка кода исправит это.
- Поисковые системы и другие веб-программы могут прекратить сканирование вашей страницы, если на ней есть ошибки. Вы можете подтвердить с помощью проверки, что у вас нет серьезных ошибок.
W3C Validator — самый популярный сервис для проверки кода. У них есть несколько методов проверки кодов. Вы можете либо загрузить файл, либо напрямую ввести код в их механизм проверки.
Следующий шаг: от написания HTML к созданию и размещению вашего веб-сайта
Теперь, когда у вас есть прочное понимание основ HTML, вы на пути к созданию функциональных, хорошо структурированных веб-страниц. Независимо от того, продолжаете ли вы кодировать вручную или предпочитаете более рациональный подход, существует множество инструментов, которые помогут вам воплотить ваши проекты в жизнь.
Если вы хотите создавать веб-сайты, не углубляясь в код, рассмотрите возможность изучения наш список лучших конструкторов сайтов без кодаЭти платформы позволяют вам с легкостью разрабатывать и запускать профессиональные веб-сайты, используя интуитивно понятные интерфейсы с функцией перетаскивания, что идеально подходит для быстрого воплощения ваших идей в реальность без ущерба для гибкости.
Для тех, кто готов запустить свои HTML-проекты, выбор правильного хостинга имеет решающее значение. Ознакомьтесь с некоторыми из лучшие провайдеры хостинга статических веб-сайтов в этом руководстве чтобы найти доступные варианты, которые идеально дополнят ваши сайты, написанные вручную.
Какой бы путь вы ни выбрали, сочетание ваших навыков HTML с правильными инструментами и решениями хостинга заложит основу для вашего присутствия в сети. Счастливого кодирования!
