Главная
Скачать (Download)
Dreamweaver CS6
Dreamweaver CS5
Dreamweaver CS4
Dreamweaver 8
Dreamweaver MX 2004
Dreamweaver 4
Уроки (Tutorials)
Видеоуроки new!!!

Fireworks
ЧаВо
Документация
Статьи
Программы и скрипты
Бесплатные шаблоны
Каталог сайтов
Форум
Карта сайта
Контакты



Документация - WebMoney
- HTML - основы
- Сервер - локально
- Справочник свойств CSS1

главная > документация

HTML - основы

Структурное форматирование

Ранее мы уже рассматривали некоторые элементы, которые так или иначе отвечают за работу с текстом. Сейчас постараемся рассмотреть оставшиеся элементы.

1. Элемент div - используется для отделения блока HTML-документа от остальной части документа. Находящиеся между начальным (<div>) и конечным тэгами (</div>) текст или HTML-элементы оформляются как отдельный параграф. Функционирует во многом подобно элементу <p>. Если закрывающий тэг </p>опущен, то <div> эффективно заменяет его и начинает новый абзац. Он может иметь атрибут align, и значения left, center, right. Каждый следующий раздел игнорирует, заданное для предыдущего раздела, значение align.

Пример:

<html>
<head>
<title>Изучаем HTML </title>
</head>
<body><p> Сама по себе аббревиатура HTML расшифровывается так - Hyper Text Markup Language, по-русски - язык гипертекстовой разметки. <div align ="right"> Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. </div>В меню вид выберите пункт просмотр HTML-кода.
</body>
</html>

Строчка: " Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. " будет начинаться с новой строки и располагаться в центре. Вместо текста между тегами <div></div> может располагаться и любые другие HTML-элементы (таблицы, изображения)

2. Элемент br - используется для разрыва текста и перехода на новую строчку. По сути дела это как нажатие Enter в текстовом редакторе. Он не имеет конечного тэга.

Пример:

<html>
<head>
<title>Изучаем HTML </title>
</head>
<body><p > Сама по себе аббревиатура HTML расшифровывается так - <br> Hyper Text Markup Language, по-русски - язык гипертекстовой разметки. <br> Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. <br> В меню вид выберите пункт <br> просмотр HTML-кода.</p>
</body>
</html>

3. Элемент address - используют для оформления контактной информации. Такой как телефон, E-mail, или почтовый адрес. Чаще всего оформление выражается в выделении строки адреса курсивом.

Пример:

Пишите по адресу:
<address>
Москва. ул. Каки-Наки (да это не шутка, такая улица есть), д.13 <br>
Морякову П.В.
</address>

Вставьте этот пример в html-файл и посмотрите что получиться.

4. Элемент hr - используют для проведения горизонтальной черты. Вот такой.


Этот элемент не имеет конечного тега и может иметь следующие атрибуты:

size - определяет толщину линии в пикселах.
color - определяет цвет линии
noshade – отменяет объемность. Этот параметр является флагом и не требует указания значения.
width - определяет длину линии в пикселах или процентах от ширины окна браузера.
align- выравнивание горизонтальной линии. Этот параметр может принимать следующие значения: left – (выравнивание по левому краю документа); right – (выравнивание по правому краю документа); center – (выравнивание по центру документа, используется по умолчанию)

Пример:

(1) <Hr align="right"> (center или left)



(2) <Hr width="50%"> (ширина линии в процентах/пикселях)


(3) <Hr size="7"> (толщина линии)


(4) <Hr noshade> (отмена объемности)

(5) <Hr color="#003399">

5. Элемент blockquote - используют для цитирования больших объемов. Цитируемый текст отображается отдельным абзацем с увеличенным отступом.

Пример:

Я предлагая Вам прочесть это гениальное стихотворение состоящее всего из 2-х фраз.
<blockquote>
Ромашки спрятались,
<br> Поникли лютики,
<br>Ромашки спрятались,
<br> Поникли лютики,
<br> и так до бесконечности ...
</blockquote>

Вставьте этот пример в html-файл и посмотрите что получиться.

6. Элемент center - центрирует текст.

Пример:

<html>
<head>
<title>Изучаем HTML </title>
</head>
<body><p> <center> Сама по себе аббревиатура HTML расшифровывается </center> так - Hyper Text Markup Language, по-русски - язык гипертекстовой разметки. <p>Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. В меню вид выберите пункт просмотр HTML-кода.
</body>
</html>

7. Элемент nobr -помещение текста внутри этого тега гарантирует, что он не будет перенесен на следующую строку. (если строка будет слишком длинная, то для ее просмотра придется пользоваться скроллингом)

Пример:

<html>
<head>
<title>Изучаем HTML </title>
</head>
<body><p> <nobr> Сама по себе аббревиатура HTML расшифровывается так - Hyper Text Markup Language, по-русски - язык гипертекстовой разметки. Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. В меню вид выберите пункт просмотр HTML-кода. </nobr>
</body>
</html>

Форматирование символов

1. Элемент basefont - используют для задания параметров основного шрифта для текста в документе. (с помощью этого тега Вы задаете определенные размер и используемый шрифт) Он не имеет конечного тэга, а так же действие элемента не распространяется на текст, заключенный в ячейки таблиц. Атрибуты:

size - обязательный параметр. Определяет базовый размер шрифта. Возможные значения от 1 до 7.
face - определяет используемый шрифт.

Пример:

<html>
<head>
<title>Изучаем HTML </title>
</head>
<body>
<basefont size="3" face="Times" >
<p> Сама по себе аббревиатура HTML расшифровывается так - Hyper Text Markup Language, по-русски - язык гипертекстовой разметки. Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. В меню вид выберите пункт просмотр HTML-кода.
</body>
</html>

Допустим где то на странице нам необходимо использовать не основной шрифт, а какой то другой (большего, меньшего размера или использовать другой шрифт). Для этого используем элемент FONT. Для задания размера шрифта делаем тек: size=”+2” ( это означает что если основной шрифт был задан номером 3, то этот шрифт будет номером 5 (3+2=5)

Пример:

<html>
<head>
<title>Изучаем HTML </title>
</head>
<body>
<basefont size="3" face="Times" >
<p> Сама по себе аббревиатура HTML расшифровывается так - Hyper Text Markup Language, по-русски - язык гипертекстовой разметки. <font size="+2" >Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. </font>В меню вид выберите пункт просмотр HTML-кода.
</body>
</html>

2. Элемент em - практически идентичен по действию с элементом I, так как обычно результат выделяется курсивом. Используется для логического ударения.

Пример:

<html>
<head>
<title>Изучаем HTML </title>
</head>
<body><p> <em> Сама по себе аббревиатура HTML расшифровывается </em> так - Hyper Text Markup Language, по-русски - язык гипертекстовой разметки. <p>Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. В меню вид выберите пункт просмотр HTML-кода.
</body>
</html>

3. Элемент cite - используют для коротких цитат. Цитируемый текст отображается курсивом.

Пример:

<html>
<head>
<title>Изучаем HTML </title>
</head>
<body><p> Сама по себе аббревиатура HTML расшифровывается так - <cite> Hyper Text Markup Language </cite> , по-русски - язык гипертекстовой разметки. <p>Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. В меню вид выберите пункт просмотр HTML-кода.
</body>
</html>

Пример 2:


Как сказал Ф. Вольтер:
<cite>"Соперничество - пища для гения."</cite>

Результат:
Как сказал Ф. Вольтер:
"Соперничество - пища для гения."

4. Элемент var - используют для обозначения в тексте переменных. Обычно результат выделяется курсивом

Пример:

Переменная <var>IndexX</var> равна 25+4y.
Переменная IndexX равна 25+4y.

5. Элемент kbd - используют для диалога пользователя с компьютером. Как правило текст, выделяется жирным моноширинным шрифтом.

Пример:

Чтобы войти наберите этот пароль <kbd>"DROFA"</kbd> большими буквами.
Чтобы войти наберите этот пароль "DROFA" большими буквами.

6. Элемент code, samp - данные элементы оформляют текст, как формулу или программный код. Текст при этом как правило отображается моноширинным шрифтом.

Пример:

Запомните формулу: <code> n=((y*15-kx/1.25)/4x+10)^5 </code>

<< назад

главная > документация

Реклама