Loading

Правила HTML кода. Css код

html и css код
В предыдущей статье «руководство по оформлению html и css» мы собрали основные рекомендации по правильному коду. В этой статье напишем несколько основных тегов и как правильно их оформлять.

HTML код

Заголовки:
<h1>Заголовок первого уровня (h1)</h1>
<h2>Заголовок второго уровня (h2)</h2>
<h3>Заголовок третьего уровня (h3)</h3>
<h4>Заголовок четвертого уровня (h4)</h4>
<h5>Заголовок пятого уровня (h5)</h5>
<h6>Заголовок шестого уровня (h6)</h6>

Абзац с рисунком слева(p):
<p><img align="left" src="http://www.it-media.kiev.ua/test.jpg" alt="Абзац с рисунком слева" width="129" height="90" />Абзац — <a href="#">малоисследованный компонент</a> литературной формы, имеющий композиционное, сюжетно-тематическое, ритмическое значение и связанный со стилем автора. Характерны, например, краткие абзацы в импрессионистической прозе — симптомы раздробленности, афористичности мысли; или например возвращение к длинному абзацу в несколько страниц у М. Пруста, связанное со стернианской, так называемой «спиралевидной цикличностью» его изложения. Особенно выразителен абзац у А. Белого, который выделяет в особые абзацы даже отдельные части фразы, подчёркивая этим тематическую значимость, ритмическое развитие выделяемых частей.

</p>
<hr />
Абзац с рисунком справа(p):
<p><img align="right" src="http://www.it-media.kiev.ua/test.jpg" alt="Абзац с рисунком справа" width="129" height="90" />Абзац — <a href="#">малоисследованный компонент</a> литературной формы, имеющий композиционное, сюжетно-тематическое, ритмическое значение и связанный со стилем автора. Характерны, например, краткие абзацы в импрессионистической прозе — симптомы раздробленности, афористичности мысли; или например возвращение к длинному абзацу в несколько страниц у М. Пруста, связанное со стернианской, так называемой «спиралевидной цикличностью» его изложения. Особенно выразителен абзац у А. Белого, который выделяет в особые абзацы даже отдельные части фразы, подчёркивая этим тематическую значимость, ритмическое развитие выделяемых частей.

</p>
Ненумерованный список: (ul)
<ul>
<li>первый элемент</li>
<li>второй элемент
<ul>
<li>первый элемент вложенного списка</li>

<li>второй элемент вложенного списка</li>
</ul>
</li>
<li>элемент в <br/>две строки</li>
<li>элемент N</li>

</ul>
Нумерованный список: (ol)
<ol>
<li>первый элемент</li>
<li>второй элемент
<ol>
<li>первый элемент вложенного списка</li>

<li>второй элемент вложенного списка</li>
</ol>
</li>
<li>элемент в <br/>две строки</li>
<li>элемент N</li>

</ol>
Список определений: (dl)
<dl>
<dt>первое определение</dt>
<dd>описание первого определения</dd>
<dt>второе определение</dt>

<dd>описание второго определения</dd>
</dl>
Таблица: (table)
<table>
<thead>
<tr>
<th>Заголовок столбца 1</th><th>Заголовок столбца 2</th><th>Заголовок столбца 3</th>

</tr>
</thead>
<tbody>
<tr>
<td>Ячейка 1</td><td>Ячейка 2</td><td>Ячейка 3</td>

</tr>
<tr>
<td>Ячейка 4</td><td>Ячейка 5</td><td>Ячейка 6</td>
</tr>
</tbody>

</table>
Теги форматирования:
<p>Тег <strong>strong — выделение жирным</strong>, повышает вес слова для поисковых систем.</p>
<p>Тег <b>b — выделение жирным</b>, не повышает вес слова для поисковых систем.</p>

<p>Тег <em>em — выделение курсивом</em>, повышает вес слова для поисковых систем.</p>
<p>Тег <i>i — выделение курсивом</i>, не повышает вес слова для поисковых систем.</p></blockquote>

CSS код

/* content -----------------------*/
.content {
padding: 10px;
}
.content h1 {
font-size: 150%;
margin-bottom: 20px;
}
.content h2 {
font-size: 140%;
margin-bottom: 15px;
}
.content h3 {
font-size: 130%;
margin-bottom: 12px;
}
.content h4 {
font-size: 120%;
margin-bottom: 10px;
}
.content h5 {
font-size: 110%;
margin-bottom: 10px;
}
.content h6 {
font-size: 100%;
margin-bottom: 10px;
}
.content p {
margin-bottom: 15px;
}
.content ul {
list-style: disc;
margin: 0 15px 10px 15px;
}
.content ul ul {
margin: 10px 0 10px 25px;
}
.content ol {
list-style: decimal;
margin: 0 15px 10px 20px;
}
.content ol ol {
margin: 10px 0 10px 25px;
}
.content li {
margin-bottom: 5px;
}
.content table {
margin-bottom: 15px;
font-size: 100%;
width: auto;
border: 1px solid #000;
}
.content th,
.content td {
border: 1px solid #000;
padding: 4px;
text-align: left;
}
.content th {
font-weight: bold;
text-align: center;
}
.content a,
.content a font {
color: #0000ff;
text-decoration: underline;
}
.content a:visited,
.content a:visited font {
color: #0000aa;
}
.content a:hover,
.content a:hover font {
color: #0000ff;
text-decoration: none;
}
.content a:active,
.content a:active font {
color: #ff0000;
}
.content img[align=left] {
margin: 0 10px 10px 0;
float: left;
}
.content img[align=right] {
margin: 0 0 10px 10px;
float: right;
}
.content dl {
margin: 0 0 15px 0;
}
.content dt {
font-weight: bold;
margin-bottom: 2px;
}
.content dd {
margin-bottom: 5px;
}
.content hr {
height: 1px;
border: none;
color: #aaa;
background: #aaa;
margin: 10px 0;
clear: both;
}

CSS код для ie6.css

.content hr {
float: left;
width: 100%;
}
.content img {
z-index: expression(runtimeStyle.zIndex = 1, align && "left" == align.toLowerCase() ? (className += " imgLeft") : (align && "right" == align.toLowerCase() ? (className += " imgRight") : 0 ) )
}
.content .imgLeft {
margin: 0 10px 10px 0;
float: left;
}
.content .imgRight {
margin: 0 0 10px 10px;
float: right;
}

Шпаргалка самых популярных спецсимволов

Самые распространенные спецсимволы мы вынесли в таблицу-шпаргалку.

Вид Символьный код Числовой код Описание
© &copy; &#169; знак авторских прав
® &reg; &#174; знак зарегистрированной торговой марки
&trade; &#8482; знак торговой марки
" &quot; &#34; двойная кавычка
& &amp; &#38; амперсанд
' &apos; &#39; апостроф
  &nbsp; &#160; неразрывный пробел
« &laquo; &#171; левая двойная угловая кавычка
» &raquo; &#187; правая двойная угловая кавычка
&hellip; &#8230; многоточие
&ndash; &#8211; короткое тире
&mdash; &#8212; тире

Отправить ответ

Пожалуйста, авторизуйтесь чтобы добавить комментарий.
Войти с помощью: 
  Подписаться  
Уведомление о
Авторизация
*
*
Войти с помощью: 
Регистрация
*
*
*
Войти с помощью: 

4 × 4 =

Генерация пароля