HTML Теги Форматирования Текста

HTML Атрибуты

• HTML элементы могут иметь атрибуты
• Атрибуты обеспечивают дополнительную информацию об элементе
• Атрибуты всегда указываются в начальном теге
• Атрибуты идут в парах имя/значение, например: имя=" значение"

 

Атрибут	Значение	Описание
class	имя класса	Указывает имя класса для элемента
id	идентификатор	Указывает уникальный идентификатор для элемента
style	определение стиля	Указывает встроенный стиль для элемента
title	текст подсказки	Указывает дополнительную информацию об элементе (отображается как подсказка)

HTML Заголовки

Заголовки определяются тегами < h1> ... < h6>.

< h1> определяет наиболее важный заголовок. < h6> определяет наименее важный заголовок.

 

HTML Разделители

< hr /> тег создает горизонтальную линию в HTML странице.
hr элемент может использоваться для разделения содержания:

 

ПРИМЕР

< p> Это параграф< /p>

< hr />

< p> Это параграф< /p>

< hr />

< p> Это параграф< /p>

Footer подвал

 

Тег < footer> задаёт «подвал» сайта или раздела, в нём может располагаться имя автора, дата документа, контактная и правовая информация.

Синтаксис

< footer> < /footer>

Пример

< footer>

Copyright Кристина Ветрова

< /footer>

< /body>

< /html>

< br /> элемент - это пустой HTML элемент. Он не имеет конечного тега.

< br> или < br />

В XHTML, XML, и будущих версиях HTML, HTML элементы с пропущенным конечным (закрывающим тегом) не допустимы.

Даже если < br> работает во всех браузерах, написание < br /> более правильно.

 

HTML Теги Форматирования Текста

Тег	Описание
< b>	Определяет жирный текст
< big>	Определяет большой текст
< em>	Определяет акцентированный текст
< i>	Определяет курсивный текст
< small>	Определяет маленький текст
< strong>	Определяет акцентированный текст
< sub>	Определяет подстрочный текст
< sup>	Определяет надстрочный текст
< ins>	Определяет вставленный текст
< del>	Определяет удаленный текст

HTML Теги " Компьютерного Вывода"

Тег	Описание
< code>	Определяет текст компьютерного кода
< kbd>	Определяет клавиатурный текст
< samp>	Определяет пример компьютерного кода
< tt>	Определяет текст телетайпа
< var>	Определяет переменную
< pre>	Определяет предварительно отформатированный текст

HTML Теги Цитирования, Заключения в Кавычки

Тег	Описание
< abbr>	Определяет аббревиатуру
< acronym>	Определяет акроним
< address>	Определяет контактную информацию автора/владельца документа
< bdo>	Определяет направление текста
< blockquote>	Определяет длинную цитату
< q>	Определяет короткую цитату
< cite>	Определяет цитату (ссылку на кого-либо)
< dfn>	Выводит термин (определение)

HTML Шрифты

HTML Тег < font> Не Следует Использовать

Тег < font> является устаревшим в HTML 4, и удален из HTML5.

Всемирный Интернет Консорциум (W3C) удалил тег < font> из их рекомендаций.

В HTML 4 каскадные таблицы стилей (cascade style sheets или, сокращенно, CSS) должны использоваться для определения вывода и отображения свойств для большинства HTML элементов.

Пример ниже показывает как в HTML можно использовать тег < font>:

< p style=" font-size: 30px; " > Этот текст высотой 30 пикселей< /p>

Пример

< html>
< body>
< p>
< font size=" 5" face=" arial" color=" red" >
< /font>
< /p>
< p>
< font size=" 3" face=" verdana" color=" blue" >
< /font>
< /p>
< /body>
< /html>

HTML Стили

< html>

< body style=" background-color: yellow; " >

< h2 style=" background-color: red; " > Это заголовок< /h2>

< p style=" background-color: green; " > Это параграф< /p>

< /body>

< /html>

< html>

< head>

< style type=" text/css" >

body

{

background-color: #d0e4fe;

}

h1

{

color: orange;

text-align: center;

}

p

{

font-family: " Times New Roman";

font-size: 20px;

}

< /style>

< /head>

< body>

< h1> CSS пример! < /h1>

< p> Это параграф.< /p>

< /body>

< /html>

Устаревшие Теги и Атрибуты

Тег	Описание
< center>	Устаревший. Определяет центрированное содержимое
< font>	Устаревший. Определяет HTML шрифты
< s> и < strike>	Устаревший. Определяет зачеркнутый текст
< u>	Устаревший. Определяет подчеркнутый текст

 

Атрибуты	Описание
align	Устаревший. Определяет выравнивание текста
bgcolor	Устаревший. Определяет цвет фона
color	Устаревший. Определяет цвет текста

 

HTML Урок 12 Гиперссылки

Гиперссылка (или ссылка) это слово, группа слов, или изображение, которые вы можете кликнуть, чтобы перепрыгнуть на новый документ или раздел текущего документа.

Когда вы перемещаете курсор над ссылкой в Веб странице, стрелка превразается в маленькую руку.

Ссылки определяются в HTML используя тег < a>.

Тег < a> может быть использован двумя способами:

1. Чтобы создать ссылку на другой документ - используя атрибут href

2. Чтобы сделать закладку внутри документа - используя атрибут name

 

HTML код для ссылки прост. Он выглядит так:

< a href=" Адрес" > Текст ссылки< /a>

Атрибут href указывает адрес ссылки (куда она указывает).

Атрибут Target

Атрибут target (назначение) указывает где открывать залинкованный (тот, на который ссылается ссылка) документ.

Пример ниже откроет залинкованный документ в новом окне браузера или на новой вкладке:

< html>

< body>

< a href=" http: //Uroki-HTML.ru/" target=" _blank" > Заходите на Уроки HTML! < /a>

< p> Если вы установите атрибут target на " _blank", то ссылка откроет новое окно браузера/новую вкладку.< /p>

< /body>

< /html>

HTML Ссылки - Атрибут Name

Атрибут name указывает имя ссылки.

Атрибут name используется для создания закладки (" якоря" / " анкера" ) внутри HTML документа.

Замечание:
Грядущий в обозримом будущем стандарт HTML5 предлагает использовать атрибут id вместо атрибута name для указания имени ссылки.
Использование атрибута id фактически работает и в HTML4 во всех современных браузерах.

Закладки не отображаются каким-либо специальным образом. Они не видимы для читателя.

 

Пример

Именованная ссылка (якорь, анкер) внутри HTML документа:

< a name=" tips" > Раздел Полезных Советов< /a>

Создайте ссылку на " Раздел Полезных Советов" внутри того же документа:

< a href=" #tips" > Посетите Раздел Полезных Советов< /a>

Или создайте ссылку на " Раздел Полезных Советов" с другой страницы:

< a href=" http: //Uroki-HTML.ru/html/html_links.php#tips" > Посетите Раздел Полезных Советов< /a>

 

HTML Изображения - Тег < img> и Атрибут Src

В HTML, изображения определяются с помощью тега < img>.

Тег < img> пустой, т.е. он содержит только атрибуты и не имеет закрывающего тега.

Чтобы показать изображение на странице, вы должны использовать атрибут src. Src означает " source" - источник. Значение атрибута src - это адрес (URL или Uniform Resource Locator - Унифицированный Указатель Ресурса) изображения, которое вы хотите показать.

 

Синтакс определения изображения:

< img src=" адрес(url)" alt=" некоторый_текст" />

Адрес (URL) указывает место, где хранится изображение. Изображение под названием " boat.gif", расположенное в директории " images" на " http: //Uroki-HTML.ru" имеет адрес URL: http: //Uroki-HTML.ru/images/boat.gif.

Браузер показывает изображение как только встречает тег < img> в документе. Если вы поместите тег изображения между двумя параграфами браузер покажет первый параграф, затем изображение, а затем второй параграф.

HTML Теги Изображений

Тег	Описание
< img />	Определяет изображение
< map>	Определяет карту изображения
< area />	Определяет регион для клика внутри карты изображения

HTML Таблицы

Таблицы определяются с помощью тега < table>.

Таблица состоит из строк (тег < tr> ), и каждая строка состоит из ячеек с данными (тег < td> ). td означает " table data" или данные таблицы, и содержит содержимое ячейки. Тег < td> может содержать текст, ссылки, изображения, списки, формы, другие таблицы и т.д.

Пример Таблицы

< table border=" 1" > < tr> < td> строка 1, ячейка 1< /td> < td> строка 1, ячейка 2< /td> < /tr> < tr> < td> строка 2, ячейка 1< /td> < td> строка 2, ячейка 2< /td> < /tr> < /table>

Как HTML код выше выглядит в браузере:

строка 1, ячейка 1	строка 1, ячейка 2
строка 2, ячейка 1	строка 2, ячейка 2

HTML Теги Таблиц

Тег	Описание
< table>	Определяет таблицу
< th>	Определяет заголовок колонки
< tr>	Определяет строку таблицы
< td>	Определяет ячейку таблицы
< caption>	Определяет заголовок таблицы
< colgroup>	Определяет группу колонок в таблице для форматирования
< col>	Определяет значения атрибутов для одной или более колонок в таблице
< thead>	Группирует содержимое заголовка в таблице
< tbody>	Группирует содержимое тела таблицы
< tfoot>	Группирует содержимое " подвала" таблицы

HTML Списки

Наиболее распространенные HTML списки - это упорядоченные списки и неупорядоченные списки:

HTML Списки

 

Упорядоченный список: 1. Первый элемент списка 2. Второй элемент списка 3. Третий элемент списка Неупорядоченный список: Элемент списка Элемент списка Элемент списка

HTML Неупорядоченные Списки

Неупорядоченный список начинается тегом < ul>. Каждый пункт списка начинается тегом < li>.

Эти пункты списка отмечаются маркерами bullit (как правило небольшие черные круги).

< ul> < li> Кофе< /li> < li> Молоко< /li> < /ul>

Как HTML код выше выглядит в браузере:

• Кофе
• Молоко

HTML Упорядоченные Списки

Упорядоченный список начинается с тега < ol>. Каждый пункт списка начинается тегом< li>.

Пункты списка маркеруются числами.

< ol> < li> Кофе< /li> < li> Молоко< /li> < /ol>

Как HTML код выше выглядит в браузере:

1. Кофе

2. Молоко

 

HTML Списки Определений

Список определений - это список пунктов с описанием каждого пункта.

Тег < dl> определяет список определений.

Тег < dl> используется в связке с тегом < dt> (определяет пункт списка) и < dd> (описывает пункт списка):

< dl> < dt> Кофе< /dt> < dd> - черный горячий напиток< /dd> < dt> Молоко< /dt> < dd> - белый холодный напиток< /dd> < /dl>

Как HTML код выше выглядит в браузере:

Кофе

- черный горячий напиток

Молоко

- белый холодный напиток

HTML Теги Списков

Тег	Описание
< ol>	Определяет упорядоченный список
< ul>	пределяет неупорядоченный список
< li>	Определяет пункт списка
< dl>	Определяет список определений
< dt>	Определяет пункт списка определений
< dd>	Определяет описание пункта списка определений

 

Примеры

Различные типы упорядоченных списков

< html>

< body>

< h4> Пронумерованный список: < /h4>

< ol>

< li> Яболки< /li>

< li> Бананы< /li>

< li> Лимоны< /li>

< li> Апельсины< /li>

< /ol>

< h4> Список, промаркерованный буквами: < /h4>

< ol type=" A" >

< li> Яболки< /li>

< li> Бананы< /li>

< li> Лимоны< /li>

< li> Апельсины< /li>

< /ol>

< h4> Список, промаркерованный строчными буквами: < /h4>

< ol type=" a" >

< li> Яболки< /li>

< li> Бананы< /li>

< li> Лимоны< /li>

< li> Апельсины< /li>

< /ol>

< h4> Список, промаркерованный римскими числами: < /h4>

< ol type=" I" >

< li> Яболки< /li>

< li> Бананы< /li>

< li> Лимоны< /li>

< li> Апельсины< /li>

< /ol>

< h4> Список, промаркерованный римскими числами в нижнем регистре: < /h4>

< ol type=" i" >

< li> Яболки< /li>

< li> Бананы< /li>

< li> Лимоны< /li>

< li> Апельсины< /li>

< /ol>

< /body>

< /html>

 

 

Различные типы неупорядоченных списков

< html>

< body>

< h4> Список с маркерами-кружочками: < /h4>

< ul type=" disc" >

< li> Яблоки< /li>

< li> Бананы< /li>

< li> Лимоны< /li>

< li> Апельсины< /li>

< /ul>

< h4> Список с маркерами-окружностями: < /h4>

< ul type=" circle" >

< li> Яблоки< /li>

< li> Бананы< /li>

< li> Лимоны< /li>

< li> Апельсины< /li>

< /ul>

< h4> Список с маркерами-квадратиками: < /h4>

< ul type=" square" >

< li> Яблоки< /li>

< li> Бананы< /li>

< li> Лимоны< /li>

< li> Апельсины< /li>

< /ul>

< /body>

< /html>

 

 

Вложенный список

< html>

< body>

< h4> Вложенный Список: < /h4>

< ul>

< li> Кофе< /li>

< li> Чай

< ul>

< li> Черный чай< /li>

< li> Зеленый чай< /li>

< /ul>

< /li>

< li> Молоко< /li>

< /ul>

< /body>

< /html>

 

Вложенный список 2

< html>

< body>

< h4> Вложенный Список: < /h4>

< ul>

< li> Кофе< /li>

< li> Чай

< ul>

< li> Черный чай< /li>

< li> Зеленый чай

< ul>

< li> Китай< /li>

< li> Африка< /li>

< /ul>

< /li>

< /ul>

< /li>

< li> Молоко< /li>

< /ul>

< /body>

< /html>

 

 

Список определений

< html>

< body>

< h4> Список Определений: < /h4>

< dl>

< dt> Кофе< /dt>

< dd> Черный горячий напиток< /dd>

< dt> Молоко< /dt>

< dd> Белый холодный напиток< /dd>

< /dl>

< /body>

< /html>

 

HTML Теги Списков

Тег	Описание
< ol>	Определяет упорядоченный список
< ul>	Определяет неупорядоченный список
< li>	Определяет пункт списка
< dl>	Определяет список определений
< dt>	Определяет пункт списка определений
< dd>	Определяет описание пункта списка определений

 

ФОРМЫ

HTML Формы используются для различных форм ввода пользовательской информации.

Создание текстовых полей

< html>

< body>

< form action=" " >

Имя: < input type=" text" name=" firstname" /> < br />

Фамилия: < input type=" text" name=" lastname" />

< /form>

< p> < b> Замечание: < /b> Форма сама по себе не видима. Также отметьте, что ширина текстового поля ввода равна 20 символов по умолчанию.< /p>

< /body>

< /html>

 

Создание поля ввода пароля Как создать поле для ввода пароля.

< html>

< body>

< form action=" " >

Имя: < input type=" text" name=" user" /> < br />

Пароль: < input type=" password" name=" password" />

< /form>

< p> < b> Замечание: < /b> Символы в поле ввода пароля маскируются (отображаются как звездочки или как окружности).< /p>

< /body>

< /html>

 

HTML формы используются для передачи данных на сервер.

Форма может содержать элементы ввода: текстовые поля, флажки, переключатели, кнопки подтверждения и другие. Форма также может содержать следующие элементы: списки выбора, текстовую область, группу полей, легенду, и метки.

Тег < form> используется для создания HTML формы:

< form> . элементы ввода. < /form>

 

HTML Формы - Элемент Ввода

Наиболее важный элемент формы - элемент ввода.

Элемент ввода используется для ввода пользовательской информации.

Элемент ввода может меняться различными способами, в зависимости от атрибута type. Элемент ввода может иметь тип: текстовое поле, флажок, пароль, переключатель, кнопка подтверждения, и др.

Наиболее используемые типы ввода описаны ниже.

 

Текстовые Поля

< input type=" text" /> определяет однострочное текстовое поле ввода, в которое пользователь может вводить текстовую информацию:

< form> Имя: < input type=" text" name=" firstname" /> < br /> Фамилия: < input type=" text" name=" lastname" /> < /form>

Как HTML код выше выглядит в браузере:

Начало формы

Имя:
Фамилия:

Конец формы

Замечание: Форма сама по себе не видима. Также отметьте что ширина текстового поля по умолчанию равна 20 символов.

Поле Ввода Пароля

< input type=" password" /> определяет поле ввода пароля:

< form> Пароль: < input type=" password" name=" pwd" /> < /form>

Как HTML код выше выглядит в браузере:

Начало формы

Пароль:

Конец формы

Замечание: Символы в поле ввода пароля маскируются (отображаются как звездочки или кружочки).

 

Переключатели

< input type=" radio" /> определяет радио кнопку. Радио кнопки позволяют пользователю выбирать ТОЛЬКО ОДИН из ограниченного числа вариантов:

< form> < input type=" radio" name=" sex" value=" male" /> Мужской< br /> < input type=" radio" name=" sex" value=" female" /> Женский < /form>

Как HTML код выше будет выглядеть в браузере:

Начало формы

Мужской
Женский

Конец формы

 

Флажки

< input type=" checkbox" /> определяет флажок. Флажки позволяют пользователю выбрать ОДНУ или БОЛЕЕ опций из ограниченного числа вариантов.

< form> < input type=" checkbox" name=" vehicle" value=" bike" /> У меня есть мотоцикл < br /> < input type=" checkbox" name=" vehicle" value=" car" /> У меня есть автомобиль < /form>

Как HTML код выше будет выглядеть в браузере:

Начало формы

У меня есть мотоцикл
У меня есть автомобиль

Конец формы

 

HTML Теги Форм

Тег	Описание
< form>	Определяет форму для ввода пользовательских данных
< input>	Определяет элемент ввода
< textarea>	Определяет многострочную текстовую область ввода
< label>	Определяет метку (подпись) для элемента ввода
< fieldset>	Определяет границу вокруг элементов ввода формы
< legend>	Определяет заголовок для элемента группировки fieldset
< select>	Определяет список выбора (раскрывающийся список)
< optgroup>	Определяет группу связанных опций в списке выбора
< option>	Определяет опцию в списке выбора
< button>	Определяет кнопку

 

http: //uroki-html.ru/html/html_frames.php

 

http: //ab-w.net/CSS/CSS.php

 

HTML Атрибуты

• HTML элементы могут иметь атрибуты
• Атрибуты обеспечивают дополнительную информацию об элементе
• Атрибуты всегда указываются в начальном теге
• Атрибуты идут в парах имя/значение, например: имя=" значение"

 

Атрибут	Значение	Описание
class	имя класса	Указывает имя класса для элемента
id	идентификатор	Указывает уникальный идентификатор для элемента
style	определение стиля	Указывает встроенный стиль для элемента
title	текст подсказки	Указывает дополнительную информацию об элементе (отображается как подсказка)

HTML Заголовки

Заголовки определяются тегами < h1> ... < h6>.

< h1> определяет наиболее важный заголовок. < h6> определяет наименее важный заголовок.

 

HTML Разделители

< hr /> тег создает горизонтальную линию в HTML странице.
hr элемент может использоваться для разделения содержания:

 

ПРИМЕР

< p> Это параграф< /p>

< hr />

< p> Это параграф< /p>

< hr />

< p> Это параграф< /p>

Footer подвал

 

Тег < footer> задаёт «подвал» сайта или раздела, в нём может располагаться имя автора, дата документа, контактная и правовая информация.

Синтаксис

< footer> < /footer>

Пример

< footer>

Copyright Кристина Ветрова

< /footer>

< /body>

< /html>

< br /> элемент - это пустой HTML элемент. Он не имеет конечного тега.

< br> или < br />

В XHTML, XML, и будущих версиях HTML, HTML элементы с пропущенным конечным (закрывающим тегом) не допустимы.

Даже если < br> работает во всех браузерах, написание < br /> более правильно.

 

HTML Теги Форматирования Текста

Тег	Описание
< b>	Определяет жирный текст
< big>	Определяет большой текст
< em>	Определяет акцентированный текст
< i>	Определяет курсивный текст
< small>	Определяет маленький текст
< strong>	Определяет акцентированный текст
< sub>	Определяет подстрочный текст
< sup>	Определяет надстрочный текст
< ins>	Определяет вставленный текст
< del>	Определяет удаленный текст

HTML Теги " Компьютерного Вывода"

123Следующая ⇒

Поделиться: