«Создание сайтов»: 4 : УРОВЕНЬ 2 : ТЕКСТ и панель его инструментов

От Музея: 4-ая лекция курса «Создание сайтов», где мы, закончив с теорией, переходим на 2 уровень — практический, — к основам HTML. На этом уровне мы, приступив к реализации своих проектов, будем потихоньку осваивать азы языка разметки гипертекста и его функционал. Важно: лекции Ани Амасовой подготовлены «для любителей», то есть людей, желающих познакомиться с процессом или самостоятельно сваять персональный сайт: гуманитариев, творцов, самозанятых всех профессий, а также для подростков, пенсионеров и семейного времяпровождения. 

Текст: Аня Амасова
Илл. на обл.: то, чем мы закончили прошлое занятие

Содержание лекции 4 «ТЕКСТ и панель его инструментов»: параграф (абзац) / разрыв строки; заголовки / начертания; стили; имя цвета: прилагательное, шестнадцатеричный код, RGB и то же + прозрачность (RGBA).

Вступление

Итак, на предыдущем занятии — лекция 3 — мы разобрались с основными тегами совершенно любой страницы сайта. Теперь мы знаем, где у страницы голова — между тегом HEAD (открывающим и закрывающим), — куда мы будем вкладывать мозг. А также, где у нашей странички тело — между открывающим и закрывающим тегом BODY, — где мы будем создавать форму и наполнять ее содержанием. А параллельно с развитием одного и другого — совсем, как у человечка, по чуть-чуть — будем развивать и его мозг.

Хм, так что же получается? Мы — родители своей странички? Да! И это отличный повод окунуться в детство и поиграть! Не зря один мой друг, сисадмин издательства и программист Вася Матвиенко, называет создание сайтов «игрой в кубики». Сегодня мы как раз и начнем изучать наши кубики — со всех сторон! И, поверьте, окажется, многие из них вам знакомы. Потому что они похожи... на кнопки панелей инструментов знакомых всем программ: Word, Excel и InDesign.

Так как без текста не обойдется ни один сайт, первым делом мы рассмотрим «игровые кубики» панели инструментов именно для него.

КУБИК 1. ПАРАГРАФ / РАЗРЫВ СТРОКИ

Создавая текстовую страничку, этим «кубиком», имеющим целых два значения ПАРАГРАФ — тег p  / РАЗРЫВ СТРОКИ — тег br, вы будете пользоваться чаще всего. Проще всего объяснить функционал и отличие этих тегов наглядно. Я предлагаю вам открыть свой файл, который вы создали в прошлый раз. И в рамках ТЕЛА страницы, то есть между двумя тегами  разместить несколько копий строк, — допустим 5, — содержащих основной текст:

ЗДРАВСТВУЙТЕ!
Здесь будет мой будущий сайт

Подсказка! Сочетание клавиш Ctrl+C (копировать) и Ctrl+V (вставить) применяется и при создании файлов html. И даже, наверное, нигде не применяется так много и часто! Это значительно удобнее, чем писать все вручную, переключаясь между раскладками клавиатуры. Также стоит упомянуть существующий способ «автоматизации рутинных задач», а расставление тегов — как раз одна из них. Можно завести отдельный файл блокнота, куда выписать себе единожды теги, или наборы тегов (открывающие и закрывающие), или даже целые блоки... И дальше — по необходимости: Ctrl+C (из одного файла) и Ctrl+V (в другой).

Между 1 и 2 копиями мы поставим также тег разрыва строки — br
Между 2 и 3 копиями поставим закрывающий тег параграфа — /p
Между 3 и 4 копиями поставим одиночный тег нового параграфа — p
Между 4 и 5 копиями поставим два тега разрыва строки подряд — br + br
А после 5 копии не станем ставить вообще ничего!


Рис. 1. Скопировали и расставили нужные теги!
- нажали в раскрывающемся списке «Файл» кнопочку «Сохранить» -
- открыли страницу во вкладке браузера /
или, если вкладка со страницей уже открыта, значок «Обновить»
Рис. 2. Смотрим результат:

Какие выводы мы можем сделать?

1. Закрывающий тег параграфа / абзаца — /p — «работает» на закрытие действий, заданных в значениях к атрибуту (что логично), но одновременно воспринимается и как новый, самостоятельный тег p, определяющий, что идущий за ним текст является новым параграфом / абзацем — впрочем, без каких-либо атрибутов. (На нашем примере: для 1 и 2 копий у нас был открыт тег параграфа с добавлением атрибута расположения текста — «по центру». Когда мы закрыли этот тег, к 3 копии перестало применяться центрирование текста, но она же стала новым абзацем, несмотря на то, что мы перед ней не поставили открывающий тег параграфа.)

2. Тег без атрибута и его значений выравнивает текст по левому краю, т.е. эта опция свойственна тегу параметра / абзаца «по умолчанию».

3. Разница между и br — одна строка.

4. Тег p по межстрочному интервалу синонимичен двум «переводам каретки печатной машинки», то есть двум тегам разрыва строки — br + br. А значит, если мы хотим единожды задать какие-то значения атрибуту тега для группы абзацев, мы можем открыть один тег параграфа, указав необходимое (например, расположение=«центр»), а закрыть лишь в конце фрагмента: потому что все абзацы внутри открывающего и закрывающего тега мы сможем смоделировать с помощью тегов разрыва (новая строка + еще раз новая строка).

Кстати: в отличие от тега br, два тега p — да хоть десять подряд! — не дадут никакого эффекта. Что значит: вы можете смело закрывать тег параграфа и тут же открывать новый — интервал между абзацами останется прежним.

4. Тег p может быть и одиночным, не требующим закрытия. Но только при условии, что он не содержит атрибута. То есть фактически такой одиночный тег не задает никаких параметров текста, отличных от параметров «по-умолчанию» (или заданных в стилях, но до них мы доберемся позже), он просто равен двум разрывам (а вы просто пишете всего три знака вместо восьми). Уточнение: если вы пишете сайт в спец.программе, она будет подсвечивать, что вы, возможно, допустили ошибку (см. строку 18 на рис. 1). Если раздражает, можно закрыть тег, однако учитывая вывод из п. 1.

Табл. 1. Параграф (абзац):
его тег, атрибуты и значения атрибутов

Тег Атрибуты Значения
p align ="center"
    ="right"
    ="justify"

Атрибут align (=расположение) вам уже знаком. Используя свои знания о теге и три варианта значения для его атрибута: по центру, по правому краю и по ширине (по левому тоже можно, но он так встает по-умолчанию) — вы можете управлять как расположением больших фрагментов текста на странице, так и каждого абзаца в этом фрагменте в отдельности.

КУБИК 2. ЗАГОЛОВОК / НАЧЕРТАНИЕ

Сложно создать страницу-навигацию, не используя заголовки и разнообразные выделения для фрагментов текста.  Вот почему вторым номером мы рассмотрим кубик ЗАГОЛОВОК — тег h с добавлением цифрового значения уровня заголовка: от 1 до 6 / НАЧЕРТАНИЕ — тег i (сокр. от italic, в рус. «курсив») для курсива и тег b (сокр. от bold, в рус. «дерзкий») для полужирного текста.

NB! Точно таким же полужирным выделением браузеры отображают синоним тега b  — тег strong, что переводится как «сильный» и означает «акцент». В начертании они абсолютно одинаковы, так что можете пользоваться любым. Мне нравится b  — bold — по трем причинам: весь издательско-полиграфический мир испокон веков набирает и печатает «болдОм» — то есть это привычная мне терминология; во-вторых, в теге b значительно меньше букв (примерно в шесть раз); ну и в-третьих: дерзкие интереснее, чем просто сильные.

Также тег-абсолютный синоним существует и у i — это em. Но я даже не знаю, как это em переводится, и знать не хочу, потому что «италик» — он с XV века «италик» (гранд мерси книгопечатнику Альдо Мануцию!)..

Как вы уже поняли из предыдущего опыта, «по-умолчанию» шрифт текста прямой, светлый и одинаковый. Так давайте получим новый опыт! Вот у нас с вами есть в файле 5 копий одинакового текста:

ЗДРАВСТВУЙТЕ!
Здесь будет мой будущий сайт

Предлагаю все «ЗДРАВСТВУЙТЕ», кроме первого, сделать заголовками разных уровней — h1, h2, h3 и т.д.

Важно 1! Всего уровней заголовков в html 6: от самого верхнего — h1, до самого незначительного — h6
Важно 2! Тег заголовка является синонимом тега параграфа, поэтому нам придется убрать в своем файле (для чистоты и красоты эксперимента — везде) теги параграфов. В идеальном логическом мире не место тавтологии!

Строчку «Здесь будет мой будущий сайт» мы заключим (в смысле — поставим между открывающим и закрывающим) в новые изучаемые теги:
- в копиях 2 и 3 — i и b
- в копии 4 — в оба тега одновременно, i+b
А в копии 5 — в один из этих тегов мы поставим а) любое слово и б) любую букву.

Рис. 3. Расставили нужные теги.
- совершили уже упомянутую выше последовательность действий
с файлом и со страницей -

Рис. 4. Смотрим результат:

Какие выводы мы можем сделать?

1. Заголовок первого уровня — h1 — очень большой. Чем выше цифра уровня заголовка, тем мельче шрифт, и уже где-то на 4 уровне практически соответствует (если  не меньше) размеру шрифта основного текста.
2. Заголовки имеют полужирное начертание, хотя мы со своей стороны таких тегов им не присваивали.
3. Заголовки хоть и являются синонимом тега p, в отличие от него имеют увеличенные межстрочные интервалы — как до заголовка (меньше), так и после (больше). И это тоже не надо сбрасывать со счетов.

 Табл. 2. Заголовок:
тег, атрибуты и значения атрибутов

Тег Атрибуты Значения
h (h1...h6) align ="center"
    ="right"
    ="justify"

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

Домашнее задание: попрактикуйтесь в своем файле, сверяясь с результатом, еще и еще: используя для него прописные или строчные буквы, делая длинные заголовки одного уровня двумя строчками (через тег <br>) и т.д. Идеально, если это происходит не на локальном компьютере, а все-таки сразу в сети: так вы сможете дополнительно видеть, как все это выглядит на телефоне. Ваша задача — и домашнее задание к следующему занятию — определить оптимальные размеры будущих заголовков вашего сайта и выбрать хотя бы два уровня, наиболее вам симпатичных по размеру. (Опережая вопросы: про шрифты будет отдельная лекция, когда разберемся со всеми основами.)

Спойлер! Тегами параграфа и заголовков вы размечаете текстовый контент, «маркируя» его для дальнейшего создания стилей. До этого процесса мы доберемся лишь «к пубертату» нашей страницы, но я обязана рассказать вам о нем сейчас. Стилями мы начнем забивать голову html-файла, прописывая в мозгу команды из одной-двух и более строк, которые применят определенный шрифт, расположение или цвет сразу ко всем элементам страницы, отмеченным... правильно!.. как p, h1, или h3, или, допустим, h5... Каждого — отдельно! Вот почему так важно еще «в младенчестве» верно разметить разные (по смыслу и назначению) тексты уровнями заголовков (и в целом отделить заголовки от абзацев и простых выделений-«акцентов» — прописными, курсивом, полужирным).

КУБИК 3. РАЗНОЦВЕТНЫЙ

Ну и напоследок, чтобы вам было повеселее, мы познакомимся с гранями цветного «кубика» и научимся красить! Кроме того, мы научимся это делать ТРЕМЯ разными способами. Для этого мы будем задавать индивидуальные (пока) стили своим заголовкам и текстам параграфов.

Для определения стиля используется общий для многих тегов (и многих задач) атрибут style — т.е. «стиль». В нашем существующем файле мы можем поставить его как после тега параграфа, так и после тега заголовка, тем самым определив, что у ЭТОГО ПАРАГРАФА или у ЭТОГО ЗАГОЛОВКА есть какие-то стилевые особенности. Например: цвет текста.

В качестве значений атрибута для цвета текста — используется определяющая функция (к чему имеет отношение) color и, через двоеточие, ИМЯ ЦВЕТА. И так как имя цвета может выглядеть в html по-разному, рассмотрим три основных, наиболее традиционных, варианта.

Во-первых, ИМЯ ЦВЕТА вполне можно задать через известные вам английские ПРИЛАГАТЕЛЬНЫЕ, обозначающие базовые цвета — black, blue, green, red, tomato и т.д.

Пробуем написать в нашем файле:
С очевидным результатом:

А также через сложносоставные прилагательные, вроде seagreen, — впрочем, не увлекайтесь: это будут какие-то весьма условные голубой, зеленый, красный и зеленый-морской...

Разница между green и seagreen:

 

Во-вторых, ИМЯ ЦВЕТА можно задать конкретным ШЕСТНАДЦАТЕРИЧНЫМ КОДОМ — то есть обозначением цвета в шестнадцатеричной системе исчисления, которой пользуются для понимания оттенка маленькие гномики внутри компьютера. Такие коды состоят из букв и чисел, а то, что это именно код, а не случайный набор, определяется наличием в начале кода знака «решетки», а в конце кода — знака «точка с запятой».

И в-третьих, что весьма порадует художников и фотографов, ИМЯ ЦВЕТА можно задать через значения RGB — указав точный состав цвета, смоделированный из трех цветов, — red, green, blue. И даже можно добавить значение прозрачности! Эта модель называется RGBA.

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


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


«А можно покрасить еще и под текстом?». Мой ответ «Да», и тут снова у нас несколько вариантов: покрасить строку непосредственного расположения текста, задать фон странице целиком или задать фон таблицы или цвет отдельных ячеек, но о фонах и о таблицах как способах разметки страницы мы поговорим на следующем занятии. Сегодня — только первое!

Задача покрасить строку под текстом встает довольно редко, но она интересна с точки зрения грамматики языка html: как расставляются атрибуты и функции, имеющие отношение к одному тегу?

Если две функции имеют отношение к одному атрибуту одного тега, то они просто ставятся последовательно в рамках одного объединения кавычками. Вот так:


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


И мы видим, что атрибуты внутри одного тега выставляются тоже элементарно — всего лишь последовательно.

Эти знания (вкупе с вашими размышлениями о «корпоративных»/«личных» цветах вашего сайта) очень пригодятся нам на следующем занятии!

Перейти к 5 лекции курса >>>

[декабрь, 2023]

События

15.05.2024
Благодарность от Оренбургского Государственного Университета главному редактору Музея уникальных вещиц Ане Амасовой за мастер-класс «Практика перевода книг-картинок, графических романов и книг художников».
11.05.2024
Музей встретился со студентами Академии Асада (Каир), которые подготовили для нас презентации и переводы арабских сказок.
04.05.2024
4 мая 2024 года в День Рождения знаменитой музы Льюиса Кэрролла — Алисы Лидделл — Музей анонсирует запуск в работу книги о пиар-легенде с погружением в «кроличью нору» научных технологий управления общественным мнением авторства Алисы Кербер.
05.04.2024
13-й аннотированный дайджест статей Музея по итогам первого квартала 2024 года.
05.03.2024
C 28 февраля по 10 марта в Большом зале Санкт-Петербургского Союза Художников на Большой Морской проходит выставка иллюстраций книг для детей и юношества.
Следите за новостями проекта в разделе
Следите за новостями проекта в разделе "Книжная галактика. - Дипломатия"!