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

Содержание

Слайд 2

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

Клиентская часть

Сервер

Клиент

CSS

HTML

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

Оформление
форматирование

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

Javascript

Слайд 3

HTML

HTML

Слайд 4

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

HTML

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

Слайд 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 Text
Atom

Слайд 14

HTML-элементы

HTML-элементы

Слайд 15

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

Парные и непарные теги

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

Слайд 16

Парные теги

Парные теги

Слайд 17

Заголовки …

Заголовки


Слайд 18

Абзац …

Абзац


Слайд 20

Ссылки …

Ссылки

Слайд 21

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

Вставка картинки


Пример:

Слайд 22

Картинки

Картинки

Слайд 23

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

Атрибуты тега

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

Слайд 24

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

Атрибуты тега

<тег атрибут1 атрибут2 … атрибутN>
содержимое

Слайд 25

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

Атрибуты тега

<тег атрибут1=значение атрибут2=значение …> содержимое

Слайд 26

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

Примеры тегов с атрибутами

wisdomweb.ru

height=200 />
Мой сайт
просто текст

Слайд 27

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

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

Слайд 28

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

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

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

(перевод на

новую строку)
Слайд 29

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

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

Слайд 30

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

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

Слайд 31

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

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



Слайд 32

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

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

Слайд 33

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

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

Слайд 34

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

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

Слайд 35

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

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

Слайд 36

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

Таблицы

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

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

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

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

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







Россия 141
США 309
Китай 1338
Великобритания 61

Слайд 38

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

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

Слайд 39

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

Вложенные теги



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


Слайд 40

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

Списки

HTML

Результат

Слайд 41

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

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

Слайд 42

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

Теги-контейнеры


Содержимое


Содержимое

Слайд 43

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

Формы

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

Слайд 44

Формы

Формы

Слайд 45

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

Текстовое поле

HTML

Результат


Слайд 46

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

Флажки

HTML

Результат


Слайд 47

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

Выпадающий список

HTML

Результат