- •ОСНОВЫ HTML
- •Общие сведения WWW и HTML
- •ТЕГИ HTML
- •ПРИМЕРЫ ТЕГОВ
- •ПРИМЕРЫ ПАРНЫХ ТЕГОВ
- •ПРИМЕРЫ ОДИНОЧНЫХ ТЕГОВ
- •АТРИБУТЫ ТЕГОВ
- •ПРИМЕР ТЕГА С АТРИБУТАМИ
- •СТРУКТУРА HTML -ДОКУМЕНТА
- •Создайте папку, назовите её своим именем и фамилией.
- •Выберите в меню «Синтаксис» «Н»
- •Смените кодировку на UTF-8. Если не поменять кодировку,
- •вместо …
- •Теоретически название документа может иметь неограниченную длину, на практике рекомендуется ограничиться 60 символами.
- •В ЗДОРОВОМ ТЕЛЕ…ЭЛЕМЕНТЫ
- •ФОРМАТИРУЕМ ТЕКСТ
- •leftmargin - определяет отступ от левого края окна браузера до контента страницы.
- •ФОРМАТИРОВАНИЕ
- •ТЕГИ, ДЕЛАЮЩИЕ ТЕКСТ
- •АБЗАЦЫ И ПЕРЕНОСА СТРОКИ
- •ТЕГИ, ВЫДЕЛЯЮЩИЕ ТЕКСТ КУРСИВОМ
- •ТЕГИ, ВЫДЕЛЯЮЩИЕ ТЕКСТ ПОЛУЖИРНЫМ ШРИФТОМ
- •ТЕГИ, ВЫДЕЛЯЮЩИЕ ТЕКСТ
- •ТЕГИ, ВЫВОДЯЩИЕ ТЕКСТ
- •ТЕГИ, ВЫВОДЯЩИЕ ТЕКСТ В ВЕРХНЕМ И НИЖНЕМ ИНДЕКСАХ
- •ТЕГ FONT И ЕГО ПАРАМЕТРЫ
- •В HTML существуют два способа задания цвета:
- •СОВМЕСТНОЕ
- •Соблюдайте порядок вложенности тегов. Тег, который открыт первым, должен быть закрыт последним.
- •СПИСКИ
- •ГИПЕРССЫЛКИ
- •При абсолютной адресации используется полный путь, т.е. с указанием протокола, сервера, каталога и
- •Иногда, когда документ слишком длинный, полезно сделать ссылки на его разделы.
- •У ссылок есть параметр title, в качестве значения которого можно указать текст, который
- •ЗАДАНИЕ
- •Сделайте фон страницы – ivory,
- •Имена авторов моноширинным текстом, серого цвета с размером 4.
- •ИЗОБРАЖЕНИЯ
- •Изображения на web-страницах могут использоваться двумя способами:
- •ФОНОВЫЕ ИЗОБРАЖЕНИЯ
- •ВСТРАИВАНИЕ ИЗОБРАЖЕНИЙ
- •Если же мы хотим, чтобы текст располагался под картинкой, то необходимо использовать тег
- •РАЗМЕРЫ ИЗОБРАЖЕНИЙ
- •Вы, наверно, обратили внимание, что текст очень близко прилипает к картинкам. Это не
- •АЛЬТЕРНАТИВНЫЙ ТЕКСТ
- •ИЗОБРАЖЕНИЕ В КАЧЕСТВЕ
- ••Вставьте фоновую картинку, отрегулируйте отступы от краев страницы
- •ТАБЛИЦЫ
- •Без использования CSS, только с помощью таблиц можно создавать страницы со сложным дизайном.
- •Рассмотрим нашу таблицу с точки зрения HTML:
- •ОТСТУП, ШИРИНА, ЦВЕТ ФОНА, РАМКА
- •Наша таблица прижата к левому краю окна, также как и текст в ней.
- •Обратите внимание, границы у таблицы двойные.
- •За границы отвечают два параметра:
- •Таблицы формируются построчно. Поэтому, заданные в строке (tr) параметры распространяют свое действие на
- •Эти же параметры можно применять и к отдельным ячейкам, т.е. к любому тегу
- •к ячейкам можно применять еще два параметра:
- •РАБОТА С ТАБЛИЦАМИ
- •Если наложить на этот рисунок таблицу, то мы увидим, что она состоит из
- •Нам нужно, чтобы в первой и третьей строках было по одному столбцу. Это
- •Первая строка
- •Вторая строка
- •Две строки и два столбца. Но первый столбец первой строки объединяет две строки.
- •Первая строка
- •ВЛОЖЕННЫЕ ТАБЛИЦЫ
- •Поместим в готовую таблицу еще одну таблицу про цветы
- •Код этой таблицы простой - три строки и два
- •Теперь возьмем код этой таблицы и поместим его вместо слова "контент" в код
- •Создаем таблицу 6 на
- •МЕНЯЕМ ФОН HTML-СТРАНИЦЫ И ЦВЕТ ТЕКСТА
- •В HTML существуют два способа задания цвета:
ОСНОВЫ HTML
Общие сведения WWW и HTML
• Теги HTML
Структура HTML -документа Форматирование
•Определение функциональных разделов документа
•Управление стилем шрифта
•Определение элементов фразы
•Создание списков
Гипертекстовые ссылки Мультимедиа и HTML
•Рисунки
•Мультимедийные объекты
Создание таблиц
ТЕГИ HTML
Теги – коды HTML, с помощью которых выполняется разметка текста
•Тег представляет собой набор символов между угловыми скобками < … >
•Регистр букв в тега не имеет значения
•Теги, воздействующие на часть документа бывают открывающие и закрывающие : <…> … </…>
•Теги, дающие разовый эффект в месте их появления в закрывающей части не нуждаются
•Если использован тег, отсутствующий в HTML или не поддерживаемый браузером, он игнорируется
ПРИМЕРЫ ТЕГОВ
<Title>
<Body>
</A>
<TABLE>
<IMG>
</Center>
ПРИМЕРЫ ПАРНЫХ ТЕГОВ
<HTML> </HTML>
•Тег является контейнером, который заключает в себе все содержимое веб-страницы, включая теги <head> и <body>.
<B> </B>
•Устанавливает жирное начертание шрифта. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание
<HEAD> </HEAD>
•Тег предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Также внутри контейнера <head> находятся метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем.
<H3> </H3>
• Устанавливает заголовок третьего уровня.
<ADDRESS> </ADRESS>
•Тег предназначен для хранения информации об авторе и может включать в себя любые элементы HTML вроде ссылок, текста, выделений По умолчанию текст внутри контейнера <address> отображается курсивным начертанием.
ПРИМЕРЫ ОДИНОЧНЫХ ТЕГОВ
<BR>
•Тег устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега абзаца <p>, использование тега <br> не добавляет пустой
<HR>
•Рисует горизонтальную линию, которая по своему виду зависит от используемых параметров
<META>
•Определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем.
АТРИБУТЫ ТЕГОВ
Открывающие теги могут содержать атрибуты, влияющие на эффект,
производимый тегом
это дополнительные ключевые слова, отделенные от содержимого тэга и друг от друга пробелами
значение отделяется от атрибута знаком =
значение атрибута должно быть в кавычках, но иногда их можно не писать
Закрывающие теги никогда не имеют атрибутов!
ПРИМЕР ТЕГА С АТРИБУТАМИ
<BODY BGCOLOR=“#000000” TEXT=“#FFFFFF” BACKGROUND=“RAIN.JPG”>
СТРУКТУРА HTML -ДОКУМЕНТА
Структура HTML- документа строго фиксирована:
•начинается с <HTML> и заканчивается </HTML>
•cостоит из раздела заголовков и тела документа
•раздел заголовков ограничен тегами <HEAD> </HEAD>
•между ними помещают, например заголовок документа между тегами <TITLE> и </TITLE>
•сам текст документа располагается в
его теле и ограничивается тегами
Создайте папку, назовите её своим именем и фамилией.
Откройте Notepad++ и введите в новый документ следующий код:
<HTML>
<HEAD>
<TITLE> Моя первая страничка </TITLE> </HEAD>
<BODY> Привет всем! Смотрите - это моя первая Web- страничка!
</BODY>
</HTML>