Разметка

Артем Кувалдин

index.html

<!DOCTYPE html>
<html>
    <head>
        
        <title>CERN</title>
    </head>
<body>
    

        CERN
        is a European research organization
        ...
    

</body>
</html>

Теги

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

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

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

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

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

Атрибут

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

Содержимое

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

Виды тегов

<!--Без содержимого-->
Котики

<!--Только текст-->
<title>HTML Лекция</title>

<!--Обычные теги-->


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

Что будет, если тег не закрыть?

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

Закроются сами

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

Но, есть фиксированный список

Атрибуты

<!--Их может быть несколько-->
<input type="button" value="Click me">
            
<!--Кавычки необязательны-->
<input type=button value=Click>
            
<!--Бывают одиночные атрибуты-->
<input disabled>
<!--Тоже самое:-->
<input disabled="sometext">

Универсальные атрибуты

id – задаёт уникальный идентификатор элемента

id

<input type="email" id="email_input">
            
/*В стилях*/
#email_input { width: 100px }
            
//  Получаем доступ к элементу как к JS объекту по id
var email = document.getElementById('email_input');

class – задаёт класс элементов, позволяя группировать их

class

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

<ul class="list">
    <li class="food">Молоко</li>
    <li class="food">Хлеб</li>
    <li class="car">Audi TT</li>
    <li class="car">Audi Q5</li>
    <li class="food">Яблоки</li>
</ul>
.food { color: blue }
.car { color: red }

title – добавляет пояснение к содержимому элемента, которое появляется при наведении

title

www


API

Как в виде текста отобразить тег?

HTML Entity

HTML Entity

 
&copy;
  <!-- © -->

&amp;
   <!-- & -->

&pound;
 <!-- £ -->

&forall;
<!-- ∀ -->

&lt;
    <!-- < -->

&gimel;
 <!-- ℷ -->

&nbsp;
  <!-- Неразрывный пробел(no-break space) -->

HTML–элементы

index.html

<!DOCTYPE html>
<html>
    <head>
        
        <title>CERN</title>
    </head>
<body>
    

        CERN
        is a European research organization
        ...
    

</body>
</html>

!DOCTYPE – директива, которая указывает на спецификацию, по которой был создан документ

DOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    ...
</html>

DOCTYPE для HTML5

<!DOCTYPE html>
<title>My awesome HTML page</title>

Минимально возможный html-документ.

head

link

<link href="styles.css">

<!--media="all/screen/print/speech/braille"-->
<link href="print-styles.css" media="print">
<link href="favicon.ico">

<!--rel – описывает тип связи-->
<link rel="alternate" type="application/rss+xml" href="rss.xml">

script/style

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

meta

<meta charset="utf-8">
<!--  name="название" content="значение"-->
<meta name="description" content="CERN, the European">
<meta name="author" content="Tim Berners-Lee">

Open Graph – возможность связывать свой контент с социальными сетями и правильно его там представлять

Open Graph

Семантическая разметка

Семантика – раздел лингвистики, изучающий смысловое значение единиц языка

"Дивная" верстка


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


    
CERN's main function is to provide the particle accelerators
    and other infrastructure needed for high-energy physics research


    
Last modified: 2015-09-22

    
Author: ivan@example.com

Семантичная верстка




    
    
CERN
    is ... 

    
CERN's main function is to provide the particle
    accelerators and ... 






    
    
Last modified: 

    
    
Author: fred@example.com

Семантичные теги

  • section/article
  • aside
  • header/main/footer
  • figure и figcaption
  • h1-h6
  • nav
  • Другие

section – определяет тематическую группу элементов: блок комментариев к посту в блоге, главы в статье или список постов

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

p и hr

 
     

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

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

     

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

Иногда br


    Сижу за решеткой в темнице сырой.

    Вскормленный в неволе орел молодой,

    Мой грустный товарищ, махая крылом,

    Кровавую пищу клюет под окном,




...

Что будет?


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

pre(preformatted text)


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

Списки

    
    
  1. Сельдь
    2. 
    
  2. Хлеб
    3. 
    
  3. Фрукты:
        
      
            
    • Бананы
      • 
            
    • Яблоки
      • 
        
    
    
    4. 
    
  4. Молоко
    5. 
    
  5. Audi TT
    6.

div/span


    

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

     

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

Таблицы

<table>
    <thead>
        <th>H 0.1</th>
        <th>H 0.2</th>
        <th>H 0.3</th>
    </thead><tfoot>...</tfoot>
    <tbody><tr>
        <td>A 1.1</td>
        <td>A 1.2</td>
        <td>A 1.3</td>
    </tr>
    <tr>
        <td>A 2.1</td>
        <td>A 2.2</td>
        <td>A 2.3</td>
    </tr></tbody>
</table>

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

<table>
    <tr>
        
        <td colspan=2>A 1.1</td>
        
        
        <td rowspan=2>A 1.3</td>
    </tr>
    <tr>
        <td>A 2.1</td>
        <td>A 2.2</td>
        
    </tr>
</table>

Текстовые теги

  • Форматирование текста:
    • em - для акцентирования текста
    • strong – для обозначения важной информации
    • mark – помечает текст как выделенный
    • small – для различной уточняющей информации
    • i – для дополнительного выделения(экспрессивно-эмоциональным)
    • b – для выделения из окружающего его контекста(ключевые слова в выдержках)
    • <sub> <sup> <ins> <del>
  • Для кода: <code> <kbd> <samp> <var> <pre>
  • Перенос текста: <p> <br> <hr> <wbr>
  • Цитаты/определения: <abbr> <blockquote> <q> <dfn> <cite> <bdo>
  • Примеры

Интерактивные элементы

Ссылки

Yandex

Yandex

Yandex


Yandex
Подробнее про URL

Протоколы

Images

Images

@akuv

Позвонить по скайпу

Позвонить

Якоря

ссылка на якорь


Много текста...



якорь

Картинки

image fat cat

Атрибут alt обязательный


КОТЭ

Размеры картинок

Почитать самим

  • iframe
  • audio/video
  • track

Формы

input

checkbox/radio


 Хлеб
 Молоко


 Вода
 Сок

Атрибут type (HTML 5)

select

textarea

<textarea rows="7"
  cols="35"
  name="text"
  placeholder="Введите текст">Текст</textarea>

Кнопки

label

Выберите напиток

form – для обмена данными между пользователем и сервером

form

name=[значение1]&email=[значение2]&secret=[значение3]

method="get"

для получения требуемой информации и передачи данных в адресной строке (ограничение в 4 Кб)

method="post"

посылает на сервер данные в запросе браузера. Большие объёмы данных используются в форумах, почтовых службах, заполнении базы данных, при пересылке файлов и др

Вылидация








<input type="tel" pattern="2-[0-9]{3}-[0-9]{3}"
       placeholder="2-123-312" required>

На дом

  • Атрибут tabindex
  • ARIA
  • Как поменять направление текста?
  • Как верстать письма?

Почитать