База HTML

Какие приложения нам понадобятся? Для начала - браузер, а ещё - текстовый редактор, который может сохранять файлы как html-страницы, то есть присваивать расширение .htm или .html.

Основные понятия web'a

Сайт
Сервер
Адрес
Страница.

Самое лёгкое здесь - адрес. Когда вы пишете в адресную строку https://google.com/ - это похоже на то определение, которым мы пользуемся постоянно. Но на самом деле адрес так не выглядит. Зачастую это - какой-нибудь https://182.56.12.95:8080/. Суть в том, что компьютер ищет сервер сайта по набору чисел, и благодаря DNS-серверам мы можем не запоминать эти числа, а использовать в названиях обычные латинские символы.

Сайт - это набор страниц, связанных одним адресом. Например, у сайта YouTube есть много страниц: это всяческие каналы с видео, настройки, страница регистрации, загрузки видео и пр.

Страница - это один HTML-документ, который вы можете наблюдать в выбранный момент в выбранной вкладке браузера.

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

Начало

Так выглядит простейшая страница на HTML 4.

Первые две строки - это сообщение браузеру, что данный файл - это документ типа HTML версии 4.01. Затем идут теги, которые размечают страницу для браузера, говоря, что, как, в какой последовательности и в каком месте экрана показывать.

Самые важные теги любой страницы - тег <head> и тег <body>.

Голова - head - это заголовок страницы, который содержит в себе важную информацию для поисковиков, для браузера (например, как озаглавить страницу, где находится индексируемый поисковиками файл и пр.).

Тело - body - это всё, что вы видите в окне браузера.

Давайте разберёмся, как отображать всё то, что показано на рисунке. Большой текст - это заголовок. Чтобы использовать заголовок, следует написать <h1>Мой первый HTML-документ</h1>. Как видно, сам заголовок находится между открывающим (<h1>) и закрывающим тегами (</h1>) - такие теги называются парными. Есть так же и одиночные теги - это hr (горизонтальная линия) и br (перевод текста, стоящего после него, на новую строку). Тег <p> - это параграф вашего текста.

В каждом документе обязательно должны быть парные теги html, head и body. Всё остальное - уже по вашему усмотрению.

Основные теги

Заголовки бывают шести типов и отличаются только цифрой в теге: h1, h2, h3 ... вплоть до h6. Они отличаются друг от друга размерами, например, если h1 - это заголовок, то h2 - это подзаголовок, и он меньше h1 по размеру шрифта.

Тег <b> делает ваш текст жирным и насыщенным </b>, <i> - курсивным </i>, <u> - подчёркнутым </u>.

Если мы хотим вывести стихотворение:

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

в одну строчку, мы можем просто занести текст в параграф. Но если мы хотим вывести каждую строчку отдельно, то при помощи тега <br> перенесём три строки:

Организация переноса строк

Заметим, что тег <p> можно как закрывать, так и не закрывать:

Здесь параграф представлен в виде парного тега

Здесь параграф продолжается до окончания тела документа

Если нам нужно вывести текст так, как он оформлен в виде строки, можно воспользоваться тегом <pre>:

<pre>Время –
    начинаю
        про Ленина рассказ.
Но не потому,
    что горя 
        нету более,
время
    потому,
        что резкая тоска
стала ясною
    осознанною болью.</pre>

Так будет выглядеть авторское форматирование

Общая памятка

Вот ещё парные теги, которые вы можете применять:

<em> - выделение важных фрагментов курсивом
<strong> - выделение особо важных фрагментов полужирным
<ins> - выделение фрагмента подчеркиванием, когда требуется показать явно, что текст был вставлен после опубликования документа.
<del> - выделение фрагмента перечеркиванием, когда требуется показать явно, что текст был удален после опубликования документа.
<code> - отображение фрагментов программного кода моноширинным шрифтом
<kbd> - текст, вводимый с клавиатуры: отображается моноширинным шрифтом
<var> - название переменных: отображается курсивом
<samp> - выделение нескольких символов моноширинным шрифтом
<dfn> - определение вложенного термина курсивом
<abbr title="Какое-то слово"> - аббревиатура
<acronym title="Какое-то слово"> - акроним
<q lang="ru"> - написание текста в кавычках
<blockquote> - написание цитаты.

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

Атрибуты

Есть ещё у многих тегов такие штуки, как атрибуты: <hr align="right" size="3" width="450">. Такой тег выведет горизонтальную линию справа шириной в три пискеля и длиной в 450.

Несколько примеров атрибутов

Структура тегов

Когда вы хотите написать жирный и курсивный текст, то начинаете так: <b><i>. Заканчивать же нужно в обратном порядке, то есть сначала закрыть тег </i>, а потом - </b>. Это выглядит примерно, как булка, сыр, мясо, сыр и булка друг за другом в примерном гамбургере: всё идёт друг за другом.

Когда мы будем писать на JavaScript, нам понадобятся такие вещи, как блочные структуры:

<div align="center"> 
    Блок номер 1
    <div>
        Блок номер 2
        <div>
            Блок номер 3
        </div>
    </div>
</div>

Тег div отвечает за блок вашей страницы: у него могут быть атрибуты определённой ширины, длины, расположения на экране, а также цвета фона. Главная его задача - организовывать ваше пространство. Ещё один такой тег - это span.

Если мы напишем следующий текст:

<div id="main">
    <div class="one">Первый div</div>
    <div class="one">Второй div</div>
    <div class="one">Третий div</div>
    <span class="two">Первый span</span>
    <span class="two">Второй span</span>
    <span class="two">Третий span</span>
</div>

То распределяться блоки будут так:

div отвечает за блок, ширина которого максимальна, а span ограничивает ширину размером контента

Ещё у тегов есть атрибут id. Благодаря ему мы можем написать в файле CSS стиль именно для этого тега, а в JS - чтобы именно для этого тега выполнялись все вещи, которые мы хотим задать.

Цвет в HTML - заморочка некоторого вида, но освоиться можно очень быстро. Просто не для всех цветов есть названия (или есть, например, Яндекс может вам их спокойно вывести, но браузеры их вряд ли знают), и поэтому удобно указывать их таким образом:

Три цифры в шестнадцатеричной системе счисления, отвечающие за баланс красного, зелёного и синего в вашем итоговом цвете

Если мы напишем такой текст:

<html>
    <head>
        <title>Раскрашиваем страницу</title>
    </head>
    <body bgcolor="silver" text="#0000FF">
        <p>Этот текст синего цвета, <span color="red"> а этот - красного.</span>
        <hr color="green">Горизонтальная линия тоже может быть разноцветная.
    </body>
</html>

То выглядеть это будет так:

Как показать некоторые символы на экране?

Ссылки на дополнительные ресурсы:

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