HTML. Форматирование текста

Август 21, 2022

Главная
Информатика
HTML. Форматирование текста

Содержание

2. Тэги форматирования текста p – абзац b – полужирный текст strong – полужирный текст i –
3. Тэги форматирования текста br - переход на новую строку sub – нижний индекс sup – верхний
4. Тэги цитирования q – выделение в тексте цитат blockquote – выделение длинных цитат внутри документа в
5. Тэги списков описаний (определений) dl – контейнер списка dt - термин dd – описание термина HTML
6. Пример форматирования HTML HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык
7. Пример форматирования HTML HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык
8. Пример форматирования HTML HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык
9. Универсальные атрибуты title – всплывающая подсказка при наведении class – имя класса для связи с CSS
10. Оформление текста color – цвет текста font – определение шрифта font-family – гарнитура шрифта font-size –
11. font-family h1{ font-family: Geneva, Arial, sans-serif; } p{ font-family: Georgia, Times, serif; }
12. Подключение шрифта (внешнее) HTML: Или @import url('https://fonts.googleapis.com/css?family=Roboto+Slab'); CSS: html{ font-family: 'Roboto Slab', serif; }
13. Подключение шрифта (внутреннее) @font-face { font-family: 'Roboto Slab'; src: url('./fonts/robotoslab.eot'); font-weight: normal; font-style: normal; } html{
14. font-size html{ font-size: 14px; } h1{ font-size: 30px; }
15. font-weight Числовые значения: 100, 200, 300, 400, 500, 600, 700, 800, 900 Текстовые значения: normal, lighter,
16. font-style normal – обычный italic – рукописный oblique – наклонный .hint{ font-style: italic; }
17. letter-spacing, word-spacing .long-word{ letter-spacing: 5px; } .long-text{ word-spacing: 15px; }
18. text-align center – по центру justify – по ширине left – по левому краю right -
19. text-decoration blink – мигающий текст line-through – зачеркнутый текст overline – линия над текстом underline –
20. text-transform capitalize – заглавная буква первого слова в предложении lowercase – нижний регистр (строчные буквы) uppercase
22. Скачать презентацию

Слайд 2

Тэги форматирования текста
p – абзац
b – полужирный текст
strong

– полужирный текст
i – курсивный (наклонный) текст
em - курсивный (наклонный) текст
h1 - заголовок 1 уровня (не более 1 на странице)
h2, h3, h4, h5 – заголовки 2-5 уровней

Слайд 3

Тэги форматирования текста
br - переход на новую строку
sub – нижний индекс
sup

– верхний индекс
small – уменьшение размера шрифта на 1
big – увеличение размера шрифта на 1
del – зачеркнутый текст
ins – подчеркнутый текст
hr – горизонтальная черта
pre – текст с сохранением форматирования

Слайд 4

Тэги цитирования
q – выделение в тексте цитат
blockquote – выделение длинных цитат

внутри документа в виде блока
cite - выделения названий книг, журналов либо произведений

Слайд 5

Тэги списков описаний (определений)
dl – контейнер списка
dt - термин
dd – описание

термина

HTML: язык форматирования текста

Слайд 6

Пример форматирования
HTML
HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат

описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства.

Слайд 7

Пример форматирования
HTML

HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат

описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства.

Слайд 8

Пример форматирования
HTML
HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат

Слайд 9

Универсальные атрибуты
title – всплывающая подсказка при наведении
class – имя класса для

связи с CSS
id – уникальный идентификатор
lang – язык текста
dir - направление текста (ltr или rtl)
accesskey – горячая клавиша
tabindex – порядок переключения с помощью клавиши TAB
style – задание стилей CSS

Слайд 10

Оформление текста
color – цвет текста
font – определение шрифта
font-family – гарнитура

шрифта
font-size – размер шрифта
font-weight – толщина шрифта
font-style – начертание шрифта
letter-spacing – расстояние между буквами
word-spacing – расстояние между словами
text-align – выравнивание текста
text-decoration – оформление текста
text-transform – регистр текста
text-shadow – текст с тенью

Слайд 11

font-family
h1{
font-family: Geneva, Arial, sans-serif;
}
p{
font-family: Georgia, Times, serif;
}

Слайд 12

Подключение шрифта (внешнее)
HTML:

Или

CSS:
html{
font-family: 'Roboto Slab', serif;
}

Слайд 13

Подключение шрифта (внутреннее)
@font-face {
font-family: 'Roboto Slab';
src: url('./fonts/robotoslab.eot');
font-weight: normal;
font-style:

normal;
}
html{
font-family: 'Roboto Slab', serif;
}

Слайд 14

font-size
html{
font-size: 14px;
}
h1{
font-size: 30px;
}

Слайд 15

font-weight
Числовые значения:
100, 200, 300, 400, 500, 600, 700, 800, 900
Текстовые

значения:
normal, lighter, bold, bolder
.hint{
font-weight: lighter;
}

Слайд 16

font-style
normal – обычный
italic – рукописный
oblique – наклонный
.hint{
font-style: italic;
}

Слайд 17

letter-spacing, word-spacing
.long-word{
letter-spacing: 5px;
}
.long-text{
word-spacing: 15px;
}

Слайд 18

text-align
center – по центру
justify – по ширине
left – по левому краю
right

- по правому краю
start – учитывает направление текста слева
end - учитывает направление текста справа
p{
text-align: justify;
}

Слайд 19

text-decoration
blink – мигающий текст
line-through – зачеркнутый текст
overline – линия над текстом
underline

– линия под текстом
.wrong-text{
text-decoration: line-through;
}

Слайд 20

text-transform
capitalize – заглавная буква первого слова в предложении
lowercase – нижний регистр

(строчные буквы)
uppercase – верхний регистр (заглавные буквы)
.main-text{
text-transform: uppercase;
}

HTML. Форматирование текста

Содержание

Тэги форматирования текста p – абзац b – полужирный текст strong

Тэги форматирования текстаbr - переход на новую строкуsub – нижний индексsup

Тэги цитированияq – выделение в тексте цитатblockquote – выделение длинных цитат

Тэги списков описаний (определений)dl – контейнер спискаdt - терминdd – описание

HTML

Универсальные атрибутыtitle – всплывающая подсказка при наведенииclass – имя класса для

Оформление текстаcolor – цвет текстаfont – определение шрифта font-family – гарнитура

font-familyh1{ font-family: Geneva, Arial, sans-serif;}p{ font-family: Georgia, Times, serif;}

Подключение шрифта (внешнее)HTML:Или @import url('https://fonts.googleapis.com/css?family=Roboto+Slab'); CSS:html{font-family: 'Roboto Slab', serif;}

Подключение шрифта (внутреннее)@font-face { font-family: 'Roboto Slab'; src: url('./fonts/robotoslab.eot'); font-weight: normal; font-style:

font-sizehtml{ font-size: 14px;}h1{ font-size: 30px;}

font-weightЧисловые значения: 100, 200, 300, 400, 500, 600, 700, 800, 900Текстовые

font-stylenormal – обычныйitalic – рукописный oblique – наклонный.hint{ font-style: italic;}

letter-spacing, word-spacing.long-word{ letter-spacing: 5px;}.long-text{ word-spacing: 15px;}

text-aligncenter – по центруjustify – по ширинеleft – по левому краюright

text-decorationblink – мигающий текстline-through – зачеркнутый текстoverline – линия над текстомunderline

text-transformcapitalize – заглавная буква первого слова в предложенииlowercase – нижний регистр

Похожие презентации