HTML шпаргалка на русском языке

html шпаргалка

Перед вами полное руководство по HTML-кодам, которые могут пригодиться на вашем сайте.

Шпаргалка HTML CSS содержит самые популярные комбинации тегов, элементов и их атрибутов.

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

Обязательно просмотрите другие статьи по CSS на этом сайте. Они содержат более детальные демонстраций законов вёрстки и подробные объяснения по кодированию.

    Форматирование текста в HTML и CSS

  1. Как оформить заголовки в тексте?
  2. Как поделить текст на абзацы в HTML?
  3. Как выравнивать абзацы на странице?
  4. Как создать разрыв строки?
  5. Как выделить текст жирным шрифтом?
  6. Как обозначить очень важный текст с помощью strong?
  7. Как выделить текст курсивом?
  8. Как выделить текст курсивом и семантически?
  9. Как оформить подчёркивание текста с помощью HTML?
  10. Как зачеркнуть текст?
  11. Как выбрать шрифт?
  12. Как изменить размер шрифта?
  13. Как изменить цвет текста?
  14. Как написать текст на цветном фоне?
  15. Как оформить цитату?
  16. Как сделать простую ссылку?
  17. Как сделать ссылку, открывающуюся в новом окне?
  18. Как сделать nofollow ссылку?
  19. Как создать ссылку на адрес электронной почты?
  20. Как создать ссылку на адрес электронной почты с готовой темой письма?
  21. Как сделать якорную ссылку для перемещения по странице?
  22. Как добавить в статью изображение?
  23. Как добавить ссылку к изображению?
  24. Как поместить изображение слева или справа от текста?
  25. Как задать фон в файле style.css?
  26. Как создать нумерованный список?
  27. Как создать маркированный список?
  28. Как вынести стиль маркированного списка с чередующимися иконками в файл style.css?
  29. Как прописать стиль нумерованного списка с раскрашенными цифрами в файл style.css?
  30. Как создать содержание статьи с нумерованным списком, якорными ссылками и цветовой схемой как здесь?
  31. Как сделать кнопку на сайте?
  32. Как вывести специальные символы с помощью 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>

Как добавить изображение в статью?

шпаргалка html css

Замените 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"/>

Правда всё же лучше в реальности изменить размер изображения перед добавлением его на сайт.

Как разместить изображение слева или справа от текста?

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

В этом случае вам пригодится свойство 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>
текст

Как сделать кнопку на сайте?

CSS

Код 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 );
}

Стоимость
.
100$

Код 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 код:

&rarr;

Вам ещё нужно скачать и использовать в коде вот такую картинку.

Как вывести специальные символы с помощью HTML?

Символ авторского права ©

&copy;

Знак меньше <

&lt;

Знак больше >

&gt;

Амперсанд &

&amp;

Символ торговой марки ™

&trade;

Зарегистрированная торговая марка ®

&reg;

Неразрывный пробел

&nbsp;

Кавычки “

&quot;

Знак евро €

&euro;

Стрелка влево ←

&larr;

Стрелка вправо →

&rarr;

Стрелка вверх ↑

&uarr;

Стрелка вниз ↓

&darr;

Сердце, черви ♥

&hearts;

Пики ♠

&spades;

Трефы ♣

&clubs;

Бубны ♦

&diams;

Создавать сайт за сайтом несложно, если у вас есть хорошая шпаргалка по HTML и CSS на русском.

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

Стоит немного потренироваться, и  можно создавать сайты размером с Википедию или Forbes. smile У всех веб-сайтов есть макет и стиль, и для создания больших и маленьких веб-сайтов используются одни и те же основы HTML и CSS.

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