HTML - это основа сегодняшнего интернета. Миллионы веб-сайтов вместе образовали интернет. HTML - это строительный блок всех этих сайтов. Двадцать лет назад, даже если вы просто хобби-блогер, вы должны были знать некоторые веб-коды, чтобы защитить себя или добавить простую функцию на свой сайт. Но сейчас существует так много редакторов и плагинов, что даже знание основ HTML больше не требуется.
Проблема в том, что если вы не знаете нескольких основ, вы можете легко попасть в серьезные проблемы в своем блоге и нанять дорогостоящего разработчика для устранения, возможно, незначительной проблемы. Не только это, но и внесение изменений в блог, например, добавление пользовательского текстового виджета, требует определенных знаний.
А если вы столкнулись с тем, что содержимое сайта выглядит неправильно, знание HTML поможет вам вернуться на правильный путь.
Создаете свой первый сайт? Попробуйте использовать конструктор сайтов без кода
Для создания сайта с помощью такого конструктора, как Wix, вам не нужны навыки кодирования. Этот инструмент поставляется с 800+ дизайнерскими шаблонами и позволяет управлять сайтом с мобильного > Попробуйте Wix бесплатно, нажмите здесь
Читайте также
- 20+ платформ конструктора сайтов для создания веб-сайта
- Лучшие HTML-редакторы, которые стоит рассмотреть
Прежде чем начать — основы HTML
Что такое HTML?
HTML - это аббревиатура HYper TExt MArkupe Language. Это стандартный язык для тегов содержимого веб-браузеров.
HTML представлен "Элементами". Элементы также известны как "теги".
Зачем нужен HTML?
Веб-браузеры могут отображать веб-сайт только в том случае, если он написан на поддерживаемом ими языке. HTML является наиболее распространенным языком разметки и имеет наибольшую приемлемость для веб-браузеров.
Вот почему вам нужен HTML.
Чувствителен ли HTML к регистру?
HTML не чувствителен к регистру. Но лучше всего писать HTML с правильным регистром.
Удобный для начинающих хостинг для размещения ваших HTML-проектов
Если вы новичок, мы рекомендуем хостинг-провайдеров, которые доступны по цене и просты для начала работы. Важными требованиями являются мгновенная активация учетной записи, простая в использовании панель управления, полное руководство пользователя и полезная техническая поддержка, которая всегда готова помочь.
| Веб-хостинг | Подписаться | Основные моменты |
|---|---|---|
| A2 Hosting | $ 2.99 / мес | Быстрый веб-хостинг, плавный процесс ввода новых пользователей (Полный обзор). |
| Hostpapa | $ 3.95 / мес | Экологичный хост, большие скидки для новых пользователей (Полный обзор). |
| Hostinger | $ 1.99 / мес | Сверхдешевый хостинг, хорошая производительность (Полный обзор). |
| GreenGeeks | $ 2.95 / мес | 300% экологичный хостинг, бесплатный и простой в управлении SSL (Полный обзор). |
| InMotion Hosting | $ 3.49 / мес | Очень надежный хостинг; также предлагает услуги веб-дизайна (Полный обзор). |
Шаги по созданию вашего первого HTML-файла
Вы можете создать базовый HTML-файл с помощью блокнота на вашем компьютере. Но это будет мучительно для написания многих строк кода.
Вам нужен редактор кода. Хороший редактор кода облегчит написание и организацию больших кодов. Я использую и рекомендую Notepad ++ (бесплатный и с открытым исходным кодом) для написания веб-языков. Есть и другие редакторы, которые вы можете использовать, например нижеlime Text, Atom и так далее
Вот что вам нужно сделать:
- Установить редактор кода
- Открыть его
- Создать новый файл
- Сохраните его как .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 является самым распространенным языком разметки и имеет наибольшее признание веб-браузеров. Он остается важнейшей составной частью (наряду с CSS и JavaScript) большинства веб-сайтов в Интернете. Если вы планируете стать веб-разработчиком или управлять веб-сайтом, лучше всего, если вы будете обладать базовыми знаниями HTML.
