Тема 1. 2 теги форматирования текста 

Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь

КАТЕГОРИИ:

Археология
Биология
Генетика
География
Информатика
История
Логика
Маркетинг
Математика
Менеджмент
Механика
Педагогика
Религия
Социология
Технологии
Физика
Философия
Финансы
Химия
Экология

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву


Мы поможем в написании ваших работ!



ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Тема 1. 2 теги форматирования текста

⇐ ПредыдущаяСтр 3 из 14Следующая ⇒


 

Любые тексты имеют определенную структуру. Элементами такой структуры являются заголовки, подзаголовки, абзацы, списки и др. Ввод текстовой информации на сайт осуществляется внутри элемента <body>.

Создание заголовков

Заголовки – важный элемент сайта, он помогают систематизировать текст. В HTML доступно создание заголовков разных уровней (1-6). Самый важный считается заголовок первого уровня.

Для разметки заголовков используются теги < H 1 >, < H 2 >, < H 3 >, < H 4 >, < H 5 > и < H 6 >. Эти теги требуют соответствующего закрывающего тега. Теги заголовка нельзя использовать для выделения отдельных слов текста с целью увеличения их размера. При использовании тегов заголовков происходит вставка пустой строки до и после заголовка, поэтому тегов абзаца и перевода строки здесь не требуется. Синтаксис тегов заголовков:

< h n align ="выравнивание">

Атрибут align определяет способ выравнивания заголовка. Значения атрибута:

- left – текст выравнивается по левому краю окна браузера. Это значение используется по умолчанию, т.е. когда атрибут не указан;

- center – текст выравнивается по центру окна браузера;

- right – текст выравнивается по правому краю окна браузера;

- justify – по ширине (только для заголовков длиннее строки) – чаще не используется.

Как правило заголовки первого уровня используют на сайте один раз.  

Создание абзацев:

Одним из первых правил составления любых документов является разбиение его текста на отдельные абзацы, выражающие законченную мысль. В HTML-документе разделение на абзацы производится с помощью специального тега < p>. Синтаксис тега аналогичен тегу для создания заголовков.

Создание списков

Списки – применяются для организации и группировки данных. В HTML выделяются следующие типы списков:

Маркированный список – это список, в котором пункты отмечаются с помощью различных символов. Для их создания предусмотрен элемент ul, требующий наличие закрывающего тега. Пункты списка находятся внутри элемента ul. Каждый пункт начинается с элемента li.

Синтаксис элемента:

< ul type = “ вид маркера ”>

Атрибут принимает следующие значения:

- circle – маркер в виде пустого круга;

- square – маркер в виде квадрата;

- disc - маркер в виде черного круга.

Нумерованный список применяется, когда порядок следования пунктов списка имеет большое значение. Для его создания предусмотрен элемент ol, требующий наличие закрывающего тега. Пункты списка находятся внутри элемента ol. Каждый пункт начинается с элемента li.

Синтаксис элемента:

< ol type = « вид символа, используемого для нумерации» start = «число, с которого начинается нумерация списка»>

Атрибут type принимает следующие значения:

- А - заглавные буквы латинского алфавита;

- a – строчные буквы латинского алфавита;

- I – римские цифры;

- 1 – арабские цифры.

Вложенный список – комбинированный список, в который вкладывается и нумерованный и маркированный списки.

Интересную возможность при настройке списков предоставляет стиль list - style - image. Он задает изображение, которое будет отображаться рядом с элементом списка.

<ul style="list-style-image:url(phone_touch.png);">

<li>iPhone 6S</li>

<li>Galaxy S7</li>

<li>Nexus 5X</li>

<li>Lumia 950</li>

</ul>

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

Список определений – это такой список, который содержит термин и определение к этому термину. Создается список элементами < dl > и </ dl >, внутри которого помещается сначала термин < dt > и </ dt >, а затем определение между тегами < dd > и </ dd >.

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

Существует много элементов для форматирования текста, и все они делятся на две группы: логические и физические.

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

<b> - выделяет текст жирным;

<del> - зачеркивает текст;

<i> - выделяет текст курсивом;

<em> - выделяет текст курсивом, в отличие от тега <i> носит логическое значение, придает выделяемому тексту оттенок важности;

<s> - зачеркивает текст;

<small> -делает текст чуть меньше размером, чем окружающий;

<strong> - выделяет текст жирным. В отличие от тега <b> предназначен для логического выделения, чтобы показать важность текста. А <b> не носит характера логического выделения, выполняет функции только форматирования;

<sub> - помещает текст под строкой;

<sup> - помещает текст над строкой;

<u> - подчеркивает текст;

<ins> - определяет вставленный (или добавленный) текст;

<mark> - выделяет текст цветом, придавая ему оттенок важности.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Форматирование текста в HTML5</title>

</head>

<body>

<p>Форматирование в <mark>HTML5</mark></p>

<p>Это <b>выделенный</b> текст</p>

<p>Это <strong>важный</strong> текст</p>

<p>Это <del>зачеркнутый</del> текст</p>

<p>Это <s>недействительный</s> текст</p>

<p>Это <em>важный</em> текст</p>

<p>Это текст <i>курсивом</i> </p>

<p>Это <ins>добавленный</ins> текст</p>

<p>Это <u>подчеркнутый</u> текст</p>

<p>X<sub>i</sub> = Y<sup><small>2</small></sup> + Z<sup><small>2</small></sup></p>

</body>

</html>

Элемент font – задает параметры шрифта для текста. Параметры текста задаются с помощью атрибутов тега:

- face – название шрифта;

- size – размер шрифта;

- color – цвет шрифта;

Тема 1.3 Ссылки

 

    Ссылки обеспечивают навигацию между отдельными документами. Определяются ссылки элементом < a ></ a >, который имеет следующие атрибуты:

- href – определяет адрес ссылки;

- target – определяет, как документ по ссылке должен открываться. Атрибут может принимать следующие значения: _blank – открывается документ в новой вкладке, _self – открывается документ в том – же окне; _parent – элемент открывается в родительском фрейме, если ссылка расположена внутри фрейма.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Ссылки</title>

</head>

<body>

<a href="content.html">Учебник по HTML5</a>

</body>

</html>

В примере для ссылки используется относительный путь content. html, т.е. в одной папке с данным документом должен находиться файл content.html, на который будет идти переход по нажатию ссылки. Также может использоваться абсолютный путь, с полным указанием адреса, где находится документ.

Навигация внутри документа

Можно организовывать внутренние ссылки, которые будут переходить к определенным блокам внутри документа. Для этого необходимо указать знак (#), после которого одет id того элемента, к которому надо осуществить переход.

<!DOCTYPE HTML>

<html>

<head>

     <title>Заголовок</title>

</head>

<body>

      <div id="go_top"><a href="#go_bottom">Вниз</a></div>

           <div>

                <p>Много - много текста...</p>

...

                <p>Много - много текста...</p>

           </div>

     <div id="go_bottom"><a href="#go_top">Вверх</a></div>

</body>

</html>

 

Стилизация ссылок

По умолчанию ссылка уже имеет некоторый цвет (один из оттенков синего), кроме того, она имеет подчеркивание. Стилизация ссылок задается браузерами по умолчанию, но ее можно переопределить.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Ссылки</title>

<style>

a:link {color:blue; text-decoration:none}

a:visited {color:pink; text-decoration:none}

a:hover {color:red; text-decoration:underline}

a:active {color:yellow; text-decoration:underline}

</style>

</head>

<body>

<a href="index.html">Учебник по HTML5</a>

</body>

</html>

В примере определены стили ссылок в различных состояниях:

a: link – применяется для ссылок в обычном состоянии, когда он не нажаты и на них не наведен курсор;

a: visited – указывает на состояние ссылки, по которой был осуществлен переход;

a: hover – состояние ссылки, на которую навели указатель мыши;

a: active – указывает на ссылку в нажатом состоянии.

Стиль color – устанавливает цвет ссылки, а стиль text – decoration устанавливает подчеркивание (underline – подчеркнута, none – подчеркивание отсутствует).

Ссылки – изображения

Поместив внутрь элемента <a> элемент <img>, можно сделать ссылку – изображение.

 


⇐ Предыдущая12345678910Следующая ⇒

Поделиться:


Читайте также:


Как правильно слушать собеседника
Типичные ошибки при выполнении бросков в баскетболе
Принятие христианства на Руси и его значение
Средства массовой информации США


Последнее изменение этой страницы: 2021-04-05; просмотров: 119; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.145.115.195 (0.024 с.)