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

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


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

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

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

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

Презентация на тему Создание HTML. Примеры тегов с атрибутами

Содержание

Клиентская частьСерверКлиентCSSHTMLВерстка, структураОформлениеформатированиеИнтерактивность, «общение» с серверомJavascript
Тема 1. HTMLФедорищев Леонид АлександровичВГУЭС Клиентская частьСерверКлиентCSSHTMLВерстка, структураОформлениеформатированиеИнтерактивность, «общение» с серверомJavascript HTML HTMLHTML = обычный текст + теги HTML. ТэгиТекст как и в любых других файлах используется для передачи информации, HTML. ТэгиHTML тэги обычно используются в паре, например: . Первый тэг называется HTML. ПримерЛюбой HTML документ состоит из обычного текста и разметочных тэгов . Текст HTMLЕсли HTML документ будет открыт в редакторе он будет отображен как обычный HTML. Пример Мой первый заголовок! Привет всем! HTML. Пример Объяснение примераТэг объявляет начало и конец HTML документа;Тэг содержит все видимое содержимое Создание HTML-документаДля того, чтобы создать HTML документ необходимо:Открыть любой текстовый редактор (например РедакторыБлокнот Notepad ++ Sublime TextAtom… HTML-элементы Парные и непарные тегиПарные теги: 		 содержимое Одинарные теги: Парные теги Заголовки	… Абзац … Cсылки Ссылки … Вставка картинкиПример: Картинки Атрибуты тега 	содержимое Атрибуты тега 	содержимое Атрибуты тега 	содержимое Примеры тегов с атрибутамиwisdomweb.ru Мой сайт  просто текст Стандартные атрибуты Оформление текста Жирный текст Курсивный текст  (перевод на новую строку) Оформление текста Перевод на новую строку: Горизонтальная линия: Предформатированный текст Оформление с помощью CSS Устаревшие теги Таблицы. Пример Таблицы Создание таблицы  Создание строки  Создание ячейки   Таблицы. Пример 	Россия 141 США 309  Китай 1338  Великобритания 61 Растягивание ячеек Вложенные теги	 Данный текст курсивный и жирный одновременно. СпискиHTMLРезультат Вложенные списки Теги-контейнеры	 		Содержимое	 	 		Содержимое Формы Текстовые поля Флажки Радио-кнопки Кнопкии другие Формы Текстовое полеHTMLРезультат ФлажкиHTMLРезультат Выпадающий списокHTMLРезультат и Группы в формахHTMLРезультат и HTML5Теги-контейнеры: header, footer, article, nav, section, asideТеги работы с текстом: dialog, mark,
Слайды презентации

Слайд 2 Клиентская часть

Сервер
Клиент

CSS

HTML

Верстка, структура

Оформление
форматирование
Интерактивность, «общение» с сервером
Javascript

Клиентская частьСерверКлиентCSSHTMLВерстка, структураОформлениеформатированиеИнтерактивность, «общение» с серверомJavascript

Слайд 4 HTML
HTML = обычный текст + теги

HTMLHTML = обычный текст + теги

Слайд 5 HTML. Тэги
Текст как и в любых других файлах

HTML. ТэгиТекст как и в любых других файлах используется для передачи

используется для передачи информации, а разметочные тэги используются для

ее группировки и оформления.

Разметочные тэги HTML представляют собой специальные слова, которые окружены с обеих сторон угловыми скобками, например: .

Слайд 6 HTML. Тэги
HTML тэги обычно используются в паре, например:

HTML. ТэгиHTML тэги обычно используются в паре, например: . Первый тэг

. Первый тэг называется начальным тэгом, а второй конечным

тэгом.

Текст находящийся между начальным и конечным тэгом подвергается "разметке".

Например Привет будет отображено браузером как Привет (слово 'Привет' написанное жирным шрифтом).

Слайд 7 HTML. Пример
Любой HTML документ состоит из обычного текста

HTML. ПримерЛюбой HTML документ состоит из обычного текста и разметочных тэгов .

и разметочных тэгов . Текст как и в любых других

файлах используется для передачи информации, а разметочные тэги используются для ее группировки и оформления.
Разметочные тэги HTML представляют собой специальные слова, которые окружены с обеих сторон угловыми скобками, например: .

HTML тэги обычно используются в паре, например:  . Первый тэг называется начальным тэгом, а второй конечным тэгом.
Текст находящийся между начальным и конечным тэгом подвергается "разметке". Например Привет будет отображено браузером как Привет (слово 'Привет' написанное жирным шрифтом).

Слайд 8 HTML
Если HTML документ будет открыт в редакторе он

HTMLЕсли HTML документ будет открыт в редакторе он будет отображен как

будет отображен как обычный текстовый файл.

Если HTML документ будет

открыт в браузере он будет отображен в соответствии с разметочными тэгами и будет называться веб-страницей.

Слайд 9 HTML. Пример


Мой первый заголовок!
Привет всем!

HTML. Пример Мой первый заголовок! Привет всем!





Слайд 10 HTML. Пример

HTML. Пример

Слайд 11 Объяснение примера
Тэг объявляет начало и конец HTML

Объяснение примераТэг объявляет начало и конец HTML документа;Тэг содержит все видимое

документа;

Тэг содержит все видимое содержимое HTML страницы;

Тэг

позволяет "разметить" вложенный в него текст как заголовок;

Тэг

позволяет "разметить" вложенный в него текст как абзац.


Слайд 12 Создание HTML-документа
Для того, чтобы создать HTML документ необходимо:
Открыть

Создание HTML-документаДля того, чтобы создать HTML документ необходимо:Открыть любой текстовый редактор

любой текстовый редактор (например блокнот встроенный в Windows);
Набрать

произвольный текст и разметить его HTML тэгами;
Cохранить файл с расширением .htm или .html.

Слайд 13 Редакторы
Блокнот
Notepad ++
Sublime Text
Atom

РедакторыБлокнот Notepad ++ Sublime TextAtom…

Слайд 14 HTML-элементы

HTML-элементы

Слайд 15 Парные и непарные теги
Парные теги: содержимое

Одинарные

Парные и непарные тегиПарные теги: 		 содержимое Одинарные теги:

теги:


Слайд 16 Парные теги

Парные теги

Слайд 17 Заголовки …

Заголовки	…

Слайд 18 Абзац …

Абзац …

Слайд 19 Cсылки

Cсылки

ссылки

Текст закладки.


Текст ссылки

Внешние

Внутренние


Слайд 20 Ссылки …

Ссылки …

Слайд 21 Вставка картинки



Пример:

Вставка картинкиПример:

width='300' height='242' />


Слайд 22 Картинки

Картинки

Слайд 23 Атрибуты тега

содержимое

Атрибуты тега 	содержимое

Слайд 24 Атрибуты тега

содержимое

Атрибуты тега 	содержимое

Слайд 25 Атрибуты тега
содержимое

Атрибуты тега 	содержимое

Слайд 26 Примеры тегов с атрибутами
wisdomweb.ru

Примеры тегов с атрибутамиwisdomweb.ru Мой сайт  просто текст





сайт”>Мой сайт

просто текст



Слайд 27 Стандартные атрибуты

Стандартные атрибуты

Слайд 28 Оформление текста
Жирный текст

Курсивный текст

Оформление текста Жирный текст Курсивный текст (перевод на новую строку)

/> (перевод на новую строку)


Слайд 29 Оформление текста

Оформление текста

Слайд 30 Перевод на новую строку:

Перевод на новую строку:

Слайд 31 Горизонтальная линия:

Горизонтальная линия:

Слайд 32 Предформатированный текст

Предформатированный текст

Слайд 33 Оформление с помощью CSS

Оформление с помощью CSS

Слайд 34 Устаревшие теги

Устаревшие теги

Слайд 35 Таблицы. Пример

Таблицы. Пример

Слайд 36 Таблицы
Создание таблицы

 Создание строки

 Создание ячейки  

Таблицы Создание таблицы  Создание строки  Создание ячейки  

Слайд 37 Таблицы. Пример


Россия 141

США

Таблицы. Пример 	Россия 141 США 309  Китай 1338  Великобритания 61

309
Китай 1338
Великобритания 61




Слайд 38 Растягивание ячеек

Растягивание ячеек

Слайд 39 Вложенные теги


Данный текст курсивный и жирный одновременно.


Вложенные теги	 Данный текст курсивный и жирный одновременно.

Слайд 40 Списки
HTML
Результат

СпискиHTMLРезультат

Слайд 41 Вложенные списки

Вложенные списки

Слайд 42 Теги-контейнеры

Содержимое


Содержимое

Теги-контейнеры	 		Содержимое	 	 		Содержимое

Слайд 43 Формы
Текстовые поля
Флажки
Радио-кнопки
Кнопки
и другие

Формы Текстовые поля Флажки Радио-кнопки Кнопкии другие

Слайд 44 Формы

Формы

Слайд 45 Текстовое поле
HTML
Результат

Текстовое полеHTMLРезультат

Слайд 46 Флажки
HTML
Результат

ФлажкиHTMLРезультат

Слайд 47 Выпадающий список
HTML
Результат
и

Выпадающий списокHTMLРезультат и

Слайд 48 Группы в формах
HTML
Результат
и

Группы в формахHTMLРезультат и

  • Имя файла: sozdanie-html-primery-tegov-s-atributami.pptx
  • Количество просмотров: 128
  • Количество скачиваний: 0