close

Вход

Забыли?

вход по аккаунту

?

Базовые теги

код для вставки
презентация к уроку
"Основы Веб-дизайна", Овсяник С.Г, 2012
1
Содержание
1. Понятие о языке гипертекстовой
разметки
2. Понятие тега и атрибута
3. Теги заголовка и тела веб-страницы
4. Теги форматирования шрифтов и
раздела текста на строки и абзацы
5. Задание цвета шрифта и фона
"Основы Веб-дизайна", Овсяник С.Г
2
Базовые конcтрукции языка HTML
• Основным преимуществом и особенностью веб-страниц является
то, что информация, размещенная на них, имеет вид гипертекста.
• Гипертекст - это текст, в который встроены специальные коды,
задающие форматирование текста, наличие в нем иллюстраций,
мультимедийных вставок и гиперссылок.
• Эти коды определены в языке программирования HTML
(Hyper Text Markup Language - язык разметки гипертекста).
• Веб-страница фактически является документом в формате HTML.
Процесс вставки в текст кодов HTML называют разметкой.
• Браузера поддерживают язык HTML и во время загрузки вебстраницы читают имеющиеся в ней коды и выполняют заданные с
их помощью операции (форматируют текст, вставляют в него
изображения и т.п.). Таким образом, вид страницы в окне
браузера зависит от того, какие коды содержатся в ее документе.
"Основы Веб-дизайна", Овсяник С.Г
3
Понятие тега
• Коды языка HTML, с помощью которых размечают исходный
текст называют тегами.
• При отображении документа в браузере самих тегов не видно, но
они влияют на внешний вид документа.
• Все теги начинаются с символа <и заканчиваются символом>
- их называют угловыми скобками.
• После открытой угловой скобки размещают ключевое слово
указывает на назначение тега. Регистр в названиях тегов не имеет
значения, хотя общеупотребительными есть большие буквы.
Примеры тегов HTML: <TІTLE>, <BODY>, <TABLE>,
</A>, <IMG>, </CENTER>.
"Основы Веб-дизайна", Овсяник С.Г
4
Понятие тега
• Обычно тег влияет на определенный
фрагмент документа, например на абзац.
В таких случаях используют пару тегов
(открывающий и закрывающий).
• Первый из них задает эффект, а второй прекращает его действие. Закрывающий
тег начинается с символа / (слэш).
"Основы Веб-дизайна", Овсяник С.Г
5
Понятие тега
• Открывающие теги могут содержать атрибуты, которые влияют на
эффект, создаваемый тегом.
• Атрибуты - это дополнительные ключевые слона, отделены от
основного ключевого слова тега и друг от друга символами
пробелами.
• Для некоторых атрибутов следует задавать значения, которое
отделяют от имени атрибута символом =. Значение атрибута берут
в кавычки, но во многих случаях их можно и не ставить.
Закрывающие теги атрибутов не содержат.
Примеры тегов с атрибутами:
<BODY BGCOLOR="#000000" ТEХТ ="FFFFFF"
<BACKGROUND="rain.gif">
<OPTION SELECTED>
<FRAME SCR="file.html" NORESIZE>
"Основы Веб-дизайна", Овсяник С.Г
6
Заголовок окна,
название документа
Заголовок страницы
Текст страницы
Горизонтальная линия
–
тег <HR>
Абзац - Тег <BR>
"Основы Веб-дизайна", Овсяник С.Г
7
Документ в виде
HTML
"Основы Веб-дизайна", Овсяник С.Г
8
Теги заголовка и тела веб-страницы
•
•
•
•
•
Заголовок для всего документа – тег <H1>
Заголовки глав - тег <H2> (<H3>…<H6>)
Разбить текст на абзацы - тег <Р>
Текст с новой строки - тег <BR>
Горизонтальная линия - тег <HR>
"Основы Веб-дизайна", Овсяник С.Г
9
"Основы Веб-дизайна", Овсяник С.Г
10
"Основы Веб-дизайна", Овсяник С.Г
11
Шрифт
• <font>…</font> - локальное изменение
шрифта
Size – целое число от 1 до 7 (базовый 0)
Color – цвет текста
• <small>…</small> -уменьшение шрифта
• <sup>…</sup>- верхний индекс
• <sub>…</sub> - нижний индекс
• <tt >… </tt> - текст пишущей машинки
<em> … </em> - выделение (курсив)
"Основы Веб-дизайна", Овсяник С.Г
12
Текст
<p> … </p> - абзац
Align / left, right, center /горизонтальное выравнивание
"Основы Веб-дизайна", Овсяник С.Г
13
Теги форматирования текста
Текст в HTML-документах форматируют с помощью тегов. В таблице
приведены варианты тегов, которые можно использовать для изменения
шрифта и заданный ними эффект.
"Основы Веб-дизайна", Овсяник С.Г
14
Стандартные цвета
Отображаемый текст
Запись в формате HTML
чёрный
красный
<FONT COLOR= black > чёрный </FONT COLOR>
<FONT COLOR= red > красный </FONT COLOR>
голубой
<FONT COLOR= blue > голубой </FONT COLOR>
оливковый
<FONT COLOR= olive > оливковый </FONT COLOR>
синий
<FONT COLOR= navy > синий </FONT COLOR>
фиолетовый
<FONT COLOR= purple > фиолетовый </FONT COLOR>
темно-зелёный
<FONT COLOR= teal > темно-зелёный </FONT COLOR>
темно-серый
<FONT COLOR= gray > темно-серый </FONT COLOR>
серебристый
<FONT COLOR= silver > серебристый </FONT COLOR>
коричневый
<FONT COLOR= maroon > коричневый </FONT COLOR>
ярко-зелёный
<FONT COLOR= lime > ярко-зелёный
</FONT COLOR>
жёлтый
<FONT COLOR= yellow > жёлтый
</FONT COLOR>
зеленый
<FONT COLOR= green > зеленый
розовый
<FONT "Основы
COLOR=
fuchsia > розовый
Веб-дизайна", Овсяник С.Г
морской
<FONT COLOR= aqua > морской
</FONT COLOR>
</FONT COLOR>
</FONT COLOR>
15
Фон страницы
• Чтобы задать фон страницы,
используют в теге <Body>
атрибут bgcolor
пример:
<Body bgcolor=yellow>
Цвет фона -
желтый
"Основы Веб-дизайна", Овсяник С.Г
16
Дополнительнo:
• Таблица цветов в Wikipedia
• Оформление заголовков в веб-документах
"Основы Веб-дизайна", Овсяник С.Г
17
Автор
ovsianik
Документ
Категория
Презентации
Просмотров
32
Размер файла
534 Кб
Теги
html, теги, веб-страница
1/--страниц
Пожаловаться на содержимое документа