Основное руководство по HTML для чайников

Последнее обновление 05 октября 2020 г.


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

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

HTML код.
HTML «коды».

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

Вот некоторые наши версии HTML-руководства для блоггеров и владельцев интернет-бизнеса, не связанных с технологией.

HTML - это основа современного Интернета. Миллионы веб-сайтов вместе образовали Интернет. Где HTML - это строительный блок всех этих сайтов.

Прежде чем мы начнем…

1. Что такое HTML?

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

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

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

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

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

3. Учитывает ли регистр HTML?

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

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

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

Вам нужен редактор кода. Хороший редактор кода упростит запись и организацию больших кодов.

Я использую и рекомендую Notepad ++ (бесплатно и с открытым исходным кодом) для написания веб-языков. Существуют и другие редакторы, которые вы можете использовать как нижеlime текст, атом и так далее

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

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

Вы готовы к работе!

Пример редактора кода Atom
Редактор кода - Atom

1. Привет, мир!

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

Код:

Моя первая веб-страница Привет мир!

Вывод:

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

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

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

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

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

2. HTML-теги

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

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

(2a) Основные теги

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

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

Код:

Моя первая веб-страница
Тег заголовка - образцы HTML
Тэг заголовка отображается поверх вашего браузера.

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

Код:

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

Код:

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

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

Код:

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

Код:

Увы! Скрипты отключены.

(2b) Теги тела

Все теги тела находятся между а также . У них есть визуальные выходы. Здесь делается больше всего работы. Вы должны использовать эти теги для структурирования содержимого вашей главной страницы.

к

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

Код:

Это заголовок h1 Это заголовок h1 Это заголовок h1 Это заголовок h2 Это заголовок h2 Это заголовок h2

Вывод:

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

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

Код:

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

Вывод:

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

Пример:

You can comment out any code by surrounding them in this way -->

(2c) Другие важные HTML-теги

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

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

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

  • ahref = »« = Он определяет целевую ссылку. Ссылка идет между двойными кавычками.
  • target = "" = Он определяет, будет ли URL открываться в новой вкладке браузера или на той же вкладке. target = ”_ blank” - для новой вкладки, а target = ”_ self” - для открытия на той же вкладке.
  • rel = "" = Он определяет отношение текущей страницы к связанной странице. Если вы не доверяете связанной странице, вы можете определить rel = ”nofollow”.

Код:

Щелкните здесь, чтобы перейти в Google. Он откроется в новой вкладке. Щелкните здесь . Он также приведет вас в Google, но откроется в текущей вкладке.

Вывод:

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

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

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

Пример:

Это Googleplex в августе 2014 года. Это изображение имеет ширину 500 пикселей и высоту 375 пикселей.

Вывод:

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

или

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

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

Код:

Это упорядоченный список: Пункт 1 Пункт 2 Пункт 3 Это неупорядоченный список: Пункт 1 Пункт 2 Пункт 3

Вывод:

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

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

Код:

название Возраст Профессия Джо 27 Бизнесмен Кэрол 26 Медсестра Симона 39 Профессор

Вывод:

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

Группирование групп

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

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

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

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

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

Вот как мы можем сгруппировать нашу приведенную в качестве примера таблицу в , а также :

Код:

название Возраст Профессия Джон 27 Бизнесмен Кэрол 26 Медсестра Симона 39 Профессор Всего человек: 3

Вывод:

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

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

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

Есть много типов ввода для форм. Самый простой тип ввода - текст. Написано как . Типами также могут быть радио, флажок, электронная почта и т. Д. Внизу должен быть ввод типа отправки для создания кнопки отправки.

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

Код:

Имя: Фамилия: Короткая биография: Пол: мужчина женский

Вывод:

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

3. Атрибуты HTML

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

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

id = ”” и class = ””

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

Код:

Это главный заголовок

href = ””

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

Код:

Google

src = ””

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

Код:

альт =»»

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

Код:

style = ””

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

Код:

Это другое название

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

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

Пример: , , - , форма и т. д.

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

Пример: ,, ,, и т.п.

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

Код:

Моя первая веб-страница Это заголовок H2. Он имеет блочный дисплей. Это еще один заголовок H2. Здесь тег подчеркивания имеет встроенный дисплей.

Вывод:

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

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

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

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

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

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

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

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

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

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

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

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

Моя первая веб-страница Меню 8 Меню 1 Это название статьи Автор: Джон Доу Содержание статьи находится здесь Copyright 2 Джон Доу

7. Проверка HTML

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

Существуют две возможные причины для проверки ваших кодов:

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

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

8. Другие полезные ресурсы

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

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