В статье разберем основы HTML и проведем по первому этапу разработки вашего первого сайта для школьного проекта, портфолио работ, личного блога об увлечениях или даже для будущего бизнеса.
Что такое HTML?
Когда вы открываете любой сайт в интернете, браузер загружает HTML – документ с информацией о структуре и содержании страницы.
В соответствии с ним браузер располагает элементы на веб-странице: заголовки, абзацы, таблицы, изображения и видео.
В соответствии с ним браузер располагает элементы на веб-странице: заголовки, абзацы, таблицы, изображения и видео.
Подобно скелету человека, HTML задает каркас сайта, к которому затем добавляются стили и функциональность. Без понимания HTML сложно стать профессиональным веб-разработчиком, но его освоение – первый шаг на этом пути.
HTML (язык разметки гипертекста) представляет собой код, который применяется для организации и отображения веб-страниц и их содержимого.
Например, контент может быть структурирован с помощью нескольких параграфов, списков с маркерами, изображений и таблиц.
Например, контент может быть структурирован с помощью нескольких параграфов, списков с маркерами, изображений и таблиц.
HTML состоит из тегов – команд, следуя которым, браузеры выводят на монитор различные документы и страницы сайтов.
Внешний вид сайта(фронтенд), всплывающие окна, кнопки и чек-боксы, слайдеры и остальные элементы – практически всегда создаются при помощи HTML, CSS и JavaScript.
HTML служит основой визуального оформления сайта, но не выполняет функции его запуска. Этот язык разметки лишь определяет расположение элементов, их базовый дизайн, а также источники стилей и скриптов, которые чаще всего пишутся на JavaScript.
Для чего нужен HTML?
Знание HTML может быть полезным в различных областях – от создания личных сайтов до работы в крупных IT-компаниях. Вот несколько причин, почему стоит изучать HTML:
Основы веб-разработки
HTML – это первая ступень на пути к более сложным технологиям, таким как CSS и JavaScript.
Также с помощью HTML можно создавать гиперссылки, которые ведут на другие сайты.
Также с помощью HTML можно создавать гиперссылки, которые ведут на другие сайты.
Творческая фантазия
Создание сайта дает вам возможность выразить себя, делиться идеями и, даже открыть новое хобби или начать карьеру.
Улучшение навыков программирования
Веб-дизайнеры и разработчики часто работают с HTML. Знание языка позволяет лучше понимать, как функционирует интернет.
Поддержка в учёбе
Знание основ HTML помогает школьнику в информатике и смежных предметах.
Обучение основам HTML: средства разработки
Прежде чем погрузиться в сам HTML, вам понадобится несколько инструментов для разработки.Это могут быть как простые текстовые редакторы, так и более сложные программы. Рассмотрим несколько из них:
Текстовые редакторы
Notepad (Блокнот)
Простейший редактор, который доступен на всех Windows.
Простейший редактор, который доступен на всех Windows.
На курсе по основам веб-разработки мы используем текстовый редактор Brackets.
Visual Studio Code.
Бесплатный и популярный редактор с широкими возможностями и поддержкой различных языков программирования.
Бесплатный и популярный редактор с широкими возможностями и поддержкой различных языков программирования.
Интегрированные среды разработки (IDE)
Sublime Text: Легкий, быстрый и мощный инструмент для программирования
Atom: Редактор, созданный GitHub, он также предлагает множество расширений
Анатомия HTML элемента
Любой документ на языке HTML представляет собой набор элементов.
Начало и конец каждого элемента обозначаются специальными пометками, которые именуются тегами. Они, соответственно, «открывают» и «закрывают» свой элемент. У каждого тега есть название, которое заключается в угловые скобки < и >.
Каждый элемент состоит из трёх частей:
1.Открывающий тег – это название элемента, заключенное в угловые скобки. В нашем примере элемент обозначен как h1, что соответствует понятию «заголовок первого уровня» (level one header). Этот тег сообщает браузеру о том, что далее следует новый элемент, которым нужно активно управлять при отображении контента.
2.Содержимое элемента (контент) – то, что браузер должен визуализировать. В данном случае – текст.
3.Закрывающий тег напоминает открывающий, но содержит косую черту (слеш) перед наименованием элемента. Его функция заключается в том, чтобы уведомить браузер о завершении элемента.
2.Содержимое элемента (контент) – то, что браузер должен визуализировать. В данном случае – текст.
3.Закрывающий тег напоминает открывающий, но содержит косую черту (слеш) перед наименованием элемента. Его функция заключается в том, чтобы уведомить браузер о завершении элемента.
Элементами можно управлять с помощью атрибутов. Они позволяют добавлять на веб-страницу дополнительную информацию, которая не отображается в основном контенте: размеры, уникальные идентификаторы или ссылки на изображения. Атрибуты пишутся в открывающем теге.
После названия тега (h1) ставим пробел, пишем название атрибута, ставим знак =, дальше вводим двойные кавычки " ", в которых пишем значение.
После названия тега (h1) ставим пробел, пишем название атрибута, ставим знак =, дальше вводим двойные кавычки " ", в которых пишем значение.
В нашем примере, align – это имя атрибута, а center – его значение: выравнивание по центру.
Так устроены парные теги.
Одиночные теги не требуют закрывающего тега и добавляют конкретный элемент на страницу.
Рассмотрим на примере элемента изображения <img>.
Включает в себя два основных атрибута – src (source, источник) и alt (alternative, альтернатива). В первом записывается путь к фотографиям (ссылка на файл), во втором – указываете поясняющий текст для пользователей, которые не могут видеть изображение.
Включает в себя два основных атрибута – src (source, источник) и alt (alternative, альтернатива). В первом записывается путь к фотографиям (ссылка на файл), во втором – указываете поясняющий текст для пользователей, которые не могут видеть изображение.
Данный элемент нужен, чтобы вставить изображения в HTML страницу в нужном месте.
Первые шаги в HTML
Создание базовой структуры HTML
Для корректной работы веб-страницы недостаточно просто добавить теги нужных элементов. Разберём, как отдельные элементы объединяются в целый HTML-документ.
Каждая HTML-страница открывается строкой <!DOCTYPE html>, что является аббревиатурой для «типа документа». Этот doctype информирует браузер о том, что он имеет дело с HTML-документом, и благодаря этому страница отображается корректно.
Следующим элементом является главный парный тег <html></html>, внутри которого находятся всё содержание веб-страницы (весь HTML-код). Обозначает начало и конец кода. Это корневой элемент документа.
Все остальные HTML-элементы должны находиться исключительно внутри него, поскольку размещение их вне этого тега приведет к некорректной обработке документа браузером.
Внутри тега <html> располагается секция <head></head>. Она содержит метатеги, в которые интегрирована дополнительная информация о странице: описание, название, ссылки на стили, скрипты. Такая информация имеет технический характер и предназначена для служебного использования, включая:
- Оптимизацию поисковых роботов
- Стилизацию и расширение функциональных возможностей веб-ресурса
- Задание заголовка страницы, который отображается в браузере, с помощью тега <title>.
Когда мы отправляем ссылку на сайт в мессенджерах, изображение и описание, которые появляются в сообщении, формируются именно благодаря этим тегам.
Также в секции <head> присутствует тег <title></title>, в котором указано название страницы, отображаемое во вкладке браузера.
<meta charset="utf-8"> – элемент устанавливает UTF-8 кодировку вашего документа, которая включает в себя большинство символов из всех известных человечеству языков.
После этого начинается основной блок страницы – тег <body></body>. Этот элемент содержит всю информацию, которая находится на вашей странице. Текст, изображения, ссылки и другие элементы, будут размещаться внутри этого тега.
Внутри тега <body> можно добавлять разнообразные элементы, однако в современной веб-разработке принято структурировать их, группируя в блоки.
Ранее для этого использовали тег <div></div>, который служил в качестве контейнера для расположения текста и изображения в зависимости от их назначения:
-одна конструкция для "шапки" сайта – <header></header>. В неё добавляют логотип компании или блога, меню и панель навигации.
-другая – для основного контента–<main></main>,где располагается перечень товаров интернет-магазина, статья в онлайн-журнале, посты в соцсети.
- третья – для "подвала" – <footer></footer>, в котором указывают ссылки на социальные сети и юридическую информацию.
В настоящее время для всего этого применяются более семантически насыщенные теги, что делает код более понятным и структурированным.
-одна конструкция для "шапки" сайта – <header></header>. В неё добавляют логотип компании или блога, меню и панель навигации.
-другая – для основного контента–<main></main>,где располагается перечень товаров интернет-магазина, статья в онлайн-журнале, посты в соцсети.
- третья – для "подвала" – <footer></footer>, в котором указывают ссылки на социальные сети и юридическую информацию.
В настоящее время для всего этого применяются более семантически насыщенные теги, что делает код более понятным и структурированным.
Задачи, которые решают основные группы элементов HTML
1.Форматирование текста – включает использование жирного шрифта, курсива, подчеркивания, изменение размера шрифта и создание списков (как нумерованных, так и маркированных).
2.Текстовые блоки – содержат заголовки различного уровня от H1 до H6, абзацы и возможность переноса текста на новую строку.
3.Табличные элементы – предоставляют возможность создания таблиц с любым числом строк и столбцов, а также задают фиксированные параметры ширины и высоты, включая заголовки таблиц.
4.Гиперссылки – обеспечивают переход на изображения, прайс-листы или отдельные страницы, а также могут вести к конкретным разделам меню или анкорам в тексте. Существуют также атрибуты, позволяющие открыть документ в текущем или новом окне.
5.Вставка мультимедийных файлов – позволяет добавлять изображения, аудиозаписи, текстовые документы и видеоролики.
2.Текстовые блоки – содержат заголовки различного уровня от H1 до H6, абзацы и возможность переноса текста на новую строку.
3.Табличные элементы – предоставляют возможность создания таблиц с любым числом строк и столбцов, а также задают фиксированные параметры ширины и высоты, включая заголовки таблиц.
4.Гиперссылки – обеспечивают переход на изображения, прайс-листы или отдельные страницы, а также могут вести к конкретным разделам меню или анкорам в тексте. Существуют также атрибуты, позволяющие открыть документ в текущем или новом окне.
5.Вставка мультимедийных файлов – позволяет добавлять изображения, аудиозаписи, текстовые документы и видеоролики.
Самые важные HTML-теги
Когда вы создали свою первую страницу, давайте разберемся с основными элементами HTML, которые будете использовать для разметки текста:
Заголовки
<h1>, <h2>, ..., <h6>
Элементы заголовков позволяют обозначить определённые разделы вашего контента как заголовки или подзаголовки. Похожим образом, как у книг есть название, названия глав и подзаголовки, HTML-документ может включать подобные элементы.
HTML предоставляет шесть уровней заголовков, от <h1> (самый важный) до <h6> (наименее важный).
Элементы заголовков позволяют обозначить определённые разделы вашего контента как заголовки или подзаголовки. Похожим образом, как у книг есть название, названия глав и подзаголовки, HTML-документ может включать подобные элементы.
HTML предоставляет шесть уровней заголовков, от <h1> (самый важный) до <h6> (наименее важный).
Параграфы
Название тега <p></p> происходит от английского слова "paragraph", что переводится как «абзац».
Этот элемент предназначен для оборачивания текста, который необходимо представить на веб-странице. Абзацы автоматически создают вертикальные отступы как сверху, так и снизу, что значительно облегчает восприятие текста.
Этот элемент предназначен для оборачивания текста, который необходимо представить на веб-странице. Абзацы автоматически создают вертикальные отступы как сверху, так и снизу, что значительно облегчает восприятие текста.
Списки
Помогают упорядочить данные в структурированном (нумерованном) или неструктурированном (маркированном) форматах.
Тег <ol></ol> (упорядоченный) формирует нумерованный список, который используется в случаях, когда порядок элементов имеет значение.
Тег <ul></ul> (Неупорядоченный список) создает список с маркерами и идеально подходит для перечисления элементов, для которых не требуется соблюдение определенного порядка.
Каждый элемент списка обозначается с помощью тега <li></li>, который используется как для <ul>, так и для <ol>.
Ссылки
HTML предоставляет возможность создавать ссылки на другие веб-страницы и ресурсы. С помощью тега <a></a> можно обернуть слово или фразу в тексте и указать, на какой ресурс перейдет пользователь при нажатии на ссылку. Для этого необходимо добавить атрибут href.
Изображения
Добавление изображений осуществляется с помощью тега <img>:
Вставка изображения через внешний путь
Вставка изображения через внешний путь
Семантическая верстка
Вёрстка веб-страниц — создание структуры html-кода и описание стилей, размещающих элементы веб-страницы (изображения, текст и так далее) в окне браузера, согласно разработанному макету, таким образом, чтобы элементы дизайна выглядели аналогично макету.
Используется с целью сделать сайт более доступным для пользователей.
Например, незрячие люди используют специальные программы, называемые скринридерами, которые не визуализируют страницу, а озвучивают текст. Эти инструменты функционируют наиболее эффективно, когда документ имеет четкую и осмысленную структуру.
Используется с целью сделать сайт более доступным для пользователей.
Например, незрячие люди используют специальные программы, называемые скринридерами, которые не визуализируют страницу, а озвучивают текст. Эти инструменты функционируют наиболее эффективно, когда документ имеет четкую и осмысленную структуру.
Вы ознакомились с основами HTML и теперь умеете составить простой код в текстовом редакторе Brackets.
В следующей статье расскажем, как сделать каркас сайта красивым и стилизовать его с помощью CSS.
В следующей статье расскажем, как сделать каркас сайта красивым и стилизовать его с помощью CSS.
Ключ к успеху – это практика и эксперименты.
Начните с небольших проектов, и с каждым разом увеличивайте уровень сложности. Используйте ресурсы для изучения, такие как курс по созданию сайтов, видеоматериалы на RUTUBE-канале.
Начните с небольших проектов, и с каждым разом увеличивайте уровень сложности. Используйте ресурсы для изучения, такие как курс по созданию сайтов, видеоматериалы на RUTUBE-канале.
