Презентация к уроку язык гипертекстовой разметки HTML

Целевая аудитория 9 класс

Основные понятия

•Тег (языки разметки) — элемент языка разметки гипертекста (например, XML, HTML).

•HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартный язык разметки

•Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1986—1991 годах в стенах Европейского Центра ядерных исследований в Женеве (Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки документов во Всемирной паутине.

Основные разделы документа

•<HTML> - начало страницы

•<HEAD> -оформление заголовка страницы

• <META name=‘…’,> заголовок, автор

• <TITLE>…</TITLE>

•</HEAD>

•<BODY> - текст и основная часть страницы

•</BODY>

•</HTML>

Работа с текстом

•<FONT SIZE = ‘1-7’ – установка размера шрифта •<H1-6> ваш заголовок </H1-6> •<P> ваш текст </P> - создание абзаца

ALIGN=“left” – выравнивание текста по левой стороне

ALIGN=“right” – выравнивание текста по правой стороне

ALIGN=“center” – выравнивание текста по центру

ALIGN=“justify” - выравнивание текста по ширине

•<nobr> …</nobr> - не позволяет разрывать текст на строке •<BR> - прерывание текста, перенос на следующую строку •<B> ..</B> - жирный •<I> ..</I> - курсив •<U> ..</U> - подчеркивание •<strike> ..</strike> - перечеркивание Изменение шрифта и цвета шрифта •<FONT COLOR = ‘red’> цвет шрифта </FONT> •FACE="Times New Roman“ изменение шрифта •SIZE=“1” – размер шрифта от 1 до 7 •

<font color="green" FACE="Arial" size="3"><b>Мороз и солнце; день

чудесный!

<br> Еще ты дремлешь, друг прелестный –

<br> Пора, красавица, проснись;

<br> Открой сомкнуты негой взоры</b></font> Изменение цвета шрифта
<FONT COLOR=“green”> … <FONT> •aqua ##00FFFF •black ##000000 •blue ##0000FF •fuchsia ##FF00FF •gray ##808080 •green ##008000 •lime ##00FF00 •maroon ##800000 •navy ##000080 •olive ##808000 •purple ##800080 •red ##FF0000 •silver ##C0C0C0 •teal ##008080 •white ##FFFFFF •yellow ##FFFF00 Изменение цвета страницы •<BODY Bgcolor="gray">

………………………………………..

•</BODY> Тег и атрибут вставки изображений на Web-странице •<img srс="xxx.jpg"> , где xxx.jpg название файла изображения. •Если картинка находится в папке picture html код будет такой: •<img srс="picture/xxx.jpg"> Теги и атрибуты гиперссылки на Web-странице •<A HREF=“Адрес”>Указатель</A> тег с атрибутом для создания гиперссылки •<ADDRESS>…</ADDRESS> контейнер для создания гиперссылки на адрес электронной почты Теги и атрибуты для создания списков на Web-страницеки •<OL>…</OL> контейнер для создания нумерованных списков

<LI> тег элемента списка

•<UL>…</UL> контейнер для создания маркированного списка

<LI> тег элемента списка

•<DL>…</DL> контейнер для создания списка терминов •<DT> тег для создания термина •<DD> тег для создания определения Алгоритм вставки таблиц:

1. описание таблицы;
2. описание строки;
3. описание ячейки;
4. ввод текста ячейки.

Создание и форматирование таблиц

Вставка таблицы - парный тэг <table> </table>

По умолчанию текст выравнивается по левому краю, ширина столбца - по наиболее длинному элементу.

Атрибуты к тэгу <table>

BORDER “ “ – толщина границы таблицы в пикселях

WIDTH “ “ – ширина таблицы в пикселях или процентах, относительно окна браузера

</table>

Строка таблицы

Вставка строки таблицы - парный тэг <tr> </tr>

Атрибуты:

Align = (left, center, richt) – горизонтальное выравнивание

Valign = bottom, middle, top) – вертикальное выравнивание

</tr>

Ячейка таблицы

Вставка ячейки таблицы - парный тэг <td> </td>

Атрибуты:

Align = (left, center, richt) – горизонтальное выравнивание

Valign = (bottom, middle, top) – вертикальное выравнивание

<td> Тема доклада </td>

Ширина и высота таблицы

ПРИМЕР:

<td> Тема доклада</td>

</tr>

</table>

Таблица содержит 1 строку,

3 столбца

Объединение ячеек

•<TD ROWSPAN=2>Ячейка, захватывающая две строки</TD>

•<TD COLSPAN=2>Ячейка, захватывающая два столбца</TD>

Вы уже знаете о суперспособностях современного учителя?

Тратить минимум сил на подготовку и проведение уроков.

Быстро и объективно проверять знания учащихся.

Сделать изучение нового материала максимально понятным.

Избавить себя от подбора заданий и их проверки после уроков.

Наладить дисциплину на своих уроках.

Получить возможность работать творчески.

=> ПОЛУЧИТЬ СУПЕРСПОСОБНОСТИ УЧИТЕЛЯ <=

Просмотр содержимого документа
«Презентация к уроку язык гипертекстовой разметки HTML »

Язык гипертекстовой разметки HTML

Подготовил учитель информатике Пажитнев Максим Викторович

Основные понятия

Тег (языки разметки) — элемент языка разметки гипертекста (например, XML, HTML).
HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартный язык разметки
Язык HTML был разработан британским учёным Тимом Бернерсом -Ли приблизительно в 1986 — 1991 годах в стенах Европейского Центра ядерных исследований в Женеве ( Швейцария ). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки документов во Всемирной паутине.

Основные разделы документа HTML.

- начало страницы
-оформление заголовка страницы
заголовок, автор
…
- текст и основная часть страницы

Работа с текстом

– установка размера шрифта
ваш заголовок
ваш текст
- создание абзаца

ALIGN=“left” – выравнивание текста по левой стороне

ALIGN=“right” – выравнивание текста по правой стороне

ALIGN=“center” – выравнивание текста по центру

ALIGN=“justify” - выравнивание текста по ширине

… - не позволяет разрывать текст на строке
- прерывание текста, перенос на следующую строку
.. - жирный
.. - курсив
.. - подчеркивание
.. - перечеркивание

цвет шрифта FACE="Times New Roman“ изменение шрифта SIZE=“1” – размер шрифта от 1 до 7 Мороз и солнце; день чудесный! Еще ты дремлешь, друг прелестный – Пора, красавица, проснись; Открой сомкнуты негой взоры" width="640"
Изменение шрифта и цвета шрифта
FONT COLOR = ‘red’ цвет шрифта
FACE="Times New Roman“ изменение шрифта
SIZE=“1” – размер шрифта от 1 до 7
Мороз и солнце; день
чудесный!

Еще ты дремлешь, друг прелестный –

Пора, красавица, проснись;

Открой сомкнуты негой взоры

Изменение цвета шрифта …
aqua ##00FFFF
black ##000000
blue ##0000FF
fuchsia ##FF00FF
gray ##808080
green ##008000
lime ##00FF00
maroon ##800000
navy ##000080
olive ##808000
purple ##800080
red ##FF0000
silver ##C0C0C0
teal ##008080
white ##FFFFFF
yellow ##FFFF00

Изменение цвета страницы

……………………………………… ..

Тег и атрибут вставки изображений на Web-странице
, где xxx.jpg название файла изображения.
Если картинка находится в папке picture html код будет такой:

Теги и атрибуты гиперссылки на Web-странице
Указатель тег с атрибутом для создания гиперссылки
… контейнер для создания гиперссылки на адрес электронной почты

Теги и атрибуты для создания списков на Web-странице
…
контейнер для создания нумерованных списков
тег элемента списка
…
контейнер для создания маркированного списка
тег элемента списка
… контейнер для создания списка терминов
тег для создания термина
тег для создания определения

Алгоритм вставки таблиц:
1. описание таблицы; 2. описание строки; 3. описание ячейки; 4. ввод текста ячейки.

Создание и форматирование таблиц
Вставка таблицы - парный тэг
По умолчанию текст выравнивается по левому краю, ширина столбца - по наиболее длинному элементу.

Атрибуты к тэгу
BORDER “ “ – толщина границы таблицы в пикселях
WIDTH “ “ – ширина таблицы в пикселях или процентах, относительно окна браузера

Строка таблицы
Вставка строки таблицы - парный тэг
Атрибуты:
Align = (left, center, richt) – горизонтальное выравнивание
Valign = bottom, middle, top) – вертикальное выравнивание

Ячейка таблицы
Вставка ячейки таблицы - парный тэг
Атрибуты:
Align = (left, center, richt) – горизонтальное выравнивание
Valign = (bottom, middle, top) – вертикальное выравнивание
Тема доклада

Ширина и высота таблицы
WIDTH (ширина таблицы) и HEIGHT (высота таблицы) тега .
Форма записи: WIDTH=num или WIDTH=num%, где num — численное значение ширины всей таблицы в пикселах или в процентах от всего размера окна. Заметим, что допустимо задавать значения, большие 100%, хотя трудно представить себе случай, где это необходимо. Пример:
.
ПРИМЕР:

№ пп ФИО Тема доклада

Таблица содержит 1 строку,
3 столбца

Объединение ячеек
Ячейка, захватывающая две строки
Ячейка, захватывающая два столбца