Перед вами полное руководство по HTML-кодам, которые могут пригодиться на вашем сайте.
Шпаргалка HTML CSS содержит самые популярные комбинации тегов, элементов и их атрибутов.
Надеюсь, HTML шпаргалка на русском поможет сберечь ваше время и станет волшебной палочкой-выручалочкой на все случаи жизни.
Обязательно просмотрите другие статьи по CSS на этом сайте. Они содержат более детальные демонстраций законов вёрстки и подробные объяснения по кодированию.
- Форматирование текста в HTML и CSS
- Как оформить заголовки в тексте?
- Как поделить текст на абзацы в HTML?
- Как выравнивать абзацы на странице?
- Как создать разрыв строки?
- Как выделить текст жирным шрифтом?
- Как обозначить очень важный текст с помощью strong?
- Как выделить текст курсивом?
- Как выделить текст курсивом и семантически?
- Как оформить подчёркивание текста с помощью HTML?
- Как зачеркнуть текст?
- Как выбрать шрифт?
- Как изменить размер шрифта?
- Как изменить цвет текста?
- Как написать текст на цветном фоне?
- Как оформить цитату?
- Как сделать простую ссылку?
- Как сделать ссылку, открывающуюся в новом окне?
- Как сделать nofollow ссылку?
- Как создать ссылку на адрес электронной почты?
- Как создать ссылку на адрес электронной почты с готовой темой письма?
- Как сделать якорную ссылку для перемещения по странице?
- Как добавить в статью изображение?
- Как добавить ссылку к изображению?
- Как поместить изображение слева или справа от текста?
- Как задать фон в файле style.css?
- Как создать нумерованный список?
- Как создать маркированный список?
- Как вынести стиль маркированного списка с чередующимися иконками в файл style.css?
- Как прописать стиль нумерованного списка с раскрашенными цифрами в файл style.css?
- Как создать содержание статьи с нумерованным списком, якорными ссылками и цветовой схемой как здесь?
- Как сделать кнопку на сайте?
- Как вывести специальные символы с помощью HTML?
Как оформить заголовки в тексте?
Вы можете использовать заголовки от h1 до h6. Чем больше число в теге, тем меньше важность заголовка в иерархии документа и мельче должен быть шрифт.
<h1> Самый важный заголовок документа</h1>
Как задать выравнивание заголовка? Вы можете сместить заголовок «влево», «вправо» или выровнять «по центру».
<h1 style="text-align: center;"> Заголовок в центре строки</h1> <h1 style="text-align: left;"> Заголовок слева </h1> <h1 style="text-align: right;"> Заголовок справа </h1>
Как поделить текст на абзацы в HTML?
Тег p задаёт разрыв абзаца, определяет каждый новый абзац.
<p> Новый абзац </p>
Как выравнивать абзацы на странице?
Выровняйте абзац, используя CSS. Вы можете использовать значения «влево» и «вправо» или выровнять «по центру».
<p style="text-align: center"> Текст вашего абзаца выровнен по центру</p> <p style="text-align: left;"> Абзац выровнен по левому краю </p> <p style="text-align: right;"> Абзац выровнен по правому краю </p>
Как создать разрыв строки?
Разрывы строк используются вместо абзацев, когда вы хотите создать новую строку,
не начиная новый абзац.
Конец вашего предложения. <br />
Как выделить текст жирным шрифтом?
Тег b усиливает важность информационного сообщения за счёт жирного шрифта.
<b> Текст, выделенный жирным шрифтом</b>
Как обозначить очень важный текст семантически?
Элемент strong указывает на то, что содержание выделенной фразы имеет очень важное значение, серьёзность или срочность.
В браузерах в этом случае текст обычно выделяется жирным шрифтом.
<strong> Очень важный текст</strong>
Как выделить текст курсивом?
Использование i выделяет текст курсивом
<i> Текст, выделенный курсивом</i>
Как выделить текст курсивом и семантически?
Текст, выделенный курсивом с помощью em, считается семантически значимым.
<em> Ваш выделенный текст</em>
Как сделать подчёркнутый текст с помощью HTML?
Как подчеркнуть текст? Очень просто.
<u> Подчёркнутый текст</u>
Как создать зачёркнутый текст?
Зачеркнуть текст тоже легко.
<s> Зачёркнутый текст </s>
Как указать семейство шрифтов?
Как изменить шрифт текста, используя CSS? Укажите любой стандартный безопасный шрифт или используйте шрифт Google. Используйте sans-serif, чтобы задать шрифт без засечек.
<span style="font-family: Arial, Helvetica, sans-serif;">Новый шрифт</span>
Как изменить размер шрифта?
Вы можете задать размер шрифта, используя px (пиксели), em или процент.
<span style="font-size: 16px;"> Шрифт в новом размере</span>
Как изменить цвет текста?
Вы можете изменить цвет текста, используя шестнадцатеричное цветовое значение по вашему выбору. Кодовые значения цветов вы можете посмотреть в Таблице безопасных цветов HTML. Это ещё одна полезная шпаргалка для вас. В ней представлены 216 оттенков, которые можно смело использовать для графики, текстов и фона.
<span style="font-color:#030303;"> Новый цвет шрифта</span>
Как написать текст на цветном фоне?
Вы можете выделить текст цветной полосой, используя CSS.
<span style="background-color:#C2F2CA"> Выделенный текст</span>
Как оформить цитату?
При цитировании авторского текста можно поместить фразу в блок с кавычками или в рамочку с цветным фоном.
<blockquote>Цитируемый текст</blockquote>
Чтобы получилась цитата в зелёном блоке, нужно разместить в файле style.css новый код.
blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } blockquote { background-color: #D4F4EA; border: 1px solid #00B37C; border-radius: 6px; box-shadow: 1px 2px 2px 2px rgba(0, 0, 0, 0.4); font-family: Georgia,serif; font-size: 20px; font-style: italic; margin: 20px; padding: 20px 15px; width: 550px; }
Как разместить обычную ссылку в тексте?
Добавьте ссылку к определенному тексту или слову. Замените http://sait.com на адрес нужной вам страницы.
<a href="http://sait.com"> Текст, по которому должны кликнуть</a>
Как сделать ссылку, открывающуюся в новом окне?
Атрибут target blank используется для создания ссылки, которая будет открываться в новом окне или вкладке, а не на той же самой странице.
<a href="http://sait.com" target="_blank"> Текст ссылки</a>
Как сделать nofollow ссылку?
Если вы не хотите передавать по ссылке вес другому сайту, вы можете сделать нофолоу ссылку, закрытую для индексации.
<a href="http://sait.com" rel="nofollow">Интересная статья</a> <a href="https://sait.com" target="_blank" rel="nofollow">Интересная статья</a> <a href="https://sait.com" target="_blank" rel="nofollow noopener noreferrer">Текст</a>
Как создать ссылку на адрес электронной почты?
Атрибут mailto открывает программу электронной почты пользователя для быстрой отправки электронного письма на указанный адрес. Замените в коде адрес электронной почты на свой собственный.
<a href="mailto:you@youremailaddress.com"> Адрес электронной почты или текст ссылки</a>
Как создать ссылку на адрес электронной почты с готовой темой письма?
Если вы хотите, чтобы в электронном письме была определенная тема (subject), вы можете это организовать. Используйте %20 вместо каждого пробела и замените текст vasha-tema-pisma на название нужной вам темы.
<a href="mailto:you@youremailaddress.com ?subject=vasha-tema-pisma; Ваш адрес электронной почты или текст ссылки</a>
Как сделать якорную ссылку для перемещения по странице?
Ссылка с якорем используется для перехода к определенной части страницы при нажатии на ссылку. С помощью ссылок с якорями организовано меню этой HTML шпаргалки для тегов.
Код состоит из двух фрагментов, которые размещаются в разных частях страницы.
Определите место на странице, куда должен попасть пользователь, например он должен вернуться на верх. Разместите там код с уникальным названием участка страницы.
<a name="backtotop"></a>
Затем напишите в другом месте текст, по которому должен кликнуть пользователь, чтобы переместиться в пункт назначения.
<a href="#backtotop">Вернуться к началу</a>
Как добавить изображение в статью?
Замените URL изображения своим собственным URL. Вам нужно будет загрузить это изображение куда-нибудь.
Описание вашего изображения после alt помогает в SEO-оптимизации.
<img src="http://site.com/your-image.jpg" alt="описание изображения"/>
Как добавить ссылку к изображению?
Замените URL изображения и текст ссылки на свои собственные.
<a href="http://www.sait.com"><img src="http://site.com/your-image.jpg" alt="описание изображения"/></a>
Используйте target blank, чтобы ссылка на изображение открылась в новом окне.
<a href="http://sait.com" target="_blank"><img src="http://site.com/your-image.jpg" alt="опиcание изображения"/></a>
При необходимости вы можете изменить ширину (width) и высоту (height) изображения в браузере.
<img src="http://site.com/your-image.jpg" alt="опишите это изображение" width="450" height ="600"/>
Правда всё же лучше в реальности изменить размер изображения перед добавлением его на сайт.
Как разместить изображение слева или справа от текста?
Вы можете расположить квадратное изображение слева или справа от текста.
В этом случае вам пригодится свойство align и его значения «left» и «right».
<img src="http://site.com/your-image.jpg" alt="описание изображения" align ="left"/>
Как задать фон в файле style.css?
Следующий код должен быть записан в главном CSS-файле сайта. Если у вас нет файла CSS, вы можете поместить эти коды между тегами style и /style в разделе head HTML-кода вашего сайта, хотя, конечно, лучше иметь отдельный CSS-файл.
Цветной фон страницы
Задайте фон вашего сайта или блога с помощью следующего кода.
body { background-color:#c3c3c3; }
Замените код цвета на тот, который вам нравится. Его можно подсмотреть в Таблице безопасных цветов.
Повторяющееся фоновое изображение
Вы можете взять небольшое изображение и выложить его плиткой, либо использовать фон большого размера и сделать его повторяющимся. Замените URL изображения своим собственным.
Наберите в поиске «бесшовный фон». Вы увидите изображения, которые при дублировании и совмещении образуют единое полотно.
Сначала вам нужно будет загрузить изображение на сайт, а потом указать путь к нему в коде.
body { background-image:url(http://site.com/background-image.jpg); background-repeat:repeat; }
Если вы хотите, чтобы изображение повторялось только по вертикали, то вместо «repeat» напишите «repeat-y».
Если нужно, чтобы изображение повторялось только по горизонтали: введите «repeat-x».
Неповторяющееся фоновое изображение
Для того, чтобы фоновое изображение появилось только один раз и не повторялось, введите другой код.
body { background-image:url(http://www.yourwebsite.com/background-image.jpg); background-repeat:no-repeat; }
Неповторяющееся фоновое изображение по центру сверху
body { background-image:url(http://site.com/background-image.jpg); background-repeat:no-repeat; background-position: top center; }
Вертикальное повторяющееся фоновое изображение по центру сверху
body { background-image:url(http://site.com/background-image.jpg); background-repeat:repeat-y; background-position: top center; }
Как создать нумерованный список?
Замените элементы списка своими собственными.
<ol> <li> Пункт 1 списка</li> <li> Пункт 2 списка</li> <li> Пункт 3 списка</li> </ol>
Как создать маркированный список?
При этом будет создан список с маркерами вместо цифр. Замените элементы списка своими собственными.
<ul> <li> Пункт 1 списка</li> <li> Пункт 2 списка</li> <li> Пункт 3 списка</li> </ul>
Неупорядоченный список с разными типами маркеров
Вы можете изменить тип маркера любого неупорядоченного списка на круг, квадрат или диск (по умолчанию).
<ul> <li style="list-style-type: square"> Элемент списка 1</li> </ul>
Неупорядоченный список с оригинальным маркером
Если вы хотите использовать свое собственное изображение маркера вместо изображений по умолчанию, вы также можете сделать это с помощью трюка с CSS.
Маркером может стать галочка, звёздочка или сердечко. Вам нужно создать маленькое изображение и загрузить на сайт.
<ul style="list-style-image:url('http://sait.com/yourbullet.jpg ')"> <li> Пункт 1 списка</li> <li> Пункт 2 списка</li> <li> Пункт 3 списка</li> </ul>
Как вынести стиль маркированного списка с чередующимися иконками в файл style.css?
Вы можете создать маркированный список, в котором чередуются две иконки, сочетающиеся по цвету.
Для этого загрузите на сайт два изображения и разместите в файле style.css код, отвечающий за правила нового стиля с уникальным именем so.
Изображения должны быть одинаковыми по размеру с точностью до пикселя.
Я привожу в этой HTML шпаргалке код, который получился после редактирования файла стилей одного из шаблонов WordPress. В вашем шаблоне код может выглядеть иначе: другие шрифты, другие отступы. Просто измените его по образцу.
ul#so{ padding: 11px 0 5px 0; } ul#so li { padding-left: 32px; margin-bottom: 10px; font: normal 16px Raleway, Arial, Verdana, sans-serif; color: #202020; line-height: 1.6; border-bottom: 1px dashed #ccc; padding-bottom: 10px; } ul#so li:before { content: ""; position: absolute; width: 30px; height: 27px; margin-left: -35px; margin-top: -2px; background: url('https://sait.com/wp-content/uploads/ icon1.jpg') 0px 2px no-repeat; list-style-type: circle; } ul#so li:nth-child(2n+1):before { content: ""; position: absolute; width: 30px; height: 27px; margin-left: -35px; margin-top: -2px; background: url('https://sait.com/wp-content/uploads/ icon2.jpg') 0px 2px no-repeat; list-style-type: circle; }
При редактировании поста в редакторе в режиме HTML создайте маркированный список с именем so.
<ul id="so"> <li> пункт 1</li> <li> пункт 1</li> <li> пункт 1</li> </ul>
Как прописать стиль нумерованного списка с раскрашенными цифрами в файл style.css?
В файле style.css отредактируйте код, так чтобы все цифры пунктов списка оказались вписаны в квадрат нужного вам цвета.
ol { padding: 0px 0 0 20px; margin: 0.5em 0 1.571em 1.9em; color: #202020; list-style-type: none; font: 16px/17px Raleway, Arial, Verdana, sans-serif; z-index: 2; counter-reset: point; } ol li { margin-bottom: 4px; line-height: 1.6; color: #202020; position: relative; } ol li:before { margin-bottom: 4px; counter-increment: point 1; line-height: 1.6; height: 24px; margin-left: -36px; left: 0px; width: 24px; margin-top: 1px; background: #ffff00; content: counter(point); text-align: center; position: absolute; font-weight: bold; } ol ol { list-style: upper-alpha; } ol ol ol { list-style: lower-roman; } ol ol ol ol { list-style: lower-alpha; }
В тексте поста в режиме редактирования HTML используйте обычный код для вывода нумерованного списка.
<ol>Список с цифрами <li>пункт 1</li> <li>пункт 2</li> <li>пункт 3</li> </ol>
Как создать содержание статьи с нумерованным списком, якорными ссылками и цветовой схемой как на этой странице?
HTML шпаргалка была бы неполной, если бы я не рассказала, как объединить все эти знания и создать меню статьи, как на этом сайте.
В файле style.css пропишите код стиля нового нумерованного списка с именем sod.
ol#sod{ padding: 20px 20px 10px 51px; margin: 0.5em 0 0em 1em; color: #2E2E2E; list-style-type: none; background: #CCFFFF; border-left: #66FFCC 4px solid; display: inline-block; } ol#sod li{} ol#sod li:before{ font-weight:normal !important }
Команда !important позволяет отменить действие глобальных настроек, прописанных в файле стиля где-то раньше, чтобы начало действовать правило, рассчитанное на отдельный элемент дизайна. Используйте эту команду всякий раз, когда возникнет конфликт стилей.
Команда отменяет принудительное изменение отдельной строчки. Её пишут через пробел и используют столько раз, сколько строчек нужно заставить работать по вашей воле.
В тексте поста в режиме редактирования HTML используйте код для вывода нумерованного списка с именем sod.
<ol id="sod">Содержание статьи <li><a href="#1"> текст </a></li> <li><a href="#2"> текст </a></li> <li><a href="#3"> текст </a></li> <li><a href="#4"> текст </a></li> <li><a href="#5"> текст </a></li> </ol>
И не забудьте раскидать по тексту ярлыки ссылок из меню статьи.
<a name="1"></a> текст <a name="2"></a> текст
Как сделать кнопку на сайте?
Код HTML
<a href="#" class="green">Green button</a>
Код CSS
a.green{ border-radius: 4px; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08); color: #fff; display:block; width:100px; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 14px; padding: 8px 16px; margin: 20px auto; text-decoration: none; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: background-color 0.1s linear; -moz-transition: background-color 0.1s linear; -o-transition: background-color 0.1s linear; transition: background-color 0.1s linear; } a.green { background-color: rgb( 43, 153, 91 ); border: 1px solid rgb( 33, 126, 74 ); } a.green:hover { background-color: rgb( 75, 183, 141 ); }
Код HTML
<a class="a-btn-3" href="https://sait.ru">Стоимость <span class="a-btn-3-text">.</span> <span class="a-btn-3-slide-text">100$</span><span class="a-btn-3-icon-right">→</span></a>
Код CSS
a.a-btn-3 { color: #FFFFFF; text-decoration: none; font-family: 'Oswald',Arial,sans-serif; } a.a-btn-3{ background:#80a9da; background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1)); background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:linear-gradient(top, #80a9da 0%, #6f97c5 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 ); padding-left:20px; padding-right:80px; height:38px; display:block; margin: 20px auto; text-align:center; width:70px; position:relative; border:1px solid #5d81ab; -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5); -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5); box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5); -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; overflow:hidden; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear; } .a-btn-3-text{ padding-top:5px; display:block; width:0px; font-size:18px; white-space:nowrap; text-shadow:0px 1px 1px rgba(255,255,255,0.3); color:#446388; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; } .a-btn-3-slide-text{ position:absolute; height:100%; top:0px; right:52px; width:0px; background:#63707e; text-shadow:0px -1px 1px #363f49; color:#fff; font-size:18px; white-space:nowrap; text-transform:uppercase; text-align:left; text-indent:10px; overflow:hidden; line-height:38px; -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; -webkit-transition:width 0.3s linear; -moz-transition:width 0.3s linear; -o-transition:width 0.3s linear; transition:width 0.3s linear; } .a-btn-3-icon-right{ position:absolute; right:0px; top:0px; height:100%; width:52px; border-left:1px solid #5d81ab; -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; } .a-btn-3-icon-right span{ width:38px; height:38px; opacity:0.7; position:absolute; left:50%; top:50%; margin:-20px 0px 0px -20px; background:transparent url('http://sait.ru/papka-s-kartinkoj/arrow_right.png') no-repeat 50% 55%; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear; } .a-btn-3:hover{ padding-right:140px; -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); } .a-btn-3:hover .a-btn-3-text{ text-shadow:0px 1px 1px #5d81ab; color:#fff; } .a-btn-3:hover .a-btn-3-slide-text{ width:57px; } .a-btn-3:hover .a-btn-3-icon-right span{ opacity:1; } .a-btn-3:active{ position:relative; top:1px; background:#5d81ab; -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset; -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset; box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset; border-color:#80a9da; }
Для вывода стрелочки → используйте HTML код:
→
Вам ещё нужно скачать и использовать в коде вот такую картинку.
Как вывести специальные символы с помощью HTML?
Символ авторского права ©
©
Знак меньше <
<
Знак больше >
>
Амперсанд &
&
Символ торговой марки ™
™
Зарегистрированная торговая марка ®
®
Неразрывный пробел
Кавычки “
"
Знак евро €
€
Стрелка влево ←
←
Стрелка вправо →
→
Стрелка вверх ↑
↑
Стрелка вниз ↓
↓
Сердце, черви ♥
♥
Пики ♠
♠
Трефы ♣
♣
Бубны ♦
♦
Создавать сайт за сайтом несложно, если у вас есть хорошая шпаргалка по HTML и CSS на русском.
Сохраняйте для себя удачные фрагменты кода, каждый раз, когда у вас получился потрясающий дизайн. Дублируйте шаблоны и меняйте фоновые изображения и иконки. Собирайте свои шпаргалки для начинающего верстальщика HTML CSS.
Стоит немного потренироваться, и можно создавать сайты размером с Википедию или Forbes. У всех веб-сайтов есть макет и стиль, и для создания больших и маленьких веб-сайтов используются одни и те же основы HTML и CSS.