Форматирование HTML-абзаца


Оглавление (нажмите, чтобы открыть):

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

Для форматирования текста существует много тегов. Одни их них используются часто (и их вы быстро запомните), другие — редко (их и не надо запоминать).

Здесь мы рассмотрим те, которые используются часто.

Теги, делающие текст заголовками


Эти теги выделяют текст в виде заголовков. Т.е. каждый заголовок начинается с новой строки, выделен полужирным шрифтом и имеет свой размер (заголовок первого уровня самый большой, шестого — самый маленький).

Эти теги могут использоваться с параметром горизонтального выравнивания align. Возможные значения этого параметра:

Как в html сделать отступ текста?

Здравствуйте, дорогие друзья!

Рассмотрим несколько способов как сделать отступ текста в HTML.

Навигация по статье:

Отступ текста в HTML при помощи margin

Когда вы размещаете текст на сайте он находится в каком-то теге. Это может быть тег блока

, секции и так далее.

Мы можем задать отступ для тега в котором находится текст при помощи CSS свойства margin.

Делается это так:

Здесь мы воспользовались атрибутом style и в нём указали нужное CSS свойство, задав тексту отступ слева 20px. Так же мы можем задать для нашего блока или другого тега класс и потом в отдельном CSS файле дописать для него стили.

При помощи этого свойства мы можем задать разные отступы тексту в HTML:

  • margin-left — расстояние слева
  • margin-right — расстояние справа
  • margin-top — расстояние сверху
  • margin-bottom — расстояние снизу

Так же можно одновременно в одной строке задать одинаковые или разные отступы со всех сторон:

  • margin: 10px; — делаем отступ текста 10px со всех сторон
  • margin: 15px 30px; — задаём отступ срерху и снизу по 15px, а справа и слева по 30px
  • margin: 15px 25px 35px 45px; — отступ сверху 15px, слева – 25px, снизу – 30px, справа – 45px

Вместо пикселей вы так же можете задавать %, em, rem и другие единицы.

Отступ текста в HTML при помощи padding

Этот способ очень похож на предыдущий, но если margin задавал отступ до текста как бы снаружи тега, то padding будет задавать отступ внутри.

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

В HTML текст форматируется с помощью тегов. Чтобы задать ему определённый стиль, надо поместить текст в соответствующий контейнер.

Все теги форматирования можно разделить на три группы:

1. Теги заголовков (h1-h6).

2. Теги оформления основного текста ( , , ,

Выглядеть в браузере это будет вот так:

Теги оформления основного текста

Позволяют форматировать на уровне символов. Рассмотрим, что с помощью них можно делать.

Жирный шрифт

Нужен, чтобы акцентировать внимание на тексте. Для поисковиков тоже важен, им можно выделять ключевые слова.

Отвечают за жирное начертание теги и .

Верхний и нижний индексы

Могут использоваться в формулах, уравнениях, обозначении некоторых величин.

За создание нижних индексов отвечает тег , для верхних используется тег .

Уменьшение размера

Если нужно сделать текст на единицу меньше установленного по всей странице, то нужно использовать тег

Подчёркивание

Этот тип выделения можно использовать для обозначения внесённых в документ изменений или просто чтобы акцентировать на тексте внимание.

Зачёркивание

Зачеркнуть информацию можно, если она уже потеряла свою актуальность. Предназначен для этого тег .

Курсив

Нужен, чтобы акцентировать на тексте внимание, и может создаваться тегом или .

Ввод компьютерного текста

Бывает, что на веб-страницу нужно добавить исходный код программы и результаты её работы. Чтобы визуально разные части текста было легко друг от друга отличить, разработчики HTML и внедрили теги этой группы.

В контейнер заключается код программы, при этом её переменные выделяются тегом , а результат выполнения — . Контейнер содержит текст, который при работе с программой должен с клавиатуры вводить пользователь, а всё, что заключено в теги .

Цитаты и определения

Программный код будет выглядеть таким образом , переменные обозначаются так: a, b, c , вот результат выполнения программы , а это – введённый пользователем текст . Сохранение исходного форматирования .

Общий пример

Чтобы лучше понять, за что какой тег отвечает и как работает, посмотрите нижеследующий код и результат его выполнения.

Браузер интерпретирует этот код так:

Теги группировки

Нужны, чтобы текст не шёл одной сплошной строкой, а был разбит на логические составляющие.

  • Тег
    осуществляет переход на следующую строку внутри абзаца (отступа перед строкой не будет).
  • позволяет нарисовать горизонтальную линию. Использовать его можно для более наглядного разделения текста. Атрибуты w >

Полезные ссылки:

  • Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
  • Бесплатный курс по в

    ерстке сайта — пример блочной вёрстки с чистого листа;
  • Вёрстка сайта с нуля 2.0 — полноценный платный курс.

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

В этой статье речь пойдет о том как происходит форматирование текста в CSS, будут рассмотрены приемы выравнивания текста, как силамии CSS сделать красную строку, установить междустрочный интервал и интервал между словами, как произвести декорирование текста, преобразовать текст в верхний, или нижний регистр и как создать капитель шрифта.

В ходе верстки сайта Вам придется постоянно изменять внешний вид веб-страниц. Одной из первых задач при работе с текстом на странице является необходимость его выровнять.

Выравнивание текста

Благодаря свойству CSS text-align, вы можете разместить заголовки вашего документа по центру, расположить текстовое содержимое относительно левого, либо правого края, или, может, вы готовите страницы к печати и необходимо выровнять их по ширине, подобно тому, как текст размещается в печатных изданиях.

Чтобы установить выравнивание для текста, используйте следующие ключевые слова со свойством text-align:

Значение Описание
left Выравнивает текст влево. Это значение по умолчанию (если направление текста слева направо).
right Выравнивает текст вправо. Это значение по умолчанию (если направление текста справа налево).
center Выравнивает текст по центру.
justify Растягивает линии так, что каждая линия имеет одинаковую ширину (растягивает текст по ширине).

Давайте рассмотрим пример работы с выравниванием текста:

В данном примере мы создали 4 (четыре) класса, которые определяют различные варианты выравнивания текста. Для всех элементов

Результат нашего примера:

Рис.60 Пример использования свойства text-align (выравнивание текста).

Отступ первой строки

Если Вы откроете практически любую книгу, содержащую текстовую информацию, то можете заметить, что первая строка каждого абзаца, как правило, имеет отступ (красная строка).

Если у вас есть необходимость придать вашему документу вид подобный печатному изданию, то воспользуйтесь таким CSS свойством, как text-indent.

Вы можете применить те относительные единицы измерения, которые вы используете в своем документе, будь то пиксели, либо значения, которые зависят от базового размера шрифта (например, такие как em).

Обращаю Ваше внимание, что в некоторых ситуациях у вас может появится необходимость использовать отрицательный отступ первой строки, свойство text-indent допускает использование отрицательных значений, в этом случае строка сдвигается в обратном направлении.

Давайте рассмотрим пример использования этого свойства:

В данном примере мы создали 4 (четыре) стиля и поочередно применили их к четырем абзацам. Для первого абзаца установили значение отступа по умолчанию (), для второго задали отступ 40 пикселей, для третьего указали отрицательный отступ (-20px), в результате чего, абзац сдвинулся за окно браузера и для четвертого абзаца установили отступ равный 50%.

Обращаю ваше внимание, что если вы используете процентные значения, то отступ зависит от ширины родительского элемента, в котором находится абзац.

Результат нашего примера:

Рис. 61 Пример использование свойства text-indent (красная строка).

Установка междустрочного интервала

При работе с текстом зачастую возникает необходимость расположить строки абзаца ближе друг к другу, либо наоборот — растянуть их. Расстояние между базовыми линиями соседних строк называется интерлиньяж или междустрочный интервал.

В CSS за междустрочный интервал (интерлиньяж) отвечает свойство line-height (высота строки). Чем выше значение этого свойства, тем больше промежуток между строками.

Обращаю Ваше внимание на то, что при установке значения высоты строки с использованием единиц измерения пиксели, размер междустрочного интервала, напрямую будет зависеть от размера шрифта, то есть он будет автоматически корректироваться пропорционально изменению свойства font-size (размер шрифта), рассмотренного в предыдущей статье.

Как правило, во всех современных браузерах высота строки по умолчанию составляет 120 %.

Расчёт междустрочного интервала происходит следующим образом:

Например, размер шрифта составляет 20 пикселей, а высота строки 150% (30 пикселей). Таким образом, получается:

Допускается задавать размер высоты строки с использованием числового значения. Объявление выглядит следующим образом:

Как вы можете заметить, единицы измерения при этом не указываются, а число выступает в роли множителя. При использовании числовых значений расчёт междустрочного интервала происходит следующим образом:

Например, шрифт для абзаца установлен 2em, а высота строки задана как 1.5:

Расчетное значение междустрочного интервала в нашем случае составит 3em:

В большинстве случаев множитель использовать очень удобно, так как элементы наследуют значения междустрочного интервала родительского элемента. Давайте рассмотрим пример использования свойства line-height:

В данном примере мы рассмотрели способы указания высоты строки в пикселях, процентах и с использованием множителя.

Результат нашего примера:

Рис. 62 Пример использование свойства line-height (установка междустрочного интервала).

Интервал между словами и символами

Оформляя страницы на сайте, приходится регулировать интервал не только между строк, но и между отдельными словами, или символами. Например, уменьшив интервал между символами, позволит сделать длинный заголовок более компактным, или наоборот, увеличив интервал, придаст ему более растянутый вид.

Чтобы установить определенный интервал между символами необходимо использовать CSS свойство letter-spacing. При работе со свойством используйте относительные единицы измерения CSS (em, rem, px и так далее). Допускается использование как положительных, так и отрицательных значений. Положительные значения соответственно увеличивают интервал между символами, а отрицательные уменьшают, вплоть до наслоения букв и символов друг на друга.

Давайте рассмотрим пример использования свойства letter-spacing:

В данном примере мы рассмотрели способы указания интервала между символами в тексте в пикселях (как положительное, так и отрицательное значение) и единицах измерения em.

Результат нашего примера:

Рис.63 Пример использования свойства letter-spacing (интервал между символами в тексте).

Задать интервал между отдельными словами позволяет похожее по наименованию свойство CSS — word-spacing. По аналогии со свойством letter-spacing используйте относительные единицы измерения CSS (em, rem, px и так далее). Допускается использование как положительных, так и отрицательных значений. Положительные значения соответственно увеличивают интервал между словами, а отрицательные уменьшают, вплоть до наслоения слов друг на друга.

Давайте рассмотрим пример использования свойства word-spacing:

В данном примере мы рассмотрели способы указания интервала между словами в тексте в пикселях (отрицательное значение) и единицах измерения em.

Результат нашего примера:

Рис. 64 Пример использования свойства word-spacing (интервал между словами в тексте).

Декорирование текста

CSS свойство text-decoration дает нам возможность добавить к тексту такие виды декорирования как:

  • подчеркивание
  • перечеркивание
  • линия над текстом

Однако, одно из самых распространенных применений этого свойства это отмена декорирования, при этом необходимо использовать со свойством text-decoration ключевое слово none :

В данном примере мы убрали декорирование (подчеркивание) у всех гиперссылок. Полный перечень ключевых слов свойства text-decoration указан в данной таблице:

Значение Описание
none Определяет нормальный текст (без декорирования). Это значение по умолчанию
underline Определяет линию под текстом.
overline Определяет линию над текстом.
line-through Определяет линию, проходящую через текст (перечеркивание).

Обращаю Ваше внимание, что у большинства пользователей подчеркнутый текст ассоциируется с гиперссылкой, а перечеркнутый с удалённым текстом, поэтому используйте декорирование, когда это действительно необходимо.

Допускается использовать несколько значений в одном объявлении:

Давайте рассмотрим пример использования свойства text-decoration в тексте:

В данном примере мы создали четыре различных стиля и применили их поочередно к каждому абзацу. В первом абзаце добавили декорирование текста — линия снизу (значение underline ), во втором декорирование текста — линия сверху (значение overline ), в третьем декорирование текста — перечеркивание ( line-through ), а в четвертом двойное декорирование текста — линия сверху и снизу (значения underline overline ).

Результат нашего примера:

Рис. 65 Пример использования свойства text-decoration (декорирование текста в CSS).

Верхний и нижний регистр

CSS предоставляет возможность осуществить преобразование любого текста в верхний или нижний регистр, а также преобразовать первы


е буквы каждого слова в верхний регистр. Управляет регистром текста свойство text-transform, ниже в таблице приведены все его значения:

Значение Описание
none Текст отображается как есть (регистр букв не изменяется). Это значение по умолчанию.
capitalize Преобразует первые символы каждого слова в верхний регистр.
uppercase Преобразует все символы в верхний регистр.
lowercase Преобразует все символы в нижний регистр.

Давайте рассмотрим пример использования свойства text-transform в тексте:

В данном примере мы создали три различных стиля и применили их поочередно к каждому абзацу. В первом абзаце первые символы каждого слова были преобразованы в верхний регистр (значение capitalize ), во втором все символы в верхний регистр (значение uppercase ), а в третьем в нижний регистр (значение lowercase ).

Рис. 66 Пример использования свойства text-transform (изменения регистра текста).

Капитель в CSS

Малые заглавные, или капитель (англ. small caps) — начертание шрифта, в котором строчные знаки выглядят как уменьшенные заглавные буквы. Для создания такого начертания используется CSS свойство font-variant со следующим синтаксисом:

Рассмотрим пример использования:

В данном примере первый параграф оставлен без изменений, а ко второму применено свойство font-variant со значением small-caps , благодаря которому текст будет выведен в капители (строчные буквы устанавливаются как прописные уменьшенного размера).

Рис. 67 Пример использования свойства font-variant (капитель шрифта).

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:
  • Используя полученные знания составьте следующую HTML страницу:

    Практическое задание № 16.

Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.

Использование форматирования HTML

Форматирование абзацев
Изменение цвета текста
Определение цветов по умолчанию для текста страницы
Изменение цвета выделенного текста
Выравнивание текста
Выравнивание текста на странице
Выравнивание элементов страницы по центру
Отступ текста
Применение стилей шрифтов

Форматирование абзацев

С помощью всплывающего меню «Формат» в инспекторе свойств HTML или подменю «Формат» > «Формат абзаца» можно применять стандартные теги абзацев и заголовков.

  1. Расположите курсор в абзаце или выделите часть его текста.
  2. В подменю «Формат» > «Формат абзаца» или во всплывающем меню «Формат» в инспекторе свойств выберите один из вариантов действий.
    • Выберите формат абзаца (например, «Заголовок 1», «Заголовок 2», «Форматированный текст» и т.д.). Ко всему абзацу будет применен HTML-тег, связанный с выбранным стилем (например, тегу h1 соответствует стиль «Заголовок 1», h2 — «Заголовок 2», pre — «Форматированный текст» и т.д.).
    • Выберите пункт «Нет», чтобы удалить форматирование абзаца.

При применении к абзацу тега заголовка Dreamweaver автоматически добавляет следующую строку текста как стандартный абзац. Чтобы изменить эту настройку, выберите «Правка» > «Настройки» (Windows) или «Dreamweaver» > «Настройки» (Macintosh); затем в категории «Общие» в разделе «Параметры изменения» отмените выбор параметра «Переключиться в стиль простого абзаца после заголовка».

Изменение цвета текста

Можно изменить цвет по умолчанию для всего текста на странице или же цвет выделенного текста.

Определение цветов по умолчанию для текста страницы

Изменение цвета выделенного текста

Выравнивание текста

Для выравнивания текста с помощью HTML используется подменю «Формат» > «Выравнивание». Чтобы выровнять какой-либо элемент страницы по центру, воспользуйтесь командой «Формат» > «Выравнивание» > «По центру».

Выравнивание текста на странице

  1. Выделите текст, который требуется выровнять, или просто установите курсор в начало текста.
  2. Выберите «Формат» > «Выравнивание» и выберите соответствующую команду выравнивания.

Выравнивание элементов страницы по центру

  1. Выделите элемент (изображение, подключаемый модуль, таблицу или другой элемент таблицы), который необходимо выровнять по центру.
  2. Выберите «Формат» > «Выравнивание» > «По центру».

Отступ текста

С помощью команды «Отступ» можно применить к абзацу текста HTML-тег blockquote , создав отступ текста с обеих сторон страницы.

  1. Установите курсор в абзац, в котором необходимо сделать отступ.
  2. Выберите «Формат» > «Отступ» или «Выступ» либо выберите «Список» > «Отступ» или «Выступ» в контекстном меню.

Применение стилей шрифтов

HTML-форматирование можно применить как к одной букве, так и к целым параграфам и блокам текста на сайте. Используйте меню «Формат» для определения или изменения параметров шрифта для выделенного текста. Можно задать тип шрифта, стиль (например, полужирный или курсив), а также размер.

HTML Форматирование

С помощью тэгов форматирования вы можете выделять семантически важный текст на страницах, создавать тексты «рукописного начертания», вставлять в HTML документы символы с верхним и нижним индексом, а также увеличивать и уменьшать размер шрифта.

Что такое семантика?

Семантика в HTML является практикой предоставления смысла и структуры содержимого документа с помощью соответствующего тега. Семантический код описывает значение содержимого документа, независимо от его стиля или внешнего вида. Есть несколько преимуществ от применения семантических элементов:

  1. семантический код напрямую влияет на объем HTML кода. Чем меньше кода тем «легче» документ, а значит веб-страницы быстрей грузятся и меньше требуется оперативной памяти на стороне пользователя. Сайт становиться быстрей и менее затратным.
  2. компьютеры, экранные ридеры для которых важны теги и их атрибуты, адекватно читают и понимают содержимое веб-страницы.
  3. семантический код при прочих равных условиях, будет выдаваться выше в результатах выдачи поисковых систем, чем страница с несемантическим кодом.

Жирный текст

Чтобы сделать текст жирным и привлечь к нему внимание мы будем использовать строчный элемент . Есть два тега, с помощью которых можно выделить текст жирным шрифтом: теги и . Важно понимать семантическую разницу между ними.

Тег семантически используется, чтобы придать более важное значение тексту и таким образом является наиболее популярным вариантом для жирного текста. Тег , с другой стороны, семантически означает стилистическое выделение текста, который не всегда является лучшим выбором для текста заслуживающего внимания. Вы должны оценить значимость текста для которого хотите установить жирность и выбрать соответствующий тег. Несмотря на то, что браузеры отображают их совершенно одинаково, поисковые системы могут придавать им различное значение при анализе страницы.

HTML-код с тегами и :

Пример: важный и жирный текст

Курсивный текст

Для курсивного текста, на котором тем самым делается акцент, мы будем использовать строчный элемент . Как и с тегами для жирного текста, имеются два разных тега, которые устанавливают курсивный текст, каждый со своим семантическим смыслом.

Тег применяется чтобы сделать акцент на фрагменте текста — это наиболее популярный вариант для курсива. Другой вариант — это использование тега , который применяется просто для создания курсивного текста.

HTML-код с тегами и :

Пример: акцент и курсив

Теги и

Тег уменьшает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега уменьшает текст на одну условную единицу. Тег наоборот увеличивает размер шрифта на единицу по сравнению с обычным текстом.

HTML-код с тегами и :

Пример: уменьшенный и увеличенный шрифт

Внимание: Это чисто презентационный код, элемент удален в HTML5 и вы не должны больше им пользоваться. Вместо элемента веб — разработчики должны использовать CSS свойства.

HTML тег

Тег используется для выделения или подсветки текста из-за его актуальности в контексте. Хорошим примером является выделение слова, которое искал пользователь в документе. Обычно в браузерах фоновый цвет текста внутри контейнера выделяется желтым цветом как чернильным маркером.

HTML тег

Тег используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в исправленном тексте документа были сделаны. Браузеры обычно помечают текст в контейнере как перечеркнутый .

HTML тег .

HTML тег

Тег отображает текст в нижнем индексе. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.Такой текст на практике может быть использован, например для написания различных формул в нижнем индексе .

HTML тег

Тег отображает текст в верхнем индексе. Текст отображается уменьшенным размером и располагается выше, чем базовая линия остальных символов строки. Такой текст на практике может быть использован, например для написания различных формул или сносок в верхнем индексе .

Перевод строк и горизонтальные линии

Тег
(перевод строк)

Как вы уже видели раньше, тег

позволяет логически и физически отделить один абзац текста от другого, но что делать, если внутри абзаца нужно перенести текст на новую строку? Специально для этих целей предназначен одинарный тег
. Одним из видимых с первого взгляда отличий данного тега от

является отсутствие отступов после и перед тегом
. Это позволяет располагать смежные строки текста ближе друг к другу. Возможность самостоятельно определить место переноса может пригодиться при записи стихов либо для отделения различных элементов в документе. Добавьте элемент
в любую строку, где хотите оборвать поток текста и вставить разрыв строки.

Тег (горизонтальная линия)

Горизонтальные линии позволяют разделить длинный формально неограниченный текст на отдельные подразделы. Горизонтальные линии в веб-документе играют такую же роль, как орнаментальные полосы в печатных изданиях. Для вставки горизонтальной линии используется одинарный тег . Данный блочный одинарный тег позволяет вставить горизонтальную черту, ширина которой равна либо всей ширине контейнера, в который вложен тег, либо ширине окна браузера.

Пример: перевод строк и горизонтальные линии

Эти строки отделены друг от друга с помощью абзаца (p):

Это первый абзац.

Это второй абзац.

Эти строки отделены друг от друга с помощью тега br:
Наша Таня громко плачет
Уронила в речку мячик

Форматирование HTML-абзаца

Напоследок мы рассмотрим блочные элементы, которые используются практически в каждом документе. Это теги заголовков и абзаца. Рассмотрим первое. Заголовки бывают 6-ти видов и каждый имеет свой тег. Каждый вид носит лишь свой порядковый номер и записывается с помощью тегов

. Вот как выглядят все заголовки в обработанном виде:

Цифра после слова заголовок соответствует цифре в теге . Заголовки оказывают огромное влияние на на внутреннюю оптимизацию, поэтому заключайте в теги ключевые слова. Особенностей этого дела довольно много, о чем я расскажу в последующих статьях.

А теперь поговорим про тег выделения абзаца

. Функция данного тега заключается в отделении текста между

от другого такого же текста пустой строкой. Если посмотреть исходный код какого-либо документа, то вы можете увидеть следующее:

В зеленых прямоугольниках один абзац, в красных — другой. А вот как этот код выглядит после обработки браузером (стрелочка указывает на пустую строку):

В итоге мы получаем довольно заметное отделение одного абзаца от другого, что идет на пользу — чтение становится более удобным.

) и закрывающий (

Точно также, как и в элементе абзац, в заголовках можно использовать атрибут ALIGN . Его применение здесь важно с той точки зрения, что не все программы просмотра выравнивают заголовки по левому краю окна.

Другим методом разделения документа на части является проведение горизонтальных линий. Они визуально подчеркивают законченность той или иной части страницы.

Элемент позволяет провести рельефную горизонтальную линию в окне большинства программ просмотра. Этот тэг не является контейнером, поэтому не имеет закрывающего тэга. До и после линии автоматически вставляется пустая строка.

Тэг имеет следующие атрибуты:

ALIGN — выравнивает по раю или центру; имеет значения LEFT , CENTER , RIGHT

WIDTH — устанавливает длину линии в пикселах или процентах от ширины окна браузера; в последнем случае добавляется символ %

SIZE — Устанавливает ширину линии в пикселах

NOSHADE — отменяет рельефность линии

COLOR — Указывает цвет линии

HTML имеет специальный тэг контейнер, в который можно включать предварительно отформатированный текст. При этом можно в большей степени контролировать вывод документа программой просмотра, правда, за счет некоторой потери гибкости.

Наиболее употребительным является контейнер

. Текст внутри него может записываться в любой форме. Универсальность этого контейнера позволяет создавать таблицы и ровные колонки текста. Другим важным применением является вывод на экран больших блоков программного кода, не позволяющий браузеру переформатировать их.

Текст внутри контейнера

может содержать любые элементы физического и логического форматирования. Возможно, например, создание таблицы с заголовком, данным полужирным шрифтом, и данными, выделенными курсивом. Однако запрещено использование тэга и тэгов заголовка.

Самым большим недостатком контейнера

является возможность вывода преформатированного текста только моноширинным шрифтом. Это делает вид преформатированных cтрок слишком громоздким.

Лабораторная работа №1. Создание простейшего HTML-документа. Форматирование шрифта и абзаца

Лабораторная работа №1. Создание простейшего HTML-документа. Форматирование шрифта и абзаца

Цель работы:

· Научиться создавать простейший гипертекстовый документ средствами текстового редактора Блокнот.

· Научиться использовать теги форматирования шрифта и абзаца.

Задание на выполнение

1. Создать файл с гипертекстовым документом:

· Запустить редактор Блокнот, ввести текст:

Приветствую Вас на моей первой web-страничке!

· Сохранить файл в созданной папке. При сохранении, в окне диалога Сохранить как… в строке Тип файла: выбрать вариант Все файлы (*.*) , а в строке Имя файла задать имя с расширением.htm, например 1_name.htm (где name – ваше имя)

· Закрыть документ, найти его пиктограмму в окне Мой компьютер или в окне программы Проводник.

· Открыть файл. Проанализировать, с помощью какого приложения отображается файл и как выглядит введенная фраза.

2. Ввести теги, определяющие структуру html-документа:

· С помощью контекстного меню открыть файл с помощью редактора Блокнот. Ввести приведенные ниже теги, в разделе заголовка документа (между тегами ) указать свою фамилию.

Приветствую Вас на моей первой web-страничке!

· Сохранить документ под тем же именем, обновить его отображение в броузере (выполнить Вид/Обновить или нажать кнопку Обновить на панели инструментов). Проанализировать произошедшие изменения в отображении документа.

3. Отредактировать документ:

· Вызвать меню броузера Вид/Просмотр HTML-кода и добавить после текста «Приветствую Вас на моей первой web-страничке!» текст подписи:

Студент группы NNN Фамилия Имя

Сохранить документ (но не закрывать) и обновить его просмотр в броузере.

· Используя одиночный тег , отредактировать документ так, чтобы подпись начиналась с новой строки, а Фамилия Имя – в следующей строке. Просмотреть в броузере новый вариант.

Внимание! После каждого изменения документ нужно сохранять, а просмотр в броузере начинать с обновления загрузки документа с помощью кнопки «Обновить» на панели инструментов.

4. Оформить фрагменты текста с помощью стилей Заголовков:

· Первую строку документа оформить стилем Заголовок 1-го уровня с помощью парного тега . Вторую строку оформить как Заголовок 6-го уровня, а третью как Заголовок 4-го уровня.

· Просмотреть документ в броузере, изменяя настройку отображения шрифтов (меню Вид / Размер шрифта / Самый крупный, Средний, Мелкий и Самый мелкий).

· Поменять стиль оформления первой строки на Заголовок 2 уровня, второй строки — на Заголовок 5 уровня, последней строки — на Заголовок 3-го уровня.

5. Выполнить форматирование шрифта:

· После строки Фамилия Имя добавить еще одну строку текста

Нас утро встречает прохладой

· Оформить фразу по приведенному ниже образцу.

В слове УТРО все буквы должны иметь разные цвета. В слове ПРОХЛАДОЙ оформить буквы ПРО – красным цветом, ОЙ – синим.

· Оформить строку с подписью (Студент группы NNN Фамилия Имя) курсивом, размер шрифта задать относительным изменением. Использовать теги и

· Просмотреть полученный документ в броузере.

6. Выполнить форматирование абзацев:

· Создать новый документ 2_name.htm, сохранить его в той же рабочей папке.

· Ввести текст (использовать копирование текста из документа 1_name.htm):

Приветствую Вас на моей второй web-страничке! Монолог Гамлета

· Выровнять текст по центру.

Быть иль не быть — вот в чем вопрос. Что благороднее: сносить удары неистовой судьбы — иль против моря невзгод вооружиться, в бой вступить. И все покончить разом.

· Оформить выравнивание абзаца по ширине.

· Ограничить абзац горизонтальными разделительными линиями сверху и снизу, используя тег .

· Скопировать монолог и разбить его на абзацы. Выровнять по центру.

Быть иль не быть — вот в чем вопрос.
Что благороднее: сносить удары
Неистовой судьбы — иль против моря
Невзгод вооружиться, в бой вступить
И все покончить разом.

· Просмотреть документ в окне броузера, изменяя размер окна.

7. Выполнить оформление списков:

· Создать новый документ 3_name.htm, сохранить его в той же рабочей папке жесткого диска.

Приветствую Вас на моей третьей web-страничке!

· Дополнить текст документа (между тегами … ) следующим текстом:
Я знаю как оформлять:
Шрифты,
Заголовки,
Абзацы

· Оформить три последние строки как список нумерованный. Для этого использовать следующую конструкцию тегов:

· Поменять оформление списка на список маркированный. Использовать теги


    ,

· Создать «смешанный» список:

Я знаю как оформлять:

· От 1-го до 6-го уровня

· Разрыв строк внутри абзаца

· С использованием переформатирования.

8. Предъявить результаты работы преподавателю.

Таблица основных тегов HTML-документа. Теги форматирования шрифта и абзаца

Общая структура документа HTML

Начало и конец документа

Не отображается броузером

Содержимое строки заголовка окна броузера

Структура содержания документа

Внутренние заголовки различного уровня

Где № – номер уровня заголовка (от 1 до 6). Например,

Заголовок с выравниванием

LEFT — по левому краю,

CENTER — по центру,

RIGHT — по правому краю.

Создание абзаца (параграфа)

Абзацы отделяются двойным межстрочным интервалом

Перевод строки внутри абзаца

LEFT — по левому краю

CENTER — по центру

RIGHT — по правому краю

JUSTIFY – по ширине

Разделительная горизонтальная линия между абзацами

Одиночный тег. «?» — толщина линии в пикселях. Толщину линии можно не указывать.

?- значения от 1 до 7 или относительное изменение


(например, +2)

Базовый размер шрифта

? – размер от 1 до 7; по умолчанию равен 3 и задается для всего документа в целом

Текст оформляется первым, установленным на компьютере шрифтом из списка названий

Цвет задается либо ключевым словом, либо шестнадцатеричным кодом с символом #

RED –красный, #FF0000 – шестнадцатеричный код – красного цвета

Форматирование HTML-документа

К форматированию документа можно отнести изменение внешнего вида документа: форматирование страницы, разбиение текста на абзацы, выделение заголовков, форматирование символов и др.

Настройка внешнего вида страницы

Задавая параметры у тэга можно изменять внешний вид всей web_странички.

Тэг может иметь следующие параметры:

  • · bgcolor — задает цвет фона страницы;
  • · text — задает цвет текста всей страницы по умолчанию;
  • · link — задает цвет ссылки, еще не посещенной;
  • · vlink — задает цвет ссылки, уже посещенной;
  • · alink — задает цвет активной ссылки (в момент нажатия по ней);
  • · background — задает фоновый рисунок страницы;
  • · leftmargin , rightmargin, topmargin, bottommargin — задают левое, правое, верхнее и нижнее поля страницы соответственно (в пикселях, px).

Рассмотрим параметры более подробно.

Задание цвета фона и текста странички

Цвет можно задавать тремя способами:

1. через английский эквивалент названия цвета. Например,

задает красный цвет фона.

2. через RGB-формат “#XXXXXX ”, где X — это число от 0 до F (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F), первая пара цифр отвечает за насыщенность красного цвета, вторая пара — за насыщенность зеленого, третья пара — синего. Например, для задания красного цвета используем название «red»

задает красный цвет фона.

3. через RGB-формат rgb(Х,Х,Х), где Х — это число от 0 до 255, первая цифра отвечает за насыщенность красного цвета, вторая — за насыщенность зеленого, третья — синего. Например,

задает красный цвет фона.

Примечание. Основные оттенки цветов web-палитры можно посмотреть в приложении к методическому пособию.

Создайте HTML-документ format.html. В нем задайте желтовато-коричневый цвет фона и темно-зеленый цвет текста.

  • · В конце пособия откройте web-палитру цветов.
  • · Найдите в ней соответствующие значения нужных цветов: желтовато-коричневый — #D2B48C, темно-зеленый — darkgreen.
  • · Для задания цвета фона и текста используйте параметры тэга — bgcolor и text:
  • · В теле странички напишите текст: «В языке HTML значения параметров тэгов, как правило, пишутся в кавычках. Но если в значении параметра нет пробелов, то кавычки можно и опустить. Нет правил без исключений!».
  • · Просмотрите страничку в окне браузера.

Задание фонового рисунка.

Вы также можете повысить интерес к своей страничке, сделав фон страницы не одним цветом, а текстурой. Текстура — это небольшое изображение, которым «мостят» фон, т.е. оно многократно копируется как по вертикали, так и по горизонтали. Для создания текстур, обычно, применяют специальные графические редакторы, в которых есть инструменты создания текстур — текстуризаторы. Однако можно создать текстуру с помощью простых редакторов и инструментов, соблюдая следующие правила:

  • 1. Рисунок не должен быть очень контрастным, т.е. пестрым.
  • 2. Рисунок либо не должен обрываться на границе, либо его границы должны «сшиваться».
  • 3. Если рисунок яркий, то шрифт документа должен быть темным и наоборот.
  • 4. Размер «плитки» текстуры выбирайте в пределах от 3х3 до 5х5 см.

Текстурный рисунок должен быть сохранен в формате GIF или JPG. После чего, в параметре background тэга нужно указать путь к фоновому рисунку. Например,

Примечание. Данный пример, говорит о том, что картинка лежит в том же каталоге (директории, папке), в которой лежит и наш документ.

Если картинка лежит в поддиректории (например, “images”), то путь к ней будет выглядеть так:

Если картинка лежит на уровень выше, а документ находится в поддиректории, то путь к ней будет выглядеть так:

Если картинка лежит на другом сайте, то путь прописывается полностью:

Для вашего удобства размещайте картинку в той же директории, что и документ, тогда путаницы будет меньше.

Страничке format.html, созданной в упражнении 2.1, задайте фоновый рисунок (рис. 2.1).

  • · В графическом редакторе «Paint» создайте простейший фоновый рисунок. (Например,).
  • · Сохраните его в ту папку, где находится Ваша страничка под именем fon.jpg.
  • · В коде странички у тэга добавьте параметр background:
  • · Не забудьте про заголовок странички: «Форматирование HTML-документа».
  • · Посмотрите результат в окне браузера.

Задание полей странички.

Поля страницы (отступы текста от границ окна браузера) задаются через параметры leftmargin, rightmargin, topmargin, bottommargin. Значения этих параметров указываются в пикселях. Например,

У созданного в предыдущих упражнениях HTML-документа format.html задайте поля: левое — 100 пикселей, правое — 80 пикселей, верхнее и нижнее — 50 пикселей.

· У тэга опишите новые параметры (выделено полужирным шрифтом):

· Посмотрите результат в окне браузера.

Создайте HTML-документ pautina.html с названием «Всемирная паутина: первое знакомство». Отформатируйте документ: цвет фона — голубовато-стальной, цвет текста — блекло-голубой, поля страницы — все по 50 пикселей. В тело странички внесите текст:

«WWW (World Wide Web) — территориально распределенная гипертекстовая система Internet, или «Всемирная паутина». В сети Internet это сервис, предназначенный для доступа к информации, организованной при помощи гипертекстовых связей».

Задайте фоновый рисунок у HTML-документа pautina.html.

Предположим, что Вы хотите разбить текст на параграфы. Для этого нужно перед началом параграфа поставить тэг

имеет следующие параметры:

  • · title — краткое описание параграфа (всплывает в виде подсказки при наведении на текст параграфа);
  • · align — задает выравнивание абзаца. Параметр align может принимать следующие значения:
  • сenter текст абзаца выравнивается по центру;
  • left — по левому краю;
  • right — по правому краю.
  • justify — по ширине экрана

Создайте HTML-документ paragraph.html с названием странички «Параграфы». В этот документ добавьте текст, используя разбиение на абзацы с различным выравниваем:

А текст, выровненный по центру, используют для оформления коротких заголовков, но большой текст в таком виде читать очень тяжело.

Просмотрите ее в окне браузера.

Примечание. Обратите внимание на то, что значение у параметра align указано без кавычек, а у параметра title значение задано в кавычках. Почему? Подсказка: прочтите текст странички format.html.

Большинство документов имеют заголовок. Для его создания используют тэги , где x — число от 1 до 6. Заключив текст между этими тэгами, Вы получите заголовок соответствующего уровня.

Создайте HTML-документ headings.html и добавьте в него примеры встроенных заго


ловков различного уровня:

Заголовок 1

Заголовок 2


Заголовок 3


Заголовок 4


Заголовок 5

Заголовок 6

Просмотрите результат в окне браузера (см. рис. 2.2).

В HTML-документ pautina.html, созданный в задании 2.1, добавьте заглавие текста «Всемирная паутина: первое знакомство». Отформатируйте заглавие с помощью встроенных заголовков.

Принудительный перенос на новую строку.

Браузеры игнорируют множественные пробелы и символы конца строки. Для принудительного переноса на следующую строку используется тэг . С помощью этого тэга так же можно вставлять пустые строки.

Создайте HTML-документ romans3.html, содержащий текст стихотворения Игоря Северянина «Романс 3».

    · Каждое четверостишие начинайте новым абзацем (тэг

).

  • · Используйте тэг
    для принудительного переноса строк внутри четверостиший.
  • · Название стихотворения оформите встроенным заголовком 3 уровня.
  • · Подпись автора стихотворения выровняйте по правому краю.
  • РОМАНС III

    За каждую строку, написанную кровью,

    За каждую улыбку обо мне, —

    Тебе ответствую спокойною любовью

    И образ твой храню в душевной глубине.

    Не видимся ли миг, не видимся ль столетье —

    Не все ли мне равно, не все ль равно тебе,

    Раз примагничены к бессмертью цветоплетью

    Сердца углубные в медузовой алчбе.

    О, да: нам все равно, что мы с тобой в разлуке,

    Что у тебя есть муж, а у меня — жена.

    Ищи забвения в искусстве и в науке.

    И в сновидениях, и в грезности вина.

    · Посмотрите страничку в окне браузера.

    Текст с отступом.

    Текст, заключенный между тэгами и , выводится браузером на экран с увеличенным левым полем.

    Создайте HTML-документ viveskam.html со стихотворением Владимира Маяковского «Вывескам»:

    Читайте железные книги!

    Под флейту золоченой буквы

    Полезут копченые сиги

    И золотокудрые брюквы.

    А если веселостью песьей

    Закружат созвездия «Магги» —

    Бюро похоронных процессий

    Свои проведут саркофаги.

    Когда же, хмур и плачевен,

    Загасил фонарные знаки,

    Влюбляйтесь под небом харчевен

    В фаянсовых чайников маки!

    · Отформатируйте название стихотворения встроенным заголовком, например, 4 уровня:

    Вывескам

    • · Четверостишия стихотворения оформите с использованием тэга
      (как в упражнении 2.6).
    • · Для отступа второго четверостишия заключите его текст между тэгами

    А если веселостью песьей

    Закружат созвездия «Магги» —

    Бюро похоронных процессий

    Свои проведут саркофаги.

    · Посмотрите результат в окне браузера.

    Предварительно форматированный текст.

    Как уже было сказано ранее, браузеры игнорируют множественные пробелы и символы конца строки. Из этого правила, однако, есть исключение. Текст, заключенный между метками и (от англ. preformatted — предварительно форматированный), выводится браузером на экран как есть — со всеми пробелами, символами табуляции и конца строки.

    Добавьте на вашу страничку стихотворение Маяковского, сохраняя все отступы и переносы, для сохранения отступов и переносов используйте тэг

    Посмотрите результат в окне браузера.

    Примечание. Обратите внимание, что в предварительно форматированном тексте по умолчанию используется шрифт фиксированной ширины (Courier).

    Форматирование символов можно условно разделить на логическое и физическое. При логическом форматировании разработчик web-странички структурирует документ, выделяет логические части, одновременно изменяя внешний вид символов. При физическом форматировании разработчик не учитывает контекста и лишь придает некоторым символам конкретный вид.

    Применяя тэги логического или физического форматирования, мы в принципе получаем одинаковый результат. Но логическое форматирование и четкое структурирование являются признаками хорошо составленного документа. При использовании логических тэгов в ближайшем будущем станет возможным, например, автоматический поиск цитат в сети Internet.

    Для логического форматирования существует группа форматирующих тэгов.

    — используется для выделения цитат или названий книг и статей, при этом текст обычно выводится курсивом. Например:

    Я прочитал Войну и мир

    — применяется для вывода небольшого куска программного кода шрифтом фиксированной длины (для больших листингов используется тэг

    Одну из первых строчек, которые узнает программист, это:

    Print “Hello,


    World!”

    — используется для выделения важных фрагментов текста. Браузер обычно отображает такой текст курсивом. Например,

    Изменение внешнего вида символов и абзацев называется форматированием

    — выделяет шрифтом фиксированной ширины текст, который предлагают ввести пользователю с клавиатуры. Например,

    Для запуска программы-кодировщика введите в поле слово Кодировка

    — используется для выделения нескольких символов шрифтом фиксированной ширины. Например,

    ABC — этими буквами в Америке обозначают алфавит.

    — используется для выделения важных фрагментов текста полужирным шрифтом.

    — используется для отметки имен переменных. Обычно такой текст выделяется курсивом. Например,

    Пусть задана функция: y=2x

    — используется при выделении почтового адреса курсивом.

    — используется для зачеркивания текста.

    Создайте HTML-документ logical.html. Внесите в него тексты приведенных выше примеров и просмотрите страничку в окне браузера.

    Для физического форматирования используются следующие тэги:

    • · — полужирный шрифт
    • · — курсив
    • · — подчеркнутый
    • · — выделение перечеркиванием
    • · — текст отображается шрифтом фиксированной ширины (чаще всего шрифт Courier)
    • · — текст отображается больше, чем основной шрифт
    • · — текст отображается меньше, чем основной шрифт
    • · — нижний индекс
    • · — верхний индекс

    Создайте HTML-документ physical.html и добавьте на страничку текст с использованием описанных выше тэгов физического форматирования:

    При использовании тэгов начертания текст может быть полужирным , курсивным и подчеркнутым

    Также можно сделать полужирный курсив , полужирный подчеркнутый и даже полужирный подчеркнутый курсив! . Кроме того, текст можно зачеркнуть !

    Просмотрите результат в окне браузера.

    Примечание. Обратите внимание, что при использовании комбинации парных тэгов следует быть внимательней с порядком их расположения. Последовательность закрывающих тэгов должна быть «зеркальной» по отношению к последовательности открывающих тэгов. То есть, если первым из открывающих тэгов стоит , а затем , то сначала следует написать тэг , а затем уже .

    Создайте HTML-документ formula.html и добавьте в него химическую формулу воды — H2O и математическую формулу кубической функции — y=x 3 (рис.2.3)

    • · Для создания верхнего и нижнего индексов используйте соответствующие тэги и .
    • · Результат просмотрите в окне браузера.

    Работа со шрифтом.

    Некоторые тэги вообще не имеет смысла применять без атрибутов. К таким тегам можно отнести тэг . Тэг применяется при работе со шрифтом и имеет следующие параметры:

    • · size — задает размер шрифта (задается в пунктах; по умолчанию размер шрифта принят равным 3);
    • · face — задает тип шрифта. Очень аккуратно используйте этот атрибут, так как заданный шрифт должен присутствовать на компьютере пользователя — в противном случае браузер подставит шрифт, определенный по умолчанию (как правило, это Times New Roman). Применяйте шрифты, в наличии которых вы уверены, иначе пользователь увидит текст иначе, чем вы. К стандартным шрифтам можно отнести шрифты, поставляемые с Windows 95/98, MS Office;
    • · color — задает цвет шрифта. Способы задания цвета были рассмотрены в разделе «Настройка внешнего вида страницы»;

    Работа с размером шрифта. Создайте HTML-документ font.html и добавьте текст в тело странички:

    Просмотрите страничку в окне браузера.

    Работа с цветом шрифта. Добавьте текст в тело странички font.html и просмотрите ее в окне браузера:

    Создайте HTML-документ rainbow.html и внесите в него текст:

    Каждый охотник желает знать, где сидит фазан.

    Каждое слово окрасьте в соответствующий цвет радуги.

    Некоторые символы не возможно просто набрать с клавиатуры: это буквы алфавитов части европейских языков, математические и некоторые другие символы. Некоторые символы, введенные в HTML-документ, могут быть неверно поняты браузером: например, символы » » используются браузером для указания тэгов и, возможно, быть интерпретированы только так.

    Вместо символов этой группы необходимо использовать замену. Например,

    Примечание. Более полную таблицу специальных символов можно посмотреть в приложении к методическому пособию.

    Создайте HTML-документ symbols.html с заголовком «Использование замены спецсимволов».

    В тело документа внесите текст, используя замены символам :

    Тэг &ltBR&gt используется для принудительного переноса строк.

    Текст, заключенный между парными тегами &ltBLOCKQUOTE&gt и &lt/BLOCKQUOTE&gt будет иметь отступ от левого края окна браузера.

    Посмотрите результат в окне браузера.

    Создайте HTML-документ functions.html, содержащий следующие формулы (для специальных символов , ,, используйте замену):

    Функции сокращенного умножения:

    Логарифмы:

    Тригонометрия:

    Создание бегущей строки

    Текст абзаца можно сделать «движущимся», т.е. оформить его в виде бегущей строки. Для этого используйте тэг ..

    Тэг имеет следующие параметры:

    • · bgcolor — задает цвет фона;
    • · height — задает высоту фоновой полосы (в пикселях или процентах от высоты окна бруазера);
    • · width — ширина полосы бегущей строки (в пикселях или процентах от ширины окна браузера;
    • · direction — задает направление бегущей строки:
      • left — справа налево (это значение используется по умолчанию),
      • right — слева направо,
      • up — снизу вверх,
      • down — сверху вниз.
    • · behavior — управляет поведением бегущей строки:
    • scroll — дойдя до края, строка уходит из поля зрения, затем появляется с противоположной стороны,
    • slide — строка, достигнув края окна, останавливается,
    • alternate — строка, достигнув противоположного края окна, меняет свое направление.
    • · hspace, vspace — задает горизонтальный и вертикальный соответственно отступы у бегущей строки (в пикселях);
    • · loop — задает количество переходов строки по экрану;
    • · scrollamount — задает скорость движения строки (в пикселях в секунду);
    • · scrolldelay — определяет временной интервал (в миллисекундах) между шагам;

    Добавьте в начало вашей странички бегущую строку «Всем привет! Меня зовут…».

    · Для этого заключите текст строки между тэгами и

    Всем привет! Меня зовут…

    • · Отформатируйте строку: измените размер шрифта, начертание, цвет текста.
    • · Изменяя значения атрибутов тэга измени

      те поведение бегущей строки: при достижении границы окна, она должна менять направление, увеличьте скорость перемещения строки.

    Создайте страничку hello.html с бегущей строкой «Привет!», которая двигается в различных направлениях, подобно бильярдному шарику, отталкиваясь от края окна браузера и меняя свое направление.

    Примечание. Используйте вложенную конструкцию с различными направлениями.

    Очень важный элемент web-страничек — это списки. Они бывают:

    нумерованными, например:

    • 1. Кадровик.
    • 2. Секретарь.
    • 3. Заведующий магазинами.
    • 4. Маркетолог.

    маркированными, например:

    Предлагаем стоматологические услуги:

    • · протезирование зубов;
    • · удаление зубов без боли;
    • · рентген;
    • · детский прием.

    смешанными, то есть, сочетать в себе элементы того и другого списка.

    В нумерованном списке (Оrdered List) каждому элементу предшествует его порядковый номер. Для организации нумерованного списка используются следующие тэги:

    — открывает нумерованный список

    — задает элемент списка (List Item)

    Тэг


      имеет два параметра:

    • · start — задает число, с которого начинается нумерация (по умолчанию с 1);
    • · type — задает тип нумерации (по умолчанию арабская нумерация 1,2,3,…):
    • — type=“i” — нумерация римскими малыми (i, ii, iii, …);
    • — type=“I” — нумерация римскими заглавными (I,II,III,…);
    • — type=“a” — нумерация английскими малыми (a, b, c, …);
    • — type=“A” — нумерация английскими заглавными (A, B, C,…).

    В маркированном списке (Unordered List) каждому элементу списка предшествует маркер. Для создания маркированного списка используют следующие тэги:

    — задает элемент списка

    Тэг


      тоже имеет параметр type, с помощью которого можно задавать вид маркера:

    • — type=»circle» — в списке используется маркер ;
    • — type=»square» — в списке используется маркер ;
    • — type=»disc» — в списке используется маркер (этот маркер используется по умолчанию).

    Создайте HTML-документ orderedlist.html и добавьте в него нумерованный список, указанный в примере:

    • · Просмотрите результат в окне браузера.
    • · C помощью параметра type задайте нумерацию римскими заглавными:

    · Просмотрите результат в окне браузера: нумерация сменилась на заглавные римские цифры.

    Создайте HTML-документ unorderedlist.html и добавьте в него маркированный список, указанный в примере:

    Предлагаем стоматологические услуги:

    удаление зубов без боли;

    • · Просмотрите результат в окне браузера.
    • · C помощью параметра type измените стандартный вид маркера на квадратик :

    · Просмотрите результат в окне браузера: маркер с кружка «» сменился на квадратик «».

    Создайте HTML-документ kurs.html и добавьте в него смешанный список: во внешнем нумерованном списке используйте нумерацию заглавными римскими цифрами, во вложенном маркированном — маркер «диск» — (см. рис. 2.12):

    Изучение курса HTML включает в себя:

    Введение в HTML

    Настройка внешнего вида страницы

    Вставка рисунков в HTML-документа

    Работа с таблицами

    Каскадные таблицы стилей (CSS)

    Слои и позиционирование

    Просмотрите результат в окне браузера (рис. 2.4).

    Создайте HTML-документ about.html и перечислите ваши увлечения, используя маркированный список, и список дисциплин, которые вы изучаете в университете, используя нумерованный список. Отформатируйте текст: задайте цвет, тип шрифта, начертание, размер шрифта. В конце документа добавьте строчку:

    Иванов И.И. 2005г

    Для вставки специального символа используйте замену на соответствующий код или имя.

    Измените HTML-документ kurs.html, созданный в упражнении 2.17: в скобочках у каждого пройденного раздела напишите примеры изученных тэгов (используйте замену для символов « »). Например,

    Структура HTML документа (тэги &ltHTML&gt, &ltBODY&gt, &ltHEAD&gt и другие)

    Результат в окне браузера (рис. 2.5)

    Вопросы для повторения

    • 1. С помощью параметров какого тэга можно настроить внешний вид всей web_странички? Перечислите эти параметры.
    • 2. С помощью какого тэга можно форматировать абзац? Какие параметры имеет данный тэг?
    • 3. С помощью какого тэга можно создать встроенный заголовок? Сколько уровней имеет встроенный заголовок?
    • 4. В каких случаях нужно применять тэг
      ? тэг

    ?

  • 5. Чем логическое форматирование символов отличается от физического форматирования?
  • 6. С помощью какого тэга можно управлять цветом, размером, типом шрифта? Какие параметры нужно при этом использовать?
  • 7. Какими тремя способами можно задават

    ь цвет?
  • 8. Что такое специальные символы?
  • 9. Какие виды списков вы знаете? С помощью каких тэгов они задаются?
  • Мастер Йода рекомендует:  Сайт для себя как получить 25 000 уникальных посетителей за 4 дня

    Добавить комментарий