HTML-теги и как их использовать

Electronics and Programming tutorials and projects

HTML-теги и как их использовать

html tags

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

В этой статье рассматриваются некоторые примеры часто используемых HTML-тегов. Также вы можете использовать это руководство, чтобы научиться создавать базовый шаблон веб-приложения для ваших проектов Arduino (например, ESP8266 и ESP32).

Как использовать HTML-теги

Теги (или метки) пишутся двумя способами:

Однострочные теги: теги, которые содержат объект (например, изображение, кнопку, поле…) или изменение (например, разрыв строки) на странице.

Однострочные теги иногда не меняют внешний вид страницы.

Как написать однострочный тег следующим образом:

<tagname />

Теги контента: теги, которые придают контенту или тексту определенный стиль или функцию.

<tagname><tagname/>
<tagname>Content<tagname/>

тег DOCTYPE

Этот тег всегда следует размещать в начале файлов, созданных с использованием HTML, следующим образом:

<!DOCTYPE html>

Отступ (Indentation)

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

Если отступ табуляции уже существовал, к нему необходимо добавить еще один отступ табуляции.

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

Атрибут (Attribute)

Атрибуты — это настройки, которые размещаются перед именем тега.

Значение атрибута должно быть заключено в » » после символа равенства.

Для тегов предопределены атрибуты:

<tagname attribute1=»value» attribute2=»value» />
<tagname attribute1=»value» attribute2=»value»> [Content] </tagname>

Изучение некоторых HTML-теги

html-тег: этот тег должен включать все содержимое страницы и размещается после тега Doctype.

<!DOCTYPE html>
<html>
</html>

Тег head и тег body: тег head используется для размещения общих настроек страницы, настроек поисковой системы и т. д., а тег body используется для размещения содержимого страницы. Следующее:

<!DOCTYPE html>
<html>
	<head>
		[webpage settings]
	</head>
	<body>
		[webpage content]
	</body>
</html>

Заголовок страницы <title>: Тег заголовка используется для определения заголовка страницы, который пишется вверху страницы (на вкладках браузера). Этот HTML-тег должен быть определен в разделе настроек (head).

Тег абзаца <p>: используется для определения абзацев содержимого.

Атрибут стиля (style) в абзаце: этот атрибут используется для изменения таких функций, как цвет текста, выравнивание по правому краю, выравнивание по левому краю, шрифт, размер шрифта и т. д. Значения стиля должны быть записаны как команды CSS (значение: тип свойства;)

Пример: <p style=»color: red;»> content </p>

Жирный тег <b>: используется для выделения текстового содержимого жирным шрифтом.

Тег разрыва строки <br />: используется для отображения продолжения текста на следующей строке. Этот тег записывается как однострочный тег.

Тег курсива <i>: этот тег отображает текст под небольшим углом.

Тег подчеркивания <u>: этот тег подчеркивает текстовое содержимое внутри.

Тег marquee <marquee></marquee>: Этот тег можно использовать для вставки анимированного текста в HTML-код. Чтобы переместить текст слева направо, используйте атрибут direction=»right», а для перемещения текста справа налево используйте direction=»left».

Теги темы/заголовка Теги заголовков

Теги заголовков включают <h1>,<h2>,<h3>,<h4>,<h5>,<h6> и отображают заголовки абзацев в разных размерах.

  • Теги заголовков имеют особое применение при определении ключевых слов для поисковых систем.

В следующем примере показано, как использовать все эти теги:

<!DOCTYPE html>
<html>
	<head>
		<title>page title</title>
	</head>
	<body>
		<h3>paragraph subject<h3>
		<p style="color:red;">red text</p>
		text1<br />text2<b>text3</b>
		<i>text4</i><u>tex5</u>

		<marquee direction="left" >
			Hello
		</marquee>
	</body>
</html>

Таблицы также можно отображать с помощью тегов. Таблицы имеют четыре основных тега:

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

2- Тег строки <tr>: этот тег используется для разделения строк. Чтобы нарисовать таблицу, в этот тег необходимо поместить столько строк, сколько имеется в таблице.

3- Тег заголовка <th>: этот тег используется внутри тега первой строки в качестве заголовка столбца.

4- Тег столбцов таблицы <td>: в следующих строках для каждого столбца используется один тег столбца.

Атрибуты стиля в таблицах

Этот атрибут (style) используется в таблицах для установки полей, цвета и стиля таблицы.

Функция границы (border): эта функция используется для установки линий рамки. Регулируемые значения этого свойства: цвет, толщина, тип цвета.

Пример:

border: 3px black solid;

3px означает, что толщина рамки составляет три пикселя.

Черный означает цвет границ поля.

А сплошной означает тип цвета (может отображаться).

Следующая команда соединяет поля каждой строки и столбца таблицы, и ее лучше определить в атрибуте стиля тега таблицы:

border-collapse: collapse;

В следующем примере рисуется таблица с полем

<!DOCTYPE html>
<html>
	<head>
		<title>page title</title>
	</head>

	<body>
		<p style="color:red;">text</p>
		<table style="border-collapse: collapse;">
			<tr>
				<th style="border: 3px solid black;">heading1</th>
				<th style="border: 3px solid black;">heading2</th>
			</tr>
			<tr>
				<td style="border: 3px solid black;">r1 c1</td>
				<td style="border: 3px solid black;">r1 c2</td>
			</tr>
			<tr>
				<td style="border: 3px solid black;">r2 c1</td>
				<td style="border: 3px solid black;">r2 c2</td>
			</tr>
		</table>
	</body>
</html>

Вы можете сохранить приведенный выше код в виде файла .html с помощью блокнота или другого текстового редактора и просмотреть результат в веб-браузере.

w3schools — хороший справочник по HTML-теги.

***»»Проекты по электронике, программированию и Arduino, включая исходные коды, схемы и планы печатных плат для инженеров, студентов и любителей»»***

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

10 + два =