Основы HTML

Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

Основы HTML

Воробьев Илья Романович,

Морозов Дмитрий Денисович,

Агабекян Артур Андроникович

Аннотация

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

Ключевые слова: HTML, элемент, список, файл, таблица.

Annotation

In this article, we want to offer a solution to the problem that people who start working with HTML do not always find the information they need right away and can spend a lot of time searching for it. Next, we will try to offer our own solution to this problem.

Keywords: HTML, element, list, file, table.

Введение

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

Основы HTML

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

1. Открывающий тег: Тег находящийся в угловых скобках. Начальный тег указывает, где начинается элемент любого вида. Пример: тег текстового абзаца<р>, тег заголовка <h>, тег якоря (ссылка)<а> и тд.

2. Закрывающий тег: Тот же тег, только содержащий слеш (/) перед ним. Закрывающий элемент указывает, где заканчивается элемент. Если закрывающего тега нет, то может произойти ошибка или же элемент который вы создали не появится на вашей Веб-странице.

3. Контент: Это содержимое элемента. Расположенное внутри открывающего и закрывающего тега. Пример: <р>Здесь будет ваш текст</р>

4. Элемент: Начальный тег, конечный тег и содержимое вместе образуют элемент.

У каждого элемента HTML присутствуют атрибуты. Атрибуты находятся в открывающемся теге. Атрибуты могут редактировать свойства элемента, для которого они установлены.

Пример (в нашем случае выступает атрибут href):

<a href="123" ></a>

Геометрические фигуры

Также можно добавлять различные геометрические фигуры в свою работу. В свою очередь они добавляют визуал без использования изображений.

Примеры:

1. Добавление круга.

<div class="circle"></div>

Пояснение: Для того чтобы создать круг, нужно создать контейнер с классом circle в теле документа body.

2. Добавление квадрата.

<div class="square"></div>

3. Добавление прямоугольника.

<div class="rectangle"></div>

4. Добавление треугольника.

<div class-' triangle"></div>

5. Добавление звезды.

<div class ="star"></div>

С помощью CSS можно редактировать фигуры задавая им расположение, цвет, ширину, высоту и т.д.

html разметка веб страница

Разметка текста

1. Заголовки.

Заголовок это важная часть при подаче информации, так как они описывают основную тематику текста перед которым стоят. Заголовок имеет тег <h>. Заголовок может иметь разный уровень, например:<й1>,<Ь2>,<Ь3>. Уровень заголовка определяет его размер и высоту на Веб-сайте.

Пример:

<М>Заголовок первого уровня</М>

<112>Загодовок второго уровня</112>

2. Абзацы.

Чтобы добавить текст на свою Веб-страницу можно воспользоваться тегом <p>, то есть тегом абзаца. Абзац можно редактировать с помощью CSS. Можно изменить цвет текста, шрифт, размер, расположение и тд

Пример:

<р>Здесь может быть ваш текст</р>>

3. Списки.

Списки HTML используются для группировки связанной информации. Разметка списка всегда состоит как минимум из двух элементов. Главные типы списков это нумерованные и ненумерованные. Каждый список всегда состоит из элементов которые обозначаются тегом <1і>. Внутри этого тега можно разместить текст тегом <p> или якорь-ссылку тегом <а>. Элементы <li> всегда должны находится внутри списка.

Ненумерованные списки - это списки, которые не нумеруются цифрами слева от текста, а нумеруются точкой. Ненумерованный список имеет тег <ul>.

Пример:

<ul>

<й>Основы(Структура и Анатомия)</1і>

<1і>Работа с Текстом</1і>

<1і>Г еометрические Фигурьі</1і>

</ul>

Нумерованные списки - это списки, где порядок пунктов имеет значение, как в рецепте. Они оборачиваются в элемент <o1>. Любой список это контейнер, внутри которого находятся элементы списка.

Пример:

<ol>

<1і>Основьі(Структура и Анатомия)</1і>

<1і>Работа с Тєкстом</1і>

<1і>Г еометрические Фигурьі</1і>

</ol>

Ссылки

Ссылки -- создаются с помощью тега <a>. Ссылки по факту нужны, чтобы соединить два ресурса. Например внутри старицы есть раздел после того как мы на него переходим, то мы оказываемся на другой веб странице просто она отредактирована в стиле прошлой. Важный элемент ссылки - это атрибут (href) в который нужно вставить саму ссылку на ресурс для перехода. Если этого не сделать то ссылка не будет работать.

Расскажем об основном виде ссылки:

* гиперссылки -- ссылки на другие Веб-страницы, на которые

пользователь может нажать и перейти.

Пример:

<а href-'Ваша сслылка">Новая страница</а>

Заключение

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

Список источников

1. Основы HTML. [Электронный ресурс]. URL: https: / /html5book.ru/o snovy-html/

2. Основы HTML. Изучение веб-ресурсов. [Электронный ресурс]. URL: https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/HTML _basics

3. Основы HTML и CSS. [Электронный ресурс]. URL: https://htmlacademy.ru/courses/297

4. Основы HTML. [Электронный ресурс]. URL: http://html-exp.narod.ru/base.htm

5. Основы HTML. [Электронный ресурс]. URL: https://stepik.org/course/52164/promo

6. Введение в HTML. [Электронный ресурс]. URL: https://developer.mozilla.org/ru/docs/Learn/HTML/Introduction_to_HTML

7. Базовая структура HTML-документа. [Электронный ресурс]. URL: https://ru.hexlet.io/courses/layout-designer-basics/lessons/page-structure/theory_unit

8. Основы HTML. [Электронный ресурс]. URL: https://docs.microsoft.com/ru-ru/cpp/mfc/html-basics?view=msvc-170

Размещено на Allbest.ru