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

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

    презентация урока Средства выразительности в графике презентация к уроку презентация урока Средства выразительности в графике презентация к уроку 140
    Презентация презентация к уроку (младшая, средняя группа) Презентация презентация к уроку (младшая, средняя группа) 84
    Портфолио дошкольника как инновационная технология реализации преемственности между ДОУ и начальной школой проект (средняя, старшая, подготовительная группа) Портфолио дошкольника как инновационная технология реализации преемственности между ДОУ и начальной школой проект (средняя, старшая, подготовительная группа) 97
    Будь заметнее на дороге Будь заметнее на дороге 86
    Хочешь быть человеком — будь им Мероприятие, посвященное творчеству Евгению Велтистову и фильму Приключения Электроника. Хочешь быть человеком — будь им Мероприятие, посвященное творчеству Евгению Велтистову и фильму Приключения Электроника. 122
    Презентация Чтобы быть природе другом презентация к уроку (старшая группа) Презентация Чтобы быть природе другом презентация к уроку (старшая группа) 116
    Интеллект – карта как средство речевого развития дошкольников. презентация Интеллект – карта как средство речевого развития дошкольников. презентация 103
    Картофель Картофель 118
    Психические отклонения и расстройства Психические отклонения и расстройства 88
    Дарья Донцова Дарья Донцова 75
    Дисграфия. Стойкие нарушения письма (материал для родительского собрания) материал (2, 3 класс) по теме Дисграфия. Стойкие нарушения письма (материал для родительского собрания) материал (2, 3 класс) по теме 84
    Презентация Презентация 124
    Настюш, С Днем Рождения!:* Настюш, С Днем Рождения!:* 89
    Презентация к конкурсу Ребус. Конкурс направлен на активизацию мыслительной деятельности учащихся 5, 6 классов Презентация к конкурсу Ребус. Конкурс направлен на активизацию мыслительной деятельности учащихся 5, 6 классов 92
    ФАКТОР ВРЕМЕНИ В АНАЛИЗЕ ДЕНЕЖНЫХ ПОТОКОВ ФАКТОР ВРЕМЕНИ В АНАЛИЗЕ ДЕНЕЖНЫХ ПОТОКОВ 97
    Презентация Ата ана отбасықазақ тілінде Презентация Ата ана отбасықазақ тілінде 110
    Формирование основ экономической культуры детей старшего дошкольного возраста по средством системы дидактических игр. презентация к уроку (старшая группа) по теме Формирование основ экономической культуры детей старшего дошкольного возраста по средством системы дидактических игр. презентация к уроку (старшая группа) по теме 89
    Выполнил:студент 244 группыСафовиддинзода РустамПринял:Кондратов А.В Выполнил:студент 244 группыСафовиддинзода РустамПринял:Кондратов А.В 79
    Презентация балет Щелкунчик Чайковский презентация Презентация балет Щелкунчик Чайковский презентация 90
    Слезный аппарат Слезный аппарат 238
    Публичная презентация общественности и педагогическому сообществу результатов педагогической деятельности презентация к уроку Публичная презентация общественности и педагогическому сообществу результатов педагогической деятельности презентация к уроку 73
    хеш -таблицы хеш -таблицы 120
    Презентация к семинару Актуальные вопросы школьной математики: реализация ФГОС, подготовка к ГИА Презентация к семинару Актуальные вопросы школьной математики: реализация ФГОС, подготовка к ГИА 107
    Цель работы:Пробуждение интереса к преданиям и обычаям дома, формирования патриотических чувств у детей школьного возраста в процессе создания макетов рубленной избы и хаты–мазанки. Цель работы:Пробуждение интереса к преданиям и обычаям дома, формирования патриотических чувств у детей школьного возраста в процессе создания макетов рубленной избы и хаты–мазанки. 90
    Петрофизикаи геофизические исследования скважин (ГИС) Петрофизикаи геофизические исследования скважин (ГИС) 106
    Презентация Г. С. Батеньков Презентация Г. С. Батеньков 131
    Семинар-практикум для педагогов Как успешно провести родительское собрание методическая разработка Семинар-практикум для педагогов Как успешно провести родительское собрание методическая разработка 86
    Celebrity life.mike tyson. Celebrity life.mike tyson. 58
    Шаги 5 С Шаги 5 С 118
    Нарушения голоса Нарушения голоса 89