Урок №2 | HTML для JavaScript-разработчика

1. Вступление

HTML определяет содержимое каждой веб-страницы в Интернете. «Пометив» свое исходное содержимое тегами HTML, вы говорите веб-браузерам, как вы хотите отображать различные части вашего контента. Создание HTML-документа с правильно размеченным контентом - это первый шаг к созданию веб-страницы.

Hpertext Markup Language является языком, описывающим структуру и семантику содержимого веб-документа.

2. Директива <!DOCTYPE html>

Большинство современных html-документов начинается с строки <!DOCTYPE html>, это говорит браузеру, что документ надо интерпретировать в соответствии с современными стандартом HTML (HTML5.*).

Это просто специальная строка в начале html-документа и она всегда должна выглядеть точно так же:

<!DOCTYPE html>

3. Понятие тега

HTML теги - это имена элементов, заключенные в угловые скобки.

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>Hello world!</h1>
</body>
</html>

У тегов может быть несколько форм. Элемент вроде тела, параграфа и ссылки начинается открывающим тегом <p> и заканчивается закрывающим </p>. Некоторые открывающие теги, типа ссылки <a>, содержат дополнительную информацию в виде имя=”значение”. Она называется «атрибутами».

Некоторые теги ничего не окружают, и их не надо закрывать. Пример – тег картинки

<img src="http://example.com/image.jpg">

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

4. Структура HTML документа

Как уже говорилось ранее любая html5 страница начинается со строки <!DOCTYPE html>.

Затем вся наша веб-страница должна быть обернута в тег <html>. Все, что находится внутри тега, считается частью <html> элемента, который представляет собой саму веб-страницу.

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

5. Cинтаксис HTML комментариев

Также обратите внимание на синтаксис комментариев HTML в приведенном ниже фрагменте. Все, что начинается с , будет полностью игнорироваться браузером. Это полезно для документирования вашего кода и создания заметок самому себе.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- <h1>Hello world!</h1> -->
</body>
</html>

6. Заголовок страницы

Одним из наиболее важных фрагментов метаданных является название вашей веб-страницы, определяемое тегом <title>. Браузеры отображают <title> на вкладке для вашей страницы, и Google отображает ее как результат поиска.

7. Paragraphs

Элемент <p> помечает весь текст внутри него как отдельный абзац.

<p>
    First, we need to learn some basic HTML.
</p>

8. Headings

Headings(заголовки) похожи на (title)заголовок, но на самом деле они отображаются на странице. HTML предоставляет шесть уровней заголовков, и соответствующие элементы: <h1>, <h2>, <h3>, ..., <h6>. Чем выше номер, тем менее заметен заголовок.

Первый заголовок страницы обычно должен быть <h1>.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>Interneting Is Easy!</h1>
    <p>First, we need to learn some basic HTML.</p>

    <h2>Headings</h2>
    <p>
        Headings define the outline of your site. There are six levels of headings.
    </p>
</body>
</html>

Заголовки - это основной способ разметки различных разделов вашего контента. Они определяют схему вашей веб-страницы, которую видят как люди, так и поисковые системы.

9. Cписки

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

В HTML5 существует 3 типа списков: unordered lists (маркированный список) - <ul>, ordered lists (нумерованный список) - <ol> и список определений(тройка элементов предназначена для создания определений) - <dd>, <dt>, <dl>.

9.1 Unordered lists

Оборачивание содержимого тегами <ul> сообщает браузеру, что все, что находится внутри, должно отображаться как неупорядоченный список. Чтобы обозначить отдельные элементы(пункты) в этом списке, Вам нужно обернуть их в теги <li> (list item) следующим образом:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h2>Lists</h2>

    <p>This is how you make an unordered list:</p>

    <ul>
        <li>Add a "ul" element (it stands for unordered list)</li>
        <li>Add each item in its own "li" element</li>
        <li>They don't need to be in any particular order</li>
    </ul>
</body>
</html>

9.2 Ordered lists

Если последовательность элементов списка имеет значение, вам следует использовать упорядоченный список. Чтобы создать упорядоченный список, просто измените родительский элемент <ul> на <ol>.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h2>Lists</h2>

    <p>This is how you make an unordered list:</p>

    <ul>
        <li>Add a "ul" element (it stands for unordered list)</li>
        <li>Add each item in its own "li" element</li>
        <li>They don't need to be in any particular order</li>
    </ul>
    <p>This is what an ordered list looks like:</p>

    <ol>
        <li>Notice the new "ol" element wrapping everything</li>
        <li>But, the list item elements are the same</li>
        <li>Also note how the numbers increment on their own</li>
        <li>You should be noticing things is this precise order, because this is an ordered list</li>
    </ol>
</body>
</html>

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

9.3 Definition list

10. Emphasis (italic) elements

Часть, упакованная в теги <em>, должна отображаться как курсив, как показано ниже. Обратите внимание, что затронута только часть строки.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h2>Inline Elements</h2>

    <p>
        <em>Sometimes</em>, you need to draw attention to a particular word or phrase.
    </p>
</body>
</html>

11. Strong (bold) elements

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h2>Inline Elements</h2>

    <p>
        <em>Sometimes</em>, you need to draw attention to a particular word or phrase.
    </p>

    <p>
        Other times you need to <strong>strong</strong>ly emphasize the importance of a word or phrase.
    </p>
</body>
</html>

12. Пустые элементы HTML

Теги HTML, с которым мы столкнулись до сих пор,имели текстовое содержимое (например, <p>) или другие элементы HTML (например, <ol>) внутри. Это не относится ко всем HTML-элементам. Некоторые из них могут быть пустыми или самозакрывающимися. Наиболее распространенными пустыми элементами являются разрывы строк <br> и горизонтальные линии <hr>.

12.1 Разрывы строк <br>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h2>Empty Elements</h2>

    <p>
        Thanks for reading! Interneting should be getting easier now.
    </p>

    <p>Regards,<br>
        The Authors
    </p>
</body>
</html>

12.2 Горизонтальные линии <hr>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h2>Empty Elements</h2>

    <p>
        Thanks for reading! Interneting should be getting easier now.
    </p>

    <p>Regards,<br>
        The Authors
    </p>
    <hr/>

    <p>
        P.S. This page might look like crap, but we'll fix that with some CSS soon.
    </p>
</body>
</html>

13. Links и images

<img src="" alt="">

<a href="URL">Text</a>

<a href="URL"><img src="" alt=""></a>

14. Forms

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

Также форма - способ взаимодействия(интерфейс) пользователя с бизнес логикой и данными на сервере посредством HTTP запросов.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form action="" method="">
        <label for='full-name'>Name</label>
        <input id='full-name' name='full-name' type='text'/>
    </form>
</body>
</html>

14.1 Radio buttons

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <fieldset class='legacy-form-row'>
        <legend>Type of Talk</legend>
        <input id='talk-type-1'
                name='talk-type'
                type='radio'
                value='main-stage' />
        <label for='talk-type-1' class='radio-label'>Main Stage<</label>
        <input id='talk-type-2'
                name='talk-type'
                type='radio'
                value='workshop'
                checked />
        <label for='talk-type-2' class='radio-label'>Workshop</label>
    </fieldset>
</body>
</html>

14.2 Select elements

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <label for='t-shirt'>T-Shirt Size</label>
    <select id='t-shirt' name='t-shirt'>
        <option value='xs'>Extra Small</option>
        <option value='s'>Small</option>
        <option value='m'>Medium</option>
        <option value='l'>Large</option>
    </select>
</body>
</html>

14.3 Textareas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <textarea>
</body>
</html>

14.4 checkboxes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <label class='checkbox-label' for='available'>
        <input id='available'
                name='available'
                type='checkbox'
                value='is-available'/>
        <span>I’m actually available the date of the talk</span>
    </label>
</body>
</html>

14.5 submit buttons

<button>Submit</button>

15. Semantic html

<header>

<footer>

<aside>

<nav>

<menu>

<figure>

<figcaption>

<article>

<section>

<main>

*. Таблицы

*. HTML Media

16. Emmet

Emmet documentation

16.1 Syntax

16.1.1 Child

16.1.2 Sibling

16.1.3 Climb-up

16.1.4 Grouping

16.1.5 Multiplication

16.1.6 Item numbering

16.1.7 ID and CLASS attributes

16.1.8 Custom attributes

16.1.9 Text

16.1.10 Implicit tag names

16.2 HTML

16.3 CSS

16.4 Cheat Sheet

Cheat Sheet

17. HTML и JavaScript

В контексте нашего курса самый главный тег HTML — <script>. Он позволяет включать в документ программу на JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>Внимание, тест.</h1>
    <script>alert("Привет!");</script>;
</body>
</html>

Такой скрипт запустится сразу, как только браузер встретит тег <script> при разборе HTML. На странице появится диалог-предупреждение.

Включать большие программы в HTML непрактично. У тега <script> есть атрибут src, чтобы запрашивать файл со скриптом (текст, содержащий программу на JavaScript) с адреса URL.

18. Совместимость и браузерные войны

На ранних стадиях развития Веба браузер по имени Mosaic занимал большую часть рынка. Через несколько лет баланс сместился в сторону Netscape, который затем был сильно потеснён браузером Internet Explorer от Microsoft. В любой момент превосходства одного из браузеров его разработчики позволяли себе в одностороннем порядке изобретать новые свойства веба. Так как большинство людей использовали один и тот же браузер, сайты просто начинали использовать эти свойства, не обращая внимания на остальные браузеры.

Это были тёмные века совместимости, которые иногда называли «войнами браузеров». Веб-разработчики сталкивались с двумя или тремя несовместимыми платформами. Кроме того, браузеры около 2003 года были полны ошибок, причём у каждого они были свои. Жизнь людей, создававших веб-страницы, была тяжёлой.

Mozilla Firefox, некоммерческое ответвление Netscape, бросил вызов гегемонии Internet Explorer в конце 2000-х. Так как Microsoft особо не стремилась к конкуренции, Firefox отобрал солидную часть рынка. Примерно в это время Google представил свой браузер Chrome, а Apple – Safari. Это привело к появлению четырёх основных игроков вместо одного.

У новых игроков были более серьёзные намерения по отношению к стандартам и больше инженерного опыта, что привело к лучшей совместимости и меньшему количеству багов. Microsoft, видя сжатие своей части рынка, приняла эти стандарты. Если вы начинаете изучать веб-разработку сегодня – вам повезло. Последние версии основных браузеров работают одинаково и в них мало ошибок.

Нельзя сказать, что ситуация уже идеальная. Некоторые люди в вебе по причинам инерционности или корпоративных правил используют очень старые браузеры. Пока они не отомрут совсем, написание веб-страниц для них потребует мистических знаний об их недостатках и причудах. Эта книга не про причуды – она представляет современный, разумный стиль веб-программирования.

19. Упражнения

1. Markup

Разметить такую страницу:

2. Markup form-set

Разметить такую страницу:

3. Markup semantic

Разметить такую страницу:

с такой подструктурой

4. Input type

Создать поля ввода с каждым из типов:
- button
- checkbox
- color
- date
- datetime-local
- email
- file
- hidden
- image
- month
- number
- password
- radio
- range
- reset
- search
- submit
- tel
- text
- time
- url
- week

5. Images

Создать 5 тегов img и подключить картинки типов:
- giff
- jpg
- png
- bmp
- svg

6. HTML Media - Video

Подключить видео на страницу (doc).

7. HTML Media - Audio

Подключить аудио на страницу (doc).

8. Table

Подключить аудио на страницу (doc).

HTML для JavaScript разработчика

Содержание

1. Вступление

2. Директива <!DOCTYPE html>

3. Понятие тега

4. Структура HTML документа

5. Cинтаксис HTML комментариев

6. Заголовок страницы

7. Paragraphs

8. Headings

9. Cписки

9.1 Unordered lists

9.2 Ordered lists

9.3 Definition list

10. Emphasis (italic) elements

11. Strong (bold) elements

12. Пустые элементы HTML

12.1 Разрывы строк <br>

12.2 Горизонтальные линии <hr>

13. Links и images

14. Forms

14.1 Radio buttons

14.2 Select elements

14.3 Textareas

14.4 checkboxes

14.5 submit buttons

15. Semantic html

*. Таблицы

*. HTML Media

16. Emmet

16.1 Syntax

16.1.1 Child

16.1.2 Sibling

16.1.3 Climb-up

16.1.4 Grouping

16.1.5 Multiplication

16.1.6 Item numbering

16.1.7 ID and CLASS attributes

16.1.8 Custom attributes

16.1.9 Text

16.1.10 Implicit tag names

16.2 HTML

16.3 CSS

16.4 Cheat Sheet

17. HTML и JavaScript

18. Совместимость и браузерные войны

19. Упражнения

1. Markup

2. Markup form-set

3. Markup semantic

4. Input type

5. Images

6. HTML Media - Video

7. HTML Media - Audio

8. Table