ТОР 5 статей:
Методические подходы к анализу финансового состояния предприятия
Проблема периодизации русской литературы ХХ века. Краткая характеристика второй половины ХХ века
Характеристика шлифовальных кругов и ее маркировка
Служебные части речи. Предлог. Союз. Частицы
КАТЕГОРИИ:
- Археология
- Архитектура
- Астрономия
- Аудит
- Биология
- Ботаника
- Бухгалтерский учёт
- Войное дело
- Генетика
- География
- Геология
- Дизайн
- Искусство
- История
- Кино
- Кулинария
- Культура
- Литература
- Математика
- Медицина
- Металлургия
- Мифология
- Музыка
- Психология
- Религия
- Спорт
- Строительство
- Техника
- Транспорт
- Туризм
- Усадьба
- Физика
- Фотография
- Химия
- Экология
- Электричество
- Электроника
- Энергетика
Текст содержащийся в элементе 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>
Результат в браузере:
6. Изучить изменение цветового оформления страницы
Можно задать цвет текста для всего документа. Также, можно задать и фоновое изображение. Все они прописываются для элемента 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>
Результат в браузере:
Задание
Создать web-страницу на заданную тему. Тема и стиль оформления текста выбираются по варианту (см. приложение Б). Параграф должен содержать не менее трех строк текста. Каждый уровень списка – не менее трех пунктов. Созданный файл должен быть назван по шаблону: фамилия_index. html.
Содержание отчета
1. Задание.
2. Таблица с перечнем использованных тегов.
3. Текст HTML-документа.
4. HTML-cтраница.
5. Выводы по работе.
Контрольные вопросы
1. Что такое HTML? Что такое гипертекстовый документ?
2. Что такое тег? Структура тега HTML. Формат записи тега HTML.
3. Привести структуру HTML документа. Описать назначение тегов <HEAD>, <BODY>.
4. Что такое параметр тега? Формат записи параметра тега HTML.
5. Перечислить параметры тега <BODY>.
6. Перечислить теги для представления текстовой информации и дать их описание.
7. Как сделать перевод на новую строку?
8. Перечислить виды списков, существующих в HTML. Привести теги, представляющие списки в HTML.
9. Что такое вложенные списки в HTML? Привести пример вложенного списка HTML.
10. Как изменить цвет и размер символов части текста?
11. Перечислите теги позволяющие управлять начертанием шрифта?
Не нашли, что искали? Воспользуйтесь поиском: