Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Инфоурок / Информатика / Презентации / Презентация к уроку "Язык разметки гипертекста HTML" (9 - 10 класс)
ВНИМАНИЮ ВСЕХ УЧИТЕЛЕЙ: согласно Федеральному закону № 313-ФЗ все педагоги должны пройти обучение навыкам оказания первой помощи.

Дистанционный курс "Оказание первой помощи детям и взрослым" от проекта "Инфоурок" даёт Вам возможность привести свои знания в соответствие с требованиями закона и получить удостоверение о повышении квалификации установленного образца (180 часов). Начало обучения новой группы: 24 мая.

Подать заявку на курс
  • Информатика

Презентация к уроку "Язык разметки гипертекста HTML" (9 - 10 класс)

библиотека
материалов
HTML (Hyper Text Markup Language) язык разметки гипертекста Основы языка гипе...
Структура документа   заголовок web-документа   содержимое web-страницы
Заголовки разных уровней заголовок первого уровня, выровнен по левому краю за...
Оформление горизонтальных линий Атрибут размера SIZE SIZE= число – задает выс...
Форматирование линии  - вертикальная линия высотой 100 пикселей и длиной 2 пи...
Палитра цветов
Фон Web-страницы Цвет фона задается с помощью параметра BGCOLOR ТЕГА   …. ….
Для добавления фонового рисунка на страницу используется параметр BACKGROUND...
Теги форматирования абзацев
Задание шрифта Контейнер (….
Задание размера шрифта Шрифт размера 1 Шрифт размера 2 Шрифт размера 3 Шрифт...
Шрифтовое выделение
Нумерованные списки (теги ……)
Маркированные списки (теги ……
Для добавления таблицы на web-страницу используется контейнер …, при этом таб...
… - контейнер, создающий строку таблицы … - контейнер, создающий ячейку «шапк...
  Таблица из 4 ячеек     Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4
Таблица 3x4     Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4   Ячейка 5 Ячейка 6 Яче...
Выравнивание данных в ячейке
Объединение ячеек таблицы
Для объединения прямоугольного блока n x m ячеек необходимо одновременно запи...
Вставка иллюстраций тег  Пример:
Задание размеров иллюстрации Атрибуты HEIGHT и WIDTH
Задание рамки вокруг рисунка
Альтернативный текст
Совместная верстка рисунка и текста с помощью таблицы    КОМПЬЮТЕР
Гиперссылки (тег …) Абсолютная ссылка Поисковая система Яндекс Относительная...
Формы на Web-страницах Текстовые поля Пожалуйста, введите ваше имя:   E-mail:...
Переключатели Укажите, к какой группе пользователей вы себя относите:  учащий...
Флажки Какие из сервисов Интернета вы используете наиболее часто:   WWW e-mai...
Поля списков  Internet Explorer  Netscape Navigator Opera Neo Planet
Текстовая область Какую еще информацию вы хотели бы видеть на нашем сайте?
Отправка данных из формы
Создание фреймов (теги  и )
25% 15%   Фрейм с заголовком          Заголовок	 меню	Содержимое
Оформление файла zagolovok.html   заголовок   заголовок
Оформление файла menu.html   Меню   меню
Оформление файла sodergimoe.html   Содержимое   Содержимое
Практическое задание 20% 15% 10% 20% Лого-тип	Заголовок	 Меню	 Содержимое	 Но...
Глава 1. Основы сети Интернет В наше время особо важное значение имеет информ...
43 1

Описание презентации по отдельным слайдам:

№ слайда 1 HTML (Hyper Text Markup Language) язык разметки гипертекста Основы языка гипе
Описание слайда:

HTML (Hyper Text Markup Language) язык разметки гипертекста Основы языка гипертекстовой разметки документов

№ слайда 2 Структура документа   заголовок web-документа   содержимое web-страницы
Описание слайда:

Структура документа <HTML> <HEAD> <TITLE>заголовок web-документа</TITLE> </HEAD> <BODY> содержимое web-страницы </BODY> </HTML>

№ слайда 3 Заголовки разных уровней заголовок первого уровня, выровнен по левому краю за
Описание слайда:

Заголовки разных уровней <H1 ALIGN=LEFT>заголовок первого уровня, выровнен по левому краю</H1> <H3 ALIGN=CENTER>заголовок третьего уровня, выровнен по центру</H3> <H5 ALIGN=RIGHT>заголовок пятого уровня, выровнен по правому краю</H5>

№ слайда 4 Оформление горизонтальных линий Атрибут размера SIZE SIZE= число – задает выс
Описание слайда:

Оформление горизонтальных линий Атрибут размера SIZE SIZE= число – задает высоту линии в пикселях (от 1 до 100) WIDTH= число – задает длину линии в пикселях WIDTH= число% - задает длину линии в процентах от ширины окна браузера Атрибут цвета COLOR COLOR= цвет, где в качестве значения после знака равенства пишется английское название цвета или числовой код оттенка <HR ALIGN=LEFT SIZE=5 WIDTH=500 COLOR=red> Горизонтальная линия – тег <HR>

№ слайда 5 Форматирование линии  - вертикальная линия высотой 100 пикселей и длиной 2 пи
Описание слайда:

Форматирование линии <HR SIZE=100 WIDTH=2> - вертикальная линия высотой 100 пикселей и длиной 2 пикселя <HR SIZE=50 WIDTH=50> - квадрат (одно и то же значение для высоты и длины) <HR SIZE=40 WIDTH=120> - прямоугольник

№ слайда 6 Палитра цветов
Описание слайда:

Палитра цветов

№ слайда 7 Фон Web-страницы Цвет фона задается с помощью параметра BGCOLOR ТЕГА   …. ….
Описание слайда:

Фон Web-страницы Цвет фона задается с помощью параметра BGCOLOR ТЕГА <BODY> <HTML> <HEAD>….</HEAD> <BODY BGCOLOR=#DCDCDC>….</BODY> </HTML>

№ слайда 8 Для добавления фонового рисунка на страницу используется параметр BACKGROUND
Описание слайда:

Для добавления фонового рисунка на страницу используется параметр BACKGROUND тега <BODY> <HTML> <HEAD>….</HEAD> <BODY BACKGROUND=«имя файла»>….</BODY> </HTML>

№ слайда 9 Теги форматирования абзацев
Описание слайда:

Теги форматирования абзацев

№ слайда 10 Задание шрифта Контейнер (….
Описание слайда:

Задание шрифта Контейнер (<FONT>….</FONT) <FONT FACE=“Monotype Corsiva”>Текст</FONT> Verdana, Arial, Arial Black, Arial Narrow, Book Antiqua, Bookman Old Style, Century Gothic, Garamond, Courier New, Comic Sans MS, Impact, Times New Roman, Tahoma

№ слайда 11 Задание размера шрифта Шрифт размера 1 Шрифт размера 2 Шрифт размера 3 Шрифт
Описание слайда:

Задание размера шрифта <FONT SIZE=1>Шрифт размера 1</FONT> <FONT SIZE=2>Шрифт размера 2</FONT> <FONT SIZE=3>Шрифт размера 3</FONT> <FONT SIZE=4>Шрифт размера 4</FONT> <FONT SIZE=5>Шрифт размера 5</FONT> <FONT SIZE=6>Шрифт размера 6</FONT> <FONT SIZE=7>Шрифт размера 7</FONT>

№ слайда 12 Шрифтовое выделение
Описание слайда:

Шрифтовое выделение

№ слайда 13 Нумерованные списки (теги ……)
Описание слайда:

Нумерованные списки (теги <OL>…<LI>…</OL>)

№ слайда 14 Маркированные списки (теги ……
Описание слайда:

Маркированные списки (теги <UL>…<LI>…</UL>

№ слайда 15 Для добавления таблицы на web-страницу используется контейнер …, при этом таб
Описание слайда:

Для добавления таблицы на web-страницу используется контейнер <TABLE>…</TABLE>, при этом таблица должна содержать хотя бы одну строку и одну ячейку в ней. Внутрь этого контейнера помещаются другие контейнеры, формирующие основные элементы таблицы: <CAPTION>…</CAPTION> - заголовок таблицы. Размещение заголовка определяется значением параметра ALIGN: ALIGN=TOP – заголовок над таблицей ALIGN=BOTTOM – заголовок под таблицей ALIGN=LEFT – заголовок над таблицей и выровнен влево ALIGN=RIGHT – заголовок над таблицей и выровнен вправо

№ слайда 16 … - контейнер, создающий строку таблицы … - контейнер, создающий ячейку «шапк
Описание слайда:

<TR>…</TR> - контейнер, создающий строку таблицы <TH>…</TH> - контейнер, создающий ячейку «шапки» таблицы (заголовка столбца или строки таблицы). Данный контейнер должен находиться внутри <TR>…</TR> <TD>…</TD> - контейнер, создающий ячейку таблицы. Этот контейнер также должен находиться внутри <TR>…</TR>

№ слайда 17   Таблица из 4 ячеек     Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4
Описание слайда:

<HTML> <HEAD> <TITLE>Таблица из 4 ячеек</TITLE> </HEAD> <BODY> <TABLE BORDER=2> <TR> <TD>Ячейка 1</TD> <TD>Ячейка 2</TD> <TD>Ячейка 3</TD> <TD>Ячейка 4</TD> </TR> </TABLE> </BODY> </HTML>

№ слайда 18 Таблица 3x4     Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4   Ячейка 5 Ячейка 6 Яче
Описание слайда:

<HTML> <HEAD> <TITLE>Таблица 3x4</TITLE> </HEAD> <BODY> <TABLE BORDER=3> <TR> <TD>Ячейка 1</TD> <TD>Ячейка 2</TD> <TD>Ячейка 3</TD> <TD>Ячейка 4</TD> </TR> <TR> <TD>Ячейка 5</TD> <TD>Ячейка 6</TD> <TD>Ячейка 7</TD> <TD>Ячейка 8</TD> </TR> <TR> <TD>Ячейка 9</TD> <TD>Ячейка 10</TD> <TD>Ячейка 11</TD> <TD>Ячейка 12</TD> </TR> </TABLE> </BODY> </HTML>

№ слайда 19 Выравнивание данных в ячейке
Описание слайда:

Выравнивание данных в ячейке

№ слайда 20 Объединение ячеек таблицы
Описание слайда:

Объединение ячеек таблицы

№ слайда 21 Для объединения прямоугольного блока n x m ячеек необходимо одновременно запи
Описание слайда:

Для объединения прямоугольного блока n x m ячеек необходимо одновременно записать оба указанных параметра для тега <TD>, соответствующего верхней левой из объединяемых ячеек: <TD COLSPAN=n ROWSPAN=m>

№ слайда 22
Описание слайда:

<<TABLE BORDER=2> <TR> <TD>Ячейка 1</TD> <TD>Ячейка 2</TD> <TD>Ячейка 3</TD> </TR> <TR> <TD>Ячейка 4</TD> <TD COLSPAN=2>Ячейка 5</TD> </TR> </TABLE>

№ слайда 23 Вставка иллюстраций тег  Пример:
Описание слайда:

Вставка иллюстраций тег <IMG> Пример: <IMG SRC=“имя файла. расширение”>

№ слайда 24 Задание размеров иллюстрации Атрибуты HEIGHT и WIDTH
Описание слайда:

Задание размеров иллюстрации Атрибуты HEIGHT и WIDTH <IMG SRC=“имя файла.расширение” HEIGHT=“137” WIDTH=“180”> <img src="pk.jpg" width="134" height="78">

№ слайда 25 Задание рамки вокруг рисунка
Описание слайда:

Задание рамки вокруг рисунка <IMG SRC=“имя файла. расширение” BORDER=2>

№ слайда 26 Альтернативный текст
Описание слайда:

Альтернативный текст <IMG SRC=“имя файла. расширение” ALT=“текст”> <img border="0" src="pk.jpg" width="134" height="78">

№ слайда 27 Совместная верстка рисунка и текста с помощью таблицы    КОМПЬЮТЕР
Описание слайда:

Совместная верстка рисунка и текста с помощью таблицы <TABLE BORDER=0> <TR> <TD> <H3>КОМПЬЮТЕР</H3> </TD> <TD> <img border="0" src="pk.jpg" width="134" height="78"> </TD> </TR> </TABLE>

№ слайда 28 Гиперссылки (тег …) Абсолютная ссылка Поисковая система Яндекс Относительная
Описание слайда:

Гиперссылки (тег <A>…</A>) Абсолютная ссылка <A HREF=http://www.yandex.com>Поисковая система Яндекс</A> Относительная ссылка <A HREF=“index.html”>главная страница</A> Создание подсказки к ссылке (атрибут TITLE тега <A> <A HREF=“index.html” TITLE=“главная страница”> <IMG SRC=“рисунок.gif”></A>

№ слайда 29 Формы на Web-страницах Текстовые поля Пожалуйста, введите ваше имя:   E-mail:
Описание слайда:

Формы на Web-страницах Текстовые поля <FORM>Пожалуйста, введите ваше имя: <BR> <INPUT TYPE=“text” NAME=“name” SIZE=30><BR> E-mail: <BR> <INPUT TYPE=“text” NAME=“name” SIZE=30><BR> </FORM>

№ слайда 30 Переключатели Укажите, к какой группе пользователей вы себя относите:  учащий
Описание слайда:

Переключатели Укажите, к какой группе пользователей вы себя относите: <BR> <INPUT TYPE=radio NAME=group VALUE=“schoolboy”>учащийся<BR> <INPUT TYPE=radio NAME=group VALUE=“student”>студент<BR> <INPUT TYPE=radio NAME=group VALUE=“teacher”>учитель<BR>

№ слайда 31 Флажки Какие из сервисов Интернета вы используете наиболее часто:   WWW e-mai
Описание слайда:

Флажки Какие из сервисов Интернета вы используете наиболее часто: <BR> <INPUT TYPE=checkbox NAME=group VALUE=“www”> WWW<BR> <INPUT TYPE=checkbox NAME=group VALUE=“e-mail”>e-mail<BR> <INPUT TYPE=checkbox NAME=group VALUE=“ftp”>FTP<BR>

№ слайда 32 Поля списков  Internet Explorer  Netscape Navigator Opera Neo Planet
Описание слайда:

Поля списков <SELECT NAME=“browsers”> <OPTION SELECTED>Internet Explorer <OPTION> Netscape Navigator <OPTION>Opera <OPTION>Neo Planet </SELECT>

№ слайда 33 Текстовая область Какую еще информацию вы хотели бы видеть на нашем сайте?
Описание слайда:

Текстовая область Какую еще информацию вы хотели бы видеть на нашем сайте?<BR> <TEXTAREA NAME=“resume” ROWS=4 COLS=30> </TEXTAREA> <BR>

№ слайда 34 Отправка данных из формы
Описание слайда:

Отправка данных из формы <INPUT TYPE=submit VALUE=“отправить”> <INPUT TYPE=reset VALUE=“очистить”>

№ слайда 35 Создание фреймов (теги  и )
Описание слайда:

Создание фреймов (теги <FRAMESET> и <FRAME>)

№ слайда 36 25% 15%   Фрейм с заголовком          Заголовок	 меню	Содержимое
Описание слайда:

25% 15% <HTML> <HEAD> <TITLE>Фрейм с заголовком</TITLE> </HEAD> <FRAMESET ROWS=“15%,*”> <FRAME SRC=zagolovok.html> <FRAMESET COLS=“25%,*”> <FRAME SRC=menu.html> <FRAME SRC=sodergimoe.html> </FRAMESET> </FRAMESET> </HTML> Заголовок меню Содержимое

№ слайда 37 Оформление файла zagolovok.html   заголовок   заголовок
Описание слайда:

Оформление файла zagolovok.html <HTML> <HEAD> <TITLE>заголовок</TITLE> </HEAD> <BODY> <H1 ALIGN=CENTER>заголовок</H1> </BODY> </HTML>

№ слайда 38 Оформление файла menu.html   Меню   меню
Описание слайда:

Оформление файла menu.html <HTML> <HEAD> <TITLE>Меню</TITLE> </HEAD> <BODY> <H2 ALIGN=CENTER>меню</H2> </BODY> </HTML>

№ слайда 39 Оформление файла sodergimoe.html   Содержимое   Содержимое
Описание слайда:

Оформление файла sodergimoe.html <HTML> <HEAD> <TITLE>Содержимое</TITLE> </HEAD> <BODY> <H2 ALIGN=CENTER>Содержимое</H2> </BODY> </HTML>

№ слайда 40
Описание слайда:

№ слайда 41
Описание слайда:

№ слайда 42 Практическое задание 20% 15% 10% 20% Лого-тип	Заголовок	 Меню	 Содержимое	 Но
Описание слайда:

Практическое задание 20% 15% 10% 20% Лого-тип Заголовок Меню Содержимое Новости, поиск Адрес фирмы

№ слайда 43 Глава 1. Основы сети Интернет В наше время особо важное значение имеет информ
Описание слайда:

Глава 1. Основы сети Интернет В наше время особо важное значение имеет информация. Наиболее удобным способом получения и передачи информации является использование всемирной компьютерной сети Интернет. Компьютерная сеть – это объединение компьютеров, линий связи между ними и программ, обеспечивающих обмен информацией. Виды компьютерных сетей: Локальная сеть – это компьютерная сеть, объединяющая компьютеры, расположенные в одном здании или в соседних зданиях. Распределенная (территориальная) сеть – это компьютерная сеть, объединяющие компьютеры, которые находятся в разных частях города, а иногда и в разных городах. Корпоративная сеть – это когда к распределенной сети подключается не отдельные компьютеры, а локальные сети. Создание корпоративных сетей нашло применение для предприятий, имеющих филиалы в других городах. Глобальная сеть – это распределенная сеть мирового масштаба. Интернет и является самой известной глобальной компьютерной сетью.

Автор
Дата добавления 30.03.2016
Раздел Информатика
Подраздел Презентации
Просмотров599
Номер материала ДВ-567778
Получить свидетельство о публикации

Выберите специальность, которую Вы хотите получить:

Обучение проходит дистанционно на сайте проекта "Инфоурок".
По итогам обучения слушателям выдаются печатные дипломы установленного образца.

ПЕРЕЙТИ В КАТАЛОГ КУРСОВ

Похожие материалы

Включите уведомления прямо сейчас и мы сразу сообщим Вам о важных новостях. Не волнуйтесь, мы будем отправлять только самое главное.
Специальное предложение
Вверх