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

Содержание

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: внешний отступ


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

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

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

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

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


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

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