slogin.info

ihc 468x60 1 1
< >
Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна5 / 5
 
Автор: Администратор
Просмотров: 3607
В этом уроке речь пойдет о тегах, которые отвечают за форматирование текста или основательно связаны с ним.

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

Вот пример использования этого тега

 

<HTML>
    <HEAD>
        <TITLE> Пример использования тега <p></p> </TITLE>
    </HEAD>
    <BODY style="width:900px; margin:0 auto;">
        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    </BODY>
</HTML>

 

Что мы видим

Еще один тег, который как бы обволакивает текст, без всяких отступов - <span></span>, его можно использовать, чтобы стилизировать определенный участок в сплошном тексте, не меняя структуру этого текста. Чтобы вам было лучше понятно, возьмем пример выше и окрасим разные участки текста в разные цвета.

 

<HTML>
    <HEAD>
        <TITLE> Пример использования тега <p></p> и <span></span> </TITLE>
    </HEAD>
    <BODY style="width:900px; margin:0 auto;">
        <p>"Lorem ipsum dolor sit amet, <span style="color:#ff0000;">consectetur adipisicing elit,</span> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <span style="color:#00ff00;">Duis aute irure dolor in reprehenderit</span> in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, <span style="color:#ff0000;">sed do eiusmod tempor incididunt ut labore</span> et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span style="color:#0000ff;">Excepteur sint occaecat cupidatat non proident, sunt in culpa</span> qui officia deserunt mollit anim id est laborum."</p>
    </BODY>
</HTML>

 

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

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

<b></b> - делают текст полужирным (от bold)

<s></s> - перечеркивает текст (от strike)

<u></u> - подчеркивает текст (от underline)

<tt></tt> - текст, размещенный между этими тегами, будет написан моноширинным шрифтом, т.е. шрифтом, имитирующим пишущую машинку.

Чуть позже приведу пример с использованием всех описанных тегов.

Стоит так же упомянуть теги заголовков, всего их 6 и выглядят они следующим образом:

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>

По стандартным стилям, самый большой заголовок у тега <h1></h1> и с увеличением числа рядом c «h» он уменьшается. Но на некоторых сайтах при помощи стилей меняют вид этих тегов. Помимо внешнего вида особенность этих тегов важна для поисковиков, но это уже выходит за рамки этого курса.

Последний более или менее применяемый тег - <strong></strong>, его используют для особого выделения текста. Он почти аналогичен тегу <span></span>, используя два этих тега в совокупности с CSS, можно по разному выделять слова или предложения в тексте.

Есть и другие теги, более подробно вы можете почитать о них в специализированных справочниках.

Можно к одному и тому же участку текста применять сразу несколько тегов, важно сохранять принцип вложенности, например такой код не будет правильным:

<b><i>Какой то текст</b></i>

Правильно будет написать так:

<b><i>Какой то текст</i></b>

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

Теперь пример с использованием различных тегов текста:

 

<HTML>
    <HEAD>
        <TITLE> Пример использования тега <p></p> </TITLE>
    </HEAD>
    <BODY style="width:900px; margin:0 auto;">
        <h1>Заголовок h1</h1>
        <h2>Заголовок h2</h2>
        <h3>Заголовок h3</h3>
        <h4>Заголовок h4</h4>
        <h5>Заголовок h5</h5>
        <h6>Заголовок h6</h6>
        <i>Курсивный текст</i>
        <b>Полужирный текст</b>
        <s>Перечеркнутый текст</s>
        <u>Подчеркнутый тег</u>
        <tt>Текст имитирующий печатную машинку</tt>
        <i><h3>Заголовок h3, заключенный в тег курсива - i </h3></i>
        <u>Подчеркнутый текст, а вот <strong>эта часть выделенна особым тегом strong</strong></u>
    </BODY>
</HTML>

 

Вот как это выглядит в браузере


Тестовые задания, для использования знаний на практике

Все задания разбиты на 3 уровня, начиная с 1 уровня до 3 они усложняются. Рекомендую делать задания по порядку, так как каждое следующее проще сделать, если сделано предыдущие. Выполнение этих заданий условно-обязательно, для лучшего понимания сути работы HTML машины их необходимо делать.

Уровень первый

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

Исходный текст:

Как он должен выглядеть:

Скачать рабочий код задания
Рабочий код задания(для проверки)

 

<HTML>
    <HEAD>
        <TITLE> Форматирование текста. Первый уровень сложности. </TITLE>
    </HEAD>
    <BODY>
        <p>Существуют две основных трактовки понятия <i>«текст»</i>: <i>«имманентная»</i> (расширенная, философски нагруженная) и <i>«репрезентативная»</i> (более частная). Имманентный подход подразумевает отношение к тексту как к автономной реальности, нацеленность на выявление его внутренней структуры.</p>
        <p><b>Репрезентативный</b> — рассмотрение текста как особой формы представления знаний о внешней тексту действительности.</p>
        <p>В лингвистике термин текст используется в широком значении, включая и образцы устной речи. Восприятие текста изучается в рамках лингвистики текста и психолингвистики. </p>
        <p> Так, например, <u>И. Р. Гальперин</u> определяет текст следующим образом: <i>«это письменное сообщение, объективированное в виде письменного документа, состоящее из ряда высказываний, объединённых разными типами лексической, грамматической и логической связи, имеющее определённый моральный характер, прагматическую установку и соответственно литературно обработанное».</i></p>
    </BODY>
</HTML>

 

Уровень второй

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

Как должен выглядеть текст:

Скачать рабочий код задания
Рабочий код задания(для проверки)

 

<HTML>
    <HEAD>
        <TITLE> Форматирование текста. Второй уровень сложности. </TITLE>
    </HEAD>
    <BODY>
        <h1>Форматирование текста. Второй уровень сложности.</h1>
        <p>Существуют две основных трактовки понятия <b><i>«текст»</i></b>: <i><b>«имманентная»</b> (расширенная, философски нагруженная)</i> и <i><b>«репрезентативная»</b> (более частная)</i>. Имманентный подход подразумевает отношение к тексту как к автономной реальности, нацеленность на выявление его внутренней структуры.</p>
        <p><i><b>Репрезентативный</b></i> — рассмотрение текста как особой формы представления знаний о внешней тексту действительности.</p>
        <b>В лингвистике термин текст используется в широком значении, включая и образцы устной речи. <i>Восприятие</i> текста изучается в рамках лингвистики текста и психолингвистики. </b>
        <h2>Мнение И. Р. Гальперина</h2>
        <p> Так, например,<b> <u>И. Р. Гальперин</u></b> определяет текст следующим образом: <i>«это письменное сообщение, объективированное в виде письменного документа, состоящее из ряда высказываний, объединённых разными типами лексической, грамматической и логической связи, имеющее определённый моральный характер, прагматическую установку и соответственно литературно обработанное».</i></p>
    </BODY>
</HTML>

 

Уровень третий

Третий уровень сложности аналогичен 1 и 2 уровням сложности. Подсказка! Используйте атрибут style, изменяя цвет и расположение текста.

Как должен выглядеть текст:

Скачать рабочий код задания
Рабочий код задания(для проверки)

 

<HTML>
    <HEAD>
        <TITLE> Форматирование текста. Третий уровень сложности. </TITLE>
    </HEAD>
    <BODY>
        <h1 style="color:#006600;">Форматирование текста. Третий уровень сложности.</h1>
        <p style="text-align:right;">Существуют две основных трактовки понятия <b style="color:#FF0000;"><i>«текст»</i></b>: <i><b style="color:#FF0000;">«имманентная»</b> (расширенная, философски нагруженная)</i> и <i><b style="color:#FF0000;">«репрезентативная»</b> (более частная)</i>. Имманентный подход подразумевает отношение к тексту как к автономной реальности, нацеленность на выявление его внутренней структуры.</p>
        <p style="text-align:center;"><i><b style="color:#0000FF;">Репрезентативный</b></i> — рассмотрение текста как особой формы представления знаний о внешней тексту действительности.</p>
        <b>В лингвистике термин текст используется в широком значении, включая и образцы устной речи. <i style="font-size:24px;">Восприятие</i> текста изучается в рамках лингвистики текста и психолингвистики. </b>
        <h2 style="text-align:center;">Мнение И. Р. Гальперина</h2>
        <p style="text-align:justify;"> Так, например,<b> <u>И. Р. Гальперин</u></b> определяет текст следующим образом: <i style="color:#CC0000;">«это письменное сообщение, объективированное в виде письменного документа, состоящее из ряда высказываний, объединённых разными типами лексической, грамматической и логической связи, имеющее определённый моральный характер, прагматическую установку и соответственно литературно обработанное».</i></p>
    </BODY>
</HTML>

 

< >

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • ZOMRO
    6.40
  • intuit89
    6.00
  • Varvarka
    4.00
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • dimasik_3557
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Последнее с форума

ZOMRO аватар
Домен — это неотъемлемая часть бизнеса, которая также влияет на поисковую систему. Признаки доменно...
Перейти в тему
ZOMRO аватар
На что ориентироваться при выборе хостинга? Функционал и количество ресурсов. Выбираем те параметр...
Перейти в тему
ZOMRO аватар
Красивое имя для сайта или регистрация доменных имен. Заказав у нас услугу хостинга или VDS/VPS, Вы ...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.