Приветствую Вас, Гость
Урок 4: работаем с текстом.

 
Чтобы придать тексту ту или иную гарнитуру в html используются такие элементы:


STRONG - Используется для выделения текста жирным

EM - Используется для выделения текста курсивом

U - Выделение текста подчеркиванием

S - Перечеркивание текста

SUB - Создание нижнего индекса

SUP - Создание верхнего индекса

FONT - Изменение цвета, типа, размера шрифта

HR - Вставляет в текст горизонтальную разделительную линию

 

Приведу пример:


 

<strong> Этот текст будет выделен жирным </strong><br><br>
<em>
 Этот текст будет выделен курсивом </em> <br><br>
<u>
 Этот текст будет подчеркнутым!!! </u> <br><br>
Внимание акция! новая цена <s> 50 000 </s> 20 000 рублей! <br><br>
<sup> 3 </sup> = 8 ; <br><br>
Формула спирта в химии - С <sub> 2 </sub> Н <sub> 5 </sub> ОН <br><br>
<FONT 
SIZE="+2" COLOR="red"> Увеличенный красный шрифт</FONT><br>
<FONT 
SIZE="3" FACE="Courier New" COLOR="Violet">Моноширинный фиолетовый текст 3 размера</FONT><br>
<hr 
noshade width="50%"align="left"> После линии <br>
А вот пример линии толщиной 2px и без флага noshade
<hr width="50%"align="left"size ="2">

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

Сейчас мы рассмотрим списки:


Здесь мы разберем такую немаловажную часть языка html как списки. Различают списки двух видов: упорядоченные (пронумерованные) и неупорядоченные (не пронумерованные). Единственным отличием является то, что перед пунктами неупорядоченных списков обычно ставятся символы буллеты (bullets), например, точки, ромбики и т.п., в то время как пунктам упорядоченных списков предшествуют их номера.

UL (Unsorted List) - Создает неупорядоченный список. Обязательно наличие закрывающего тега, причем между начальным и конечным тегами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.

 

Напрмер:

 

<li> Первый пункт списка </li>
<li>
 Второй пункт списка </li>
<li>
 Третий пункт списка </li>
<li>
 Четвертый пункт списка </li>


 

В браузере будет это выглядеть так:
 

OL (Ordered List)- Создает упорядоченный список. Между начальным и конечным тегами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.
 

Атрибуты:


START – определяет первое число, с которого начинается нумерация пунктов. (только целые числа) . Если не указывать, начинается с начала.

TYPE – определяет стиль нумерации пунктов списка.

 

Например:

 

<!-- пример списка с арабскими числами -->
Чтобы создать сайт на домашнем компьютере необходимо:
<ol type="1">
<li>
 Выучить html </li>
<li>
 Выучить css </li>
<li>
 Ознакомиться с php </li>
</ol>

<!-- пример списка с большими римскими числами -->
Чтобы создавать сайты быстро желательно:
<ol type="I">
<li>
 знания программы Adobe Dreamweaver </li>
<li>
 знания программы TOpStylePro </li>
<li>
 Знания Photoshop </li>
</ol>

<!-- пример списка с маленькими буквами -->
Чтобы зарабатывать на сайте желательно:
<ol type="a">
<li>
 наличие хорошей посещаемости </li>
<li>
 наличие цифрового продукта для продажи </li>
<li>
 наличие блоков рекламы </li>
</ol>

<!-- пример списка не с начала -->
Чтобы стать успешным в интернете:
<ol type ="1" start="2">
<li>
 писать информацию полезную для людей </li>
<li>
 постоянно пополнять сайт новым содержимым </li>
<li>
 первый пункт придумай сам </li>
</ol>

 

LI (List Item) - Создает пункт в списке. Располагается внутри элементов OL или UL. Закрывающий тег писать желательно, но не обязательно, это уже решать Вам.
 

Атрибуты:


VALUE – изменяет порядок нумерации элементов списка. Используется только если элемент LI находится внутри элемента OL. В качестве значения указывается порядковый номер элемента.
 

Приведу пример:

 

Чтобы создать сайт на домашнем компьютере необходимо:
<ol ><!--так как тип не указали будет использоваться по умолчанию-->
<li> Выучить html </li>
<!--сейчас нумерация пойдет с пятого номера-->
<li value="5"> Выучить css </li>
<li>
 Ознакомиться с php </li>
</ol>

 

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

Это интересно:

...