< lang="en"> Html-lercture part 1

HTML

Часть I

Кувалдин Артем.
Разработчик интерфейсов.

Сначала был текст...

						
Log entry: sol 7 Ok, I’ve had a good night’s sleep, and things don’t seem as
hopeless as they did yesterday. Today I took stock of supplies, and did a quick
EVA to check up on the external equipment. Here’s my situation: The surface
mission was supposed to be 31 days. For redundancy, the supply probes had enough
food to last the whole crew 56 days. That way if one or two probes had problems,
we'd still have enough food to complete the mission. We were six days in when all
hell broke loose, so that leaves enough food to feed six people for 50 days. I’m
just one guy, so it’ll last me 300 days. And that’s if I don’t ration it. So I’ve
got a fair bit of time.

Но людям все мало...

Мы хотим видеть его структуру:
- заголовки
- списки
- таблицы
Мы хотим сопровождать его
- ссылками
- картинками
- картинками с котиками (^._.^)ﾉ
Мы хотим легко находить его среди миллионов других текстов

Возможностей текста не хватает

						
LOG ENTRY: SOL 7

Ok, I’ve had a good night’s sleep, and things don’t seem as hopeless as they
did yesterday.

Today I took stock of supplies, and did a quick EVA to check up on the external
equipment. Here’s my situation:

The surface mission was supposed to be 31 days. For redundancy, the supply
probes had enough food to last the whole crew 56 days. That way if one or two
probes had problems, we'd still have enough food to complete the mission.

,--.   ,--.  ,---.  ,------.  ,---.
|   `.'   | /  O  \ |  .--. ''   .-'
|  |'.'|  ||  .-.  ||  '--'.'`.  `-.
|  |   |  ||  | |  ||  |\  \ .-'    |
`--'   `--'`--' `--'`--' '--'`-----'

Языки разметки

Они позволяют нам дополнять простой текст метаданными – «данными о данных», или «данными о тексте» в нашем случае.

MathML

x = (-b ± √(b^2 - 4ac)) / 2a

MathML

            
<math xmlns="https://www.w3.org/1998/Math/MathML">
    <mi>x</mi><mo>=</mo>
    <mfrac>
        <mrow>
            <mo>−</mo><mi>b</mi><mo>±</mo>
            <msqrt>
                <msup>
                    <mi>b</mi><mn>2</mn>
                </msup>
                <mo>−</mo><mn>4</mn><mi>a</mi><mi>c</mi>
            </msqrt>
        </mrow>
        <mrow>
            <mn>2</mn><mi>a</mi>
        </mrow></mfrac></math>

MathML

            
<math xmlns="https://www.w3.org/1998/Math/MathML">
    <mi>x</mi><mo>=</mo>
    <mfrac>
        <mrow>
            <mo>−</mo><mi>b</mi><mo>±</mo>
            <msqrt>
                <msup>
                    <mi>b</mi><mn>2</mn>
                </msup>
                <mo>−</mo><mn>4</mn><mi>a</mi><mi>c</mi>
            </msqrt>
        </mrow>
        <mrow>
            <mn>2</mn><mi>a</mi>
        </mrow></mfrac></math>

MathML

x = \frac{- b \pm \sqrt{b^{2} - 4 a c}}{2 a}

SVG

HTML (HyperText Markup Language) - язык разметки документов, предназначенных для обмена ими в Интернете

HTML

                


Список покупок


    Молоко
    Хлеб
    Яблоки
    Audi TT

Список покупок

Молоко
Хлеб
Яблоки
Audi TT

1989 год

Гипертекст

1991 год, первое описание HTML

1993 год, HTML internet Draft

1995 год, HTML 2.0

1997 год

(World Wide Web Consortium)

1997 год, HTML 3.0

1998 год, HTML 4.0

2000 год, XHTML 1.0

2001 год, XHTML 1.1

"Войны браузеров"

"IE остался один"

2004 год WHATWG

(Web Hypertext Application Technology Working Group)

2008 — 2015 HTML5

<audio>, <video> и много новых элeментов...
Новые виды полей ввода в формах: date/time, email, url, tel, ...
Новые API, важные для мобильных устройств: Geolocation API, Notification API

Анатомия HTML

HTML element

Открывающий тэг

Закрывающий тэг

Атрибуты

Содержимое

Виды тэгов

Void elements – не имеют содержимого и закрывающего тега

Виды элементов

Raw text elements – в качестве содержимого могут иметь только текст

                        
HTML Лекция

Normal elements – в качестве содержимого могут иметь как текст, так и другие элементы.

                        

    CERN
    is a European research organization
    that operates the largest particle physics
    laboratory in the world.

Документ

                    
<html>
    
    CERN
    
        CERN
        is a European research organization
        that operates the largest particle physics laboratory in the world.
    
</html>

CERN is a European research organization that operates the largest particle physics laboratory in the world.

Незакрывающиеся элементы

                    

    <li>Молоко
    <li>Хлеб
    <li>Яблоки
    <li>Audi TT

Молоко
Хлеб
Яблоки
Audi TT

Незакрывающиеся элементы

                    

    <li>Молоко
    <li>Хлеб
    <li>Яблоки
    <li>Audi TT

Полный список элементов, у которых мы можем не указывать закрывающий тег.

Атрибуты

Имя

Значения

Их может быть несколько

Кавычки не обязательны

                
<input type=button value=Click >

Бывают одиночние атрибуты

                
<input disabled type=button >

Текст

Внутри значений атрибутов

МЕЖДУ атрибутами НЕЛЬЗЯ

Внутри комментариев

<a href="http://home.web.cern.ch" >CERN</a>

HTML Entity

Внутри текста можно использовать символы-мнемоники (Entity Characters). Полный список

                
<p>&copy;</p>    
<p>&amp;</p>     
<p>&pound;</p>   
&nbsp;

Указание & и ; – обязательно;

Мы можем использовать как именованную ссылку на символ (Named Сharacter References).

                
<p>&copy;</p>    
<p>&amp;</p>     
<p>&pound;</p>

Так и числовую ссылку (Numeric Character Reference).

                
<p>&sum;</p>       
<p>&#x03A3;</p>    
<p>&#x3A3;</p>     
<p>&#0931;</p>     
<p>&#931;</p>

Типы разметки

                 
 <html>
     <head>
         <meta name="keywords" content="CERN, European,.."/>
         <title>CERN</title>
     </head>
     <body>
         <p>
             <a href="http://home.web.cern.ch/">CERN</a>
             is a <b>European</b> research organization
             that operates the <i>largest</i> particle
             <u>physics</u> laboratory in the world.
         </p>
     </body>
 </html>

Описательная

– определяет метаинформацию документа.

<html>
    <head>
        <meta name="keywords" content="CERN, European,.."/>
        <title>CERN</title>
    </head>
    <body>
        <p>
            <a href="http://home.web.cern.ch/">CERN</a>
            is a <b>European</b> research organization
            that operates the <i>largest</i> particle
            <u>physics</u> laboratory in the world.
        </p>
    </body>
</html>

Структурная

– определяет структуру и назначение текста

<html>
    <head>
        <meta name="keywords" content="CERN, European,.."/>
        <title>CERN</title>
    </head>
    <body>
        <p>
            <a href="http://home.web.cern.ch/">CERN</a>
            is a <b>European</b> research organization
            that operates the <i>largest</i> particle
            <u>physics</u> laboratory in the world.
        </p>
    </body>
</html>

Визуальная

– определяет то как элемент будет выглядеть

<html>
    <head>
        <meta name="keywords" content="CERN, European,.."/>
        <title>CERN</title>
    </head>
    <body>
        <p>
            <a href="http://home.web.cern.ch/">CERN</a>
            is a <b>European</b> research organization
            that operates the <i>largest</i> particle
            <u>physics</u> laboratory in the world.
        </p>
    </body>
</html>

Ссылочная

- обозначает части документа, как ссылки.

<html>
    <head>
        <meta name="keywords" content="CERN, European,.."/>
        <title>CERN</title>
    </head>
    <body>
        <p>
            <a href="http://home.web.cern.ch/">CERN</a>
            is a <b>European</b> research organization
            that operates the <i>largest</i> particle
            <u>physics</u> laboratory in the world.
        </p>
    </body>
</html>

CERN

CERN is a European research organization that operates the largest particle physics laboratory in the world.

С развитием CSS, визуальная разметка стала не нужна, её рекомендуется не использовать.

                
<p>centered text</p>

↓

                
centered text

Элементы

Корневой элемент html

                
<html lang="ru">
    <head>
        <meta name="keywords" content="CERN, European,.."/>
        <title>CERN</title>
    </head>
    <body>
        <p>
            <a href="http://home.web.cern.ch/">CERN</a>
            is a <b>European</b> research organization
            that operates the <i>largest</i> particle
            <u>physics</u> laboratory in the world.
        </p>
    </body>
</html>

Метаэлементы

title

— элемент определяет заголовок документа.

                
<html lang="en">
    <head>
        CERN
    </head>
</html>

— единственный обязательный тег, и он не должен быть пустым.

link

— устанавливает связь с внешним документом, например с СSS файлом (где хранятся стили).

                
<html lang="en">
    <head>
        
        
        
        
    </head>
</html>

media описывает устройство, для которого следует применять стилевое оформление

Атрибут rel (relationship)

— описывает тип связи

                
<html lang="en">
    <head>
        
    </head>
</html>

alternate — описывает, что есть альтернативный формат у документа

Список доступных типов связей.

base

— определяет базовый адрес для всех ссылок документа, а так же как они будут открываться (в текущем окне target="_self" или в новом target="_blank")

                
<html lang="en">
    <head>
        <base href="http://ya.ru/pages" >
    </head>
    About
    
</html>

script

— предназначен для описания скриптов, может содержать ссылку на скрипт или его текст на определённом языке.

                
<html lang="en">
    <head>
        <script src="path/jquery-plugin.js"></script>
    </head>
    <body>
        <script>
            console.log('Hello!');
        </script>
    </body>
</html>

style

— предназначен для определения стилей.

                
<html lang="en">
    <head>
        
        
    </head>
</html>

media описывает устройство, для которого следует применять стилевое оформление.

Open Graph

— возможность связывать свой контент с социальными сетями, возможность правильно его там представлять.

                
<html lang="en">
    <head>
        
        
        
        
    </head>
</html>

Подробный список Open Graph тегов.

Технические meta-элементы

                
<html lang="en">
    <head>
        
        <meta http-equiv="expires"
            content="Sun, 01 Jan 2016 07:01:00 GMT">

        
        <meta http-equiv="refresh"
            content="5; url=http://www.example.com/" >
    </head>
</html>

Подробный список метатегов.

Секционные элементы

article

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

                
 
    Protect — как Яндекс.Браузер защищает пользователей
    Яндекс.Браузер предостерегает пользователей,
       когда они начинают вводить пароль на подозрительных страницах.
    
    <section>
        Комментарии
         
            Отлично!
        
         
            Где скачать?
        
    </section>

Protect — как Яндекс.Браузер защищает пользователей

Яндекс.Браузер предостерегает пользователей, когда они начинают вводить пароль на подозрительных страницах.

                
<section>
    
        
        Яндекс.Браузер предостерегает пользователей,
           когда они начинают вводить пароль на подозрительных страницах.
        
    

    
        
        Яндекс.Браузер предостерегает пользователей,
           когда они начинают вводить пароль на подозрительных страницах.
        
    
</section>

nav (navigation)

— определяет блок с навигацией по связанным документам. Рекомендуется использовать только для главной навигации.

                

    О компании
    Каталог продукции
    Контакты

aside

— пределяет блок с сопуствующим содержимым(для обозначения выносок или цитат)

                
 
    Protect — как Яндекс.Браузер защищает пользователей
    Яндекс.Браузер предостерегает пользователей,
        когда они начинают вводить пароль на подозрительных
        страницах.
    
        Браузер — прикладное программное обеспечение для
            просмотра веб-страниц
    
    Как только пользователь устанавливает курсор мыши в
        поле для ввода пароля
        на любом сайте, которого нет в списке, активируется
        система защиты.
    
        Везде, где есть жизнь, есть и опасность /Эмеpсон/

header

— определяет шапку всего документа или шапку секции

                

    Блог компании Яндекс


    
        Protect — как Яндекс.Браузер защищает пользователей
    

    
        Яндекс.Браузер предостерегает пользователей,
        когда они начинают вводить пароль на подозрительных страницах.

footer

— определяет подвал всего документа или подвал секции.

                

    
        Protect — как Яндекс.Браузер защищает пользователей
    

    
        Яндекс.Браузер предостерегает пользователей,
        когда они начинают вводить пароль на подозрительных страницах.
    


    © 2013–2015 ООО «Яндекс»

address

— определяет блок с контактной информацией, относящейся к ближайшему <article> или <body>

                

    
        Protect — как Яндекс.Браузер защищает пользователей
    
    
        Яндекс.Браузер предостерегает пользователей,
        когда они начинают вводить пароль на подозрительных страницах.
    
    
        Для получения подробностей пишите на
        help@yandex.ru

h1 - h6

— определяет заголовок для секционных элементов или <body>. Число определяет уровень, 1 – наивысший, 6 – наименьший.

h1

h2

h3

h4

h5

h6

hgroup

— определяет группу заголовков.

                

    Dr. Strangelove or:
    
        How I Learned to Stop Worrying and Love the Bomb

Демо

Группирующие элементы

main

— главное содержимое страницы.

                

    На главную
    Свежие посты
    Архив по года


    
        
            Protect — как Яндекс.Браузер защищает пользователей
            Защита от кражи паролей
        
        Яндекс.Браузер предостерегает пользователей,
        когда они начинают вводить пароль на подозрительных..

p (paragraph)

— определяет параграф текста

                
 
    
        Protect — как Яндекс.Браузер защищает пользователей
    
    Яндекс.Браузер предостерегает пользователей,
        когда они начинают вводить пароль на подозрительных
        страницах.
    Как только пользователь устанавливает курсор мыши в
        поле для ввода пароля на любом сайте, которого нет
        в списке, активируется система защиты.

Protect — как Яндекс.Браузер защищает пользователей

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

hr (horizontal rule)

— разделяет параграфы текста. Например, когда сменилась тема повествования

                
 
    
        Protect — как Яндекс.Браузер защищает пользователей
    
    Яндекс.Браузер предостерегает пользователей,
        когда они начинают вводить пароль на подозрительных
        страницах.
    
    Как только пользователь устанавливает курсор мыши в
        поле для ввода пароля на любом сайте, которого нет
        в списке, активируется система защиты.

Protect — как Яндекс.Браузер защищает пользователей

Что будет?

                

,--.   ,--.  ,---.  ,------.  ,---.
|   `.'   | /  O  \ |  .--. ''   .-'
|  |'.'|  ||  .-.  ||  '--'.'`.  `-.
|  |   |  ||  | |  ||  |\  \ .-'    |
`--'   `--'`--' `--'`--' '--'`-----'

,--. ,--. ,---. ,------. ,---. | `.' | / O \ | .--. '' .-' | |'.'| || .-. || '--'.'`. `-. | | | || | | || |\ \ .-' | `--' `--'`--' `--'`--' '--'`-----'

pre (preformatted text)

— определяет блок предварительно форматированного текста. Такой текст отображается моноширинным шрифтом, сохраняя всё форматирование: пробелы, отступы

                
<pre>
,--.   ,--.  ,---.  ,------.  ,---.
|   `.'   | /  O  \ |  .--. ''   .-'
|  |'.'|  ||  .-.  ||  '--'.'`.  `-.
|  |   |  ||  | |  ||  |\  \ .-'    |
`--'   `--'`--' `--'`--' '--'`-----'
</pre>

            ,--.   ,--.  ,---.  ,------.  ,---.
            |   `.'   | /  O  \ |  .--. ''   .-'
            |  |'.'|  ||  .-.  ||  '--'.'`.  `-.
            |  |   |  ||  | |  ||  |\  \ .-'    |
            `--'   `--'`--' `--'`--' '--'`-----'

blockquote

— предназначен для выделения длинных цитат внутри документа.

                

    Life is what happens to you while you’re busy
    making other plans. // Джон Леннон

Life is what happens to you while you’re busy making other plans. // Джон Леннон

ol и li

ordered list – определяет упорядоченный список(1, 2, 3).

list item – определяет элемент списка.

                
Список покупок


    Молоко
    Хлеб
    Яблоки
    Audi TT

Список покупок

Молоко
Хлеб
Яблоки
Audi TT

атрибут reversed

                
<ol reversed>
    Молоко
    Хлеб
    Яблоки
    Audi TT
</ol>

Молоко
Хлеб
Яблоки
Audi TT

атрибут type

— задаёт тип нумерации

                

    Яблоки
    Хлеб
    Audi TT

Молоко
Хлеб
Audi TT

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

                

    Яблоки
    Хлеб
    
        Бананы
        Сельдь
        Молоко
    
    Audi TT

Молоко
Хлеб

Бананы
Сельдь
Молоко

Audi TT

ul (unordered list)

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

                

    Молоко
    Хлеб
    Яблоки
    Audi TT

Молоко
Хлеб
Audi TT

dl, dd и dt

definition list — задаёт список «термин-описание».

definition term — задаёт термин.

definition description — задаёт описание термина.

                

    GIF
    Формат графических файлов, широко применяемый при создании сайтов.
    GIF использует 8-битный цвет и эффективно сжимает сплошные цветные области,
    при этом сохраняя детали изображения.
    JPEG
    Популярный формат графических файлов, широко применяемый при создании
    сайтов и хранения изображений. JPEG поддерживает 24-битный цвет и сохраняет
    яркость и оттенки цветов в фотографиях.

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

figure и figcaption

Элемент figure используется для группирования любых элементов и добавления подписи к ним figcaption.

                

    Listing 4. The panel.
    <pre>
        function Panel(element, canClose) {
            this.element = element;
            this.canClose = canClose;
        }
    </pre>

Listing 4. The panel.

                    
function Panel(element, canClose) {
    this.element = element;
    this.canClose = canClose;
}

figure и figcaption

                

    
    Bubbles at work

div (division – раздел)

— универсальный группирующий элемент с целью изменения вида содержимого через стили.

                

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

Таблицы

                

     
         
            Game name  
            Game publisher
        
    
     
        
            Game name
            Game publisher
        
    
     
        
            Diablo 
            Blizzard
        
        
            Portal
            Valve

Game name	Game publisher
Game name	Game publisher
Diablo	Blizzard
Portal	Valve

Таблицы

                

    Games
    
        
            Game name
            Game publisher
        
    
    
        
            Diablo
            Blizzard
        
        
            Portal
            Valve

Games
Game name	Game publisher
Diablo	Blizzard
Portal	Valve

Объединение ячеек

                

    Games
    
    
        Game name
        Game publisher
    
    
    
        
            
            Diablo
        
        
            Portal
            Valve

Games
Game name	Game publisher
Diablo
Portal	Valve

Games
Game name	Game publisher
Blizzard Entertainment: Diablo III
Portal	Valve

Объединение ячеек

                

    Games
    
        
            Game name
            Game publisher
        
    
    
        
            
            Diablo
            Blizzard
        
        
            Valve

Games
Game name	Game publisher
Blizzard Entertainment: Diablo III	Blizzard
Blizzard Entertainment: Diablo III	Valve

Текстовые элементы

em (emphasis – акцент)

– предназначен для акцентирования текста

                
Cats are cute animals.

Cats are cute animals.

strong

— предназначен для обозначения важной информации.

                
Внимание! Идут учения!

Внимание! Идут учения!

ins (inserted text)

— предназначен для выделения текста, который был добавлен к текущему.

                
С++, python, js
    – классные языки программирования

С++, python, js – классные языки программирования

del (deleted text)

— предназначен для выделения текста, который был удалён.

                
С++, python, js, php
    – классные языки программирования

С++, python, js, ~~php~~ – классные языки программирования

mark (marked text)

— помечает текст как выделенный.

                

    С++, python, js – классные языки
    программирования

С++, python, js – классные языки программирования

small

— предназначен для различной уточняющей информации. Например, для условий и правовых ограничений в рекламе.

                
Скидка на все товары 50%

    
        При условии покупки на сумму более 1000 рублей

Скидка на все товары 50%

При условии покупки на сумму более 1000 рублей

cite (отсылка)

— предназначен для выделения названий книг, песен, фильмов; имён авторов.

                

    Роман Замятина Мы – одна
    из лучших книг-антиутопий

Роман Замятина Мы – одна из лучших книг-антиутопий

q (quote)

— предназначен для выделения цитат или обозначения прямой речи.

                

    Le  général  Koutouzoff, -- сказал  Болконский,
    ударяя на последнем слоге zoff, как  француз

Le général Koutouzoff, -- сказал Болконский, ударяя на последнем слоге zoff, как француз

dfn (definition)

— предназначен для выделения определений, терминов.

                

    Гипотенуза – Сторона прямоугольного
    треугольника,лежащая против прямого угла.

Гипотенуза – Сторона прямоугольного треугольника, лежащая против прямого угла.

abbr (abbreviation)

— предназначен для выделения аббревиатур.

                

    CERN

CERN

ruby, rt

— предназначен для добавления небольшой аннотации сверху или снизу от заданного текста.

                

<ruby>A<rt>[ei]</rt></ruby>
<ruby>B<rt>[bi:]</rt><ruby>
<ruby>C<rt>[si:]</rt><ruby>


<ruby lang="ja">編集者<rt lang="ru">Редактор</ruby>

A[ei] B[bi:] C[si:]

編集者Редактор

time

— предназначен для выделения дат.

                

    1957-10-04 запущен первый спутник Земли.
    1960-08-19 первый полёт собак в космос.
    1961-04-12 первый полёт человека в космос.
    1963-06-16 первый полёт женщины-космонавта.
    1969-07-21 высадка человека на Луну.
    November 11

1957-10-04 запущен первый искусственный спутник Земли.

1960-08-19 первый полёт собак в космос.

1961-04-12 первый полёт человека в космос.

1963-06-16 первый полёт женщины-космонавта.

1969-07-21 высадка человека на Луну.

November 11

samp, kbd

sample output — используется для отображения текста, который является листингом программы или скрипта.

keyboard — используется для обозначения текста, который набирается на клавиатуре или для названия клавиш.

                

    Нажмите CTRL + S
        на клавиатуре.
    <p>
        Компьютер должен ответить
        Document was saved successfuly.
    </p>

Нажмите CTRL + S на клавиатуре.

Компьютер должен ответить Document was saved successfuly.

code

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

                
<pre>
    
        function Panel(element, canClose) {
          this.element = element;
          this.canClose = canClose;
        }
    
</pre>

                
function Panel(element, canClose) {
  this.element = element;
  this.canClose = canClose;
}

var (variable - переменная)

— используется для выделения переменных в компьютерных программах или математических выражениях.

                

     Формула эквивалентности массы и энергии:
    E = m c²

Формула эквивалентности массы и энергии: E = m c ²

sup (superscript)

— обозначает текст как верхний индекс. Например, для обозначения степени

                

    Формула эквивалентности массы и энергии:
    E = m c²

Формула эквивалентности массы и энергии: E = m c ²

sub (subscript)

— обозначает текст как нижний индекс

                

    Формула воды: H₂O.

Формула воды: H₂O.

br (break line)

— устанавливает перевод строки в том месте, где он находится.

                

    Варкалось. Хливкие шорьки

    Пырялись по наве,

    И хрюкотали зелюки,

    Как мюмзики в мове.

Варкалось. Хливкие шорьки
Пырялись по наве,
И хрюкотали зелюки,
Как мюмзики в мове.

wbr (word break opportunity)

— указывает браузеру место, где допускается делать перенос строки в длинном слове.

                
метоксихлордиэтиламинометилбутиламиноакридин

метоксихлордиэтиламинометилбутиламиноакридин

span (промежуток)

— универсальный текстовый элемент с целью изменения вида содержимого через стили.

                
Яндекс.Браузер
    предостерегает пользователей, когда они начинают
    вводить пароль на подозрительных страницах.

Визуальная разметка

— универсальный текстовый элемент с целью изменения вида содержимого через стили.

                
<p>centered text</p>

bold text

italic text

strike text

underline text

centered text

bold text

italic text

~~strike text~~

underline text

Спасибо

Кувалдин Артем
akuv@yandex-team.ru
https://vk.com/artemkuvaldin

Гоголев Сергей
gogoleff@yandex-team.ru
https://vk.com/gogoleff.sergey

Семичев Олег
justseven@yandex-team.ru
https://vk.com/xiiivii

Д. З.

https://github.com/urfu-2015/verstka-tasks-1

Ссылки