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

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

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

Видеоурок по Web программированию на тему "Основы HTML"

библиотека
материалов
Тема1.1. Понятие о гипертекстовом документе HTML - это гипертекстовый язык ра...
язык HTML состоит из тегов HTML. Каждый тег HTML выполняет свою задачу: встав...
HTML теги — каркас большинства документов в интернет, который структурирует и...
Атрибуты HTML — свойства конкретного тега, влияющие на его отображение и/или...
Спецсимволы HTML — специальные буквенные или числовые конструкции, которые бр...
Метатеги - это необязательные теги для HTML, которые не предназначены для пос...
Мета теги — теги, содержащие служебную информацию для браузеров, поисковых ро...
содержащие управляющие команды для роботов поисковых систем; содержащие управ...
Параметры content - Устанавливает значение параметра, заданного с помощью...
  Тег META       …   Пример 
Сообщает, с помощью какой программы был сгенерирован код страницы. Этот тег...
является самым важным метатегом (не влияет на индексацию страницы). Метатег d...
Указывает автора страницы.  Указывает владельца авторских прав.  Указывает с...
Описание content устанавливает значение параметра, заданного с помощью name и...
Описание Браузеры преобразовывают значение параметра http-equiv, заданное с п...
- Определяет данные как документ HTML  - Определяет заголовок документа  - в...
Alink= - задает цвет активной ссылки (в момент нажатия).  Background = - зада...
Элемент позволяет скрыть от пользователя комментарии к исходному коду, а такж...
Соответствующие каждому уровню гарнитура и размер шрифта зависят от браузера,...
Элемент  используется для проведения горизонтальной черты в документе. Атрибу...
Этот элемент задает один из способов разбиения текста на абзацы. Он может име...
Этот элемент задает разрыв текста с переходом на новую строку. Он может иметь...
Элемент  Этот элемент задает разрыв текста в данном месте при необходимости с...
Элемент  Элемент  позволяет выделить в структуре документа несколько разделов...
Для форматирования шрифта используется тег Font, который имеет ряд атрибутов,...
25 1

"Инфоурок" приглашает всех педагогов и детей к участию в самой массовой интернет-олимпиаде «Весна 2017» с рекордно низкой оплатой за одного ученика - всего 45 рублей

В олимпиадах "Инфоурок" лучшие условия для учителей и учеников:

1. невероятно низкий размер орг.взноса — всего 58 рублей, из которых 13 рублей остаётся учителю на компенсацию расходов;
2. подходящие по сложности для большинства учеников задания;
3. призовой фонд 1.000.000 рублей для самых активных учителей;
4. официальные наградные документы для учителей бесплатно(от организатора - ООО "Инфоурок" - имеющего образовательную лицензию и свидетельство СМИ) - при участии от 10 учеников
5. бесплатный доступ ко всем видеоурокам проекта "Инфоурок";
6. легко подать заявку, не нужно отправлять ответы в бумажном виде;
7. родителям всех учеников - благодарственные письма от «Инфоурок».
и многое другое...

Подайте заявку сейчас - https://infourok.ru/konkurs

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

№ слайда 1 Тема1.1. Понятие о гипертекстовом документе HTML - это гипертекстовый язык ра
Описание слайда:

Тема1.1. Понятие о гипертекстовом документе HTML - это гипертекстовый язык разметки, на котором создаётся абсолютное большинство страниц в Интернете. 

№ слайда 2 язык HTML состоит из тегов HTML. Каждый тег HTML выполняет свою задачу: встав
Описание слайда:

язык HTML состоит из тегов HTML. Каждый тег HTML выполняет свою задачу: вставляют ссылку, картинку, создают таблицы для выравнивания других тегов, позволяют делать отдельные блоки на странице Язык HTML, несмотря на свою простоту, является необычайно важным для изучения 

№ слайда 3 HTML теги — каркас большинства документов в интернет, который структурирует и
Описание слайда:

HTML теги — каркас большинства документов в интернет, который структурирует и форматирует содержимое веб документов. Каждый тег имеет свое предназначение. Это может быть обозначение начала и конца HTML документа, отображение абзаца или заголовка, показ изображений, таблиц или видео, форматирование текста. Браузеры преобразовывают последовательность тегов в удобночитаемый человеком документ. HTML теги 

№ слайда 4 Атрибуты HTML — свойства конкретного тега, влияющие на его отображение и/или
Описание слайда:

Атрибуты HTML — свойства конкретного тега, влияющие на его отображение и/или поведение на веб странице. Многие из атрибутов заменяемы CSS правилами. События в HTML — действия пользователя в рамках веб страницы, на которые может отреагировать Javascript. Например, клик мышью, нажатие клавиши на клавиатуре, обновление окна. 

№ слайда 5 Спецсимволы HTML — специальные буквенные или числовые конструкции, которые бр
Описание слайда:

Спецсимволы HTML — специальные буквенные или числовые конструкции, которые браузер преобразовывает в символ, букву или знак. Например   - пробел Спецсимволы HTML 

№ слайда 6 Метатеги - это необязательные теги для HTML, которые не предназначены для пос
Описание слайда:

Метатеги - это необязательные теги для HTML, которые не предназначены для посетителей сайта. Они содержат служебную информацию о Web-странице и ее описание для браузеров и поисковых машин в структурированном виде. Размещаются метатеги внутри тега <HEAD</HEAD>(заголовка страницы). Для тега meta допустимы четыре атрибута: content, http-equiv, name и scheme. Из них только обязателен лишь атрибут content. Метатеги 

№ слайда 7 Мета теги — теги, содержащие служебную информацию для браузеров, поисковых ро
Описание слайда:

Мета теги — теги, содержащие служебную информацию для браузеров, поисковых роботов и некоторых пользователей, которые просматривают код. Располагаются внутри тега head и не отображаются на странице. Делятся на две группы: <meta http-equiv="[имя тега]" content="[значение]" /> — информация для браузеров, которая может влиять на отображение страницы; <meta name="[имя тега]" content="[значение]" /> — информация для поисковых систем и об авторе сайта. 

№ слайда 8 содержащие управляющие команды для роботов поисковых систем; содержащие управ
Описание слайда:

содержащие управляющие команды для роботов поисковых систем; содержащие управляющие команды для браузера; содержащие информацию о странице и ее авторе. По функциям метатеги можно разделить на три группы: 

№ слайда 9 Параметры content - Устанавливает значение параметра, заданного с помощью
Описание слайда:

<head> <meta content="..."> </head> Параметры content - Устанавливает значение параметра, заданного с помощью name или http-equiv. http-equiv - Предназначен для конвертирования метатега в заголовок HTTP. name - Имя метатега, также косвенно устанавливает его предназначение. Синтаксис <META> 

№ слайда 10   Тег META       …   Пример 
Описание слайда:

<html> <head> <title>Тег META</title> <meta http-equiv="Content-Language" content="ru"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> </head> <body> … </body> </html> Пример 

№ слайда 11 Сообщает, с помощью какой программы был сгенерирован код страницы. Этот тег
Описание слайда:

<meta name="Generator" content="Название генератора"> Сообщает, с помощью какой программы был сгенерирован код страницы. Этот тег автоматически вставляют в код страницы почти все генераторы HTML и визуальные HTML-редакторы (Word, FrontPage, DreamWeaver). Смысловой нагрузки практически не несет. <meta name="site-created" content="10.01.2010"> Указывает дату создания сайта. 

№ слайда 12 является самым важным метатегом (не влияет на индексацию страницы). Метатег d
Описание слайда:

является самым важным метатегом (не влияет на индексацию страницы). Метатег description поисковики используют в сниппетах, то есть показывают его содержимое в результатах поиска в качестве описания страницы. От того, насколько это описание соответствует тому, что ищет пользователь, во многом зависит, перейдет ли он на ваш сайт или на соседний в результатах поиска. Если то, что вы засунули в мете description, не соответствует заголовку страницы и не релевантно (не адекватно) поисковому запросу, в отличие от заголовка, то поисковая машина может выбрать для сниппета другой текст со страницы. Не нужно давать в этом теге слишком длинное и подробное описание страницы. Рекомендуется ограничиться текстом до 100 символов, так как поисковые машины, в большинстве случаев, имеют ограничение на количество индексируемых символов этого метатега. <meta name="description" content="описание страницы«> 

№ слайда 13 Указывает автора страницы.  Указывает владельца авторских прав.  Указывает с
Описание слайда:

<meta name="Author" content="автор"> Указывает автора страницы. <meta name="Copyright" content="авторские права"> Указывает владельца авторских прав. <meta name="Reply-to" content="vasya_pupkin@mail.ru"> Указывает способ связи с автором страницы. <meta name="Owner" content="Владелец"> Указывает собственника страницы. 

№ слайда 14 Описание content устанавливает значение параметра, заданного с помощью name и
Описание слайда:

Описание content устанавливает значение параметра, заданного с помощью name или http-equiv. Параметр content может содержать более одного аргумента, в этом случае аргументы разделяются запятыми или точкой с запятой. Параметр CONTENT 

№ слайда 15 Описание Браузеры преобразовывают значение параметра http-equiv, заданное с п
Описание слайда:

Описание Браузеры преобразовывают значение параметра http-equiv, заданное с помощью content, в формат заголовка ответа HTTP и обрабатывают их, как будто они прибыли непосредственно от сервера. Синтаксис <meta http-equiv="..."> Например Content-Type - Тип кодировки документа. expires - Устанавливает дату и время, после которой информация в документе будет считаться устаревшей. refresh - Загрузить другой документ в текущее окно браузера. Параметр HTTP-EQUIV 

№ слайда 16 - Определяет данные как документ HTML  - Определяет заголовок документа  - в
Описание слайда:

<html></html> - Определяет данные как документ HTML <head ></head > - Определяет заголовок документа <title></title> - в тег head обычно вложен тег title, который служит для обозначения наименования страницы <body></body> - Определяет все содержимое страницы, кроме заголовка <!-- комментарий --> - этот тег служит для комментариев в тексте кода, полезен для того, чтобы легче найти тот или иной раздел Обязательные теги HTML- документа 

№ слайда 17 Alink= - задает цвет активной ссылки (в момент нажатия).  Background = - зада
Описание слайда:

Alink= - задает цвет активной ссылки (в момент нажатия).  Background = - задает URL фонового рисунка. Bgcolor= - задает цвет фона страницы Link= - задает цвет ссылок.  Text= - задает цвет текста. Значение по умолчанию #000000.  Vlink= - задает цвет посещенных ссылок Атрибуты тега <BODY> 

№ слайда 18 Элемент позволяет скрыть от пользователя комментарии к исходному коду, а такж
Описание слайда:

Элемент позволяет скрыть от пользователя комментарии к исходному коду, а также сокрытие сценариев Java Script от браузеров, которые не поддерживают их.  Синтаксис: <COMMENT> Текст комментария </COMMENT>  Полностью аналогичен старому варианту задания комментариев  Синтаксис: <!- - Текст комментария //- -> Комментарии <COMMENT > 

№ слайда 19 Соответствующие каждому уровню гарнитура и размер шрифта зависят от браузера,
Описание слайда:

Соответствующие каждому уровню гарнитура и размер шрифта зависят от браузера, стилю <H1> назначается самый большой и самый жирный шрифт, а стилю <H6>назначается самый маленький и самый невзрачный шрифт. Элемент может иметь атрибут align, который указывает отступ left, center или right.  Синтаксис:  <Hn align=отступ> Текст заголовка </Hn> Шесть уровней заголовков <Hn> 

№ слайда 20 Элемент  используется для проведения горизонтальной черты в документе. Атрибу
Описание слайда:

Элемент <HR> используется для проведения горизонтальной черты в документе. Атрибуты  color - задает цвет линии,  height -  высота в пикселах width - ширина в пикселях или процентах от ширины экрана,  align-  режим выравнивания, и не имеет конечного тега.  Синтаксис:  <HR align="center" height=n width=n color="цвет"> Разделительные линии <HR> 

№ слайда 21 Этот элемент задает один из способов разбиения текста на абзацы. Он может име
Описание слайда:

Этот элемент задает один из способов разбиения текста на абзацы. Он может иметь вложенный атрибут  align, который указывает выравнивание данного абзаца left,center, justify или right. Примечание. Каждый следующий абзац игнорирует заданное для предыдущего абзаца значение align.  Синтаксис:  <P align=отступ> Текст абзаца </P> Элемент <P> 

№ слайда 22 Этот элемент задает разрыв текста с переходом на новую строку. Он может иметь
Описание слайда:

Этот элемент задает разрыв текста с переходом на новую строку. Он может иметь вложенный атрибут clear, который может принимать значения left, all или right тем самым указывать обтекание текста вокруг плавающих изображений вставленных в текст нестандартным способом. Каждый следующий абзац игнорирует, заданное для предыдущего абзаца значение clear.  Синтаксис: <BR clear=обтекание>  Текст может быть отменен тэгами <NOBR> и </NOBR> Элемент <BR> 

№ слайда 23 Элемент  Этот элемент задает разрыв текста в данном месте при необходимости с
Описание слайда:

Элемент <WBR> Этот элемент задает разрыв текста в данном месте при необходимости с переходом на новую строку.  Синтаксис: <WBR >Текст Элемент <PRE> Весь текст, заключенный в тэги <PRE> и </PRE> будет визуализирован браузером точно так, как он визуализирован в исходном коде документа. Кроме того, текст выводится моноширинным шрифтом, что значительно упрощает задачу форматирования текста в колонки. Атрибут поддерживается не всеми браузерами, он может иметь атрибут width, который задает ширину отводимого пространства под текст в символах. Синтаксис:  <PRE width=число символов >...текст.. .</PRE> 

№ слайда 24 Элемент  Элемент  позволяет выделить в структуре документа несколько разделов
Описание слайда:

Элемент <DIV> Элемент <DIV> позволяет выделить в структуре документа несколько разделов. Он является блочным элементом, функционирующим во многом подобно элементу <P>. Если закрывающий тэг </P> опущен, то <DIV> эффективно заменяет его и начинает новый абзац. Он может иметь атрибут align, который указывает отступ left, center илиright. Каждый следующий раздел игнорирует, заданное для предыдущего раздела, значение align.  Синтаксис: <DIV align=отступ> Текст раздела </DIV> Элемент <CENTER> Элемент <CENTER> текст </CENTER> полностью идентичен конструкции  Синтаксис: <DIV align=center> Текст раздела </DIV> 

№ слайда 25 Для форматирования шрифта используется тег Font, который имеет ряд атрибутов,
Описание слайда:

Для форматирования шрифта используется тег Font, который имеет ряд атрибутов, которые позволяют придать тексту определенный шрифт, размер и цвет: Face - Позволяет изменить шрифт Color - Позволяет выбрать цвет Size - Задает размер букв Форматирование шрифта 

Краткое описание документа:

HTML теги — каркас большинства документов в интернет, который структурирует и форматирует содержимое веб документов. Каждый тег имеет свое предназначение. Это может быть обозначение начала и конца HTML документа, отображение абзаца или заголовка, показ изображений, таблиц или видео, форматирование текста. Браузеры преобразовывают последовательность тегов в удобночитаемый человеком документ.

Атрибуты HTML — свойства конкретного тега, влияющие на его отображение и/или поведение на веб странице. Многие из атрибутов заменяемы CSS правилами.

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

 

 

Автор
Дата добавления 03.02.2015
Раздел Информатика
Подраздел Презентации
Просмотров259
Номер материала 360486
Получить свидетельство о публикации

"Инфоурок" приглашает всех педагогов и детей к участию в самой массовой интернет-олимпиаде «Весна 2017» с рекордно низкой оплатой за одного ученика - всего 45 рублей

В олимпиадах "Инфоурок" лучшие условия для учителей и учеников:

1. невероятно низкий размер орг.взноса — всего 58 рублей, из которых 13 рублей остаётся учителю на компенсацию расходов;
2. подходящие по сложности для большинства учеников задания;
3. призовой фонд 1.000.000 рублей для самых активных учителей;
4. официальные наградные документы для учителей бесплатно(от организатора - ООО "Инфоурок" - имеющего образовательную лицензию и свидетельство СМИ) - при участии от 10 учеников
5. бесплатный доступ ко всем видеоурокам проекта "Инфоурок";
6. легко подать заявку, не нужно отправлять ответы в бумажном виде;
7. родителям всех учеников - благодарственные письма от «Инфоурок».
и многое другое...

Подайте заявку сейчас - https://infourok.ru/konkurs


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

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

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


Идёт приём заявок на международный конкурс по математике "Весенний марафон" для учеников 1-11 классов и дошкольников

Уникальность конкурса в преимуществах для учителей и учеников:

1. Задания подходят для учеников с любым уровнем знаний;
2. Бесплатные наградные документы для учителей;
3. Невероятно низкий орг.взнос - всего 38 рублей;
4. Публикация рейтинга классов по итогам конкурса;
и многое другое...

Подайте заявку сейчас - https://urokimatematiki.ru

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

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