Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<html>
<head>
	<link rel="shortcut icon" href="https://html5beginner.github.io/svg/HTML5_icon.svg" type="image/png">
	<meta charset="utf-8">
	<title>Самоучитель по HTML</title>
	<style type="text/css">
		body {
			background-color: #1fc8db;
    background-image: linear-gradient(
140deg, #EADEDB 0%, #BC70A4 50%, #BFD641 75%);
		}
		header {
		margin-bottom: 4%; 
        margin-left: 18%;
        text-align: center;
        background: yellow;
        width: 65%;
        border-radius: 6px;
        box-shadow: 0 0 6px gray;
		}
		.div-content {
			width: 99.6%;
			background: white;
			border: 1px solid black;
			 border-radius: 3px;
			 margin-left: 1.6px;
		}

		.Div-global {
			margin-left: 65px;
			width: 90%;
			background: black;
			 border-radius: 10px;
			 box-shadow: 0 0 10px rgba(0,0,0,0.5);
		}
		.div-subtitle {
			background: gray;
			width: 65%;
			border-radius: 6px;
			text-align: center;
margin-left: 18%;
		}
		a {
			color: #131313;
			transition: 0.6s;
			text-decoration: none;
		}
		a:hover {
			color: white;
			text-decoration: underline;
			transition: 0.4s;
		}
	</style>
</head>
<body>
<div class="scroll_panel">
    <a href="#" id="scroll_top"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 16.67l2.829 2.83 9.175-9.339 9.167 9.339 2.829-2.83-11.996-12.17z"/></svg></span></a>
    <a href="#" id="scroll_bottom"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z"/></svg></span></a>
</div>
<div class="Div-global">
<br>
	<header>
	<h1>Самоучитель HTML тэгов</h1>
	
	<div class="div-subtitle">
	<p>Подпишитесь пожалуйста на мои <b><i><a href="https://taplink.cc/saber_gaming_channel">Соц. сети</a></i></b></p>
</div>
</header>
<div class="div-content">
	<strong>!DOCTYPE</strong> = Объявляет тип документа и предоставляет основную информацию для браузера — его язык и версия.</div>
  <div class="div-content">
  Все теги начинаются на <strong><</strong> а заканчиватся на <strong>></strong> например = <textarea style="max-height: 20px; max-width: 150px; min-height: 19px; min-width: 149px;" readonly> <a href="#"></a> </textarea> 
  </div>
  
<div class="div-content">
<strong>bdi</strong> = Изолирует отрывок текста, написанный на языке, в котором чтение текста происходит справа налево, от остального текста.
</div>

<div class="div-content">
<strong>bdo</strong> = Отображает текст в направлении, указанном в атрибуте dir, переопределяя текущее направление написания текста.
</div>

<div class="div-content">
<strong>abbr</strong> = Определяет текст как аббревиатуру или акроним. Поясняющий текст задаётся с помощью атрибута title.</div>
<div class="div-content">
<strong>a</strong> = Создаёт гипертекстовые ссылки.</div>

<div class="div-content">
<strong>article</strong> = Раздел контента, который образует независимую часть документа или сайта, например, статья в журнале, запись в блоге, комментарий.
</div>

<div class="div-content">
<strong>aside</strong> = Представляет контент страницы, который имеет косвенное отношение к основному контенту страницы/сайта.
</div>

<div class="div-content">
<strong>audio</strong> = Загружает звуковой контент на веб-страницу.
</div>

<div class="div-content">
<strong>track</strong> = Добавляет субтитры для элементов audio и video.
</div>

<div class="div-content">
<strong>b</strong> = Задает полужирное начертание отрывка текста, не придавая акцент или важность выделенному.
</div>

<div class="div-content">
<strong>base</strong> = Задает базовый адрес (URL), относительно которого вычисляются все относительные адреса. Это поможет избежать проблем при переносе страницы в другое место, так как все ссылки будут работать, как и прежде.
</div>
<div class="div-content">
<strong>address</strong> = Задает контактные данные автора/владельца документа или статьи. Отображается в браузере курсивом.
</div>

<div class="div-content">
<strong>blockquote</strong> = Выделяет текст как цитату, применяется для описания больших цитат.
</div>

<div class="div-content">
<strong>body</strong> = Представляет тело документа (содержимое, не относящееся к метаданным документа).
</div>

<div class="div-content">
<strong>br</strong> = Перенос текста на новую строку.
</div>

<div class="div-content">
<strong>button</strong> = Создает интерактивную кнопку. Элемент может содержать текст или изображение.
</div>

<div class="div-content">
<strong>canvas</strong> = Холст-контейнер для динамического отображения изображений, таких как простые изображения, диаграммы, графики и т.п. Для рисования используется скриптовый язык JavaScript.
</div>

<div class="div-content">
<strong>caption</strong> = Добавляет подпись к таблице. Вставляется сразу после открывающего тега table.
</div>

<div class="div-content">
<strong>cite</strong> = Используется для указания источника цитирования. Отображается курсивом.
</div>

<div class="div-content">
<strong>code</strong> = Представляет фрагмент программного кода, отображается шрифтом семейства monospace.
</div>

<div class="div-content">
<strong>col</strong> = Выбирает для форматирования один или несколько столбцов таблицы, не содержащих информацию одного типа.
</div>

<div class="div-content">
<strong>colgroup</strong> = Создает структурную группу столбцов, выделяющую множество логически однородных ячеек.
</div>

<div class="div-content">
<strong>data</strong> = Элемент используется для связывания значения атрибута value, которое представлено в машиночитаемом формате и может быть обработано компьютером, с содержимым элемента.
</div>

<div class="div-content">
<strong>datalist</strong> = Элемент-контейнер для выпадающего списка элемента input. Варианты значений помещаются в элементы option.
</div>

<div class="div-content">
<strong>dd</strong>= Используется для описания термина из элемента dt.
</div>

<div class="div-content">
<strong>del</strong> = Помечает текст как удаленный, перечёркивая его.
</div>

<div class="div-content">
<strong>details</strong> = Создаёт интерактивный виджет, который пользователь может открыть или закрыть. Представляет собой контейнер для контента, видимый заголовок виджета помещается в элемент summary.
</div>

<div class="div-content">
<strong>dfn</strong> = Определяет слово как термин, выделяя его курсивом. Текст, идущий следом, должен содержать расшифровку этого термина.
</div>

<div class="div-content">
<strong>dialog</strong> = Интерактивный элемент, с которым взаимодействует пользователь для выполнения задачи, например, диалоговое окно, инспектор или окно. Без атрибута open не виден для пользователя.
</div>

<div class="div-content">
<strong>div</strong> = Элемент-контейнер для разделов HTML-документа. Используется для группировки блочных элементов с целью форматирования стилями.
</div>

<div class="div-content">
<strong>dl</strong> = Элемент-контейнер, внутри которого находятся термин и его описание.
</div>

<div class="div-content">
<strong>dt</strong> = Используется для задания термина.
em	Выделяет важные фрагменты текста, отображая их курсивом.
</div>

<div class="div-content">
<strong>figcaption</strong> = Заголовок/подпись для элемента figure.
</div>

<div class="div-content">
<strong>figure</strong> = Самодостаточный элемент-контейнер для такого контента как иллюстрации, диаграммы, фотографии, примеры кода, обычно с подписью.
</div>

<div class="div-content">
<strong>footer</strong> = Определяет завершающую область (нижний колонтитул) документа или раздела.
</div>

<div class="div-content">
<strong>form</strong> = Форма для сбора и отправки на сервер информации от пользователей. Не работает без атрибута action.
</div>

<div class="div-content">
<strong>h1 - h6</strong> = Создают заголовки шести уровней для связанных с ними разделов.
</div>

<div class="div-content">
<strong>head</strong> = Элемент-контейнер для метаданных HTML-документа, таких как title, meta, script, link, style.
</div>

<div class="div-content">
<strong>header</strong> = Секция для вводной информации сайта или группы навигационных ссылок. Может содержать один или несколько заголовков, логотип, информацию об авторе.
</div>

<div class="div-content">
<strong>hr</strong> = Горизонтальная линия для тематического разделения параграфов.
</div>

<div class="div-content">
<strong>html</strong> = Корневой элемент HTML-документа. Сообщает браузеру, что это HTML-документ. Является контейнером для всех остальных html-элементов.
</div>
<div class="div-content">
<strong>input</strong> = Создает многофункциональные поля формы, в которые пользователь может вводить данные.
</div>

<div class="div-content">
<strong>ins</strong> = Выделяет текст подчеркиванием. Применяется для выделения изменений, вносимых в документ.
</div>

<div class="div-content">
<strong>kbd</strong>	= Выделяет текст, который должен быть введён пользователем с клавиатуры, шрифтом семейства monospace.
</div>

<div class="div-content">
<strong>label</strong> = Добавляет текстовую метку для элемента input.
</div>

<div class="div-content">
<strong>legend</strong> = Заголовок элементов формы, сгруппированных с помощью элемента fieldset.
</div>

<div class="div-content">
<strong>i</strong> = Выделяет отрывок текста курсивом, не придавая ему дополнительный акцент.
</div>

<div class="div-content">
<strong>iframe</strong> = Создает встроенный фрейм, загружая в текущий HTML-документ другой документ.
</div>

<div class="div-content">
<strong>img</strong> = Встраивает изображения в HTML-документ с помощью атрибута src, значением которого является адрес встраиваемого изображения.
</div>

<div class="div-content">
<strong>link</strong> = Определяет отношения между документом и внешним ресурсом. Также используется для подключения внешних таблиц стилей.
</div>

<div class="div-content">
<strong>main</strong> = Контейнер для основного уникального содержимого документа. На одной странице должно быть не более одного элемента main.
</div>

<div class="div-content">
<strong>map</strong> = Создаёт активные области на карте-изображении. Является контейнером для элементов area.
mark Выделяет фрагменты текста, помечая их желтым фоном.
</div>

<div class="div-content">
<strong>meta</strong> = Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке head может быть несколько элементов meta, так как в зависимости от используемых атрибутов они несут разную информацию.
meter	Индикатор измерения в заданном диапазоне.
nav	Раздел документа, содержащий навигационные ссылки по сайту.
</div>

<div class="div-content">
<strong>noscript</strong> = Определяет секцию, не поддерживающую сценарий (скрипт).
object	Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется элемент param.
</div>

<div class="div-content">
<strong>script</strong> = Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src.
</div>

<div class="div-content">
<strong>option</strong> = Определяет вариант/опцию для выбора в раскрывающемся списке select, optgroup или datalist.
output	Поле для вывода результата вычисления, рассчитанного с помощью скрипта.
</div>

<div class="div-content">
<strong>p</strong> = Параграфы в тексте.
</div>

<div class="div-content">
<strong>param</strong> = Определяет параметры для плагинов, встраиваемых с помощью элемента object.
</div>

<div class="div-content">
<strong>progress</strong> = Индикатор выполнения задачи любого рода.
</div>

<div class="div-content">
<strong>q</strong> = Определяет краткую цитату.
</div>

<div class="div-content">
<strong>ruby</strong> = Контейнер для Восточно-Азиатских символов и их расшифровки.
</div>

<div class="div-content">
<strong>rb</strong> = Определяет вложенный в него текст как базовый компонент аннотации.
</div>

<div class="div-content">
<strong>rt</strong> = Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе ruby, выводится уменьшенным шрифтом.
</div>

<div class="div-content">
<strong>rtc</strong> = Отмечает вложенный в него текст как дополнительную аннотацию.
</div>

<div class="div-content">
<strong>rp</strong> = Выводит альтернативный текст в случае если браузер не поддерживает элемент ruby.
</div>

<div class="div-content">
<strong>s</strong> = Отображает текст, не являющийся актуальным, перечеркнутым.
</div>

<div class="div-content">
<strong>samp</strong> = Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом.
</div>

<div class="div-content">
<strong>section</strong>	= Определяет логическую область (раздел) страницы, обычно с заголовком.
</div>

<div class="div-content">
<strong>select</strong> = Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в option.
</div>

<div class="div-content">
<strong>small</strong> = Отображает текст шрифтом меньшего размера.
</div>

<div class="div-content">
<strong>source</strong> = Указывает местоположение и тип альтернативных медиаресурсов для элементов picture, video, audio.
</div>

<div class="div-content">
<strong>span</strong> = Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов.
</div>

<div class="div-content">
<strong>strong</strong> = Расставляет акценты в тексте, выделяя полужирным.
</div>

<div class="div-content">
<strong>style</strong> = Подключает встраиваемые таблицы стилей.
sub	Задает подстрочное написание символов, например, индекса элемента в химических формулах.
</div>

<div class="div-content">
<strong>textarea</strong> = Создает большие поля для ввода текста.
</div>

<div class="div-content">
<strong>summary</strong> = Создаёт видимый заголовок для элемента details.
</div>

<div class="div-content">
<strong>sup</strong> = Задает надстрочное написание символов.
</div>

<div class="div-content">
<strong>tbody</strong> = Определяет тело таблицы.
</div>

<div class="div-content">
<strong>table</strong> = Элемент для создания таблицы.
</div>

<div class="div-content">
<strong>tfoot</strong> = Определяет нижний колонтитул таблицы.
</div>

<div class="div-content">
<strong>th</strong> = Создает заголовок ячейки таблицы.
</div>

<div class="div-content">
<strong>td</strong> = Создает ячейку таблицы.
</div>

<div class="div-content">
<strong>thead</strong> = Определяет заголовок таблицы.
</div>

<div class="div-content">
<strong>time</strong> = Определяет дату/время.
</div>

<div class="div-content">
<strong>title</strong> = Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.
</div>

<div class="div-content">
<strong>tr</strong> = Создает строку таблицы.
</div>

<div class="div-content">
<strong>ul</strong> = Создает маркированный список.
</div>

<div class="div-content">
<strong>ol</strong> = Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная.
</div>

<div class="div-content">
<strong>li</strong> = Элемент маркированного или нумерованного списка.</div>

<div class="div-content">
<strong>video</strong> = Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: Ogg, WebM, MP4.
</div>
<div class="div-content">
<strong>wbr</strong> = Указывает браузеру возможное место разрыва длинной строки.
</div>

<div class="div-content">
<strong>area</strong> = Представляет собой гиперссылку с текстом, соответствующей определенной области на карте-изображении или активную область внутри карты-изображения. Всегда вложен внутрь элемента map.
</div>

<div class="div-content">
<strong>u</strong> = Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
</div>
<p class="p-end">:)</p>
<style type="text/css">
	.p-end {
		text-align: center;
		transition: 0.5s;
	}
	.p-end:hover {
        color: white;
        font-size: 18px;
        transition: 0.5s;
	}
	texterea {
	  font-weight: bold;
	  }
	  .scroll_panel {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 50px;
    transition: background 0.2s ease;
}
.scroll_panel:hover {
    background: #eee; 
}
 
.scroll_panel svg {
fill: #f00;
}
 
#scroll_top {
    display: block;
    width: 100%;
    height: 50%;    
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    transition: background 0.2s ease;
}
#scroll_top span {
    display: block;
    width: 100%;    
    position: absolute;
    left: 0;    
    top: 50px;
}
#scroll_top:hover {
    background: #ddd;   
}
 
#scroll_bottom {
    display: block;
    width: 100%;
    height: 50%;    
    position: absolute;
    top: 50%;
    left: 0;
    text-align: center;
    transition: background 0.2s ease;
}
 
#scroll_bottom span {
    display: block;
    width: 100%;    
    position: absolute;
    left: 0;    
    bottom: 20px;
}
#scroll_bottom:hover {
    background: #ddd; 
}
</style>
</div></div>
<script type="text/javascript">
$(function() {
    $('#scroll_top').click(function(){
        $('html, body').animate({scrollTop: 0}, 600);
        return false;
    });
     
    $('#scroll_bottom').click(function(){
        $('html, body').animate({scrollTop: $(document).height() - $(window).height()}, 600);
        return false;
    });
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</body>
</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console