
- •ОСНОВЫ HTML
- •Общие сведения WWW и HTML
- •ТЕГИ HTML
- •ПРИМЕРЫ ТЕГОВ
- •ПРИМЕРЫ ПАРНЫХ ТЕГОВ
- •ПРИМЕРЫ ОДИНОЧНЫХ ТЕГОВ
- •АТРИБУТЫ ТЕГОВ
- •ПРИМЕР ТЕГА С АТРИБУТАМИ
- •СТРУКТУРА HTML -ДОКУМЕНТА
- •Создайте папку, назовите её своим именем и фамилией.
- •Выберите в меню «Синтаксис» «Н»
- •Смените кодировку на UTF-8. Если не поменять кодировку,
- •вместо …
- •Теоретически название документа может иметь неограниченную длину, на практике рекомендуется ограничиться 60 символами.
- •В ЗДОРОВОМ ТЕЛЕ…ЭЛЕМЕНТЫ
- •ФОРМАТИРУЕМ ТЕКСТ
- •leftmargin - определяет отступ от левого края окна браузера до контента страницы.
- •ФОРМАТИРОВАНИЕ
- •ТЕГИ, ДЕЛАЮЩИЕ ТЕКСТ
- •АБЗАЦЫ И ПЕРЕНОСА СТРОКИ
- •ТЕГИ, ВЫДЕЛЯЮЩИЕ ТЕКСТ КУРСИВОМ
- •ТЕГИ, ВЫДЕЛЯЮЩИЕ ТЕКСТ ПОЛУЖИРНЫМ ШРИФТОМ
- •ТЕГИ, ВЫДЕЛЯЮЩИЕ ТЕКСТ
- •ТЕГИ, ВЫВОДЯЩИЕ ТЕКСТ
- •ТЕГИ, ВЫВОДЯЩИЕ ТЕКСТ В ВЕРХНЕМ И НИЖНЕМ ИНДЕКСАХ
- •ТЕГ FONT И ЕГО ПАРАМЕТРЫ
- •В HTML существуют два способа задания цвета:
- •СОВМЕСТНОЕ
- •Соблюдайте порядок вложенности тегов. Тег, который открыт первым, должен быть закрыт последним.
- •СПИСКИ
- •ГИПЕРССЫЛКИ
- •При абсолютной адресации используется полный путь, т.е. с указанием протокола, сервера, каталога и
- •Иногда, когда документ слишком длинный, полезно сделать ссылки на его разделы.
- •У ссылок есть параметр title, в качестве значения которого можно указать текст, который
- •ЗАДАНИЕ
- •Сделайте фон страницы – ivory,
- •Имена авторов моноширинным текстом, серого цвета с размером 4.
- •ИЗОБРАЖЕНИЯ
- •Изображения на web-страницах могут использоваться двумя способами:
- •ФОНОВЫЕ ИЗОБРАЖЕНИЯ
- •ВСТРАИВАНИЕ ИЗОБРАЖЕНИЙ
- •Если же мы хотим, чтобы текст располагался под картинкой, то необходимо использовать тег
- •РАЗМЕРЫ ИЗОБРАЖЕНИЙ
- •Вы, наверно, обратили внимание, что текст очень близко прилипает к картинкам. Это не
- •АЛЬТЕРНАТИВНЫЙ ТЕКСТ
- •ИЗОБРАЖЕНИЕ В КАЧЕСТВЕ
- ••Вставьте фоновую картинку, отрегулируйте отступы от краев страницы
- •ТАБЛИЦЫ
- •Без использования CSS, только с помощью таблиц можно создавать страницы со сложным дизайном.
- •Рассмотрим нашу таблицу с точки зрения HTML:
- •ОТСТУП, ШИРИНА, ЦВЕТ ФОНА, РАМКА
- •Наша таблица прижата к левому краю окна, также как и текст в ней.
- •Обратите внимание, границы у таблицы двойные.
- •За границы отвечают два параметра:
- •Таблицы формируются построчно. Поэтому, заданные в строке (tr) параметры распространяют свое действие на
- •Эти же параметры можно применять и к отдельным ячейкам, т.е. к любому тегу
- •к ячейкам можно применять еще два параметра:
- •РАБОТА С ТАБЛИЦАМИ
- •Если наложить на этот рисунок таблицу, то мы увидим, что она состоит из
- •Нам нужно, чтобы в первой и третьей строках было по одному столбцу. Это
- •Первая строка
- •Вторая строка
- •Две строки и два столбца. Но первый столбец первой строки объединяет две строки.
- •Первая строка
- •ВЛОЖЕННЫЕ ТАБЛИЦЫ
- •Поместим в готовую таблицу еще одну таблицу про цветы
- •Код этой таблицы простой - три строки и два
- •Теперь возьмем код этой таблицы и поместим его вместо слова "контент" в код
- •Создаем таблицу 6 на
- •МЕНЯЕМ ФОН HTML-СТРАНИЦЫ И ЦВЕТ ТЕКСТА
- •В HTML существуют два способа задания цвета:
ТЕГ FONT И ЕГО ПАРАМЕТРЫ
Теги <font></font> указывают параметры шрифта текста:
face - название шрифта. Названий шрифтов можно привести несколько, через запятую. В этом случае, если первый указанный шрифт не будет найден (вы же не знаете, какие шрифты установлены на компьютере пользователя), браузер станет использовать следующий по списку.
size - размер шрифта в условных единицах от 1 до 7. По умолчанию размер шрифта равен 3.
color - цвет текста (по умолчанию - черный).

В HTML существуют два способа задания цвета:
•по имени (156)
•указанием шестнадцатеричного кода цвета.
Итак, поменяем цвет в атрибуте bgcolor на нежно-голубой, а цвет текста - на менее яркий. Обновите html-страницу (Ctrl+F5) и посмотрите на результат.
Шестнадцатеричный код цвета. «#RRGGBB» означает шестнадцатеричный код цвета: доля красного (RR) может лежать в диапазоне от 00 до FF (это соответствует десятичному числу 255), также как и доли зелёного (GG) и синего цвета
(BB). Таким образом, палитра доступных цветов |
|
Tomato |
#FF6347 |
MidnightBlue |
#191970 |

<body>
Это простой текст.<br>
<font face="Verdana" size=5 color="red"> Этот текст красный, размера 5. </font><br>
<font face="Arial" size=2 color="blue"> Этот текст
синий, размера 2. </font>
</body>
СОВМЕСТНОЕ
ИСПОЛЬЗОВАНИЕ ТЕГОВ
Выделим слово "текст" красным цветом:
<font color="red">Текст</font>
Теперь добавим теги курсива (открывающий - слева, закрывающий - справа):
<em><font
color="red">Текст</font></em>
А теперь - теги полужирного начертания:
<strong><em><font
Соблюдайте порядок вложенности тегов. Тег, который открыт первым, должен быть закрыт последним.
•<font><u><i>Так неправильно! </font></u></i>
•<font><u><i>Так
правильно</i></u></font>

Теги <abbr></abbr> указывают на то, что текст является аббревиатурой. По умолчанию текст подчеркивается пунктиром, а при наведении на него курсора мыши появляется всплывающая подсказка с расшифровкой аббревиатуры. Это достигается добавлением в тег параметра title, в качестве значения которого и выступает расшифровка.
<abbr title="HyperText Markup Language"> HTML </abbr>
Теги <address></address> применяются для указания адреса. Отображается курсивом с новой строки.
Пишите по адресу: <address> Ленинский пр., д.2 </address>
Теги <del></del> делают текст перечеркнутым.
<del> Этот текст в тегах del </del><br>
Теги <q></q> выделяют короткие цитаты.
Линкольн любил говорить: <q>Не достигает цели тот, кто от нее отказывается.</q>

Теги <big></big> выводят текст большего размера, чем остальная часть текста. Теги <small></small> выводят текст меньшего размера, чем остальная часть текста.
<big> Этот текст в тегах big </big><br> Это просто текст<br>
<small> Этот текст в тегах small </small>
Тег <hr> рисует горизонтальную линию, отделенную сверху и снизу пустыми строками. У этого тега есть следующие параметры:
•align - выравнивает линию по центру (center), слева (left) или справа (right).
•width - устанавливает длину линии в пикселах или в процентах от ширины окна.
•size - устанавливает толщину линии в пикселах.
•color - устанавливает цвет линии.
•noshade - убирает рельефность линии.

<body>
Линия без параметров <hr>
Линия по центру
<hr align="center" color="red" size=2 width=50%> Линия слева
<hr align="left" color="blue" size=3 width="150">
</body>