HTML и CSS как текстовый процессор. Это все, что вам нужно знать

В начале января мы рассказали вам о уценка, что, вероятно, является лучшим способом делать заметки на компьютере. Это язык, который можно выучить буквально за полчаса или меньше, и он позволяет нам создавать легкие документы определенного формата и структуры. А также есть Латекс, но кривая обучения более крутая, а установка программного обеспечения не является тривиальной. Есть еще один вариант — создавать текстовые документы с помощью HTML и CSS.

HTML и CSS не являются языками, которые были разработаны с учетом редактирования текстовых документов, а также может служить. В совокупности они делают гораздо больше, но, зная несколько тегов и правил, мы можем сделать больше, чем в Writer, и гораздо больше, чем с помощью Markdown или LaTeX. Здесь мы объясним эти основы, а также некоторые хитрости, чтобы отпечаток выглядел хорошо.

HTML и CSS для текста: допустимый вариант

Первое, что нужно знать, это то, что Для просмотра документа .html вам понадобится веб-браузер.. Это то, что отвечает за его рендеринг и отображение содержимого, а также то, что позволит нам распечатать документ. Это не программное обеспечение, которое нам нужно устанавливать отдельно, поскольку оно уже есть на любом ПК или мобильном устройстве.

Еще вам нужно знать, как создавать документы: просто откройте обычный текстовый процессор (например, Kate), добавьте содержимое и сохраните его с помощью расширение .html. Мы можем, и я советую, также создавать части   y el  тело, в первом — для таких разделов, как общие стили, а во втором — для самого документа.

Я также рекомендую использовать Visual Studio Code или любой аналогичный редактор, но это связано с так называемым Интеллисенс, то есть то, что позволяет нам открывать и закрывать метки, не записывая их целиком. Кроме того, в коде мы можем щелкнуть символ «!», нажать клавишу табуляции, и это создаст базовую структуру.

Все теги открываются и закрываются с помощью символов «больше» (<) и «меньше» (>), но перед закрывающим тегом обычно стоит косая черта (/).

Разобравшись с этим, перейдем к самому главному.

Утечка в HTML и CSS

В HTML и CSS кровотечение не обязательно. Вы могли бы поместить все в одну строку, но читать будет легче, если у вас хорошие отступы и все находится на одном уровне и на одной высоте. Дочерний элемент обычно размещается примерно на четыре пробела вправо или в зависимости от того, что дает клавиша табуляции.

HTML-заголовки

Заголовки HTML записываются буквой «h», за которой следует число от 1 до 6. Например, предыдущий текст в «Заголовках HTML» — это «h2», а полный текст будет выглядеть так:

HTML-заголовки

Жирный, курсив, зачеркивание и выделение

Следуя порядку статьи Markdown, далее идут жирный шрифт, курсив, зачеркивание и выделение. Они будут такими:

Жирный текст Курсивный  Перечеркнутый текст Выделенный текст

Это покажет это:

Жирный текст
Курсивный текст
Текст зачеркивания
Выделенный текст

Мощность и индекс

Если мы хотим поставить небольшое и несколько приподнятое число (степень) или число на противоположной стороне (индекс), мы можем это сделать с помощью этих меток:

Субиндекс мощности

Абзацы

Мы следуем порядку статьи Markdown, но он может быть не лучшим для HTML и CSS. В Markdown абзацы пишутся без каких-либо тегов, поэтому его сюда поставили, а в HTML они используются. Все, что находится между открывающим и закрывающим тегом, будет блоком и будет иметь следующий синтаксис:

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

Списки

Списки, по крайней мере самые простые в HTML, бывают упорядоченными и неупорядоченными. Они могут сбить с толку тех, кто их не знает, но такой редактор, как Visual Studio Code, упрощает задачу. Его синтаксис будет таким:

Пункт 1 без заказа Элемент 2 без заказа Элемент 3 без заказа Товар 1 отсортирован Товар 2 отсортирован Товар 3 отсортирован

покажу это

• Пункт 1 без заказа
• Пункт 2 без заказа
• Пункт 3 без заказа

1. Товар 1 отсортирован
2. Товар 2 отсортирован
3. Товар 3 отсортирован

Списки открываются и закрываются с помощью меток: «ul», если они неупорядочены, и по умолчанию перед ними отображается шарик, а «ol», если они упорядочены, и по умолчанию перед ними ставится число. Пронумерованные элементы упорядочиваются автоматически, то есть первому элементу после открывающего тега будет предшествовать 1, второму — 2 и так далее.

Для комбинаций списков необходимо начинать подсписки с одинаковыми тегами («ul» или «ol»).

Существуют также списки определений, которые начинаются и заканчиваются меткой «dl», а внутри находятся термины (dt) и определения (dd) со следующим синтаксисом:

Линукс Системы, которые мы любим Окна Системы, которыми мы здесь мало пользуемся

Это покажет это:

Linux

    Системы, которые мы любим

Windows

    Системы, которыми мы здесь мало пользуемся

Списки задач

В HTML нет списков задач, но их можно создавать. Для этого вам нужно будет добавить флажок, и он будет выглядеть так:

Первый элемент Второй элемент Третий элемент

Это покажет это:

• Первый элемент
• Второй элемент
• Третий элемент

Здесь мы ввели правило CSS для удаления дисков, которые по умолчанию отображаются в списках. И мы это немного усложнили, но можно упростить. Часть метки можно опустить, но если она размещена, как в примере, текст также будет служить для обозначения поля при нажатии.

Ссылки в HTML

Ссылки создаются с помощью тега «a» и имеют следующую структуру:

<a href="https://linuxadictos.com/">Ваш блог о Linux (и HTML?)

Это покажет это:

Ваш блог о Linux (и HTML?)

Ссылка идет после атрибута «href», а текст — между открывающим и закрывающим тегами.

Ссылки могут указывать на идентификатор. Например, если мы добавим id="test" к элементу в открывающем теге, мы можем использовать ссылку #test, чтобы нажатие на нее привело нас к этому элементу, если он находится на той же странице. В противном случае хэш и идентификатор будут помещены после .html.

Изображения в HTML

HTML-изображения добавляются в тег «img» следующим образом:

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

Если мы хотим, чтобы изображение перевело нас на другую веб-страницу, нам просто нужно окружить его буквой «a» с соответствующим «href».

Датировка

Существует два типа кавычек, но наиболее часто используются блочные кавычки. В сочетании со вступительным абзацем это будет выглядеть так:

И Паблинукс сказал: Мы собираемся объяснить, как создавать текстовые документы с использованием HTML и CSS.

Это покажет это:

И Паблинукс сказал:

Мы собираемся объяснить, как создавать текстовые документы с использованием HTML и CSS.

Мы можем включать встроенные цитаты с помощью тега «cite», который по умолчанию обычно выделяет их курсивом. Если документ предназначен для нас, мы также можем использовать «i» или «em» и получим тот же эффект. Рекомендуется заключать этот текст в кавычки.

Если мы хотим вложить кавычки, нам просто нужно поместить одну «блочную цитату» внутрь другой.

HTML-код

Код в HTML помещается между тегами «код», и в нем нет особой загадки. Обычно он представляет его моноширинным шрифтом, и, используя его теги, мы сможем добиться семантической корректности (это проблема HTML), а также можем придать всему коду специальный формат. Это будет не так красиво, как некоторые Редакторы Markdown, если только мы не придадим ему формат, который здесь не будет автоматическим.

Tablas

Как и списки, таблицы также могут быть немного сложными в создании, но, добавив этот момент, мы сможем сделать больше в наших текстовых документах с помощью HTML и CSS. Правильный способ сделать это будет состоять из трех частей: «thead», «tbody» и «tfoot», которые будут находиться внутри тега «table», но вы можете опустить все три, если таблицы простые и нам не нужно их разделять. их содержание.

Внутри таблиц нам нужно создать строки (tr) с данными (td), и структура будет такой:

заголовок другой заголовок Третий заголовок Немного информации о линии фронта Еще одна информация о линии фронта Третий факт в первой строке Часть информации во второй строке Другая информация по второй линии Третьи данные во второй строке Немного информации о третьей строке Другая информация по третьей строке Третьи данные в третьей строке Первый результат Второй результат Третий результат

Он отобразит это (формат не должен отображаться по умолчанию):

Таблицы могут стать намного сложнее, и мы не сможем сосредоточиться на том, как они создаются, иначе это займет много времени и места. Да, мы можем сказать, что мы должны быть осторожны, чтобы они хорошо подходили и чтобы блок мог занимать более одной ширины, добавив к соответствующему «td» атрибут «colspan», за которым следует количество блоков, которое нам нужно. занять (например, колспан="2"). Для того же самого, но по вертикали, используется «rowspan» (пример строка = ”3″).

Горизонтальные линии и разрывы строк

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

Придание стилей нашему документу с помощью HTML и CSS

Пока что мы имеем не что иное, как сложный Markdown, верно? Все это не имело бы никакого смысла, если бы не тот факт, что мы также можем использовать CSS, и вот несколько советов.

Если мы хотим, чтобы все было в одном документе, CSS необходимо добавить внутри тега «style». или внутри тега HTML в атрибуте с тем же именем, как, например, мы использовали, чтобы неупорядоченный список не отображал диск по умолчанию.

CSS позволяет нам делать многое и даже несколько элементов одновременно. Если мы хотим, чтобы все заголовки типа 2 (h2) были центрированными и красными, нам нужно добавить это в тег «style» внутри «head»:

h2 {выравнивание текста: центр; красный цвет; }

Вышеупомянутым мы говорим: «примените правило центрирования текста и красный цвет ко всем тегам h2». Если мы хотим, чтобы все они были заголовками, перед фигурной скобкой нам придется добавить селектор «h1, h2, h3, h4, h5, h6». По умолчанию все находится слева, а также может быть установлено справа, если мы используем «справа» вместо «центра».

Другие рекомендуемые правила

• цвет фона: выбранный_цвет;, где «chosen_color» будет цветом с существующим словом, например «красный», или кодом RGB или HSL, среди прочего. Задает цвет фона элементу.
• радиус границы: выбранная_кривая, где «chosen_curve» будет в пикселях или процентах. Он придает углам кривую, и для каждого из них можно установить независимые значения.
• текстовая тень: 1px 2px 2px черный;, где значения могут быть другими. Он дает тень тексту: первое значение по оси X, второе по оси Y, третье — размытие, а четвертое — цвет.
• box-shadow: 1px 2px 2px черный;, то же, что и предыдущий пункт, но для всего поля, а не только для текста.
• размер шрифта: a_size;, где «a_size» — это размер, который может иметь разные единицы измерения, обычно в пикселях.
• шрифт-вес: a_thickness;, где «a_thickness» — толщина шрифта. Мы можем использовать такие слова, как «жирный» или «жирный», или единицы измерения от 100 до 900, если тип шрифта их поддерживает.
• семейство шрифтов: font_type;, где «font_type» — шрифт.
• граница: 1 пиксель, сплошная синяя;, первый — это толщина, второй — тип, а третий — цвет, который может быть разным. Это добавит границу к элементу.
• набивка y маржа Оба они дают нам поле вокруг элемента, но с той разницей: отступы являются частью самого элемента, а поля — это пространство, которое он занимает, но не самого элемента. Можно вводить различные типы измерений, наиболее распространенными из которых являются пиксели.
• ширина y высота Они служат для обозначения ширины и высоты элементов. Они используются меньше в тексте (для этого и нужен размер шрифта), но больше в контейнерах (которых мы здесь не видели) и в таких элементах, как изображения. Используются различные типы измерений, например пиксели.
• Больше в MDN.

Совет по печати документа в HTML и CSS

Одна из проблем, с которой мы можем столкнуться при создании документов с помощью HTML и CSS, заключается в том, что Браузеры не печатают так, как нам хотелось бы. Например, он будет разделять такие элементы, как списки, и мы, вероятно, не хотим этого видеть.

Мой совет: когда вы нажимаете кнопку «Печать» в браузере (Ctrl+P в большинстве случаев) мы добавляем пользовательские поля как минимум сверху и снизу. Это исправит ошибку, заключающуюся в том, что текст может располагаться слишком близко к верхнему и нижнему краям (вы также можете сделать так, чтобы верхний и нижний колонтитулы не отображались).

Проблема разделения элементов решается добавлением этого правила в раздел CSS:

@media print { body { цвет фона: белый; } ul, ol {взлом внутрь: избежать; /* Не вырезает списки при печати* } }

Вышеупомянутое говорит о том, что при печати фон полностью белый и списки не разделяются разрывами страниц. В селектор можно поместить и другие элементы, например «таблицу», если мы видим, что он их отсекает. Я думаю, нет необходимости помещать некоторые из них в виде абзацев, поскольку их можно разделить.

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

Еще один вариант

И это было бы все. С HTML и CSS у нас больше контроля, чем с Markdown, и, с моей точки зрения, это проще, чем LaTeX, хотя они играют в разных лигах. Это еще один вариант.