Отправляет email-рассылки с помощью сервиса Sendsay
  Все выпуски  

Tutos-web: обучение веб-технологиям. Шаг за шагом: Выпуск #6 : Урок 5. Форматирование текста в HTML


С НАСТУПАЮЩИМ 2009 ГОДОМ !!! До Нового года осталось 13 дней.

*Добро *пожаловать *в *рассылку*

*        *Tutos-web ! *     *

 HTML {HTML базовый} 19 декабря 2008 
Рассылка No

6

email: velross@list.ru
website : Tutos-web.Net.Ru
Ведёт рассылку : Velross

 

 

Тема выпуска : Урок 5. Форматирование текста в HTML

Сегодня в выпуске:

  1. Предисловие к уроку  >>>
  2. Форматирование текста  >>>
  3. Предварительно отформатированный текст  >>>
  4. "Компьютерные" тэги  >>>
  5. Адрес  >>>
  6. Сокращения и аббревиатуры  >>>
  7. Направление текста  >>>
  8. Цитирование  >>>
  9. Удалённый и вставленный текст  >>>
  10. Как просмотреть HTML-код страницы?  >>>
  11. Таблицы изученных тэгов >>>
  12. В следующем выпуске  >>>

 

 

1. Предисловие к уроку

HTML определяет множество элементов для форматирования выводимого текста, как например, полужирный шрифт текста или текст курсивом.

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


1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Наверх

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

Этот пример показывает, каким образом вы можете форматировать текст в HTML документе.

 <html>
 <body>

 <b>Этот текст полужирный</b>

 <br>

 <strong>
 Этот текст выделен
 </strong>

 <br>

 <big>
 Этот текст увеличен
 </big>

 <br>

 <em>
 Этим тэгом автор текста заостряет внимание читателя на определённых  моментах в своём повествовании.
 </em>

 <br>

 <i>
 Это курсивный текст
 </i>

 <br>

 <small>
 Этот текст уменьшен
 </small>

 <br>

 Этот текст содержит
 <sub>
 нижний индекс
 </sub>

 <br>

 Этот текст содержит
 <sup>
 верхний индекс
 </sup>

 </body>
 </html>

 

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Наверх

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

Этот пример показывает, каким образом вы можете отобразить текст со всеми вашими пустыми строками и многими пробелами, т.е. с собственным форматированием.

 <html>
 <body>

 <pre>
            «Если крикнет рать святая:
               "Кинь ты Русь, живи в раю!"
                  Я скажу: "Не надо рая,
                    Дайте Родину мою."» С. Есенин
 </pre>

 <p>Тэг <  pre  >  удобно использовать для отображения машинного  кода:</p>

 <pre>
 for i = 1 to 10
     print i
 next i
 </pre>

 </body>
 </html>

 

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Наверх

4. "Компьютерные" тэги

Этот пример демонстрирует, как разные «компьютерные» тэги будут отображены.


 <html>
 <body>

 <code>Компьютерный/программный код</code>
 <br>
 <kbd>Текст вводимый с клавиатуры</kbd>
 <br>
 <tt>Телетайп текст</tt>
 <br>
 <samp>Пример, образец какого-то текста</samp>
 <br>
 <var>Компьютерные переменные</var>
 <br>

 <p>
 <b>Отметьте:</b> Приведенные тэги часто используются для отображения  компьютерного/программного кода.
 </p>

 </body>
 </html>

 

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Наверх

5. Адрес

Этот пример демонстрирует, как написать адрес в документе HTML.


 <html>
 <body>

 <address>
 Алла Пугачёва<br>
 А/я 100<br>
 Москва<br>
 Россия
 </address>

 </body>
 </html>

 

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Наверх

6. Сокращения и аббревиатуры

Этот пример демонстрирует, как обработать сокращение (акроним) или аббревиатуру.


 <html>
 <body>

 <acronym title="сокращение">сокрщ.</abbr>
 <br>
 <abbracronym title="Имею мнение, хочу озвучить">ИМХО</acronym>

 <p>Атрибуты abbr и acronym используются, чтобы дать разъяснение,  которое показывается при наведении курсором мыши на сокращение или  аббревиатуру.</p>

 <p>В IE v5 будут работать только акронимы (<acronym>).</p>

 <p>В более новых версиях браузеров работают оба тэга</p>

 </body>
 </html>

 

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Наверх

7. Направление текста

Этот пример показывает, каким образом можно изменить направление текста.


 <html>
 <body>

 <p>
 Если Ваш браузер поддерживает двунаправленное переопределение (BDO),  следующая строка будет написана с права налево (RTL):
 </p>

 <bdo dir="rtl">
 Это необходимо для теста написанного, например, на иврите, на  арабских языках.
 </bdo>

 </body>
 </html>

 

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Наверх

8. Цитирование

Этот пример показывает, как обрабатывать длинные и короткие цитирования.


 <html>
 <body>

 А вот длинная цитата::
 <blockquote>
 Это длинная цитата. Это длинная цитата. Это длинная цитата. Это  длинная цитата. Это длинная цитата.
 </blockquote>

 Здесь короткая цитата:
 <q>
 Это короткая цитата
 </q>

 <p>
 При использовании блокового цитирования <blockquote>, браузер  вставляет пустые строки до и после цитаты, а также делает отступ по  краям, но при использовании <q> элемента – ничего особенного не  происходит.
 </p>

 </body>
 </html>

 

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Наверх

9. Удалённый и вставленный текст

Этот пример демонстрирует, как отметить текст, который был удалён из документа или вставлен в документ.


 <html>
 <body>

 <p>
 В 1 дюжине
 <del>двадцать</del>
 <ins>двенадцать</ins>
 частей
 </p>

 <p>
 Большинство браузеров перечеркнёт удалённый текст и подчеркнёт  вставленный.
 </p>

 <p>
 Некоторые старые браузеры будут отображать исключённый и добавленный  текст как обычный текст.
 </p>

 </body>
 </html>

 

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Наверх

10. Как просмотреть HTML-код страницы?

Вы когда-нибудь видели веб-страницы, и спрашивали: "Эх! Как они это сделали?"

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

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Наверх

11. Таблицы изученных тэгов

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

Тэг

Описание

<b>

Определяет полужирный текст

<big>

Определяет увеличенный текст

<em>

Определяет текст на котором сделан особый акцент

<i>

Определяет наклонный текст (текст курсивом)

<small>

Определяет уменьшенный текст

<strong>

Определяет выделенный текст

<sub>

Определяет подстрочный текст

<sup>

Определяет надстрочный тект

<ins>

Определяет вставленный текст

<del>

Определяет удалённый (исключённый) тект

<s>

Запрещен. Используйте вместо него тэг <del>

<strike>

Запрещен. Используйте вместо него тэг <del>

<u>

Запрещен. Используйте вместо него стили


Тэги «Компьютерного вывода»

Тэг

Описание

<code>

Определяет компьютерный/программный код

<kbd>

Определяет текст вводимый с клавиатуры 

<samp>

Определяет образец компьютерного кода

<tt>

Определяет телетайп текст

<var>

Определяет переменную

<pre>

Определяет предварительно отформатированный текст

<listing>

Запрещен. Используйте вместо него тэг <pre>

<plaintext>

Запрещен. Используйте вместо него тэг <pre>

<xmp>

Запрещен. Используйте вместо него тэг <pre>


Тэги ссылок, цитат, определений

Тэг

Описание

<abbr>

Определяет аббревиатуры

<acronym>

Определяет сокращения

<address>

Определяет адреса

<bdo>

Определяет направления текста

<blockquote>

Определяет длинные цитаты

<q>

Определяет короткие цитаты

<cite>

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

<dfn>

Дает определения каких-либо терминов

 


1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Наверх

12. В следующем выпуске (23 дек. 08)

Мы познакомимся с символьными объектами, рассмотрим небольшой пример и увидим таблицу с наиболее часто используемыми символами. Урок будет небольшим.

20 декабря не выйдет спецвыпуск рассылки "Свободная трибуна". Причина: отсутствие материала.

28 декабря выйдет спецвыпуск рассылки "ЧаВо". Жду ваших вопросов.

29 декабря ожидается спецвыпуск рассылки "Полезные ресурсы Интернет ". Здесь будет рассмотрен один сайт. С каждым новым выпуском количество рассматриваемых сайтов будет увеличиваться на один.

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Наверх

Правило второе
Чтобы жить лучше

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

Ог Мондино , "Ключ к лучшей жизни ".

 
  Шаблон для рассылки был взят с сайта www.woweb.ru

tutos-web © 2008


В избранное