Сегодня мы рассмотрим: Настоящие ценители музыки знают, что для качественного...
Приведем описание тегов физического форматирования. Часть из них не рекомендуется к использованию спецификацией HTML 4.0 по приведенным выше причинам. Некоторые теги отменены (deprecate) спецификацией HTML 4.0, однако они продолжают поддерживаться браузерами.
Тег
Тег отображает текст полужирным шрифтом. В большинстве случаев рекомендуется вместо тега использовать тег логического форматирования . Например:
Это полужирный шрифт.
Рис. 1.2. Примеры физического форматирования текста (браузером Netscape)
Тег
Тег отображает текст курсивом. Для большинства случаев вместо этого тега рекомендуется использовать теги , , или , поскольку последние лучше отражают назначение выделяемого текста. Например:
Выделение курсивом
Тег
Тег отображает текст моноширинным шрифтом. Для
большинства случаев вместо этого тега лучше использовать теги ,
или . Пример:
Это моноширинный шрифт.
Тег
Тег отображает текст подчеркнутым. Отмененный тег. Вместо него рекомендуется использовать теги или . Например:
Пример подчеркивания текста.
Теги и
Теги и отображают текст, перечеркнутый
горизонтальной линией. Отмененный тег. Вместо него следует использовать тег
. Например:
Пример зачеркнутого
текста.
В настоящее время тег поддерживается не всеми
браузерами, поэтому пока рекомендуется использовать в сочетании
с тегом . А именно, внутрь тега-контейнера можно вложить
пару тегов
....
Тег
Тег выводит текст шрифтом большего (чем непомеченная
часть текста) размера. Вместо данного элемента лучше использовать
или теги заголовков, например,
Шрифт большего размера.
Тег
Тег выводит текст шрифтом меньшего размера. Поскольку в HTML нет тега, противоположного по действию тегу , то для этих целей можно применять тег . Большинство браузеров поддерживают вложенные теги , однако использовать такой подход не рекомендуется. Например:
Шрифт меньшего размера.
Тег
Тег сдвигает текст ниже уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для математических индексов. Например:
Пример шрифта для нижнего индекса.
Тег
Тег сдвигает текст выше уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для задания степеней чисел в математике. Например:
Пример шрифта для верхнего индекса.
Тег
Тег
Тег
Тег-контейнер является аналогом тега уровня
блока Браузер Microsoft Internet Explorer дополнительно разрешает
использование следующих параметров тега: DIR, DATAFLD, DATAFORMATAS, DATASRC.
Описание параметров можно найти во второй части книги. Рис. 1.3.
Использование вложенных тегов форматирования
текста
Теги форматирования могут быть вложенными друг в друга.
При этом нужно внимательно следить, чтобы один контейнер находился целиком в
другом контейнере. На рис. 1.3 показан пример использования вложения элемента
курсива в элемент полужирного шрифта. Использован следующий фрагмент HTML-кода: Это полужирный шрифт. Это курсив. А здесь текст полужирный и курсивныйВ> Тег
Тег указывает параметры шрифта. Он относится
к тегам физического форматирования уровня текста. Назначение параметров шрифта непосредственно в тексте документа
нарушает основную идею разделения содержательной части документа и описания
формы представления документа. Поэтому в спецификации HTML 4.0 данный тег, а
также тег Несмотря на эти грозные предупреждения, видимо, для самых
простых документов физическое форматирование можно считать допустимым. Кроме
того, начинать обучение основам форматирования проще всего именно с правил непосредственного
указания форматов элементов. До стилевого оформления начинающий разработчик
должен еще дорасти. Тег относится к последовательным элементам,
поэтому не может включать в себя элементы уровня блока, например, Или Для тега могут задаваться следующие параметры: FACE, SIZE
и COLOR. Заметим, что браузер Netscape допускает также использование двух дополнительных
параметров: POINT-SIZE и WEIGHT, описание которых опускаем. Параметр FACE служит для указания типа шрифта, которым
программа просмотра пользователя будет выводить текст (если такой шрифт
имеется на компьютере). Значением данного параметра служит название шрифта,
которое должно в точности совпадать с названием шрифта, имеющего у пользователя.
Если такого шрифта не будет найдено, то данное указание будет проигнорировано
и будет использован шрифт, установленный по умолчанию. Можно указать как один, так и несколько названий шрифтов,
разделяя их запятыми. Это весьма полезное свойство, так как в разных системах
могут быть почти идентичные шрифты, называющиеся по-разному. Другим важным
качеством является задание предпочтения использования шрифтов. Список шрифтов
просматривается слева направо. Если на компьютере пользователя нет шрифта,
указанного в списке первым, то делается попытка найти следующий шрифт и
т. д. Приведем пример использования параметра FACE: Пример задания названия шрифта. На рис. 1.4 показано отображение примера браузером
Netscape. В примере в качестве предпочитаемого указывается шрифт Verdana,
при его отсутствии будет использован шрифт Arial и т. д. Рис. 1.4.
Отображение примера браузером Netscape
Этот параметр служит для указания размеров шрифта в
условных единицах от 1 до 7. Конкретный размер шрифта зависит от используемой
программы просмотра. Принято считать, что размер "нормального"
шрифта соответствует значению 3. Настройки размеров шрифта, используемых по умолчанию, а
также величины абсолютного изменения размеров шрифта, зависят от браузеров.
На рис. 1.5 показано окно настройки браузера Netscape, в котором задаются шрифты,
используемые по умолчанию. Размер шрифта указывается как абсолютной величиной (SIZE=2),
так и относительной (SIZE=+1). Последний способ часто используется в сочетании
с заданием базового размера шрифта с помощью тега Примечание
При указании размеров шрифтов записи типа "2"
и "+2" (в отличие от большинства языков программирования, в которых
унарный знак "+" можно опускать) дают принципиально разный результат.
Приведем пример, в котором использованы различные способы
назначения размеров шрифтов. Отображение примера показано на рис. 1.6. Рис. 1.5.
Окно настройки параметров шрифтов браузера
Netscape
Рис. 1.6.
Назначение размеров шрифтов
Шрифт размера 1 Шрифт размера 2 Шрифт размера 3 Шрифт размера 4 Шрифт размера 5 Шрифт размера 6 Шрифт размера 7 Этот параметр устанавливает цвет шрифта, который может
задаваться с помощью стандартных имен или в формате #RRGGBB. Приведем пример
документа с разноцветным текстом. Текст зеленого цвета Текст красного цвета Тег Тег Примечание
Тег Заметим, что для тега В качестве параметров могут использоваться точно такие
же параметры, что и для тега , а именно:
FACE, SIZE и COLOR. Назначение и правила записи параметров
аналогичны. Примечание
Браузер Netscape не допускает применение параметра
FACE тега Приведем пример использования тега Текст, записанный шрифтом по умолчанию. Шрифт размера 2. Шрифт размера 4. Текст после таблицы В приведенном примере дважды переопределяется размер шрифта,
используемого по умолчанию. Изначально он равен 3 (по умолчанию). Затем устанавливается
равным 2, далее - 4. Обратите внимание на отображение данного примера (рис.
1.7). Видно, что для таблиц назначение тега Рис. 1.7.
Отображение примера с тегом Указую господам сенаторам, чтобы речь держать не по-писаному, В
настоящее время, текст в HTML
является основным способом подачи информации. Подавляющее большинство сайтов в Интернете состоят именно из текстового контента. Это означает, что можно при умении, как минимум, читать, а как максимум - писать (в каждой шутке есть доля правды). Д
опустим, ты набрал текст в редакторе, произвел его форматирование (выделил какие-то слова жирным
или курсивом
), либо сделал с ним что-то ещё. Затем скопировал и вставил текст в свой html-код. Открываешь html-страницу в , а всё твоё форматирование куда-то исчезло. Происходит это потому, что текстовый редактор для форматирования текста применяет свои спецсимволы (по сути те же теги, только используются в текстовых редакторах), которые ты по умолчанию не видишь. В
окне редактора ты видишь только текст. А на самом деле там есть ещё управляющие спецсимволы, с помощью которых редактор «понимает», как ему отображать тот или иной кусок текста. Т. е., повторюсь, это то же самое, что и , только «заточенные» под использование в текстовых редакторах. Н
о, не смотря на это, существует способ перенести текст из редактора и вставить его в html-код в исходном виде. И раз уж об этом зашла речь, то форматирование текста и начнем изучать с этого тега. Итак, приступим. П
редварительно отформатированный текст можно вставить в html-страницу с помощью тегов и . Браузер покажет текст, заключенный между этими тегами в том виде, в каком он был в текстовом редакторе. Я, если честно, ни разу не использовал этот тег на практике, поэтому что-то ещё про него сказать не могу. С
амыми популярными тегами для форматирования текста являются: H2
O
Даст нам вот такую формулу
(a+b)2
, Получаем
(a+b) 2
. В
се эти теги для форматирования текста можно использовать как по одному, так и несколько вместе. Достигается это путем вложения тегов друг в друга. Например, следующий html-код: H2O - это формула воды.
при просмотре H 2 O
- это формула воды.
В
HTML абзацы создаются с помощью тега . Использование этого тега приводит к вставке одной пустой строки и размещению находящегося за ним видимого элемента html-страницы в следующей строке. Например, если мы напишем: Т
о выглядеть это будет так: И
спользовать закрывающий тег не обязательно, т. к. браузер считает, что начало следующего абзаца означает конец предыдущего, но для избежания путаницы желательно. Д
ля того, чтобы выровнять текст используется атрибут align
с возможными значениями center, left, right
и justify
. Он, соответственно, выравнивает текст по центру, по левому краю, по правому краю и одновременно по двум краям сразу. Например, html-код: align="center">Текст по центру
выровняет текст по центру: Текст по центру
А
этот код: right"> выровняет текст по правому краю Выравнивание текста по правому краю
Е
сли атрибут align
не используется, то текст будет выровнен по левому краю. Это происходит по умолчанию. Пример, код: выровнит текст по левому краю По умолчанию текст выравнивается по левому краю
Е
сли нужно обеспечить переход на новую строку без вставки пустой строки (это происходит, когда ты в текстовом редакторе нажимаешь Enter), то используется тег 1. Первая строка. в браузере будет выглядеть так: 1. Первая строка. У
В
изуально разделить части текста можно ещё при помощи тега . Этот тег создает на странице разделительную полосу (например, как зелёная в начале этой статьи). Тег имеет следующие атрибуты: Н
апример, html-код: align="center" size="5" width="50%" color="#3399ff">
в браузере примет вид Ш
ирину и толщину можно указывать как в пикселах (тогда величина будет постоянной), так и в процентах (тогда величина будет меняться в зависимости от разрешения экрана). Д
ля задания названий разделов и подразделов в HTML используются теги заголовков
. Существуют шесть уровней заголовков и обозначаются они так: З
аголовки выделяются полужирным шрифтом и отделяются от остального текста пустой строкой. Самый крупный заголовок (им выделено название этого урока), а самый маленький . Теги заголовков имеют атрибуты: Н
апример, код HTML: align="center" title="Всплывающая подсказка. Чтобы увидеть, наведи мышь на заголовок.">Заголовок 4 уровня
в браузере будет выглядеть так: Д
ля форматирования непосредственно шрифтов, в HTML есть тег . У этого тега существуют следующие атрибуты: В
HTML списки создаются с помощью тегов и . В первом случае создается упорядоченный (нумерованный), во втором неупорядоченный (маркированный) списки. Каждый элемент списка выделяется тегом . Браузер отображает элементы списка с новой строки в виде столбца с отступом и маркерами. Вид маркера определяется атрибутом type
. В
нумерованном списке маркеры (значения атрибута type) такие: Н
апример, HTML-код браузер покажет так. При создании сайта
постоянно возникает необходимость
изменения шрифта текста для самых разных
частей и элементов HTML-страниц, ведь это
не только добавляет сайту уникальность
и стиль, но и повышает качество восприятия
информации. В HTML для этого существуют
специальные теги. Изменение стилей
шрифтов
Изменять стили
написания шрифтов в HTML можно далеко не
одним способом: ... и
... - выделяют текст
полужирным
шрифтом. ... и
... - выделяют текст
курсивом
. ... -
выводит текст в верхнем
индексе,
например E = mc 2 . ... -
выводит текст в нижнем
индексе,
например H 2 SO 4 . Все эти теги
являются встроенными
(inline, уровня строки)
,
то есть не создают переносы строк до и
после себя, а располагаются на одной
строке. Содержать они могут тоже только
встроенные элементы, поэтому их свободно
можно вкладывать друг в друга. Самое
главное не забывайте о правильной
вложенности: тег, открытый раньше -
должен быть закрыт позже. Для выделения
жирным и курсивом существует по два
тега. Дело в том, что обычные браузеры
отображают содержимое этих тегов
одинаково, а вот невизуальные (голосовые)
браузеры могут по особенному акцентировать
текст внутри и . Поэтому,
если вы хотите выделить какие-то слова
или фразы, чтобы привлечь читателя, то
лучше использовать именно эти теги,
хотя, по большому счету, разницы нет. Существуют еще
теги <тег
style="text-decoration:underline">...тег> -
подчеркивает
текст. <тег
style="text-decoration:overline">...тег> -
надчеркивает
текст. <тег
style="text-decoration:line-through">...тег> -
зачеркивает
текст. Пример изменения
стилей шрифтов Жирный
шрифт.Курсив. Жирный
курсив. H2SO4
- формула серной кислоты написанная
курсивом. Подчеркнутый
параграф
текста. Обычный
текст, зачеркнутый
жирный. Результат в браузере Style -
это абсолютно обычный атрибут тегов,
но относится он к Каскадным
таблицам стилей (CS
S).
В далеком прошлом все функции по
структуризации HTML-страницы в целом и
по внешнему представлению ее каждого
элемента в отдельности (цвет, форма,
положение на странице и т.д.) брал на
себя язык HTML. Но потом разработчики
языка решили разграничить эти функции
и создали CSS. Соответственно многие теги
или атрибуты тегов стали устаревшими.
есть. Общий синтаксис атрибута style
следующий: <тег style="свойство
CSS:значение">...тег> Тег или
что делать, когда нет нужных тегов
Тег ....
Этот тег тоже является встроенным
(inline, уровня строки)
и может содержать любые встроенные
теги, но главное не это. Сам по себе
, без атрибутов, не добавляет
никаких изменений ни тексту, ни тегам
находящимся внутри него. А создан он
был специально для стилей, то есть, по
сути, для атрибута style. Именно благодаря
этому атрибуту, а вернее его разным
значениям, у появляются те или
иные свойства. Обычный
текст без изменений. Еще
обычный
текст. Подчеркнутый. Зачеркнутый. Результат в браузере Меняем имя
(гарнитуру) шрифта
Вот список самых
распространенных шрифтов, которые
практически наверняка есть на компьютере
каждого пользователя: По умолчанию
практически все браузеры используют
шрифт "Times
New Roman", а
чтобы его изменить используется все
тот же атрибут style, который можно применить
внутри любого тега. Общий синтаксис
указания следующий: <тег
style="font-family:имя шрифта, семейство">...тег> Если имя шрифта
состоит из нескольких слов, то его
необходимо закрывать в одинарные
кавычки. Допускается указывать не одно,
а несколько имен шрифтов через запятую
и тогда, если первого шрифта на компьютере
нет - будет использован второй,
третий и т.д. Чтобы изменить
шрифт на всей странице - достаточно
указать атрибут style в теге Пример изменения
имени шрифтов Это шрифт
Arial, если его нет, то Verdana, а если и его нет, то
любой другой из sans-serif. Это
Comic Sans MS илилюбой
cursive. Этоопять
Arial, Verdana илилюбой
sans-serif. А это Courier или любой
monospace. Результат в браузере Меняем размер
шрифта
Язык HTML ограничен
всего семью размерами шрифтов, что,
согласитесь, очень мало для хорошего
сайта. Поэтому для изменения размеров
все давно используют CSS, и сейчас вы тоже
этому научитесь. В CSS есть порядка
десяти единиц измерения, но мы с вами
рассмотрим только три самых популярных -
это пункты (pt), пиксели (px) и проценты
(%). Итак: pt
- Пункты.
Один пункт равен 1/72 дюйма, а один дюйм -
2.54см. Следовательно, 1pt = 0,03527778см. Это
абсолютная величина, так как размер
заданный в пунктах не зависит ни от
чего. px
- Пиксели.
Измеряется в пикселях монитора
компьютера. Пиксель - это самая
маленькая точка на мониторе и она
является относительной величиной, так
как ее размер зависит от текущего
разрешения экрана и размера самого
монитора. %
- Проценты.
Высчитывается в процентах, где за 100%
берется значение родительского тега,
а если оно не указано, то значение в
браузере по умолчанию. Это тоже
относительная величина, ведь размер
шрифта родителя может быть абсолютно
разный, да и размер шрифта в браузере
пользователи могут свободно менять. Чтобы указать
размер шрифта используется атрибут
style и его можно указать внутри любого
тега. Общий синтаксис такой: <тег
style="font-size:размер">...тег> Как и в случае с
именами шрифтов, чтобы изменить размер
шрифта на всей странице - достаточно
указать атрибут style в теге Пример изменения
размера шрифтов Этот размер
шрифта составляет 90% от размера в браузере по
умолчанию. Этот размер
составляет 90% уже от размера в теге BODY. Размер шрифта
заголовка составляет 120% от размера в
BODY. Это опять 90%
от размера в браузере по умолчанию. Размер этого шрифта
15 пунктов. Результат в браузере Если для всего
параграфа нужен шрифт Arial с размером в
80%, то надо написать так: Текст
параграфа. Текст
параграфа. Или вообще вот
так. Текст параграфа. Первые два варианта
в принципе верны, то последний вообще
с ошибкой, так как, если помните, в одном
теге не может быть двух одинаковых
атрибутов. А теперь пора вспомнить, что
style - не просто атрибут, а атрибут
относящийся к CSS: Текст
параграфа. Гораздо проще.
Самое главное не забывать ставить между
соседними стилями точку с запятой (;) и
брать все это «хозяйство» в двойные
кавычки (" "), иначе применится
только первый стиль, а остальные браузер
проигнорирует. Цвет шрифта и
цвет знакоместа
В языке HTML у
некоторых тегов есть специальные
атрибуты меняющие цвет, например bgcolor
(цвет фона). Но, во-первых, эти атрибуты
являются устаревшими
(думаю помните, что это значит), а
во-вторых, как я уже сказал, они есть не
у всех тегов.
И вот, допустим, вы захотели изменить
цвет фона у параграфа текста. И как вы
это будете делать, ведь у тега Нет
такого атрибута? Поэтому, как и в
предыдущих уроках, мы будем использовать
стили (CSS), то есть универсальный атрибут
style, который позволит нам менять цвет
там, где мы захотим. Как можно указывать
цвет?
Цвета в HTML (и CSS)
можно указывать несколькими способами,
я покажу вам самые популярные и
распространенные: Имя цвета
- В HTML имеется большой список цветов
с именами
и для того, чтобы указать цвет, достаточно
написать его имя на английском, например:
red, green, blue. HEX-код цвета
- Абсолютно любой цвет можно получить,
смешав в разных пропорциях три базовых
цвета - красный, зеленый и синий.
HEX-код - это три пары шестнадцатеричных
значений отвечающих за количество этих
цветов в каждом цвете. Перед кодом цвета
необходимо поставить знак решетка (#),
например: #FF8C00, #CC3300 и так далее. Раньше в HTML
рекомендовалось использовать только
безопасную
палитру цветов
,
которая гарантированно отображалась
во всех браузерах и на всех мониторах
одинаково. Но сегодня ей ограничиваться
совершенно не обязательно, так как и
браузеры и мониторы давно научились
правильно отображать гораздо больший
список цветов. А вот указывать цвета по
именам я вам как раз и не рекомендую,
дело в том, что многие браузеры до сих
пор с одним и тем же именем связывают
разные цвета. Как изменить
цвет текста?
Чтобы изменить
цвет текста в любом элементе HTML-страницы
надо указать внутри тега атрибут style.
Общий синтаксис следующий: <тег style="color:имя
цвета">...тег> - указание
цвета текста по имени. <тег
style="color:#HEX-код">...тег> -
указание цвета текста по коду. И как обычно, чтобы
изменить цвет текста на всей странице -
достаточно указать атрибут style в теге
Пример изменения
цвета текста Синий текст
параграфа. Зеленыйкурсив. Красныйтекст. Результат в браузере Как изменить
цвет фона?
Цвет фона любого
элемента страницы меняется также с
помощью атрибута style. Общий синтаксис
такой: <тег
style="background:имя цвета">...тег> -
указание цвета фона по имени. <тег
style="background:#HEX-код">...тег> -
указание цвета фона по коду. Пример изменения
цвета фона Параграф. Жирныйтекст. Обычныйтекст. Результат в браузере Когда меняешь цвет
фона элементов, то становится очень
хорошо видно, какую на самом деле ширину
занимает каждый из них. Как видите,
блочные элементы, такие как параграфы
и заголовки, в основном занимают всю
доступную ширину, даже если они содержат
очень мало текста, а вот встроенные
(inline) теги по ширине равны своему
содержимому. Кстати, последний параграф
в примере тоже занимает всю ширину,
просто его фон прозрачный, поэтому
сквозь него виден фон страницы. Вообще,
фон всех элементов на странице, в которых
он не указан явно - прозрачный, вот
и все. Теги выравнивания
содержимого теста относительно страницы
Для того, чтобы
выровнять содержимое HTML-элемента,
необходимо атрибуту style присвоить одно
из следующих значений: text-align:center
- Выравнивание каждой строки по центру
элемента, например параграфа. text-align:left
- Каждая строка вплотную прижимается
к левой стороне элемента (это значение
по умолчанию). text-align:right
- Каждая строка прижимается к правой
стороне. text-align:justify
- Выравнивание сразу по левой и правой
сторонам элемента. Объясню. Обычно у
элемента, например параграфа, одна
сторона текста всегда ровная, а другая -
«рваная», так как длины строк получаются
немного разными. А когда мы используем
значение text-align:justify, то каждая строка
равномерно распределяется по ширине.
В случае необходимости между словами
браузер добавляет дополнительные
пробелы, а первое и последнее слово
строки всегда прижаты к соответствующим
сторонам, поэтому получается ровный с
обеих сторон блок. Пример выравнивания
содержимого тегов Текстпараграфаприжимаетсявправо. Параграфпоцентру. Результат в браузере Вообще, горизонтальное
выравнивание применяется только к
блочным тегам и ячейкам таблицы (о них
поговорим позже). Хотя, с другой стороны,
даже если вы попытаетесь, то не сможете
применить его к встроенным (inline). Теги, выделяюцие
цитаты
Рассмотренные
здесь теги не так часто используются в
HTML-страницах, но все же иногда без них
не обойтись. Тег Тег
используется в
HTML для выделения так называемых «длинных
цитат», например одного или нескольких
параграфов. Этот тег является блочным
и может содержать блочные теги, но не
может содержать встроенные. Кроме этого
он добавляет такие же как у параграфов
внешние поля сверху и снизу, но еще
добавляет и боковые поля, благодаря
чему происходит визуальное выделение
цитируемого текста. Пример использования
тега BLOCKQUOTE Для чего нужен
тег BLOCKQUOTE? Вот что нам об этом говорит
сайт Сеодон.ру: Очень часто
тег BLOCKQUOTE используют не по прямому
назначению - выделение
цитируемого текста. А только ради боковых
отступов, которые он создает. В
принципе, подобное применение этого
тега не противоречит синтаксису
HTML, главное чтобы BLOCKQUOTE содержал блочные
теги. Но все же лучше подобным
образом его не использовать, так как
BLOCKQUOTE предназначен
именно для выделения длинных цитат. Результат в браузере Тег А вот тег Пример выделения
цитат чем грозная
необходимость. Августин Аврелий. Результат в браузере Тег
Иногда требуется,
чтобы строка текста не продолжалась во
всю ширину доступного пространства, а
оборвалась в нужном нам месте и
продолжилась на следующей строке. Но
как вы помните - браузеры игнорируют
простые переводы строк в HTML-коде, как
будто их нет. В таких случаях нам поможет
тег Тег Пример использования
тега BR Цель творчества
- самоотдача, Позорно, ничего
не знача, Б.
Пастернак. Результат в браузере Зачем использовать
тег Создает сверху и снизу
поля пустого пространства, а тег Часто на сайтах
можно увидеть, что Спецсимволы
HTML
С
пецсимволы
HTML
- это
условные кодовые обозначения, которые
преобразуются браузером в различные
текстовые знаки: буквы, цифры, знаки
препинания, стрелки и так далее. Например,
если мы напишем в HTML-странице вот такой
код: То браузер нам его
не покажет, а отобразит в параграфе знак
плюс-минус: Спецсимволы HTML
можно указывать двумя способами: Код символа
- В этом случае ставится амперсанд
(&), за ним решетка (#), потом идут цифры
и в конце ставится точка с запятой (;),
как показано выше. Мнемоника
- Сначала также идет амперсанд, потом
пишется ключевое слово и тоже в конце
точка с запятой, например: © Естественно удобней
использовать вариант с мнемониками,
так как, если вы хоть чуть-чуть знаете
английский язык, то сможете догадаться,
что за символ выводит каждый из них на
страницу и не будете путаться в цифрах.
Но, к сожалению, мнемоники есть не у всех
символов, поэтому часто приходится
использовать именно кодовый вариант. Обратите особое
внимание на то, что спецсимволы-мнемоники
чувствительны к регистру, то есть ©
и © - не одно и то же. Соответственно,
указывайте спецсимволы также, как
обычный текст - внутри тегов, которые
могут содержать встроенные элементы. Для чего нужны
спецсимволы HTML?
Спецсимволы HTML
используются для совершенно разных
целей. Я думаю, вы уже догадались, что
их применяют, когда нужно вставить на
страницу символ, которого нет в стандартной
компьютерной клавиатуре. Но это далеко
не все. Кроме этого они указываются,
когда кодировка страницы не поддерживает
какие-то символы в «готовом» виде (к
этому мы еще вернемся). Или, например, есть
такой спецсимвол, как неразрывный пробел
(). И если его поставить вплотную
между двумя словами, то в этом месте
будет запрещен перенос строки. А если
указать его несколько раз подряд
(...), то получим нужный
отступ строки, так как эти указанные
подряд пробелы браузеры не игнорируют. Довольно часто
спецсимволы используются для отображения
на странице HTML-разметки. И правда, ведь
если мы захотим отобразить на странице
какой-нибудь тег, то просто так у нас
это сделать не получится, так как браузер
его скроет, посчитав за разметку. Поэтому
придется использовать спецсимволы
заменяющие угловые скобки тегов (<
и >) и кавычки атрибутов (") Пример использования
спецсимволов HTML Тег для создания параграфов. ®
- Знак зарегистрированной торговой
марки. При написании
статьи лучший вариант - это
использование между словами
длинного тире и дефиса, а не только
дефиса во всех случаях. Результат в браузере Создание
горизонтальных линий в
HTML
В основном
горизонтальные линии используются для
декорирования HTML-страниц сайта, придавая
им более привлекательный вид. Но также
ими можно визуально разграничивать
информацию соседних разделов, добавляя
удобства читателям при ее изучении. Как нарисовать
горизонтальную линию?
Для создания
горизонтальных линий в HTML существует
специальный тег Пример рисования
горизонтальных линий в HTML Параграф. Параграф. Параграф. Результат в браузере Линии получаются
очень тонкими, невзрачными и рисуются
во всю доступную ширину, поэтому сейчас
мы научимся их изменять, чтобы они
выглядели более привлекательно. Как изменить
цвет, толщину и ширину горизонтальных
линий?
В старых версиях
HTML у тега Цвет можно указывать
по его имени на английском или по HEX-коду
цвета, перед которым ставится решетка
(#). В CSS существует
около десяти единиц измерения, но ширину
линии
можно
указывать только в пикселях (px) и процентах
(%), а толщину
вообще только в пикселях. Если вы
поставите другие единицы измерения, то
это не будет ошибкой, но браузеры их
просто проигнорируют. Если вы указываете
размеры в пикселях, то толщина и ширина
линии будет зависеть от разрешения
монитора, на котором просматривают ваш
сайт (чем выше разрешение экрана, тем
тоньше и уже линия). Только ширину
линии можно указывать в процентах.
Процентные размеры всегда зависят и
высчитываются исходя из размеров
родительского элемента-контейнера,
внутри которого расположен тег Пример изменения
цвета, толщины и ширины горизонтальных
линий. Результат в браузере Изменение
положения горизонтальных линий
Когда изменяешь
ширину горизонтальной линии, то становится
хорошо видно, что браузеры всегда
располагают ее по центру. Если вы хотите
изменить ее положение, то просто
используйте внутри Как убрать рамку
вокруг линии?
По умолчанию
браузеры рисуют вокруг линий рамки,
которые создают эффект трехмерности.
Так вот, когда мы не увеличиваем толщину
горизонтальных линий, браузеры нам
показывают только эти рамки, так как
толщина самой линии составляет 0px. Чтобы убрать рамку
вокруг линии, которая чаще только портит
внешний вид, мы снова применим атрибут
style. А пишется это так: Группирование
элементов
Группирование
элементов HTML-страницы является одним
из самых мощных, удобных и одновременно
простых инструментов для создания
качественного сайта. Тег До сих пор все
изученные нами элементы HTML могли
содержать только один из типов тегов -
либо встроенные (inline, уровня строки),
либо блочные (block). А теперь позвольте
вам представить тег Пример использования
тега DIV Параграф. Параграф. Параграф. Параграф. Параграф. Параграф. Результат в браузере Тег или
сгруппированная строка
Тег ...
является встроенным
(инлайн)
элементом, который может содержать
только встроенные теги и использоваться
внутри строк текста. Пример использования
тега SPAN Обычный текст. Жирный. Курсив. Результат в браузере При группировании
элементов важно соблюдать не только
синтаксис HTML, но также смысловое и
логическое структурирование кода.
Например, если у вас есть страница с
краткой биографией двух людей, то не
надо пихать внутрь одного блока конец
биографии первого человека и начало
второго. А вот информацию отдельной
биографии или ее части вы вполне можете
расположить внутри блока, если это
необходимо, или вообще их обе заключить
в один блок. Доброго времени суток, уважаемые подписчики. Этот урок мы посветим форматированию текста в html
. Рассмотрим, какие теги
для этого применяются. Сразу оговорюсь, что многие из них являются достаточно специфическими, их можно "обойти", используя каскадные таблицы стилей (css). Поэтому заострять внимание на них мы не будем. Просто посмотрим их работу, чтобы Вы знали, что такие возможности в языке HTML присутствуют. Итак, начнем. Для того чтобы нам было проще работать, скачаем архив lesson2.zip по прямой ссылке: Возьмем из высланного Вам архива файл "Лис и лошадь.doc" и откроем его с помощью программы word. Там две сказки известных авторов Братья Гримм. Затем откроем блокнот и сделаем в нем заголовок как в прошлом уроке или просто скопируем из предыдущего урока. Верю, что да. Теперь вернемся в word, скопируем весь наш текст из файла "сказка.doc" и вставим его между тегами
нашей заготовки. Сохраняем нашу заготовку под именем lesson2.html и открываем с помощью браузера (например, opera). Мы видим, что текст идет без заголовков, без абзацев, без отступов. Вот теперь и займемся непосредственным форматированием текста в языке HTML. Для выделения заголовков используются теги Цифры после буквы H в теге применяются от 1 до 6. 1 – самый крупный заголовок, 6 – самый маленький заголовок. Давайте теперь найдем в нашем файле названия сказок и заключим их в теги XHTML
У тега Давайте выровняем заголовок по центру. Для этого пропишем: XHTML
Аналогично и второй заголовок. Сохраняем и смотрим в браузер. Заголовки стали по центру. Для упрощения работы можно одновременно держать открытыми код страницы в блокноте и браузере. А после изменений в коде файл сохранять, а в браузере нажать кнопку обновить (или F5). Самостоятельно попробуйте разные значения тега Теперь разобьем наш текст на абзацы. Тег, который это делает —
текст абзаца Для этого находим начало абзацев и ставим там тег
, а в конце абзаца закрываем его Сохраняем исходный файл с кодом (ctrl+s), в браузере жмем кнопку "обновить" и смотрим, что получилось. У тега
есть параметр align
с такими же значениями, что и у тегов На абзацы и заголовки текст мы разбили. Теперь идем непосредственно по тексту. Текст можно сделать жирным. При помощи тега или
(кстати, это закрывающиеся теги. Рекомендуется
). Курсив —
или
, подчеркнутый
, моноширинный
или
. Попробуйте заключить разные участки текста в разные теги. И не забывайте их закрывать. Например: XHTML
любой текст из сказки
…………………………..
………………………….
…………………….. Для изменения размера, цвета и шрифта отдельного участка текста используйте тег
, его параметры: fаce="arial"
– указывает названия шрифта. size="3"
— размер (значения от 1 до 7). color="******"
– цвет шрифта. ****** — определенный код шрифта (например, 000000 – это черный). Давайте выделим фрагмент текста крупным красным шрифтом. Сделать это можно следующим образом: XHTML
фрагмент текста сказки
фрагмент текста сказки
Еще один немаловажный тег Следующую группу тегов (исходя из своего опыта) используют довольно редко, поэтому подробно рассматривать их мы не будем. Включил я их в данный урок, чтобы показать возможности языка, и вдруг вам они когда-нибудь понадобятся. Чтобы вы знали, что такие возможности существуют. Работу этих тегов, предлагаю рассмотреть самостоятельно, как раз будет для вас полезное упражнение. Итак, теги:
— подиндексы (H 2 O)
— надиндекс (4 5)
— увеличивает шрифт на 1
— уменьшает шрифт на 1
— цитаты, отображаются курсивом
— выделенный текст отображается курсивом
— выделенный текст отображается жирным шрифтом, рекомендуется вместо align=center(left, right)
-выравнивание, с этим параметром мы знакомы из других тегов width="число"
— длина линии по горизонтали, задается в пикселях или в процентах относительно размеров экрана size"число"
— толщина линии (меньше 100 пикселей, т.е. если задать параметр size=99
, a параметр width=1
, то получим вертикальную линию, только с ограниченной высотой) color="цвет"
-цвет линии noshade
— отменяет рельефность Давайте отделим наши две сказки линией красного цвета с шириной равной ширине экрана. Для этого перед началом второй сказки напишем: XHTML
Поэкспериментируйте с набором и значениями параметров этого тега. Есть еще один интересный тег, но поддерживается он только браузером Internet Explorer. Честно говоря мне его на практике использовать не приходилось. HTML- текст
представлен в спецификации тегами для форматирования и группировки текста. Теги представляют собой контейнеры для текста и не имеют визуального отображения. Теги для форматирования текста несут смысловую нагрузку и обычно задают для текста, заключенного внутрь, стилевое оформление, например, выделяют текст жирным начертанием или отображают его шрифтом другого семейства (свойство font-family). Грамотно отформатированный текст дает понять поисковым системам, какие слова несут важную смысловую нагрузку, по каким из них предпочтительно ранжировать веб-страницу в поисковой выдаче. Вся текстовая информация, отображаемая на сайте, размещается внутри тега Заголовки являются важными элементами веб-страницы, они упорядочивают текст, формируя его визуальную структуру. Теги Заголовок самого верхнего уровня, на странице рекомендуется использовать только один раз, по возможности частично дублируя заглавие страницы. Тег Им обозначаются подзаголовки тега Показывает подзаголовки тега Обозначают подзаголовки четвёртого, пятого и шестого уровня. Размер шрифта в браузере равен 1em
/ 0.83em
/ 0.67em
, верхний и нижний отступ по умолчанию 1.33em
/ 1.67em
/ 2.33em
соответственно. Задаёт полужирное начертания шрифта. Выделяет текст без акцента на его важность. Отображает шрифт курсивом, придавая тексту значимость. Отображает шрифт курсивом. Уменьшает размер шрифта на единицу по отношению к обычному тексту. Задаёт полужирное начертание шрифта, относится к тегам логической разметки, указывая браузеру на важность текста. Используется для создания нижних индексов. Сдвигает текст ниже уровня строки, уменьшая его размер. Используется для создания степеней. Сдвигает текст выше уровня строки, уменьшая его размер. Выделяет текст в новой версии документа, подчёркивая его. Перечёркивает текст. Используется для выделения текста, удаленного из документа. Служит для выделения фрагментов программного кода. Отображается моноширинным шрифтом. Отмечает фрагмент как вводимый пользователем с клавиатуры. Отображается моноширинным шрифтом. Применяется для выделения результата, полученного в ходе выполнения программы. Отображается моноширинным шрифтом. Выделяет имена переменных, отображая курсивом. Позволяет вывести текст на экран, сохранив изначальное форматирование. Пробелы и переносы строк при этом не удаляются. Применяется для форматирования аббревиатур. Браузером обычно подчеркивается пунктирной линией. Расшифровка сокращения осуществляется с помощью атрибута title , она появляется при наведении курсора мыши на текст. Используется для замещения текущего направления текста, т.е. текст в теге отображается зеркально. Выделяет цитаты внутри документа, выделяя его отступами и переносами строк. Используется для выделения коротких цитат. Браузерами заключается в кавычки. Применяется для выделения цитат, названий произведений, сносок на другие документы. Позволяет выделить текст как определение. Несмотря на наличие специального тега, рекомендуется выделять текст силами CSS.
Разбивает текст на отдельные абзацы, отделяя друг от друга пустой строкой. Браузер автоматически добавляет верхний и нижний отступ, равный 1em , при этом отступы соседних абзацев «схлопываются». Переносит текст на следующую строку, создавая разрыв строки. Используется для разделения контента на веб-странице. Отображается в виде горизонтальной линии..
Текст внутри ячейки
таблицы
а своими словами, дабы дурь была видна каждого!
Пётр Первый.
§ 2. Сами теги для форматирования
§ 3. Абзацы
§ 4. Выравнивание текста
§ 5. Перенос строки и горизонтальная черта
. Например, html-код
2. Вторая строка.
2. Вторая строка.
нет закрывающего тега. Ты уже наверное догадался, что для вставки нескольких пустых строк, нужно записать тег
несколько раз подряд.§ 6. Заголовки
Заголовок 4 уровня
§ 7. Работа со шрифтами
>, то текст, размещённый между тегами и , будет отображаться увеличенным на 1 по сравнению с другим текстом. Аналогично и с -1.§ 8. Создание списков в HTML
Первый элемент.
Второй элемент.
Третий элемент.
и , подчеркивающие
текст, а также тег , отображающий
зачеркнутый
текст. Эти
теги являются устаревшими в HTML и их, как
и атрибут align, возможно скоро перестанут
понимать браузеры. Лучше использовать
атрибут style, причем его допустимо
указывать внутри любых тегов. Общий
синтаксис следующий:Красный текст
заголовка
Заголовок.
Заголовокпоцентру.
или выделяем длинные цитаты
или
выделяем небольшие цитаты
...
используется для обозначения небольших
цитат или слов в переносном смысле. Весь
текст, который находится между тегов
этого элемента, он ставит в кавычки.
Кстати, - это самый обычный
встроенный
(уровня строки)
тег, который может содержать только
встроенные теги.
Для
изучения языка гораздо важнее свободная
любознательность,
Чему бы
ты ни учился, ты учишься для себя.
Петроний.
или принудительный обрыв строки
, который и осуществляет
принудительный обрыв строки в месте
его установки.
тоже
является встроенным
(inline) элементом
и пусть вас не запутает то, что он
осуществляет перенос строки после себя,
просто у него функция такая. Кроме этого,
у элемента
нет закрывающего тега,
то есть он является пустым
,
потому что не может иметь содержимого.
А не шумиха, не
успех.
Выть притчей на устах у
всех.
, если можно просто написать
текст в нескольких параграфах, он ведь
тогда тоже будет указан на разных
строках?» Все это так, но не забывайте,
что тег
этого не делает. Кроме этого параграфы
на то и существуют, чтобы в каждом из
них содержались осмысленные и законченные
выражения, а не куски текста.
используют
лишь для того, чтобы создать несколько
пустых строк. Да, если его указать подряд
несколько раз (
...), то
можно сделать вертикальные отступы
любых размеров. Но, хотя это и не
противоречит синтаксису HTML, я не
рекомендую вам так поступать, так как
данный тег для этого не предназначен.
. Причем он является
блочным
тегом
, то
есть создает переносы строк до и после
себя, поэтому линия всегда получается
на отдельной строке. Соответственно и
указывать его можно только внутри тегов,
которые могут содержать блочные элементы,
например или . А вот
сам
не может иметь содержимого,
так как у него попросту нет закрывающего
тега, то есть он является пустым.
существовали специальные
атрибуты, с помощью которых можно было
изменить цвет, толщину и ширину
горизонтальных линий. Это color, size и width,
соответственно. Но в новых версиях от
них отказались в пользу Каскадных таблиц
стилей (CSS), поэтому, как вы уже догадались,
мы опять будем использовать наш любимый
атрибут style. Общий синтаксис такой:
- цвет линии
(вернее ее фон).
- толщина
линии.
-
ширина линии.
- а можно
указать сразу все параметры, только не
забываем про точку с запятой (;).
.
В этом случае размеры родителя берутся
за 100%. Например, если мы разместим тег
внутри элемента
, то как бы мы ни изменяли
размеры окна браузера или разрешение
монитора - ширина линии всегда будет
составлять половину ширины блока
.
атрибут style
со значениями для выравнивания
содержимого тегов
.
текст
,
текст
и т.д. до
текcт
.
…
.Лис и лошадь
Лис и кошка
есть параметр align
со значением Left
— по левому краю, right
— по правому и center
— по центру.
применяется для принудительного перехода текста на новую строку. В использовании он прост, ставите его в том месте, начиная с которого текст должен отображаться с новой строки. В принципе по этому тегу добавить больше нечего, поэтому двигаемся дальше.
— программный код отображается моноширинным шрифтом
— горизонтальная линия. У этого тэга есть такие параметры, как:
Теги для HTML текста
1. Теги заголовков
...
должны использоваться только для выделения заголовков нового раздела или подраздела. При использовании заголовков необходимо учитывать их иерархию, т.е. за
должен следовать
и т.д. Также не допускается вложение других тегов в теги
...
.
1.1. Тег
должен быть уникальным для каждой страницы сайта. Рекомендуется прописывать тег в начале статьи, используя ключевое слово в тексте заголовка 2em
0.67em
.
1.2. Тег
. Размер шрифта в браузере равен 1.5em
, верхний и нижний отступ по умолчанию 0.83em
.
1.3. Тег
. Размер шрифта в браузере равен 1.17em
, верхний и нижний отступ по умолчанию 1em
.
1.4. Теги
,
,
Для всех тегов доступны .2. Теги для форматирования текста
2.1. Тег
Для тега доступны .2.2. Тег
Для тега доступны .2.3. Тег
Для тега доступны .2.4. Тег
Для тега доступны .2.5. Тег
Для тега доступны .2.6. Тег
Для тега доступны .2.7. Тег
Для тега доступны .2.8. Тег
2.9. Тег
Для тега доступны следующие атрибуты: cite , datetime .3. Теги для ввода «компьютерного» текста
3.1. Тег
Для тега доступны .3.2. Тег
Для тега доступны .3.3. Тег
Для тега доступны .3.4. Тег
Для тега доступны .3.5. Тег
Для тега доступны .4. Теги для оформления цитат и определений
4.1. Тег
Для тега доступны .4.2. Тег
Для тега доступен атрибут dir .4.3. Тег
4.4. Тег
Для тега доступен атрибут cite .4.5. Тег
Для тега доступны .4.6. Тег
Для тега доступен атрибут title .5. Абзацы, средства переноса текста
5.1. Тег
Для тега доступны .5.2. Тег
Для тега доступны .5.3. Тег
Для тега доступны .
Рекомендуем почитать