🗊Основы языка разметки гипертекста HTML

Категория: Информатика
Нажмите для полного просмотра!
Основы языка разметки гипертекста HTML, слайд №1Основы языка разметки гипертекста HTML, слайд №2Основы языка разметки гипертекста HTML, слайд №3Основы языка разметки гипертекста HTML, слайд №4Основы языка разметки гипертекста HTML, слайд №5Основы языка разметки гипертекста HTML, слайд №6Основы языка разметки гипертекста HTML, слайд №7Основы языка разметки гипертекста HTML, слайд №8Основы языка разметки гипертекста HTML, слайд №9Основы языка разметки гипертекста HTML, слайд №10Основы языка разметки гипертекста HTML, слайд №11Основы языка разметки гипертекста HTML, слайд №12Основы языка разметки гипертекста HTML, слайд №13Основы языка разметки гипертекста HTML, слайд №14Основы языка разметки гипертекста HTML, слайд №15Основы языка разметки гипертекста HTML, слайд №16Основы языка разметки гипертекста HTML, слайд №17Основы языка разметки гипертекста HTML, слайд №18

Вы можете ознакомиться и скачать Основы языка разметки гипертекста HTML. Презентация содержит 18 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации


Слайд 1






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

Слайд 2






   Hyper Text Markup Language (HTML) – язык гипертекстовой разметки документов.
Web-страницы можно создать с помощью языка HTML
 В обычный документ вставляются управляющие символы - HTML-теги,  которые определяют вид Web-страницы при её просмотре в браузере.
Описание слайда:
Hyper Text Markup Language (HTML) – язык гипертекстовой разметки документов. Web-страницы можно создать с помощью языка HTML В обычный документ вставляются управляющие символы - HTML-теги, которые определяют вид Web-страницы при её просмотре в браузере.

Слайд 3






        Теги заключаются в угловые скобки <> и могут быть одиночными или парными. 
        Парные теги содержат открывающий и закрывающий теги (контейнер).
Например, код Web-страницы помещается внутрь контейнера 
<HTML>… </HTML>
 Теги могут записываться как прописными, так и строчными буквами.
Описание слайда:
Теги заключаются в угловые скобки <> и могут быть одиночными или парными. Парные теги содержат открывающий и закрывающий теги (контейнер). Например, код Web-страницы помещается внутрь контейнера <HTML>… </HTML> Теги могут записываться как прописными, так и строчными буквами.

Слайд 4






         Некоторые теги имеют атрибуты, которые являются именами свойств и могут принимать определённые значения и влияют на внешний вид Web-страницы.
Например,
     <FONT COLOR=“blue”>
    <H1  ALIGN=“center”> Моё имя – Марина </H1>
     </FONT>
Описание слайда:
Некоторые теги имеют атрибуты, которые являются именами свойств и могут принимать определённые значения и влияют на внешний вид Web-страницы. Например, <FONT COLOR=“blue”> <H1 ALIGN=“center”> Моё имя – Марина </H1> </FONT>

Слайд 5






<HTML>
<HEAD>
<TITLE> 
Название Web-страницы 
</TITLE>
</HEAD>
<BODY атрибуты>
На этой странице можно                               разместить любую интересную          информацию в Интернете.
</BODY>
</HTML>
Описание слайда:
<HTML> <HEAD> <TITLE> Название Web-страницы </TITLE> </HEAD> <BODY атрибуты> На этой странице можно разместить любую интересную информацию в Интернете. </BODY> </HTML>

Слайд 6






Создать личную папку.
Создать в блокноте шаблон HTML-документа, набрав HTML-код страницы.
Сохранить  файл под именем Шаблон.txt  в личной папке.
Открыть файл Шаблон.txt  и внести необходимую информацию, используя теги и их атрибуты.
Сохранить файл под именем index.htm в личной папке.
Описание слайда:
Создать личную папку. Создать в блокноте шаблон HTML-документа, набрав HTML-код страницы. Сохранить файл под именем Шаблон.txt в личной папке. Открыть файл Шаблон.txt и внести необходимую информацию, используя теги и их атрибуты. Сохранить файл под именем index.htm в личной папке.

Слайд 7






Для редактирования файла index.htm необходимо выполнить следующие действия:
Описание слайда:
Для редактирования файла index.htm необходимо выполнить следующие действия:

Слайд 8





Атрибуты  фона Web-страницы
Атрибут цвета Web-страницы
<BODY bgcolor=#FFF8DC>
Атрибут вставки фонового рисунка Web-страницы
<BODY background="Nature_02.jpg”>
Описание слайда:
Атрибуты фона Web-страницы Атрибут цвета Web-страницы <BODY bgcolor=#FFF8DC> Атрибут вставки фонового рисунка Web-страницы <BODY background="Nature_02.jpg”>

Слайд 9





Теги и атрибуты форматирования текста на Web-странице
<H1>…</H1> до <H6>…</Y6>  тег размера шрифта заголовков
<FONT>…</FONT>    тег форматирования шрифта
     FACE=“Arial”    атрибут задания гарнитуры шрифта
     SIZE=4     атрибут задания размера шрифта
     COLOR=“Red”    атрибут задания цвета шрифта
     ALIGN=“left” атрибут задания выравнивания текста
<HR> тег для создания горизонтальной линии
<P>…</P> контейнер для разделения текста на абзацы
Описание слайда:
Теги и атрибуты форматирования текста на Web-странице <H1>…</H1> до <H6>…</Y6> тег размера шрифта заголовков <FONT>…</FONT> тег форматирования шрифта FACE=“Arial” атрибут задания гарнитуры шрифта SIZE=4 атрибут задания размера шрифта COLOR=“Red” атрибут задания цвета шрифта ALIGN=“left” атрибут задания выравнивания текста <HR> тег для создания горизонтальной линии <P>…</P> контейнер для разделения текста на абзацы

Слайд 10





Тег и атрибут вставки изображений на Web-странице
<IMG  SRC=“computer.gif”>
<IMG SRC=“C:\COMPUTER\computer.gif”>
<IMG  SRC=“http://www.server.ru/computer.gif”>
Описание слайда:
Тег и атрибут вставки изображений на Web-странице <IMG SRC=“computer.gif”> <IMG SRC=“C:\COMPUTER\computer.gif”> <IMG SRC=“http://www.server.ru/computer.gif”>

Слайд 11





Теги и атрибуты гиперссылки 
 на Web-странице
<A  HREF=“Адрес”>Указатель</A>  тег с атрибутом для создания гиперссылки
<ADDRESS>…</ADDRESS> контейнер для создания гиперссылки на адрес электронной почты
Описание слайда:
Теги и атрибуты гиперссылки на Web-странице <A HREF=“Адрес”>Указатель</A> тег с атрибутом для создания гиперссылки <ADDRESS>…</ADDRESS> контейнер для создания гиперссылки на адрес электронной почты

Слайд 12





Гиперссылки
Для связывания Web- страниц используют гиперссылки. 
Термин «гипертекст» был введён в обращение Тедом Нельсоном в 1965 году для описания документов, которые выражают нелинейную структуру идей.
Гипертекст - это способ организации текстовой информации, внутри которой установлены смысловые связи между её различными фрагментами. Такие связи называют гиперсвязями, а место в тексте, обеспечивающее гиперсвязь, гиперссылкой.
Описание слайда:
Гиперссылки Для связывания Web- страниц используют гиперссылки. Термин «гипертекст» был введён в обращение Тедом Нельсоном в 1965 году для описания документов, которые выражают нелинейную структуру идей. Гипертекст - это способ организации текстовой информации, внутри которой установлены смысловые связи между её различными фрагментами. Такие связи называют гиперсвязями, а место в тексте, обеспечивающее гиперсвязь, гиперссылкой.

Слайд 13





Теги и атрибуты для создания списков на Web-странице
<OL>…</OL>  контейнер для создания нумерованных списков
      <LI>  тег элемента списка
<UL>…</UL>  контейнер для создания маркированного списка
      <LI>  тег элемента списка
<DL>…</Dl> контейнер для создания списка терминов
             <DT> тег для создания термина
             <DD> тег для создания определения
Описание слайда:
Теги и атрибуты для создания списков на Web-странице <OL>…</OL> контейнер для создания нумерованных списков <LI> тег элемента списка <UL>…</UL> контейнер для создания маркированного списка <LI> тег элемента списка <DL>…</Dl> контейнер для создания списка терминов <DT> тег для создания термина <DD> тег для создания определения

Слайд 14





Теги и атрибуты для создания интерактивных форм 
на Web-странице
<FORM>…</FORM> контейнер для создания формы
Тег <INPUT> со значением атрибута TYPE=“text” создают текстовое поле
Тег <INPUT> со значением атрибута TYPE=“radio” создают группу переключателей
Тег <INPUT> со значением атрибута  TYPE=“checkbox” создают флажки
<SELECT> …</SELECT> контейнер для реализации раскрывающего списка
         <OPTION> тег элемента списка
Описание слайда:
Теги и атрибуты для создания интерактивных форм на Web-странице <FORM>…</FORM> контейнер для создания формы Тег <INPUT> со значением атрибута TYPE=“text” создают текстовое поле Тег <INPUT> со значением атрибута TYPE=“radio” создают группу переключателей Тег <INPUT> со значением атрибута TYPE=“checkbox” создают флажки <SELECT> …</SELECT> контейнер для реализации раскрывающего списка <OPTION> тег элемента списка

Слайд 15


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

Слайд 16





Проверь свои знания
Описание слайда:
Проверь свои знания

Слайд 17






1) Учебник  10 класса Н. Д. Угринович (базовый уровень), П. 2.13, стр. 201-205. 
2) Творческое задание (по желанию) - создать минисайт с помощью HTML -языка на свободную тему.
Описание слайда:
1) Учебник 10 класса Н. Д. Угринович (базовый уровень), П. 2.13, стр. 201-205. 2) Творческое задание (по желанию) - создать минисайт с помощью HTML -языка на свободную тему.

Слайд 18





Использованные источники
1. Дробахина, АН. и др. Структурирование содержания профессиональной подготовки учителя информатики средствами современного гипертекста / А.Н. Дробахина, М.С. Можаров. - Новокузнецк, 2003.
2. Угринович, Н. Д. Информатика и ИКТ. Базовый уровень. Учебник 10 класса/Н. Д. Угинович. – М.: БИНОМ. Лаборатория знаний, 2008
Описание слайда:
Использованные источники 1. Дробахина, АН. и др. Структурирование содержания профессиональной подготовки учителя информатики средствами современного гипертекста / А.Н. Дробахина, М.С. Можаров. - Новокузнецк, 2003. 2. Угринович, Н. Д. Информатика и ИКТ. Базовый уровень. Учебник 10 класса/Н. Д. Угинович. – М.: БИНОМ. Лаборатория знаний, 2008



Похожие презентации
Mypresentation.ru
Загрузить презентацию