Правила HTML кода. Css код
- Stats: 1865 0
- Author: admin
- Category: Css, Шпаргалка
- Comments: Комментариев нет
В предыдущей статье «руководство по оформлению 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;
}
Шпаргалка самых популярных спецсимволов
Самые распространенные спецсимволы мы вынесли в таблицу-шпаргалку.
| Вид | Символьный код | Числовой код | Описание |
|---|---|---|---|
| © | © | © | знак авторских прав |
| ® | ® | ® | знак зарегистрированной торговой марки |
| ™ | ™ | ™ | знак торговой марки |
| " | " | " | двойная кавычка |
| & | & | & | амперсанд |
| ' | ' | ' | апостроф |
| |   | неразрывный пробел | |
| « | « | « | левая двойная угловая кавычка |
| » | » | » | правая двойная угловая кавычка |
| … | … | … | многоточие |
| – | – | – | короткое тире |
| — | — | — | тире |
Отправить ответ