Добавление HTML-элемента на веб-страницу
Эта серия мануалов поможет вам создать и настроить веб-сайт с помощью HTML, стандартного языка разметки, используемого для отображения документов в браузере. Для работы с этими мануалами не требуется предварительный опыт программирования.
В результате выполнения этой серии у вас будет веб-сайт, готовый к развертыванию в облаке, также вы получите базовые знания HTML. Умение писать HTML – хорошая основа для изучения более сложных аспектов веб-разработки, таких как CSS и JavaScript.
Примечание: Найти все мануалы этой серии можно по тегу html-practice.
Это руководство расскажет вам о том, как добавить элемент на вашу веб-страницу. Этот элемент создает раздел, в который мы будем включать машиночитаемую информацию о нашем веб-документе. Такая информация в основном используется браузерами и поисковыми системами для интерпретации содержимого страницы. Контент, размещенный внутри элемента , не будет отображаться на веб-странице.
Примечание: является семантическим элементом, поскольку он сообщает браузеру и разработчику значение или цель своего контента. Семантические элементы используются для облегчения чтения HTML-документа человеком, предоставления браузеру дополнительной информации для интерпретации контента, улучшения доступности сайта (скрин-ридеры используют семантические теги). Также такие теги могут помочь в позиционировании SEO.
Поместите открывающий и закрывающий теги внутри тегов . Затем добавьте две дополнительные строки HTML-кода внутри тегов , например:
Обратите внимание, вы вложили множество элементов HTML друг в друга. Элементы и вложены внутри элемента , а элемент вложен внутри . По ходу изучения HTML мы будем часто вкладывать элементы.
Давайте разберемся, какова же цель только что добавленного кода. Строка после открывающего тега () определяет набор символов документа. В данном случае это будет UTF-8, формат Unicode, который поддерживает большинство символов из самых разных письменных языков.
Следующая строка кода устанавливает заголовок HTML-документа с помощью элемента . Контент, который вы вставляете в этот элемент, будет отображаться на вкладке браузера и как заголовок веб-сайта в результатах поиска, но не будет отображаться на самой веб-странице. Не забудьте заменить «My First Website» своим именем или названием веб-сайта, который вы создаете.
Разработчики часто вставляют различную дополнительную информацию в раздел , но для начала у нас уже есть достаточно информации, чтобы создать базовую веб-страницу HTML. Сохраните файл, прежде чем переходить к следующему мануалу данной серии. Если вы попытаетесь загрузить файл в браузере, вы получите пустую страницу.
Теперь вы знаете, каково назначение элементов HTML и как добавить их в файл HTML.
Как создать простую веб страницу с помощью HTML
В создании этой статьи участвовала наша опытная команда редакторов и исследователей, которые проверили ее на точность и полноту.
Команда контент-менеджеров wikiHow тщательно следит за работой редакторов, чтобы гарантировать соответствие каждой статьи нашим высоким стандартам качества.
Количество просмотров этой статьи: 245 766.
В этой статье мы расскажем вам, как с помощью HTML-кода создать простейшую веб-страницу. HTML является одним из основных компонентов интернета, потому что задает структуру веб-страниц. Веб-страницу можно создать в текстовом редакторе, который есть в Windows или macOS.
Как добавить тег «head» (описание веб-страницы)
Введите и нажмите ↵ Enter . Этот тег содержит описание веб-страницы и заголовочные элементы. Контент этого тега на странице, как правило, не отображается. Контентом являются описание страницы, метаданные, таблицы стилей CSS и другие языки сценариев. [1] X Источник информации
Введите и нажмите ↵ Enter . Этот тег закрывает тег описания страницы. На данном этапе HTML-код должен выглядеть примерно так.
html> head> title>Моя веб-страницаtitle> head> Как добавить тег «body» (весь контент)
Введите тег под закрывающим тегом «head». Этот тег содержит весь контент HTML-документа. Контент этого тега отображается на веб-странице.
Введите . Этот тег содержит заголовок страницы. Заголовок — это текст большого размера, который, как правило, расположен вверху страницы.
- Добавьте дополнительные заголовки по мере необходимости. Можно создать до шести заголовков; это делается с помощью тегов — . Заголовки будут иметь разные размеры. Например, код для создания трех заголовков разного размера будет таким:
h1>Добро пожаловать на мою страницу!h1> h2>Меня зовут Макс.h2> h3>Надеюсь, вам не будет скучно.h3> 
Введите
. Этот тег содержит абзац текста. Такой тег отобразит текст нормального размера.
Введите
после текста и нажмите ↵ Enter . Этот тег закрывает тег абзаца текста. Ниже приведен пример абзаца в HTML-документе:
- Чтобы создать несколько абзацев под одним заголовком, добавьте подряд несколько строк.
- Измените цвет текста. В начале текста введите тег , а в конце тег . Вместо слова «цвет» подставьте нужный цвет (на английском языке), причем кавычки не удаляйте. Эти теги позволят изменить цвет любого текста (например, заголовка). К примеру, чтобы сделать текст синим, введите следующий код:
Киты — величественные животные.
- Также шрифт можно сделать полужирным, наклонным и другим. Ниже приведены примеры форматирования текста с помощью HTML-тегов: [2] X Источник информации
b> Полужирный текст b> i> Наклонный текст i> u> Подчеркнутый текст u> sub> Подстрочный текст sub> sup> Надстрочный текст sup>