Основы разработки веб сайтов [часть 2]: фотматирование текста

21.04.2008 от WindOfHeart

Комментарии:

Комментарии пишутся для удобства, в браузере не отображаются.

Комментарии в HTML имеют следующий синтаксис:

<!– это комментарий –>

< !– это тоже комментарий,

он занимает несколько строк –>

Проблемы между открывающим разделителем разметки (”<!”)
и открывающим разделителем комментария (”–”) недопустимы,
но их можно использовать между закрывающим разделителем комментария (”–”)
и закрывающим разделителем разметки (”>”). Распространенной
ошибкой является включение строки символов переноса (”—”)
в комментарий. Следует избегать использования в комментариях двух или
более символов переноса.

Основные теги выделения текста:

<em> или <i> - курсивное выделение

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

<u> подчеркнутый

<s> зачеркнутый

<sub> - под основной строкой, Пример: H2O

<sup> текст над строкой
Тег <HR>

HR - HORIZONTAl RULE (горизонтальная линия), тег закрывать
не нужно.

Пример:

<hr>

Результат:


Как мы видим, линия растянута на ширину страницы и как бы вдавлена
в неё.


Данная линия по длине 159, по высоте 4, выровнена по левому краю. Ее
код:

<hr align=”left” width=”159″ size=”4″ noshade>

Где, align - выравнивание, width - длинна
в пикселях, size высота (также в пикселях), noshade - без тени, т.е.
не вдавлена в страницу.

Выравнивание текста.

Кроме цвета текста, шрифта, размера и начертания можно задать еще несколько
параметров.

Привет всем!

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

Пример: <p align=”right”> </p>

<p> - абзац, в него заключается обычный текст, припишем к нему
параметр align (выравнивание). В нашем случае это right, в переводе на
русский “право”.

left - лево

right - право

center - по центру.

justify - растянуть по ширине страницы.

E-MAIL ссылка.

Ссылка, как мы помним из предыдущего выпуска задается тегом <a>,

К примеру: Пишите мне -
это E-Mail ссылка, её код:

<a href=”mailto:somemail@somemail.smth?subject=Hello!”>Пишите
мне</a>

Http:// мы заменяем на mailto: (писать куда-то, кому-то), далее
следует E-Mail адрес, через знак вопрос можно указать дополнительные параметры,
к примеру ?subject=Сайт, если пользователь пользуется Е-Маил клиентом,
то при клике на эту ссылку, у него откроется окно, к примеру The Bat, шаблон
нового письма, и в теме уже будет написан текст “Сайт”. Зачем это нужно?
Например, чтобы знать, откуда у не известного вам адресата ваш адрес, в
теме вы увидете
надпись сайт и сразу поймете, что это посититель и пишет вам по поводу
вашего сайта.
Как изменить цвет фона?

Очень просто! Цвет фона задается в теге <BODY>, как мы помним
это тело документа.

Пример: <body bgcolor=”green”>

Задаст цвет фона данной страницы зеленым. bgcolor - сокращение background
color (цвет фона)

Не пишите тег BODY два раза!

Вставка картинок.

К сожалению, рассылка не позволяет отобразиться картинкам, но это не сильно
нам помешает.

Вот картинка, а ниже
её код.

<img src=”book_blue.gif” width=”20″ height=”19″>

Рассмотрим подробно: img src - расположение картинки, у меня просто book_blue.gif,
т.к. картинка находится в одной папке с моей страницей. Также можно писать,
к примеру http://mysite.com/logo.gif - это абсолютный путь, т.е. где
бы не была страница, мы бы всегда видели данную картинку. /pictures/logo.gif
- путь относительный, если мы переместим страницу в другую папку, то картинка
отображаться уже не будет. width и height ширина и высота, реально,
задавать их не обязательно, только если вы не хотите изменить размеры картинки.

Как задать вместо цвета фона, картинку?

Также легко!

<body background=”book_blue.gif”>

Списки

Вот пример списка:

  • Главная
  • Чат
  • Гостевая
  • Форум

Как мы видим, он маркирован. Код его элементарно прост!

<ul>
< li>Главная</li>

<li>Чат</li>

<li>Гостевая</li>

<li>Форум</li>

</ul>

Слово, перед которым мы хотим поставить маркер (метку), мы заключаем между
тегами <li>, и не забываем его закрыть: </li>. Список заключается
в теги <ul>

Нумерация также легка!

  1. Главная
  2. Чат
  3. Гостевая
  4. Форум

Для этого просто заглючим наш маркированный список в теги <ol> </ol>

<ol>

< li>Главная</li>

<li>Чат</li>

<li>Гостевая</li>

<li>Форум</li>

</ol>

  • gh
  • fth
  • f

Еще один список. Как мы видим, маркеры имеют форму квадрата. Все очень
просто. Опять же заключим наш обычный список в теги <ul>, но допишем
параметр type (тип).

<ul type=”square”>

<li>gh</li>

<li>fth</li>

<li>f</li>

</ul>

square - квадрат

circle - закрашенный круг

disc - не закрашенный круг

Благодарю за внимание! Продолжение следует!

Рубрики: HTML, Начинающим |

Оставить комментарий

Заметьте: Включена проверка комментариев. Нет смысла повторно отправлять комментарий.