922994
столько раз учителя, ученики и родители
посетили сайт «Инфоурок»
за прошедшие 24 часа
+Добавить материал
и получить бесплатное
свидетельство о публикации
в СМИ №ФС77-60625 от 20.01.2015
Дистанционные курсы профессиональной переподготовки и повышения квалификации для педагогов

Дистанционные курсы для педагогов - курсы профессиональной переподготовки от 5 480 руб.;
- курсы повышения квалификации от 1 400 руб.
Московские документы для аттестации

ВЫБРАТЬ КУРС СО СКИДКОЙ 60%

ВНИМАНИЕ: Скидка действует ТОЛЬКО до 28 февраля!

(Лицензия на осуществление образовательной деятельности №038767 выдана ООО "Столичный учебный центр", г.Москва)

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

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


Напоминаем, что в соответствии с профстандартом педагога (утверждён Приказом Минтруда России), если у Вас нет соответствующего преподаваемому предмету образования, то Вам необходимо пройти профессиональную переподготовку по профилю педагогической деятельности. Сделать это Вы можете дистанционно на сайте проекта "Инфоурок" и получить диплом с присвоением квалификации уже через 2 месяца!

Только сейчас действует СКИДКА 50% для всех педагогов на все 184 курса профессиональной переподготовки! Доступна рассрочка с первым взносом всего 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. Основы сети Интернет В наше время особо важное значение имеет информ...

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

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

Общая информация

Номер материала: ДВ-567778



Очень низкие цены на курсы переподготовки от Московского учебного центра для педагогов

Специально для учителей, воспитателей и других работников системы образования действуют 60% скидки (только до конца зимы) при обучении на курсах профессиональной переподготовки (124 курса на выбор).

После окончания обучения выдаётся диплом о профессиональной переподготовке установленного образца с присвоением квалификации (признаётся при прохождении аттестации по всей России).

Подайте заявку на интересующий Вас курс сейчас: KURSY.ORG

Вам будут интересны эти курсы:

Курс повышения квалификации «Современные информационные технологии и их использование в работе преподавателей. Системы автоматизированного проектирования одежды и организация технологического процесса»
Курс повышения квалификации «Организация работы по формированию медиаграмотности и повышению уровня информационных компетенций всех участников образовательного процесса»
Курс профессиональной переподготовки «Информатика: теория и методика преподавания в образовательной организации»
Курс повышения квалификации «Облачные технологии в образовании»
Курс «1С: Предприятие 7.7»
Курс «3D Studio MAX»
Курс повышения квалификации «Развитие информационно-коммуникационных компетенций учителя в процессе внедрения ФГОС: работа в Московской электронной школе»
Курс профессиональной переподготовки «Информационные технологии в профессиональной деятельности: теория и методика преподавания в образовательной организации»
Курс повышения квалификации «Использование компьютерных технологий в процессе обучения в условиях реализации ФГОС»
Курс повышения квалификации «Специфика преподавания информатики в начальных классах с учетом ФГОС НОО»
Курс повышения квалификации «Введение в программирование на языке С (СИ)»
Курс профессиональной переподготовки «Математика и информатика: теория и методика преподавания в образовательной организации»
Курс повышения квалификации «Современные тенденции цифровизации образования»
Курс повышения квалификации «Специфика преподавания дисциплины «Информационные технологии» в условиях реализации ФГОС СПО по ТОП-50»
Курс повышения квалификации «Современные языки программирования интегрированной оболочки Microsoft Visual Studio C# NET., C++. NET, VB.NET. с использованием структурного и объектно-ориентированного методов разработки корпоративных систем»

Благодарность за вклад в развитие крупнейшей онлайн-библиотеки методических разработок для учителей

Опубликуйте минимум 3 материала, чтобы БЕСПЛАТНО получить и скачать данную благодарность

Сертификат о создании сайта

Добавьте минимум пять материалов, чтобы получить сертификат о создании сайта

Грамота за использование ИКТ в работе педагога

Опубликуйте минимум 10 материалов, чтобы БЕСПЛАТНО получить и скачать данную грамоту

Свидетельство о представлении обобщённого педагогического опыта на Всероссийском уровне

Опубликуйте минимум 15 материалов, чтобы БЕСПЛАТНО получить и скачать данное cвидетельство

Грамота за высокий профессионализм, проявленный в процессе создания и развития собственного учительского сайта в рамках проекта "Инфоурок"

Опубликуйте минимум 20 материалов, чтобы БЕСПЛАТНО получить и скачать данную грамоту

Грамота за активное участие в работе над повышением качества образования совместно с проектом "Инфоурок"

Опубликуйте минимум 25 материалов, чтобы БЕСПЛАТНО получить и скачать данную грамоту

Почётная грамота за научно-просветительскую и образовательную деятельность в рамках проекта "Инфоурок"

Опубликуйте минимум 40 материалов, чтобы БЕСПЛАТНО получить и скачать данную почётную грамоту

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