Файл: «Основы программирования HTML».pdf

Тег <BIG> отображает текст внутри тега шрифтом большего размера относительно остального текста. При вложении тегов размер шрифта будет каждый раз увеличиваться на единицу.

Пример:

Шрифт <big>большой шрифт <big>Еще больше</big></big>

Блочные теги

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

Атрибуты тега <FONT> задают такие параметры текста, как шрифт, размер и цвет текста внутри тега.

За шрифт отвечает атрибут FACE, его значением должно быть название шрифта.

За размер шрифта отвечает атрибут SIZE. Размер шрифта задается в относительных размерах (например, 2 или 6). По умолчанию используется размер 3

За цвет шрифта отвечает атрибут COLOR. Его значением должно быть либо ключевое слово, обозначающее имя цвета, либо код цвета в формате #RRGGBB.

Рассмотрим пример использование тега <FONT>:

<html>

<head>

Текст ярко зеленого цвета , размер шрифта 5

</font> <br /></body>

</html>

Тег <DIV>

Тег <DIV> служит для выделения больших блоков текста для форматирования с помощью таблиц стилей. Это означает, что мы включаем необходимый блок текста внутрь тега <DIV> и задаете его параметры либо в атрибуте STYLE, либо подключаете класс из таблицы стилей с помощью атрибута CLASS. Рассмотрим пример:

<html>

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

</div>

</body>

</html>

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

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

Ввод и оформление текста

Заголовки

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

В HTML можно создавать заголовки шести уровней. Самым важным считается заголовок первого уровня, а наименее малозначимым — шестого.

Заголовки создаются тегами <H1>, <H2>, <H3>, <H4>, <H5> и <H6>. По умолчанию заголовок самого верхнего уровня выделяется самым крупным шрифтом. Чем ниже уровень заголовка, тем меньше шрифт.

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

Значения атрибута ALIGN следующие:

left — по левому краю;
right — по правому краю;
center — по центру;
justify — по ширине (для заголовков длиннее строки).

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

<h1 align=" left ">Заголовок 1 уровня</h1>

<h2 align="justify">Заголовок 2 уровня</h2>

<h3 align=" center ">Заголовок 3 уровня</h3>

<h4 align="right">Заголовок 4 уровня</h4>

<h5>Заголовок 5 уровня</h5>

<h6 >Заголовок 6 уровня</h6>

Списки

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

В HTML можно выделить несколько типов списков, отличных по внешнему виду:

маркированный;
нумерованный;
список определений.

Маркированный список

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

Для создания маркированных списков HTML использует тег <UL>. Он требует закрывающий тег, а элементы списка находятся внутри блока тегов <UL>. Каждый элемент начинается с тега <LI>.

У тега <UL> есть атрибут TYPE, меняющий вид маркера списка.

Значения атрибута TYPE следующие:

circle — создает маркер в виде круга, белого внутри;

square — создает маркер в виде квадрата;

disc — создает маркер в виде закрашенного черным круга.

Посмотрим на примере как будет выглядеть код, атрибут TYPE будем использовать circle:

<li>Венера</li>

<li>Земля</li>

<li>Юпитер</li>

</ul>

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

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

Для создания упорядоченных списков применяется тег <OL>, которому требуется закрывающий тег. Все пункты списка находятся внутри блока этих тегов.

Тег <OL> имеет атрибут TYPE, который задает формат символов, используемых для нумерации.

Значения атрибута TYPE следующие:

A — пункты нумеруются заглавными буквами латинского алфавита;
a — пункты нумеруются строчными буквами латинского алфавита;
I — пункты нумеруются заглавными римскими цифрами;
i — пункты нумеруются строчными римскими цифрами;
1 — пункты нумеруются арабскими цифрами.

Посмотрим на примере как будет выглядеть код, атрибут TYPE будем использовать 1:

<li>Пункт </li>

<li>Пункт</li>

<li>Пункт </li>

</ol>

Список определений

Список определений — это особый вид списка, который применяется для форматирования словарей и в случаях, когда необходимо пояснить значения терминов. Для организации списков определений служит тег <DL> — это тег-контейнер, внутри которого находятся определение и описание термина. Чтобы внести информацию внутри тега-контейнера <DL>, надо задать теги <DT> и <DD>.

Тег <DT> используется для того, чтобы задать определение. Никаких особенных атрибутов он не имеет.

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

<dl>

<dt>Заголовок 1</dt>

<dd>Подзаголовок 1</dd>

<dt>Заголовок 2</dt>

<dd>Подзаголовок 2 </dd>

</dl>

Ссылки

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

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

Внешние ссылки

Внешние ссылки — это ссылки на объекты, расположенные вне текущей страницы. Это могут быть другие страницы сайта, картинки, мультимедиа-приложения и иные сайты.

Для создания ссылок в HTML служит тег <A>, который требует закрывающий тег. В блоке этих тегов располагается текст или другой объект, который будет выделяться как ссылка. На самом деле для того, чтобы сообщить человеку, что в каком-то месте сайта расположена ссылка, совершенно не обязательно писать адрес страницы. Язык HTML дает возможность «замаскировать» адрес под текст ссылки, который описывает, что увидит пользователь, перейдя по ней. Отдельно находится адрес страницы, на которую вы попадете при щелчке кнопкой мыши на ссылке.

Между тегами <A> и </A> располагается текст ссылки, а адрес документа для перехода записывается в теге <A>. Таким образом, пользователь сможет быстро и легко перемещаться по сайту. Ему абсолютно все равно, где находится документ, на который указывает ссылка, он видит только текст описания.

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

<body>

<a href="start.html">Стартовая страница </a><br />

<a href="cartinka.jpg">Логотип </a>

</body>

Внутренние ссылки

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

Чтобы создать такую ссылку, сначала нужно определить место, к которому приводит ссылка. Это делается с помощью атрибута NAME тега <A>. Необходимый отрывок текста заключается в блок тега <A>. Однако совершенно не обязательно брать внутрь этого тега текст — можно просто установить его на месте, к которому браузер должен переходить при щелчке кнопкой мыши на ссылке.

Затем надо создать ссылку на эту метку. Ссылка на внутреннюю метку создается так же, как и ссылка на внешний документ, только вместо URL-адреса желаемой страницы надо ввести адрес метки в таком виде: #met1, где met1 — имя метки. При щелчке кнопкой мыши на ссылке браузер автоматически перейдет к месту, указанному меткой.

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

<a name="met2">Это метка для перехода 2</a><br />

<a href="#met1">Кликните для перехода к метке 1</a><br />

<a href="#met2">Кликните для перехода к метке 2</a><br />

<a name="met1">Это метка для перехода 1</a>

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

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

Каждая таблица должна начинаться тегом <table> и завершаться тегом </table>:

<body>

<table>

</table>

</body>

Ячейки таблицы

Теперь приступим к созданию ячеек таблицы. Для начала нужно задать необходимое число строк, а затем разделить строки столбцами на ячейки. Количество пар тегов <tr> и </tr> определяет количество горизонтальных строк в таблице. Количество пар тегов <td> и </td>, расположенных между тегами соответствующей строки, определяет количество ячеек (столбцов) в пределах строки:

<body>

<table>

</table>

</body>

Тег <TH> позволяет создать заголовок — специальную ячейку, которая будет выделяться полужирным. Для этого текст заголовка помещают внутрь тега <TH>. Например, запись <TH> Текст заголовка </TH> приведет к форматированию текста внутри тега полужирным шрифтом.

Граница таблицы создается при помощи атрибута border тега <table>. Ширина границы указывается в пикселах. Если атрибут border не указан, то таблица выводится без видимой рамки. Атрибут bordercolor позволяет задать цвет границы таблицы, указав код цвета. Добавим к уже созданной таблице границу черного цвета шириной пять пикселей. Для этого заменим строку

<table>

на

Ширина таблицы задается атрибутом width тега <table>. Значение можно задавать как в абсолютных единицах (width="250"), так и в относительных (width="80%"). Например, задав ширину в 600 пикселов, можно быть уверенным, что таблица поместится в окне браузера при любом разрешении монитора. При относительном указании значения ширина задается в процентах от ширины окна браузера или от ширины ячейки другой таблицы, в которую вставлена эта таблица. Таким же образом задается высота таблицы при помощи атрибута height.

Смотрите также файлы

Местное самоуправление в Российской Федерации: тенденции и перспективы развития (Состав и функции представительного органа муниципального образования в системе органов местного самоуправления).pdf

Устройство персонального компьютера (Структура и архитектура ПК. Периферийные устройства).pdf

«Распределенная технология обработки информации».pdf

Современная нормативно-правовая база защиты информации.pdf

Разработка регламента выполнения процесса «Расчет заработной платы» (теория реализации операций бизнес-процессов (БП)).pdf

Файл: «Основы программирования HTML».pdf

Ввод и оформление текста

Ссылки

Ячейки таблицы

Смотрите также файлы

Информация

Списки файлов

Дополнительно