ИнтернетПохожие презентации:
урок №1
1. Язык разметки гипертекста HTML. Структура HTML-документа. Вставка тегов и атрибутов. Создание заголовков, параграфов.
26.05.2026Язык разметки гипертекста
HTML. Структура HTMLдокумента. Вставка тегов и
атрибутов. Создание
заголовков, параграфов.
2. Оформление гипертекстовой страницы. Веб-сайты и веб-страницы
26.05.20263. Web-страницы
• Создаются с использованием языкаразметки гипертекстовых документов
HTML.
• В обычный текстовый документ
вставляются управляющие символы
(HTML-тэги), которые определяют вид
Web-страницы при ее просмотре в
браузере.
26.05.2026
4. HTML-тэги
• Тэги заключаются в угловые скобки имогут быть одиночными и парными.
• Парный тэг содержит открывающий и
закрывающий тэги (такая пара тэгов
называется контейнером).
• Закрывающийся тэг прямой слэш(/)
26.05.2026
5. HTML-тэги
• Тэги могут записываться какпрописными, так и строчными
буквами.
• Некоторые тэги имеют атрибуты,
которые являются именами свойств
и могут принимать определенные
значения.
26.05.2026
6. HTML-тэги
• Web-страница помещается в контейнер<HTML> </HTML>
• Заголовок страниц <HEAD> </HEAD>
• Заголовок содержит название страницы,
который помещается в контейнер -
<TITLE></TITLE>
• Информационные одиночные теги <META>
имеющие атрибуты – charset – информирует
браузер о кодировке Web-страницы.
• Содержимое страницы помещается в
контейнер - <BODY> </BODY>
26.05.2026
7. HTML-тэги
<HTML>начало контейнера Web-страницы
<HEAD>
начало контейнера заголовка страницы
<TITLE>Заголовок страницы</TITLE>
заголовок
<META =“text/html; charset=windows-1251”
http-equiv=“content-type”>
информационный тег
</HEAD>
конец контейнера заголовка страницы
<BODY>
начало содержимого страницы
</BODY>
</HTML>
26.05.2026
конец содержимого страницы
конец контейнера Web-страницы
8. Сохранение Web-страницы
• Web-страницу необходимосохранить в виде файла, начальную
страничку сайта сохраняют обычно
под именем index.htm (тип
файла «Все файлы»
В качестве расширения имени файла
Web-страницы можно использовать
26.05.2026
.html
9. Шрифт
Размер шрифта<H1> </H1> - самый крупный
<H6> </H6> - самый мелкий
Гарнитура шрифта
FACE (например FACE=«Arial»)
26.05.2026
10. Шрифт
Размер шрифтаSIZE
(например SIZE=4)
Цвет шрифта
COLOR
(например COLOR=“blue”)
26.05.2026
11. Цвет шрифта
• Значение атрибута COLOR можно задать либоназванием цвета (“red”, “green”, “blue”), либо
его шестнадцатеричным значением.
• Шестнадцатеричное представление цвета
использует RGB-формат”#RRGGBB”, где две
первые шестнадцатеричные цифры задают
интенсивность красного (red), две следующие –
интенсивность зеленого (green) и две
последние – интенсивность цвета синего (blue).
• Минимальная интенсивность цвета задается
шестнадцатеричным числом 00, а
максимальная – FF. Например, синий цвет
задается значением “#000FF”.
26.05.2026
12. Форматирование текста
<P> </P> - разделитель текста на абзацыДля каждого абзаца можно задать определенный тип
выравнивания текста - атрибут ALIGN:
• По левому краю ALIGN=“left”;
• По правому краю ALIGN=“right”;
• По центру ALIGN=“center”.
Заголовки целесообразно отделять от остального
содержания страницы горизонтальной линией с
помощью одиночного тэга <HR>, а для перевода
строки используется одиночный тэг <BR>.
26.05.2026
13. Вставка изображений
• На Web-страницы можно помещатьизображения, хранящиеся в
графических файлах сжатых
форматах – GIF, JPEG, PNG.
• Для вставки изображения
используется тэг - <IMG> c
атрибутом SRC, который указывает
на место хранения файла на
компьютере или в Интернете.
26.05.2026
14. Вставка изображений
• Если графический файл находитсяна локальном компьютере в той же
папке, что и файл Web-страницы ,
то в качестве значения атрибута SRC
достаточно указать только имя
файла.
• Например:
<IMG SRC = “file.gif”>
26.05.2026
15. Расположение рисунка относительно текста
• Позволяет атрибут – ALIGN,которыйможет принимать пять различных
значения;
• Верх - TOP;
• Середина - MIDDLE;
• Низ – BOTTOM;
• Слева - LEFT;
• Справа - RIGHT.
26.05.2026
16. Расположение рисунка относительно текста
• Для того чтобы рисунок располагалсяпо правому краю текста, тэг вставки
изображения должен принять
следующий вид:
<IMG SRC = “file. gif” ALIGN = “RIGHT” >
26.05.2026