Клиентская часть презентация

Содержание

HTML

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

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

CSS

HTML

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

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

Слайд 2HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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


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

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

Тэг содержит

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

Тэг

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

Тэг

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

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

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

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

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

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

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

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

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

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

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

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

Текст ссылки

Внешние

Внутренние

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

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



Пример:


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

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

содержимое

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

содержимое

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

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



height=200 />

Мой сайт

просто текст


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

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

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


(перевод на

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

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

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

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

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

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


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


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

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

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

Содержимое


Содержимое

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

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

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

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

CSS

HTML

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

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

Слайд 40CSS. Пример

Слайд 41Синтаксис

Слайд 42Пример.Шрифт
h1
{
font-family: Georgia, serif;
}

Слайд 43Пример. Размер
h1
{
font-size: 60px;
}

Слайд 44Селекторы
название тега
класс тега – class (.)
идентификатор тега – id (#)
атрибут тега

– []
* все элементы страницы

Слайд 45Селекторы тегов

Слайд 46Селекторы тегов

Слайд 47Селекторы идентификаторов

Слайд 48Селекторы идентификаторов

Слайд 49Селекторы классов

Слайд 50Селекторы классов

Слайд 51Селекторы атрибутов

Слайд 52Селекторы атрибутов

Слайд 53Комбинирование селекторов

Слайд 54Комбинирование селекторов

Слайд 55Группировка селекторов

Слайд 56Конфликт селекторов?
HTML:
Привет, мир

CSS:
div {
font-size: 11pt;
font-weight: bold;
}
#hello_id {
font-size: 27pt;
text-decoration: underline;
}
.hello_class

{
font-size: 14pt;
font-style: italic;
}

Слайд 57Вес селекторов
название тега имеет вес 1 балл;
присвоенный тегу класс — 10

баллов;
идентификатор тега — 100 баллов.

!important - способ явно повысить вес определенного CSS-свойства

div {
font-size: 11pt !important;
font-weight: bold;
}

Слайд 58Каскадирование стилей. Вес стилей
Стиль браузера.
Стиль пользователя.
Стиль автора.
Стиль автора с добавлением !important.
Стиль

пользователя с добавлением !important.

Слайд 59Псевдоклассы и псевдоэлементы
:active
:link
:focus
:hover
:visited
:first-child
:lang
:after
:before
:first-letter
:first-line
селектор : псевдокласс
селектор : псевдоэлемент

Слайд 60Текст. Цвет
p {color:green;}
p {color:rgb(0,255,0);}
p {color:#00ff00;}
 color

Слайд 61Текст. Выравнивание
p.ta1 {text-align:center;} (По центру)
p.ta2 {text-align:left;} (Слева)
p.ta3 {text-align:right;} (Справа)
p.ta4 {text-align:justify;} (По

ширине)

 text-align

Слайд 62Текст. Выравнивание

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

Слайд 64Текст. Отступ между словами и буквами в тексте

Слайд 65Текст. Отступ между словами и буквами в тексте

Слайд 66Текст. Другие свойства

Слайд 67Текст. Шрифт
p {font-family:Arial;}
 Шрифт: font-family
p.fz1 {font-size:20px;}
Размер шрифта: font-size

Слайд 68Текст. Безопасные шрифты

Слайд 69Шрифт. Размер

Слайд 70Шрифт. Стиль

Слайд 71Оформление фона
background-attachment
background-color
background-image
background-position
background-repeat
 background:
body
{ background-color:green; }
body
{ background-image:url('http://www.wisdomweb.ru/editor/spider2.gif'); }

Слайд 72Оформление фона: цвет

Слайд 73Оформление фона: картинка

Слайд 74Оформление фона: картинка

Слайд 75Оформление фона: картинка

Слайд 76Оформление ссылок
a:link - определяет оформление обычной не посещенной ссылки.
a:visited - определяет оформление посещенной

пользователем ссылки.
а:hover - определяет оформление ссылки, на которую наведен курсор мыши.
a:active - определяет оформление ссылки, на которую щелкнули мышкой.

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

Слайд 78Оформление списков

Слайд 79Блоковая модель

Слайд 80Блоковая модель

Слайд 81Блоковая модель

Слайд 82Стиль границ

Слайд 83Стиль границы в одной строке

Слайд 84Padding: внутренний отступ

Слайд 85Padding: внутренний отступ

Слайд 86Padding: краткая форма записи

Слайд 87Margin: внешний отступ

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

ВСЕРОССИЙСКОЕ ОБЩЕСТВЕННОЕ ДВИЖЕНИЕ МАТЕРИ РОССИИ Ростовское региональное отделениеПредседатель – доктор педагогических наук, почётный работник общего профессионального образования РФ, директор ГКОУ для детей-сирот и детей, оставшихся без попечения родит 0
Voitovich Portfolio 223
Насекомые 278
Новое в точном земледелии. Точное земледелие, с чего начать? 229
Эксергия и Анергия в теплотехнических расчетах.Основы перекрестного субсидирования в энергетике России 222
Пожарная безопасность в школе 209

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

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

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

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

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

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

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