Содержание

Работа с основными HTML тегами и атрибутами для новичков

Сейчас мы с вами займемся изучением основных тегов. Начнем с того, какие теги являются обязательными на странице, формируя ее структуру.

Блок . Структура простейшей страницы

Страница сайта — это обычный текстовый файл с расширением .html. Внутри этого файла и хранится текст HTML страницы вместе с тегами. Этот файл обязательно должен иметь следующие теги: тег <html>, который должен содержать в себе текст всего сайта (все, что написано вне этого тега, браузером будет проигнорировано), а внутри него должны быть еще два тега: тег <head> для служебного содержимого страницы и тег <body> — для основного текста, который и виден на экране браузера.

В служебное содержимое, которое располагается внутри тега <head>, входит много различных вещей, но пока нам нужны только две из них. Это тег <title>, задающий название страницы, которое будет видно во вкладке браузера, и тег <meta>, который задает кодировку страницы (она ставится в атрибуте

charset и обычно имеет значение utf-8, подробнее об этом в видео, которое будет ниже на пару абзацев).

Кроме того, перед тегом <html> обычно пишется конструкция doctype, которая указывает версию языка HTML, на которой сделан сайт. Актуальная сейчас версия языка имеет номер пять и доктайп для нее должен выглядеть так — <!DOCTYPE html>.

Итак, давайте посмотрим на основную структуру страницы (чтобы запустить это пример в браузере — скопируйте его в текстовый файл с расширением .html и откройте в браузере, если у вас проблемы с этим — посмотрите видео под примером):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		Это основное содержимое страницы.
	</body>
</html>

Как выглядит этот пример в браузере смотрите по данной ссылке.

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

Посмотрите его и только потом переходите к дальнейшему чтению:

Тут скоро будет видео как начать: как сохранить с расширением .html, структура страницы, кодировки.

Ну, а теперь, научившись создавать простейшие страницы, мы перейдем к изучению полезных тегов, которые следует использовать внутри тега <body>. Это будут теги для абзацев, заголовков, списков, ссылок и других полезных вещей. Итак, приступим.

Блок . Абзацы

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

Абзац создается с помощью тега <p> таким образом:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<p>
			Это абзац. 
		</p>
		<p>
			Это еще один абзац.
		</p>
		<p>
			И еще один абзац.
		</p>
	</body>
</html>

Так код будет выглядеть в браузере:

Это абзац.

Это еще один абзац.

И еще один абзац.

Блок . Заголовки h2, h3, h4, h5, h5, h6

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

Заголовки создаются с помощью тегов <h2>, <h3>, <h4>, <h5>, <h5>, <h6>. Они имеют разную степень важности. В заголовке h2 следует располагать название всей HTML страницы, в h3 — название блоков страницы, в h4 — название подблоков и так далее.

Все заголовки по умолчанию жирные и имеют разный размер (это можно поменять через CSS, но об этом позже).

Смотрите пример:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<h2>Заголовок h2</h2>
		<h3>Заголовок h3</h3>
		<h4>Заголовок h4</h4>
		<h5>Заголовок h5</h5>
		<h5>Заголовок h5</h5>
		<h6>Заголовок h6</h6>
		<p>Это первый абзац.</p>
		<p>Это второй абзац.</p>
		<p>Это третий абзац.</p>
	</body>
</html>

Так код будет выглядеть в браузере:

Заголовок h3

Заголовок h4

Заголовок h5
Заголовок h5
Заголовок h6

Это первый абзац.

Это второй абзац.

Это третий абзац.

Блок . Жирный

Вы уже знаете, что заголовки по умолчанию жирные. Однако, можно сделать жирным и обычный текст — достаточно взять его в тег <b>. Смотрите пример:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<p>
			Это обычный текст, а это <b>жирный</b> текст. 
		</p>
	</body>
</html>

Так код будет выглядеть в браузере:

Это обычный текст, а это жирный текст.

Обратите внимание на то, что тег <b> следует использовать внутри какого-либо другого тега, например абзаца. В этом случае абзацы создают общую структуру страницы (абзацы и заголовки), а тег b делает жирным отдельные кусочки текста.

Блок . Курсив

Кроме жирного можно сделать также и курсив с помощью тега <i>:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<p>
			Это обычный текст, а это <i>курсивный</i> текст.
		</p>
	</body>
</html>

Так код будет выглядеть в браузере:

Это обычный текст, а это курсивный текст.

Блок . Списки

Наряду с абзацами и заголовками существует еще один важный элемент страницы — это списки. Такие элементы наверняка знакомы всем пользователям интернета. Они представляют собой перечисление чего-либо (список) по пунктам. Возле каждого пункта списка обычно стоит закрашенный кружок (он называется маркер списка).

Списки создаются с помощью тега <ul>, внутри которого обязательно должны идти теги <li>. Тег

ul задает сам список, а в теги li следует ложить пункты списка (то есть одному li соответствует один маркер списка). Имейте ввиду, что отдельно теги li использовать нельзя. Смотрите пример:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<ul>
			<li>Первый пункт списка.</li>
			<li>Второй пункт списка.</li>
			<li>Третий пункт списка.</li>
		</ul>
	</body>
</html>

Так код будет выглядеть в браузере:

  • Первый пункт списка.
  • Второй пункт списка.
  • Третий пункт списка.

Списки, созданные через тег ul, называются неупорядоченными списками. Такое название им дано потому, что существуют еще и упорядоченные списки, у которых вместо маркеров-точек будут маркеры-цифры. Такие списки вместо тега ul имеют тег <ol>, а пункты таких списков также создаются через теги li.

Давайте сделаем упорядоченный список, используя тег ol:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<ol>
			<li>Первый пункт списка.</li>
			<li>Второй пункт списка.</li>
			<li>Третий пункт списка.</li>
		</ol>
	</body>
</html>

Так код будет выглядеть в браузере:

  1. Первый пункт списка.
  2. Второй пункт списка.
  3. Третий пункт списка.

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

Блок . Ссылки

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

Ссылка создается с помощью тега <a>, при этом у нее должен быть обязательный атрибут href, в котором хранится адрес той страницы, на которую ведет ссылка. Смотрите пример:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<a href="http://phphtml.net">Ссылка на сайт phphtml.net.</a>
	</body>
</html>

Так код будет выглядеть в браузере:

Ссылка на сайт phphtml.net.

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

Тут скоро будет видео про ссылки абсолютные и относительные

Блок . Картинки

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

Как это работает, посмотрим на следующем примере:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<img src="smile.png">
	</body>
</html>

Так код будет выглядеть в браузере:

Обратите внимание на то, что тег <img> не требует закрывающего тега.

Блок . Ссылки в виде картинок

Ссылкой может быть не только текст, но и картинка — для этого достаточно тег <img> вложить в тег <a>, как это сделано в следующем примере. Нажмите на картинку — и вы перейдете по ссылке на сайт phphtml.net (чтобы потом вернуться назад на книжку — нажмите кнопку «назад» в браузере):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<a href="http://phphtml.net"><img src="smile.png"></a>
	</body>
</html>

Так код будет выглядеть в браузере:

Блок . Разрыв строки

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

Давайте убедимся в этом на следующем примере:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<p>Это первый абзац.</p>
		<p>Это второй абзац.</p>
	</body>
</html>

Так код будет выглядеть в браузере:

Это первый абзац.

Это второй абзац.

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

Чтобы сделать такое, в том месте, где должен быть разрыв строки, следует написать тег <br>. Учтите, что этот тег особенный и не имеет закрывающего.

Давайте посмотрим на его работу на следующем примере:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<p>Это первая строка текста, <br> а это вторая.</p>
	</body>
</html>

Так код будет выглядеть в браузере:

Это первая строка текста,
а это вторая.

Блок . Комментарии HTML

Практически во всех языках программирования есть такое понятие как «комментарии». Комментарии — это такой текст, который будет проигнорирован браузером — на экране он будет не виден, но останется в исходном коде страницы.

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

Комментарии в HTML оформляются следующим образом: сначала уголок, знак ! и два дефиса — <!—, потом текст комментария, а потом два дефиса и уголок — —>. Смотрите пример:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<!-- 
			Это комментарий HTML -
			на странице сайта он не отображается. 
		-->
		Это основное содержимое страницы.
	</body>
</html>

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Когда все решите — переходите к изучению новой темы.

← Предыдущая страница Следующая страница →

Как пользоваться CodePen: руководство для начинающих

CodePen — популярный онлайн-редактор кода, которым пользуется множество разработчиков по всему миру. Он предназначен для работы над фронтенд-проектами на HTML, CSS и JavaScript. Если вам нужно создать проект с бэкендом, лучше выбрать другой редактор.

Как зарегистрироваться и получить бесплатный аккаунт

Когда вы заходите на сайт CodePen, вам предлагается залогиниться при помощи аккаунта в Twitter, Facebook или GitHub. Также можно зарегистрироваться на сайте, используя адрес электронной почты, логин и пароль.

После создания аккаунта вы получите письмо от CodePen. Откройте его и верифицируйте свой email.

Разница между пенами и проектами

После верификации email-адреса, вы попадете прямо в Pen-редактор. Если редактор не покажется, кликните на вкладку Pen в левой части страницы.

Pen-редактор делится на три раздела: HTML, CSS и JavaScript.

Редактор пенов не поддерживает множественные файлы, т. е. предполагается, что в вашем проекте будет не больше одного файла на каждом языке. Отсюда вывод: пены (Pens) годятся только для маленьких проектов. Если планируете написать больше 5000 строк кода, лучше создавать не пен, а проект.

Пенов можно создавать сколько угодно, даже с бесплатным аккаунтом.

Проекты

Если хотите создать проект, кликните на вкладку «Project» в левой части экрана.

В редакторе проектов можно работать с несколькими HTML, CSS и JavaScript файлами.

Имея бесплатный аккаунт, вы сможете создать только один проект, в котором будет максимум 10 файлов. Если вам нужно больше возможностей, придется заплатить за Pro-версию.

Базовые функции редактора пенов

Форматирование

Кликнув на стрелочку выпадающего меню в любом из трех редакторов, вы увидите опцию Format.

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

Можно также заглянуть в раздел Behavior в Pen Settings (настройках пена) и выбрать опцию Format on Save (форматировать при сохранении).

Анализ

Открыв выпадающее меню в любом из трех редакторов, вы увидите опцию Analyze. Этот инструмент позволяет находить и исправлять ошибки в коде.

Опции просмотра

Кликнув на Change View, вы сможете настроить макет редактора или переключиться на другие варианты просмотра.

Использование консоли

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

Добавление ссылок в раздел head (HTML)

При создании пенов вам не нужно включать в свой код DOCTYPE, html, head или body. Вся эта информация встроена в редактор.

Но если вам нужно добавить ссылки в head, например иконки Font Awesome или Google Fonts, вы можете это сделать во вкладке с настройками, в разделе head.

Добавление CSS-библиотек и фреймворков

В настройках пена есть возможность добавить CSS-библиотеки и фреймворки. Например, Bootstrap, Tailwind CSS и Bulma.

Добавление JavaScript-библиотек и фреймворков

В настройках пена, в разделе JavaScript можно добавить в пен популярные библиотеки и фреймворки, такие как React, Angular и Vue.

Шеринг пенов в соцсетях

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

Экспорт пенов

Если хотите загрузить свою работу на компьютер, это можно сделать при помощи кнопки Export. Она находится там же, в правом нижнем углу.

В результате экспорта будет создана папка с вашими файлами.

Встраивание пенов в блоги и статьи

Если хотите показать пример кода в посте блога, можно встроить ваш пен прямо в код страницы. Для этого нажмите кнопку Embed в правом нижнем углу редактора.

Как сделать форк пена

Сделать форк — значит создать копию пена. При этом вы будете иметь доступ ко всему коду и сможете изменять его по своему усмотрению.

Прежде всего, найдите пен, форк которого хотите сделать. Затем кликните кнопку Fork в нижнем правом углу.

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

Как добавлять в пен препроцессоры и пакеты

CodePen позволяет добавлять в пены HTML, CSS или JavaScript препроцессоры, а также NPM-пакеты.

В настройках пена, во вкладке HTML, можно выбрать из опций Haml, Markdown, Slim и Pug.

Во вкладке CSS можно выбрать из Less, SCSS, Sass, Stylus и PostCSS.

Что касается JavaScript, тут вы можете выбирать из Babel, TypeScript, CoffeeScript и LiveScript.

Также можно добавлять в пены NPM-пакеты, такие как react-bootstrap.

Базовые функции редактора проектов

Если вы работаете над проектом, где используется много файлов (больше трех), следует создать проект, а не пен, и, соответственно, выбрать редактор проекта. Бесплатный аккаунт допускает создание только одного проекта.

Шаблоны

В редакторе есть несколько шаблонов для проектов на HTML и CSS, а также для React-проектов.

Если перейдете на платную версию, получите доступ к шаблонам на Tailwind CSS и Bootstrap.

Файлы и директории

Чтобы добавить новый файл или папку, кликните соответствующую кнопку в левом нижнем углу.

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

Имея бесплатный аккаунт, можно создать или загрузить до 10 файлов. Если вам нужно больше, придется перейти на платную версию.

Шеринг проектов

Если вы захотите поделиться своим завершенным проектом в соцсетях или на платформе для блогов, нажмите кнопку Share в правом нижнем углу редактора.

Экспорт проектов

Файлы проекта можно экспортировать — загрузить на свой компьютер — при помощи кнопки Export в том же правом нижнем углу.

CodePen challenges

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

У вас также останется доступ к задачам прошлых месяцев.

Надеюсь, эта статья вам понравилась. Желаю удачи в вашем путешествии по миру фронтенда!

Перевод статьи «How to Use CodePen – A Beginner’s Guide».

Как работать с упрощенным редактором

Для пользователей с ролью Дизайнер, Редактор, Менеджер, Супермен

В SendPulse вы можете создать шаблон вашего письма в блочном конструкторе или загрузить свой шаблон в HTML редакторе.

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

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

Если вам нужно создать шаблон с динамическим контентом, читайте статью «Как создавать динамические письма по событиям на основе готовых шаблонов SendPulse».

Также вы можете выбрать готовый шаблон и заменить в нем текст и картинки — подробнее об этом читайте в статье «Как использовать бесплатные готовые шаблоны для рассылок».

Как загрузить свой шаблон

Перейдите в раздел «Рассылки» > «Шаблоны», нажмите «Добавить шаблон» и выберите «Упрощенный редактор».

Введите название шаблона.

Добавьте код шаблона

Нажмите на значок «Исходный код».

Введите код вашего шаблона. В тег <head> поместите все медиазапросы, а в <body> — все содержимое шаблона.

Шаблон письма должен быть написан по правилам адаптивной верстки HTML для email писем. К примеру, не рекомендуется выставлять фиксированную высоту и ширину блока, а стили нужно прописывать инлайново с использованием атрибута style.

Также не используйте скрипты JS и не подключайте сторонние файлы с помощью тега <iframe> — почтовые клиенты их не видят. Если хотите отправить интерактивное письмо, воспользуйтесь технологией AMP.

Не забывайте ставить символ / в закрывающем теге — если его не поставить, то следующий тег будет восприниматься вложенным в предыдущий.

Проверить шаблон на правильность вы можете с помощью сервиса HTML Email Check and Validation Tool и W3C Unicorn HTML Checker.

Читайте также: «Список поддерживаемых CSS и HTML атрибутов в шаблоне письма».

Внесите изменения в шаблон

С помощью панели инструментов вы можете работать с текстом: выбрать шрифт, размер и выравнивание, выделить курсивом, полужирным, подчеркнутым или зачеркнутым, а также увеличить или уменьшить отступы.

Также можно выбрать цвет текста и фона.

Чтобы вставить или удалить ссылку, используйте значок «Вставить/редактировать ссылку» и «Удалить ссылку».

Чтобы добавить медиафайлы в ваш шаблон, нажмите на «Вставить видео» или «Вставить/редактировать изображение».

Вы можете добавить маркированный и нумерованный списки в шаблон вашего письма.

Также в шаблон можно добавить таблицу.

Чтобы отправлять персонализированные письма пользователям, вставьте переменные.

Чтобы посмотреть как ваш шаблон будет выглядеть в письме, воспользуйтесь функцией «Предпросмотр».

Также на панели редактирования доступны такие функции: «Вернуть», «Отменить», «Поиск и замена», «Горизонтальная линия», «Очистить формат», «Нижний индекс», «Верхний индекс», «Направление справа налево», «Показывать блоки» и «Полноэкранный режим».

Загрузите изображения на сервер SendPulse

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

Отправьте тестовое сообщение

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

В тестовых письмах не работают переменные. Если вам нужно проверить подстановку переменных, делайте рассылку на адресную книгу, в которой есть ваш адрес.

Сохраните шаблон

Сохраните шаблон и используйте его в ваших рассылках.

Читайте также: «Как отправить email рассылку».

Как редактировать шаблон

Чтобы редактировать существующий шаблон, перейдите в раздел «Рассылки» > «Шаблоны». Выберите необходимый шаблон и нажмите «Редактировать шаблон».

Обратите внимание, что не все шаблоны можно редактировать с помощью упрощенного редактора — например, если вы создали шаблон в конструкторе, то он в нем и откроется. С помощью упрощенного редактора вы также можете менять некоторые системные шаблоны.

Когда шаблон готов, вы можете сохранить его как новый или пересохранить текущий со всеми изменениями.

Обновлено: 10.08.2022

Как работает HTML | Узнайте, как HTML работает с различными атрибутами

HTML – это язык на основе тегов, используемый для разработки веб-страниц; HTML означает язык разметки гипертекста. Гипертекст относится к тому, как веб-страницы связаны друг с другом. Таким образом, ссылка, доступная на веб-странице, называется гипертекстом. Это язык разметки, который с помощью тегов сообщает браузеру, как на нем будет отображаться страница. Бернерс-Ли разработал его в конце 1991 года, но «HTML2.0» была первой стандартной спецификацией, опубликованной в 1991 году.95. Позже его многочисленные HTML-версии стали похожи на HTML 4.0; в настоящее время последней версией является HTML5.0, который очень известен в разработке веб-сайтов.

Структура работы HTML-страницы

Давайте посмотрим на структуру работы HTML-страницы.

 

<голова>
тег заголовка html

<тело>
 
тег заголовка html
 

тег абзаца html

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

Над тегом заключен полный документ языка программирования HTML, состоящий из заголовка документа, представленного тегами…, и тела документа, представленного тегами….

Тег head представляет заголовок документа, который может содержать другие теги HTML, такие как,<link> и т. д.</p><h5></h5><title></h5><p> этот тег используется внутри тега<head> для написания заголовка документа.</p><h5></h5><body></h5><p> Тег<body> представляет собой тело документа, которое содержит другие теги HTML, такие как<div>,<h2><span class="ez-toc-section" id="i-36">, </span></h2><p> и т. д.</p><h4><span class="ez-toc-section" id="_HTML-4"> Различные теги HTML-работ и их описание </span></h4><p> Различные теги Как работает HTML, описано ниже:</p><h5></h5><h2></h2></h5><p> Тег заголовка используется для создания разновидностей заголовка, приведенного ниже примера</p><pre> <!DOCTYPE HTML> <html> <голова> <title>Пример заголовка <тело>

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4
Заголовок 5
Заголовок 6

Вывод

Заголовок 1
Заголовок 2
Заголовок 3
Заголовок 4
Заголовок 5
Заголовок 6

Это тег абзаца, который можно лучше понять на примере, приведенном ниже.

 

<голова>
Пример абзаца

<тело>

Это первый абзац текста.


Это второй абзац текста.


Это третий абзац текста.

Вывод

Это первый абзац текста.
Это второй абзац текста.
Это третий абзац текста.


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

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

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

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

<голова>
Сохранить пример форматирования

<тело>
<пред>
Laravel — это PHP-фреймворк. Это фреймворк с открытым исходным кодом, используемый при разработке веб-приложений. Эта структура основана на шаблоне проектирования контроллера представления модели, поскольку этот проект, разработанный с помощью этой структуры, более структурирован и управляем. Этот фреймворк повторно использует существующий

Вывод

Laravel — это PHP-фреймворк. Это платформа с открытым исходным кодом, используемая при разработке веб-приложений
. Этот фреймворк основан на шаблоне проектирования контроллера представления модели
, поскольку этот проект, разработанный с помощью этого фреймворка,
более структурирован и управляем. Эта структура повторно использует существующие

 

Для печати одного пробела используется в HTML.

Свойства тегов

Мы можем установить свойство на уровне тега Пример, приведенный ниже

 

<голова>
Выровнять атрибут

<тело>

Выровнено по левому краю


Выровнено по центру


Выровнено по правому краю

Вывод

Выровнено по левому краю
Выровнено по центру
Выровнено по правому краю

Основные атрибуты HTML

Есть несколько основных атрибутов, которые использовались почти со всеми последующими элементами HTML.

  • Идентификатор
  • Название
  • Класс
  • Тип
1) Id

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

Это первый абзац, который объясняет, что такое HTML , и как его использовать


Это второй абзац, который объясняет, что такое каскадная таблица стилей и как ее использовать. использовать его

Объяснение. В приведенном выше примере один и тот же элемент используется два раза, чтобы различать этот элемент только по идентификатору.

2) Заголовок

Синтаксис этого атрибута аналогичен атрибутам id, назначение этих атрибутов будет зависеть от элемента, который их несет; хотя он часто отображается в виде всплывающей подсказки, когда курсор находится над элементом, это основное использование этого атрибута. Пример приведен ниже –

 

<голова>
Пример атрибута  title

<тело>

Сон от долгого времени

Вывод

Длительный сон

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

3) Класс

Атрибут класса используется для связывания элемента с таблицей стилей и указывает класс элемента. Мы узнаем больше об использовании атрибута класса, когда будем изучать каскадную таблицу стилей (CSS). Основное ее применение — это CSS. Значением этого атрибута также может быть список имен классов, разделенных пробелами. Пример приведен ниже –

class = "className11 className12 className53"

4) Стиль

Используется для написания правила каскадного стиля на уровне элемента, что лучше пояснить на примере, приведенном ниже.

 

<голова>
Атрибут стиля

<тело>

Это пример текста стиля, он красного цвета...

Вывод

Это пример текста стиля; это красный цвет…

Заключение

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

Рекомендуемые статьи

Это руководство по работе с HTML. Здесь мы обсудили основную концепцию HTML с использованием различных тегов и основных атрибутов HTML. Вы также можете просмотреть следующие статьи, чтобы узнать больше:

  1. Применение HTML
  2. Шпаргалка HTML
  3. Стили списка HTML
  4. Полоса прокрутки в HTML

Как использовать пользовательский HTML-редактор

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

Чтобы создать кампанию с помощью пользовательского редактора HTML:

  1. Перейдите на страницу  Кампании .

  2. Создайте свою кампанию и выберите пользовательский HTML-редактор.

  3. Выберите метод импорта кода. Вы можете выбрать Вставить в код , Импортировать из ZIP,  или Импортировать с URL-адреса .

Примечание:  Пользовательский конструктор HTML доступен только в версии Advanced 9.план 0044.

Как добавить переменные в вашу кампанию

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

Пользовательские переменные поля

Пользовательские переменные используются для более точного таргетинга и персонализации вашего информационного бюллетеня с целью повышения вовлеченности. Чтобы добавить пользовательские переменные в вашу кампанию:

  1. На боковой панели нажмите вкладку  Фрагменты  .

  2. В разделе  Настраиваемые поля используйте раскрывающееся меню, чтобы выбрать поле, соответствующее данным, которые вы хотите включить в свою кампанию.

  3. Нажмите Скопируйте и вставьте тег слияния в раздел контента.

Примечание:  Если вы хотите включить данные, для которых в настоящее время нет поля, вы можете создать собственные настраиваемые поля. Созданное настраиваемое поле появится в  Настраиваемые поля  выпадающее меню на вкладке  Фрагменты  

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

Переменные ссылки

Переменные ссылки создают интерактивную ссылку, уникальную для каждой отдельной кампании. Здесь вы найдете три переменные ссылки:

  • Ссылка для отписки   – Подписчики перенаправляются на вашу страницу отписки. Обязательно включать видимую ссылку отписки во все кампании.

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

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

Фрагменты HTML, доступные в пользовательском HTML-редакторе

Наши предварительно написанные фрагменты HTML предназначены для упрощения процесса создания кампании для начинающих (или ускорения его для опытных дизайнеров электронной почты).

Фрагменты HTML можно найти на вкладке Фрагменты в разделе Фрагменты HTML .

В кампанию можно включить девять фрагментов HTML:

  • Base  – Хорошая отправная точка для создания пользовательского электронного письма в формате HTML, поскольку в нем есть все необходимые элементы и структура, которые помогут вам создать полнофункциональное электронное письмо. Если вы уже знакомы с кодом HTML, вы можете просто начать создавать свое электронное письмо с фрагмента Base и продолжить построение оттуда.

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

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

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

  • Social forward  —  Позвольте своим подписчикам поделиться новостной рассылкой со своими подписчиками в социальных сетях одним нажатием кнопки.

  • Разделитель  – разбивайте содержимое бюллетеня, вставляя пробелы между элементами.

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

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

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

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

Как оптимизировать CSS для электронной почты

Существует три способа внедрить CSS в вашу кампанию:

  • Встроенные (рекомендуется). Встроенные стили позволяют переопределять встроенные или внешние правила стилей и записываются непосредственно в HTML-тег вашего кода

  • Встроенные  – встроенные стили применяются в  секция вашей кампании

  • Внешний   – внешний стиль – это ссылка, помещенная в   секция вашей кампании, которая ссылается на отдельный файл, содержащий ваши правила стиля

Различное почтовые клиенты по-разному воспринимают CSS и могут даже удалять CSS в блоках