Главная страница Случайная страница
КАТЕГОРИИ:
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
Текст содержащийся в элементе DIV выделяется в отдельную строку!
|
|
4 Изучить форматирование символов
Чтобы придать тексту ту или иную гарнитуру в html используются такие элементы:
| STRONG | Используется для выделения текста жирным |
| EM | Используется для выделения текста курсивом |
| U | Выделение текста подчеркиванием |
| S | Перечеркивание текста |
| SUP | Создание верхнего индекса |
| SUB | Создание нижнего индекса |
| FONT | Изменение цвета, типа, размера шрифта |
| HR | Вставляет в текст горизонтальную разделительную линию |
STRONG - Выделяет текст, заключенный между открывающим и закрывающим тегами, жирным шрифтом. Раньше везде использовался тег < BOLD> (или < b>), в принципе его можно использовать и сейчас, но это не приветствуется поисковыми системами.
Если в теле документа написать:
< strong> Этот текст будет выделен жирным < /strong> < br>
< b> И этот тоже, но этим тегом лучше не пользоваться! < /b>
В браузере увидим:
EM (Emphasis) - Выделяет текст, заключенный между открывающим и закрывающим тегами, курсивом. Также аналогичен по действию тег < I>, однако его лучше не использовать т.к. это не приветствуется поисковыми системами.
Пример:
< em> Этот текст будет выделен курсивом < /em> < br>
< i> И этот тоже, но лучше пользоваться тегом EM < /i>
В браузере увидим:
U(Underline) - Отображает помещенный между открывающим и закрывающим тегами текст как подчеркнутый:
Если в теле документа написать:
< u> Этот текст будет подчеркнутым!!! < /u>
Увидим в браузере:
S(Strike) - Текст, помещенный между открывающим < s> и закрывающим < /s> тегами, будет перечеркиваться!
Например:
Вниманиe акция! новая цена < s> 50 000 < /s> 20 000 рублей!
Результат:
SUP (Superscript) - Отображает текст, заключенный между открывающим < SUP> и закрывающим < /SUP> тегами, как верхний индекс от основного текста.
Например:
2 < sup> 2 < /sup> = 4; < br>
2 < sup> 3 < /sup> = 8; < br>
2 < sup> 4 < /sup> = 16;
И что получим:
SUB(Subscript) - Отображает текст, заключенный между открывающим < SUB> и закрывающим < /SUB> тегами, как нижний индекс от основного текста.
Пример:
Формула спирта в химии - С < sub> 2 < /sub> Н < sub> 5 < /sub> ОН
И что мы получим:
FONT - Позволяет изменять цвет, размер и тип шрифта текста, находящегося между открывающим < font> и закрывающим < /font> тегами.
Атрибуты:
SIZE - Определяет размер шрифта. Возможные значение - 1, 2, 3, 4, 5, 6, 7.
COLOR - Определяет цвет текста. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
FACE - определяет используемый шрифт. Используйте Times New Roman, Arial, Tahoma, Courier, Courier New. Они установлены почти у всех. Иначе гарантий нет!
Если в теле документа написать:
Это обычный текст < br>
< FONT SIZE=" +2" COLOR=" red" > Увеличенный красный шрифт < /FONT>
< br>
< FONT SIZE=" 3" FACE=" Courier New" COLOR=" Violet" > Моноширинный фиолетовый текст 3 размера < /FONT>
При просмотре в браузере увидим:
Если написано SIZE=" +2" то это означает увеличить на 2 единицы шрифт по сравнению со стандартным. Обычно стандартный размер шрифта равен 3.
Примечание: В дальнейшем(после изучения css) лучше вообще все что связано с типом, размером и цветом шрифта делать через таблицы стилей. Это гораздо удобнее, тем более многие элементы форматирования текста расположенные внутри элемента FONT, работают некорректно.
HR- служит для вставки в текст горизонтальной линии. Закрывающего тега нет!
Атрибуты:
WIDTH – определяет длину линии в пикселах или процентах от ширины окна браузера.
SIZE – толщина линии в пикселах.
ALIGN – определяет выравнивание горизонтальной линии. Атрибут может принимать следующие значения:
left – выравнивание по левому краю документа.
right – выравнивание по правому краю документа.
center – выравнивание по центру документа (используется по умолчанию).
NOSHADE – определяет способ закраски линии как сплошной. Атрибут является флагом и не требует указания значения. Без данного атрибута линия отображается объемной.
COLOR – задает цвет линии. Можно использовать либо RGB-значение в шестнадцатиричной системе, либо один из 16 базовых цветов. Атрибут работает только в Internet Explorer.
Например:
Текст до линии < hr noshade width=" 50%" align=" left" > После линии < br>
А вот пример линии толщиной 2px и без флага noshade
< hr width=" 50%" align=" left" size =" 2" >
Что мы увидим:
5 Изучить создание списков
Различают списки двух видов: нумерованные и ненумерованные. Единственным отличием является то, что перед пунктами неупорядоченных списков обычно ставятся символы-буллеты (bullets), например, точки, ромбики и т.п., в то время как пунктам упорядоченных списков предшествуют их номера.
Элементы:
| UL | Создает ненумерованный список |
| OL | Создает нумерованный список |
| LI | Создает пункты списка внутри элементов OL или UL |
UL (Unsorted List) - Создает ненумерованный список. Обязательно наличие закрывающиего тега, причем между начальным и конечным тегами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.
Например:
< ul>
< li> Первый пункт списка < /li>
< li> Второй пункт списка < /li>
< li> Третий пункт списка < /li>
< li> Четвертый пункт списка < /li>
< /ul>
Что мы увидим в браузере:
По умолчанию элементы списка маркируются черным кружочком.
При помощи атрибута TYPE можно изменить стиль маркирования. В пределах одного списка можно использовать различную маркировку элементов списка.
| HTML-код: < ul type=" circle" > < li> элемент 1< /li> < li> элемент 2< /li> < li type=" disc" > элемент 3< /li> < li type=" square" > элемент 4< /li> < /ul> | Отображение в браузере:
|
OL (Ordered List)- Создает нумерованный список. Между начальным и конечным тегами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.
Атрибуты:
START – определяет первое число, с которого начинается нумерация пунктов. (только целые числа). Если не указывать, начинается с начала.
TYPE – определяет стиль нумерации пунктов списка.
Возможные значения:
" A" – заглавные буквы A, B, C...
" a" – строчные буквы a, b, c...
" I" – большие римские числа I, II, III...
" i" – маленькие римские числа i, ii, iii...
" 1" – арабские числа 1, 2, 3...
Значение по умолчанию < OL TYPE=" 1" >.
LI (List Item) - Создает пункт в списке. Располагается внутри элементов OL или UL. Закрывающий тег писать желательно, но не обязательно.
Атрибуты:
VALUE – изменяет порядок нумерации элементов списка. Используется только, если элемент LI находится внутри элемента OL. В качестве значения указывается порядковый номер элемента.
Пример:
Чтобы создать сайт на домашнем компьютере необходимо:
< ol > <! --так как тип не указали будет использоваться по умолчанию-->
< li> Выучить html < /li>
<! --сейчас нумерация пойдет с пятого номера-->
< li value=" 5" > Выучить css < /li>
< li> Ознакомиться с php < /li>
< /ol>
Результат в браузере:
1. Изучить изменение цветового оформления страницы
Можно задать цвет текста для всего документа. Также, можно задать и фоновое изображение. Все они прописываются для элемента BODY. Значения цветов задаются либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
Атрибуты:
BACKGROUND – определяет изображение для " заливки" фона. Значение задается в виде полного URL или имени файла с картинкой в формате GIF или JPG.
BGCOLOR – определяет цвет фона документа.
TEXT – определяет цвет текста в документе.
Пример1:
<! -- задаем фоновый цвет и цвет текста -->
< body bgcolor=" #FFF8D2" text=" red" >
< p> Этот текст будет красный, потому что мы изменили цвет текста в теге БОДИ и теперь весь текст на странице по умолчанию будет красный < /p>
< font color =" green" >
< p> В этом абзаце текст будет зеленый, потому что мы заключили его в теги font и придали соответсвующий цвет < /p>
< /font>
< p> Теперь текст снова будет красный < /p>
< /body>
Результат в браузере:
Пример 2:
<! -- задаем фоновое изображение и цвет текста -->
< body background=" fon.jpg" text=" red" >
< p> Этот текст будет красный, потому что мы изменили цвет текста в теге БОДИ и теперь весь текст на странице по умолчанию будет красный < /p>
< p> Теперь тут тоже красное и только < font color =" green" > эти слова зеленые < /font>
< /p>
< p> Тут как вы поняли текст тоже красный < /p>
< /body>
Результат в браузере:
