Структура HTML-документа: изучите базовую структуру HTML

Опубликовано: 2020-12-14

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

Это изменило то, как люди работают. HTML и CSS используются для создания и управления элементами на веб-странице вместе с javascript. HTML позволяет создателям определять разные роли для каждого элемента, предоставляя полную свободу настройки в процессе создания.

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

Есть три основных аспекта, которые вместе помогают создать веб-страницу.

  • Структура HTML — поддерживает структурные элементы
  • Стиль CSS — помогает дизайну и придает стиль этим структурным элементам.
  • Взаимодействие JS — обеспечивает взаимодействие между этими элементами.

В структуре HTML элементы и теги сопоставляются друг с другом для маркировки содержимого.

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

Открывающие и закрывающие элементы меняются, но теги остаются прежними. Теги вставляются до и в конце предложений, что позволяет форматировать их на странице. Идеальная веб-страница состоит из трех основных и важных разделов:

  • Заголовок
  • Голова
  • Тело

Элемент Head используется для выделения начала/заголовка раздела заголовка. Раздел заголовка всегда помогает в качестве описания страницы. Содержимое тегов заголовка, т. е. заголовок, используется в качестве источника для идентификации содержимого страницы.

Ниже перечислены все теги, которые можно использовать в элементе head:

  • <база>
  • <ссылка>
  • <мета>
  • <noscript>
  • <скрипт>
  • <стиль>
  • <название>

Например:

<ГОЛОВА>

<TITLE> Пример Hello world в HTML<TITLE>

</ГОЛОВА>

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

Абзац: <P>и </P>

Заголовок первого уровня:<H1>Заголовок второго уровня:<H2>и </H2>

Горизонтальное правило:<HR> Центрирование:<CENTER>

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

<HTML>

<ГОЛОВА>

<TITLE>Обувная компания <TITLE>

</ГОЛОВА>

<ТЕЛО>

<H1>Добро пожаловать в удивительную обувь! </H1>: </H2>

<IMG SRC= ..http://example.com/images/image1.jpg”><HR>

<CENTER> Почему бы не посетить <A HREF =..http://www.example1.com/..>Пример веб-сайта

</А>

</ЦЕНТР>

</ТЕЛО>

</HTML>

В приведенном выше разделе объяснялись основные элементы веб-страницы со структурой HTML.

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

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

Нажмите правую кнопку в любом месте веб-страницы и выберите «Просмотреть исходный код страницы». Откроется окно, содержащее исходный код страницы.

Чтобы проверить страницу

Нажмите правую кнопку в любом месте веб-страницы, а затем выберите «Проверить», чтобы просмотреть список и типы элементов, используемых для создания этой конкретной веб-страницы. Он будет включать как HTML, так и CSS, которые можно изменить с помощью панели стилей.

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

<p> Этот тег используется на веб-странице, когда есть необходимость в абзаце, и для его завершения используется тег </p>.

<br> Этот тег используется для разрыва строк и в основном используется для написания отдельных строк, будь то контакт или адрес.

<hr> Этот тег используется для разделения содержимого веб-страницы на две части.

Все теги здесь реализованы в примере кода веб-страницы.

Узнайте: 21 идея проекта веб-разработки

ВХОД

<html>

<голова>

<название></название>

</голова>

<тело>

<h1>Структура HTML</h1>

<р>

Автор: upGrad Education<br>

<час>

Изучите основы <br>

<час>

Автор: upGrad Education<br>

</p>

</тело>

</html>

Атрибуты

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

Здесь параметр «имя» имеет функцию получения имени свойства, которое считается назначенным. И параметр «значение» имеет аналогичную функцию для получения значения имен свойств, совпадающих с элементом.

<img> Этот атрибут используется для добавления/встраивания изображения на веб-страницу. Этот тег поможет указать путь к изображению. А <height> и <width> указывают высоту и ширину изображения соответственно.

<alt> Этот атрибут применяется, когда изображение не может загрузиться из-за ошибки соединения или по какой-либо другой причине. Тег alt служит подзаголовком к изображению.

Запишитесь на курсы по разработке программного обеспечения в лучших университетах мира. Участвуйте в программах Executive PG, Advanced Certificate Programs или Master Programs, чтобы ускорить свою карьеру.

Читайте: 8 захватывающих идей и тем для проектов полного стека

Пример

<html>

<тело>

<h2>Атрибут src</h2>

<p>Изображения HTML определяются с помощью тега img, а имя файла источника изображения указывается в атрибуте src:</p>

<img src="img_101.jpg" alt="пустое изображение" width="500″ height="600">

</тело>

</html>

Для изменения стиля текста, размера, шрифта и любых других функций, связанных с текстом, используется тег <style>

Пример

<html>

<тело>

<h2>Атрибут стиля</h2>

<p>Атрибут используется для изменения стилей, например цвета:</p>

<p style="color:red;">Это абзац красного цвета.</p>

</тело>

</html>

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

  • <b> – полужирный текст
  • <strong> — важный текст
  • <i> — курсив
  • <em> — выделенный текст
  • <mark> – Выделенный текст
  • <small> – Меньший текст
  • <del> — удаленный текст
  • <ins> — вставленный текст
  • <sub> – текст нижнего индекса
  • <sup> — Надстрочный текст

Подводя итог статье, мы изучили следующие особенности и основы HTML:

  • HTML-структура
  • Теги, элементы и их типы
  • Основные теги и их применение

Все эти функции, теги и атрибуты помогают понять необходимость HTML.

Если вам интересно узнать больше о разработке программного обеспечения с полным стеком, ознакомьтесь с программой Executive PG upGrad и IIIT-B в разработке программного обеспечения с полным стеком, которая предназначена для работающих профессионалов и предлагает более 500 часов тщательного обучения, более 9 проектов, и задания, статус выпускника IIIT-B, практические практические проекты и помощь в трудоустройстве в ведущих фирмах.

Подготовьтесь к карьере будущего

Подать заявку на получение степени магистра в области разработки программного обеспечения