Скачать "5. Форматирование текста html, применение спецсимволов, кодировки цветов."
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FYQ3TovTAi8o%252Fmaxresdefault.webp&w=1139&q=75)
Похожие ролики из нашего каталога
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252F-lzLmpHsdTc%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252F9HKlaKwct7Y%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FFk5G3rNquJI%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FNajHNLhEvgo%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FRjKJCkyKl5c%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FS0j_kpgL9H4%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FSPR_Pqte5s0%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252Flmka7L0kF1A%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FvEvp4qAxHE8%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252F-QML_oqpoek%252Fmaxresdefault.jpg&w=1139&q=75)
Теги видео
Субтитры
Английский
00:00:00
[музыка]00:00:05
приветствую вас на канале как сделать00:00:07
сайт00:00:17
надеюсь вы определились с редактором00:00:18
кода если нет посмотрите предыдущий урок00:00:22
быть мы начинаем углубляться в код html00:00:25
и без хорошего редактора будет сложно00:00:29
обычно основной контент сайта этот текст00:00:32
важно знать как сделать текст00:00:35
читабельным и привлекательным в этом00:00:37
уроке мы рассмотрим теги с помощью00:00:39
которых можно форматировать текст00:00:41
запоминать все теги не стоит но важно00:00:44
знать что они существуют их нужно уметь00:00:46
применять некоторые теги не только иначе00:00:49
отображают текст визуально но такие теги00:00:52
дают логический смысл тексту который00:00:54
имеет значение для поисковиков или при00:00:56
использовании особых браузеров создадим00:01:04
новый документ для этого воспользуемся00:01:08
готовым шаблонам с минимальной разметкой00:01:10
html начнем рассматривать на практике00:01:14
как форматировать текст начнем с тегов00:01:18
заголовков эти теги00:01:21
не только сделают текст крупнее но и00:01:23
подскажет поисковику о чем идет речь в00:01:25
тексте с помощью этих тегов00:01:27
организуется иерархия на странице00:01:30
приведу простой пример мы заключили00:01:34
строки с текстом между тегами00:01:36
h1 h2 h3 h4 hp и h600:01:40
данные теги как было сказано строят00:01:43
иерархию на странице цифра с буквой h00:01:47
это уровень заголовка то есть чем ниже00:01:50
цифра тем выше уровень заголовка00:01:53
посмотрим как отобразится код в браузере00:01:55
сохраним его00:01:58
мы видим что чем выше уровень заголовка00:02:01
тем крупнее отображается текст00:02:04
однако заголовки определяют не только00:02:07
визуальное отображение текста но еще и00:02:09
логическую значимость текста для00:02:12
поисковиков или же для некоторых00:02:14
браузеров важно помнить что не стоит00:02:17
перескакивать между уровнями заголовков00:02:19
и уровне заголовков должны идти по00:02:21
порядку также нельзя вкладывать в между00:02:24
тегами заголовка другие теги00:02:26
обязательно используйте данные теги00:02:28
и не пренебрегайте ими для того чтобы00:02:33
сделать текст жирным как вы уже знаете00:02:36
применяются теги00:02:37
б однако эти теги дадут лишь визуальные00:02:42
изменения текста00:02:43
если же вы хотите выделить текст и00:02:46
показать его значимость например для тех00:02:48
же поисковиков заключить его в теге00:02:51
strong00:02:52
давайте посмотрим как поведет себя00:02:54
данный код мы видим что текст00:03:00
заключенные между тегами быт гамме00:03:02
strong не отличаются друг от друга00:03:04
однако тех заключенные между тегами00:03:07
strong имеют логическую значимость также00:03:11
с тегами ой которые делают с курсивным00:03:14
если вам необходимо показать значимость00:03:17
текста то необходимо заключить его в00:03:20
теги и м посмотрим результат выполнения00:03:25
такого кода как видите текст не00:03:30
отличается для того чтобы перечеркнуть00:03:33
текст используйте теги div они также00:03:37
несут смысловую нагрузку результат00:03:40
работы данного кода вы тоже можете00:03:43
видеть вы можете столкнуться с тем что00:03:47
потребуется подчеркнуть текст все просто00:03:50
заключаете его между тегами ins00:03:54
посмотрим как будет исполнен этот код мы00:03:58
видим подчеркнутый текст теги00:04:01
сабы esab сделают текст подстрочным или00:04:05
над строчным приведу примеры я написал00:04:10
вот такой интересный код посмотрим что00:04:13
из этого получится результат работы00:04:17
данного кода вы также можете увидеть00:04:19
верхнем окне программы мы видим что00:04:22
текст заключенные между тегами стал либо00:04:24
подстрочным либо над строчным иногда00:04:28
требуется немного уменьшить или00:04:30
увеличить текст относительно всего00:04:32
абзаца00:04:33
тут используйте теги смол или big00:04:38
например такой код проверим его00:04:41
работоспособность00:04:43
все получилось часть текста стало меньше00:04:47
а часть больше00:04:49
изначального текста пожалуй самым00:04:54
интересным тегом будет так фонд простое00:04:58
применение этого тега к тексту00:04:59
не даст результатов так как это00:05:02
контейнер характеристик шрифта цвета00:05:04
гарнитуры00:05:05
размера и его нужно применять совместно00:05:08
с атрибутами для данного тега могут быть00:05:11
применены соответственно 3 атрибута00:05:13
color фэйс и says для примера про пишем00:05:19
код в начале напишем текст обычным00:05:23
шрифтом без применения тегов для того00:05:25
чтобы можно было с ним сравнивать в00:05:27
текст с применением тегов теперь00:05:34
пропишем так фонд00:05:43
между этими тегами заключим текст00:05:48
например зеленый именно в зелёный цвет00:05:52
попробуем раскрасить этот текст для00:05:55
этого пропишем атрибут color со00:06:00
значением green зеленый посмотрим что из00:06:07
этого получится как мы видим текст00:06:12
действительно покрасился в зеленый цвет00:06:15
далее попробуем применить00:06:17
от ебут says для этого скопируем00:06:23
имеющуюся теги и пропишем необходимый00:06:27
нам атрибут атрибут связь принимая00:06:33
значения от 1 до 7 для примера пропишем00:06:36
5 и напишем какой-нибудь текст посмотрим00:06:43
результат работы данного кода мы видим00:06:46
что текст стал больше предлагаю00:06:50
посмотреть как будут работать два00:06:51
атрибута вместе для этого00:06:54
пропишем атрибут cola но в этот раз00:06:57
просто им цвет в 16-ричной системе для00:07:01
этого пишем значок решетки и код00:07:06
какого-нибудь света например кодировку00:07:09
красного цвета00:07:13
совместно с этим атрибутом пропишем00:07:15
атрибут размера00:07:20
со значением 5 для наглядности давайте00:07:26
начнем этот текст но с новой строки00:07:31
пропишем какой-нибудь текст00:07:39
хорошо кот готов смотрим его выполнение00:07:44
текст стал красным и большим то есть00:07:48
работали оба атрибута со своими00:07:50
значениями у нас остался еще один00:07:53
атрибут атрибут фейс воспользуемся им00:08:01
для наглядности предлагаю использовать00:08:03
все три атрибута00:08:25
зададим кодировку синего цвета00:08:33
и сделаем текст еще большего размера со00:08:36
значением сайт-600:08:38
пропишем какой-нибудь текст00:08:49
посмотрим что же у нас получилось00:08:52
мы видим что текст стал еще больше00:08:55
приобрел синий цвет и его начертания00:08:58
стало немножко другим потому что мы00:09:00
применили к нему шрифт comic sans00:09:03
там с как вы видите атрибут color может00:09:07
принимать значение от цвета как00:09:08
шестнадцатеричной системе так его00:09:10
прощенный записи цвета фэйс принимает00:09:14
корректно и название шрифта00:09:15
будьте аккуратны с этим значением00:09:17
старайтесь использовать распространенные00:09:19
шрифты которые установлены на компьютере00:09:21
по умолчанию если у пользователя00:09:23
просматривают его страницу не окажется00:09:26
указанного шрифта00:09:27
то он увидеть текст стандарт на00:09:30
написание позже мы научимся использовать00:09:32
любые шрифты когда дойдем до изучения00:09:35
стилей css00:09:36
атрибут says как я уже сказал может00:09:39
принимать значения от 1 до 700:09:41
соответственно чем больше значения тем00:09:44
больше текст думаю вам понравилось00:09:46
играть с текстом но вынужден вас немного00:09:49
огорчить почти все что мы только что00:09:52
рассмотрели лучше не использовать на00:09:53
практике предпочтительнее форматировать00:09:56
текст при помощи стилей css это будет00:09:59
считаться хорошим тоном среде00:10:01
web-дизайна и код с применением стилей в00:10:04
настоящее время считается более валидным00:10:06
однако если вы не предъявляйте больших00:10:09
требований к своему сайту то вполне00:10:11
можете использовать для форматирования и00:10:13
теги html00:10:14
когда мы изучим стили css то будем очень00:10:18
редко обращаться к рассмотренным тегом в00:10:21
этом уроке я хотел бы затронуть еще00:10:23
некоторые аспекты по работе с текстом00:10:25
как вы уже помните существует маленький00:10:28
тбр который создает разрыв строки00:10:32
существует еще один интересный тср это00:10:37
так сделать разрыв строки подобно ты00:10:38
губер однако он еще и добавит при этом00:10:41
горизонтальную линию рассмотрим пример00:10:45
напишем какой-нибудь текст00:10:58
и разобьем его тегом h&r ровно00:11:02
посередине посмотрим результат00:11:06
выполнения данного кода так вы видите00:11:10
произошел перенос текста а вместе00:11:13
разрыва строки появилась горизонтальная00:11:15
черта как мы видим по умолчанию линия00:11:18
имеет серый цвет она тонкая и ширина ее00:11:21
на всю страницу00:11:23
эти параметры можно регулировать00:11:25
используя00:11:26
атрибуты к этому тэгу давайте попробуем00:11:29
прописать атрибут на ушей00:11:35
данные атрибуты не принимает никаких00:11:38
параметров00:11:39
он лишь убирает эффект их мерностью00:11:41
линии посмотрим результат выполнения00:11:43
кода как мы видим линия стала двухмерной00:11:48
давайте пропишем уже известные нам00:11:51
атрибуты says со значением 10 и атрибут00:11:59
color со значением black черный00:12:08
посмотрим что получилось как мы видим00:12:12
линия стала более толстой и приобрела00:12:14
черный цвет соответственно атрибуты says00:12:17
i care управляют толщиной линии и и цветом00:12:21
менее имеет ширину на всю страницу00:12:24
этот параметр можно также регулировать00:12:26
для этого имеется атрибут виз ширина00:12:31
пропишем его со значением 200 пикселей00:12:36
давайте для наглядности попробуем00:12:39
заменить цвет на другой пропишем его00:12:42
16-ричной кодировки к примеру такую00:12:48
посмотрим что получилось как мы видим00:12:52
линия стала другим цветом то есть цвет00:12:54
так же работает и ширина я стала 20000:12:57
пикселей линия располагается по центру00:13:01
этот параметр можно регулировать и00:13:03
выравнивает линию либо по левому краю00:13:05
либо по правому либо по центру за это00:13:08
отвечает атрибут line атрибут align00:13:14
принимает три значения00:13:16
лифт по левому краю райпо про мука и00:13:18
центр по центру ну по умолчанию атрибут00:13:23
и так принимает значение по центру00:13:26
пропишем лифт посмотрим результат00:13:30
выполнения линия сместилась влево то00:13:35
есть выравнивалась по левому краю с этим00:13:37
атрибутом мы столкнемся еще не раз00:13:40
применяя тыр с разными атрибутами и их00:13:43
значениями вы придадите своей странице00:13:45
собственный стиль опять же стили css00:13:48
тоже позволяют создать такую линию00:13:51
но там гораздо больше возможностей для00:13:53
ее форматирования когда-нибудь мы дойдем00:13:55
и до этого последнее на что я хотел бы00:14:00
обратить внимание в этом уроке00:14:02
применение спец символов скорее всего вы00:14:05
замечали необычные значки на сайтах00:14:07
например знак параграфа или товарный00:14:10
знак как же нам вставить их на свою00:14:13
страницу00:14:14
сейчас все расскажу давайте рассмотрим00:14:17
пример напишем какой-нибудь текст00:14:26
предположим последнее слово мы хотим00:14:28
отделите большим количеством пробелов00:14:31
простая мы эти пробелы посмотрим что же00:14:34
получится мы видим что ничего не00:14:38
получилось и пробел остался один дело в00:14:40
том что браузер игнорирует все пробелы и00:14:43
оставляют только один из них как же нам00:14:46
быть в такой ситуации для этого00:14:48
существует ток при00:14:57
вот что получится если мы заключим текст00:14:59
в этот так получилось что последние00:15:03
слова отдельно большим количеством00:15:05
пробелов то есть браузер выдал текст00:15:07
таким какой он есть все же мы видим что00:15:10
текст немножко поменялся вы начертания00:15:13
другим способом провести данную00:15:15
манипуляцию будет вставка спецсимволов00:15:18
попробуем вставить00:15:20
спецсимволы пробела спят символ пробела00:15:23
выглядит следующим образом00:15:31
это всего лишь один символ пробела00:15:34
сделаем их несколько00:15:39
и посмотрим что получилось мы видим что00:15:43
действительно в строке появилось много00:15:45
пробелов вернемся к знакам торговой00:15:48
марки и параграфа00:15:50
для их написания необходимо будет00:15:52
использовать соответствующие коды00:15:55
пропишем их00:16:05
посмотрим что же получилось мы видим00:16:07
значок параграфа и товарный знак часто00:16:12
бывает так что проще вставить00:16:14
спецсимволы чем нарисовать какое-то00:16:16
изображение00:16:18
допустим нам нужно вставить сердце то мы00:16:22
просто напишем код00:16:30
hard сердца00:16:39
смотрим00:16:40
мы видим что появился символ сердца так00:16:45
как спецсимволы00:16:46
это тот же текст то к ним применимы и00:16:48
атрибуту форматирование текста00:16:50
сделаем наше сердце красному и более00:16:53
крупным для этого заключим спит символ в00:16:58
теге фонд00:17:11
к тегу фонд применим атрибуты color для00:17:15
изменения цвета со значением red красный00:17:21
атрибут says для изменения его размеров00:17:25
со значением всем смотрим что получилось00:17:30
сердце стало большим красным то есть по00:17:34
сути мы получили как будто бы00:17:35
графический элемент00:17:36
не нарисовав при этом никакие рисунки00:17:39
спецсимволов очень много их коды вы00:17:43
легко отыщите в интернете запоминать их00:17:45
нет смысла на экране вы видите коды00:17:48
некоторых спец символов00:17:55
в данном уроке я неоднократно00:17:57
использовал шестнадцатеричную кодировку00:18:00
цветов для того чтобы узнать кодировку00:18:04
нужного цвета можно воспользоваться00:18:06
палитры photoshop встроенными палитрами00:18:08
редакторов кода онлайн генераторами00:18:11
цветов например в программе html лидер00:18:15
можно найти нужный цвет в палитре00:18:20
для этого в разделе палитра нужно00:18:23
выбрать определенный цвет мы видим что00:18:26
цвета разбиты по категориям00:18:28
примеры нам нужен оттенок красного00:18:31
разработчики редактора заботливо сделали00:18:34
большое количество цветов например00:18:37
выберем кровяной красный сразу же видим00:18:40
что вход добавилось кодировка этого00:18:43
цвета а снизу мы видим как он будет00:18:45
выглядеть визуально00:18:47
помимо этих способов вы также можете00:18:50
воспользоваться таблицами безопасных00:18:52
цветов для этого в поисковик видите00:18:55
фразу00:18:57
таблица безопасных цветов00:19:04
и можете щелкнуть по первой вкладке00:19:11
вы видите перед собой большое количество00:19:14
цветов которые можно использовать без00:19:16
риска того что они будут отображаться00:19:18
неправильно на разных компьютерах00:19:20
у этих цветов есть необходимая кодировки00:19:24
16-ричной системе что же мы рассмотрели00:19:31
огромную тему посвященную тексту в html00:19:35
надеюсь информация была полезной если00:19:38
это так ставьте лайк и подписывайтесь на00:19:40
канал00:19:41
если вы хотите продолжить изучение того00:19:42
как создать сайт00:19:44
до встречиОписание:
Текст можно форматировать при помощи тегов или атрибутов и их свойств, применённых к элементам html. В уроке рассмотрены такие теги и атрибуты. На сайте http://www.les4u.ru/ Вы сможете наглядно увидеть как это работает!
Готовим варианты загрузки
* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."
** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах
Вопросы о скачивании видео
Как можно скачать видео "5. Форматирование текста html, применение спецсимволов, кодировки цветов."?
Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.
Какой формат видео "5. Форматирование текста html, применение спецсимволов, кодировки цветов." выбрать?
Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.
Почему компьютер зависает при загрузке видео "5. Форматирование текста html, применение спецсимволов, кодировки цветов."?
Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.
Как скачать видео "5. Форматирование текста html, применение спецсимволов, кодировки цветов." на телефон?
Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.
Как скачать аудиодорожку (музыку) в MP3 "5. Форматирование текста html, применение спецсимволов, кодировки цветов."?
Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.
Как сохранить кадр из видео "5. Форматирование текста html, применение спецсимволов, кодировки цветов."?
Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.
Сколько это всё стоит?
Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.