Веб-разработка. HTML – Hyper Text Markup Language. Язык разметки гипертекста презентация

Содержание

Слайд 1Веб-разработка
Лекция №2
Шумилов Вадим Валерьевич
Тензор, 2017

Слайд 2HTML

Слайд 3HTML

HTML – Hyper Text Markup Language.

Язык разметки гипертекста.

Слайд 4Тэг

Слайд 5HTML

Тэг - элемент языка разметки гипертекста.

Слайд 6HTML

Тэг - элемент языка разметки гипертекста.

Заключается в угловые скобки.


Слайд 7HTML

Тэг - элемент языка разметки гипертекста.

Бывает одиночным...


Слайд 8HTML

Тэг - элемент языка разметки гипертекста.

... и парным

...

Слайд 9HTML

Тэг - элемент языка разметки гипертекста.

Парный тэг: открывающий

...

Слайд 10HTML

Тэг - элемент языка разметки гипертекста.

Парный тэг: закрывающий

...

Слайд 11HTML

Тэг - элемент языка разметки гипертекста.

Тэг может иметь атрибуты


Слайд 12HTML

Тэг - элемент языка разметки гипертекста.

Тэг может иметь атрибуты


Слайд 13HTML

Тэг - элемент языка разметки гипертекста.

Тэг может иметь атрибуты


Слайд 14HTML

Тэг - элемент языка разметки гипертекста.

Тэг может иметь атрибуты


Слайд 15HTML

Тэг - элемент языка разметки гипертекста.

Тэг может иметь атрибуты


Слайд 16HTML

Тэг - элемент языка разметки гипертекста.

Парные теги могут содержать внутри себя

другие тэги и/или текст

some text


Слайд 17HTML

Тэг - элемент языка разметки гипертекста.

Парные теги могут содержать внутри себя

другие тэги и/или текст

some text


Слайд 18HTML

Тэг - элемент языка разметки гипертекста.

Парные теги могут содержать внутри себя

другие тэги и/или текст

some text


Слайд 19HTML

Тэг - элемент языка разметки гипертекста.

Тэг может быть набран любым регистром

,

,
,

Слайд 20HTML

Тэг - элемент языка разметки гипертекста.

Внутри тэга можно писать сколько угодно

пробелов и переводов строк

myAttr=“x”
attr2>

Слайд 21HTML

Тэг - элемент языка разметки гипертекста.

Атрибуты можно писать в любых кавычках

class=‘x’ style=“...”>

Слайд 22HTML

Тэг - элемент языка разметки гипертекста.

А можно вообще без кавычек


Слайд 23HTML

Тэг - элемент языка разметки гипертекста.

А можно вообще без кавычек... Но

лучше не злоупотреблять


Слайд 24HTML

Тэг - элемент языка разметки гипертекста.

... Но лучше не злоупотреблять!

- OK

style=“y”> - Не ОК

Слайд 25HTML

Тэг - элемент языка разметки гипертекста.

Нельзя путать вложенность тэгов!

text

- OK

text

- Не ОК

Слайд 26Структура документа

Слайд 27Структура




charset=utf-8">
Пример веб-страницы


Заголовок



Первый абзац.


Второй абзац.




Слайд 28Структура




charset=utf-8">
Пример веб-страницы


Заголовок



Первый абзац.


Второй абзац.




Слайд 29Структура
HTML5 ==

Слайд 30Структура




charset=utf-8">
Пример веб-страницы


Заголовок



Первый абзац.


Второй абзац.




Слайд 31Структура




charset=utf-8">
Пример веб-страницы


Заголовок



Первый абзац.


Второй абзац.




Слайд 32Структура




charset=utf-8">
Пример веб-страницы


Заголовок



Первый абзац.


Второй абзац.




Слайд 33Типы тэгов

Слайд 34Типы тэгов
Блочные
Строчные
...

Слайд 35Типы тэгов
Блочные

Занимают всю доступную ширину
До и после них «перевод строки»
Примеры:
H1, P,

DIV

Слайд 36Типы тэгов
Строчные

Занимают ширину «по содержимому»
До и после них НЕТ «перевода строки»
Примеры:
SPAN,

STRONG, B, I, EM

Слайд 37Параметры атрибутов

Слайд 38Параметры атрибутов
Цвет:
Название по-английски
gray, red, deepskyblue
Шестнадцатеричное значение
Три компоненты: красный, зеленый, синий
Компонента: 1

байт (от 0 до 255)
#FF0000 – красный, #FFFF00 – желтый, #C0C0C0 – серый
Цвет + прозрачность (0 – 100):
0 – полностью прозрачный
rgba(255, 100, 145, 50);


Слайд 39Параметры атрибутов
Размер:
Пиксели, px
Проценты, %
em, pt, ...

Слайд 40Параметры атрибутов
Адреса:
Абсолютные
http://some.tld/some/file.html
//some.tld/some/file.html

Слайд 41«Единицы измерения»
Адреса:
Относительные
От корня
/
/some/file.html
/some/folder/

Слайд 42«Единицы измерения»
Адреса:
Относительные
От текущего адреса
../
some/file.html
some/folder/

Слайд 43«Единицы измерения»
Адреса:
Относительные, От текущего адреса
/folder/file.html
some/file.html => /folder/some/file.html
some/folder/ => /folder/some/folder/
./x.html => /folder/x.html
x.html

=> /folder/x.html

Слайд 44«Единицы измерения»
Адреса:
Относительные, От текущего адреса
/folder
../ => / (!!)
some/file.html => /some/file.html
some/folder/ =>

/some/folder/
./x.html => /x.html
x.html => /x.html

Слайд 45Валидация документов

Слайд 46Валидация
Существуют специальные утилиты/онлайн-сервисы для проверки правильности разметки – валидаторы.
http://validator.w3.org/

Валдиный документ –

хорошо!
Невалидный документ – тоже работает, но это плохо есть нюансы.

Слайд 47Валидация
Когда приходится намеренно ломать документ?
Проблемы совместимости браузеров
Различные странные задачи
Например, «вложенные ссылки»:

http://kizu.ru/fun/nested-links/

Слайд 48Валидация
Проводите валидацию!
Оставляйте только те несоответствия, для которых четко понятна причина и

необходимость.

Слайд 49Подведем итоги

Слайд 50Итоги

Слайд 51Итоги

Слайд 52Итоги


Слайд 53Итоги


Слайд 54Итоги


Слайд 55Итоги


Слайд 56Итоги




Слайд 57Итоги



Link

Слайд 58Итоги



Test





Link



Слайд 59Вопросы есть?

Слайд 61CSS

CSS – Cascading Style Sheet.

Каскадные таблицы стилей

Слайд 63CSS

Заголовок документа
Какой-то текст
Второй заголовок документа

color=‘#665d00’>Другой текст


Третий текст



Слайд 64CSS

Заголовок документа
Какой-то текст
Второй заголовок документа

color=‘#665d00’>Другой текст


Третий текст



Смешение структуры текста и его внешнего вида

Слайд 65CSS

Заголовок документа
Какой-то текст
Второй заголовок документа

color=‘#665d00’>Другой текст


Третий текст



Дублирующийся код

Слайд 66Базовые понятия

Иерархия элементов

Слайд 67Базовые понятия

Иерархия элементов


Заголовок
Текст
выделен


Еще текст




Слайд 68Базовые понятия

Иерархия элементов


Заголовок
Текст
выделен


Еще текст




Родительский элемент

Body, родитель для h1 и p (обоих)

Слайд 69Базовые понятия

Иерархия элементов


Заголовок
Текст
выделен


Еще текст




Родительский элемент

Body НЕ родитель для b

Слайд 70Базовые понятия

Иерархия элементов


Заголовок
Текст
выделен


Еще текст




Элемент-предок

Body предок для всех, кто внутри

Слайд 71Базовые понятия

Иерархия элементов


Заголовок
Текст
выделен


Еще текст




Элемент-сосед

Оба тэга p соседи для h1

Слайд 72Базовые понятия

Специальные атрибуты

Id
Уникальный идентификатор элемента в документе.
Элементов с таким значением id

в документе должно быть не больше одного

Слайд 73Базовые понятия

Специальные атрибуты

class
Значение – набор имен классов, разделенных пробелами
Предназначен для отнесения

элемента к одному или нескольким классам
Элементов одного класса в документе может быть любое количество

Слайд 74Базовые понятия

Специальные атрибуты

id
class

...

Слайд 75Базовые понятия

Подключение CSS

Тэг

Слайд 76Базовые понятия

Подключение CSS

Тэг
Тэг

body {
color: red;
}

Слайд 77Базовые понятия

Подключение CSS

Тэг
Тэг
Атрибут style
...

Слайд 78Базовые понятия

Подключение CSS

Тэг
Тэг
Атрибут style
Директива CSS @import
@import url(path/to/file.css);

Слайд 79Правила оформления

Слайд 80Правила оформления

...
селектор[, селектор ...] {
свойство: значение;
свойство: значение;

...
}
...

Слайд 81Правила оформления

@import url(...)

@media print {
...
}

@media (max-width: 600px) {

...
}

Слайд 82Селекторы

Слайд 83Селекторы

Универсальный

* {
color: red;
}


....




...





Слайд 84Селекторы

Селектор элемента

p, h1 {
color: red;
}


....




...


.....





Слайд 85Селекторы

Селектор класса

.intro {
color: red;
}


....




...


.....





Слайд 86Селекторы

Селектор идентификатора

#main {
color: red;
}


....




...


.....





Слайд 87Селекторы

Селектор потомков

#main p {
color: red;
}


....




...


.....





Слайд 88Селекторы

Селектор дочернего элемента

#main > p {
color: red;
}

id=“menu”>

....




...


.....


.

...

.




Слайд 89Селекторы

Селектор непосредственного cоседа

.intro + p {
color: red;
}

id=“menu”>

....




...


.....


.

...

.




Слайд 90Селекторы

Селектор cоседа

.intro + div {
color: red;
}

.intro ~ div

{
...
}



....




...


.....


.

...

.




Слайд 91Селекторы

Селектор атрибута

a[href^=“http:”] {
...
}


...
...

...
...


Слайд 92Селекторы

Селектор атрибута

[href] – есть атрибут
[href=“”] – атрибут равен
[href^=“”] – начинается на


[href$=“”] – заканчивается на
[href*=“”] – содержит
[href~=“”] – содержит слово


Слайд 93Селекторы

Селектор псевдокласса/псевдоэлемента

a:active {
...
}

Слайд 94Селекторы

Псевдоклассы

:active
:hover
:link
:not
:target
:visited

Слайд 95Селекторы

Псевдоэлементы

:first-letter


Long long time ago
In a galaxy far far away...

Слайд 96Селекторы

Псевдоэлементы

:before
:after


[ ]
Long long time ago
In a galaxy far far away...
[

]


Слайд 97Селекторы

Псевдоэлементы

:first-line
:selection

...


Слайд 98Свойства и значения

Слайд 99Свойства и значения

.marked {
color: red;
background: #BAADF0 url(img/pic.png);

margin: 10px auto;
width: 20px;
font: bold 12px Tahoma !important
}

Слайд 100Свойства и значения

.marked {
color: red;
background: #BAADF0 url(img/pic.png);

margin: 10px auto;
width: 20px;
font: bold 12px Tahoma !important
}

Слайд 101Применение правил.
Наследование и каскад.

Слайд 102Применение правил
Встроенные правила браузера
Правила браузера, заданные пользователем в настройках
Стиль, заданный автором

страницы
Наследуемые стили
Стили, заданные во внешних файлах
Стили, объявленные непосредственно на элементе
Правила с !important

Слайд 103Наследование


...
...


.highlight {
color: green;

border: 1px solid blue;
}

Слайд 104СSS-фреймворки

Слайд 105Фреймворки
Готовые библиотеки стилей позволяющие:
Располагать элементы на странице заданным образом
Колонки, строки фиксированных

или «резиновых» размеров
Стилизовать типовые элементы интерфейса (input, textarea, button) единым образом не меняя верстку (просто навесив класс)
Реализовать дополнительные элементы интерфейса, которых нет в браузере без код на JavaScript

Слайд 106Фреймворки
Twitter Bootstrap - http://getbootstrap.com/


Слайд 107Фреймворки
Twitter Bootstrap

Слайд 108СSS-процессоры

Слайд 109Процессоры
Утилиты, позволяющие более удобно писать CSS
Переменные
Вычисляемые выражения
Более простая запись для вложенных

элементов

Примеры:
LESS - http://lesscss.org/
SASS - http://sass-lang.com/
PostCSS - http://postcss.org/


Слайд 110Процессоры. LESS
@markColor: #FF0000;

#some {
color: @markColor;
.class {

color: @markColor + #00FF00;
}
}

Слайд 111Процессоры. LESS
@markColor: #FF0000;

#some {
color: @markColor;
.class {

color: @markColor + #00FF00;
}
}

#some {
color: #FF0000;
}
#some .class {
color: #FFFF00
}

Слайд 112Полезные ссылки

Слайд 113Полезные ссылки
http://htmlbook.ru - учебник, справочник
http://quirksmode.org/css/selectors/ - таблица совместимости селекторов и примеры
http://browserhacks.com

- справочник хаков для разных браузеров

Слайд 114Вопросы есть?

Слайд 115Спасибо за внимание!

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

Прощай РМК 279
Финансовый сервис Si Bis 242
fizkultminutka 208
0202 Vznik filozofie 417
prezentaciya odarennye deti 324
УРОК ЛИТЕРАТУРНОГОЧТЕНИЯРУССКИЕ НАРОДНЫЕ СКАЗКИ 233

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

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

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

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

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

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

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