Язык HTML для блогера. Ч1.
Основные теги для создания HTML кода текста.
+Видео
Многим блогерам даже если они и не желают писать свои статьи в HTML коде всё равно любопытно что это такое и как это делается.
Вот я и решил в нескольких статьях под общей рубрикой «Язык HTML для блогера» рассказать о своём опыте в этой области.
В одной из статей расскажу как можно автоматизировать процесс расстановки тегов.
***
Но сначала хочу расставить точки над «i» по поводу форматирования текста.
На большинстве блогов текст выводится так, как будто у нас совсем пропали такие понятия как красная строка, абзац и параграф.
Каждый подразумевает под ними что-то своё и это его своё не вписывается в общепринятые нормы. Ну непринято издавать литературу, в которой текст не содержит красных строк. Текст, в котором понятия параграф и абзац слились в единое целое и где каждый этот короткий параграфоабзац отделён от другого такого же пустой строкой.
Получается не текст, а лестница, на которой глаз спотыкается о каждую пустую строку.
Чтобы понятно было о чём я говорю, приведу ниже два примера отрывка из книги.
Как Вы считаете, где правильно, а где неправильно?
Пример 1
У меня родилась мысль, что-то, что мы сейчас собираемся предпринять — полнейшая авантюра. Если после предполагаемого перехвата мы затормозим слишком далеко, или как сказал Леонид Фёдорович, они вообще сорвутся с места…. Нам ничего не останется, как приняться за расчёты обратного маршрута и лететь домой.
С другой стороны все те, кто находился сейчас на Викинге, в какой-то мере и были авантюристами. Жажда приключений и познаний оказалась так велика, что люди отбросили все мысли об опасностях этого путешествия.
На самом деле основную опасность для нас представлял наш собственный двигатель.
Конечно, опытные образцы испытывались в беспилотных полётах малых ракет, но далеко не все они проходили гладко, бывало так, что ракета испарялась сразу после запуска двигателя. Поэтому, когда вы задумываетесь о том, что сидите на столбе термоядерного пламени… То невольно стараетесь как можно быстрее забыть об этом.
Вошли Митчелл Брук, Гарри Скотт и Даниэл Кент, наша вахта подходила к концу. Значит, через полчаса решится, какой маршрут будет избран. Я передал управление кораблем Митчеллу и подошёл к четверке наших мыслителей.
Согласитесь, Вы были бы неприятно поражены, если бы купленная вами книга была бы напечатана такими вот огрызками.
Пример 2
У меня родилась мысль, что-то, что мы сейчас собираемся предпринять — полнейшая авантюра. Если после предполагаемого перехвата мы затормозим слишком далеко, или как сказал Леонид Фёдорович, они вообще сорвутся с места…. Нам ничего не останется, как приняться за расчёты обратного маршрута и лететь домой.
С другой стороны все те, кто находился сейчас на Викинге, в какой-то мере и были авантюристами. Жажда приключений и познаний оказалась так велика, что люди отбросили все мысли об опасностях этого путешествия.
На самом деле основную опасность для нас представлял наш собственный двигатель.
Конечно, опытные образцы испытывались в беспилотных полётах малых ракет, но далеко не все они проходили гладко, бывало так, что ракета испарялась сразу после запуска двигателя. Поэтому, когда вы задумываетесь о том, что сидите на столбе термоядерного пламени… То невольно стараетесь как можно быстрее забыть об этом.
Вошли Митчелл Брук, Гарри Скотт и Даниэл Кент, наша вахта подходила к концу. Значит, через полчаса решится, какой маршрут будет избран. Я передал управление кораблем Митчеллу и подошёл к четверке наших мыслителей.
Второй вариант гораздо лучше. Он соответствует нормальным типографским правилам.
Поэтому давайте сразу определимся с понятиями параграф и абзац.
Абзац — это отрывок текста, состоящий из произвольного числа предложений. Абзац начинается с красной строки и заканчивается знаком абзаца.
Параграф — это отрывок текста, включающий в себя произвольное число абзацев. Абзацы, входящие в параграф, не имеют между собой разрывов в виде пустых строк. Параграфы друг от друга отделяются пустыми строками.
Параграф может иметь заголовок.
Параграф может содержать некоторое количество вложенных параграфов, которые могут иметь свои названия, т.е. подзаголовки.
Сразу хочу пояснить, браузер игнорирует все знаки абзаца, т.е. нажатия клавиши Enter которые Вы производите на клавиатуре. А также все идущие подряд пробелы кроме одного, да и знаки табуляции тоже.
Поэтому весь Ваш красиво оформленный в редакторе Word текст, будучи перенесённым в редактор HTML и открытый в браузере, превратится в единый монолит.
Теперь расскажу о том, какими средствами языка HTML достигается правильное форматирование текста предназначенного для размещения на странице сайта.
Средства эти называются тегами. Не надо пугаться этих названий: язык HTML и Тег. Представьте себе, что язык HTML это железная дорога, а теги — это диспетчеры и светофоры.
Машинистом в этом случае будет выступать браузер установленный на компьютере посетителя. Именно браузер обязан исполнять команды исходящие от тегов и их атрибутов.
Причём таких машинистов множество. На каждом компьютере, у каждого посетителя сайта, установлен свой браузер, т.е. в каждом компьютере сидит свой машинист. Но все они будут одинаково подчиняться тем правилам, которые Вы для них установите, расставляя теги в подготавливаемом Вами тексте. Вы сами в этом случае исполняете роль человека, составляющего расписание.
Пример 3
Ели в ответ на запрос пользователя браузер, установленный на его компьютере, получает текст такого вида:
<p>
<div><i> Опять на память приходит наш старт. Наше путешествие началось с орбиты Плутона примерно два года и четыре месяца тому назад, по корабельному времени. </i></div>
<div><b> Из них один год и семь месяцев ушло на разгон. Восемь месяцев назад маршевые двигатели были выключены, и теперь мы мчимся по инерции.</b></div>
</p>
<div><i> <u>Время от времени включаются корректирующие двигатели, но это не в счёт. На Земле минули немногим более семи лет и двух месяцев. </u></i></div>
То пользователь у себя на экране увидит такой текст:
Опять на память приходит наш старт. Наше путешествие началось с орбиты Плутона примерно два года и четыре месяца тому назад, по корабельному времени.
Из них один год и семь месяцев ушло на разгон. Восемь месяцев назад маршевые двигатели были выключены, и теперь мы мчимся по инерции.
Время от времени включаются корректирующие двигатели, но это не в счёт. На Земле минули немногим более семи лет и двух месяцев.
То есть: первый абзац – курсивом, второй – жирным, третий – подчёркнутым курсивом, первый и второй абзацы объединены в параграф, после параграфа есть пустая строка.
Для того чтобы понять, как это получается нужно знать хотя бы минимально необходимый набор тегов.
Сначала перечислю те, без которых совсем не обойтись.
Первый: двойной тег div:
<div> Набранный Вами текст </div>
Тег <div> открывает абзац, тег </div> закрывает абзац. Отличаются только тем, что закрывающий тег имеет в своём составе правый слеш. Это правило относится ко всем двойным тегам.
Текст, заключённый в этом теге, получает статус абзаца. Открывающий тег никаких видимых действий не совершает, он только обозначает начало абзаца. Но если Вы его пропустите то вся Ваша страница окажется перекошенной.
Так что если Вы увидите что сайдбар оказался совсем не там где должен быть это почти на 100% означает что у Вас не одинаковое количество открывающих и закрывающих тегов <div> и </div>.
Закрывающий тег осуществляет перенос строки, т.е. имитирует нажатие клавиши Enter. Как было сказано ранее пустая строка при этом не образуется.
Второй: двойной тег p.
Тег параграфа.
<p>
<div> Набранный Вами текст </div>
<div> Набранный Вами текст </div>
</p>
Абзацы, заключённые в этот тег, составляют тело параграфа. Тег р создаёт пустую строку после параграфа.
Теги div и p могут содержать в себе различные атрибуты, но я их рассматривать не буду.
Тому, кто желает более полно изучить язык HTML могу посоветовать обратиться к «Учебник HTML для начинающих».
Третий: двойной тег h.
Тег заголовка.
<hX> Заголовок </hX>
где Х – цифра от 1 до 6, задаёт величину шрифта заголовка. Единица – крупный размер, шесть – самый мелкий размер.
Заголовок всегда выводится жирным шрифтом.
До заголовка и после него всегда образуется пустая строка.
Спецсимвол пробела.
В принципе этих тегов вроде и достаточно. Абзацы получим, параграфы получим, заголовки напечатаем. Не будет только одного – красных строк.
Дело в том, что, сколько вы бы не напечатали подряд пробелов, браузер выведет только один, остальные проигнорирует. Его нужно принудить печатать пробел независимо от того хочет он этого или нет. Для этого служит спецсимвол ( ). В конце точка с запятой обязательны. Этих спецсимволов можно напечатать подряд сколь угодно много, сколько напечатаете столько пробелов браузер и выведет.
Вот теперь можно создать код правильно форматированного текста для размещения на сайте.
Но я рассмотрю ещё несколько полезных тегов.
Двойной тег i (курсив).
Пример:
<i> Введённый текст </i>
Получим → Введённый текст.
Т.е. текст будет выведен курсивом.
Двойной тег u (подчёркнутый).
Пример:
<u> Введённый текст </u>
Получим → Введённый текст.
Т.е. текст будет подчёркнут.
Двойной тег b (жирный).
Пример:
<b> Введённый текст </b>
Получим → Введённый текст.
Т.е. текст будет выведен жирным шрифтом.
Эти теги можно использовать внутри тегов div и p в любых сочетаниях друг с другом, соблюдайте правило – они должны быть вложены друг в друга по принципу матрёшки. Это условие не обязательное, но вам самим будет удобнее.
Одиночный тег br (перенос строки):
Если наберём:
<div> Набранный Вами текст<br> Набранный Вами текст </div>
То получим:
Набранный Вами текст
Набранный Вами текст
Т.е. это тег безусловного переноса строки. Имитирует нажатие Enter. Его можно тыкать куда угодно, в меру разумного конечно. Несколько введённых подряд таких тегов создадут несколько пустых строк.
Двойной тег center.
Пример:
<div> <center> Набранный Вами текст<br> Набранный Вами текст </center> </div>
Получим:
Т.е. текст, заключённый в эти теги, будет расположен по центру. Этот тег можно применять как внутри тегов p и div, так и снаружи.
Двойной тег font:
<font атрибуты> Набранный Вами текст </font>
Данный тег всегда используется с атрибутами. Сам тег говорит лишь о том, что к тексту будут применены некоторые дизайнерские штучки, а атрибуты уже определяют какие именно.
Атрибуты тега:
size=″N″ – позволяет изменить размер шрифта участка текста заключённого между тегами font. Здесь N – цифра, обычно от 2 до 7. Увеличение величины цифры приводит к увеличению размера шрифта.
color=″X″ – позволяет изменить цвет шрифта участка текста заключённого между тегами font. Здесь Х – либо шестнадцатеричный код цвета, либо его название. И то, и другое можно узнать, обратившись по адресу:
Ещё можно использовать код RGB, но на практике используется шестнадцатеричный код.
Шестнадцатеричный код выглядит как число от #000000 до #ffffff.
Он состоит из трёх пар шестнадцатеричных цифр. Первая пара определяет интенсивность красного цвета, вторая – зелёного, третья – синего. Т.е.: #ff0000 – чисто красный, #00ff00 – зелёный, #0000ff — синий.
Если хотим задать только основные цвета, то количество цифр можно сократить до трёх. Например:
#f00 соответствует #ff0000 т.е. красному цвету.
#ff0 соответствует #ffff00т.е. жёлтому.
Так можно задать восемь основных цветов RGB (не путать с цветами радуги!) от чёрного до белого.
На практике применение тега выглядит так:
<font size=″N″ color=″X″> Набранный Вами текст </font>
Конечно, атрибут можно записать только один, если нужно, например изменить только цвет участка текста.
У тега font есть ещё один атрибут – face. Определяет тип шрифта.
<font face =″Arial″> Набранный Вами текст </font>
Текст будет выведен шрифтом Arial.
Теги font могут быть вложены друг в друга. Например: Вы весь текст заключаете в этот тег, устанавливая размер шрифта 4 для всего текста. Но внутри Вам отдельные участки нужно вывести другим размером или цветом, тогда Вы эти участки заключаете в свои теги font.
Пример применения тега <font> с атрибутами:
<font size=″6 ″color=″#ff0000″> Мама мыла раму. </font>
Результат:
Мама мыла раму.
Получили красный текст размера 6.
Пояснительный текст.
В случае если Вам необходимо в коде HTML разместить пояснительный текст, невидимый для посетителя, то этот текст должен начинаться с конструкции – (
<!--), а заканчиваться – ( -->). Выглядеть это будет так:<!-- Пояснительный текст --> Пример использования спецсимвола ( ):
<p>
<div> Опять на память приходит наш старт. Наше путешествие началось с орбиты Плутона примерно два года и четыре месяца тому назад, по корабельному времени.</div>
<div> Из них один год и семь месяцев ушло на разгон. Восемь месяцев назад маршевые двигатели были выключены, и теперь мы мчимся по инерции.</div>
</p>
<div> Время от времени включаются корректирующие двигатели, но это не в счёт. На Земле минули немногим более семи лет и двух месяцев. </div>
Результат:
Опять на память приходит наш старт. Наше путешествие началось с орбиты Плутона примерно два года и четыре месяца тому назад, по корабельному времени.
Из них один год и семь месяцев ушло на разгон. Восемь месяцев назад маршевые двигатели были выключены, и теперь мы мчимся по инерции.
Время от времени включаются корректирующие двигатели, но это не в счёт. На Земле минули немногим более семи лет и двух месяцев.
Как видим, появились красные строки, а между вторым и третьим абзацами получилась пустая строка благодаря тегу р.
Всё то, о чём я рассказывал сведено мною в таблицы.
Вживую использование тегов и атрибутов можно увидеть в видео.
Таблица 1
Таблица 2
Для создания HTML кода текста обычно используется специализированный текстовый редактор Notepad++. Но можно использовать и блокнот Windows.
То, как всё это работает на практике будет показано в видео.
Для тех, кто захочет использовать язык HTML для размещения текстов в WordPress.
Хочу предупредить, что его редактор несколько исковеркан и некоторые теги работают не так как должны работать.
Размещению кода HTML в текстовом редакторе WordPress я посвящу отдельную статью.
Также в дальнейшем расскажу, как можно автоматизировать процесс расстановки тегов.
Для контроля полученного кода текста с помощью установленного у Вас браузера мною разработан шаблон (Контейнер) код которого приведён ниже, как он работает показано в видео.
Код HTML контейнера.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Контейнер </title>
</head>
<body>
<center>
<table border="0" width="100%">
<tr height="200p">
<td width="10%"></td>
<td width="80%">
<!-- Начало текста-->
<!-- Конец текста-->
</td>
<td width="10%"></td>
</tr>
</table>
</center>
</body>
</html>
Этот код нужно скопировать в Notepad++ и сохранить в виде файла:
Контейнер.html
Если видео не воспроизводится, то дело в вашем браузере. Решение проблемы для Яндекс Браузера здесь: https://lumpics.ru/does-not-work-youtube-in-yandex-browser .
Видео-урок: