| Браузер | Internet Explorer | Netscape | Opera | Safari | Mozilla | Firefox | |||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Версия | 5.5 | 6.0 | 7.0 | 6.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 1.0 | 1.7 | 1.0 | 2.0 |
| Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да |
Описание
Тег представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей.
Синтаксис
Текст
Закрывающий тег
Обязателен.
Параметры
color Устанавливает цвет текста. face Определяет гарнитуру шрифта. size Задает размер шрифта в условных единицах.Пример 1. Использование тега
Первая буква этого предложения написана шрифтом Arial, выделена красным цветом и увеличена в размерах.
Описание параметров тега
Параметр COLOR
Описание
Устанавливает цвет текста внутри контейнера .
Синтаксис
...
Аргументы
Значение цвета можно задавать двумя способами.
1. По его названию
Браузеры поддерживают некоторые цвета по их названию.
2. По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов - красный, зеленый и синий - может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних - зеленую, а два последних - синюю.
Аналог CSS
Значение по умолчанию
Цвет, установленный в браузере по умолчанию.
Параметр FACE
Описание
Параметр face служит для задания гарнитуры шрифтов, использующихся для текста. Названий шрифтов можно привести несколько, через запятую. В этом случае, если первый указанный шрифт не будет найден, браузер станет использовать следующий по списку.
Синтаксис
...
Аргументы
Любое количество имен шрифтов разделенных запятыми. Универсальные семейства
шрифтов:
serif
- шрифты с засечками (антиквенные),
типа Times;
sans-serif
- рубленные шрифты (шрифты без
засечек или гротески), типичный представитель - Arial;
cursive
- курсивные шрифты;
fantasy
- декоративные шрифты;
monospace
- моноширинные шрифты, ширина каждого
символа в таком семействе одинакова.
Аналог CSS
Значение по умолчанию
Шрифт, установленный в браузере по умолчанию.
Параметр SIZE
Описание
Ззадает размер шрифта в условных единицах от 1 до 7. Средний размер, используемый по умолчанию принят 3. Размер шрифта можно указывать как абсолютной величиной (например, size="4" ), так и относительной (например, size="+1" , size="-1" ). В последнем случае размер изменяется относительно базового. На размер шрифта влияет не только заданный параметр size , но и выбор гарнитуры шрифта. Так, шрифт Arial выглядит крупнее, чем шрифт Times, а шрифт Verdana чуть больше шрифта Arial. Учитывайте эту особенность при выборе шрифта и его размеров.
Синтаксис
...
Аргументы
Целое число от 1 до 7 или изменение значения в большую или меньшую сторону с помощью символов + и -.
Форматирование текста в HTML - способы и примеры - 4.0 out of 5 based on 1 vote
Как изменять разбивать его на абзацы и , мы рассмотрели в прошлых уроках.
В этом уроке мы рассмотрим, каким образом можно производить форматирование текста в HTML и какие для этого существуют теги.
Вначале рассмотрим, каким образом можно изменять вид текста при помощи тега и парного закрывающего его . У тега имеется несколько атрибутов. При помощи атрибута face="" можно задать шрифт текста. Для этого между кавычек в атрибуте face="" необходимо прописать название шрифта.
Например: Ваш текст
В данном примере был задан шрифт Arial и весь текст, размещенный между тегами, будет отображен этим шрифтом. Можно указывать не один, а несколько шрифтов через запятую, в этом случае будет выбран первый подходящий шрифт из списка. Т. е. если например первого шрифта в системе у пользователя, зашедшего на вашу страницу не окажется, то будет выбран второй шрифт.
Записывается это так: Ваш текст
С выбором шрифта нужно быть осторожным. Не нужно указывать различные экзотические шрифты. Потому как их просто может не оказаться на компьютере вашего посетителя. Лучше всего использовать стандартные шрифты, например Arial, Times Roman, Vernada, Tahoma.
Следующий атрибут тега это size="". При помощи данного атрибута, можно задавать размер шрифта. Для этого между кавычек необходимо указать цифру от 1 до 7.
Например: Ваш текст
Кроме этого существует еще одна группа HTML тегов применяемых для форматирования текста, при помощи их текст можно выделить жирным, курсивом, подчеркнуть или зачеркнуть.
Сделать текст жирным можно при помощи тега и парного закрывающего его . Текст, размещенный между этими тегами, будет жирным. Кроме этого жирным текст можно сделать при помощи тега и парного закрывающего его . Для выделения ключевых слов на странице лучше пользоваться вторым тегом.
Например: Жирный текст
Сделать текст курсивом можно при помощи тега текст, размещенный между этими двумя тегами, будет иметь наклон вправо.
Например: Текст курсивом
Подчеркнутый текст можно сделать при помощи тега и парного закрывающего его тега . Под текстом, размещенным между этими тегами, будет проходить линия.
Например: Подчеркнутый текст
Перечеркнутый текст можно создать при помощи тега и парного закрывающего его тега текст, заключенный между этими тегами, будет по центру, перечеркнут линией.
Например:
Перечеркнутый текст
Следующий тег HTML, применяемый для форматирования текста это и парный закрывающий его . Текст, заключенный между этими тегами будет больше относительно основного.
Например: Большой текст
Тег и парный закрывающий его прямая противоположность тегу рассмотренному чуть выше. Текст, заключенный между этими тегами будет меньше по размеру относительно основного текста.
Например: Маленький текст
Ну и наконец, нам осталось рассмотреть еще два тега это теги , которые определяют верхний индекс, т. е. текст, расположенный между этими тегами будет меньше по размеру и отображаться вверху относительно основного шрифта.
Например: Верхний индекс
И теги определяют нижний индекс. Тест, заключенный межу эти тегами будет располагаться ниже основного текста.
Например: Нижний индекс
Вот собственно при помощи данных тегов вы можете определить тот или иной стиль шрифта и производить форматирование текста в html.
Материал подготовлен порталом:
ФЕДЕРАЛЬНОЕ АГЕНТСТВО ПО ОБРАЗОВАНИЮ Белгородский государственный технологический университет им. В. Г. Шухова
С.П. Гавриловская, Р.А. Мясоедов, А.И. Рыбакова
ИНТЕРНЕТ-ТЕХНОЛОГИИ
Методические указания к выполнению расчетно-графического задания
для студентов экономических направлений
Белгород
Лабораторная работа № 1 Структура HTML документа. |
|
Форматирование HTML документа..................................................... |
|
Лабораторная работа № 2 Списки простые и вложенные. |
|
Создание HTML–таблиц....................................................................... |
|
Лабораторная работа № 3 Создание гиперссылок. |
|
Работа с графикой в HTML-документах.......................................... |
|
Лабораторная работа № 4 Технология CSS. |
|
Проектирование оформления web-сайта............................................ |
|
Лабораторная работа № 5 Создание интерактивных |
|
HTML-документов.............................................................................. |
ЛАБОРАТОРНАЯ РАБОТА № 1 СТРУКТУРА HTML ДОКУМЕНТА.
ФОРМАТИРОВАНИЕ HTML ДОКУМЕНТА
Цель работы: создание и тестирование HTML-файла. Понятие о контейнерах, парных и непарных тегах и элементах.
HyperText Markup Language (HTML) является стандартным языком,
предназначенным для создания гипертекстовых документов в среде WEB. HTML-документы могут просматриваться различными типами WEB-браузеров. Когда документ создан с использованием HTML, WEBбраузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей.
HTML-документы могут быть созданы при помощи любого текстового редактора или специализированных HTML-редакторов и конвертеров. HTML-документы размещаются на Веб-узлах.
Веб-узел – это специальная папка, в которой размещены файлы, содержащие текстовую информацию по какой-либо теме в формате HTML, а также информацию в виде рисунков, графиков, фотографий, анимационных изображений и звуковых эффектов. Существует два вида веб-узлов:
Создаваемые на веб-сервере поставщика услуг Интернета. Создаваемые в интрасети как веб-узлы группы.
Последовательность создания проекта
Процесс создания проекта состоит из нескольких этапов.
На первом этапе , прежде чем приступить к созданию проекта, следует определиться с его функциональным назначением и тематической направленностью информационного материала.
На втором этапе обычно проводится декомпозиция общей темы на тематические подразделы и отдельные статьи с определением связей между ними. Результатом такой декомпозиции является создание структуры проекта.
Структура HTML-документа
Документы HTML могут иметь различную структуру, включающую различные элементы, но все они должны содержать два обязательных элемента:
Раздел заголовка страницы – head .
Тело документа – body .
Раздел заголовка служит для описания общих свойств страницы, таких, как заголовок (имя) страницы, который будет отображаться в строке имени окна браузера, meta -указаний и описания таблиц стилей. meta – указания служат для задания параметров, которые необходимы для поисковых систем.
В HTML только одно понятие – это ТЕГ (от англ. tag ). Тэг – это комбинация символов между асимметричными знаками "<" и ">".
Существуют две основных разновидности тэгов:
Парные тэги – требуют наличия закрывающего тэга. Открывающий и закрывающий тэги образуют контейнер, внутри которого находится информация.
Примеры: < b >…, < p >…
Непарные тэги – не имеют закрывающего тэга.
Примеры: < img />, < hr/ >, < br/ >.
Параметры тэга задаются только для открывающего парного и непарного тэга. Они располагаются внутри тела тэга и окружаются пробелами. Каждый тэг имеет свой набор параметров. Порядок перечисления нескольких параметров внутри тэга может быть произвольным. Наличие кавычек при задании значения параметра обязательно.
Комментарии предназначены для пояснения назначения фрагментов HTML-кода и оформляются так: и могут занимать несколько строк.
Тэги могут вкладываться друг в друга. В этом случае важно соблюдать последовательность открытия и закрытия: <тэг1><тэг2><тэг3>текст
Структура HTML-документа выглядит следующим образом:
Заголовок документа
Тело документа
Тег является признаком того, что данный файл содержит документ HTML. С него начинаются все web-документы, и, обнаружив
Теги
ограничивают раздел заголовков документа. Этот раздел не включает собственно документа. В него входят только теги (причем специально предназначенные для этого раздела), которые относятся к документу в целом. В этот же раздел входит заголовок документа, который задается при помощи тега
ПРИВЕТ! Это моя личная домашняя страничка! Меня зовут
(Укажите свою фамилию, имя и отчество).
(Укажите свою фамилию, имя и отчество).
Мой город
Я живу в Белгороде
Моя группа
Я учусь в ……
Мои увлечения
Мои увлечения музыка, спорт.
Мои друзья
Мои друзья во всем мне помогают.
5. Открыть файл в окне браузера и, если есть недостатки, устранить
6. Выполнить задание.
Создайте HTML-документ и поместите в него текст, сохраняя его форматирование. Заголовки выделите красным цветом, расположите по центру и отделите горизонтальной линией. Слова, напечатанные, курсивом выделите голубым цветом. Сохраните набранный файл с расширением *.html. Посмотрите документ в окне браузера и, если есть недостатки, устраните их.
Контрольные вопросы
1. Какие вы знаете типы HTML-тэгов?
2. Перечислите теги, наиболее часто используемые в заголовке Webстраницы.
3. Как изменить стиль выравнивания в открывающем теге абзаца?
4. С помощью какого тега можно установить заголовки всех шести уровней?
5. Что можно создать при помощи тега title?
6. Какие тэги надо применить, для получения перечеркнутого полужирного текста?
7. Поясните следующий фрагмент кода Веселый HTML
8. Что произойдет, если тэг окажется не закрытым?
ЛАБОРАТОРНАЯ РАБОТА № 2 СПИСКИ ПРОСТЫЕ И ВЛОЖЕННЫЕ. СОЗДАНИЕ HTML–ТАБЛИЦ
Цель работы: с оздание и тестирование HTML-файла. Создание списков. Вставка таблиц и их структура. Макетирование страниц с помощью таблиц.
Краткие теоретические сведения
Существует три основных вида списков в HTML-документе: нумерованный маркированный список определений
Мы можем создавать вложенные списки, используя различные тэги списков или повторяя одни внутри других. Для этого просто необходимо разместить одну пару тэгов (стартовый и завершающий)
внутри другой. Будут ли элементы вложенного списка иметь те же маркеры, обозначающие элемент списка – зависит от браузера. Более подробно смотри в разделе "Вложенные списки".
Нумерованные списки
В нумерованном списке браузер автоматически вставляет номера элементов по порядку. Это означает, что если вы удалите один или несколько элементов нумерованного списка, то остальные номера автоматически будут пересчитаны.
Нумерованный список начинается стартовым тэгом
- и завершается тэгом
1. Программирование
2. Алгоритмизация
3. Проектирование
Тэг
- может иметь параметры:
- Программирование
- Алгоритмизация
- Проектирование
- . Например:
- Программирование
- Алгоритмизация
- Проектирование
- Программирование
- Алгоритмизация
- Проектирование
- Термин
- Определение термина
- Термин
- Определение термина
- 2.Выберите правильный способ создания ссылки?
- 6.С помощью какого тега задается таблица?
- 7.Какой тег нужно добавить для переноса строки
- 8.Выберите четверку правильно написанных параметров выравнивания:
- 11.Что произойдет, если тэг FONT size=5 окажется не закрытым?
- 12.Выберите теги для работы с таблицами?
где: type – Вид счетчика:
A – большие латинские буквы (A,B,C...) a – маленькие латинские буквы (a,b,c...) I – большие римские цифры (I,II,III...) i – маленькие римские цифры (i,ii,iii...) 1 – обычные цифры (1,2,3...)
start="n" –Число, с которого начинается отсчет Например:
XV. Программирование
XVI. Алгоритмизация
XVII. Проектирование
Маркированные списки.
Для маркированных списков браузер обычно использует маркеры для пометки элемента списка. Вид маркера, как правило, настраивает пользователь браузера.
Маркированный список начинается стартовым тэгом
- и завершается тэгом
Программирование
Алгоритмизация
Проектирование
Тэг
- может иметь параметр:
Тип тэга
- определяет внешний вид маркера как вид по умолчанию (disc), круглый (circle) или квадратный (square). Например:
Программирование
Алгоритмизация
Проектирование
Списки определений.
< dl>… - парный тэг – отображает списки определений.
Конструкция:
С тэгом
- можно использовать атрибут compact для установки более компактного размещения пунктов списка.
Конструкция:
Таблицы в HTML организуются как набор столбцов и строк. Ячейки таблицы могут содержать любые HTML-элементы, такие, как заголовки, списки, абзацы, фигуры, графику, а также элементы форм.
Основные тэги таблицы Таблица:
Это основные тэги, описывающие таблицу. Все элементы таблицы должны находиться внутри этих двух тэгов. По умолчанию таблица не имеет обрамления и разделителей. Обрамление добавляется атрибутом border.
Строка таблицы:
Количество строк таблицы определяется количеством встречающихся пар тэгов
Ячейка таблицы:
Описывает стандартную ячейку таблицы. Ячейка таблицы может быть описана только внутри строки таблицы. Каждая ячейка должна быть пронумерована номером колонки, для которой она описывается. Если в строке отсутствует одна или несколько ячеек для некоторых колонок, то браузер отображает пустую ячейку. Расположение данных в ячейке по умолчанию определяется атрибутами align="left" и valign="middle". Данное расположение может быть исправлено как на уровне описания строки, так и на уровне описания ячейки.
Любая ячейка таблицы может быть определена не тегами
представляет собой обычную ячейку, но текст внутри этих тэгов будет выделен полужирным шрифтом и отцентрирован.
Подпись:
Данный тэг описывает название таблицы (подпись). Тэг
определяет, где сверху или снизу таблицы будет поставлена подпись. Подпись всегда центрирована в рамках ширины таблицы.
Основные атрибуты таблицы border
Данный атрибут используется в тэге table. Если данный атрибут присутствует, граница таблицы прорисовывается для всех ячеек и для таблицы в целом. border может принимать числовое значение, определяющее ширину границы, например border="3".
Тест по теме «Язык HTML »
Инструкция по выполнению работы
Тест состоит из 14 вопросов. Вопросы с №1 по №13 представляют собой задания с кратким ответом, вопрос № 14 содержит задание с открытым ответом.
На выполнение теста отводится 40 минут.
При выполнении заданий нельзя пользоваться компьютером, справочной литературой.
Ответы к заданиям 1-13 следует отметить галочкой на выданной вам карточке.
При выполнении заданий можно пользоваться черновиком.
Желаю удачи!
1.Web-страница (документ HTML) представляет собой:
Текстовый файл с расширением txt или doc
Текстовый файл с расширением htm или html
Двоичный файл с расширением com или exe
Графический файл с расширением gif или jpg
3.Программа для просмотра гипертекстовых страниц называется:
Протокол
5.Значение атрибута align не может быть
justyfy,centre,right,left
center,left,riht,justify
right,centre,justify,left
left,center,justify,right
9.Какая из нижеприведённых структур HTML документа является верной
10.С помощью каких атрибутов можно задать «длину и высоту» элемента рисунка
Все варианты неверны
На весь последующий текст распространится действие данного тэга
Ничего не произойдет - этот тэг не парный
Весь последующий текст отобразиться красным цветом и будет большего размера
13.В каком коде абзац "Системы счисления" выровнен по центру
Системы счисления
<р align = "center"> Системы счисленияСистемы счисления
14.Сколько столбцов в данном шаблоне?
Ответы к тесту