Оформляем html-страницу и форматируем текст.
Сначала пару слов о текстовом редакторе, которым вы пользуетесь. Конечно, вы можете это делать в блокноте, но гораздоо удобнее пользоваться Notepad++ (скачать можно, например, на http://www.softportal.com/get-5406-notepad.html . В нем весь html подсвечивается другим цветом, что облегчает восприятие и поиск ошибок.
А теперь вернемся к основной теме. Откройте созданную на прошлом уроке html-страницу в блокноте или в Notepad.
Сейчас в ней написана фраза «Привет всем!», она черного цвета, располагается слева на белом фоне. А если мы хотим, чтобы она была посередине, крупным желтым шрифтом и на синем фоне? Для этого у тегов предусмотрены специальные атрибуты. Проще это объяснить на практике.
Шаг 1. Меняем фон html-страницы и цвет текста
Для этого добавим в наш код, в тег <body> следующие атрибуты — bgcolor=»blue» text=»yellow». Здесь bgcolor — атрибут, отвечающий за цвет фона страницы, а blue — его значение (в нашем случае — голубой, но можете сделать и красный — red, и зеленый — green, и любой другой). Атрибут text задает цвет текста документа, его значение yellow — желтый.
Урок 3. Заголовки и форматирование текста
Для начала поговорим о заголовках. В предыдущих уроках Вы могли видеть как используется текст. Однако, наряду с ним, в html есть теги, обозначающие заголовки: h1, h2, h3, h4, h5, h6. Они идут в порядке от самого большого, до самого маленького: h1 — самый большой заголовок, h2 — чуть меньше, ну а h6, последний из них, соответственно самый маленький.
Форматирование текста в HTML
Наверное, Вы уже заметили, что если Вы переносите строку и продолжаете печатать текст в коде, то сам текст всё равно идёт в одним абзацем без переноса строки. Для того, чтобы перенести строку надо использовать одиночный тег br в месте принудительного переноса.
Чаще всего (и правильнее) для переноса строки и обозначения абзаца используют тег p (параграф). В случае использования данного тега абзацы у Вас будут разделять отступами друг от друга.
У тега p есть атрибут align, который отвечает за выравнивание параграфа. Может иметь следующие значения:
left — выравнивание по левой стороне
right — выравнивание по правой стороне
center — по центру
jastify — по ширине
| Атрибут align есть и у заголовков (тег h), и у параграфов (тег p). |
Рассмотрим пример кода выравнивания текста по левой стороне, по правой и по центру
Также существует тег center. Он центрирует его содержимое (текст, изображение и тд). Для текста его действие аналогично выравниванию по центру.
Как выделить текст полужирным в html?
strong — стандартное выделение текста жирным.
b — выделение ключевого слова жирным. Вошло в обиход раньше тега strong, поэтому некоторые считают его устаревшим (однако тег используется в HTML5). Наравне со strong воспринимается Поисковыми системами при определении ключевых слов, словосочетаний.
Внимание! Выделение текста данными тегами понимается Поисковой Системой как особо важное.
Будьте внимательны:
1. выделяйте только важные слова и словосочетания
2. важные — это не четверть текста. Старайтесь ограничить применение данного тега.
Рассмотрим пример кода выделения текста жирным
И те, и другие слова будут выделены жирным, однако для Поисковой Системы будет важны слова ключевого слова
Как выделить текст курсивом в html?
i — выделение курсивом. Данным открывающим и закрывающим тегами следует выделять только важную информацию (ключевые слова), так как поисковые системы будут выдавать данные, ориентируясь по ним.
em — стандартное выделение курсивом. Нет ограничений в использовании.
cite — данный вид курсива используется для цитаты, ссылки на материал и авторов.
dfn — для выделения определений и терминов.
| Результат выделения данных тегов будет одинаковым — это выделение курсивом. Однако следует понимать, что данные Вашей страницы будет считывать не только человек, но и Поисковый Робот. Если Вы хотите, чтобы конкретные части текста лучше индексировались (отображалось по запросу в поисковике), то лучше использовать соответствующее для этого выделение — дня цитат cite, для терминов dfn и тд. |
Рассмотрим пример кода c выделением текста курсивом
Как выделить текст подчёркиванием в html?
u — стандартное выделение подчёркиванием (лучше использовать с последними спецификациями html)
ins — так помечаются новые данные (текст, пояснение) вставленные в Ваш документ (либо добавленные, либо взамен старых). Выделяются подчёркиванием
Данные и в первом, и во втором случае будут выделен подчёркиванием.
Как сделать перечёркнутый текст в html?
Перечёркнутым выделяется текст в следующих тегах
del — внесённое исправление.
strike — стандартное перечёркивание.
s — сокращённая запись strike
Как выделить текст в верхнем и нижнем индексах в html?
sub — тег, отображающий текст ниже уровня строки шрифтом меньшего размера.
sup — тег, отображающий текст выше уровня строки шрифтом меньшего размера.
Тег font в html
Для редактирования текста в html также используется тег font. Однако с введением блочной вёрстки и популярностью CSS данный способ быстро начал забываться.
Тег font указывает параметры шрифта (тип шрифта, размер, цвет). У него есть соответствующие атрибуты:
face — название шрифта. Можно приводить несколько названий шрифтов (чере запятую), так как у пользователя, просматривающего Ваш сайт, такого шрифта может НЕ быть по умолчанию или он не будет поддерживать данный язык. Например пользователь из Польши или Китая. Соответственно, если данный шрифт не найден, то используется следующий по списку.
size — активные значения от 1 до 7. Шрифт по молчанию равен 3.
color — цвет текста. Если не задать параметр, то текст будет чёрным.
Демонстрация Скачать исходники
Повторюсь, данный способ устарел, поэтому советую не привыкать его использовать.
Можно ли вывести текст в том виде, в котором напечатал(а). Тег PRE
Да, действительно можно облегчить себе жизнь и избавиться от многих отступов, переносов и прочего. Для этого существует тег pre. Количество пробелов, большее одного, в коде приравнивается к одному, однако в pre текст остаётся в таком виде, в котором его ввели.
| Также тег pre приятен её тем, что в нём можно использовать такие теги как: img, object, big, small, sub, sup |
Другие теги для форматирования текста
Тег abbr обозначает аббревиатуру. Аббревиатура — сокращенное слово или словосочетание. Аббревиатуры можно встретить повсюду, например, HTML (Hypertext Markup Language), PHP (Hypertext Preprocessor).
Слово выделенное в данные теги выделяется пунктиром и при наведении выводит содержимое атрибута title
Тег acronym в отличие от аббревиатуры обозначает устоявшиеся слово (акроним), которое употребляется как самостоятельное. Например: СССР (Союз Советских Социалистических Республик), СПИД (Синдром приобретённого иммунного дефицита), США (Соединённые Штаты Америки).
Слово выделенное в данные теги выделяется пунктиром и при наведении выводит содержимое атрибута title
Горизонтальная черта в html или тег hr
Для обозначения горизонтальной линии в html используется тег hr. Сверу и снизу он выделяется отступами.
У данного тега есть следующие атрибуты:
align — выравнивание горизонтальной линии. Ранее уже упоминались типы выравнивания: по левому краю (left), по центру (center), по правому (right).
width — фиксирует длину черты в пикселях или процентах
size — толщина линии
color — цвет линии
noshade — убирает рельефность линии
Спасибо за внимание! Урок был долгий и сложный! Вы сделали большой шаг вперёд!
Заголовки HTML
У любого текста должен быть заголовок. А у любого хорошего текста должны быть ещё и подзаголовки. А поскольку HTML-страница — это в большинстве случаев текст в том или ином виде, то в HTML, разумеется, должны быть специальные средства для оформления заголовков. И, скажу вам по секрету, такие средства есть )))
Как создать заголовок в HTML
Для заголовка, как и для всего прочего, есть специальный тег. Заголовками и подзаголовками не стоит пренебрегать, поскольку они позволяют сделать страницу более “читабельной” и, кроме того, влияют на индексацию страницы в поисковых системах.
Тег заголовка HTML начинается с буквы H или h. Затем идёт число, которое определяет размер заголовка. Таким образом, в HTML есть шесть тегов для заголовков — от <h1> (самый крупный заголовок HTML) до <h6> (самый мелкий).
Как вы понимаете, размер заголовка HTML зависит от числа, которое мы записываем после буквы h.
Тег заголовка — это парный тег. Поэтому заголовок документа HTML в исходном коде страницы должен выглядеть, например, так:
<h1>Это самый большой заголовок HTML</h1>
Обычно браузер отображает заголовки полужирным шрифтом. Текст в теге <h4> обычно имеет такой же размер, что и основной текст страницы.
Теги заголовков разрывают текст. То есть перед заголовком и после заголовка будут пустые строки, даже если там нет тегов абзаца или конца строки.
Уровни заголовков HTML
Иногда вы можете встретить такое название, как “уровень заголовка”. Здесь имеются ввиду номера и размеры заголовка. HTML заголовок h1 — это заголовок первого уровня, h2 — второго уровня, ну и так далее.
Тег <h1> обычно используют для заглавия всего документа. Тег <h2> — для названий разделов и так далее.
Выравнивание заголовка HTML
По умолчанию заголовок выравнивается по левому краю. Но при необходимости его можно выровнять по центру, по правому краю и т.п. Для этого используются такие же атрибуты, как и для параграфов (см. здесь).
Пример выравнивания заголовка по центру:
<h2 align=»center»> Этот заголовок выровнен по центру </h2>
ПРИМЕЧАНИЕ
Атрибут justify (выравнивание по ширине страницы) поддерживается не всеми браузерами.
Атрибуты заголовков HTML
Теги заголовков могут иметь и другие атрибуты. Например, class, dir, id, lang, style, title, а также атрибуты событий. Но об этом мы будем говорить более подробно в других статьях. Если же вы уже сейчас хотите знать всё о вёрстке сайтов, то вам сюда.
Заголовки 1
Заголовки определяются с помощью <h1> для <h6> тегов.
<h1> определяет наиболее важный заголовок. <h6> определяет наименее важный заголовок.
Пример
Примечание: Браузеры автоматически добавляют пробел (поле) до и после заголовка.
Заголовки важны
Поисковики используют заголовки для индексации структуры и содержания ваших веб-страниц.
Пользователи снимают страницы по заголовкам. Важно использовать заголовки для отображения структуры документа.
<h1> заголовки должны использоваться для основных рубрик, за которыми следуют <h2> заголовки, затем менее важные <h3> и так далее.
Примечание: Используйте заголовки HTML только для заголовков. Не используйте заголовки, чтобы сделать текст BIG или bold.
Большие заголовки
Каждый заголовок HTML имеет размер по умолчанию. Однако можно указать размер любого заголовка с атрибутом style , используя свойство CSS font-size :
Пример
Горизонтальные правила HTML
Тег <hr> определяет тематический разрыв в HTML-странице и чаще всего отображается как горизонтальное правило.
Элемент <hr> используется для разделения содержимого (или определения изменения) в HTML-странице:
Пример
Элемент HTML <head>
Элемент HTML <head> не имеет ничего общего с заголовками HTML.
Элемент <head> является контейнером для метаданных. Метаданные HTML — это данные о HTML-документе. Метаданные не отображаются.
Элемент <head> помещается между тегом <html> и тегом <body> :
Пример
Note: Metadata typically define the document title, character set, styles, links, scripts, and other meta information.
Как просмотреть HTML-код?
Вы когда-нибудь видели веб-страницы и спрашивали "Эй! Как они это сделали?"
Просмотр исходного кода HTML:
Щелкните правой кнопкой мыши в HTML-страницы и выберите "Просмотр источника страницы" (в Chrome) или "Просмотр источника" (в IE), или аналогичные в других браузерах. Откроется окно, содержащее исходный HTML-код страницы.
Проверьте элемент HTML:
Щелкните правой кнопкой мыши на элементе (или пустой области), и выберите "проверить" или "проверить элемент", чтобы увидеть, какие элементы составляются (вы увидите как HTML и CSS). Вы также можете редактировать HTML или CSS на лету на панели элементы или стили, которая открывается.
Справочник тегов HTML
Справочник тегов html5css.ru содержит дополнительную информацию об этих тегах и их атрибутах.
Вы узнаете больше о тегах HTML и атрибутах в следующих главах этого учебного пособия.