КИТ Web -технологии Лекция 2 Форматирование текста НОВОПОЛОЦК

Зарегистрируйтесь, чтобы просмотреть полный документ!

КИТ Web -технологии Лекция 2. Форматирование текста НОВОПОЛОЦК, 2013

СОДЕРЖАНИЕ I. Задание цветовых параметров II. Структурные элементы текста III. Физическое форматирование текста. Работа со шрифтами IV. Логическое форматирование текста V. Специальные символы VI. Понятие о блочных и встроенных элементах 2

Задание цветовых параметров Цвет фона страницы 1) Однотонный фон страницы <body bgcolor=“#FFFFFF”> Цифровое указание цвета по модели RGB Именное указание цвета “white” (#FFFFFF, белый) “#99 ccff” RGB = Red – Green – Blue (красный – зеленый – синий) Интенсивность компонента записывается двухзначным шестнадцатеричным числом 3

Задание цветовых параметров 2) Фон страницы – изображение <body background=“images/img_1. jpg”> ВАЖНО! - правильно указывать путь к файлу с изображением - форматы изображений в WWW: jpg, png, gif - одновременно задавать и цвет фона – для тех, у кого отключена графика 1) background=“img_1. jpg” (html-файл и изображение лежат в одной папке) Задание: откройте файл structura. html, укажите атрибуты тега body 2) background=“images/img_1. jpg” (изображение лежит в отдельной папке, которая <body одном уровне с html-файлом ) хранится наbackground=“images/bg 5. jpg” bgcolor=“silver”> 3) background=“. . /images/img_1. jpg” (отдельная папка лежит на уровень выше html-файла) теперь страница имеет фон</body> 4) background=“http: //. . . img_1. jpg” (изображение лежит на браузерах Сохраните изменения и просмотрите страницу в сервере) 3) Фон страницы - градиент: в качестве фонового используется изображение шириной (высотой) в 1 px 4

Задание цветовых параметров Цвет содержимого страницы <body text=“red” link=“green” alink=“lime” vlink=“purple” текста на странице ссылки активной ссылки (момент щелчка) посещенной ранее ссылки <body Задание: примените перечисленные атрибуты к файлу structura. html. bgcolor=цвет фона документа Сохраните изменения и просмотрите страницу в браузерах. background=фоновое изображение text=цвет текста link=цвет непросмотренной ссылки vlink=цвет просмотренной ссылки alink=цвет просматриваемой ссылки > </body> не рекомендуются > цвет 5

Структурные элементы текста 1. Заголовки позволяют структурно разделить текст на разделы <h 1>Заголовок первого уровня</h 1> - самый высокий уровень … <h 6>Заголовок самого низкого уровня</h 6> Пример Возможный атрибут: align (выравнивание) – значения left, right, center, justify <html> <head> <h 3 align=“right”> <body> ! не рекомендуется <title>Работа с текстом</title> </head> <h 1>Самый большой заголовок</h 1> <h 3>Заголовок поменьше</h 3> <h 6>Заголовок самого низкого уровня</h 6> </body> </html> 6

Структурные элементы текста 2. Абзацы и разрывы строк формально разделяет текст - переход на следующую строку; абзац не прерывается. Удобно для публикации стихов: Белеет парус одинокий В тумане моря голубом текст, помещенный в такой «контейнер» , воспринимается и отображается браузером как единый абзац возможен атрибут align с одним из значений: left, right, center, justify Каждый абзац автоматически начинается с новой строки и оканчивается переходом на следующую строку и имеет вертикальные отступы 7

Пример <html> <head> </head> <title>Работа с текстом</title> <body> В начале документа поместим неотформатированный никак текст. Клавиша Enter в HTML не обеспечивает перехода на следующую строку. Текст начался с новой строки после соответствующего тега. Текст, помещенный между тегами начала и конца абзаца, отображается в отдельном абзаце. После окончания абзаца текст начнется с новой строки. </body> </html> 8

Структурные элементы текста 3. Горизонтальная линия Тег <hr/> (непарный) Атрибуты: -align (выравнивание)=left, right, center -width (ширина в пикселах или %) -size (толщина в пикселах ) -noshade (без тени) -color (цвет) <body> Первая часть текста, которая должна быть отделена. Далее горизонтальная линия: следует <hr align=“center” width=“ 200” size=“ 5” color=“red”/> Далее следует продолжение текста </body> 9

Предварительно отформатированный текст При написании кода HTML браузером игнорируются лишние пробелы, символы перехода на новую строку (если они не заданы тегом), знаки табуляции. Для отображения специфического форматирования текст должен быть помещен между тегами <pre> и </pre> <h 2> "Вредные советы"</h 2> <h 3> Григорий Остер </h 3> <pre> Главным делом жизни вашей Может стать любой пустяк Надо только твердо верить, Что важнее дела нет. И тогда не помешает Вам ни холод, ни жара, Задыхаясь от восторга, Заниматься чепухой. </pre> 10

Физическое форматирование текста Формат отображения шрифта в браузерах … - полужирный … - курсивный <tt>…</tt> - телетайпный (пишущая машинка) <big>…</big> - увеличенный размер … - уменьшенный размер … - подчеркнутый <s>…</s> или <strike>…</strike> - зачеркнутый … - нижний индекс … - верхний индекс <basefont/> (непарный) – задание параметров шрифта по умолчанию для всего документа Атрибуты: color, face, size. Использование тега не рекомендуется Текст, которому заданы <strike>логические</strike> физические стили. Красивые формулы: Н2О, x2 11

Физическое форматирование текста Работа с тегом … Позволяет с помощью атрибутов управлять размером и цветом шрифта. Атрибут Значение color Позволяет изменить цвет шрифта face Позволяет выбрать шрифт, указав его имя. Можно указать несколько через запятую; если на компьютере не найден первый шрифт, используется второй и т. д. size Позволяет изменить размер шрифта. Значение от 1 до 7. Можно задавать относительный размер: -1 (меньше на одну ступень, чем значение по умолчанию), +1 (больше на одну ступень) Неформатированный текст измененный фрагмент обычный текст. Можно создавать вложенность: пишем большими зелеными красивыми буквами 12

Логическое форматирование текста Теги логической разметки отвечают за значение элемента больше, чем за внешний вид. Некоторые из них не влияют на отображение текста браузером, другие выполняют действия, аналогичные тегам физического форматирования. Разные браузеры толкуют одни и те же теги логических стилей по-разному. Теги являются парными. <abbr> и <acronym title=“расшифровка аббревиатуры”> - аббревиатура <cite> - цитата (отображается курсивом) </cite> <code> - оформление исходных текстов программ (моноширинный шрифт) </code> <dfn> - новые символы и понятия (отображается курсивом) </dfn> - выделение важного фрагмента (полужирный) - выделение важного фрагмента (курсив) <blockquote> текст выводится на экран с увеличенным левым полем </blockquote> <bdo> - изменение направления текста. Используется с атрибутом dir. <bdo dir="rtl">текст, направление которого меняется</bdo> (Город массам дорог) <marquee> - текст представляется в виде бегущей строки. Для определения движения текста слева направо или справа налево используется атрибут direction. <marquee direction=“left, right”>текст</marquee> 13

Специальные символы Название символа Вид символа Неразрывный пробел Обозначение Длинное тире — Знак авторского права © Зарегистрированная торговая марка ® Знак меньше < < Знак больше > > «» « » ◦ ° Типографские кавычки Знак градуса Пример: « Наш институт — самый продвинутый © » 14

Понятие о блочных и встроенных элементах ЭЛЕМЕНТЫ (ТЕГИ): БЛОЧНЫЕ ВСТРОЕННЫЕ • начинаются с новой строки • позволяют только форматировать выделенный текст • занимают всю доступную ширину на экране • текст, идущий после блочного элемента, начинается с новой строки • могут содержать внутри себя инлайновые и другие блочные (не всегда) теги • может иметь отступы в любом направлении: margin-top, margin-bottom, margin-left, margin-right, padding-top, padding-bottom, padding-left, paddingright • можно явно задавать размеры width и height , <h 1>, <h 3>, <hr>, <div> (инлайновые, строковые) • не разрывают текст новыми строками • могут содержать внутри себя ТОЛЬКО другие встроенные теги (никогда не содержат блочных тегов внутри себя) , , , , и др. ! Абзац не позволяет вставлять внутрь себя блочные элементы 15

Понятие о блочных и встроенных элементах Lorem ipsum dolor sit amet, consectetur adipiscing elit. In metus ligula, mattis in laoreet eu, faucibus sed nibh. Sed dui elit, eleifend vitae vestibulum quis, lobortis a nisi. Ut vel nisl risus. Proin eu felis nibh, id faucibus massa. Duis id egestas magna. Vivamus rhoncus, justo vel rhoncus fringilla, lectus mauris auctor magna, id facilisis odio nunc vel turpis. Nam facilisis, orci nec convallis luctus, massa erat pretium orci, bibendum mollis purus nisl ac erat. Curabitur id urna tempus nisi mattis imperdiet. Proin et arcu quam, quis pharetra diam… абзац ; основной текст «разорван» 16

Понятие о блочных и встроенных элементах Lorem ipsum dolor sit amet, consectetur adipiscing elit. In metus ligula, mattis in laoreet eu, faucibus sed nibh. Sed dui elit, eleifend vitae vestibulum quis, lobortis a nisi. Ut vel nisl risus. Proin eu felis nibh, id faucibus massa. Duis id egestas magna. Vivamus rhoncus, justo vel rhoncus fringilla, lectus mauris auctor magna, id facilisis odio nunc vel turp… em font strong Основной текст не разрывается встроенными элементами; ширина их определяется содержимым 17

Понятие о блочных и встроенных элементах Lorem ipsum dolor sit amet, consectetur adipiscing elit. In metus ligula, mattis in laoreet eu, faucibus sed nibh. Sed dui elit, eleifend vitae vestibulum quis, lobortis a nisi. Ut vel nisl risus. Proin eu felis nibh, id faucibus massa. Duis id egestas magna. Vivamus rhoncus, justo vel rhoncus fringilla, lectus mauris auctor magna, id facilisis odio nunc vel turpis. Nam facilisis, orci nec convallis luctus, pretium massa erat pretium orci, bibendum mollis purus nisl ac erat. Curabitur id urna tempus nisi mattis imperdiet… Встроенные элементы вставляются внутрь блочных. Встроенные не содержат внутри себя блочных! 18

Скачать презентацию КИТ Web -технологии Лекция 2 Форматирование текста НОВОПОЛОЦК

Лекция2 Форматирование текста.pptx

Количество слайдов: 18