19 апреля, 2025

HTML для начинающих

StarAntl03 минуты

 

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

Назовём как “Курс по HTML для начинающих”.

Что такое HTML

Большинство современных веб страниц написаны при помощи трех технологий HTML, CSS и JavaScript. Сочетание этих трех технологий позволяет нам создавать столь удобные сайты и веб приложения ничем не уступающих desctop приложениям. Но раньше всех появилась гипертекстовая разметка позволяющая передавать текст в структурированном виде по сети и получившая название HTML.

HTML (HyperText Markup Language) — это основной язык разметки, используемый для создания веб-страниц и веб-приложений. Представь себе HTML как скелет, который придает структуру веб-странице.

Основные концепции HTML:

  1. Теги:
    • Теги — это основные строительные блоки HTML. Они заключаются в угловые скобки < >.
    • Большинство тегов имеют открывающий тег (например, <p>) и закрывающий тег (например, </p>), между которыми находится содержимое.
  2. Элементы:
    • Элемент состоит из открывающего тега, содержимого и закрывающего тега.
    • Пример: <p>Это параграф.</p>
  3. Атрибуты:
    • Атрибуты добавляют дополнительную информацию к тегам. Они пишутся внутри открывающего тега.
    • Пример: <a href="https://www.example.com">Ссылка</a> (атрибут href указывает адрес, куда ведет ссылка).

Пример HTML-документа:

<!DOCTYPE html>

<html lang=”ru”>

<head>

<meta charset=”UTF-8″>

<title>Простая web-страница</title>

</head>

<body>

<h1>Заголовок</h1>

<p>Это параграф с текстом.</p>

<a href=”https://www.example.com”>Это ссылка</a>

</body>

</html>

 

Объяснение примера:

  1. <!DOCTYPE html>: Объявляет, что этот документ написан на HTML5.
  2. <html lang="ru">: Открывающий тег HTML указывает, что язык страницы — русский.
  3. <head>: Содержит метаинформацию о документе, такую как кодировка и заголовок страницы.
    • <meta charset="UTF-8">: Устанавливает кодировку символов.
    • <title>Простая HTML-страница</title>: Устанавливает заголовок страницы, который отображается на вкладке браузера.
  4. <body>: Основное содержимое страницы.
    • <h1>Заголовок</h1>: Заголовок первого уровня.
    • <p>Это параграф с текстом.</p>: Параграф с текстом.
    • <a href="https://www.example.com">Это ссылка</a>: Ссылка, ведущая на указанный URL.

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

История

HTML (HyperText Markup Language) имеет богатую историю, которая началась в конце 1980-х годов. Вот основные этапы её развития:

Ранние годы

  1. 1989-1990: Зарождение идеи:
    • Тим Бернерс-Ли, сотрудник CERN (Европейская организация по ядерным исследованиям), предложил идею глобальной гипертекстовой системы, которая позволила бы учёным делиться документами через Интернет. Эта идея легла в основу World Wide Web.
    • В 1990 году Бернерс-Ли разработал первый веб-браузер и первый веб-сервер, а также написал первые спецификации.
  2. 1991: Первый черновик:
    • В 1991 году Тим Бернерс-Ли опубликовал первый черновик, который включал 18 тегов. Некоторые из них используются до сих пор, такие как <p>, <a>, <h1>, <h2>, и <ul>.

Стандартизация и развитие

  1. 1993: HTML+:
    • Дейв Рэггетт предложил расширение, названное HTML+, которое включало поддержку таблиц и других более сложных элементов разметки. Однако этот проект не был официально принят.
  2. 1995: HTML 2.0:
    • В 1995 году IETF (Internet Engineering Task Force) опубликовала спецификацию HTML 2.0, которая стандартизировала существующие практики и включала новые элементы, такие как формы.
  3. 1997-1999: HTML 3.2 и HTML 4.0:
    • HTML 3.2 был опубликован в январе 1997 года и включал поддержку таблиц, апплетов и других новых функций.
    • HTML 4.0, выпущенный в декабре 1997 года, добавил поддержку стилей (CSS), скриптов (JavaScript), а также улучшил доступность и интернационализацию.

Эра XHTML

  1. 2000: XHTML 1.0:
    • XHTML (Extensible HyperText Markup Language) был разработан как более строгая и XML-совместимая версия HTML. Он требовал более строгого синтаксиса и был направлен на повышение совместимости с различными устройствами и браузерами.

HTML5 и современность

  1. 2008: Начало работы над HTML5:
    • Рабочая группа WHATWG (Web Hypertext Application Technology Working Group) начала разработку HTML5, чтобы обновить и расширить возможности. Целью было создание мощной платформы для разработки веб-приложений.
  2. 2014: Официальный выпуск HTML5:
    • В октябре 2014 года W3C (World Wide Web Consortium) опубликовал окончательную спецификацию HTML5, которая включала новые элементы (например, <article>, <section>, <nav>), встроенную поддержку видео и аудио, улучшенную работу с графикой и анимацией (через <canvas>), а также множество других улучшений.

Пост-HTML5

  1. HTML 5.1 и далее:
    • В ноябре 2016 года была выпущена спецификация HTML 5.1, которая включала небольшие улучшения и исправления.
    • HTML 5.2 был выпущен в декабре 2017 года, включавший новые возможности и улучшения безопасности.
    • В настоящее время технология продолжает развиваться, а спецификации регулярно обновляются для поддержки новых технологий и улучшения совместимости.

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

Установка и настройка среды разработки

Для создания собственных веб страниц нам потребуются удобные инструменты, позволяющие нам быстро ориентироваться по коду и экономить время на его написание.
Наиболее удобными и бесплатными являются VS Code, Atom, Sublime Text.  Лично я использую VS Code так как бесплатные и очень удобные расширения позволяют мне разрабатывать в нем на разных языках программирования.

На данном этапе от вас требуется установить его и мельком его разглядеть, устанавливать плагины и расширения категорически не рекомендую, базовой комплектации будет достаточно.
Изначально в VS Code встроена утилита Emmet. Она позволяет по написанию начала тега дописать его автоматически или расписать структуру в кратком формате. Изначально советую писать все самостоятельно ручками, в процессе вы сами поймете когда вам удобнее начинать срезать углы ;).

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Похожие новости