Главная | Обратная связь | Поможем написать вашу работу!
МегаЛекции

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

ТЕГИ ДЛЯ САЙТА

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

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

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

Парные теги состоят из открывающего тега <html> и закрывающего тега </html>, как видите они абсолютно идентичны, и отличаются только вертикальной косой чертой у закрывающего тега, который обозначает конец интерпретации, управляющего кода, браузером.

Не парные теги, например <br>, это в основном теги, обозначающие перевод каретки, пробел, особый элемент текста. Чаще всего они относятся к простому тексту, и используются для его форматирования.

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

Например, можно поместить на страницу фотографию размером 300х200, а браузеру, при помощи тегов определяющих высоту и ширину, указать отображать на странице изображение размером 150х100, то есть в два раза меньше истинного.

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

 

СОЗДАЁМ ПРОСТУЮ HTML СТРАНИЦУ

Чтобы создать простую HTML страницу, без специальных программ, создайте документ txt, при помощи блокнота или WordPad, в котором напишите:

<html> <head> <title>Документ</title> </head> <body> Текст </body> </html>

Закройте документ и измените окончание файла txt на htm или html, согласитесь с вопросом об изменении расширения файла. Иконка файла «блокнот» должна измениться на иконку файла «Интернет». Теперь откройте полученный документ, обычным двойным кликом, вместо тегов вы увидите надпись «Текст».

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

Рассмотрим используемые здесь теги.

<html> </html> - открывающий и закрывающий теги, которые определяют, что всё, что находится между ними это HTML документ. Всё, что находится за пределами этих тегов, должно игнорироваться браузером. Но это не всегда так, браузеры научились отображать даже ту информацию, которая находится за пределами тела документа, интерпретируя это просто как ошибку при написании кода и автоматически исправляя её. Будьте внимательны.

<title>Документ</title> - служебные теги и название документа, которое отображается при его открытии.

<head></head> - служебные теги, предназначенные для размещения между ними информационных тегов и тегов для поисковых роботов.

<body></body> - тело документа, между этими тегами размещается весь основной текст, графика и анимация.

<html> <head> <title>Документ</title> </head> <body> Текст </body> </html>

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

<html>

<head>

<title>Документ</title>

</head>

<body>

Текст, картинки, ссылки, анимация.

</body>

</html>

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

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

Это имя интерпретируется браузером всегда, как первая и главная страница сайта. Остальные страницы сайта должны иметь названия на латинице или быть пронумерованы, например sait.html, ait01.html, 002.html.

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

 

ТЕГИ ФОРМАТИРОВАНИЯ ТЕКСТА

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

Переход на следующую строку <br>

Выравнивание абзаца

<p align="left">абзац выровнен по левому краю...</p>

<p align="right">абзац выровнен по правому краю...</p>

<p align="center">абзац выровнен по центру...</p>

<p align="justify">абзац выровнен по ширине...</p>

Размеры шрифта

<p><font size="1">Шрифт 1</font></p> самый маленький

<p><font size="2">Шрифт 2</font></p>

<p><font size="3">Шрифт 3</font></p>

<p><font size="4">Шрифт 4</font></p>

<p><font size="5">Шрифт 5</font></p>

<p><font size="6">Шрифт 6</font></p>

<p><font size="7">Шрифт 7</font></p> самый большой

Вид шрифта

<p><strong>Жирный текст</strong></p>

<p><em>Курсив</em></p>

<p><u>Подчеркнутый текст</u></p>

<p><strike>Зачеркнутый текст</strike></p>

<center>Центрирование</center>

<p><strong><em>Жирный курсив</em></strong></p>

<p>Верхний <sup>индекс</sup></p>

<p>Нижний <sub>индекс</sub></p>

<pre></pre> Очень полезный тег. На странице HTML текст выглядит точно так, как его напечатали в теле страницы при помощи блокнота.

Цвет шрифта

<p><font color="#ff0000">Красный цвет</font></p>

Основные цвета и их кодировка.

000000 — черный, FFFFFF — белый, FF0000 — красный, 00FF00 — зелёный, 0000FF - синий, FF00FF — фоилетовый, FFFF00 — жёлтый, 00FFFF — голубой.

Заголовки.

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

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

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

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

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

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

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

 

ГРАФИКА

Вставка картинок, фотографий, анимации.

alt - описание картинки, которое появляется при наведении на неё курсора, обязательно делайте подписи к картинкам, поисковые системы очень не любят картинки без подписей, а картинки с подписями обязательно проиндексируют и картинку да и страницу заодно.

<p><center><img src="tigr.jpg" alt="Это изображение тигра"></center></p>

Фон страницы.

Картинка «img src» и фон страницы «background». Фон страницы задает общий цвет для всего документа, можно использовать как стандартные цвета, так и картинки, графику, фотографии. Причем фон, позволяет размещать поверх него и графику и текст, а рисунки и фотографии такой возможности не предоставляют.

<body background="fon.jpg"><p><img src="teacher.jpg" border="1"></p></body>

Изменение размера картинки <img src="img/tigr.jpg" width="100" height="82">

Горизонтальная черта длинна 50 и толщина 5 <hr align="left" width="50" size="5" noshade>

ТЕКСТОВАЯ ССЫЛКА

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

Атрибуты цвета ссылок link, vlink, alink, задают цвет шрифта гиперссылок.

Атрибут link - служит для выделения гиперссылок, которые еще не посещались.

Атрибут vlink - уже посещенные ссылки.

Атрибут alink - выделяет активную гиперссылку.

<a href="index.html">Ссылка на главную страницу сайта</a>

<a href="001.html">Ссылка на 001 страницу сайта</a>

<a href="http://www.toren.chat.ru">Ссылка на другой сайт</a>

ГРАФИЧЕСКАЯ ССЫЛКА

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

<a href="011.html"><img src="rita500x80.gif" width="500" height="80" border="0" />

Здесь ссылкой является анимация, которая ведёт на другую страницу сайта 011.html

ПРОСТЕЙШАЯ ТАБЛИЦА

<table border="1"> <tr> (ширина границы таблицы от «0» и до...)

<td>1</td>

<td>2</td>

</tr>

<tr> <td>3</td>

<td>4</td>

</tr>

<tr><td>5</td>

<td>6</td>

</tr>

</table>

 

Поделиться:





Воспользуйтесь поиском по сайту:



©2015 - 2024 megalektsii.ru Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...