Презентация на тему: Основы языка HTML

Реклама. Продолжение ниже
Основы языка HTML
Средства создания HTML -документов
Общие сведения
Синтаксис языка HTML
Синтаксис языка HTML
Синтаксис языка HTML (пример тега)
Синтаксис языка HTML
Синтаксис языка HTML
Синтаксис языка HTML
Синтаксис языка HTML
Синтаксис языка HTML
Структура документа HTML
Служебная часть документа HTML
Элементы форматирования на уровне блоков
Элементы форматирования на уровне блоков
Элементы форматирования на уровне блоков
Элементы форматирования на уровне блоков
Физическое форматирование текста
Элементы форматирования на уровне блоков
Физическое форматирование текста
Физическое форматирование текста
Физическое форматирование текста
Физическое форматирование текста
Атрибуты тега <BODY>
Цвет в HTML
Названия цветов HTML
Схема R G B
Атрибуты тега <BODY>
Бегущая строка
Графика в HTML
Графика
Графика
Гиперссылки
Гиперссылки
1/34
Средняя оценка: 4.1/5 (всего оценок: 28)
Код скопирован в буфер обмена
Скачать (766 Кб)
Реклама. Продолжение ниже
1

Первый слайд презентации: Основы языка HTML

Изображение слайда
1/1
2

Слайд 2: Средства создания HTML -документов

Простейшие текстовые редакторы – Блокнот, Far Editor, Norton Editor Офисные программы, входящие в состав Microsoft Office (Word, PowerPoint) Специализированные HTML- редакторы – Homesite, Hotdog Professional, CoffeeCup HTML Editor ++ Редакторы визуального конструирования –Microsoft FrontPage, Adobe ( Macromedia ) Dreamweaver и др.

Изображение слайда
1/1
3

Слайд 3: Общие сведения

HTML (HyperText Markup Language) – язык гипертекстовой разметки HTML- документ включает: Текстовое содержимое страницы Структура и формат страницы Мультимедийные объекты Гиперссылки

Изображение слайда
1/1
4

Слайд 4: Синтаксис языка HTML

Объекты языка HTML: Текст Теги (управляющие конструкции) < имя_тега >

Изображение слайда
1/1
5

Слайд 5: Синтаксис языка HTML

Парный тег <Te г > фрагмент текста </ Тег > Непарный тег <Te г > фрагмент текста Открывающий тег Закрывающий тег

Изображение слайда
1/1
6

Слайд 6: Синтаксис языка HTML (пример тега)

<B> – тег физического форматирования текста, обозначает полужирное начертание Этот текст набран <B> полужирным </B> шрифтом Код HTML Этот текст набран полужирным шрифтом Отображение

Изображение слайда
1/1
7

Слайд 7: Синтаксис языка HTML

Вложение тегов Этот текст набран <B><I> полужирным курсивом </I></B> Код HTML Этот текст набран полужирным курсивом Отображение

Изображение слайда
1/1
Реклама. Продолжение ниже
8

Слайд 8: Синтаксис языка HTML

Атрибуты (параметры) уточняют действие тегов Каждый тег имеет свой набор допустимых атрибутов Для парных тегов атрибуты указывают в открывающем теге Можно использовать несколько атрибутов, разделенных пробелами Атрибуту присваивается заданное или произвольное значение Атрибуты записываются в виде пары: имя=значение, причем нечисловое значение заключается в кавычки

Изображение слайда
Изображение для работы со слайдом
1/2
9

Слайд 9: Синтаксис языка HTML

Необходимо соблюдать порядок вложенности тегов <B><I> полужирный курсив </I></B> <B><I> полужирный курсив </B></I> В большинстве случаев атрибуты необязательны Значения атрибутов необязательно заключать в кавычки, если они содержат только буквы, цифры, точки и дефисы

Изображение слайда
1/1
10

Слайд 10: Синтаксис языка HTML

Регистр имен тегов и атрибутов не имеет значения <IMG> = <Img> = <IMg> = <img> Наличие и количество пробелов между тегом и текстом или тегом и тегом не имеет значения <B><I> полужирный курсив </I></B> <B><I> полужирный курсив </I> </B> <B> <I> полужирный курсив </I> </B>

Изображение слайда
1/1
11

Слайд 11: Синтаксис языка HTML

! Интерпретирует код HTML программа-браузер Браузеры не проверяют правильность написания кода HTML Неправильно записанный код браузером игнорируется

Изображение слайда
1/1
12

Слайд 12: Структура документа HTML

<HTML> </HTML> <HEAD> </HEAD> <BODY> </BODY> Служебная часть Содержательная часть

Изображение слайда
1/1
13

Слайд 13: Служебная часть документа HTML

Тег <TITLE> определяет текст заголовка Web -страницы В отсутствие этого тега в строке заголовка выводится (в зависимости от браузера): No title Адрес загруженной страницы Ничего <HEAD><TITLE> Сайт школы </TITLE></HEAD>

Изображение слайда
1/1
14

Слайд 14: Элементы форматирования на уровне блоков

Заголовки – теги <H1>…</H1>, <H2>…</H2 >, …, <H6>…</H6 > Атрибут – ALIGN (выравнивание) ={LEFT, RIGHT, CENTER, JUSTIFY} <H2 ALIGN=RIGHT> Заголовок важного раздела</H2> Текст важного раздела Код HTML Отображение <H1>Заголовок</H1> <H2>Заголовок</H2> <H3>Заголовок</H3> <H4>Заголовок</H4> <H5>Заголовок</H5> <H6>Заголовок</H6>

Изображение слайда
Изображение для работы со слайдом
1/2
Реклама. Продолжение ниже
15

Слайд 15: Элементы форматирования на уровне блоков

Новый абзац – тег <P> Атрибут – ALIGN (выравнивание ) ={ LEFT, RIGHT, CENTER, JUSTIFY} <BODY> <P> Первый абзац <P ALIGN=CENTER> Второй абзац </BODY> Код HTML Отображение

Изображение слайда
Изображение для работы со слайдом
1/2
16

Слайд 16: Элементы форматирования на уровне блоков

Разрыв строки – тег <BR> Текст можно разбить на c троки произвольно <BODY> Текст <BR> можно разбить на <BR> c троки произвольно </BODY> Код HTML Отображение

Изображение слайда
1/1
17

Слайд 17: Элементы форматирования на уровне блоков

Предварительно отформатированный текст – тег <PRE>…</PRE> <PRE> Текст разбит на строки </PRE> Код HTML Отображение Текст разбит на строки

Изображение слайда
1/1
18

Слайд 18: Физическое форматирование текста

Теги физического форматирования текста: Полужирный - <B>…</B> Курсив - <I>…</I> Подчеркнутый - <U>…</U> Зачеркнутый - <S>…< / S> или <STRIKE>…</STRIKE> Верхний индекс - <SU P >…</SU P > Нижний индекс - <SUB>…</SUB>

Изображение слайда
1/1
19

Слайд 19: Элементы форматирования на уровне блоков

Горизонтальная линия – непарный тег <HR> Атрибуты: ALIGN (выравнивание) ={LEFT, RIGHT, CENTER} WIDTH ( ширина) SIZE ( толщина) COLOR ( цвет) Часть1 <HR COLOR=RED SIZE=4> Часть2 Код HTML Отображение

Изображение слайда
Изображение для работы со слайдом
1/2
20

Слайд 20: Физическое форматирование текста

Определение параметров фрагмента текста – тег <FONT>…</FONT> Атрибуты: COLOR - цвет текста FACE  гарнитура шрифта SIZE  размер шрифта

Изображение слайда
1/1
21

Слайд 21: Физическое форматирование текста

Атрибут SIZE тега <FONT> SIZE = {1,2,3,4,5,6,7} По умолчанию SIZE=3 Для MS Internet Explorer единицы 1 2 3 4 5 6 7 пункты 8 10 12 14 18 24 36

Изображение слайда
1/1
22

Слайд 22: Физическое форматирование текста

По умолчанию размер шрифта 3.< BR > < FONT SIZE =+3> Размер увеличен на 3 ед.</FONT><BR> < FONT SIZE =2> Размер - 2 единицы.</FONT><BR> Код HTML Отображение

Изображение слайда
Изображение для работы со слайдом
1/2
23

Слайд 23: Физическое форматирование текста

Атрибут FACE тега <FONT> <FONT FACE=”VERDANA”, “ARIAL”, “HELVETICA”> Это - шрифт Symbol:< FONT FACE ="symbol"> abcd </ FONT > Код HTML Отображение

Изображение слайда
Изображение для работы со слайдом
1/2
24

Слайд 24: Атрибуты тега <BODY>

BGCOLOR – цвет фона документа BACKGROUND – фоновое изображение TEXT – цвет текста LINK – цвет непросмотренной ссылки VLINK – цвет просмотренной ссылки ALINK – цвет просматриваемой ссылки

Изображение слайда
1/1
25

Слайд 25: Цвет в HTML

Способы указания цвета: Название цвета Схема RGB

Изображение слайда
1/1
26

Слайд 26: Названия цветов HTML

Изображение слайда
Изображение для работы со слайдом
1/2
27

Слайд 27: Схема R G B

R G B - Red - Green - Blue, Красный - Зеленый - Синий Интенсивность компоненты записывается двузначным шестнадцатеричным числом. Шестнадцатеричные цифры: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F A 26720

Изображение слайда
Изображение для работы со слайдом
1/2
28

Слайд 28: Атрибуты тега <BODY>

<BODY BGCOLOR=MAROON TEXT=“#256AC1”>

Изображение слайда
Изображение для работы со слайдом
1/2
29

Слайд 29: Бегущая строка

Атрибут direction – указывает направление движения: Direction = right - слева направо Direction = left – справа налево < Marquee = right> Внимание! </ marquee> <marquee> текст </ marquee>

Изображение слайда
1/1
30

Слайд 30: Графика в HTML

Вставка графического изображения: тег <IMG> (непарный) Обязательный атрибут SRC указывает адрес графического файла <IMG SRC=“../image/ris.gif”>

Изображение слайда
1/1
31

Слайд 31: Графика

Атрибуты тега <IMG> ALIGN - выравнивание текста относительно изображения WIDTH и HEIGHT – ширина и высота в пикселях или процентах от размеров экрана BORDER – толщина рамки вокруг изображения в пикселях HSPACE и VSPACE – пустые поля вокруг изображения в пикселях ALT – альтернативный текст

Изображение слайда
1/1
32

Слайд 32: Графика

Альтернативный текст <IMG SRC=“../../image/ris.gif” ALT=“ По-моему, это лайка ”> MSIE отображает графику MSIE не отображает графику

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
1/3
33

Слайд 33: Гиперссылки

Указатель ссылки – тег <A>…</A> Адресная часть ссылки – атрибут HREF тега <A> Хотите ознакомиться с моей <A HREF=“biography.htm”> биографией </A> ? Зайдите на сайт <A HREF=“http://www.gymn22.minsk.edu.by”> Гимназия 22 г.Минска </A> <A HREF=“mailto:olga@tut.by”> Пишите мне! </A>

Изображение слайда
1/1
34

Последний слайд презентации: Основы языка HTML: Гиперссылки

Указатель ссылки – изображение <IMG SRC=“../../image/ris.gif”> <A HREF=“dog.htm”> </A>

Изображение слайда
1/1
Реклама. Продолжение ниже