Выравнивание элементов в HTML. Абзацы в html и атрибут выравнивания Элемент списка на языке HTML записывается как
Для изображений стандарты не определяют принятого по умолчанию выравнивания по отношению к тексту и другим изображениям в той же строке – не всегда можно предсказать, как эти компоненты будут выглядеть.1 В HTML-документах изображения обычно расположены «в линию» только с одной строкой текста. Как принято в печатных средствах массовой информации текст их «обтекает», так что с изображением могут соседствовать несколько строк, а вовсе не одна.
К счастью, создатели документов способны отчасти управлять выравниванием изображений по отношению к окружающему тексту с помощью атрибута align тега . Стандарты HTML и XHTML определяют пять значений для атрибута align: left, right, top, middle, bottom. Значения left и right заставляют текст обтекать изображение, смещенное к соответствующему краю. Оставшиеся три выравнивают изображение в вертикальном направлении по отношению к окружающему тексту.
Все популярные броузеры, включая Opera, Firefox, Netscape и Internet Explorer, соглашаются с тем, что атрибут align=bottom является умолчанием вертикального выравнивания, и одинаково располагают картинки выше самого верхнего символа в строке текста, см. рис. 15.11.
В то же время броузеры расходятся во мнении, как располагать относительно текста изображения с атрибутом align=middle. На рис. 5.11 показано, что Netscape и Opera помещают изображение, ориентируясь на среднюю линию текста. Что касается броузеров Internet Explorer
Рис. 5.11. Стандартное выравнивание внедренных изображений
Рис. 5.12. Internet Explorer и Firefox совмещают среднюю линию изображения со средней линией самого высокого элемента, а не средней линией текста
и Firefox, они располагают изображение по средней линии самого высокого элемента, который не обязательно является текстовым (рис. 5.12).
Кроме того, броузеры в той или иной степени поддерживают пять дополнительных признаков вертикального выравнивания изображений: texttop, center, absmiddle, baseline и absbottom (кто не догадался об их смысле, поднимите руку):
Выражение align=texttop приказывает броузеру выровнять верхний край изображения с верхним краем самого высокого элемента текста в текущей строке. Иначе действует значение top, которое выравнивает верхний край изображения с верхним краем самого высокого элемента, текстового компонента или изображения в текущей строке. Если строка не содержит других изображений, выступающих над текстом, texttop и top имеют одинаковый эффект. Opera не поддерживает texttop, но другие популярные броузеры интерпретируют его строго в соответствии с этим описанием.
Впервые появившись в броузере Internet Explorer и Netscape, значение center интерпретируется в броузерах Internet Explorer, Netscape и Firefox точно так же, как и значение middle. Только не будем забывать, что значение middle каждый из них понимает по-своему. Opera игнорирует выражение align=center.
Если вы присвоите атрибуту align тега значение absmiddle, броузер выставит абсолютную середину изображения против абсолютной середины текущей строки. Не так действуют значения middle и center, которые выравнивают середину изображения с базовой линией текущей строки текста. В то время как Netscape и Opera не проводят разницы между absmiddle и middle, Firefox и Internet Explorer используют эти значения для избирательного выравнивания изображений по средним линиям. Иными словами, Firefox и Internet Explorer воспринимают признак absmiddle так же, как Netscape воспринимает middle.
Рис. 5.13. При выравнивании изображений с атрибутом alingn=absbottom броузеры принимают во внимание нижние выносные элементы
bottom и baseline (принимаются по умолчанию)
Значения bottom и baseline имеют тот же эффект, как если бы вы не включили атрибут выравнивания совсем. Броузер выравнивает нижний край изображения с базовой линией текста. Не следует путать это с действием значения absbottom, которое учитывает и те части букв, что спускаются ниже базовой линии.1 (Если вы все еще держите руку поднятой, можете ее опустить.)
Выражение align=absbottom предлагает броузеру выровнять нижний край изображения с истинным нижним краем текста в текущей строке. Истинный нижний край – это самая нижняя точка текста с учетом всех нижних выносных элементов (например, нижняя часть символа «y»), даже если таковых в строке нет. Базовая линия проходит по нижнему краю «v» в символе «y». Opera, носитель стандарта, игнорирует значение absbottom, а другие популярные броузеры обращаются с ним согласно описанию (рис. 5.13).
Используйте top и middle для совмещения пиктограмм, маркеров списков и других специальных изображений с близлежащим текстом. В других случаях align=bottom (выбирается по умолчанию) достигает лучшего внешнего вида. Выравнивая одно или несколько изображений в строке, выбирайте то значение атрибута, которое позволит добиться наилучшего внешнего вида вашего документа.
Приветствую Вас Друзья! Сегодня мы поговорим о теге абзаце и об атрибуте выравнивания . В общем, весь контент на странице должен быть разбит по абзацам. Содержимое абзаца пишется между тегами
Текст…
. Когда мы выводим 2 последовательных абзаца, то между ними формируется невидимое поле что отталкивает их друг от друга. Тег является блочным тегом поэтому он занимают всю ширину страницы.Для примера возьмем страницу с таким кодом:
Первый абзац: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Второй абзац: It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using "Content here, content here", making it look like readable English.
Давайте посмотрим, как выглядит это дело в браузере:
Наверняка вы заметили, что в коде страницы есть тег strong, этот тег делает текст жирным.
Атрибуты тегов
Для каждого тега можно, в некоторых случаях даже нужно указать атрибуты. Через атрибут мы сообщаем браузеру как именно отображать тот или иной элемент на странице.
Атрибут указывается внутри скобки открывающего тега и имеет следующий синтаксис: имя_атрибута="значение"
Атрибут выравнивания
Например, у нас на странице есть абзац, и мы хотим выравнивать его содержимое. Для этого мы внутри открывающего тега пишем атрибут align, который отвечает за выравнивание контента внутри абзаца, и задаем ему одно значение.
Содержимое параграфа.
У этого атрибута есть 4 значения:
1. Left – Выравнивает контент по левому краю. Это значение стоит по умолчанию. То есть если для абзаца не указываем атрибут align , то контент внутри абзаца по умолчанию, выровняется по левому краю. Это можно заметит в предыдущем примере.
2. Right – Выравнивает контент по правому краю.
Текст…
Вот как это выглядит в браузере:
3.Center - Выравнивает контент по центру страницы.
Текст…
4.Justify – Выравнивает контент по ширине страницы.
Текст…
Итоги урока:
Мы сегодня узнали, что такое абзац
в html. Абзацы используются очень часто в html.
Также узнали, что такое атрибут тега. И выучили атрибут выравнивания align.
Который может принять одно из следующих значений: left (значение по умолчанию),
right,
center,
justify.
Нажать кнопку
Для обращения к адресной книге необходимо
Нажать кнопку
Для редактирования HTML-документа, отображаемого в окне Internet Explorer необходимо воспользоваться пунктами меню
«Вид» – «Просмотр HTML-кода»
RGB – код красного цвета записывается как
RGB – код зеленого цвета записывается как
RGB – код синего цвета записывается как
RGB – код серого цвета записывается как
Язык HTML позволяет создавать
Тэг, по определению, это
оператор
Web-документ должен начинаться с тэга
Заголовок Web-документа открывается тэгом
Название Web-страницы начинается с тэга
Тело Web-документа начинается с тэга
Бегущая строка создается тэгом
Новый абзац создается тэгом
Прерывание строки создается тэгом
Список типа Definition List создается тэгом
Стандартный размер шрифта устанавливается тэгом
Для увеличения текста используется тэг
Для уменьшения текста используется тэг
Для создания мигающего текста используется тэг
Вид шрифта в тексте задаёт тэг
Цвет шрифта в тексте задаёт тэг
Направление просмотра в тексте задаёт тэг
Код языка для текста задаёт тэг
Значение атрибута ALIGN задаёт выравнивание влево
Значение атрибута ALIGN задаёт выравнивание вправо
Значение атрибута ALIGN задаёт выравнивание по центру
Значение атрибута ALIGN задаёт выравнивание вплотную к левому краю
В тэге TABLE атрибут UNIT определяет единицу измерения размеров в EN-пробелах
В тэге TABLE атрибут UNIT определяет единицу измерения размеров в пикселях
В тэге TABLE атрибут UNIT определяет единицу измерения размеров в процентах
Значение атрибута VALIGN задаёт выравнивание содержимого по верхней границе
Значение атрибута VALIGN задаёт выравнивание содержимого по нижней границе
Значение атрибута VALIGN задаёт выравнивание по вертикали по центру
Вставка рисунка на языке HTML записывается как
Элемент списка на языке HTML записывается как
Комментарий на языке HTML записывается как
Если головной файл Web-страницы включает один тег
Как минимум 3 файла
Если головной файл Web-страницы включает два вложенных тега
Разбита на 3 фрейма
Тег задает
Нумерованный список
Тег задает
Ненумерованный список
Тег
Ячейку таблицы
Тег
Элемент списка
Атрибут size может присутствовать
В теге
Атрибут bgcolor может присутствовать
В теге
Значение атрибута href – это
URL – адрес
Какая из следующих записей соответствует отображению на экране рисунка с подписью под ним
| Фото |
Указать имя фрейма в атрибуте target тега
Присвоить атрибуту target значение _blank
Тег используется
Для описания структуры и содержания сайта.
Бесплатно разместить сайт можно на сервере
Баннер – это
B2B – это
Модель электронной торговли коммерческих фирм друг с другом
B2C – это
Модель электронной торговли коммерческих фирм с потребителями
C2C – это
Модель электронной торговли физических лиц друг с другом
Электронная подпись – это
Специальная шифровальная процедура, обеспечивающая подтверждение авторства
Основой электронных денег является
Шифрование с открытым ключом
Баннер в баннерокрутилке движется
Перезагружается через равные промежутки времени
Электронный документооборот использует
Компьютеры в сети и специальные программы
Пароль
Конфиденциальный признак, подтверждающий право
Хостинг для личных сайтов
Оплачивается согласно правилам, установленным владельцем сервера
Каталоги ресурсов Интернета ведут
DNS-серверы корневой зоны
Эффективность баннера оценивается
Числом кликов на него
Что не входит в функции денег
Передача информации о владельце
СПИСОК ТЕРМИНОВ
ActiveX - набор технических средств и приемов, связывающий в единое целое разные инструменты, которые позволяют разработчикам Web-страниц
dpi (dot per inch) – число точек на дюйм. Единица измерения разрешающей способности различных устройств (принтеров, сканеров и т.д.)
"Escape-последовательности" - последовательности которые могут использоваться для кодирования символов, не входящих в таблицу ASCII и входящих в команды HTML.
FTP (File Transfer Protocol) - протокол передачи файлов, используемый в Интернет для копирования файлов с одной машины в сети на другую. Протокол передачи файлов применяется для обмена данными между компьютерами по сетям TCP/IP. Этот независимый от платформы протокол позволяет перемещать файлы между компьютерами с разными процессорами и операционными системами.
HTML (Hyper Text Mark-up Language - язык разметки гипертекста). Язык, используемый для создания гипертекстовых документов в сети Интернет.
HTTP (Hyper Text Transport Protocol - транспортный протокол передачи гипертекста) - протокол пересылки гипертекстовых файлов по Интернету. Для его применения на одном конце канала должна быть запущена клиентская программа HTTP, а на другом установлен HTTP-сервер.
IP (Internet Protocol - протокол Интернета) - первичный сетевой протокол TCP/IP, который предоставляет адресную и маршрутную информацию.
IP-адрес - уникальный физический адрес компьютера, подключенного к Internet, составляемый из четырех десятичных чисел, разделенных точками.
IRC (Internet Relay Chat) - популярная служба Internet, позволяющая пользователям общаться друг с другом, подключившись к одному серверу IRC. Беседа ведется в реальном времени путем набора своих высказываний на клавиатуре.
OLE (Object Linking and Embedding) - технология компании Microsoft, позволяющая включать в документ одного приложения (OLE- клиента) объекта, созданного в другом приложении (OLE - сервере) с возможностью редактировать этот объект средствами OLE-сервера.
PCI (Peripheral Component Interconnect - взаимодействие периферийных компонентов) - шина персонального компьютера, которая обеспечивает значительно большую производительность и более развитые возможности, чем шина ISA.
Plug and play (включи и работай) – стандарт для материнских плат, шин, контроллеров и операционных систем, позволяющий персональному компьютеру обнаруживать и настраивать оборудование в системе автоматически.
Shareware - бесплатные версии программ с ограниченным временем полноценного функционирования.
SMTP (Simple Mail Transfer Protocol – простой протокол передачи почты) - протокол Интернет для отправки электронной почты.
TCP (Transmission Control Protocol - протокол управления передачей) - ориентированный на соединение протокол, ответственный за переформатирование данных в пакеты и надежную доставку этих пакетов.
TCP/IP - базовый набор протоколов Internet, отвечающий за разбивку исходного сообщения на пакеты (TCP), доставку пакетов на узел адресата (IP) и сборку исходного сообщения (TCP).
Telnet - протокол Internet, который позволяет пользователю одного компьютера подключиться к другому удаленному компьютеру и работать с ним как на собственном компьютере, включая операции редактирования, перемещения, удаления.
URL (Uniform Resource Locator - универсальный адрес ресурса) – способ символьного указания адресов компьютеров, ресурсов и документов сети Интернет.
USB (Universal Serial Bus – универсальная последовательная шина) - концентратор, который позволяет подключать к одному порту 127 различных устройств. У шины USB стандартный разъем, к которому могут быть подключены все периферийные устройства.
Web-портал - Web-узел, предлагающий доступ к различным ресурсам Internet через большое количество систематизированных и регулярно обновляемых гиперссылок
Web-страница – отдельный документ с гипертекстовой информацией, расположенный на сервере, доступный для пользователей сети через службу WWW.
WWW (World Wide Web - всемирная паутина) – это служба, предоставляющая доступ к различным ресурсам Интернет – документам, графике, аудио и видеозаписям, использующая протокол HTTP и язык HTML.
WYSIWYG (What You See Is What You Get – что увидел, то и получил) – принцип точного соответствия изображения на экране дисплея и документа, отпечатанного на принтере.
Администратор системный - сотрудник, осуществляющий администрирование операционных систем, выполнение задач, связанных с настройкой и поддержанием работоспособности системного программного обеспечения серверов и маршрутизаторов, распределение ресурсов серверов между различными сервисами, поддержание единой базы пользовательских бюджетов, участие в поддержании и продвижении информационных и служебных сервисов, интеграция различных сервисов.
Адрес - закодированное обозначение пункта отправления или назначения данных.
АРМ (автоматизированное рабочее место) - персональный компьютер, оснащенный специализированным программным обеспечением (бухгалтерия, система автоматизированного проектирования).
Архитектура - концепция, определяющая модель, структуру, выполняемые функции и взаимосвязь компонентов сложного объекта;
Аутентификация (Authentication ) - установление подлинности, достоверности чего-либо (объекта или субъекта). Аутентификация является важным компонентом технологии безопасности работы в сети.
База данных - это поименованная совокупность структурированных данных, относящихся к определенной предметной области.
Баннер (Banner )– динамичная, яркая картинка на Web-странице, рекламирующая что-либо.
Браузер (Browser )- программа-клиент, облегчающая процессы перемещения между узлами глобальной сети, отображения, поиска, сбора и хранения информации. Термин происходит от английского слова "browse" – просматривать.
Гиперссылка (Hyperlink )– специальным образом выделенный фрагмент гипертекста, который содержит невидимый для пользователя указатель на другой сервер, сайт, документ или фрагмент документа. Переход на другой ресурс происходит при щелчке мышью на гиперссылке. При попадании на гиперссылку курсор принимает форму указывающей ладони.
Гипертекст (Hyper Text ) – это формат документа, который кроме текста, может содержать ссылки на другие гипертекстовые документы, картинки, музыку и файлы.
Глобальная сеть (WAN , Wide Area Network) - множество объединенных сетей, в котором для межсетевых коммуникаций используются сторонние средства коммуникации.
Дистрибутив - программа, предназначенная для начальной установки приложений.
Домен – группа серверов, находящихся в одном районе, организации, здании, этаже, подразделении.
Защита информации от несанкционированного доступа и модификации - разграничение функциональных полномочий и доступа к информации с целью сохранения конфиденциальности, целостности и готовности.
Зеркало – сервер, который является копией другого популярного, но далеко расположенного сервера. Используется для снижения нагрузки в сети и повышения скорости передачи информации. Содержимое зеркала периодически обновляется.
Идентификация - процесс отождествления объекта (сети, пользователя, системы, канала, устройства, программы, процесса) с одним из известных.
Инкапсуляция - вложение пакетов данных друг в друга.
Интернет – глобальная компьютерная сеть, объединяющая сети, шлюзы, серверы и компьютеры, использующие для связи единый набор протоколов.
Интерфейс (Interface ) - соединение двух устройств или сред, определяемое физическими характеристиками соединителей, параметрами сигналов и их значением.
Информационная система - организационно упорядоченная совокупность документов, массивов документов и информационных технологий, реализующих информационные процессы. Возможно и другое определение. Информационная система - совокупность данных (базы данных или базы знаний) и аппаратно-программных средств, предназначенных для автоматизации обработки данных (поиска, сортировки), решения задач, характерных для экспертных систем. Различают фактографические ИС (факты, например, о сотрудниках института) и документальные ИС (совокупность статей, книг, рисунков).
Информационное общество – это общество, в котором большая часть трудоспособного населения занимается получением, преобразованием, транспортировкой и хранением информации.
Информационно-поисковая система – это прикладная компьютерная среда для обработки, хранения, сортировки, фильтрации и поиска больших массивов структурированной информации.
Информационные технологии прикладные – технологии, основанные на использовании прикладного программного обеспечения.
Информация - это сведения, снимающие неопределенность об окружающем мире, которые являются объектом хранения, преобразования, передачи и использования.
Канал - средство или путь, по которому передаются сигналы или данные.
Кластер – минимальная единица размещения информации на диске, состоящая из одного или нескольких смежных секторов.
Клиент - компьютер в сети, который запрашивает ресурсы или услуги от других компьютеров в сети.
Клиент-сервер - концепция сети, в которой основная часть ее ресурсов (баз данных, файлов, запоминающих устройств, внешних устройств) сосредоточена в серверах, обслуживающих своих клиентов;
Компьютерный вирус - специально созданная небольшая программа, способная присоединяться к другим программам, размножаться (создавать свои копии) и выполнять нежелательные действия.
Криптография (Cryptography )- наука, занимающаяся разработкой методов шифрования – преобразований, которые делают текст нечитаемым и трудно раскрываемым без знания секретных ключей.
Локальная сеть (LAN , Local Area Network) - сеть в пределах предприятия, учреждения, одной организации.
Латинский алфавит № 1(Latin-1) - набор 8-разрядных однобайтовых символов ISO 8859/1.
Макрос - последовательность нескольких команд, вызываемых нажатием одной клавиши. Макросы используются для автоматизации многократно повторяющихся действий.
Маршрут - последовательность узлов сети, через которые передается информация от источника к приемнику.
Маршрутизаторы (Router )- стандартные устройства сети, работающие на сетевом уровне и позволяющее переадресовывать и маршрутизировать пакеты из одной сети в другую, а также фильтровать широковещательные сообщения.
Маршрутизация (Routing ) - процесс определения в сети пути, по которому блок данных может дойти до адресата. Маршрутизация обеспечивает преобразование адреса объекта назначения в перечень каналов, по которым этот блок данных проследует к адресату.
Мастер – специальная программа, которая с помощью нескольких диалоговых окон помогает выполнить определенную операцию.
Материнская плата (Motherboard ) – самостоятельный элемент компьютера, который управляет внутренними связями и с помощью системы прерываний взаимодействует с внешними устройствами.
Межсетевой экран (брандмауэр , Firewall ) – аппаратно-программное средство, которое предотвращает несанкционированный доступ в защищаемую сеть.
Модем (Modem ) - устройство, обеспечивающим преобразование цифровой информации компьютера в сигналы, передаваемые по телефонной линии, и обратно.
Модем звуковой – модем, работающий по выделенным или коммутируемым телефонным каналам связи со скоростью передачи данных от 300 бит/с до 52000 бит/с.
Модем широкополосный – модем со значительно большим частотным диапазоном и скоростью передачи данных, чем звуковой.
Мультимедийные средства - интерактивные средства, позволяющие одновременно проводить операции с неподвижными изображениями, видеофильмами, анимированными графическими образами, текстом, речевым и звуковым сопровождением.
ОЗУ (RAM , Random Access Memory - память с произвольным доступом) – устройство энергозависимой памяти компьютера на микросхемах для записи, считывания и хранения информации.
Операционная система (OS - Operating System)– это комплекс программ, обеспечивающих управление работой компьютера и его взаимодействие с пользователем.
Пакет данных (информационный пакет) – это блок данных, обрабатываемый сетевыми программами как единое целое.
Папка - объект операционной системы Windows, представляющий собой контейнер, который может содержать другие папки, программы, приложения, документы и ярлыки. Эквивалентным понятием в операционной системе MS-DOS являются термины директория и каталог.
Пароль - конфиденциальный признак, подтверждающий право пользователя, или прикладной программы на использование какого-нибудь ресурса.
Периферийное устройство (Peripheral Device ) - аппаратному компоненту в компьютере, с помощью которого он взаимодействует с внешней средой.
Пиксель - элементарная точка изображения на экране дисплея.
Пиктограмма - компактное графическое представление на экране программы, документа, файла, папки и т.п. Практически синонимами являются термины: значок, иконка.
Поисковая машина - программа, используемая на Web-узле для поиска информации.
Поисковый узел (поисковая страница) - Web-страница, позволяющая проводить поиск информации
Пользователь (User ) - человек, использующий компьютер для решения какой-либо прикладной задачи.
Почтовый ящик – область жесткого диска на почтовом сервере, предназначенная для записи писем. Владелец почтового ящика может с помощью специальной программы-клиента просматривать, копировать, перемещать, удалять содержимое ящика. Почтовому ящику присваивается уникальный электронный адрес, который позволяет каждый почтовый ящик отличать от других.
Прокси-сервер – компьютер, который используется для снижения нагрузки в сети и повышения быстродействия.
Протокол - стандарт, определяющий поведение функциональных блоков при передаче данных.
Рабочая станция - абонентская система, специализированная на решении определенных задач пользователя.
Разрядность шины (Bus Width ) - количество одновременно передаваемых по шине бит.
Распределенная база данных - база данных, содержимое которой находится в нескольких абонентских системах сети.
Региональная сеть (MAN , Metropolitan Area Network) - сеть, в которой используются технологии глобальных сетей и которая соединяет локальные сети внутри конкретного географического региона, например, города.
Релевантность - степень соответствия отобранной информации критериям поиска.
Сайт - совокупность Web-страниц, тематически связанных между собой и расположенных на одном сервере.
Сервер (Server ) – 1. Программа, предоставляющая возможность использовать свои возможности (ресурсы) другой программе - клиенту. 2. Компьютер, предоставляющий услуги другому компьютеру - клиенту.
Серверное программное обеспечение (Server Network Software ) - разработанный для серверов тип программного обеспечения, которое обеспечивает хранение ресурсов для доступа клиентов.
Сетевые приложения (Network Applications ) - усовершенствованные программы, доступные через коммуникационную систему сети.
Сеть одноранговая (Peer-to-Peer Network ) - тип сети, где каждый компьютер может быть клиентом для других компьютеров, а также действовать в качестве сервера.
Сеть с выделенным сервером (Server-based Network ) – тип сети, где требуется присутствие сервера как для обеспечения служб и ресурсов, так и для управления доступом к этим службам и ресурсам.
Скрипт – небольшой набор инструкций (программа или макрос), служащая для выполнения определенного задания. Для составления скриптов чаще всего используются языки Java, Visual Basic, JavaScript и Perl.
Трафик - нагрузка, обмен информацией, поток сообщений.
Центральный процессор (CPU , Central Processing Unit) – центральное устройство компьютера, которое выполняет операции по обработке данных и управляет периферийными устройствами компьютера.
Чипсет (Chipset ) - набор микросхем, установленных на материнской плате.
Шина (Bus ) - cпециализированный набор параллельных проводников в персональном компьютере, служащий для перемещения данных между центральным процессором и периферийными устройствами.
Шлюз (Gateway ) - специфический по используемому программному обеспечению узел, соединяющий сети, несовместимые иным способом. Преобразует данные для обеспечения совместной работы сетей.
Электронная почта (E-mail ) - служба передачи и приема текстовых сообщений или двоичных файлов в качестве вложенных с компьютера одного пользователя на компьютер другого пользователя средствами Интернет.
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Выравнивание содержимого контейнера
Синтаксис
Значения
center Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно. left Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст. right Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится. Но где вы у нас в стране видели такие сайты. justify Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.Значение по умолчанию
HTML 4.01 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Выравнивание элементов с помощью атрибута align
Здравствуйте, уважаемые читатели блога сайт. В этой статье мы продолжаем изучать основы стилевой разметки CSS и рассмотрим свойства vertical-align, text-align, text-indent и некоторые другие, предназначенные для оформления текста html.
Выравнивание текста с помощью CSS
Начнем с атрибутов стиля, управляющих выводом текста в блочных элементах. Начнем со свойства text-align, которое является фактически заменой атрибута align (используется для выравнивания содержимого html-элементов, например абзацев p).
Свойство стиля text-align задает горизонтальное выравнивание текста и имеет всего четыре возможных значения:
Доступные значения этого правила определяют выравнивание, соответственно: left — по левому краю, right — по правому краю, center — по центру и justify — по ширине страницы (одновременно по левому и правому краю за счет увеличения расстояния между словами). Для примера, текст этой статьи выравнен по ширине страницы (если вы заметили у него ровные границы и слева и справа) с помощью правила text-align:justify.
По умолчанию, горизонтальное выравнивание выполняется по левому краю, поэтому специально указывать text-align:left не обязательно, если в родительских элементах не было указано другого выравнивания.
Примеры использования свойства:
Следующее свойство CSS text-ident задает отступ для красной строки , например для текста в теге абзаца p. Это правило также, как и text-align, применимо только для блочных элементов. Синтаксис:
Здесь допускаются абсолютные и относительные величины отступа. Абсолютные значения (px — пикселы, em, ex и др.) можно указывать как со знаком плюс, так и со знаком минус. Относительная величина обычно задается в процентах (%). Относительное значение рассчитывается от ширины области, которая отведена под текст. Так, css правило text-indent:50% задаст красную строку равную половине длины этой самой строки. По умолчанию отступ «красной строки» равен нулю. Пример:
Далее рассмотрим вертикальное выравнивание — свойство vertical-align . Это свойство применимо уже для всех html элементов и практически для всех означает выравнивание между собой строчных элементов с текстом относительно их базовой линии. Кроме тегов таблицы td и th, в которых по вертикали будет выравниваться весь контент. Синтаксис:
Рассмотрим каждое значение подробнее:
- baseline — выравнивание фрагмента текста по базовой линии родительского элемента. Это значение по умолчанию;
- sub — фрагмент текста изображается в виде нижнего индекса или подстрочным для родительского элемента;
- super — фрагмент текста изображается в виде верхнего индекса или надстрочным для родительского элемента;
- top — выравнивание фрагмента текста по верхнему краю родительского элемента;
- text-top — выравнивание фрагмента по верхнему краю текста родительского элемента;
- middle — выравнивание центра фрагмента текста по центру родительского элемента;
- bottom — выравнивание фрагмента текста по нижнему краю родительского элемента;
- text-bottom — выравнивание фрагмента по нижнему краю текста родительского элемента;
На рисунке ниже можно посмотреть поведение фрагментов теста при различных значениях свойства vertical-align в браузере Internet Explorer 11:
Кроме вышеперечисленных значений, можно указывать числовые значения. Так, правило CSS vertical-align:0 будет означать тоже самое, что и запись vertical-align:baseline. А правило vertical-align:10px будет смещать текст вверх на 10 пикселей относительно базовой линии. Для смещения текста вниз значение необходимо указывать с минусом.
Сдвиг также можно задавать в относительных единицах измерения, например в em и в ex или в процентах.
Для вертикального выравнивания содержимого ячеек таблицы в vertical-align следует использовать значения:
- top — для выравнивания содержимого по верхней границе ячейки;
- bottom — для выравнивания содержимого по нижней границе ячейки;
- middle — для выравнивания по центру ячейки (используется по умолчанию).
Для достижения нужного результата, обычно приходится экспериментировать с различными значениями свойства стиля vertical-align. Многочисленные возможные значения дают слишком разный результат в различных случаях.
Параметры white-space и word-wrap, управляющие разрывом строк
На очереди параметр white-space, который отвечает за отображение пробельных символов на html странице.
Как мы знаем, по умолчанию браузер объединяет все подряд идущие пробельные символы: пробелы, переносы строк и символы табуляции, — в один пробел. Исключение тег «pre» , помещенный в него текст отображается как есть, со всеми пробелами.
Свойство white-space имеет следующий синтаксис:
Понятно, что значение normal используется по умолчанию и оставляет все как описывалось выше, все подряд идущие пробелы объединяются в один и перенос строк устанавливается автоматически.
Использование значения «pre», будет полной аналогией при применении тега «pre». Браузер будет отображать страницу с учетом всех лишних пробелов и переносов, как они были добавлены разработчиком. Если строка текста получиться слишком длинной, то будет добавлена горизонтальная полоса прокрутки.
Значение nowrap запрещает браузеру переносить строки и текст отображается одной строкой. Единственное, добавление тега «br» позволит перенести текст на новую строку.
Значение pre-wrap сохраняет все последовательности пробелов и переносов строк, но если строка не помещается в заданную область, то браузер автоматически переносит текст на новую строку.
Ну и значение pre-line преобразует пробелы в один пробел, переводы строк сохраняются и браузер может разорвать слишком длинные строки, чтобы избежать горизонтальной прокрутки.
Пример использования:
Далее рассмотрим параметр word-wrap , который поваляет указать переносить или нет длинные слова, которые не помещаются в заданную область. Это свойство применяется не часто, но иногда без него не обойтись:
word-wrap: normal|break-word
Значение normal указывает браузеру, что текст можно разрывать только по пробелам и это обычное поведение браузера. А значение break-word разрешает браузеру вставлять разрывы строк внутри слов. Пример:
Параметры тени у текста — свойство text-shadow
Для любителей различных украшательств в стандарте CSS3 появилась возможность задавать тень у текста. Грамотное использования свойства text-shadow позволяет заметно оживить web страницу. Синтаксис:
Значение none отменяет добавление тени у текста и установлено по умолчанию.
Цвет тени задается в любом доступном CSS формате и является не обязательным параметром. По умолчанию цвет тени совпадает с цветом текста.
Горизонтальное смещение тени можно задавать в любой единице измерения поддерживаемой CSS. При положительном значении тень будет располагаться правее текста, при отрицательном — левее. Нулевое значение расположит тень прямо под текстом и имеет смысл только если задано размытие тени.
Вертикальное смещение тени тоже можно задавать в любой единице измерения поддерживаемой CSS. При положительном значении тень будет смещаться ниже текста, при отрицательном — выше. Нулевое значение расположит тень прямо под текстом.
В любой единице измерения задается и радиус размытия тени . Чем больше это значение, тем шире становится тень и сильнее сглаживается. Если этот параметр не установлен, то значение размытие предполагается равным нулю. Так как алгоритм сглаживания обычно у разных браузеров отличается, то и вид тени может несколько отличаться в зависимости от браузера.