24.02.2012, 18:29

Работа с текстом в html


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

Начнём с заголовков.

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

  • align="" - Выравнивает текст. Для этого тега существуют значения , которые пишутся между кавычек: "left", "right", "center" как вы могли догадаться, эти значения выравнивают текст по левой стороне, по правой и по центру.

  • style="color:" - этот параметр задаёт тексту цвет. После :нужно писать код цвета или название цвета на Английском языке. Например:
    Code
    style="color:Black или style="color:#000000


Теперь переходим непосредственно к заголовкам. Они бывают всего 6-ти размеров. Что бы задать заголовку размер, надо прописать команды: <h1> </h1> - это первый размер. Что бы сменить размер, надо всего лишь поменять число рядом с h, но оно должно быть не больше 6-ти.

Теперь посмотри что получится если применить это к тексту:
Code
<h1>Первый заголовок</h1>
<h2>Второй заголовок</h2>
<h3>Третий заголовок</h3>
<h4>Четвёртый заголовок</h4>
<h5>Пятый заголовок</h5>
<h6>Шестой заголовок</h6>

Вот что вышло:



Как вы видите на скриншоте, первый размер самый большой и чем больше цифра, тем размер меньше.

Теперь применим все команды которые были перечислены ранее:
Code
<h3 align="left" style="color:Red">Красный заголовок слева</h3>

Code
<h2 align="center" style="color:Orange">Оранжевый заголовок по центру</h2>

Code
<h1 align="right" style="color:Blue">Синий заголовок справа</h1>

И так вот что получилось:


Красиво правда? Теперь вы это умеете.

Теперь мы разберём команды, которые изменяют текст.

  • Команды :<strong> </strong>и <b> </b> - делают жирный шрифт
  • Команды :<kbd> </kbd> ,<code> </code>и <samp> </samp> - делают моноширинный шрифт ( это шрифт у которого всё буквы , знаки и т.д. имеют одинаковую ширину , так же его называют непропорциональным )
  • Команда <big> </big> - делает большой шрифт
  • Команда <small> </small>- делает маленький шрифт
  • Команды : <em> </em>,<i> </i>и<dfn> </dfn> - делают курсив ( наклонный шрифт )
  • Команда <ins> </ins> - делает подчёркнутый шрифт
  • Команда <del> </del> - делает зачёркнутый шрифт
  • Команда <sub> </sub> - смещает текст вниз
  • Команда <sup> </sup> - смещает текст вверх

Теперь разберёмся как это применять:
Code
<strong>Жирный</strong>

Code
<code>Моноширинный</code>

Code
<big>Большой</big>

Code
<small>Маленький</small>

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

Code
<ins>Подчёркнутый</ins>

Code
<del>Зачёркнутый</del>

Code
<sub>Смещение вниз</sub>

Code
<sup>Смещение вверх</sup>

Теперь посмотрим как это отображается:

Теперь мы знаем команды для изменения текста.

Теперь научимся изменять размер шрифта.

Тут появляется новая команда:

font-size:- размер шрифта. После этой команды надо писать размер шрифта в пикселях. Например: 11px.

Рассмотрим как это применять:
Code
<p style="font-size:9px">Тут размер 9 пикселей</p>
<p style="font-size:12px">Тут размер 12 пикселей</p>
<p style="font-size:15px">Тут размер 15 пикселей</p>
<p style="font-size:18px">Тут размер 18 пикселей</p>

Смотрим что из этого вышло:



Теперь вы умеете изменять размер шрифта в тексте.

Теперь научимся изменять цвет текста.
Вы уже знаете что команда style="color:"меняет цвет текста.
Научимся же её эффективно использовать!
Я покажу вам пример текста с заголовком:
Code
<h1 style="color:#ff0000">Заголовок нашего текста</h1>
<p style="color:#ffff00">Первая строка нашего текста</p>
<p style="color:#00ff00">Вторая строка нашего теста</p>
<p style="color:#0000ff">Третья строка нашего текста</p>

Вот как это выглядит:

Получился разноцветный текст smile
Вот коды цветов: #ff0000 - красный #ffff00- жёлтый #00ff00- зелёный #0000ff- синий. Другие коды цветов можно найти в интернете или в нашей интерактивной таблице цветов.

Подводим итоги: из этого урока мы научились делать заголовки , узнали о командах , которые изменяют текст , научились менять размер шрифта и цвет текста .

Спасибо за внимание !!!!!

Источник/Автор: http://portal-naruto.ru

Категория: HTML, CSS, JS, JQ | Добавил: Silver (24.02.2012) Просмотров: 2025 | Рейтинг: 4.8/5
Всего комментариев: 4
+1  
1 antisept -Infoscript Team-  (25.02.2012 10:33) [Материал]
Аватар пользователя
Хорошая статья

+2  
2 PULLO   (25.02.2012 11:25) [Материал]
Аватар пользователя
тегами <sup>,<sub> хорошо прописывать химические формулы или квадраты, кубы и т.д. это так, дополнение smile полезненькая статейка)

-1  
3 Silver   (25.02.2012 12:49) [Материал]
Аватар пользователя
спасибо biggrin

0  
4 Cezar   (30.03.2012 08:37) [Материал]
Аватар пользователя
Отлично!

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]