7.49M

Categories:

internet

software

HTML — язык дескрипторов

2.

Hyper
Text
Markup
Language
ЯЗЫК
РАЗМЕТКИ
ГИПЕРТЕКСТА

3.

HTML — язык дескрипторов
Дескриптор
(tag) - это некое ключевое
слово или сокращение.
tag - "признак", "метка", "маркер"
<tag> ТЕКСТ </tag>

4.

Содержание
• Начертание текста
• Абзацы
• Специальные символы
• Переносы
• Шрифты
• Логическая разметка
• Списки
• Графика
• Гиперссылки
• Таблицы

6.

КУРСИВ (Italic)
 ТЕКСТ 
Черный тополь
Черный тополь

7.

ЖИРНЫЙ ШРИФТ (Bold)
 ТЕКСТ 
Черный тополь
Черный тополь

8.

Подчеркивание (Underline)
 ТЕКСТ 
Черный тополь
Черный тополь

10.

Разрыв строки
строка1 строка2
Дело было вечером, Делать было нечего
Дело было вечером,
Делать было нечего

11.

Абзац (paragraph)
 ТЕКСТ 
Дело было вечером,
Делать было нечего
Дело было вечером,
Делать было нечего

Абзац с параметрами

Параметры:
Right – правый край
Left –
Дело было вечером,
левый крайДелать было
нечего
Center – по центру
Justify – по ширине
Дело было вечером,
Делать было нечего

13.

Абзац с параметрами

Параметры:
Right – правый край
Left –
Дело было вечером, 
левый крайДелать было нечего
Center – по центру
Justify – по ширине
Дело было вечером,
Делать было нечего

14.

Задание 1

15.

16.

Специальные символы

17.

Символ
«и»
“и”
„
-и
<и>
Код
« и »
“ и ”
&bdquo;
— и –
&lt и &gt
неразрывный
пробел
&nbsp
&
&amp

18.

Переносы

19.

Текст без переноса
 ТЕКСТ 
У Лукоморья дуб
зеленый, златая цепь на
дубе том
У Лукоморья дуб зеленый, златая це

20.

Перенос слова (текста)
ТЕКСТ ТЕКСТ
У Лукоморья дуб
зеленый, златая 
цепь на дубе том
У Лукоморья дуб зеленый, златая
цепь на дубе том

21.

Задание 2

22.

23.

Шрифты

24.

Дескриптор 
ТЕКСТ
Параметры:
Face – гарнитура (вид)
Size – размер
Color – цвет

25.

Гарнитура
 ТЕКСТ 
Привет,
МЕДВЕД!
Привет, МЕДВЕД!

26.

Гарнитура
 ТЕКСТ 
Привет, МЕДВЕД!
Привет, МЕДВЕД!

27.

Размер
 ТЕКСТ 
 Размер текста 2
 
 Размер текста 3

Размер текста 2
Размер текста 3
число = 1-7

28.

Размер
 ТЕКСТ 
 Размер текста 7
 
число = 1-7
 Размер текста 8

Размер текста 7

29.

Размер
 ТЕКСТ 
Это стандартный текст 
 Меньше на 2
 
относительно
стандартного:
+ больше
- меньше
 Больше на 2

Это стандартный текст
Меньше на 2

30.

Цвет
 ТЕКСТ 

Цвет морской волны 
код = #00-FF
код = название
(red, black …)
 А это Коды
какой
одного
цвет? 
цвета!
Причина –
монитор!
Цвет морской волны
А это какой цвет?

31.

Таблица базовых цветов
Палитра
Netscape

32.

ШРИФТ с несколькими параметрами
ТЕКСТ

Свежий ветер
Свежий ветер

33.

ШРИФТ с несколькими параметрами
 <tag> ТЕКСТ <tag>
ТЕКСТ

Свежий <S>ветер</S>
Свежий ветер
tag: I,U,B,
S-
зачеркнутый

34.

Параметры шрифта по умолчанию
<BASEFONT параметры>
обычно ставят в начале страницы текста
<BASEFONT face=Courier size=2>
Лучше
меньше
да лучше!
Лучше меньше да лучше!

35.

Задание 3

36.

Учитель, применяющий ИКТ должен усвоить золотое правило:
использование ИКТ на уроках должно быть не самоцелью, а во благо
самого процесса обучения и обучающихся. Такая работа требует
другой дидактической системы, иных методов и технологий обучения,
адекватных личностно-ориентированному подходу в образовании.
Эффективность любого урока определяется не тем, что дает детям
учитель, а тем, что они взяли в процессе обучения. Умение
рационально применять ИКТ с традиционными средствами обучения
позволяет учителю создавать ту палитру красок, с помощью которой
создается неповторимый шедевр – современный урок.

37.

Логическая разметка

38.

Физическая разметка текста
внешний вид текста (шрифт, размер, цвет,
начертание)
Логическая разметка текста
роль текста на странице (заголовок, цитата,
акцент, верхний и нижний индекс, пояснения)

39.

Заголовки (header)
<Hn>ТЕКСТ</Hn>
<H1>Глава первая</H1>
<H2>Параграф 1</H2>
Глава первая
Параграф 1
n = 1- 6

40.

Заголовки (header)
<Hn>ТЕКСТ</Hn>
n = 1- 6
<H1 align=right>Глава первая</H1>
<H2 align=center>Параграф 1</H2>
Глава первая
Параграф 1

41.

Акценты
ТЕКСТ
ТЕКСТ
Здесь выделен важный
момент.
А здесь выделен очень
важный момент.
Здесь выделен важный момент. А здесь
выделен очень важный момент.

42.

Цитаты
<CITE>ТЕКСТ</CITE>
<BLOCKQUOTE>ТЕКСТ</BLOCKQUOTE>
Кто сказал: « <CITE>МЯУ</CITE> »?
 А вот строки из
стихотворения:<BLOCKQUOTE>Я помню чудное
мгновенье Передо мной явилась ты
</BLOCKQUOTE>
Кто сказал: « МЯУ »?
А вот строки из стихотворения:
Я помню чудное мгновенье
Передо мной явилась ты

43.

Верхний и нижний индексы
ТЕКСТ …(нижний)
ТЕКСТ …(верхний)
H2SO4
&nbsp E=mc2
H2SO4 E=mc2

44.

Пояснения
<ACRONYM title=“пояснение”>ТЕКСТ</ACRONYM>
Для разметки текста на WEB-странице
используют язык <ACRONYM
title=“HyperText Markup Language”>
HTML </ACRONYM>.
Для разметки текста на WEB-странице
используют язык HTML
HyperText Markup Language

45.

Задание 4

46.

47.

I. Компьютер
А. Системный блок
1. Системная плата
2. Процессор
3. Память
В. Монитор
С. Клавиатура
II. Периферийные устройства
Принтер
Сканер

48.

Списки

49.

Общая конструкция
Д - дескриптор
<Д1 параметры всего списка>
<Д2 параметры элемента 1> Элемент1</Д2>
<Д2 параметра элемента 2> Элемент2</Д2>
……………………………………………………………………………
</Д1>

50.

Нумерованные списки
<OL>
<LI>Элемент1</LI>
<LI>Элемент2</LI>
</OL>

51.

Нумерованные списки
Все компьютеры имеют три основных блока:
<OL>
<LI>Монитор</LI>
<LI>Системный блок</LI>
<LI>Клавиатуру</LI>
</OL>
Все компьютеры имеют три основных
блока:
1. Монитор
2. Системный блок
3. Клавиатуру

52.

Нумерованные списки
Все компьютеры имеют три основных блока:
<OL start=0>
<LI>Монитор</LI>
<LI>Системный блок</LI>
<LI>Клавиатуру</LI>
</OL>
Все компьютеры имеют три основных
блока:
0. Монитор
1. Системный блок
2. Клавиатуру

53.

Нумерованные списки
Все компьютеры имеют три основных блока:
<OL type=I>
I
<LI>Монитор</LI>
<LI>Системный блок</LI>
<LI>Клавиатуру</LI>
</OL>
Все компьютеры имеют три основных
блока:
I. Монитор
II. Системный блок
III. Клавиатуру

54.

Нумерованные списки
Все компьютеры имеют три основных блока:
<OL type=A>
A
<LI>Монитор</LI>
<LI>Системный блок</LI>
<LI>Клавиатуру</LI>
</OL>
Все компьютеры имеют три основных
блока:
A. Монитор
B. Системный блок
C. Клавиатуру

55.

Нумерованные списки
Все компьютеры имеют три основных блока:
value
<OL>
<LI>Монитор</LI>
<LI value=5>Системный блок</LI>
<LI>Клавиатуру</LI>
</OL>
Все компьютеры имеют три основных
блока:
1. Монитор
5. Системный блок
6. Клавиатуру

56.

Маркированные списки
<UL>
<LI>Элемент1</LI>
<LI>Элемент2</LI>
</UL>

57.

Маркированные списки
Все компьютеры имеют три основных блока:
<UL>
<LI>Монитор</LI>
<LI>Системный блок</LI>
<LI>Клавиатуру</LI>
</UL>
Все компьютеры имеют три основных
блока:
• Монитор
• Системный блок
• Клавиатуру

58.

Маркированные списки
Все компьютеры имеют три основных блока:
circle
<UL type=circle>
<LI>Монитор</LI>
<LI>Системный блок</LI>
<LI>Клавиатуру</LI>
</UL>
Все компьютеры имеют три основных
блока:
o Монитор
o Системный блок
o Клавиатуру

59.

Маркированные списки
Все компьютеры имеют три основных блока:
square
<UL type=square>
<LI>Монитор</LI>
<LI>Системный блок</LI>
<LI>Клавиатуру</LI>
</UL>
Все компьютеры имеют три основных
блока:
Монитор
Системный блок
Клавиатуру

60.

Маркированные списки
Все компьютеры имеют три основных блока:
<UL>
<LI>Монитор</LI>
<LI type=circle>Системный блок</LI>
<LI type=square>Клавиатуру</LI>
</UL>
Все компьютеры имеют три основных
блока:
• Монитор
o Системный блок
Клавиатуру

61.

62.

63.

Задание 5

64.

65.

Графика

66.

Вставка изображения
<IMG src=имя картинки>
<IMG src=tiger.jpg>
Файл картинки
находится в одной
папке с HTMLфайлом

67.

Вставка изображения
<IMG src=имя картинки>
<IMG src=“Images/tiger.jpg”>
Файл картинки
находится в папке
Images

68.

Вставка изображения
<IMG src=имя картинки>
<IMG src=“Images/tiger.jpg”>
Файл картинки
НЕ НАЙДЕН!

69.

Размеры изображения
<IMG src=“имя картинки” width=A height=B>
Если задан только один
параметр, то размер
меняется
пропорционально.
Height = 615
Width = 400

70.

Размеры изображения
<IMG src=“Images/tiger.jpg” width=100>

71.

Размеры изображения
<IMG src=“Images/tiger.jpg”
width=100 height=500>
<IMG src=“Images/tiger.jpg”
width=500 height=100>

72.

Размеры изображения
<IMG src=“Images/tiger.jpg” width=100%>
<IMG src=“Images/tiger.jpg” width=100% height=100%>
При изменении размера
окна браузера,
изменяется только
ширина картинки.
При изменении размера
окна браузера,
изменяется ширина и
высота картинки.

73.

Подпись изображения
<IMG src=“имя картинки” alt=подпись>
<IMG src=“Images/tiger.jpg” alt=“Это Тигра”>
Это Тигра

74.

Обтекание графики текстом
<IMG src=“имя картинки” align=…>
<IMG src=“Images/tiger.jpg” align=left>
Это веселый и энергичный персонаж из
фильма “Вини и его друзья”.
Его зовут Тигра. Он любит
прыгать, играть и танцевать.
По прыжкам в высоту ему нет
равных. Словно в его хвосте
кто-то установил пружину.
Это веселый и энергичный
персонаж из фильма “Вини и
его друзья”. Его зовут Тигра.
Он любит прыгать, играть и
танцевать. По прыжкам в
высоту ему нет равных.
Словно в его хвосте кто-то установил
пружину.

75.

Отступы
<IMG src=“имя картинки” align=…
hspace= …
vspace= …>
<IMG src=“Images/tiger.jpg”
align=left
hspace=20 vspace=20>
Это веселый и энергичный персонаж
Отступ из
по
Отступ по
фильма “Вини
и его друзья”. вертикали
горизонтали
Его зовут Тигра. Он любит
прыгать, играть и танцевать.
По прыжкам в высоту ему нет
равных. Словно в его хвосте
кто-то установил пружину.
Это веселый и энергичный
персонаж из фильма
“Вини и его друзья”. Его
зовут Тигра. Он любит
прыгать, играть и
танцевать. По прыжкам в
высоту ему нет равных.
Словно в его хвосте кто-то установил
пружину.

76.

Выравнивание по вертикали
<IMG src=“имя картинки” align=…>
Absbottom
Baseline
Жил-был
- румяный бок.
Bottom
Absmiddle
Жил-был
- румяный бок.
Middle
Texttop
Жил-был
- румяный бок.
Top

77.

Изображение в рамке
<IMG src=“имя картинки” border=…>
<IMG src=“Images/tiger.jpg” border=1>
<IMG src=“Images/tiger.jpg” border=6>

78.

Задание 6

79.

80.

Гиперссылки

81.

Что такое гиперссылка?
Гиперссылка (hyperlink)
указатель
внутри
гипертекстового
документа,
указывающий на другой документ (связывает с
другим документом).

82.

Точка входа
<A href=“адрес перехода”>текст-ссылка</A>
Anchor - якорь
Новости вы можете посмотреть на
<a href=“http://www.minuspk.ru”>сайте колледжа</a>.
Новости вы можете посмотреть на
сайте колледжа.

83.

Закладки
<A name=“begin”>
<A href=“#a1”>
ссылка
метка
<A name=“a1”>
<A name=“end”>
</A>

84.

Задание 7

85.

Этапы подготовки и решения задач на ЭВМ
На ЭВМ могут решаться задачи различного характера,
например: научно-инженерные; разработки системного
программного обеспечения; обучения; управления
производственными процессами и т. д. В процессе
подготовки и решения на ЭВМ научно -инженерных
задач можно выделить следующие этапы:
постановка задачи;
математическое описание задачи;
выбор и обоснование метода решения;
алгоритмизация вычислительного процесса;
составление программы;
отладка программы;
решение задачи на ЭВМ и анализ результатов.
В задачах другого класса некоторые этапы могут
отсутствовать, например, в задачах разработки
системного программного обеспечения отсутствует
математическое описание. Перечисленные этапы
связаны друг с другом.

86.

87.

Ссылка на e-mail
<A href=“mailto:адрес”>текст-ссылка</A>
Написать письмо можно <a href=“mailto:
[email protected]”> здесь</a>

88.

Ссылка на e-mail
<A href=“mailto:адрес1;адрес2
?
subject=тема письма&body=текст письма”>
текст-ссылка</A>
<a href="mailto:[email protected] ?
subject=Пробное_письмо&body=
Привет!">

89.

Задание 8

90.

Отправить письмо можно здесь.
адрес своей эл. почты
Письмо от Петровой Анны
Практическая работа выполнена на
компьютере N6.

91.

Ссылки - картинки
<A href=“адрес ссылки”><img src=“имя
картинки”></A>
Адрес ссылки
Отключение
рамки картинки
<a href="http://ru.wikipedia.org"><img border=0
width=100 src="books.jpg"></a>
Задание размера
картинки
Имя (адрес) картинки

92.

Ссылки - картинки
<A href=“адрес ссылки”><img src=“имя
картинки”></A>
<a href="http://ru.wikipedia.org"><img border=0
width=100 alt=“Википедия” src="books.jpg"></a>
Всплывающая
надпись

93.

Задание 9

94.

Пиктограмма 1

95.

Карты изображений (image map)
КАРТА
Изображение
Область
ссылки

96.

Карты изображений (image map)
<MAP name “map1”>
<AREA параметры_области1 href=“ссылка1”
alt=“пояснение1”>
<AREA параметры_области2 href=“ссылка2”
alt=“пояснение2”>
……………………………………………………………………………
</MAP>
Имя наложенной
карты
<IMG src=“office.jpg” usemap=#map1 border=0>
Имя
изображения