Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.

Для правообладателей

Обратная связь

Email: Нажмите что бы посмотреть 

Яндекс.Метрика

Презентация на тему Html

Содержание

НазначениеОсновы HTMLДля создания web-страниц используется HTML — HyperText Markup LanguageЯзык HTML основан на использовании тегов.Теги – это команды, которые указывают браузеру, где и как расположить на странице текст и картинки, а также позволяют организовывать ссылки на
HTMLЯзык гипертекстовой разметки текстаОсновы HTML НазначениеОсновы HTMLДля создания web-страниц используется HTML — HyperText Markup LanguageЯзык HTML основан Простейшая web-страницаОсновы HTML Hello, world! Hello, world! Привет, мир! Задание 1Основы HTMLСоздайте в Блокноте текстовый файл, как показано выше, и сохраните Создание файлаОсновы HTMLПуск -> Все программы -> Стандартные -> Блокнот Сохранение файлаОсновы HTMLСохраняем файл с именем index.htmlПосле этого при двойном клике на ЗамечаниеОсновы HTMLЕсли не видно расширения файла, то файл сохраняется с расширением .txt Корректировка файлаОсновы HTMLТак выглядит один и тот же файл в разных программах. ТегиОсновы HTMLТеги имеют английские имена и пишутся в ломаных скобочках < > Структура html-файлаОсновы HTMLСодержимое HTML-файла, заключённое между и , делится на две части headОсновы HTMLПомимо тела web-страницы, в HTML-файле присутствует информация об этой странице. Она Ввод текстаОсновы HTMLОбычный текст представляется в HTML-файле как есть, как-то особо его АбзацОсновы HTMLКаждый абзац начинается тегом (paragraph, абзац), а заканчивается тегом . Для Отказ от форматированияОсновы HTMLИногда требуется совсем отказаться от автоматического форматирования абзацев. Тогда РазделыОсновы HTMLЗаголовки наиболее крупных разделов оформляются с помощью тегов , . Заголовки ЗаголовкиОсновы HTML РекомендацииОсновы HTMLЧтение с экрана несколько отличается от чтения напечатанного текста. Поэтому рекомендуется Горизонтальная линияОсновы HTMLТакже для разделения текста служит горизонтальная линия. Это ещё один Жирный курсивОсновы HTMLВ HTML есть теги (italic, курсив) и (bold, жирный). Чтобы ЗамечаниеОсновы HTMLОбщий принцип: области действия разных тегов не должны пересекаться, они должны Изображение и его описаниеОсновы HTMLДля добавления изображения используется тег .или Задание 2Основы HTMLСделайте более сложную HTML-страничкус использованием картинки. Корректировка файлаОсновы HTML ВыделениеОсновы HTMLОдно или несколько слов можно выделить с помощью тега , например:Это действительно интересно! СсылкиОсновы HTMLСсылки определяются с помощью тега . Давайте определим ссылку на файл “list2.html”:Вторая страница Файл list2.htmlОсновы HTML РезультатыОсновы HTML Ссылка внутри документаОсновы HTMLАтрибут id используется для маркировки элемента, на который можно Неупорядоченный списокОсновы HTML первый элемент списка второй элемент списка третий элемент списка Нумерованный списокОсновы HTML первый элемент списка второй элемент списка третий элемент списка Список определенийОсновы HTML первый термин его определение второй термин его определение третий термин его определение Смешанные спискиОсновы HTML первый элемент списка второй элемент списка Текст программыОсновы HTML Основы HTML ГиперссылкиОсновы HTML Основы HTML Разрывы строкОсновы HTMLДля принудительного разрыва строк используется непарный тег Пример Основы HTML Основы HTML Основы HTML Основы HTML Неразрывные пробелыОсновы HTMLРазрывы строк производятся в местах пробелов. Иногда необходимо запретить разрыв Специальные символыОсновы HTML Форматированный текстОсновы HTMLОдним из преимуществ Web является автоматическое разбиение текста на строки ПримерОсновы HTML program prim1; begin writeln ('Hello,world!'); end. Основы HTML Основы HTMLОбычно форматированный текст генерируется с использованием моноширинного шрифта. Если определить правило Основы HTMLПри установке цвета текста рекомендуется также установить и цвет фона. Это Основы HTML Размещение картинокОсновы HTMLВ HTML можно выбрать, будет ли данное изображение считаться частью Размещение слеваОсновы HTML Этот текст обтекает изображение справа. Размещение справаОсновы HTML Этот текст обтекает изображение слева. Под изображениемОсновы HTMLДля продолжения текста под изображением используется
Слайды презентации

Слайд 2 Назначение
Основы HTML
Для создания web-страниц используется
HTML — HyperText

НазначениеОсновы HTMLДля создания web-страниц используется HTML — HyperText Markup LanguageЯзык HTML

Markup Language

Язык HTML основан на использовании тегов.
Теги – это

команды, которые указывают браузеру, где и как расположить на странице текст и картинки, а также позволяют организовывать ссылки на другие документы.

Слайд 3 Простейшая web-страница
Основы HTML


Hello, world!


Hello, world!
Привет,

Простейшая web-страницаОсновы HTML Hello, world! Hello, world! Привет, мир!

мир!


Слайд 4 Задание 1
Основы HTML
Создайте в Блокноте текстовый файл, как

Задание 1Основы HTMLСоздайте в Блокноте текстовый файл, как показано выше, и

показано выше, и сохраните его под именем index.html. Откройте

его в браузере. Для этого достаточно кликнуть мышью (требуется одинарный или двойной клик, в зависимости от настроек Windows) по нему на "Рабочем столе" или в Internet Explorer'е (Проводнике) в том каталоге, куда вы этот файл сохранили. В окне браузера должно появиться "Hello, world!" и "Привет, мир!".

Слайд 5 Создание файла
Основы HTML
Пуск -> Все программы -> Стандартные

Создание файлаОсновы HTMLПуск -> Все программы -> Стандартные -> Блокнот

-> Блокнот

Слайд 6 Сохранение файла
Основы HTML
Сохраняем файл с именем index.html
После этого

Сохранение файлаОсновы HTMLСохраняем файл с именем index.htmlПосле этого при двойном клике

при двойном клике на этом файле появляется следующее окно

Слайд 7 Замечание
Основы HTML
Если не видно расширения файла, то файл

ЗамечаниеОсновы HTMLЕсли не видно расширения файла, то файл сохраняется с расширением

сохраняется с расширением .txt
На Панели управления (возможно,

придется нажать Крупные значки) выбираем
Свойства папки и на вкладке Вид убираем галочку в пункте
Скрывать расширения у зарегистрированных типов файлов

Слайд 8 Корректировка файла
Основы HTML
Так выглядит один и тот же

Корректировка файлаОсновы HTMLТак выглядит один и тот же файл в разных программах.

файл в разных программах.

Слайд 9 Теги
Основы HTML
Теги имеют английские имена и пишутся в

ТегиОсновы HTMLТеги имеют английские имена и пишутся в ломаных скобочках <

ломаных скобочках < > (вообще-то это знаки «меньше» и

«больше». Большинство тегов являются парными. Открывающий тег начинает некую область, а заканчивает эту область тег с тем же именем, но имеющий символ «/» после <. См. слайд 3

Слайд 10 Структура html-файла
Основы HTML
Содержимое HTML-файла, заключённое между и

Структура html-файлаОсновы HTMLСодержимое HTML-файла, заключённое между и , делится на две

, делится на две части — шапку (head) и

тело (body). Тело это то, что и будет показано браузером. Тело заключается в теги , . Всё, что предназначено для вывода внутри окна браузера, должно быть между и .

Слайд 11 head
Основы HTML
Помимо тела web-страницы, в HTML-файле присутствует информация

headОсновы HTMLПомимо тела web-страницы, в HTML-файле присутствует информация об этой странице.

об этой странице. Она идёт между тегами и

. Обязательно должно быть название web-страницы. Оно пишется между и .

Слайд 12 Ввод текста
Основы HTML
Обычный текст представляется в HTML-файле как

Ввод текстаОсновы HTMLОбычный текст представляется в HTML-файле как есть, как-то особо

есть, как-то особо его оформлять не требуется. Однако, несколько

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

Слайд 13 Абзац
Основы HTML
Каждый абзац начинается тегом (paragraph, абзац),

АбзацОсновы HTMLКаждый абзац начинается тегом (paragraph, абзац), а заканчивается тегом .

а заканчивается тегом .
Для принудительного разрыва строки служит

тег
(break, разрыв). Это один из непарных тегов — он просто ставится там, где требуется разрыв строки, закрывающий тег
нигде ставить не нужно.

Слайд 14 Отказ от форматирования
Основы HTML
Иногда требуется совсем отказаться от

Отказ от форматированияОсновы HTMLИногда требуется совсем отказаться от автоматического форматирования абзацев.

автоматического форматирования абзацев. Тогда фрагмент уже отформатированного текста заключают

в теги 
,
(preformatted, предварительно отформатированный).

Слайд 15 Разделы
Основы HTML
Заголовки наиболее крупных разделов оформляются с помощью

РазделыОсновы HTMLЗаголовки наиболее крупных разделов оформляются с помощью тегов , .

тегов , . Заголовки подчинённых им разделов заключаются в

теги

,

. Заголовки следующего уровня задаются с помощью

,

. И так далее. Всего есть шесть уровней заголовков: от

до

.

Слайд 16 Заголовки
Основы HTML

ЗаголовкиОсновы HTML

Слайд 17 Рекомендации
Основы HTML
Чтение с экрана несколько отличается от чтения

РекомендацииОсновы HTMLЧтение с экрана несколько отличается от чтения напечатанного текста. Поэтому

напечатанного текста. Поэтому рекомендуется избегать больших кусков сплошного текста

и делать разделы помельче. Ориентироваться при этом следует примерно на один экран текста.

Слайд 18 Горизонтальная линия
Основы HTML
Также для разделения текста служит горизонтальная

Горизонтальная линияОсновы HTMLТакже для разделения текста служит горизонтальная линия. Это ещё

линия. Это ещё один непарный тег (horizontal rule,

горизонтальная линия).
Для линии можно задавать дополнительные параметры:

Слайд 19 Жирный курсив
Основы HTML
В HTML есть теги (italic,

Жирный курсивОсновы HTMLВ HTML есть теги (italic, курсив) и (bold, жирный).

курсив) и (bold, жирный). Чтобы получить жирный курсив,

нужно эти теги вложить друг в друга:

Чтобы получить
жирный курсив, нужно…

Слайд 20 Замечание
Основы HTML
Общий принцип: области действия разных тегов не

ЗамечаниеОсновы HTMLОбщий принцип: области действия разных тегов не должны пересекаться, они

должны пересекаться, они должны быть строго вложены друг в

друга.

Слайд 21 Изображение и его описание
Основы HTML
Для добавления изображения используется

Изображение и его описаниеОсновы HTMLДля добавления изображения используется тег .или

тег .


или

озера Анси" title="Вид озера Анси">

Слайд 22 Задание 2
Основы HTML
Сделайте более сложную HTML-страничку
с использованием картинки.

Задание 2Основы HTMLСделайте более сложную HTML-страничкус использованием картинки.

Слайд 23 Корректировка файла
Основы HTML

Корректировка файлаОсновы HTML

Слайд 24 Выделение
Основы HTML
Одно или несколько слов можно выделить с

ВыделениеОсновы HTMLОдно или несколько слов можно выделить с помощью тега , например:Это действительно интересно!

помощью тега , например:
Это действительно интересно!

Слайд 25 Ссылки
Основы HTML
Ссылки определяются с помощью тега .
Давайте

СсылкиОсновы HTMLСсылки определяются с помощью тега . Давайте определим ссылку на файл “list2.html”:Вторая страница

определим ссылку на файл “list2.html”:

Вторая страница

Слайд 26 Файл list2.html
Основы HTML

Файл list2.htmlОсновы HTML

Слайд 27 Результаты
Основы HTML

РезультатыОсновы HTML

Слайд 28 Ссылка внутри документа
Основы HTML
Атрибут id используется для маркировки

Ссылка внутри документаОсновы HTMLАтрибут id используется для маркировки элемента, на который

элемента, на который можно перейти. Атрибут id должен начинаться

с буквы

текст



В любом месте страницы можно создать ссылку на этот элемент с помощью знака "#" в атрибуте ссылки. Знак "#" сообщает браузеру, что это переход на той же самой странице. После "#" должен следовать id тэга, на который выполняется переход. Например:
Ссылка на ТЕКСТ

Слайд 29 Неупорядоченный список
Основы HTML

первый элемент списка второй элемент

Неупорядоченный списокОсновы HTML первый элемент списка второй элемент списка третий элемент списка

списка третий элемент списка

Слайд 30 Нумерованный список
Основы HTML

первый элемент списка второй элемент списка

Нумерованный списокОсновы HTML первый элемент списка второй элемент списка третий элемент списка

третий элемент списка

Слайд 31 Список определений
Основы HTML

первый термин
его определение
второй термин

Список определенийОсновы HTML первый термин его определение второй термин его определение третий термин его определение


его определение
третий термин
его определение

Слайд 32 Смешанные списки
Основы HTML

первый элемент списка

Смешанные спискиОсновы HTML первый элемент списка второй элемент списка

второй элемент списка

первый вложенный элемент


  • второй вложенный элемент


  • третий элемент списка


    • Слайд 33 Текст программы
    Основы HTML

    Текст программыОсновы HTML

    Слайд 34 Основы HTML

    Основы HTML

    Слайд 35 Гиперссылки
    Основы HTML

    ГиперссылкиОсновы HTML

    Слайд 36 Основы HTML

    Основы HTML

    Слайд 37 Разрывы строк
    Основы HTML
    Для принудительного разрыва строк используется непарный

    Разрывы строкОсновы HTMLДля принудительного разрыва строк используется непарный тег

    тег

    Слайд 38 Пример
    Основы HTML

    Пример Основы HTML

    Слайд 39 Основы HTML

    Основы HTML

    Слайд 40 Основы HTML

    Основы HTML

    Слайд 41 Основы HTML

    Основы HTML

    Слайд 42 Неразрывные пробелы
    Основы HTML
    Разрывы строк производятся в местах пробелов.

    Неразрывные пробелыОсновы HTMLРазрывы строк производятся в местах пробелов. Иногда необходимо запретить

    Иногда необходимо запретить разрыв строки между определенными словами.
    Для этого

    вместо пробела следует использовать комбинацию символов  , например:
    Seven Up

    Слайд 43 Специальные символы
    Основы HTML

    Специальные символыОсновы HTML

    Слайд 44 Форматированный текст
    Основы HTML
    Одним из преимуществ Web является автоматическое

    Форматированный текстОсновы HTMLОдним из преимуществ Web является автоматическое разбиение текста на

    разбиение текста на строки в соответствии с текущим размером

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

    Слайд 45 Пример
    Основы HTML

    program prim1;
    begin
    writeln

    ПримерОсновы HTML program prim1; begin writeln ('Hello,world!'); end.

    ('Hello,world!');
    end.

    Слайд 46 Основы HTML

    Основы HTML

    Слайд 47 Основы HTML
    Обычно форматированный текст генерируется с использованием моноширинного

    Основы HTMLОбычно форматированный текст генерируется с использованием моноширинного шрифта. Если определить

    шрифта. Если определить правило стиля для элемента pre, некоторые

    браузеры не используют моноширинный шрифт, поэтому следует обязательно определить свойство font-family. Например, если Вы хотите, чтобы все элементы pre представлялись зеленым цветом, можно определить следующее правило стиля:

    Слайд 48 Основы HTML
    При установке цвета текста рекомендуется также установить

    Основы HTMLПри установке цвета текста рекомендуется также установить и цвет фона.

    и цвет фона. Это гарантирует отсутствие ситуаций, когда цвет

    фона трудно отличить от цвета текста. Вместо установки цвета фона для элемента pre можно устанавливать его для элемента body, например:

    Слайд 49 Основы HTML

    Основы HTML

    Слайд 50 Размещение картинок
    Основы HTML
    В HTML можно выбрать, будет ли

    Размещение картинокОсновы HTMLВ HTML можно выбрать, будет ли данное изображение считаться

    данное изображение считаться частью текущей строки текста или будет

    прикреплено к правому или левому полю. Это определяется атрибутом align. Если для атрибута align установлено значение left, изображение прикрепляется к левому полю. Если установлено значение right, - к правому.

    Слайд 51 Размещение слева
    Основы HTML

    Размещение слеваОсновы HTML Этот текст обтекает изображение справа.

    width= "488" height= "76" align="left">
    Этот текст обтекает изображение

    справа.


    Слайд 52 Размещение справа
    Основы HTML

    Размещение справаОсновы HTML Этот текст обтекает изображение слева.

    width= "488" height= "76" align="right">
    Этот текст обтекает изображение

    слева.


    • Имя файла: html.pptx
    • Количество просмотров: 105
    • Количество скачиваний: 0
    - Предыдущая Формат raw
    Следующая - Жизнь крестьянской деревни

    Похожие презентации

    pomogi sobrat muzykalnye instrumenty pomogi sobrat muzykalnye instrumenty 42
    Тема 10 Система национальных счетов и её показатели Тема 10 Система национальных счетов и её показатели 120
    ПЛАНИРУЕМЫЕ РЕЗУЛЬТАТЫ: три основные группы результатов презентация к уроку ПЛАНИРУЕМЫЕ РЕЗУЛЬТАТЫ: три основные группы результатов презентация к уроку 100
    Мастер-класс: Ситуации общения средствами технологии Мы вместе. презентация Мастер-класс: Ситуации общения средствами технологии Мы вместе. презентация 83
    Презентаціянатему : Гетейогожиття і внесок у розвитокнаукиталітератури Презентаціянатему : Гетейогожиття і внесок у розвитокнаукиталітератури 77
    Презентация по теме: Работа с одарёнными детьми. Презентация по теме: Работа с одарёнными детьми. 110
    Зрительная гимнастика презентация к уроку (1, 2, 3, 4 класс) Зрительная гимнастика презентация к уроку (1, 2, 3, 4 класс) 94
    Русская Баня Русская Баня 134
    Духовно – нравственное воспитание детей в ДО в условиях ФГОС презентация к уроку (средняя группа) Духовно – нравственное воспитание детей в ДО в условиях ФГОС презентация к уроку (средняя группа) 126
    Приобщение детей к истокам русской народной культуры материал Приобщение детей к истокам русской народной культуры материал 79
    Мастер-класс в технике канзаши ,,Героям нашим посвящается... презентация Мастер-класс в технике канзаши ,,Героям нашим посвящается... презентация 109
    Нейропсихологическое сопровождение развития ребенка. Метод замещающего онтогенеза. презентация к уроку по теме Нейропсихологическое сопровождение развития ребенка. Метод замещающего онтогенеза. презентация к уроку по теме 139
    Работа концертмейстера над вокальной партией Работа концертмейстера над вокальной партией 107
    В какую сторону открыто окно? В какую сторону открыто окно? 88
    Интеллектуальный марафон классный час (3 класс) по теме Интеллектуальный марафон классный час (3 класс) по теме 119
    Мой друг Светофор проект (младшая группа) Мой друг Светофор проект (младшая группа) 163
    Media and battery life of the htc incredible s Media and battery life of the htc incredible s 83
    Шаблоны для создания презентаций по теме Универсальные 11 Шаблоны для создания презентаций по теме Универсальные 11 104
    Лидер с пеленок.Интеллектуально –музыкальная программа развития детей от 0 до 4 лет Лидер с пеленок.Интеллектуально –музыкальная программа развития детей от 0 до 4 лет 84
    фотоотчет Защитникам Отечества: Ура! презентация к уроку (старшая группа) фотоотчет Защитникам Отечества: Ура! презентация к уроку (старшая группа) 78
    Презентация к уроку Тепловые двигатели Презентация к уроку Тепловые двигатели 146
    АГРОПОЧВЕННЫЙ МОНИТОРИНГ НА ДЕФЛЯЦИОННООПАСНЫХ ЗЕМЛЯХ ПОЛЕСЬЯ АГРОПОЧВЕННЫЙ МОНИТОРИНГ НА ДЕФЛЯЦИОННООПАСНЫХ ЗЕМЛЯХ ПОЛЕСЬЯ 110
    Виды бюджетных учреждений: Виды бюджетных учреждений: 139
    Презентация Формы и методы сотрудничества с семьями по сохранению и укреплению здоровья детей презентация к уроку Презентация Формы и методы сотрудничества с семьями по сохранению и укреплению здоровья детей презентация к уроку 97
    презентация Этапы, формы и методы патриотического воспитания презентация презентация Этапы, формы и методы патриотического воспитания презентация 365
    Паттерны проектирования Паттерны проектирования 100
    Семинар практикум для родителей Я готов к школе? презентация к уроку (подготовительная группа) Семинар практикум для родителей Я готов к школе? презентация к уроку (подготовительная группа) 102
    Восточно-Европейская равнина, или Русская равнина. Восточно-Европейская равнина, или Русская равнина. 107
    эдьютейнмент-как педагогическая технология презентация эдьютейнмент-как педагогическая технология презентация 283
    Тема: Экспериментальный отбор лекарственных препаратов для опыта фараоновы змеи Тема: Экспериментальный отбор лекарственных препаратов для опыта фараоновы змеи 111