Инфоурок Другое ПрезентацииПрезентация на тему Основы HTML

Презентация на тему Основы HTML

Скачать материал
Скачать материал "Презентация на тему Основы HTML"

Получите профессию

Бухгалтер

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Методические разработки к Вашему уроку:

Получите новую специальность за 2 месяца

Теолог

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

  • Основы  HTMLУчитель информатики и ИКТ
МКОУ «Глядянская СОШ»
Притобольного рай...

    1 слайд

    Основы HTML
    Учитель информатики и ИКТ
    МКОУ «Глядянская СОШ»
    Притобольного района
    Кузнецова Оксана Николаевна

  • HTML  (Hyper Text Markup Language)язык разметки гипертекста Web-страницы

    2 слайд

    HTML
    (Hyper Text Markup Language)
    язык разметки гипертекста Web-страницы

  • Программы для создания HTML – файлов:Редакторы (HTML Wirtel, HTML Assistant,...

    3 слайд

    Программы для создания HTML – файлов:
    Редакторы (HTML Wirtel, HTML Assistant, WebEdit, HomeSite, Блокнот и т.д.)

    Шаблоны

    Программы-преобразователи

  • Программы для просмотра Web - страницMicrosoft Internet Explorer
Netscape Com...

    4 слайд

    Программы для просмотра Web - страниц
    Microsoft Internet Explorer
    Netscape Communicator
    The Bat!
    Opera и т.д.

  • Блокнот
 (для создания страницы)
                              Int...

    5 слайд

    Блокнот
    (для создания страницы)
    Internet Explorer
    (для интерпретации файлов)
    Программы для создания HTML – файлов:

  • Гипертекст – это текст, содержащий специальные разметочные теги.

Теги (tag –...

    6 слайд

    Гипертекст – это текст, содержащий специальные разметочные теги.


    Теги (tag – ярлык, признак) – инструкции браузера, указывающие способ отображения текста.

  • Пример тега          Типы тегов

Парные (влияет на текст с того места, где у...

    7 слайд

    Пример тега
    <HTML> </HTML>
    Типы тегов

    Парные (влияет на текст с того места, где употреблён тег, до того места, где указан признак окончания его действия)

    Непарные

  • Структурные теги
Теги символов
Теги форматирования абзацев
Теги оформления сп...

    8 слайд

    Структурные теги
    Теги символов
    Теги форматирования абзацев
    Теги оформления списков данных
    Теги логического форматирования текста
    Теги физического форматирования текста
    Категории тегов

  • Структура HTML - документа

    9 слайд

    Структура
    HTML - документа

  • начинает описание HTML - файлаHTML - документ состоит из двух частей:Ра...

    10 слайд

    <HTML> </HTML>
    начинает описание HTML - файла
    HTML - документ состоит из двух частей:
    Раздел заголовка
    Содержательная часть

  • Раздел заголовкаНачинается тегом 
Заканчивается тегом  
Mежду данными тегами...

    11 слайд

    Раздел заголовка
    Начинается тегом <HEAD>
    Заканчивается тегом </HEAD>
    Mежду данными тегами располагается тег <TITLE> </TITLE> (этот тег используется для задания названия документа)

  • Раздел содержательной частиНачинается тегом 
Заканчивается тегом 
(между кото...

    12 слайд

    Раздел содержательной части
    Начинается тегом <BODY>
    Заканчивается тегом </BODY>
    (между которыми располагается содержимое
    HTML - документа)

  • Создать файл в Блокноте (сохраните в файле  Пример,  указав расширение  *. ht...

    13 слайд

    Создать файл в Блокноте (сохраните в файле Пример, указав расширение *. html)
    <HTML>
    <HEAD>
    <TITLE>Заголовок HTML – документа </TITLE>
    </HEAD>
    <BODY>
    Это тело HTML – документа. Здесь можно разместить всё, что угодно.
    </BODY>
    </HTML>

  • Создать файл в Блокноте (сохраните в файле  Пример,  указав расширение  *. ht...

    14 слайд

    Создать файл в Блокноте (сохраните в файле Пример, указав расширение *. html)

  • Теги символовТеги логического форматирования    
  текста
Теги физического фо...

    15 слайд

    Теги символов
    Теги логического форматирования
    текста
    Теги физического форматирования
    текста

  • Теги логического форматирования текста...

    16 слайд

    Теги логического форматирования текста
    <CITE> </CITE>
    <CODE> </CODE>
    <DEL> </DEL>
    <DFN> </DFN>
    <INS> </INS>
    <EM> </EM>
    <KBD> </KBD>
    <SAMP> </SAMP>
    <STRONG> </STRONG>
    <VAR> </VAR>

  • Теги физического форматирования текста...

    17 слайд

    Теги физического форматирования текста
    <B> </B>
    <I> </I>
    <U> </U>
    <TT> </TT>
    <STRIKE> </STRIKE>
    <S> </S>
    <BIG> </BIG>
    <SMALL> </SMALL>
    <SUB> </SUB>
    <SUP> </SUP>
    <FONT> </FONT>
    <BASEFONT>

  • используется для отметки аббревиатур, акронимов  (акроним  –  произносимое сл...

    18 слайд

    <ACRONYM></ACRONYM>
    используется для отметки аббревиатур, акронимов (акроним – произносимое слово, состоящее из начальных букв словосочетания); используя тег <TITLE> - можно указать «расшифровку» акронима, которая появляется на экране, когда курсор располагается на акрониме.

  • Пример использования  тега :  МКОУ       «Глядянская средняя общеобразователь...

    19 слайд

    Пример использования тега <ACRONYM>:
    <ACRONYM TITLE=«Муниципальное казённое общеобразовательное учреждение»> МКОУ </ACRONYM> «Глядянская средняя общеобразовательная школа»

  • Пример использования  тега :

    20 слайд

    Пример использования тега <ACRONYM>:

  • Тег  позволяет изменить шрифт

    21 слайд

    Тег <FONT>
    позволяет изменить шрифт

  • Параметры тега  FACE (задаёт  название  шрифта,  которым  
               буд...

    22 слайд

    Параметры тега <FONT>
    FACE (задаёт название шрифта, которым
    будет выводится текст)
    SIZE (задаёт размеры шрифта в условных
    единицах от 1 до 7)
    COLOR (устанавливает цвет шрифта,
    который может задаваться с
    помощью стандартных имён или
    набором шестнадцатеричных цифр)

  • Задание цвета на языке HTMLШестнадцатеричные значения
   (цветовая система б...

    23 слайд

    Задание цвета
    на языке HTML
    Шестнадцатеричные значения
    (цветовая система базируется на трёх основных цветах – красном, зеленом и синем – обозначается RGB)
    Например: #000000, #0000FF, #FF0000,
    #FFFFFF
    Мнемонические обозначения
    (название цвета)
    Например: Red, White, Blue, Green

  • Пример использования параметра  Color: Шрифт размера 6, цвет зелёный  

или...

    24 слайд

    Пример использования
    параметра Color:
    <FONT COLOR=Green> Шрифт размера 6, цвет зелёный </FONT> <BR>

    или

    <FONT COLOR=#008000> Шрифт размера 6, цвет зелёный </FONT> <BR>

  • Примеры использования параметров тега  :
   Название шрифта  

 Шрифт размер...

    25 слайд

    Примеры использования
    параметров тега <FONT> :
    <FONT FACE=“ARIAL”>
    Название шрифта </FONT> <BR>

    <FONT SIZE=5> Шрифт размера 5 </FONT> <BR>

    <FONT FACE=“ARIAL” SIZE=+3 COLOR=Green> Шрифт размера 6, цвет зелёный </FONT> <BR>

  •  Тег используется для указания размера,
 типа и цвета шрифта по умолчанию

    26 слайд

    Тег <BASEFONT>
    используется для указания размера,
    типа и цвета шрифта по умолчанию

  • Примеры использования  тега  :
   Шрифт по умолчанию  размера 3

Шрифт разме...

    27 слайд

    Примеры использования
    тега <BASEFONT> :
    <BASEFONT FACE=“Courier” COLOR=#008080>
    Шрифт по умолчанию размера 3<BR>

    <BASEFONT SIZE=2>Шрифт размера 2<BR>

    <BASEFONT SIZE=4 COLOR=Olive> Шрифт размера 4, цвет оливковый <BR>


  • Пример использования параметра  Color c  тегом :  Задание   
             цв...

    28 слайд

    Пример использования параметра
    Color c тегом <BODY>:
    <BODY BGCOLOR=#008080> Задание
    цвета фона <BR>

  • тег «параграф», отделяет абзац 
друг от друга Тег

    29 слайд

    тег «параграф», отделяет абзац
    друг от друга
    Тег <Р>

  • Примеры использования  тега  :
   Выравнивание по левой границе окна


   Вы...

    30 слайд

    Примеры использования
    тега <P> :
    <P ALIGN=LEFT>
    Выравнивание по левой границе окна<BR>

    <P ALIGN=CENTER>
    Выравнивание по центру окна<BR>

    <P ALIGN=RIGHT>
    Выравнивание по правой границе окна<BR>

    <P ALIGN=JUSTIFY>
    Выравнивание по ширине окна<BR>



  •  Тег отображение горизонтальной линии

    31 слайд

    Тег <HR>
    отображение горизонтальной линии

  • Пример использования  тега  :

    32 слайд

    Пример использования
    тега <HR> :
    <HR ALIGN=LEFT WIDHT=20 SIZE=30 COLOR=#00FF00>



  •  Тег для разметки заголовков (,,
, , , )

    33 слайд

    Тег <H1>
    для разметки заголовков (<H1>,<H2>,
    <H3>, <H4>, <H5>, <H6>)

  • Вставка пробелов и специальных символов&amp;nbsp
&amp;#34
&amp;#177
&amp;#178

    34 слайд

    Вставка пробелов и специальных символов
    &nbsp
    &#34
    &#177
    &#178

  • Список использованной литературыИнформатика. 7 – 9 класс. Базовый курс. Практ...

    35 слайд

    Список использованной литературы
    Информатика. 7 – 9 класс. Базовый курс. Практикум по информационным технологиям /Под ред. Н.В.Макаровой. – СПб.: Питер, 2006.
    А.А. Медведев. Основы HTML: Учебное пособие для средних учебных заведений. – Курган: Изд-во Курганского ИПКРО, 2002.
    Изображения http://www.xard.ru/post/18613/

Получите профессию

Технолог-калькулятор общественного питания

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Скачать материал

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

6 625 090 материалов в базе

Скачать материал

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

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.

  • Скачать материал
    • 14.03.2020 108
    • PPTX 1.2 мбайт
    • Оцените материал:
  • Настоящий материал опубликован пользователем Ильичева Татьяна Михайловна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

    Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.

    Удалить материал
  • Автор материала

    Ильичева Татьяна Михайловна
    Ильичева Татьяна Михайловна
    • На сайте: 3 года и 3 месяца
    • Подписчики: 0
    • Всего просмотров: 62160
    • Всего материалов: 207

Ваша скидка на курсы

40%
Скидка для нового слушателя. Войдите на сайт, чтобы применить скидку к любому курсу
Курсы со скидкой

Курс профессиональной переподготовки

Технолог-калькулятор общественного питания

Технолог-калькулятор общественного питания

500/1000 ч.

Подать заявку О курсе

Курс профессиональной переподготовки

Организация деятельности библиотекаря в профессиональном образовании

Библиотекарь

300/600 ч.

от 7900 руб. от 3950 руб.
Подать заявку О курсе
  • Сейчас обучается 282 человека из 66 регионов

Курс повышения квалификации

Специалист в области охраны труда

72/180 ч.

от 1750 руб. от 1050 руб.
Подать заявку О курсе
  • Сейчас обучается 40 человек из 19 регионов

Курс профессиональной переподготовки

Библиотечно-библиографические и информационные знания в педагогическом процессе

Педагог-библиотекарь

300/600 ч.

от 7900 руб. от 3950 руб.
Подать заявку О курсе
  • Сейчас обучается 458 человек из 66 регионов

Мини-курс

Интегративный коучинг: от теории к практике

6 ч.

780 руб. 390 руб.
Подать заявку О курсе
  • Сейчас обучается 51 человек из 23 регионов

Мини-курс

Успешный педагог: навыки самозанятости, предпринимательства и финансовой грамотности

6 ч.

780 руб. 390 руб.
Подать заявку О курсе
  • Сейчас обучается 55 человек из 23 регионов

Мини-курс

Основы дизайна в Figma

4 ч.

780 руб. 390 руб.
Подать заявку О курсе
  • Сейчас обучается 44 человека из 20 регионов