Что такое 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
    • Количество просмотров: 108
    • Количество скачиваний: 0
    - Предыдущая Формат raw
    Следующая - Жизнь крестьянской деревни

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

    Формирование у детей дошкольного возраста познавательной активности посредством познавательно-исследовательской деятельности презентация к уроку (старшая группа) Формирование у детей дошкольного возраста познавательной активности посредством познавательно-исследовательской деятельности презентация к уроку (старшая группа) 94
    Использование подпрограмм в Паскале Использование подпрограмм в Паскале 117
    развитие познавательной активности дошкольников презентация к уроку (подготовительная группа) развитие познавательной активности дошкольников презентация к уроку (подготовительная группа) 125
    Загадка как средство развития речи детей дошкольного возраста презентация по теме Загадка как средство развития речи детей дошкольного возраста презентация по теме 129
    Неделя книги и театра Книжный калейдоскоп презентация Неделя книги и театра Книжный калейдоскоп презентация 220
    Развитие предметно пространственной среды в средней группе презентация к уроку (средняя группа) Развитие предметно пространственной среды в средней группе презентация к уроку (средняя группа) 124
    Эдисон Васильевич Денисов(1929-1996) Эдисон Васильевич Денисов(1929-1996) 136
    Презентация Один день Артемки в детском саду презентация к уроку (средняя, старшая, подготовительная группа) Презентация Один день Артемки в детском саду презентация к уроку (средняя, старшая, подготовительная группа) 116
    Мастер-класс.Учимся писать синквейн. методическая разработка по теме Мастер-класс на конкурсе Учитель года 2015 Мастер-класс.Учимся писать синквейн. методическая разработка по теме Мастер-класс на конкурсе Учитель года 2015 109
    Презентация С. Я. Маршак презентация к уроку (подготовительная группа) Презентация С. Я. Маршак презентация к уроку (подготовительная группа) 123
    презентация по теме Развитие учебно-познавательных действий через систему развивающих заданий на уроках в условиях ФГОС презентация к уроку презентация по теме Развитие учебно-познавательных действий через систему развивающих заданий на уроках в условиях ФГОС презентация к уроку 101
    Тканевая(гистотоксическая) гипоксия. Патогенез. При какой патологии встречается. Тканевая(гистотоксическая) гипоксия. Патогенез. При какой патологии встречается. 99
    Презентация Электронные деньги как фактор развития экономики в современных условиях Презентация Электронные деньги как фактор развития экономики в современных условиях 129
    Реализацияпроекта Развитие иноязычной компетенции студентов ТГУ 2016-2018 гг. Реализацияпроекта Развитие иноязычной компетенции студентов ТГУ 2016-2018 гг. 128
    Сердән авыр нәрсә юк. Мастер-класс презентациясе Сердән авыр нәрсә юк. Мастер-класс презентациясе 165
    Проект Прилетайте в гости к нам. Авторы проекта: Зотова М.В., Сиркина А.И. проект ( группа) по теме Проект Прилетайте в гости к нам. Авторы проекта: Зотова М.В., Сиркина А.И. проект ( группа) по теме 122
    Тесты для системы Proclas Тесты для системы Proclas 169
    Мастер классМозговой штурм как метод интерактивного обучения план-конспект Мастер классМозговой штурм как метод интерактивного обучения план-конспект 110
    Презентация Подготовка учителя к уроку презентация к уроку Презентация Подготовка учителя к уроку презентация к уроку 153
    К.Д.Ушинский К.Д.Ушинский 155
    Презентация по кубановедению на тему Природные явления и стихийные бедствия (3 класс) Презентация по кубановедению на тему Природные явления и стихийные бедствия (3 класс) 224
    Доклад на открытую городскую конференцию работников образования города Бородино Тенднции, инновации и перспективы развития дошкольного образования тема: Музыкально-литературные композиции как форма духовно-нравственного воспитания детей дошкольного в през Доклад на открытую городскую конференцию работников образования города Бородино Тенднции, инновации и перспективы развития дошкольного образования тема: Музыкально-литературные композиции как форма духовно-нравственного воспитания детей дошкольного в през 113
    Клуб выходного дняМы вместе! проект (подготовительная группа) Клуб выходного дняМы вместе! проект (подготовительная группа) 140
    Синдром Робена Синдром Робена 129
    Обработка корешков книжного блока Обработка корешков книжного блока 120
    МЕТОД ПРОЕКТОВ КАК ФОРМА РАЗВИТИЯ ПОЗНАВАТЕЛЬНОЙ И ТВОРЧЕСКОЙ АКТИВНОСТИ УЧАЩИХСЯ МЕТОД ПРОЕКТОВ КАК ФОРМА РАЗВИТИЯ ПОЗНАВАТЕЛЬНОЙ И ТВОРЧЕСКОЙ АКТИВНОСТИ УЧАЩИХСЯ 117
    Влияние пищевых добавок на организм человека Влияние пищевых добавок на организм человека 98
    Консультация для родителей Развиваем речь через игры консультация Консультация для родителей Развиваем речь через игры консультация 147
    День молодых добровольцев России День молодых добровольцев России 114
    Презентация по ОДНКНР Человек -творец и носитель культуры Презентация по ОДНКНР Человек -творец и носитель культуры 463