.png)
.svg)
.svg)
HTML (HyperText Markup Language) – это язык разметки, который является основой для создания веб-страниц. Это язык, на котором мы говорим с браузером, чтобы он отобразил информацию в нужном нам виде. HTML использует специальные теги, заключенные в угловые скобки, чтобы определить структуру и содержимое страницы.
Чтобы создать html страницу, достаточно сохранить текстовый файл в формате html. На компьютерах с операционной системой Windows это можно сделать в стандартной программе – Блокноте (Notepad).
Простейшая HTML-страница состоит из двух основных тегов: <html> и </html>, которые обозначают начало и конец документа. Между ними располагаются теги <head> и <body>.
В <head> находится информация, невидимая пользователю, например, заголовок страницы, описание для поисковых систем, ссылки на стили и скрипты. В <body> располагается видимое содержимое – текст, изображения, видео, формы и т.д., то есть то, что пользователь увидит при открытии страницы в браузере.
Вот пример простой HTML-страницы:
<!DOCTYPE html> <html> <head> <title>Моя первая страница</title> </head> <body> <h1>Привет!</h1> <p>Это моя первая веб-страница.</p> </body> </html>
Пример простой HTML-страницы
В этом примере <title> содержится заголовок страницы, который будет отображаться в заголовке браузера. В <body> мы видим заголовок первого уровня <h1> и абзац <p>.
Заголовки в HTML используются для выделения важных частей текста. Существует шесть уровней заголовков, от <h1> (самый большой) до <h6> (самый маленький).
<h1>Заголовок первого уровня</h1> <h2>Заголовок второго уровня</h2> <h3>Заголовок третьего уровня</h3>
Пример использования заголовков в HTML
Абзацы в HTML обозначаются тегом <p>. Текст между тегами <p> и </p> будет отображаться как отдельный абзац, с отступом от предыдущего и последующего текста.
<p>Это первый абзац. Он содержит информацию о том, что...</p> <p>А это уже второй абзац, в котором мы можем рассказать о чем-то другом.</p>
Пример использования абзацев в HTML
Гиперссылки в HTML создаются с помощью тега <a>. С помощью атрибута href можно указать адрес документа, на который ведет ссылка. Атрибутом называется специальное слово внутри начального тега. Текст между тегами <a> и </a> будет отображаться как ссылка.
Например, чтобы создать ссылку на сайт Стартории, мы можем использовать следующий код:
<a href="https://startoria.ru">Посетить Старторию</a>
При клике на текст «Посетить Старторию« браузер откроет сайт Стартории в новом окне.
Списки в HTML бывают двух типов: маркированные (<ul>) и нумерованные (<ol>). Каждый элемент списка обозначается тегом <li>.
Этот код создаст маркированный список с тремя элементами:
<ul> <li>Яблоко</li> <li>Груша</li> <li>Банан</li> </ul>
Пример использования маркированного списка в HTML
Этот код создаст нумерованный список с тремя элементами:
<ol> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </ol>
Пример использования нумерованного списка в HTML
Чтобы вставить картинку в HTML, используется тег <img>. Атрибут src указывает путь к изображению. Атрибут alt предоставляет альтернативный текст для изображения, который отображается, если картинка не загрузилась.
Кроме того, в атрибутах width и height можно указать размеры картинки – это нужно, чтобы браузер заранее понимал, сколько места будет занимать картинка, и исходя из этого позиционировал остальные элементы.
<img src="image.jpg" alt="Описание картинки" width=”70px” height=”50px”>
Веб-страница – это обычный текстовый файл, который можно редактировать в любом текстовом редакторе. Для разметки веб-страниц используется язык HTML. Команды языка HTML, называемые тегами, заключаются в угловые скобки (< >). Теги могут иметь дополнительные свойства, называемые атрибутами.
Парные теги, состоят из двух частей: открывающей и закрывающей. Закрывающая часть начинается знаком “/” (прямой слэш). Существуют специальные теги для выделения заголовков, абзацев, списков, гиперссылок и вставки изображений.
.svg)
.svg)
.svg)
.svg)