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

Содержание

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

Слайд 1Тема 1. HTML
Федорищев Леонид Александрович
ВГУЭС


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

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

CSS

HTML

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

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


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


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

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

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

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

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

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

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

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

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

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

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

обычный текстовый файл.

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

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


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



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


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

Тэг содержит

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

Тэг

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

Тэг

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


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

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

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


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


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

Одинарные теги:


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


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


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


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

Создание закладки -->
Текст закладки.

Текст ссылки

Внешние

Внутренние


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


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



Пример:



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


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

содержимое


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

содержимое


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


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



height=200 />

Мой сайт

просто текст



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


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

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


(перевод на

новую строку)

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


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


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


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


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


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


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


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

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

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


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


Россия 141

США 309

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


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


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


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



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


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


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

Содержимое


Содержимое


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


Слайд 44Формы


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


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


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


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


Слайд 49HTML5
Теги-контейнеры: header, footer, article, nav, section, aside
Теги работы с текстом: dialog,

mark, time, progress
Мультимедиа: audio, video
Интерактивные элементы: canvas, menu, datagrid


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

Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

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

Что такое ThePresentation.ru?

Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.


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

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