Что такое HTML? Основные элементы разметки гипертекста и составляющие их теги языка HTML

Суб, 04/06/2011 - 23:03 |

Dmitriy

HTML (HyperText Markup Language) - язык гипертекстовой разметки.
Знание языка необходимо при написании статей блога.

Ниже приведены основные элементы и теги языка разметки гипертекста (HTML), а так же примеры создания HTML-документов.

Введение:

Элемент - это конструкция содержащая данные заключенные в теги языка HTML.

<title> - открывающий тег

</title> - закрывающий тег

Для некоторых элементов закрывающий тег не обязателен, а некоторые вообще не имеют закрывающего тега.

<title>Название сайта</title> - это Элемент добавляющий название сайта на страницу

Теги могут содержать параметры (атрибуты) они прописываются в открывающем теге и могут определять цвет текста или фона, размер шрифта и другие параметры выводимые на странице.

Список тегов для основных элементов:

<html>Содержимое документа</html> - Указывает приложению для просмотра страниц что это HTML документ.

<head>Шапка сайта</head> - в шапке размещается различная информация не размещаемая в тексте документа. Такая как название сайта, ключевики и др. информация для поисковых машин.

<title>Название документа</title> - Размещает название документа в оглавлении приложения для просмотра страниц

<body>Тело документа</body> - Определяет видимую часть документа

Атрибуты используемые с тегами в теле документа:

<body bgcolor=?> - Задает цвет фона документа. Используется значение цвета в виде RRGGBB

<body text=?> - Задает цвет текста документа. Используется значение цвета в виде RRGGBB

<body link=?> - Задает цвет гиперссылок. Используется значение цвета в виде RRGGBB

<body vlink=?> - Задает цвет гиперссылок на которых вы уже побывали. Используется значение цвета в виде RRGGBB

<body alink=?> - Задает цвет гиперссылок при наведении на них. Используется значение цвета в виде RRGGBB

rel="nofollow" - Атрибут рекомендующий посковикам не учитывать исходящую ссылку при подсчете выдачи пузомерок

<noindex></noindex> - Эти теги распознает только яндекс. Они рекомендуют яндексботу не индексировать заключенный в теги текст при индексации сайта и не учитывать заключенные в них исходящие ссылки при выдаче ТиЦ.

Теги используемые при форматировании текста документа:

<center>Текст</center> - Отображение по центру

<cite>Цитата</cite> - Цитата

<h1>Заголовок</h1> - Создает самый большой заголовок

<h6>Заголовок</h6> - Создает самый маленький заголовок

<b>Жирный</b> - Создает жирый текст

<i>Наклонный</i> - Создает наклонный текст

<tt>Печатный</tt> -Создает текст имитирующий стиль печатной машинки. Используется для цитат, обычно наклонный текст.

<em>Курсив</em> - Выделение из текста слова (наклонный или жирный текст)

<strong>Выделенный</strong> - Используется для выделения наиболее выжных частей текста (наклонный или жирный текст)

<font size=?>Текст</font> - Устанавливает размер текста в пределах от 1 до 7.

<font color=?>Текст</font> - Устанавливает цвет текста, используя значение цвета в виде RRGGBB.

<code>Исходный код</code> - Для отображения исходных текстов программ.

<ul> <li>Первый элемент</li> <li>Второй элемент</li> </ul> - Ненумерованный список. Используйте <li> для начала каждого элемента списка.

<ol> <li>Первый элемент</li> <li>Второй элемент</li> </ol> - Нумерованный список. Используйте <li> для начала каждого элемента списка.

<dl> <dt>Первый термин</dt> <dd>Первое определение</dd> <dt>Второй термин</dt> <dd>Второе определение</dd> </dl> - Списки определений похожи на другие списки HTML. <dl> начинает список определений, <dt> начинает определяемый термин и <dd> начинает описание определения.

<span style="background-color: rgb(0, 255, 0);">Текст</span> - Подсвечивание текста, используя значение цвета в виде RGB

Специальные знаки при вводе которых могут возникнуть проблемы:

& - Выводит знак ампенсанд &

< - Выводит знак меньше чем <

> - Выводит знак больше чем >

" - Выводит знак кавычка "

Гиперссылки:

<a href="http://site.ru/" target="_blank" title="Всплывающая подсказка!">Название ссылки (анкор)</a> - Пример гиперссылки со всплывающей подсказкой и анкором, (откроется в новой вкладке)

<a href="http://site.ru/images.jpg" target="_blank"><img src="http://site.ru/images.jpg" border="0" alt="Описание изображения" title="Всплывающая подсказка" width="250" height="330" /></a> - Изображение с заданными сторонами (250х330) являющееся гиперссылкой по которой откроется в новой вкладке изображение оригинальной величины.

Вывод окна с неисполняемым кодом:

1 Вариант
<textarea style="width: 200px; height: 100px;">
Не исполняемый код который будет показан в окне
</textarea> - Размеры окна указаны в пикселях (200х300)

2 Вариант
<textarea name="textarea" cols="20" rows="5">
Не исполняемый код который будет показан в окне
</textarea> - Размеры окна указаны в количестве знаков (20х5)

Блог пользователя Dmitriy |

Для комментирования войдите или зарегистрируйтесь |

Tags: Создание сайтов

Поиск

Разделы блога

Вход в систему

Рекомендуем

Что такое HTML? Основные элементы разметки гипертекста и составляющие их теги языка HTML