545

HTML
Hyper
Text
ЯЗЫК
Markup
ГИПЕРТЕКСТА
Language
РАЗМЕТКИ
HTML — язык дескрипторов
Дескриптор
(tag) - это некое ключевое
слово или сокращение.
tag - "признак", "метка", "маркер"
<tag> ТЕКСТ </tag>
Содержание
• Начертание текста
• Абзацы
• Специальные символы
• Переносы
• Шрифты
• Логическая разметка
• Списки
• Графика
• Гиперссылки
• Таблицы
Начертание текста
КУРСИВ (Italic)
<I> ТЕКСТ </I>
<I>Черный тополь</I>
Черный тополь
ЖИРНЫЙ ШРИФТ (Bold)
<B> ТЕКСТ </B>
<B>Черный тополь</B>
Черный тополь
Подчеркивание (Underline)
<U> ТЕКСТ </U>
<U>Черный тополь</U>
Черный тополь
Абзацы
Разрыв строки
строка1 <BR> строка2
Дело было вечером,<BR>Делать было нечего
Дело было вечером,
Делать было нечего
Абзац (paragraph)
<P> ТЕКСТ </P>
<P>Дело было вечером,</P>
<P>Делать было нечего</P>
Дело было вечером,
Делать было нечего
Абзац с параметрами
<P align=параметр>
Параметры:
Right – правый край
Left –
<P align=right>Дело было вечером,</P>
<P край
align=center>Делать было нечего</P>
левый
Center – по центру
Justify – по ширине
Дело было вечером,
Делать было нечего
Абзац с параметрами
<P align=параметр>
Параметры:
Right – правый край
Left –
<P align=right>Дело было вечером,<BR>
Делать
левый
крайбыло нечего</P>
Center – по центру
Justify – по ширине
Дело было вечером,
Делать было нечего
Задание 1
Специальные символы
Символ
«и»
“и”
„
-и
<и>
Код
« и »
“ и ”
„
— и –
&lt и &gt
неразрывный
пробел
&nbsp
&
&amp
Переносы
Текст без переноса
<NOBR> ТЕКСТ </NOBR>
<NOBR>У Лукоморья дуб
зеленый, златая цепь на
дубе том</NOBR>
У Лукоморья дуб зеленый, златая це
Перенос слова (текста)
ТЕКСТ <WBR> ТЕКСТ
<NOBR>У Лукоморья дуб
зеленый, златая <WBR>
цепь на дубе том</NOBR>
У Лукоморья дуб зеленый, златая
цепь на дубе том
Задание 2
Шрифты
Дескриптор <FONT>
<FONT параметры>ТЕКСТ</FONT>
Параметры:
Face – гарнитура (вид)
Size – размер
Color – цвет
Гарнитура
<FONT face=шрифт> ТЕКСТ </FONT>
Привет,<FONT face=Courier>
МЕДВЕД!</FONT>
Привет, МЕДВЕД!
Гарнитура
<FONT face=шрифт> ТЕКСТ </FONT>
Привет,<FONT face=“Times New
Roman”> МЕДВЕД!</FONT>
Привет, МЕДВЕД!
Размер
<FONT size=число> ТЕКСТ </FONT>
<FONT size=2> Размер текста 2
</FONT><BR>
<FONT size=3> Размер текста 3
</FONT>
Размер текста 2
Размер текста 3
число = 1-7
Размер
<FONT size=число> ТЕКСТ </FONT>
<FONT size=7> Размер текста 7
</FONT><BR>
число = 1-7
<FONT size=8> Размер текста 8
</FONT>
Размер текста 7
Размер текста 8
Размер
<FONT size=число> ТЕКСТ </FONT>
Это стандартный текст <BR>
<FONT size=-2> Меньше на 2
</FONT><BR>
относительно
стандартного:
+ больше
- меньше
<FONT size=+2> Больше на 2
</FONT>
Это стандартный текст
Меньше на 2
Больше на 2
Цвет
<FONT color=код> ТЕКСТ </FONT>
<FONT color=mediumaquamarine>
Цвет морской волны</FONT><BR>
код = #00-FF
код = название
(red, black …)
<FONT color=#CDAA> А это Коды
какой
одного
цвет? </FONT>
цвета!
Причина –
монитор!
Цвет морской волны
А это какой цвет?
Таблица базовых цветов
Палитра
Netscape
ШРИФТ с несколькими параметрами
<FONT пар1 пар2>ТЕКСТ</FONT>
<FONT face=Courier size=+2>
Свежий ветер</FONT>
Свежий ветер
ШРИФТ с несколькими параметрами
<FONT параметры> <tag> ТЕКСТ <tag>
ТЕКСТ</FONT>
<FONT face=Courier size=+2>
Свежий <S>ветер</S></FONT>
Свежий ветер
tag: I,U,B,
S - зачеркнутый
Параметры шрифта по умолчанию
<BASEFONT параметры>
обычно ставят в начале страницы текста
<BASEFONT face=Courier size=2>
<FONT color=red>Лучше
меньше</FONT>
<FONT color=Blue>да лучше!</FONT>
Лучше меньше да лучше!
Задание 3
Учитель, применяющий ИКТ должен усвоить золотое правило:
использование ИКТ на уроках должно быть не самоцелью, а во благо
самого процесса обучения и обучающихся. Такая работа требует
другой дидактической системы, иных методов и технологий обучения,
адекватных личностно-ориентированному подходу в образовании.
Эффективность любого урока определяется не тем, что дает детям
учитель, а тем, что они взяли в процессе обучения. Умение
рационально применять ИКТ с традиционными средствами обучения
позволяет учителю создавать ту палитру красок, с помощью которой
создается неповторимый шедевр – современный урок.
Логическая разметка
Физическая разметка текста
внешний вид текста (шрифт, размер, цвет,
начертание)
Логическая разметка текста
роль текста на странице (заголовок, цитата,
акцент, верхний и нижний индекс, пояснения)
Заголовки (header)
<Hn>ТЕКСТ</Hn>
<H1>Глава первая</H1>
<H2>Параграф 1</H2>
Глава первая
Параграф 1
n = 1- 6
Заголовки (header)
<Hn>ТЕКСТ</Hn>
n = 1- 6
<H1 align=right>Глава первая</H1>
<H2 align=center>Параграф 1</H2>
Глава первая
Параграф 1
Акценты
<EM>ТЕКСТ</EM>
<STRONG>ТЕКСТ</STRONG>
Здесь выделен <EM>важный
момент</EM>.
А здесь выделен <STRONG>очень
важный момент</STRONG>.
Здесь выделен важный момент. А здесь
выделен очень важный момент.
Цитаты
<CITE>ТЕКСТ</CITE>
<BLOCKQUOTE>ТЕКСТ</BLOCKQUOTE>
Кто сказал: « <CITE>МЯУ</CITE>
»?<BR> А вот строки из
стихотворения:<BLOCKQUOTE>Я помню чудное
мгновенье <BR>Передо мной явилась ты
</BLOCKQUOTE>
Кто сказал: « МЯУ »?
А вот строки из стихотворения:
Я помню чудное мгновенье
Передо мной явилась ты
Верхний и нижний индексы
<SUB>ТЕКСТ</SUB> …(нижний)
<SUP>ТЕКСТ</SUP> …(верхний)
H<SUB>2</SUB>SO<SUB>4</SUB>
&nbsp E=mc<SUP>2</SUP>
H2SO4 E=mc2
Пояснения
<ACRONYM title=“пояснение”>ТЕКСТ</ACRONYM>
Для разметки текста на WEB-странице
используют язык <ACRONYM
title=“HyperText Markup Language”>
<U>HTML</U> </ACRONYM>.
Для разметки текста на WEB-странице
используют язык HTML
HyperText Markup Language
Задание 4
Списки
Общая конструкция
Д - дескриптор
<Д1 параметры всего списка>
<Д2 параметры элемента 1> Элемент1</Д2>
<Д2 параметра элемента 2> Элемент2</Д2>
……………………………………………………………………………
</Д1>
Нумерованные списки
<OL>
<LI>Элемент1</LI>
<LI>Элемент2</LI>
</OL>
Нумерованные списки
Все компьютеры имеют три основных блока:
<OL>
<LI>Монитор</LI>
<LI>Системный блок</LI>
<LI>Клавиатуру</LI>
</OL>
Все компьютеры имеют три основных
блока:
1. Монитор
2. Системный блок
3. Клавиатуру
Нумерованные списки
Все компьютеры имеют три основных блока:
<OL start=0>
<LI>Монитор</LI>
<LI>Системный блок</LI>
<LI>Клавиатуру</LI>
</OL>
Все компьютеры имеют три основных
блока:
0. Монитор
1. Системный блок
2. Клавиатуру
Нумерованные списки
Все компьютеры имеют три основных блока:
<OL type=I>
I
<LI>Монитор</LI>
<LI>Системный блок</LI>
<LI>Клавиатуру</LI>
</OL>
Все компьютеры имеют три основных
блока:
I. Монитор
II. Системный блок
III. Клавиатуру
Нумерованные списки
Все компьютеры имеют три основных блока:
<OL type=A>
A
<LI>Монитор</LI>
<LI>Системный блок</LI>
<LI>Клавиатуру</LI>
</OL>
Все компьютеры имеют три основных
блока:
A. Монитор
B. Системный блок
C. Клавиатуру
Нумерованные списки
Все компьютеры имеют три основных блока:
value
<OL>
<LI>Монитор</LI>
<LI value=5>Системный блок</LI>
<LI>Клавиатуру</LI>
</OL>
Все компьютеры имеют три основных
блока:
1. Монитор
5. Системный блок
6. Клавиатуру
Маркированные списки
<UL>
<LI>Элемент1</LI>
<LI>Элемент2</LI>
</UL>
Маркированные списки
Все компьютеры имеют три основных блока:
<UL>
<LI>Монитор</LI>
<LI>Системный блок</LI>
<LI>Клавиатуру</LI>
</UL>
Все компьютеры имеют три основных
блока:
• Монитор
• Системный блок
• Клавиатуру
Маркированные списки
Все компьютеры имеют три основных блока:
circle
<UL type=circle>
<LI>Монитор</LI>
<LI>Системный блок</LI>
<LI>Клавиатуру</LI>
</UL>
Все компьютеры имеют три основных
блока:
o Монитор
o Системный блок
o Клавиатуру
Маркированные списки
Все компьютеры имеют три основных блока:
square
<UL type=square>
<LI>Монитор</LI>
<LI>Системный блок</LI>
<LI>Клавиатуру</LI>
</UL>
Все компьютеры имеют три основных
блока:
 Монитор
 Системный блок
 Клавиатуру
Маркированные списки
Все компьютеры имеют три основных блока:
<UL>
<LI>Монитор</LI>
<LI type=circle>Системный блок</LI>
<LI type=square>Клавиатуру</LI>
</UL>
Все компьютеры имеют три основных
блока:
• Монитор
o Системный блок
 Клавиатуру
Задание 5
Графика
Вставка изображения
<IMG src=имя картинки>
<IMG src=tiger.jpg>
Файл картинки
находится в одной
папке с HTMLфайлом
Вставка изображения
<IMG src=имя картинки>
<IMG src=“Images/tiger.jpg”>
Файл картинки
находится в папке
Images
Вставка изображения
<IMG src=имя картинки>
<IMG src=“Images/tiger.jpg”>
Файл картинки
НЕ НАЙДЕН!
Размеры изображения
<IMG src=“имя картинки” width=A height=B>
Если задан только один
параметр, то размер
меняется
пропорционально.
Height = 615
Width = 400
Размеры изображения
<IMG src=“Images/tiger.jpg” width=100>
Размеры изображения
<IMG src=“Images/tiger.jpg”
width=100 height=500>
<IMG src=“Images/tiger.jpg”
width=500 height=100>
Размеры изображения
<IMG src=“Images/tiger.jpg” width=100%>
<IMG src=“Images/tiger.jpg” width=100% height=100%>
При изменении размера
окна браузера,
изменяется только
ширина картинки.
При изменении размера
окна браузера,
изменяется ширина и
высота картинки.
Подпись изображения
<IMG src=“имя картинки” alt=подпись>
<IMG src=“Images/tiger.jpg” alt=“Это Тигра”>
Это Тигра
Обтекание графики текстом
<IMG src=“имя картинки” align=…>
<IMG src=“Images/tiger.jpg” align=left>
Это веселый и энергичный персонаж из
фильма “Вини и его друзья”.
Его зовут Тигра. Он любит
прыгать, играть и танцевать.
По прыжкам в высоту ему нет
равных. Словно в его хвосте
кто-то установил пружину.
Это веселый и энергичный
персонаж из фильма “Вини и
его друзья”. Его зовут Тигра.
Он любит прыгать, играть и
танцевать. По прыжкам в
высоту ему нет равных.
Словно в его хвосте кто-то установил
пружину.
Отступы
<IMG src=“имя картинки” align=…
hspace= …
vspace= …>
<IMG src=“Images/tiger.jpg”
align=left
hspace=20 vspace=20>
Это веселый
и энергичный персонаж
Отступ из
по
Отступ по
фильма “Вини
и его друзья”.
вертикали
горизонтали
Его зовут Тигра. Он любит
прыгать, играть и танцевать.
По прыжкам в высоту ему нет
равных. Словно в его хвосте
кто-то установил пружину.
Это веселый и энергичный
персонаж из фильма
“Вини и его друзья”. Его
зовут Тигра. Он любит
прыгать, играть и
танцевать. По прыжкам в
высоту ему нет равных.
Словно в его хвосте кто-то установил
пружину.
Выравнивание по вертикали
<IMG src=“имя картинки” align=…>
Absbottom
Baseline
Жил-был
- румяный бок.
Bottom
Absmiddle
Жил-был
- румяный бок.
Middle
Texttop
Жил-был
- румяный бок.
Top
Изображение в рамке
<IMG src=“имя картинки” border=…>
<IMG src=“Images/tiger.jpg” border=1>
<IMG src=“Images/tiger.jpg” border=6>
Задание 6
Гиперссылки
Что такое гиперссылка?
Гиперссылка (hyperlink)
указатель
внутри
гипертекстового
документа,
указывающий на другой документ (связывает с
другим документом).
Точка входа
<A href=“адрес перехода”>текст-ссылка</A>
Anchor - якорь
Новости вы можете посмотреть на
<a href=“http://www.minuspk.ru”>сайте колледжа</a>.
Новости вы можете посмотреть на сайте
колледжа.
Закладки
<A name=“begin”>
<A href=“#a1”>
ссылка
метка
<A name=“a1”>
<A name=“end”>
</A>
Задание 7
Этапы подготовки и решения задач на ЭВМ
На ЭВМ могут решаться задачи различного характера,
например: научно-инженерные; разработки системного
программного обеспечения; обучения; управления
производственными процессами и т. д. В процессе
подготовки и решения на ЭВМ научно -инженерных
задач можно выделить следующие этапы:
постановка задачи;
математическое описание задачи;
выбор и обоснование метода решения;
алгоритмизация вычислительного процесса;
составление программы;
отладка программы;
решение задачи на ЭВМ и анализ результатов.
В задачах другого класса некоторые этапы могут
отсутствовать, например, в задачах разработки
системного программного обеспечения отсутствует
математическое описание. Перечисленные этапы
связаны друг с другом.
Ссылка на e-mail
<A href=“mailto:адрес”>текст-ссылка</A>
Написать письмо можно <a href=“mailto:
lektor-70@yandex.ru”> здесь</a>
Ссылка на e-mail
<A href=“mailto:адрес1;адрес2
?subject=тема письма&body=текст письма”>
текст-ссылка</A>
<a href="mailto:lektor-70@yandex.ru
?subject=Пробное_письмо&body=
Привет!">
Задание 8
Отправить письмо можно здесь.
адрес своей эл. почты
Письмо от Петровой Анны
Практическая работа выполнена на
компьютере N6.
Ссылки - картинки
<A href=“адрес ссылки”><img src=“имя
картинки”></A>
Адрес ссылки
Отключение
рамки картинки
<a href="http://ru.wikipedia.org"><img border=0
width=100 src="books.jpg"></a>
Задание размера
картинки
Имя (адрес) картинки
Ссылки - картинки
<A href=“адрес ссылки”><img src=“имя
картинки”></A>
<a href="http://ru.wikipedia.org"><img border=0
width=100 alt=“Википедия” src="books.jpg"></a>
Всплывающая
надпись
Задание 9
Пиктограмма 1
Карты изображений (image map)
КАРТА
Изображение
Область
ссылки
Карты изображений (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>
Имя
изображения
Карты изображений (image map)
<AREA shape=форма coords=“параметры области”>
ФОРМА:
rect (прямоугольник)
circ (окружность)
poly (многоугольник)
Карты изображений (image map)
КООРДИНАТЫ и РАЗМЕРЫ ОКРУЖНОСТИ
10
coords=“10,20,40”
20
радиус = 40
Карты изображений (image map)
КООРДИНАТЫ и РАЗМЕРЫ ПРЯМОУГОЛЬНИКА
10
20
50
70
coords=“10,20,70,50”
Карты изображений (image map)
КООРДИНАТЫ и РАЗМЕРЫ МНОГОУГОЛЬНИКА
50
30
coords=“50,30,55,30,60,40,45,40,50,30”
Задание 10
1.
Найти в Интернет или изготовить самостоятельно
изображение.
2.
Создать HTML-документ для отображения в
браузере картинки с 3-мя областями-ссылками
(прямоугольник, окружность, многоугольник).
Таблицы
Строки и столбцы
Таблица
<TABLE border=1>
Строка
<TR>
<TD> Первая строка,первый столбец </TD>
<TD> Первая строка,второй столбец </TD>
</TR>
Столбец
<TR>
<TD> Вторая строка,первый столбец </TD>
<TD> Вторая строка,второй столбец </TD>
</TR>
</TABLE>
Рамки
Рамки
Рамки
bordercolor=код цвета
Внутренние отступы
cellspacing=число
отступ между внутренней и внешней рамками
cellpadding=число
отступ между текстом и внутренней рамкой
Внутренние отступы
Горизонтальное выравнивание
align=center
align=right
align=left
(по центру)
(по прав. краю)
(по лев. краю)
Вертикальное выравнивание
valign= middle
(по середине)
valign=top
(по верхн. краю)
valign=bottom
(по нижн. краю)
>
Размер ячеек
75%
Width
(ширина)
Height
(высота)
25%
Размер ячеек
Width
(ширина)
Height
(высота)
100
250
точек
точек
Задание 11
Фон таблицы и ячеек
заливка сплошным цветом
Цвет фона всей
таблицы
<TABLE border=1 bgcolor=yellow>
<TR>
<TD bgcolor=blue> текст1 </TD>
<TD bgcolor=red> текст2 </TD>
</TR>
Цвет фона ячейки
</TABLE>
Фон таблицы и ячеек
заливка готовым рисунком
Имя файла
рисунка
<TABLE border=1 background=“pic1.jpg”>
<TR>
<TD background=“pic2.jpg”> текст1 </TD>
<TD> текст2 </TD>
</TR>
</TABLE>
pic1.jpg
pic2.jpg
Цвет текста в таблице
<TABLE border=1 background=“pic1.jpg”>
<TR>
<TD background=“pic2.jpg”>
<B><FONT color=white> текст1 </FONT></B>
</TD>
<TD> текст2 </TD>
</TR>
</TABLE>
Задание 12
20
Файл
pic1.jpg
Файл
pic1.jpg
Слияние ячеек таблицы
<TABLE border=1>
<TR>
<TD rowspan=2 > Большая ячейка</TD>
<TD> Обычная ячейка</TD>
</TR>
<TR>
<TD> Обычная ячейка</TD>
</TR>
</TABLE>
Слияние ячеек таблицы
<TABLE border=1>
<TR>
<TD colspan=2 > Широкая ячейка</TD>
</TR>
<TR>
<TD> Обычная ячейка</TD>
<TD> Обычная ячейка</TD>
</TR>
</TABLE>
Задание 13